/*
 * Digitis Theme — Base Styles
 * Layer order: reset → fonts → primitives → tokens → base → accessibility → utilities
 *
 * @layer fonts is reserved for child themes to declare their @font-face rules.
 * The parent theme ships no fonts — each child theme brings its own.
 */

@layer reset, fonts, primitives, tokens, base, accessibility, utilities;

/* ── View Transitions — cross-fade on same-origin navigation ─────────────── */
/* Opt-out per element: view-transition-name: none                             */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.01ms; }
}

/* ── @layer fonts ─────────────────────────────────────────────────────────── */
@layer fonts {
  /* Child themes declare @font-face here via their own stylesheet.
     This layer exists to ensure child font declarations load before
     primitives/tokens, maintaining correct cascade order. */
}

/* ── @layer reset ─────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overscroll-behavior-y: none; scrollbar-gutter: stable; }
  body { min-height: 100dvh; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  a { color: inherit; text-decoration: none; }
  a, button, [role="button"], summary, label { -webkit-tap-highlight-color: transparent; }
  ul, ol { list-style: none; }
  table { border-collapse: collapse; }
}

/* ── @layer primitives ────────────────────────────────────────────────────── */
@layer primitives {
  /* Primitive tokens — always overridden at runtime by digitis_css_vars() PHP output.
     Defaults here are neutral fallbacks visible only before PHP tokens load. */
  :root {
    --dt-primary:      #000000;
    --dt-secondary:    #333333;
    --dt-accent:       #555555;
    --dt-bg:           #ffffff;
    --dt-text:         #111111;
    --dt-max:          1440px;
    --dt-pad:          clamp(16px, 2.2vw, 40px);
    --pad:             clamp(24px, 4vw, 64px);
    --dt-gutter:       clamp(12px, 1.6vw, 28px);
    --dt-font-heading: system-ui, sans-serif;
    --dt-font-body:    system-ui, sans-serif;
    --dt-font-mono:    ui-monospace, monospace;
    --dt-radius:       6px;
    --dt-shadow:       0 1px 3px rgb(0 0 0 / .08), 0 1px 2px rgb(0 0 0 / .06);
  }
}

/* ── @layer tokens ────────────────────────────────────────────────────────── */
@layer tokens {
  /* Semantic aliases — child themes override ONLY this layer, never primitives. */
  :root {
    --color-brand:       var(--dt-primary);
    --color-brand-dark:  var(--dt-secondary);
    --color-highlight:   var(--dt-accent);
    --color-surface:     var(--dt-bg);
    --color-on-surface:  var(--dt-text);
    --font-display:      var(--dt-font-heading);
    --font-body:         var(--dt-font-body);
    --font-mono:         var(--dt-font-mono);
    --space-page:        var(--dt-pad);
    --space-gap:         var(--dt-gutter);
    --width-max:         var(--dt-max);
    --radius:            var(--dt-radius);
    --shadow:            var(--dt-shadow);
  }
}

/* ── @layer base ──────────────────────────────────────────────────────────── */
@layer base {
  html, body {
    font-family:            var(--font-body);
    font-size:              16px;
    line-height:            1.5;
    background:             var(--color-surface);
    color:                  var(--color-on-surface);
    -webkit-font-smoothing: antialiased;
  }

  /* Solo en html: overflow-x en body (aunque sea "hidden", que no es "visible")
     lo convierte en scrolling box para position:sticky, y como el scroll real
     ocurre en html, cualquier .sticky descendiente de body deja de moverse. */
  html {
    overflow-x: hidden;
  }

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

  p, li { text-wrap: pretty; }

  code { font-family: var(--font-mono); font-size: .9em; }
  img  { max-width: 100%; }
  svg  { flex-shrink: 0; }

  /* Touch targets — WCAG 2.2 / EAA minimum 24×24px (we target 44px) */
  button, [role="button"], input[type="submit"],
  input[type="reset"], input[type="button"] {
    min-height: 44px;
    min-width:  44px;
    cursor:     pointer;
  }
}

