/*
Theme Name: English Evolution Academy
Theme URI: https://englishevolutionacademy.com
Author: Globotech Solutions
Author URI: https://globotechsolutions.com
Description: Custom WordPress theme for English Evolution Academy — an online English-speaking coaching business. Liquid Glass marketing site plus a login-gated customer dashboard page that surfaces the SureCart customer dashboard to logged-in users.
Version: 1.0.44
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: english-evolution-academy
*/

/* English Evolution Academy — design tokens + Liquid Glass component styles
   Tailwind CDN handles layout/utility classes; this file covers tokens,
   glass effects, motion keyframes, and bespoke components. */

:root {
  --color-primary: #19818F;
  --color-primary-dark: #0E5259;
  --color-primary-light: #5FB2BE;
  --color-coral: #F0997E;
  --color-coral-light: #FBCBB9;
  --color-gold: #F3BD3B;
  --color-cream: #FDF6EC;
  --color-cream-dark: #F3E9D8;
  --color-ink: #12211E;
  --color-ink-soft: #3C4A47;
  --color-white: #FFFFFF;

  --space-1: 16px;
  --space-2: 24px;
  --space-3: 32px;
  --space-4: 48px;
  --space-5: 64px;
  --space-6: 96px;

  --radius-card: 20px;
  --radius-panel: 28px;
  --radius-pill: 999px;

  --shadow-soft: 0 12px 32px rgba(18, 33, 30, 0.12);
  --shadow-lift: 0 20px 48px rgba(18, 33, 30, 0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', system-ui, sans-serif;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1, h2, h3, h4 {
  color: var(--color-ink);
}

a { color: inherit; }

/* Visible focus ring on every interactive element — accessibility requirement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-ink);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  z-index: 200;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Liquid Glass surfaces ---------- */

.glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-soft);
}

.glass-dark {
  background: rgba(18, 33, 30, 0.42);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.glass-nav {
  background: rgba(253, 246, 236, 0.72);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(18, 33, 30, 0.06);
  transition: box-shadow 300ms var(--ease-out), background 300ms var(--ease-out);
}
.glass-nav.is-scrolled {
  box-shadow: 0 8px 24px rgba(18, 33, 30, 0.08);
}

/* Mobile nav panel — hand-written rather than composed from Tailwind's
   inset-0 + top-20 + bg-color/opacity utilities, which don't combine
   reliably (shorthand/longhand order conflicts, opacity-modifier edge
   cases on custom theme colors); this guarantees a solid, correctly
   sized panel that fully occludes the page behind it.
   Uses opacity/visibility (not display:none) so the panel stays in the
   render tree while closed — required for the link stagger transition
   below to actually animate on open, instead of snapping in instantly. */
.mobile-menu-panel {
  position: fixed;
  top: 80px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: rgba(253, 246, 236, 0.98);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms var(--ease-out), visibility 0ms linear 260ms;
}
.mobile-menu-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms var(--ease-out);
}

/* Soft brand-color glow blobs, echoing the hero's Liquid Glass blob field */
.mobile-menu-panel::before,
.mobile-menu-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  filter: blur(60px);
  pointer-events: none;
}
.mobile-menu-panel::before {
  top: -60px;
  right: -70px;
  width: 220px;
  height: 220px;
  background: rgba(25, 129, 143, 0.16);
}
.mobile-menu-panel::after {
  bottom: 12%;
  left: -90px;
  width: 220px;
  height: 220px;
  background: rgba(240, 153, 126, 0.16);
}

.mobile-nav {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-2) var(--space-4);
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: 18px 12px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-ink);
  border-bottom: 1px solid rgba(18, 33, 30, 0.08);
  border-left: 3px solid transparent;
  border-radius: 0 12px 12px 0;
  opacity: 0;
  transform: translateY(10px);
  transition: color 200ms var(--ease-out), background 200ms var(--ease-out),
    border-color 200ms var(--ease-out), padding-left 200ms var(--ease-out),
    opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.mobile-nav-link svg { opacity: 0.4; flex-shrink: 0; transition: transform 200ms var(--ease-out); }
.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
  color: var(--color-primary-dark);
  background: rgba(25, 129, 143, 0.07);
  padding-left: 18px;
}
.mobile-nav-link:hover svg,
.mobile-nav-link:focus-visible svg { transform: translateX(3px); opacity: 0.8; }
.mobile-nav-link.is-active {
  color: var(--color-primary-dark);
  border-left-color: var(--color-primary);
  background: rgba(25, 129, 143, 0.08);
}
.mobile-nav-link.is-active svg { opacity: 0.8; }

