/* ==============================================================
   PySprings — Full custom theme
   Logo palette:
     Golden Orange (Py):  #E8940C / #F0A020 / #F5B731
     Snake Green:         #4A7A2B / #6B9B3A / #8CB43A
     Snake Belly:         #C4B73B
     Charcoal (Sp):       #2D2D2D / #3A3A3A
     Snake Eyes:          #E8940C (matches Py)
     Pikes Peak sky:      #3B7DD8 / #557398
   ============================================================== */

/* ================================================================
   NEUROPOL FONT (CC0 Public Domain — dafont.com/neuropol.font)
   ================================================================ */
@font-face {
  font-family: "Neuropol";
  src: url("../fonts/Neuropol.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
   CSS CUSTOM PROPERTIES
   ================================================================ */
:root,
[data-md-color-scheme="default"] {
  /* -- brand -- */
  --py-orange:           #E8940C;
  --py-orange-light:     #F5B731;
  --py-orange-glow:      rgba(232, 148, 12, 0.15);
  --py-green:            #4A7A2B;
  --py-green-light:      #6B9B3A;
  --py-green-bright:     #8CB43A;
  --py-green-glow:       rgba(74, 122, 43, 0.12);
  --py-charcoal:         #2D2D2D;
  --py-charcoal-light:   #3A3A3A;
  --py-sky:              #3B7DD8;
  --py-sky-muted:        #557398;

  /* -- Material overrides -- */
  --md-primary-fg-color:            var(--py-charcoal);
  --md-primary-fg-color--light:     var(--py-sky-muted);
  --md-primary-fg-color--dark:      #1a1a1a;
  --md-primary-bg-color:            #fff;
  --md-accent-fg-color:             var(--py-orange);
  --md-accent-fg-color--transparent: var(--py-orange-glow);
  --md-typeset-a-color:             var(--py-green);

  /* -- surfaces -- */
  --py-bg-warm:          #FFFCF5;
  --py-bg-card:          #fff;
  --py-border-subtle:    rgba(0,0,0,0.08);
}

[data-md-color-scheme="slate"] {
  --py-orange:           #F5B731;
  --py-orange-light:     #FFD060;
  --py-green-light:      #8CB43A;
  --py-green-bright:     #A8D44A;
  --md-accent-fg-color:  var(--py-orange);
  --md-typeset-a-color:  var(--py-green-bright);
  --py-bg-warm:          #1e1e1e;
  --py-bg-card:          #2a2a2a;
  --py-border-subtle:    rgba(255,255,255,0.08);
}

/* ================================================================
   GLOBAL TYPOGRAPHY
   ================================================================ */
.md-typeset {
  font-size: 0.82rem;
}

.md-typeset h1 {
  font-family: "Neuropol", Georgia, sans-serif;
  font-weight: 700;
  color: var(--py-charcoal);
  letter-spacing: -0.02em;
}
[data-md-color-scheme="slate"] .md-typeset h1 {
  color: var(--py-orange-light);
}

.md-typeset h2 {
  font-family: "Neuropol", Georgia, sans-serif;
  color: var(--py-sky-muted);
  border-bottom: 2px solid var(--py-orange-glow);
  padding-bottom: 0.3rem;
}

.md-typeset h3 {
  color: var(--py-green);
}
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: var(--py-green-bright);
}

/* ================================================================
   LINKS
   ================================================================ */
.md-typeset a {
  color: var(--md-typeset-a-color);
  text-decoration-color: transparent;
  transition: all 0.25s ease;
}
.md-typeset a:hover {
  color: var(--py-orange);
  text-decoration-color: var(--py-orange);
}

/* ================================================================
   HEADER & NAV
   ================================================================ */
.md-header {
  background: linear-gradient(135deg, var(--py-charcoal) 0%, #1a1a1a 100%);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.md-header__title {
  font-family: "Neuropol", Georgia, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Nav tabs */
.md-tabs {
  background: linear-gradient(180deg, var(--py-charcoal) 0%, #222 100%);
  border-bottom: 3px solid var(--py-orange);
}
.md-tabs__link {
  font-weight: 600;
  opacity: 0.7;
  transition: all 0.3s ease;
}
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--py-orange-light) !important;
  opacity: 1;
}

/* Search bar glow */
.md-search__input:focus {
  box-shadow: 0 0 0 3px var(--py-orange-glow);
}

/* ================================================================
   SIDEBAR
   ================================================================ */
.md-nav__link--active {
  color: var(--py-orange) !important;
  font-weight: 700;
}
.md-nav__link:hover {
  color: var(--py-green) !important;
}

/* ================================================================
   CODE BLOCKS — rich dark with orange accents
   ================================================================ */
.md-typeset code {
  background: rgba(45, 45, 45, 0.06);
  color: var(--py-charcoal);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
}
[data-md-color-scheme="slate"] .md-typeset code {
  background: rgba(255,255,255,0.08);
  color: #e0e0e0;
}

.md-typeset pre > code {
  border-left: 4px solid var(--py-orange);
}

/* Copy button */
.md-clipboard:hover {
  color: var(--py-orange);
}

/* ================================================================
   TABLES — branded headers, striped rows
   ================================================================ */
.md-typeset table:not([class]) {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 6px var(--py-border-subtle);
}
.md-typeset table:not([class]) th {
  background: linear-gradient(135deg, var(--py-charcoal) 0%, var(--py-charcoal-light) 100%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.75rem 1rem;
}
.md-typeset table:not([class]) td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--py-border-subtle);
}
.md-typeset table:not([class]) tr:nth-child(even) td {
  background: var(--py-bg-warm);
}
.md-typeset table:not([class]) tr:hover td {
  background: var(--py-orange-glow);
}

/* ================================================================
   ADMONITIONS — branded
   ================================================================ */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--py-green);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: var(--py-green-glow);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  color: var(--py-green);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-color: var(--py-orange);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  background-color: var(--py-orange-glow);
}

