/* ============================================================
   WebFrame — framework/core.css
   Layer 1: Universal Core.

   Identical across every site. Never edit per-site.
   All token VALUES live in /themes/[site-name].css.
   This file only references token names via var().
============================================================ */

/* ── Reset ────────────────────────────────────────────── */

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

html {
  scroll-behavior:        smooth;
  font-size:              100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust:       100%;
}

@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;
  }
}

body {
  font-family:            var(--font-body);
  font-size:              var(--text-base);
  font-weight:            var(--font-weight-body, 400);
  line-height:            var(--line-height-body, 1.7);
  color:                  var(--color-text);
  background-color:       var(--color-bg);
  overflow-x:             hidden;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color var(--transition-base),
    color            var(--transition-base);
}

img, svg {
  display:   block;
  max-width: 100%;
}

img { height: auto; }

/* list-style removed globally; add role="list" in HTML where needed (Safari VoiceOver) */
ul { list-style: none; }
ol { padding-inline-start: 1.5em; }

a {
  color:                     var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset:     3px;
  transition:
    color   var(--transition-fast),
    opacity var(--transition-fast);
}

a:hover { color: var(--color-accent-hover); }

:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius:  var(--radius-sm);
}

/* Anchor targets need clearance from fixed header */
:target { scroll-margin-top: var(--header-height); }


/* ── Skip link ────────────────────────────────────────── */

.u-skip-link {
  position:        absolute;
  top:             -100%;
  left:            var(--space-3);
  z-index:         9999;
  padding:         0.6em 1.2em;
  background:      var(--color-text);
  color:           var(--color-bg);
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     600;
  border-radius:   var(--radius-sm);
  text-decoration: none;
  transition:      top var(--transition-fast);
}

.u-skip-link:focus { top: var(--space-3); }


/* ── Layout primitives ────────────────────────────────── */

.l-container {
  width:          100%;
  max-width:      var(--container-max);
  margin-inline:  auto;
  padding-inline: var(--gutter);
}

.l-container--narrow {
  max-width: var(--container-narrow);
}

.l-section {
  padding-block: var(--space-16);
}

.l-section--tight {
  padding-block: var(--space-8);
}

.l-grid {
  display: grid;
  gap:     var(--space-6);
}

.l-split {
  display:     grid;
  gap:         var(--space-8);
  align-items: center;
}

@media (min-width: 680px) {
  .l-split { grid-template-columns: 1fr 1fr; }
}

.l-stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.l-cluster {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-3);
}

.l-flow > * + * {
  margin-block-start: var(--space-4);
}

.l-split-sticky {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 860px) {
  .l-split-sticky {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  .l-split-sticky__left {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}


/* ── Typography ───────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color:       var(--color-text);
  line-height: 1.15;
  font-weight: 500;
  text-wrap:   balance;
}

h1 { font-size: var(--text-hero); letter-spacing: var(--tracking-h1, -0.02em);  line-height: 1.05; }
h2 { font-size: var(--text-3xl);  letter-spacing: var(--tracking-h2, -0.015em); }
h3 { font-size: var(--text-2xl);  letter-spacing: var(--tracking-h3, -0.01em);  }
h4 { font-size: var(--text-xl);   font-weight: var(--font-weight-heading, 600); }
h5 { font-size: var(--text-lg);   font-weight: 600; }
h6 { font-size: var(--text-base); font-weight: 600; }

p {
  color:         var(--color-text-muted);
  margin-bottom: var(--space-3);
}

p:last-child { margin-bottom: 0; }

.c-eyebrow {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--text-xs);
  font-weight:    var(--font-weight-eyebrow, 600);
  letter-spacing: var(--tracking-eyebrow, 0.12em);
  text-transform: uppercase;
  color:          var(--color-eyebrow);
  margin-bottom:  var(--space-3);
}

.c-lead {
  font-size:   var(--text-lg);
  line-height: 1.65;
  color:       var(--color-text-muted);
}

.c-section-heading {
  font-size:     var(--text-3xl);
  margin-bottom: var(--space-4);
}


/* ── Buttons ──────────────────────────────────────────── */

.c-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5em;
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     var(--font-weight-btn, 600);
  letter-spacing:  var(--tracking-btn, 0.02em);
  line-height:     1;
  text-decoration: none;
  border:          none;
  border-radius:   var(--radius-btn, var(--radius-sm));
  padding:         var(--btn-padding, 0.875em 1.75em);
  cursor:          pointer;
  white-space:     nowrap;
  transition:
    background   var(--transition-fast),
    color        var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast),
    transform    var(--transition-fast);
}

.c-btn svg {
  flex-shrink: 0;
  transition:  transform var(--transition-fast);
}

.c-btn:hover svg { transform: translateX(3px); }

.c-btn--primary {
  background: var(--color-accent);
  color:      var(--color-accent-text);
}

