/* ═══════════════════════════════════════════════════
   SPHRAGIO — Base Design System
   Used by: homepage, upload page, result page

   Layer strategy (Tailwind v4 cascade order):
     @layer base        < @layer components < @layer utilities
   Reset/element rules go in base  → utilities/DaisyUI override them.
   Component classes go in components → utilities/DaisyUI override them.
   :root variables are unlayered   → just defines custom properties.

   NOTE for STEP 2: .footer shares its name with DaisyUI's
   .footer { display:grid } in @layer utilities. After STEP 2 updates
   the footer HTML, either rename the class to .site-footer or add
   display:block to the rule below (unlayered or via !important).
   ═══════════════════════════════════════════════════ */

/* ── Poppins (self-hosted; see static/fonts/poppins/) ── */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-Regular.4ab736f0158e.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-Medium.a1123f3ad474.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-SemiBold.5c740b2c19df.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-Bold.80a8b69d3f97.woff2") format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-ExtraBold.ca5c62c4ba11.woff2") format('woff2');
}

/* ── Reset + element defaults ── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }
  body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #1A2332;
    background: #fff;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; }
  a { text-decoration: none; color: inherit; }
  ul { list-style: none; padding: 0; margin: 0; }
  img { max-width: 100%; display: block; }
}

/* ── CSS Variables ──
   Brand colours, radius, shadow, type/spacing scale, and the nav-height live in
   the canonical token layer: static/css/sphragio-tokens.css (PR-D2b / ADR-0025),
   linked before this file in base.html. Defined once there. */

/* ── Component styles ── */
@layer components {

  /* Navigation */
  .nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid var(--gray-100);
    padding: 0 24px;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 1.625rem;
    color: var(--navy);
    letter-spacing: -0.3px;
  }
  .nav-logo-img {
    height: 40px;
    width: 40px;
    object-fit: contain;
  }
  /* Loading phase: chrome (nav + footer) STAYS visible so the upload in-flight twin
     and the status page read as one continuous screen — no white void — but is made
     non-interactive so a stray nav/footer click cannot navigate away and abort the
     in-flight upload XHR. The body.upload-loading class is toggled by
     loading-animation.js; it no longer blanks the page. */
  body.upload-loading .nav,
  body.upload-loading .nav-mobile,
  body.upload-loading .site-footer { pointer-events: none; }
  .nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
  }
  .nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    transition: color 0.15s;
  }
  .nav-links a:hover { color: var(--navy); }
  .nav-links a.nav-active { color: var(--navy); font-weight: 600; }
  .nav-cta {
    background: var(--navy) !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 8px 20px;
    border-radius: var(--radius-sm);
    transition: background 0.15s !important;
  }
  .nav-cta:hover { background: var(--navy-light) !important; }
  /* ── DE/EN UI language switch (PR-D2b) ── */
  .lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }
  .lang-switch-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--gray-500);
    padding: var(--chip-pad-y) var(--chip-pad-x);
    transition: background 0.15s, color 0.15s;
  }
  .lang-switch-btn:hover { color: var(--navy); }
  .lang-switch-btn.is-active {
    background: var(--navy);
    color: #fff;
  }
  .lang-switch--mobile { margin: 8px 16px; }
  /* Mobile menu DE/EN pills sit side by side and are easy to mis-tap at the
     desktop ~20px height — give them a comfortable tap target on mobile only. */
  .lang-switch--mobile .lang-switch-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .nav-burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
  }
  .nav-burger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: all 0.25s;
  }
  .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger.open span:nth-child(2) { opacity: 0; }
  .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-mobile {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--gray-100);
    padding: 16px 24px 24px;
    z-index: 99;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .nav-mobile.open { display: flex; }
  .nav-mobile a {
    display: block;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-100);
    transition: color 0.15s;
  }
  .nav-mobile a:last-child { border-bottom: none; }
  .nav-mobile a:hover { color: var(--navy); }
  .nav-mobile .nav-mobile-cta {
    margin-top: 12px;
    display: block;
    text-align: center;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    padding: 14px;
    border-radius: var(--radius-sm);
    border-bottom: none;
  }
  @media (min-width: 768px) {
    .nav-links  { display: flex !important; }
    .nav-burger { display: none !important; }
    .nav-mobile { display: none !important; }
  }
  /* 767.98 (not 768) so the two ranges meet without overlapping at exactly
     768px — an overlap there would let the mobile !important rules hide BOTH
     the link row and the burger, leaving no visible nav. */
  @media (max-width: 767.98px) {
    .nav-links  { display: none !important; }
    .nav-burger { display: flex; }
    .nav-logo { font-size: 1.25rem; gap: 10px; }
  }

  /* Footer */
  .site-footer {
    background: #fff;
    border-top: 1px solid var(--gray-100);
    padding: 20px 24px;
    text-align: center;
  }
  .footer-links {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  .footer-links a {
    font-size: 13px;
    color: var(--gray-500);
    transition: color 0.15s;
  }
  .footer-links a:hover { color: var(--navy); }
  .footer-contact {
    margin-top: 12px;
    font-size: 13px;
    color: var(--gray-500);
  }
  .footer-contact a { color: var(--gray-500); transition: color 0.15s; }
  .footer-contact a:hover { color: var(--navy); }

  /* Buttons */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    transition: background 0.15s, transform 0.1s;
    border: none;
    cursor: pointer;
  }
  .btn-primary:hover { background: var(--navy-light); transform: translateY(-1px); }

  .btn-accent {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1DB87A;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    padding: 14px 32px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
  }
  .btn-accent:hover { background: #17A56E; transform: translateY(-1px); }

  /* Section typography */
  .section-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 12px;
  }
  /* Academic restyle (PR #444 language): serif display voice + centered
     short gold accent bar — the marketing twin of .result-section-heading. */
  .section-title {
    position: relative;
    text-align: center;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--gray-900);
    margin-bottom: 8px;
    padding-bottom: 12px;
  }
  .section-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 44px;
    height: 2px;
    background: var(--accent);
  }
  .section-sub {
    text-align: center;
    font-size: 15px;
    color: var(--gray-500);
    margin-bottom: 48px;
  }

  /* Page wrapper */
  .page-content {
    min-height: calc(100vh - var(--nav-height) - 62px); /* viewport minus nav minus footer */
  }

  /* Skip-to-content link (WCAG 2.4.1 Bypass Blocks) — off-screen until focused,
     then slides into the top-left above the sticky nav (nav z-index is 100). */
  .skip-link {
    position: absolute;
    left: 8px;
    top: -60px;
    z-index: 200;
    padding: 10px 16px;
    background: var(--navy);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: top 150ms ease-in;
  }
  .skip-link:focus,
  .skip-link:focus-visible {
    top: 0;
    outline: 3px solid var(--navy-light);
    outline-offset: 2px;
  }
  /* Keep the focus location perceivable after activating the skip link
     (Qodo #443: outline:none here would strand keyboard users with no cue). */
  #main:focus-visible {
    outline: 2px solid var(--navy-light);
    outline-offset: 4px;
  }

} /* end @layer components */