.mobile-menu-panel[data-open="true"] .mobile-nav-link {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav-link:nth-child(1) { transition-delay: 60ms; }
.mobile-nav-link:nth-child(2) { transition-delay: 100ms; }
.mobile-nav-link:nth-child(3) { transition-delay: 140ms; }
.mobile-nav-link:nth-child(4) { transition-delay: 180ms; }
.mobile-nav-link:nth-child(5) { transition-delay: 220ms; }
.mobile-nav-link:nth-child(6) { transition-delay: 260ms; }

.mobile-nav-cta {
  margin-top: var(--space-2);
  width: 100%;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 320ms var(--ease-out) 300ms, transform 320ms var(--ease-out) 300ms,
    background 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.mobile-menu-panel[data-open="true"] .mobile-nav-cta {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav-link, .mobile-nav-cta { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* Hamburger toggle — teal glass pill that flips to a solid teal circle
   with the close icon, so it reads as themed brand chrome, not a plain
   black/white system icon. */
.nav-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(25, 129, 143, 0.1);
  border: 1px solid rgba(25, 129, 143, 0.2);
  color: var(--color-primary-dark);
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out),
    color 200ms var(--ease-out), transform 150ms var(--ease-out);
}
.nav-toggle-btn:hover { background: rgba(25, 129, 143, 0.18); }
.nav-toggle-btn:active { transform: scale(0.93); }
.nav-toggle-btn[aria-expanded="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Hamburger <-> close icon swap on the mobile nav toggle button */
[data-nav-toggle] .icon-close { display: none; }
[data-nav-toggle][aria-expanded="true"] .icon-menu { display: none; }
[data-nav-toggle][aria-expanded="true"] .icon-close { display: block; }

/* Chromatic-edge glow: a soft warm iridescent rim instead of literal chromatic aberration */
.glass-glow {
  position: relative;
  isolation: isolate;
}
.glass-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, rgba(240,153,126,.55), rgba(25,129,143,.4), rgba(243,189,59,.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* ---------- Hero morphing blobs ---------- */

.blob-field { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  animation: blob-float 18s var(--ease-out) infinite alternate;
}
.blob-1 { width: 420px; height: 420px; background: var(--color-primary); top: -120px; left: -80px; animation-delay: 0s; }
.blob-2 { width: 320px; height: 320px; background: var(--color-coral); bottom: -100px; right: -60px; animation-delay: -6s; }
.blob-3 { width: 260px; height: 260px; background: var(--color-gold); top: 30%; right: 15%; opacity: 0.35; animation-delay: -12s; }

@keyframes blob-float {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -20px) scale(1.08); }
  100% { transform: translate(-20px, 25px) scale(0.96); }
}

/* ---------- Gecko float ---------- */

.gecko-float { animation: gecko-float 6s var(--ease-out) infinite; }
@keyframes gecko-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-14px) rotate(1deg); }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 16px;
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out), background 250ms var(--ease-out);
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-lift); }

.btn-gold {
  background: var(--color-gold);
  color: var(--color-ink);
  box-shadow: var(--shadow-soft);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); filter: brightness(1.04); }

.btn-glass {
  background: rgba(255,255,255,0.7);
  color: var(--color-ink);
  border: 1px solid rgba(18,33,30,0.1);
}
.btn-glass:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); }

/* Form status messages (newsletter + login forms). JS sets data-state;
   server-rendered login errors carry data-state="error" too. */
[data-form-status][data-state="error"] { color: #C0392B; }
[data-form-status][data-state="success"] { color: var(--color-primary-dark); }

.btn-outline-light {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,0.7);
}
.btn-outline-light:hover { background: rgba(255,255,255,0.15); }

/* Hero CTA pair — content-sized pills (not forced to an equal 50/50
   split, which was squeezing "Start learning for free" a few px short
   of its own text width and wrapping it to 2 lines). white-space:nowrap
   guarantees a single line at every width; padding/font/height scale
   fluidly with viewport width so the pair stays compact and never
   overflows the row on small phones, reaching the original desktop
   sizing exactly at the 640px breakpoint. */
.hero-cta-group {
  display: flex;
  flex-wrap: nowrap;
}
.hero-cta-group .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: clamp(8px, 1.25vw + 4px, 12px) clamp(14px, 4.375vw, 28px);
  font-size: clamp(13px, 0.9375vw + 10px, 16px);
  min-height: clamp(44px, 1.25vw + 40px, 48px);
}

/* Compact button pair for narrower card contexts (e.g. the Group-Study
   pricing card), where the container is far narrower than the hero and
   hero-cta-group's clamp() never shrinks enough to keep two buttons on
   one line without overflowing the card. */