.c-btn--primary:hover {
  background: var(--color-accent-hover);
  color:      var(--color-accent-text);
  transform:  translateY(-1px);
  box-shadow: var(--shadow-md);
}

.c-btn--primary:active {
  transform:  translateY(0);
  box-shadow: none;
}

.c-btn--secondary {
  background:  transparent;
  color:       var(--color-accent);
  border:      1.5px solid var(--color-accent);
}

.c-btn--secondary:hover {
  background: var(--color-accent-dim);
  color:      var(--color-accent-hover);
}

.c-btn--ghost {
  background: transparent;
  color:      var(--color-text);
  border:     1.5px solid var(--color-border);
}

.c-btn--ghost:hover {
  border-color: var(--color-accent);
  color:        var(--color-accent);
}

.c-btn--link {
  background:  transparent;
  color:       var(--color-accent);
  border:      none;
  padding:     0;
  font-weight: 500;
}

.c-btn--link:hover {
  color:           var(--color-accent-hover);
  text-decoration: underline;
}


/* ── Cards ────────────────────────────────────────────── */

.c-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  transition:
    box-shadow var(--transition-base),
    transform  var(--transition-base);
}

.c-card:hover {
  box-shadow: var(--shadow-md);
  transform:  translateY(-2px);
}

.c-card__media img {
  width:  100%;
  height: auto;
  display: block;
}

.c-card__body {
  padding: var(--space-6);
}

.c-card__footer {
  padding:    var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}


/* ── Note box ─────────────────────────────────────────── */

/* Shared styled callout note — use on diagrams, section footers, etc.
   Add alongside section-specific class for margin-top overrides.     */
.c-note {
  padding:       var(--space-4) var(--space-6);
  background:    var(--color-bg-alt);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align:    center;
  font-size:     var(--text-sm);
  color:         var(--color-text-muted);
  font-style:    italic;
  line-height:   1.7;
}


/* ── Form elements ────────────────────────────────────── */

.c-label {
  display:       block;
  font-size:     var(--text-sm);
  font-weight:   600;
  color:         var(--color-text);
  margin-bottom: var(--space-1);
}

.c-input,
.c-textarea {
  display:       block;
  width:         100%;
  font-family:   var(--font-body);
  font-size:     var(--text-base);
  color:         var(--color-text);
  background:    var(--color-surface);
  border:        1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding:       0.75em 1em;
  appearance:    none;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.c-input:focus,
.c-textarea:focus {
  outline:      none;
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px var(--color-accent-dim);
}

.c-textarea {
  resize:     vertical;
  min-height: 8em;
}


/* ── Site header & nav ────────────────────────────────── */

.c-site-header {
  position:                fixed;
  top:                     0;
  left:                    0;
  right:                   0;
  z-index:                 100;
  height:                  var(--header-height);
  background-color:        color-mix(in srgb, var(--color-bg) 80%, transparent);
  backdrop-filter:         blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom:           1px solid transparent;
  transition:
    border-color var(--transition-base),
    background   var(--transition-base);
}

.c-site-header.is-scrolled {
  border-bottom-color: var(--color-border);
}

.c-nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  padding:         var(--space-2) 0;
  gap:             var(--space-4);
}

.c-nav-logo {
  font-family:     var(--font-display);
  font-size:       var(--text-lg);
  font-weight:     500;
  color:           var(--color-text);
  text-decoration: none;
  letter-spacing:  -0.01em;
  white-space:     nowrap;
  flex-shrink:     0;
}

.c-nav-logo:hover { color: var(--color-accent); }

.c-nav-list {
  display:         flex;
  align-items:     center;
  gap:             var(--space-6);
  flex:            1;
  justify-content: flex-end;
}

.c-nav-link {
  font-size:       var(--text-sm);
  font-weight:     500;
  color:           var(--color-text-muted);
  text-decoration: none;
  letter-spacing:  0.01em;
  white-space:     nowrap;
  transition:      color var(--transition-fast);
}

.c-nav-link:hover,
.c-nav-link[aria-current="page"] {
  color: var(--color-accent);
}

.c-nav-cta {
  margin-left: var(--space-2);
}

/* Dropdown */
.c-nav-dropdown {
  position: relative;
}

.c-nav-dropdown > .c-nav-link {
  display:     flex;
  align-items: center;
  gap:         0.3em;
}

.c-nav-dropdown > .c-nav-link::after {
  content:       '';
  display:       inline-block;
  width:         6px;
  height:        6px;
  border-right:  1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform:     rotate(45deg) translateY(-2px);
  transition:    transform var(--transition-fast);
}

.c-nav-dropdown:hover > .c-nav-link::after,
.c-nav-dropdown:focus-within > .c-nav-link::after {
  transform: rotate(-135deg) translateY(-2px);
}

