/* ==========================================================================
   SOUL LUMOS THEME — SOFT OAT, EARTH TERRACOTTA (PRIMARY) & DEEP OLIVE (HOVER)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* 1. TYPOGRAPHY */
  --font-serif: 'Italiana', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 2. SUBTLE OAT & EARTH TERRACOTTA (PRIMARY) / OLIVE (ACCENT/HOVER) */
  --bg-main: #F7F4EE;          /* Soft Natural Oat Silk */
  --bg-surface: #FFFFFF;       /* Clean Alabaster Cards */
  --bg-subtle: #EDE7DC;        /* Warm Sun-Washed Sand Wash */
  --bg-dark: #231C18;          /* Deep Espresso Slate */

  --color-primary: #231C18;    /* Deep Espresso Charcoal */
  --color-body: #423832;       /* Warm Earth Walnut Text */
  --color-muted: #82766D;      /* Soft Mineral Muted */
  
  --color-accent: #8E4A32;     /* Earthy Brown Terracotta */
  --color-copper: #8E4A32;     /* Earthy Brown Terracotta */
  --color-olive: #3B4A23;      /* Deep Forest Olive */
  --color-wheat: #556B2F;      /* Muted Herb Green */

  /* 3. BUTTONS & UI (TERRACOTTA DEFAULT -> OLIVE HOVER) */
  --btn-primary-bg: #8E4A32;     /* Earthy Brown Terracotta Default */
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #3B4A23;  /* Deep Forest Olive on Hover */

  --border-warm: #E2D9CC;
  --border-focus: #8E4A32;
  --halo-border: rgba(142, 74, 50, 0.55);
  
  --shadow-subtle: 0 8px 24px -4px rgba(35, 28, 24, 0.04);
  --shadow-card: 0 16px 36px -8px rgba(35, 28, 24, 0.06);
  --shadow-floating: 0 24px 48px -12px rgba(35, 28, 24, 0.12);
}

/* ==========================================================================
   BASE & TYPOGRAPHY SYSTEM
   ========================================================================== */
body {
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--color-body);
  letter-spacing: -0.01em;
}

::selection {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

h1, h2, h3, h4, .font-serif {
  font-family: var(--font-serif);
  color: var(--color-primary);
  font-weight: 400;
}

/* Global Theme Classes */
.theme-bg-main { background-color: var(--bg-main) !important; }
.theme-bg-surface { background-color: var(--bg-surface) !important; }
.theme-bg-subtle { background-color: var(--bg-subtle) !important; }
.theme-bg-dark { background-color: var(--bg-dark) !important; }
.theme-text-primary { color: var(--color-primary) !important; }
.theme-text-body { color: var(--color-body) !important; }
.theme-text-muted { color: var(--color-muted) !important; }
.theme-text-accent { color: var(--color-accent) !important; }
.theme-text-copper { color: var(--color-copper) !important; }
.theme-text-wheat { color: var(--color-wheat) !important; }
.theme-text-olive { color: var(--color-olive) !important; }
.theme-border { border-color: var(--border-warm) !important; }

/* -----------------------------------------------------------------------------
   HOVER VERSIONS OF THE THEME CLASSES

   Every page writes hover:theme-text-primary on its navigation and footer links,
   which reads like Tailwind but is not: Tailwind only builds hover: rules for
   classes it recognises as its own, and the theme-* classes above are ours.
   So none of those links had any hover feedback at all - the desktop menu, all
   seven footer links and the footer contact details just sat there.

   Writing the rules out by hand here fixes every one of those links at once,
   with no change needed to any page. The escaped colon is how CSS refers to a
   class whose name literally contains a colon.
   -------------------------------------------------------------------------- */
.hover\:theme-text-primary:hover { color: var(--color-primary) !important; }
.hover\:theme-text-accent:hover  { color: var(--color-accent)  !important; }
.hover\:theme-text-body:hover    { color: var(--color-body)    !important; }
.hover\:theme-text-muted:hover   { color: var(--color-muted)   !important; }
.hover\:theme-bg-subtle:hover    { background-color: var(--bg-subtle)  !important; }
.hover\:theme-bg-surface:hover   { background-color: var(--bg-surface) !important; }

/* A plain, self-contained navigation link: muted until you point at it. */
.theme-nav-link { transition: color 0.2s ease; }
.theme-nav-link:hover { color: var(--color-primary) !important; }

/* Buttons */
.theme-btn-primary {
  background-color: var(--btn-primary-bg) !important;
  color: var(--btn-primary-text) !important;
  border-radius: 9999px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.65rem 1.4rem !important;
  min-height: 38px !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  box-shadow: 0 6px 18px -3px rgba(142, 74, 50, 0.28) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme-btn-primary:hover {
  background-color: var(--btn-primary-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -4px rgba(59, 74, 35, 0.32) !important;
}

.theme-btn-outline {
  background-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px) !important;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--border-warm) !important;
  border-radius: 9999px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.65rem 1.4rem !important;
  min-height: 38px !important;
  cursor: pointer;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.theme-btn-outline:hover {
  background-color: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-color: var(--color-accent) !important;
  transform: translateY(-1px);
}

.theme-badge {
  background-color: var(--bg-subtle) !important;
  color: var(--color-accent) !important;
  border: 1px solid var(--border-warm) !important;
  border-radius: 9999px !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.9rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem;
}

.theme-badge-dot {
  background-color: var(--color-accent) !important;
}

/* Bento Cards */
.bento-card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-warm);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-floating);
}

