/* ============================================================
   Learning Success — SHARED COMPONENTS + NAV THEMING
   Token-driven classes reused across patterns, plus the styling
   that themes Astra's *rendered* primary menu (no nav markup is
   hard-coded — see functions.php + SETUP.md).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* Body reading defaults — Lexend 18px / 1.55 per build target.
   Scoped to content so we don't fight Astra's own UI chrome. */
body {
  font-family: var(--font-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}
.ls-pattern {
  font-family: var(--font-body);
  font-size: var(--text-md);          /* 18px */
  line-height: var(--leading-normal); /* 1.55 */
  color: var(--text-body);
}
.ls-pattern h1, .ls-pattern h2, .ls-pattern h3,
.ls-pattern h4, .ls-pattern h5, .ls-pattern h6 {
  font-family: var(--font-display);   /* Fredoka */
  font-weight: var(--weight-semibold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
}
.ls-pattern a { text-decoration: none; }

/* Accessible focus ring everywhere in our patterns */
.ls-pattern a:focus-visible,
.ls-pattern button:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---- Buttons (always pill-shaped) ---------------------------------- */
.ls-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: var(--font-label); font-weight: var(--weight-semibold); font-size: 1.05rem;
  padding: 16px 30px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  text-decoration: none; line-height: 1;
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.ls-btn:active { transform: scale(0.96); }
.ls-btn--primary   { background: var(--blue-500);   color: #fff; box-shadow: var(--shadow-md); }
.ls-btn--primary:hover   { filter: brightness(0.94); }
.ls-btn--secondary { background: var(--orange-500); color: #fff; box-shadow: var(--shadow-md); }
.ls-btn--secondary:hover { filter: brightness(0.94); }
.ls-btn--success   { background: var(--green-500);  color: #fff; box-shadow: var(--shadow-md); }
.ls-btn--outline   { background: transparent; color: var(--blue-600); border: 2px solid var(--blue-200); }
.ls-btn--outline:hover   { background: var(--blue-50); }
.ls-btn--ghost     { background: transparent; color: var(--blue-600); }
.ls-btn--on-dark   { background: rgba(255,255,255,0.14); color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.ls-btn--on-dark:hover   { background: rgba(255,255,255,0.24); }

/* ---- Eyebrow label -------------------------------------------------- */
.ls-eyebrow {
  font: var(--font-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--color-secondary); display: inline-block; margin-bottom: 12px;
}
.ls-eyebrow--on-dark { color: var(--yellow-400); }

/* ---- Card ----------------------------------------------------------- */
.ls-card {
  background: var(--surface-card); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm); padding: 28px 30px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ls-card--interactive:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.ls-card--flat { box-shadow: none; border: 1px solid var(--border-subtle); }
.ls-card--accent-blue   { border-top: 4px solid var(--blue-500); }
.ls-card--accent-orange { border-top: 4px solid var(--orange-500); }
.ls-card--accent-green  { border-top: 4px solid var(--green-500); }
.ls-card--accent-red    { border-top: 4px solid var(--red-500); }

/* Icon chip inside cards */
.ls-chip {
  width: 54px; height: 54px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--blue-50);
}
.ls-chip svg { stroke: var(--blue-500); }

/* ---- Section shell -------------------------------------------------- */
.ls-section { max-width: var(--container-xl); margin: 0 auto; padding: 84px 32px; }
.ls-section--narrow { max-width: var(--container-lg); }

/* ---- Dark band ------------------------------------------------------ */
.ls-darkband {
  background: linear-gradient(155deg, var(--blue-900), var(--blue-700));
  padding: 84px 32px; overflow: hidden; position: relative; color: var(--blue-100);
}
.ls-darkband h2, .ls-darkband h3 { color: #fff; }

/* ---- Footer link ---------------------------------------------------- */
.ls-footer-link {
  font: var(--font-label); color: var(--blue-200);
  transition: color var(--dur-fast) var(--ease-out);
}
.ls-footer-link:hover { color: #fff; }

/* ---- Photo slot placeholder ----------------------------------------- */
.ls-photo-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--blue-50); color: var(--text-muted);
  font: var(--font-label); padding: 16px; line-height: 1.4;
}

/* ---- Decorative animations ------------------------------------------ */
@keyframes ls-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes ls-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ls-pattern *, .ls-pattern *::before, .ls-pattern *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================
   NAV THEMING — styles Astra's RENDERED primary menu.
   We do NOT output menu markup; the menu is built in
   Appearance -> Menus and rendered by Astra. These rules hook
   onto Astra's menu container classes and onto three optional
   per-item CSS classes the editor adds in wp-admin:
     .ls-nav-cta       -> pill button (the "Start Free Trial" item)
     .ls-nav-featured  -> elevated "All Access" dropdown row
     .ls-nav-label     -> non-clickable "Included in All Access:" label
   Astra applies these classes to the <li>. See SETUP.md.
   ============================================================ */

/* Menu typography = Lexend, tokenized. Targets both the legacy
   primary menu and the Header Builder menu container. */
.main-header-menu .menu-item > a,
.ast-nav-menu .menu-item > a,
.ast-hfb-menu-1 .menu-item > a {
  font: var(--font-label);
  font-weight: var(--weight-medium);
  color: var(--text-body);
  transition: color var(--dur-fast) var(--ease-out);
}
.main-header-menu .menu-item > a:hover,
.ast-nav-menu .menu-item > a:hover,
.ast-nav-menu .current-menu-item > a {
  color: var(--blue-600);
}

/* Dropdown panel — soft, rounded, tokenized shadow */
.ast-nav-menu .sub-menu,
.main-header-menu .sub-menu {
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
  background: #fff;
}
.ast-nav-menu .sub-menu .menu-item > a { border-radius: 11px; padding: 9px 12px; }
.ast-nav-menu .sub-menu .menu-item > a:hover { background: var(--blue-50); color: var(--blue-700); }

/* .ls-nav-featured — the elevated "All Access" row inside the dropdown */
.menu-item.ls-nav-featured > a {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: 14px; padding: 13px 15px !important;
  font-weight: var(--weight-bold); color: var(--blue-700) !important;
  transition: background var(--dur-fast) var(--ease-out);
}
.menu-item.ls-nav-featured > a:hover { background: var(--blue-100); }
/* The item's description (enable "Description" in Menus screen options)
   renders as the muted sub-line "Everything below, one plan". */
.menu-item.ls-nav-featured .ast-menu-description,
.menu-item.ls-nav-featured .menu-description {
  font: var(--font-label); font-weight: var(--weight-regular);
  color: var(--text-muted); font-size: 0.82rem;
}

/* .ls-nav-label — the non-clickable divider label */
.menu-item.ls-nav-label { pointer-events: none; }
.menu-item.ls-nav-label > a {
  font: var(--font-eyebrow); text-transform: uppercase; letter-spacing: 0.09em;
  font-size: 0.68rem; color: var(--text-faint) !important;
  padding: 8px 12px 4px !important; cursor: default;
  border-top: 1px solid var(--border-subtle); margin-top: 6px;
}

/* .ls-nav-cta — the last item becomes the pill button */
.menu-item.ls-nav-cta > a {
  background: var(--blue-500); color: #fff !important;
  padding: 11px 20px !important; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); font-weight: var(--weight-semibold);
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.menu-item.ls-nav-cta > a:hover { filter: brightness(0.94); color: #fff !important; }
.menu-item.ls-nav-cta > a:active { transform: scale(0.96); }

/* Sticky header spacing so in-page anchors clear the fixed bar */
html { scroll-padding-top: 90px; }

/* ---- Breadcrumbs (hardcoded at the top of library page patterns) --- */
.ls-crumbs {
  display: block; font: var(--font-label); font-size: 0.85rem;
  color: var(--text-muted); margin: 0 0 18px; line-height: 1.5;
}
.ls-crumbs a { color: var(--blue-600); text-decoration: none; }
.ls-crumbs a:hover { color: var(--blue-700); text-decoration: underline; text-underline-offset: 2px; }
.ls-crumbs .here { color: var(--text-muted); }
.ls-crumbs span[aria-hidden] { color: var(--text-faint); margin: 0 3px; }

/* ============================================================
   SHARED: SITE FOOTER (rendered site-wide via functions.php)
   ============================================================ */
.ls-footer { background: var(--blue-900); color: var(--blue-100); padding: 56px 32px 34px; }
.ls-footer__grid {
  max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ls-footer__brand img { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: 16px; }
.ls-footer__brand p { font: var(--font-label); line-height: 1.6; color: var(--blue-200); margin: 0; max-width: 280px; }
.ls-footer__col h2 { font: var(--font-eyebrow); text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin: 0 0 14px; }
.ls-footer__links { display: flex; flex-direction: column; gap: 10px; }
.ls-footer__bar {
  max-width: 1200px; margin: 0 auto; padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.ls-footer__bar span { font: var(--font-label); color: var(--blue-300); font-size: 0.82rem; }
@media (max-width: 860px) { .ls-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ls-footer__grid { grid-template-columns: 1fr; } }

/* ============================================================
   SHARED: MEMBERSHIP CTA BAND  (pattern learning-success/cta-band)
   Uses .ls-cta from above; this adds the outer section + button row.
   ============================================================ */
.ls-ctaband { padding: 40px 32px 88px; }
.ls-ctaband .ls-cta__inner { position: relative; max-width: 640px; margin: 0 auto; }
.ls-ctaband .ls-cta h2 { font: var(--font-h1); color: #fff; margin: 0 0 16px; }
.ls-ctaband .ls-cta p { font: var(--font-body-md); color: var(--blue-100); margin: 0 0 32px; }
.ls-ctaband .ls-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   SHARED: PROGRAM BLOCK  (pattern learning-success/program-block)
   Closes library/skill pages with the membership trial CTA.
   ============================================================ */
.ls-progblock { max-width: var(--container-lg); margin: 0 auto; padding: 40px 32px 84px; }
.ls-progblock__inner {
  background: var(--blue-50); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl); padding: 48px 44px; text-align: center;
}
.ls-progblock__inner h2 { font: var(--font-h2); color: var(--text-strong); margin: 0 0 16px; }
.ls-progblock__inner p { font: var(--font-body-md); color: var(--text-body); margin: 0 auto 12px; max-width: 720px; }
.ls-progblock__micro { font: var(--font-label); color: var(--text-muted); margin: 8px 0 20px; }
.ls-progblock__research { font: var(--font-label); font-style: italic; color: var(--text-muted); margin: 18px 0 0; }
.ls-progblock__research a { color: var(--blue-600); text-decoration: underline; text-underline-offset: 3px; }