.card-cta-group {
  display: flex;
  flex-wrap: wrap;
}
.card-cta-group .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 10px 16px;
  font-size: 14px;
  min-height: 40px;
}

/* ---------- Cards ---------- */

.card {
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  transition: transform 250ms var(--ease-out), box-shadow 250ms var(--ease-out);
}
.card-hover:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-lift); }

/* ---------- Scroll reveal ----------
   Default (no-JS / crawlers): fully visible, no hidden content.
   Only once js/main.js confirms it's running (adds .js to <html> in <head>)
   do reveal items hide-then-animate-in via IntersectionObserver. */

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }

/* ---------- FAQ accordion ----------
   Default (no-JS): panels fully open/visible — content is never hidden
   behind a JS-only interaction. Only .js collapses them into an accordion. */

.accordion-item { border-bottom: 1px solid rgba(18,33,30,0.1); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  text-align: left;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 18px;
  min-height: 44px;
  cursor: pointer;
}
.accordion-icon { flex-shrink: 0; transition: transform 300ms var(--ease-out); }
.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(45deg); }
.accordion-panel {
  max-height: none;
  overflow: visible;
  padding-bottom: 20px;
  color: var(--color-ink-soft);
}
.js .accordion-panel {
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  transition: max-height 350ms var(--ease-out), padding 350ms var(--ease-out);
}
.js .accordion-panel[data-open="true"] { padding-bottom: 20px; }

/* ---------- Testimonial carousel ---------- */

/* Default (no-JS): all testimonials shown as a simple stacked list. */
.testimonial-track { display: block; }
.testimonial-slide + .testimonial-slide { margin-top: 32px; padding-top: 32px; border-top: 1px solid rgba(18, 33, 30, 0.1); }

/* .js mode: crossfade carousel, one slide visible at a time, container
   height animates to match whichever slide is active for a tight,
   content-hugging box instead of dead space under short quotes. */
.js .testimonial-track {
  position: relative;
  transition: height 400ms var(--ease-out);
  overflow: hidden;
}
.js .testimonial-slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
  pointer-events: none;
}
.js .testimonial-slide + .testimonial-slide { margin-top: 0; padding-top: 0; border-top: none; }
.js .testimonial-slide.is-active {
  position: relative;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(18,33,30,0.2);
  transition: background 250ms var(--ease-out), transform 250ms var(--ease-out);
  cursor: pointer;
  padding: 0;
  border: none;
}
.dot.is-active { background: var(--color-primary); transform: scale(1.3); }

/* ---------- Scalloped divider (brand motif, reinterpreted) ---------- */

.scallop-top {
  position: relative;
}
.scallop-top::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 32px;
  background-image: radial-gradient(circle at 16px 0, transparent 16px, var(--color-cream) 17px);
  background-size: 32px 32px;
  background-repeat: repeat-x;
}

/* ---------- Utility ---------- */

.text-balance { text-wrap: balance; }
.container-page { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }

@media (min-width: 768px) {
  .container-page { padding-inline: 32px; }
}

/* =========================================================================
   INTERNAL DASHBOARD APP SHELL
   Dense tier spacing (8/12/16/24/32/48) — a data app, not a marketing page.
   ========================================================================= */

:root {
  --dash-space-1: 8px;
  --dash-space-2: 12px;
  --dash-space-3: 16px;
  --dash-space-4: 24px;
  --dash-space-5: 32px;
  --dash-space-6: 48px;
  --dash-sidebar-w: 264px;
}

.app-shell { min-height: 100vh; }

.app-sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: var(--dash-sidebar-w);
  background: rgba(18, 33, 30, 0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  flex-direction: column;
  z-index: 60;
  transform: translateX(-100%);
  transition: transform 300ms var(--ease-out);
}
.app-sidebar[data-open="true"] { transform: translateX(0); }
@media (min-width: 1024px) {
  .app-sidebar { transform: translateX(0); }
}

.app-sidebar-scroll { flex: 1; overflow-y: auto; padding: var(--dash-space-4) var(--dash-space-3); }

.app-sidebar-profile {
  display: flex;
  align-items: center;
  gap: var(--dash-space-3);
  padding: var(--dash-space-4) var(--dash-space-4) var(--dash-space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.app-sidebar-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-gold);
  color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 15px;
  flex-shrink: 0;
}
.app-sidebar-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  padding: 3px 10px; border-radius: var(--radius-pill);
  background: rgba(95, 178, 190, 0.18); color: var(--color-primary-light);
  margin-top: 4px;
}

