/* Profesorparticular.io — site chrome (base reset + nav + footer)
   Loaded directly via <link> in components/head-perf.html (not JS-injected).
   Markup is static HTML in each page (AI crawlers must see the internal link graph). */

/* ── DESIGN TOKENS (Carbon-derived, brand-neutral) ─────────────────
   Added 2026-05-26. Borrowed from IBM Carbon Design System v11 token spec
   (Apache-2.0). Carbon's *grid + spacing + motion + breakpoint scales* —
   NOT Carbon's visual palette, type, or component styles. Our brand
   (Plus Jakarta Sans, --accent blue, --green seal, hero blobs) stays.

   Namespaced --ds-* so they coexist with per-page --accent/--ink/--green
   tokens without collision. Reference these from future components by
   var(--ds-space-05) etc. so the spacing rhythm stays consistent across
   the site. Existing pages remain untouched — invisible-layer addition. */
:root{
  /* Spacing scale (Carbon $spacing-01 → $spacing-13).
     Use the small steps for component internals, the large ones for
     section padding. Anchor everything to this scale, not arbitrary rems. */
  --ds-space-01:.125rem;  /* 2px  — hairline gap */
  --ds-space-02:.25rem;   /* 4px  — icon padding */
  --ds-space-03:.5rem;    /* 8px  — tight gap */
  --ds-space-04:.75rem;   /* 12px — chip padding */
  --ds-space-05:1rem;     /* 16px — default gap */
  --ds-space-06:1.5rem;   /* 24px — card padding */
  --ds-space-07:2rem;     /* 32px — section gap */
  --ds-space-08:2.5rem;   /* 40px */
  --ds-space-09:3rem;     /* 48px */
  --ds-space-10:4rem;     /* 64px — hero padding */
  --ds-space-11:5rem;     /* 80px */
  --ds-space-12:6rem;     /* 96px */
  --ds-space-13:10rem;    /* 160px — page-shell padding */

  /* Motion durations (Carbon productive + expressive tracks).
     fast-01 / fast-02 — micro-interactions (button hover, switch flip)
     moderate-01 / 02 — local UI (FAQ accordion, dropdown open)
     slow-01 / 02 — page transitions, large overlays */
  --ds-motion-fast-01:70ms;
  --ds-motion-fast-02:110ms;
  --ds-motion-moderate-01:150ms;
  --ds-motion-moderate-02:240ms;
  --ds-motion-slow-01:400ms;
  --ds-motion-slow-02:700ms;

  /* Motion easing (Carbon productive + expressive curves).
     productive — utility motion, no overshoot, fast feedback
     expressive — entrance/exit moments, more character */
  --ds-ease-productive-standard:cubic-bezier(.2,0,.38,.9);
  --ds-ease-productive-entrance:cubic-bezier(0,0,.38,.9);
  --ds-ease-productive-exit:cubic-bezier(.2,0,1,.9);
  --ds-ease-expressive-standard:cubic-bezier(.4,.14,.3,1);
  --ds-ease-expressive-entrance:cubic-bezier(0,0,.3,1);
  --ds-ease-expressive-exit:cubic-bezier(.4,.14,1,1);

  /* Breakpoints (Carbon $breakpoint-* — reference values only).
     CSS @media queries still hand-coded; these constants document the
     scale so we stay aligned with the Carbon grid math. */
  --ds-bp-sm:320px;   /* phone */
  --ds-bp-md:672px;   /* large phone / small tablet */
  --ds-bp-lg:1056px;  /* tablet / small laptop */
  --ds-bp-xl:1312px;  /* desktop */
  --ds-bp-max:1584px; /* large desktop ceiling */

  /* Container max-widths per breakpoint (Carbon grid).
     Use --ds-grid-max-lg as the default site container; the 1280px
     --cmax we already use in the nav/footer is within 2.5% of this. */
  --ds-grid-max-md:608px;
  --ds-grid-max-lg:992px;
  --ds-grid-max-xl:1248px;
  --ds-grid-max-max:1520px;

  /* Z-index layers (Carbon). Use these instead of arbitrary z-values
     so stacking order is predictable across pages. */
  --ds-layer-nav:100;
  --ds-layer-overlay:6000;
  --ds-layer-modal:8000;
  --ds-layer-popover:9000;
  --ds-layer-toast:10000;

  /* Type scale (Carbon @carbon/type — 17 steps, computed from the
     Yn = Yn-1 + (floor((n-2)/4)+1)*2 formula. Step 1 = 12px, Step 17 = 92px.
     Use for any heading/body sizing instead of arbitrary clamps. */
  --ds-type-01:.75rem;     /* 12px — caption / label-helper */
  --ds-type-02:.875rem;    /* 14px — small body / button */
  --ds-type-03:1rem;       /* 16px — body */
  --ds-type-04:1.125rem;   /* 18px — lead paragraph */
  --ds-type-05:1.25rem;    /* 20px — h4 */
  --ds-type-06:1.5rem;     /* 24px — h3 */
  --ds-type-07:1.75rem;    /* 28px — h2 small */
  --ds-type-08:2rem;       /* 32px — h2 */
  --ds-type-09:2.25rem;    /* 36px — h2 large */
  --ds-type-10:2.625rem;   /* 42px — h1 small */
  --ds-type-11:3rem;       /* 48px — h1 */
  --ds-type-12:3.375rem;   /* 54px — h1 large / display */
  --ds-type-13:3.75rem;    /* 60px — display */
  --ds-type-14:4.25rem;    /* 68px — hero */
  --ds-type-15:4.75rem;    /* 76px */
  --ds-type-16:5.25rem;    /* 84px */
  --ds-type-17:5.75rem;    /* 92px — billboard */

  /* Fluid spacing (Carbon $fluid-spacing-01 → 04 — viewport-relative).
     Use for hero padding, section padding that should scale with screen
     width. Pairs naturally with our existing clamp()-based H1 sizing. */
  --ds-fluid-space-01:0vw;
  --ds-fluid-space-02:2vw;
  --ds-fluid-space-03:5vw;
  --ds-fluid-space-04:10vw;

  /* Standard transitions (Carbon legacy tokens still in active use).
     $transition-base 250ms and $transition-expansion 300ms with
     standard-easing — the right default for most "non-micro" UI shifts
     (panel collapse, route transitions, large content reveal). */
  --ds-transition-base:250ms;
  --ds-transition-expansion:300ms;
  --ds-ease-standard:cubic-bezier(.5,0,.1,1);  /* $standard-easing */
  --ds-ease-in:cubic-bezier(.25,0,1,1);         /* exit motion only */
  --ds-ease-out:cubic-bezier(0,0,.25,1);        /* entrance motion only */

  /* Focus ring (Carbon spec: 2px solid focus token + 1px offset).
     Carbon uses a single $focus token (typically the brand-blue or
     theme-aware color). We bind it to our --accent so it stays on brand. */
  --ds-focus-ring-width:2px;
  --ds-focus-ring-offset:1px;
  --ds-focus-ring-color:var(--accent,#2563eb);
}

/* ── REDUCED MOTION (Carbon practice + WCAG 2.3.3) ──────────────────
   Respect the OS-level `prefers-reduced-motion` preference. Collapses
   every motion + transition token to ~0ms, plus a global escape hatch
   for any rule that uses raw values we haven't yet tokenized.
   Carbon ships this gate in every theme — no component opts out. */
@media (prefers-reduced-motion: reduce){
  :root{
    --ds-motion-fast-01:.01ms;
    --ds-motion-fast-02:.01ms;
    --ds-motion-moderate-01:.01ms;
    --ds-motion-moderate-02:.01ms;
    --ds-motion-slow-01:.01ms;
    --ds-motion-slow-02:.01ms;
    --ds-transition-base:.01ms;
    --ds-transition-expansion:.01ms;
  }
  /* Catch-all for any non-tokenized transitions/animations. The .01ms
     (not 0) avoids breaking JS that listens for `transitionend`. */
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ── BASE RESET (was duplicated 30-50× per page; now canonical) ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

/* ── SKIP-TO-CONTENT LINK (WCAG 2.4.1 Level A, Carbon a11y baseline) ─
   Invisible until keyboard-focused, then slides down from the top of the
   page with the brand accent background. Lets keyboard users skip past
   the nav directly to <main id="main-content">. Every page must have a
   `<main id="main-content">` element for the link to target. */
.skip-to-content{
  position:absolute;
  top:0;
  left:0;
  z-index:calc(var(--ds-layer-nav, 100) + 10);
  padding:var(--ds-space-04) var(--ds-space-06);
  background:var(--accent, #2563eb);
  color:#fff;
  font-weight:700;
  font-size:.9375rem;
  text-decoration:none;
  border-bottom-right-radius:8px;
  transform:translateY(-100%);
  transition:transform var(--ds-motion-moderate-01, 150ms) var(--ds-ease-productive-standard, ease);
}
.skip-to-content:focus-visible{
  transform:translateY(0);
  outline:var(--ds-focus-ring-width, 2px) solid #fff;
  outline-offset:-4px;
}

/* ── FOCUS DISCIPLINE (Carbon practice, added 2026-05-26) ───────────
   Every focusable element gets the brand focus ring on KEYBOARD focus.
   Mouse clicks suppress the ring (Carbon convention — sighted-pointer
   users don't need it; keyboard users critically do).
   WCAG 2.1 SC 2.4.7 (Focus Visible, Level AA) compliance baseline.
   Components that need a different indicator (form fields, chips) can
   override locally with higher specificity. */
:focus-visible{
  outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);
  outline-offset:var(--ds-focus-ring-offset);
}
:focus:not(:focus-visible){outline:none;}

/* ── CLS FIX: metrics-matched fallback for Plus Jakarta Sans ────────
   Defined here (not in head-perf.html) so it's loaded by site-chrome.css
   AFTER any per-page <style> that re-declares body{font-family:...}.
   The !important + cascade order makes the fallback authoritative. */
@font-face{
  font-family:"Plus Jakarta Sans Fallback";
  src:local("Helvetica Neue"),local("Arial");
  size-adjust:99%;
  ascent-override:104%;
  descent-override:32%;
  line-gap-override:0%;
}
body{font-family:"Plus Jakarta Sans","Plus Jakarta Sans Fallback",system-ui,-apple-system,sans-serif !important;}

/* ── NAV ─────────────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:var(--ds-layer-nav);background:rgba(255,255,255,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(226,232,240,.5);transition:box-shadow var(--ds-transition-expansion) var(--ds-ease-productive-standard);}
.nav.scrolled{box-shadow:0 1px 8px rgba(15,23,42,.08);}
.nav-inner{max-width:var(--cmax,1280px);margin:0 auto;padding:0 clamp(1.5rem,5vw,3rem);height:72px;display:flex;align-items:center;justify-content:space-between;}
.nav .logo{display:flex;align-items:center;gap:.625rem;font-weight:800;font-size:1.125rem;color:var(--ink,#0f172a);letter-spacing:-.03em;text-decoration:none;white-space:nowrap;flex-shrink:0;}
.nav .logo-mark{width:28px;height:28px;color:var(--accent,#2563eb);display:flex;align-items:center;justify-content:center;}
.nav .logo-mark svg{width:100%;height:100%;}
/* ── Two-part wordmark: "Profesor Particular" + ".IO" ── */
.logo-platform{font-weight:800;letter-spacing:-.03em;color:inherit;white-space:nowrap;}
.logo-tld{font-weight:800;letter-spacing:-.03em;color:var(--accent,#2563eb);margin-left:-.625rem;}
.logo--lt .logo-platform{color:#fff;}
.logo--lt .logo-tld{color:#60a5fa;}
/* Shrink wordmark on narrow screens so it doesn't crowd CTAs */
@media(max-width:520px){.nav .logo{font-size:.875rem;gap:.4rem;}.nav .logo-tld{margin-left:-.4rem;}}
@media(max-width:380px){.nav .logo{font-size:.75rem;gap:.3rem;}.nav .logo-mark{width:22px;height:22px;}.nav .logo-tld{margin-left:-.3rem;}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-03);font-family:inherit;font-size:.9375rem;font-weight:700;letter-spacing:-.01em;border-radius:100px;padding:var(--ds-space-04) 1.75rem;transition:all var(--ds-transition-base) var(--ds-ease-productive-standard);cursor:pointer;white-space:nowrap;border:none;text-decoration:none;}
.btn-primary{background:var(--accent,#2563eb);color:#fff;border:2px solid var(--accent,#2563eb);}
.btn-primary:hover{background:var(--accent-hov,#1d4ed8);border-color:var(--accent-hov,#1d4ed8);transform:translateY(-2px);box-shadow:var(--sh-glow,0 0 0 4px rgba(37,99,235,.2));}
.btn-sm{font-size:.875rem;padding:var(--ds-space-03) 1.25rem;}
/* Nav CTA — locked styling regardless of per-page .btn overrides.
   Specificity 0,2,0 beats any 0,1,0 from page-level inline CSS. */
.nav .btn-primary.btn-sm{
  display:inline-flex;align-items:center;justify-content:center;
  gap:var(--ds-space-03);font-family:inherit;font-weight:700;letter-spacing:-.01em;
  font-size:.875rem;padding:var(--ds-space-03) 1.25rem;
  background:var(--accent,#2563eb);color:#fff;
  border:2px solid var(--accent,#2563eb);border-radius:100px;
  text-decoration:none;white-space:nowrap;
  transition:all var(--ds-transition-base) var(--ds-ease-productive-standard);
}
.nav .btn-primary.btn-sm:hover{background:var(--accent-hov,#1d4ed8);border-color:var(--accent-hov,#1d4ed8);transform:translateY(-2px);box-shadow:var(--sh-glow,0 0 0 4px rgba(37,99,235,.2));}
@media(max-width:1024px){.nav{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:rgba(255,255,255,.97);}}
@media(max-width:520px){.nav-inner .btn{font-size:.75rem;padding:var(--ds-space-03) var(--ds-space-04);}}
.nav-btn-short{display:none;}
@media(max-width:400px){.nav-btn-full{display:none;}.nav-btn-short{display:inline;}}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.footer{background:var(--ink,#0f172a);color:rgba(255,255,255,.65);padding:var(--ds-space-11) 0 var(--ds-space-07);}
.footer .container{max-width:var(--cmax,1280px);margin:0 auto;padding:0 clamp(1.5rem,5vw,3rem);}
.footer-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--ds-space-10);margin-bottom:var(--ds-space-10);}
.footer-brand{max-width:280px;}
.footer .logo--lt{color:#fff;}
.footer .logo-mark--lt{color:var(--accent,#2563eb);}
.footer-links{display:flex;gap:var(--ds-space-10);flex-wrap:wrap;}
.footer-col{display:flex;flex-direction:column;gap:.875rem;}
.footer-col-title{font-weight:700;color:#fff;margin-bottom:var(--ds-space-02);letter-spacing:.05em;text-transform:uppercase;font-size:.8125rem;}
.footer-col a{font-size:.9375rem;font-weight:500;transition:color var(--ds-motion-moderate-01) var(--ds-ease-productive-standard);color:rgba(255,255,255,.65);text-decoration:none;}
.footer-col a:hover{color:#fff;}
.footer-bottom{padding-top:var(--ds-space-07);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;font-size:.875rem;flex-wrap:wrap;gap:var(--ds-space-05);}
.footer .logo--lt{display:flex;align-items:center;gap:.625rem;font-weight:800;font-size:1.125rem;letter-spacing:-.03em;text-decoration:none;}
.footer .logo-mark{width:28px;height:28px;display:flex;align-items:center;justify-content:center;}
.footer .logo-mark svg{width:100%;height:100%;}
@media(max-width:600px){.footer-bottom{flex-direction:column;text-align:center;}.footer-inner{flex-direction:column;}}
.footer-brand-tagline{margin-top:.875rem;font-size:.875rem;line-height:1.65;}

/* ── Utility classes (replace common inline styles) ──────────────── */
.link-accent{color:var(--accent,#2563eb);text-decoration:underline;text-underline-offset:2px;}
.text-ink{color:var(--ink,#0f172a);}
.text-muted{color:var(--ink-muted,#52617a);}
.text-accent-bold{color:var(--accent,#2563eb);font-weight:600;}
.text-center{text-align:center;}
.mb-0{margin-bottom:0;}
.mb-3{margin-bottom:var(--ds-space-06);}
.mb-4{margin-bottom:1.25rem;}
.mb-5{margin-bottom:1.75rem;}
.mt-3{margin-top:var(--ds-space-06);}
.mt-4{margin-top:var(--ds-space-09);}
.is-hidden{display:none;}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.table-wrap,.table-wrap--end{overflow-x:auto;border-radius:var(--r-md,12px);box-shadow:var(--sh-sm,0 1px 3px rgba(15,23,42,.06));border:1px solid var(--border-sub,#e2e8f0);margin:1.25rem 0;}
.table-wrap--end{margin-bottom:var(--ds-space-07);}
.guide-hero-img{display:block;width:100%;height:auto;margin-bottom:var(--ds-space-07);border-radius:16px;box-shadow:0 20px 48px rgba(15,23,42,.12);}
.tiny-note{font-size:.78rem;color:var(--ink-muted,#52617a);margin-top:var(--ds-space-04);margin-bottom:0;}
.link-ink{color:var(--ink,#0f172a);text-decoration:underline;text-underline-offset:2px;}
.link-inherit{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.link-callout{color:#93c5fd;text-decoration:underline;}
.section-lead{font-size:1.0625rem;color:var(--ink-soft,#475569);max-width:680px;line-height:1.7;}
.section-lead.mb-2rem{margin-bottom:var(--ds-space-07);}
.section-lead.mb-2-5rem{margin-bottom:var(--ds-space-08);}
.post-card-img{display:flex;align-items:center;justify-content:center;min-height:180px;}
.post-card-img--yellow{background:#fefce8;}
.post-card-img--green{background:#f0fdf4;}
.post-card-img--blue{background:#eff6ff;}
.post-card-img--purple{background:#faf5ff;}
.post-card-img--accent{background:var(--accent-lt,#dbeafe);}
.spinner-sm{width:20px;height:20px;animation:spin .8s linear infinite;}
.spinner-xs{width:18px;height:18px;animation:spin .8s linear infinite;}
.pos-rel-z1{position:relative;z-index:1;}
.cat-pill--green{background:#f0fdf4;color:#16a34a;border-color:#bbf7d0;}
.cat-pill--purple{background:#faf5ff;color:#7c3aed;border-color:#ddd6fe;}

/* ── Answer box (GEO citable block) — subtle callout, optimized for AI extraction not visual prominence ──── */
.answer-box{background:#f8fafc;border:1px solid #e2e8f0;border-left:2px solid var(--accent,#2563eb);border-radius:8px;padding:var(--ds-space-05) 1.25rem;margin:var(--ds-space-06) 0;font-size:.9375rem;line-height:1.6;color:var(--ink-soft,#475569);}
.answer-box p{margin:0;}
.answer-box strong{color:var(--ink,#0f172a);font-weight:600;}

/* ── Accessibility: visually hidden but screen-reader readable ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}