/* Spinning Hero Halo */
@keyframes spin-halo {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.halo-ring {
  border-color: var(--halo-border);
  animation: spin-halo 28s linear infinite;
  will-change: transform;
}

/* Form Inputs */
.theme-input {
  background-color: var(--bg-main);
  border: 1px solid var(--border-warm);
  color: var(--color-primary);
  border-radius: 0.75rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.theme-input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px var(--border-focus);
}

/* Social Dock Hover */
.social-icon-link {
  color: var(--color-primary);
  transition: color 0.2s ease-in-out;
}

.social-icon-link:hover {
  color: var(--color-accent);
}

/* ---------------------------------------------------------------------------
   MOBILE HEADER

   The top bar holds the logo on the left and a row of buttons on the right.
   On a wide screen they all fit. On a phone they do not, and a button that does
   not fit pushes the whole page sideways: the visitor gets a horizontal
   scrollbar, the logo slides off the left edge, and text runs past the right.

   ".header-desktop-btn" marks the buttons that are only worth showing when
   there is room. Below 1024px they are hidden; the same links are all still
   reachable from the hamburger menu, so nothing becomes unavailable.

   THIS USED TO BE COPY-PASTED INTO EACH PAGE'S OWN <style> BLOCK, and shop.html
   was missing it - so on the shop the "Begin Practice" button stayed on screen
   and pushed the header 142px off the side of every phone. Defining it once,
   here, is what stops that happening again to the next page added.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .header-desktop-btn { display: none !important; }
}
@media (min-width: 1024px) {
  .header-desktop-btn { display: inline-flex !important; }
}

/* ---------------------------------------------------------------------------
   THE WORDMARK ON A NARROW PHONE

   "SOUL LUMOS" is set in Italiana with wide letter-spacing, which is what makes
   it look like a wordmark rather than a sentence. The cost is width: at 24px
   with 0.25em spacing it is about 160px on its own, and the header has to fit
   that PLUS the shop pill, the portal pill and the hamburger.

   On a 320px-wide phone (an iPhone SE, and plenty of cheap Androids) that does
   not fit, and the overspill pushed the whole page sideways. Every page carried
   its own hand-tuned size for this, so some pages coped and others did not.

   One rule, applied through the ".site-wordmark" class on every page's header,
   tightens it just below the common phone width. Wide screens are untouched, so
   the brand still looks exactly as intended everywhere it has room.
   --------------------------------------------------------------------------- */
@media (max-width: 400px) {
  .site-wordmark {
    font-size: 0.9rem !important;
    letter-spacing: 0.06em !important;
  }
}

/* Nothing decorative may cause a sideways scrollbar.

   Put this on a block whose decoration is allowed to spill past its own edges.
   It stops that spill from widening the page, without hiding anything real.

   The case it was written for: the homepage portrait sits inside two rings that
   are square <div>s rounded into circles and then slowly spun. Rotating a square
   grows its LAYOUT box by up to 41% even though the circle you can see never
   moves an inch - and the browser counts that invisible box as page content. So
   on a 320px phone the homepage measured 338px and juddered sideways for no
   visible reason at all. The corners being clipped away are transparent.

   "clip" rather than "hidden" on purpose: "hidden" would make the block a scroll
   container, which breaks position:sticky inside it and lets the block be
   scrolled by touch. "clip" just clips. */
.hero-clip { overflow-x: clip; }

/* ---------------------------------------------------------------------------
   Hiding something must actually hide it.  KEEP THIS LAST IN THE FILE.

   The button rules above set "display" with !important so the pill shape
   survives Tailwind's own utility classes. The side effect was that Tailwind's
   ordinary ".hidden { display: none }" lost that argument: anything the site
   tried to hide that also carried a theme-btn class stayed stubbornly on
   screen - the "Confirm booking" bar, the two-factor code box, hidden alerts.

   So .hidden needs the same weight - BUT ONLY AGAINST THOSE BUTTON RULES.

   THIS USED TO SAY  .hidden { display: none !important; }  AND THAT ONE LINE
   HID THE ENTIRE DESKTOP NAVIGATION BAR ON EVERY PAGE OF THE SITE.

   Here is the whole mechanism, because it is worth understanding once. The way
   you show something only on bigger screens is to write two classes together:

       class="hidden lg:flex"        hide it, then from 1024px up make it a flex

   Tailwind writes those two rules WITHOUT !important. An unqualified
   ".hidden { display: none !important }" therefore beats "lg:flex" - and it
   beats it at EVERY screen width, because !important outranks a normal
   declaration no matter which media query the normal one sits in. Media queries
   decide whether a rule applies; they do nothing for who wins once two rules
   both apply. So "show this from 1024px up" silently became "never show this".

   Sixteen things went invisible on desktop that way, and nobody noticed for a
   while because they were all still fine on a phone (where "hidden" is what you
   actually want) and the mobile drawer carried duplicates of the same links:
   eight desktop nav bars, the four Student Portal buttons, the Agreement button
   and the "Shop" label in the portal, and the admin panel's sign-out cluster.

   The fix is to stop making a blanket claim and name the actual opponents. The
   three rules above that set "display: inline-flex !important" are
   .theme-btn-primary, .theme-btn-outline and .theme-badge, so those are the
   only three .hidden ever needed to beat. Listing them makes each selector two
   classes wide, which outranks the one-class button rule on specificity, while
   leaving Tailwind's responsive utilities completely alone.

   .header-desktop-btn is in the list as cheap insurance: nothing currently adds
   "hidden" to one of those, but it also sets display with !important, so if
   anything ever does, it should lose to "hidden" like the rest.

   Across the whole site exactly ONE element genuinely depends on this - the
   retry button at portal.html:195, which is "hidden theme-btn-primary" - so
   the narrow version is not a compromise, it is simply the correct rule.

   Still last in the file: equal specificity plus equal !important means the
   later rule wins, so this has to sit after the button rules it is overriding.
   --------------------------------------------------------------------------- */
.hidden.theme-btn-primary,
.hidden.theme-btn-outline,
.hidden.theme-badge,
.hidden.header-desktop-btn { display: none !important; }