.app-nav-group { margin-bottom: var(--dash-space-4); }
.app-nav-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  padding: 0 var(--dash-space-3);
  margin-bottom: var(--dash-space-2);
}
.app-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px var(--dash-space-3);
  border-radius: 12px;
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 14.5px;
  color: rgba(255, 255, 255, 0.68);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
  min-height: 44px;
}
.app-nav-item svg { flex-shrink: 0; opacity: 0.8; }
.app-nav-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.app-nav-item.is-active {
  background: rgba(243, 189, 59, 0.14);
  color: var(--color-gold);
  box-shadow: inset 3px 0 0 var(--color-gold);
}
.app-nav-item.is-active svg { opacity: 1; }
.app-nav-badge {
  margin-left: auto;
  font-size: 11px; font-weight: 700;
  background: var(--color-gold); color: var(--color-ink);
  border-radius: var(--radius-pill);
  padding: 1px 7px;
  min-width: 18px; text-align: center;
}

.app-sidebar-footer {
  padding: var(--dash-space-3) var(--dash-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.app-sidebar-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(18, 33, 30, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 300ms var(--ease-out);
}
.app-sidebar-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) {
  .app-sidebar-backdrop { display: none; }
}

.app-main {
  min-height: 100vh;
  padding: var(--dash-space-5) var(--dash-space-3) var(--dash-space-6);
}
@media (min-width: 1024px) {
  .app-main { margin-left: var(--dash-sidebar-w); padding: var(--dash-space-6) var(--dash-space-5); }
}

.app-topbar {
  display: flex; align-items: center; gap: var(--dash-space-3);
  margin-bottom: var(--dash-space-5);
}

/* ---------- Stat cards ---------- */
.stat-card {
  background: var(--color-white);
  border-radius: 16px;
  padding: var(--dash-space-4);
  box-shadow: var(--shadow-soft);
}
.stat-icon-chip {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--dash-space-3);
}
.stat-value { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 28px; line-height: 1; }
.stat-track { height: 5px; border-radius: 999px; background: var(--color-cream-dark); margin-top: var(--dash-space-3); overflow: hidden; }
.stat-track-fill { height: 100%; border-radius: 999px; background: var(--color-primary); }

/* ---------- Progress ring ---------- */
.progress-ring {
  width: 128px; height: 128px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto;
  background: conic-gradient(var(--color-gold) calc(var(--pct, 0) * 1%), var(--color-cream-dark) 0);
  position: relative;
}
.progress-ring::before {
  content: "";
  position: absolute; inset: 12px;
  border-radius: 50%;
  background: var(--color-white);
}
.progress-ring-value { position: relative; z-index: 1; text-align: center; }

/* ---------- Course / list rows ---------- */
.course-row {
  display: flex; align-items: center; gap: var(--dash-space-3);
  padding: var(--dash-space-3) 0;
}
.course-row + .course-row { border-top: 1px solid rgba(18, 33, 30, 0.07); }
.course-thumb {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-primary); color: #fff;
}

.file-row {
  display: flex; align-items: center; gap: var(--dash-space-3);
  padding: var(--dash-space-3) 0;
}
.file-row + .file-row { border-top: 1px solid rgba(18, 33, 30, 0.07); }

/* ---------- Certificates ---------- */
.cert-card {
  border-radius: 16px;
  padding: var(--dash-space-4);
  position: relative;
  overflow: hidden;
}
.cert-card.is-earned { background: var(--color-ink); color: rgba(255,255,255,0.9); }
.cert-card.is-earned::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--color-gold);
}
.cert-card.is-locked { background: rgba(18, 33, 30, 0.06); color: var(--color-ink-soft); }

/* ---------- Badges ---------- */
.badge-tile { text-align: center; padding: var(--dash-space-3); }
.badge-icon-circle {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto; margin-bottom: var(--dash-space-2);
}
.badge-tile.is-locked .badge-icon-circle { background: rgba(18, 33, 30, 0.06); color: rgba(18, 33, 30, 0.3); }
.badge-tile.is-locked { color: rgba(18, 33, 30, 0.35); }