/* ── @layer accessibility ─────────────────────────────────────────────────── */
@layer accessibility {

  /* Skip to main content — WCAG 2.1 + EAA June 2025 */
  .digitis-skip-link {
    position:   absolute;
    left:       -9999px;
    top:        auto;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    z-index:    100000;
  }
  .digitis-skip-link:focus,
  .digitis-skip-link:focus-visible {
    position:        fixed;
    left:            1rem;
    top:             1rem;
    width:           auto;
    height:          auto;
    padding:         .5rem 1.25rem;
    background:      var(--color-brand);
    color:           #fff;
    border-radius:   var(--radius);
    font-size:       .875rem;
    font-weight:     600;
    text-decoration: none;
    outline:         none;
    box-shadow:      0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-brand);
  }

  /* Screen reader text */
  .screen-reader-text {
    clip:       rect(1px, 1px, 1px, 1px);
    clip-path:  inset(50%);
    height:     1px;
    width:      1px;
    margin:     -1px;
    overflow:   hidden;
    padding:    0;
    position:   absolute;
    word-wrap:  normal;
  }

  /* Focus ring — never outline:none without a replacement */
  :focus-visible {
    outline:        2px solid var(--color-brand);
    outline-offset: 3px;
    border-radius:  2px;
  }

  /* EAA / WCAG 2.2 §2.4.11 Focus Not Obscured:
     sticky headers must not fully cover the focused element.
     Child themes: set scroll-margin-top to match their sticky header height. */
  :target, :focus-visible { scroll-margin-top: 80px; }

  /* Reduced motion — wraps ALL transitions and animations */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration:        0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration:       0.01ms !important;
      scroll-behavior:           auto !important;
    }
    .reveal { transition: none; opacity: 1; transform: none; }
  }
  /* JS-driven reduced motion class (toggled by initReducedMotion() in app.js) */
  .reduce-motion .reveal  { transition: none !important; opacity: 1 !important; transform: none !important; }
  .reduce-motion .cursor  { display: none; }
}

