/* Base — resets, fonts, keyframes, global element styles.
   Ported verbatim (values, timings, easing) from the approved design's global <style> block. */

@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Display';src:url('../fonts/ClashDisplay-Semibold.otf') format('opentype');font-weight:600;font-display:swap}
@font-face{font-family:'Clash Grotesk';src:url('../fonts/ClashGrotesk-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('../fonts/IBMPlexSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap}

html{scroll-behavior:smooth;width:100%;position:relative;scrollbar-gutter:stable}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;width:100%;max-width:100%;position:relative;box-sizing:border-box;background:var(--dd-paper);color:var(--dd-ink);font-family:var(--dd-font-grotesk);-webkit-font-smoothing:antialiased;overflow-wrap:break-word;word-break:break-word}
a{color:var(--dd-ink);text-decoration:none}
a:hover{color:var(--dd-signal-4)}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* Global focus treatment. No component below sets its own :focus outline — without this,
   every button/link/pill falls back to the browser's raw default focus rectangle, which
   several browsers (notably mobile Safari/WebKit) also apply on tap/programmatic .click(),
   not just real keyboard navigation — that showed up as a stray black outline box around
   the Curriculum accordion trigger after being opened via the Home hero's pathway pills.
   :focus-visible scopes the visible indicator to genuine keyboard navigation only, while
   still meeting accessibility requirements (WCAG 2.4.7) — removing focus indication
   entirely would itself be a regression, just a less visible one. */
:focus{outline:none}
:focus-visible{outline:2px solid var(--dd-signal-3);outline-offset:2px;border-radius:4px}

/* QA: tapping an accordion heading left an orange ring around it.
   The previous guard required (hover:none) AND (pointer:coarse) together, which
   Chrome for Android satisfies but which misses two real cases the client hit:
   a touch-capable laptop (reports hover:hover) and a desktop browser used at a
   narrow width. WebKit and Firefox also match :focus-visible for a plain pointer
   activation of a <button>, so the keyboard indicator was being drawn for a tap.
   Any coarse-pointer signal now suppresses the ring, rather than all of them. */
@media (hover:none),(pointer:coarse),(any-pointer:coarse){
  :focus-visible{outline:none}
}

/* The accordion triggers — the curriculum level rows and the FAQ/program rows in
   the client's screenshots — never take the ring, on any device. A box drawn
   around a full-width row is the artifact being reported, and no media query can
   tell a mis-reported tap from real keyboard navigation. Keyboard users keep an
   indicator: the row's own title underlines, which cannot read as that box. */
[data-accordion-trigger]:focus,
[data-accordion-trigger]:focus-visible{outline:none}
.level-toggle:focus-visible .level-title,
.faq-toggle:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (hover:none),(pointer:coarse),(any-pointer:coarse){
  .level-toggle:focus-visible .level-title,
  .faq-toggle:focus-visible{text-decoration:none}
}
img,canvas,svg{max-width:100%}
::selection{background:var(--dd-signal-3);color:#fff}

/* Site chrome must never clip a descendant popover/dropdown, and must not carry
   a non-visible overflow on any ancestor of the sticky header — see layout.css note. */
#root-app-wrapper{min-height:100vh;width:100%;max-width:100%;box-sizing:border-box;margin:0 auto;padding:0;background:var(--dd-paper)}

@keyframes ddfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes ddfloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes ddbreathe{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:.75;transform:scale(1.06)}}
@keyframes ddgradient{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes ddglow{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes ddlightboxFade{from{opacity:0}to{opacity:1}}
@keyframes ddlightboxPop{from{opacity:0;transform:scale(.88) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes ddPageFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ddmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Scroll reveal — JS (reveal.js) toggles .is-visible; this is the pre-reveal state */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--dd-ease),transform .9s var(--dd-ease)}
[data-reveal].is-visible{opacity:1;transform:none}

/* Milestone chip highlight (Learning Journey) */
[data-mile]{transition:all .5s ease}
[data-mile].is-hit{border-color:rgba(255,91,0,.55)!important;color:var(--dd-ink)!important;background:#fff!important}

main{animation:ddPageFade .5s var(--dd-ease)}

/* Shared full-bleed section background variants (Home, Careers, Corporate Training) */
.section-slate{background:var(--dd-slate);color:var(--dd-paper)}
.section-warm{background:var(--dd-paper-warm)}

/* Shared long-form content body (Insight posts, generic Page fallback) */
.post-hero-media{height:380px;border-radius:24px;background:var(--dd-paper-warm);background-image:repeating-linear-gradient(135deg,rgba(21,18,15,.07) 0 8px,transparent 8px 16px);display:flex;align-items:flex-end;padding:20px;margin-bottom:48px;box-sizing:border-box;position:relative;overflow:hidden}
.post-hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-body p{font-size:18px;line-height:1.75;color:var(--dd-ink-soft);margin:0 0 26px}
.post-back-link{font-family:var(--dd-font-ui);font-size:14px;color:rgba(21,18,15,.5);margin-bottom:32px;display:inline-block;background:none;border:0}
.post-back-link:hover{color:var(--dd-signal-4)}