/* ---------- Quiz rows ---------- */
.quiz-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--dash-space-3);
  padding: var(--dash-space-4) 0;
}
.quiz-row + .quiz-row { border-top: 1px solid rgba(18, 33, 30, 0.07); }
.quiz-row.is-locked { opacity: 0.5; }
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.status-pill.is-passed { background: rgba(25, 129, 143, 0.12); color: var(--color-primary-dark); }
.status-pill.is-available { background: rgba(243, 189, 59, 0.18); color: #8a6a12; }
.status-pill.is-locked { background: rgba(18, 33, 30, 0.06); color: var(--color-ink-soft); }

/* ---------- Announcements ---------- */
.announcement-item { padding: var(--dash-space-3) 0; }
.announcement-item + .announcement-item { border-top: 1px solid rgba(18, 33, 30, 0.07); }
.announcement-tag {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: 6px; text-transform: uppercase;
  margin-bottom: 6px;
}

/* ---------- Course catalog cards ---------- */
.catalog-card {
  border-radius: 16px;
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.catalog-card-media {
  height: 120px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}

/* =========================================================================
   SURECART BRAND ALIGNMENT
   SureCart's embedded checkout form runs in a shadow DOM and can only be
   restyled through its documented CSS custom properties (see the
   :root:root block below). Its product-page block (image, title, price,
   buttons — the actual "add to cart" form) is plain Gutenberg block markup
   with normal, inspectable classes, confirmed directly against a live
   product page, so it's safe to target those classes with regular CSS too
   — nothing here touches functionality (cart, quantity, Stripe checkout
   all remain exactly as SureCart implements them), only presentation.
   Reference: https://surecart.com/docs/add-custom-css/
   ========================================================================= */
:root:root {
  --sc-color-primary-500: var(--color-primary);
  --sc-font-sans: 'Open Sans', system-ui, sans-serif;
  --sc-border-radius-medium: 12px;
  --sc-border-radius-large: 16px;
}

/* Frame around the SureCart widget on single product pages — see
   single-sc_product.php. Keeps the widget's own internals untouched while
   giving it the same card/glass presentation as the rest of the site. */
.sc-product-panel {
  border-radius: var(--radius-panel);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  padding: 32px;
}
@media (min-width: 768px) {
  .sc-product-panel { padding: 40px; }
}

/* Some product photos (e.g. the white-on-transparent logo variant used for
   Self-Study) were made for a dark background and disappear on this white
   card. A teal backdrop behind the media block fixes that regardless of
   which image a given product uses, and doubles as a nice branded frame. */
.sc-product-panel .wp-block-surecart-product-media {
  background: var(--color-primary);
  border-radius: var(--radius-card);
  padding: 32px;
}
.sc-product-panel .wp-block-surecart-product-media img {
  max-width: 220px;
  margin-inline: auto;
}

/* SureCart's product-page columns carry a fixed inline flex-basis (e.g.
   style="flex-basis:36%") with no responsive fallback of their own —
   override with !important since that's the only way to beat an inline
   style. Deliberately NOT a viewport media-query breakpoint: this panel
   sits inside a narrower 3/5-width grid column on this theme's product
   page (see single-sc_product.php), so its actual rendered width is much
   smaller than the raw viewport once that grid goes two-column. A single
   flex-wrap rule with a min-width floor lets each column wrap onto its
   own line purely based on the space it actually has, at any viewport —
   side by side once there's real room, stacked otherwise, with no
   breakpoint math that can fall out of sync with the outer layout again. */
.sc-product-panel .wp-block-columns {
  flex-wrap: wrap;
  align-items: center;
}
.sc-product-panel .wp-block-column {
  flex-basis: 200px !important;
  flex-grow: 1;
  min-width: 200px;
}

/* Frame around the login form on /login/ — see page-login.php. Our own
   card is the outer glass panel (Tailwind classes on the wrapper div),
   this just strips the default block-editor top margin any block output
   would otherwise add inside it, so content sits flush with the panel's
   own padding instead of getting extra space from WP's block gap. */
.sc-login-panel > :first-child {
  margin-top: 0;
}
.sc-login-panel > :last-child {
  margin-bottom: 0;
}

/* Reskins WordPress core's wp_login_form() output (id="loginform", the
   default markup/classes WP itself generates) to match the site's brand —
   authentication itself is untouched, this is presentation only, same
   principle as the SureCart brand-alignment block above. */
#loginform {
  text-align: left;
}
#loginform p {
  margin-bottom: 1.25rem;
}
#loginform label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: var(--color-ink);
}
#loginform input[type="text"],
#loginform input[type="password"] {
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(18, 33, 30, 0.15);
  background: var(--color-white);
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  box-sizing: border-box;
}
#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
  border-color: var(--color-primary);
  outline: none;
}
#loginform .login-remember label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-ink-soft);
  cursor: pointer;
}
#loginform .login-submit {
  margin-bottom: 0;
}
#loginform #wp-submit {
  width: 100%;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--color-primary);
  color: var(--color-white);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 250ms ease, box-shadow 250ms ease, background 250ms ease;
}
#loginform #wp-submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
}