.c-nav-dropdown__menu {
  visibility:  hidden;
  opacity:     0;
  position:    absolute;
  top:         calc(100% + 10px);
  left:        50%;
  transform:   translateX(-50%);
  z-index:     200;
  /* padding-top creates an invisible hover bridge between link and panel */
  padding-top: 10px;
  transition:  opacity 0.15s ease, visibility 0s linear 0.15s;
}

.c-nav-dropdown__menu ul {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-md);
  min-width:     220px;
  padding:       var(--space-2) 0;
}

.c-nav-dropdown__menu a {
  display:         block;
  padding:         0.6em 1.2em;
  font-size:       var(--text-sm);
  color:           var(--color-text-muted);
  text-decoration: none;
  white-space:     nowrap;
  transition:
    background var(--transition-fast),
    color      var(--transition-fast);
}

.c-nav-dropdown__menu a:hover {
  background: var(--color-accent-dim);
  color:      var(--color-accent);
}

.c-nav-dropdown:hover .c-nav-dropdown__menu,
.c-nav-dropdown:focus-within .c-nav-dropdown__menu {
  visibility: visible;
  opacity:    1;
  transition: opacity 0.12s ease, visibility 0s linear 0s;
}

/* Hamburger */
.c-nav-toggle {
  display:        none;
  flex-direction: column;
  gap:            5px;
  background:     none;
  border:         none;
  cursor:         pointer;
  padding:        8px;
  border-radius:  var(--radius-sm);
  flex-shrink:    0;
}

.c-nav-toggle span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--color-text);
  border-radius: 2px;
  transition:    transform 0.3s var(--ease), opacity 0.3s;
}

.c-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.c-nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.c-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile panel */
.c-nav-panel {
  display:       none;
  position:      absolute;
  top:           var(--header-height);
  left:          0;
  right:         0;
  z-index:       99;
  background:    var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding:       var(--space-6) var(--gutter);
  box-shadow:    var(--shadow-md);
}

.c-nav-panel.is-open { display: block; }

.c-nav-panel .c-nav-link {
  display:       block;
  padding-block: 0.75em;
  border-bottom: 1px solid var(--color-border);
  font-size:     var(--text-base);
}

.c-nav-panel .c-nav-link:last-of-type {
  border-bottom: none;
}

.c-nav-panel .c-btn {
  margin-top:      var(--space-4);
  width:           100%;
  justify-content: center;
}

@media (max-width: 1000px) {
  .c-nav-list   { display: none; }
  .c-nav-toggle { display: flex; }
}

/* Theme toggle */
.c-theme-toggle {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            36px;
  height:           36px;
  background:       var(--color-toggle-bg);
  border:           1.5px solid var(--color-toggle-border);
  border-radius:    var(--radius-md);
  color:            var(--color-toggle-fg);
  cursor:           pointer;
  flex-shrink:      0;
  transition:
    background   var(--transition-fast),
    border-color var(--transition-fast),
    color        var(--transition-fast);
}

.c-theme-toggle:hover {
  background:   var(--color-toggle-hover-bg);
  border-color: var(--color-border-strong);
  color:        var(--color-text-muted);
}

.c-theme-toggle svg { pointer-events: none; }

/* Show moon in light mode, sun in dark mode */
.c-theme-toggle .icon-sun  { display: none; }
.c-theme-toggle .icon-moon { display: block; }

[data-theme="dark"] .c-theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .c-theme-toggle .icon-moon { display: none; }


/* ── Accordion ────────────────────────────────────────── */

[data-accordion-item] {
  border-bottom: 1px solid var(--color-border);
}

[data-accordion-item]:first-child {
  border-top: 1px solid var(--color-border);
}

[data-accordion-item] > button {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  gap:              var(--space-4);
  width:            100%;
  padding-block:    var(--space-4);
  font-family:      var(--font-body);
  font-size:        var(--text-base);
  font-weight:      600;
  color:            var(--color-text);
  background:       none;
  border:           none;
  cursor:           pointer;
  text-align:       left;
  transition:       color var(--transition-fast);
}

[data-accordion-item] > button:hover {
  color: var(--color-accent);
}

.c-accordion__icon {
  flex-shrink: 0;
  transition:  transform var(--transition-fast);
}

[data-accordion-item].is-open .c-accordion__icon {
  transform: rotate(180deg);
}

.c-accordion__body {
  display:        none;
  padding-bottom: var(--space-4);
  color:          var(--color-text-muted);
  font-size:      var(--text-base);
  line-height:    1.7;
}

[data-accordion-item].is-open .c-accordion__body {
  display: block;
}


/* ── Scroll reveal ────────────────────────────────────── */

[data-reveal] {
  opacity:    0;
  transform:  translateY(18px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
}

[data-reveal].is-visible {
  opacity:   1;
  transform: none;
}

[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }

/* Fallback: make everything visible if reduced motion is set */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity:    1;
    transform:  none;
    transition: none;
  }
}


/* ── Utilities ────────────────────────────────────────── */

.u-sr-only,
.u-visually-hidden {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

.u-text-balance { text-wrap: balance; }