/* ==========================================================================
   AQAR — Design tokens, self-hosted font, reset & base
   Ported verbatim from aqar-docs/design/aqar-style-guide.html :root.
   Tokens are law: never hard-code a colour/size/space — always use a var.
   ========================================================================== */

/* --- Self-hosted Plus Jakarta Sans (Latin subset, variable) --- */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Brand & colour --- */
  --c-turquoise:      #12A6A6;  /* brand / primary action                */
  --c-turquoise-600:  #0E8C8C;  /* primary hover                         */
  --c-turquoise-700:  #0B7070;  /* primary active                        */

  /* Brand-ramp intermediates. Not in the style guide's component set — they exist
     because TutorLMS v4 themes itself from a full 11-step ramp and we remap that
     ramp to AQAR (inc/tutor.php). Kept here so the palette has ONE source of truth. */
  --c-turquoise-300:  #6FD0D0;  /* light   (ramp 400) */
  --c-turquoise-400:  #3FBDBD;  /* lighter (ramp 450) */
  --c-turquoise-800:  #095C5C;  /* dark    (ramp 800) */
  --c-turquoise-900:  #074A4A;  /* darker  (ramp 900) */
  --c-teal-deep:      #063E3E;  /* dark sections: hero, footer           */
  --c-teal-deep-2:    #08514F;  /* dark section gradient partner         */
  --c-tint:           #EAF7F6;  /* soft brand-tinted surface             */
  --c-tint-2:         #D7EEED;  /* slightly stronger tint / borders on tint */

  --c-gold:           #C29A48;  /* secondary accent — USE SPARINGLY      */
  --c-gold-soft:      #F3E9CF;  /* gold tint background (badges)         */

  --c-ink:            #12211F;  /* primary text (dark teal-charcoal)     */
  --c-ink-2:          #2C3D3B;  /* body text on light: softer than ink   */
  --c-muted:          #5C6E6C;  /* secondary text                        */
  --c-faint:          #8A9997;  /* captions / disabled text              */

  --c-canvas:         #FFFFFF;  /* page background                       */
  --c-surface:        #F6FBFA;  /* raised/alt surface                    */
  --c-line:           #E1ECEB;  /* hairline borders                      */

  --c-success:        #1E9E6A;
  --c-success-bg:     #E7F6EE;
  --c-success-300:    #6EE7B7;  /* light variant for text/icons on dark sections (hero) */
  --c-info:           #1E7F9E;
  --c-info-bg:        #E6F2F7;
  --c-warning:        #B7791F;
  --c-warning-bg:     #FBF1DE;
  --c-danger:         #C24A3F;
  --c-danger-bg:      #FBE9E7;

  --c-star-rating:    #E0A82E;  /* review stars                          */

  /* --- Typography --- */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(2.2rem, 5.5vw, 3.5rem);
  --fs-h1:      clamp(1.9rem, 4vw, 2.5rem);
  --fs-h2:      clamp(1.5rem, 3vw, 1.9rem);
  --fs-h3:      1.3rem;
  --fs-h4:      1.1rem;
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-body:    1.65;

  --ls-eyebrow: 0.14em;

  /* --- Spacing (4px base) --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* --- Radius --- */
  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;
  --r-card: 10px;                 /* course/marketing cards (homepage) */

  /* --- Shadow (soft, cool-tinted) --- */
  --sh-sm: 0 1px 2px rgba(6,62,62,.06), 0 1px 3px rgba(6,62,62,.05);
  --sh-md: 0 4px 12px rgba(6,62,62,.08), 0 2px 4px rgba(6,62,62,.05);
  --sh-lg: 0 14px 34px rgba(6,62,62,.12), 0 4px 10px rgba(6,62,62,.06);

  /* --- Layout --- */
  --container: 1200px;
  --content:   720px;

  /* --- Motion --- */
  --ease: cubic-bezier(.4,0,.2,1);
  --dur:  .18s;
  --ease-soft: cubic-bezier(.22,1,.36,1); /* scroll-reveal & bar growth */
}
/* Breakpoints (reference): 480 / 768 / 860 / 1024 / 1280 — mobile-first */

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0 0 var(--sp-3); font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; }
h4 { font-size: var(--fs-h4); font-weight: 700; }
p { margin: 0 0 var(--sp-4); }
a { color: var(--c-turquoise-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--c-turquoise); outline-offset: 2px; border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Shared layout helper */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }

/* Accessibility: skip link + screen-reader text (WP a11y conventions) */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.skip-link {
  position: absolute; left: -9999px; top: var(--sp-2); z-index: 100;
  background: var(--c-canvas); color: var(--c-turquoise-700);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md); box-shadow: var(--sh-md);
  font-size: var(--fs-sm); font-weight: 600;
}
.skip-link:focus { left: var(--sp-4); text-decoration: none; }

/*
 * The 8-point star signature (.motif, .divider, .geo-texture) was here. It is
 * retired: first from the brand lockup in the homepage revamp, then from the
 * interior page headers. Nothing referenced it any more, and an unused inline
 * SVG data-URI shipped on every page load is not free.
 */