/* ── @layer utilities ─────────────────────────────────────────────────────── */
@layer utilities {
  .container {
    width:          100%;
    max-width:      var(--width-max);
    margin-inline:  auto;
    padding-inline: var(--space-page);
    container-type: inline-size;
  }

  /* Reveal animations — opt-in via [data-reveal] attribute, activated by digitis.js */
  [data-reveal] {
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
  }
  [data-reveal].in {
    opacity:   1;
    transform: none;
  }

  /* .reveal — class-based scroll reveal used by child theme app.js.
     Stagger via inline style="--i:N" on each element. */
  .reveal {
    opacity:    0;
    transform:  translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .reveal.in { opacity: 1; transform: none; }

  /* Touch: reset hover transforms that stick on first tap (iOS) */
  @media (hover: none) {
    .btn:hover { transform: none; }
  }

  /* Touch: explicit active feedback replaces hover on coarse pointers */
  @media (pointer: coarse) {
    .btn:active { transform: scale(0.97); transition-duration: 0.06s; }
  }

  /* Nav scroll state — child themes override .topnav.scrolled colors */
  .topnav { transition: box-shadow .25s ease, background .25s ease; }
  .topnav.scrolled {
    box-shadow:          0 2px 20px rgba(10,10,10,.08);
    backdrop-filter:     blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background:          color-mix(in srgb, var(--color-surface) 82%, transparent);
  }

  /* .wrap — section wrapper with fluid side padding via --pad token */
  .wrap { padding-inline: var(--pad); }

  /* Safe area — iPhone notch / Dynamic Island / home indicator */
  .foot    { padding-bottom: max(28px, calc(12px + env(safe-area-inset-bottom, 0px))); }
  .md-panel {
    will-change: transform;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }

  /* ── Mobile drawer — functional base (child overrides visual design) ──────── */
  .mobile-drawer {
    position:   fixed;
    inset-block: 0;
    right:      0;
    width:      min(320px, 85vw);
    background: var(--color-surface);
    transform:  translateX(100%);
    transition: transform .3s ease;
    z-index:    9000;
    will-change: transform;
    padding:    max(24px, env(safe-area-inset-top, 24px)) 24px
                max(24px, env(safe-area-inset-bottom, 24px));
    overflow-y: auto;
  }
  .mobile-drawer.open { transform: translateX(0); }

  .drawer-overlay {
    position:       fixed;
    inset:          0;
    background:     rgba(0, 0, 0, .5);
    z-index:        8999;
    opacity:        0;
    pointer-events: none;
    transition:     opacity .3s ease;
  }
  .drawer-overlay.visible { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }

  /* ── Cookie banner — floating card, slide-up, dismiss on accept/reject ─────── */
  .cookie-banner {
    position:       fixed;
    bottom:         max(24px, env(safe-area-inset-bottom, 24px));
    left:           50%;
    transform:      translateX(-50%) translateY(calc(100% + 32px));
    z-index:        9990;
    width:          min(540px, calc(100vw - 32px));
    display:        flex;
    align-items:    center;
    gap:            20px;
    background:     var(--color-surface);
    border:         1px solid color-mix(in srgb, var(--color-on-surface) 12%, transparent);
    border-radius:  calc(var(--radius, 6px) * 2.5);
    box-shadow:     0 4px 6px -1px rgba(0,0,0,.07), 0 16px 40px -4px rgba(0,0,0,.14);
    padding:        18px 24px;
    opacity:        0;
    pointer-events: none;
    transition:     transform .45s cubic-bezier(.16,1,.3,1), opacity .35s ease;
  }
  .cookie-banner.visible {
    transform:      translateX(-50%) translateY(0);
    opacity:        1;
    pointer-events: auto;
  }
  .cookie-banner__body      { flex: 1; min-width: 0; }
  .cookie-banner__title {
    font-size:      .75rem;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--color-on-surface);
    opacity:        .55;
    margin-bottom:  4px;
  }
  .cookie-banner__text {
    font-size:   .875rem;
    line-height: 1.45;
    color:       var(--color-on-surface);
    margin:      0;
  }
  .cookie-banner__actions { display: flex; gap: 8px; flex-shrink: 0; }
  .cookie-banner__actions button {
    padding:       9px 18px;
    border-radius: var(--radius, 6px);
    font-size:     .875rem;
    font-weight:   600;
    cursor:        pointer;
    white-space:   nowrap;
    border:        none;
    transition:    opacity .15s ease, transform .1s ease;
  }
  .cookie-banner__actions button:active { transform: scale(.96); }
  .cookie-banner__actions [data-cookie-accept] {
    background: var(--color-brand);
    color:      #fff;
  }
  .cookie-banner__actions [data-cookie-accept]:hover { opacity: .88; }
  .cookie-banner__actions [data-cookie-reject] {
    background: transparent;
    color:      var(--color-on-surface);
    border:     1.5px solid color-mix(in srgb, var(--color-on-surface) 22%, transparent);
  }
  .cookie-banner__actions [data-cookie-reject]:hover {
    background: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  }
  @media (max-width: 520px) {
    .cookie-banner { flex-direction: column; align-items: stretch; padding: 20px; }
    .cookie-banner__actions { flex-direction: row-reverse; }
    .cookie-banner__actions button { flex: 1; }
  }
}

/* ── @media print ─────────────────────────────────────────────────────────── */
@media print {
  .topnav, .mobile-drawer, .drawer-overlay,
  .cookie-banner, .nav-burger, .drawer-close,
  [data-menu-toggle], [data-mobile-menu], [data-menu-close] {
    display: none !important;
  }
  body { color: #000; background: #fff; font-size: 12pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  a[href^="#"]::after,
  a[href^="javascript"]::after { content: ""; }
  h1, h2, h3 { page-break-after: avoid; }
  img, figure { page-break-inside: avoid; max-width: 100% !important; }
  @page { margin: 1.5cm 2cm; }
}