/* ================================================================
   HERO — Landing page showstopper
   ================================================================ */
.hero {
  text-align: center;
  padding: 2rem 1rem 3rem;
  position: relative;
}

.hero-logo {
  width: 160px;
  height: auto;
  margin-bottom: 1rem;
  filter: drop-shadow(0 4px 16px rgba(232, 148, 12, 0.25));
  animation: hero-float 4s ease-in-out infinite;
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.hero h1 {
  font-size: 3.2rem;
  font-family: "Neuropol", Georgia, sans-serif;
  font-weight: 700;
  margin-bottom: 0.15rem;
  background: linear-gradient(135deg, var(--py-charcoal) 0%, var(--py-sky-muted) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-md-color-scheme="slate"] .hero h1 {
  background: linear-gradient(135deg, var(--py-orange-light) 0%, var(--py-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.hero .subtitle {
  font-size: 1.15rem;
  font-weight: 500;
  opacity: 0.75;
  margin-bottom: 1.5rem;
  letter-spacing: 0.03em;
}

.hero .schedule {
  font-size: 0.95rem;
  margin-bottom: 2rem;
  line-height: 2;
}
.hero .schedule a {
  font-weight: 600;
}

.hero .buttons,
.hero .buttons p {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.hero .buttons a {
  padding: 0.85rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.hero .buttons .primary {
  background: linear-gradient(135deg, var(--py-orange) 0%, #D07A00 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(232, 148, 12, 0.35);
}
.hero .buttons .primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(232, 148, 12, 0.45);
  color: #fff;
}

.hero .buttons .secondary {
  background: linear-gradient(135deg, var(--py-green) 0%, #3D6520 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(74, 122, 43, 0.3);
}
.hero .buttons .secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(74, 122, 43, 0.4);
  color: #fff;
}

/* ================================================================
   SKILL PATH CARDS
   ================================================================ */
.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

.path-card {
  background: var(--py-bg-card);
  border: 1px solid var(--py-border-subtle);
  border-radius: 10px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}
.path-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--py-orange), var(--py-green-bright));
}
.path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  border-color: var(--py-orange);
}
[data-md-color-scheme="slate"] .path-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

.path-card h3 {
  margin: 0 0 0.5rem;
  font-family: "Neuropol", Georgia, sans-serif;
  font-size: 1.15rem;
  border: none !important;
  padding: 0 !important;
}
.path-card h3 a {
  color: var(--py-charcoal) !important;
  text-decoration: none;
}
.path-card:hover h3 a {
  color: var(--py-orange) !important;
}
[data-md-color-scheme="slate"] .path-card h3 a {
  color: var(--py-orange-light) !important;
}

.path-card p {
  margin: 0;
  opacity: 0.75;
  font-size: 0.85rem;
  line-height: 1.5;
}

.path-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* Color-coded top bars per path */
.path-card.path-started::before   { background: linear-gradient(90deg, #3B7DD8, #60A0E8); }
.path-card.path-stdlib::before    { background: linear-gradient(90deg, var(--py-green), var(--py-green-bright)); }
.path-card.path-ai::before        { background: linear-gradient(90deg, #8B5CF6, #C084FC); }
.path-card.path-security::before  { background: linear-gradient(90deg, #DC2626, #F87171); }
.path-card.path-testing::before   { background: linear-gradient(90deg, var(--py-orange), var(--py-orange-light)); }
.path-card.path-packaging::before { background: linear-gradient(90deg, #0891B2, #22D3EE); }

/* ================================================================
   MERMAID DIAGRAMS — branded colors
   ================================================================ */
.mermaid {
  text-align: center;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--py-bg-warm);
  border-radius: 10px;
  border: 1px solid var(--py-border-subtle);
}

/* ================================================================
   DIFFICULTY STARS
   ================================================================ */
.md-typeset .twemoji.twemoji-star {
  color: var(--py-orange);
}

/* ================================================================
   FOOTER
   ================================================================ */
.md-footer {
  background: var(--py-charcoal);
}
.md-footer a:hover {
  color: var(--py-orange-light);
}

/* ================================================================
   MISC POLISH
   ================================================================ */

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: var(--py-orange-glow);
  color: var(--py-charcoal);
}

/* Badge-style tags */
.md-typeset .md-tag {
  background: var(--py-green-glow);
  color: var(--py-green);
  border: 1px solid var(--py-green);
  border-radius: 12px;
  padding: 0.1em 0.6em;
  font-size: 0.75em;
  font-weight: 600;
}

/* Status badges in project tables */
.status-active {
  color: var(--py-green);
  font-weight: 700;
}
.status-ongoing {
  color: var(--py-orange);
  font-weight: 700;
}
.status-inactive {
  opacity: 0.5;
}

/* Subtle separator for wiki topic metadata tables */
.md-typeset table:not([class]) tr:first-child td:first-child {
  font-weight: 700;
  white-space: nowrap;
}

/* Responsive logo in header */
.md-header__button.md-logo img {
  height: 1.8rem;
  width: auto;
}