/* Website.am Studio: reset, typography, container, header, footer, shared primitives.
   Blocks never rely on anything here except tokens, .wsa-container, .wsa-btn, .wsa-eyebrow and .wsa-reveal. */

@layer reset {
  :where(*, *::before, *::after) { box-sizing: border-box; }
  :where(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  :where(body) { margin: 0; }
  :where(h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; }
  :where(ul, ol) { padding: 0; list-style: none; }
  :where(img, svg, video) { display: block; max-width: 100%; height: auto; }
  :where(button, input, select, textarea) { font: inherit; color: inherit; }
  :where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
  :where(a) { color: inherit; text-decoration: none; }
  @media (prefers-reduced-motion: reduce) { :where(html) { scroll-behavior: auto; } }
}

@layer base {
  html { background: var(--bg); }
  body {
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }
  ::selection { background: var(--accent); color: #fff; }
  :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 4px; }

  h1, h2, h3, h4 { font-weight: 800; line-height: var(--lh-heading); letter-spacing: var(--track-display); text-wrap: balance; }
  h1 { font-size: var(--fs-display); line-height: var(--lh-display); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
  p { text-wrap: pretty; }
  strong { font-weight: 700; }
  .wsa-accent { font-style: normal; color: var(--accent-bright); }

  .wsa-container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .wsa-section { padding-block: var(--space-section); position: relative; }
  .wsa-section--light { background: var(--light-bg); color: var(--light-ink); }
  .wsa-section--light .wsa-muted { color: var(--light-muted); }
  .wsa-muted { color: var(--muted); }
  .wsa-lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 62ch; }
  .wsa-section--light .wsa-lead { color: var(--light-muted); }
  .wsa-heading { max-width: 22ch; }
  .wsa-center { text-align: center; }
  .wsa-center .wsa-heading, .wsa-center .wsa-lead { margin-inline: auto; }

  .wsa-grid-bg { position: relative; isolation: isolate; }
  .wsa-grid-bg::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 96px 96px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 100%);
  }

  /* Buttons */
  .wsa-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px; border-radius: var(--radius-pill);
    font-weight: 700; font-size: 1rem; line-height: 1; white-space: nowrap;
    transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background-color 0.25s, border-color 0.25s;
    will-change: transform;
  }
  .wsa-btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(47,107,255,0.28); }
  .wsa-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(47,107,255,0.42); background: #3c76ff; }
  .wsa-btn--ghost { border: 1px solid var(--line); color: var(--ink); background: transparent; }
  .wsa-btn--ghost:hover { border-color: var(--accent-bright); transform: translateY(-2px); }
  .wsa-section--light .wsa-btn--ghost { border-color: var(--light-line); color: var(--light-ink); }
  .wsa-btn--link { padding: 0; color: var(--accent-bright); font-weight: 600; }
  .wsa-btn--link:hover span { transform: translateX(4px); }
  .wsa-btn--link span { display: inline-block; transition: transform 0.25s var(--ease-out); }
  .wsa-btn:active { transform: translateY(0) scale(0.98); }

  /* Eyebrow */
  .wsa-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill);
    font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.02em; color: var(--muted);
    background: var(--glass);
  }
  .wsa-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 10px var(--accent-bright); }
  .wsa-section--light .wsa-eyebrow { border-color: var(--light-line); background: #fff; color: var(--light-muted); }

  /* Icon bubble */
  .wsa-bubble { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-soft); background: var(--glass-strong); color: var(--accent-bright); }

  /* Reveal (JS-gated; without JS everything is visible) */
  html.wsa-js .wsa-reveal { opacity: 0; transform: translateY(32px); }
  html.wsa-js .wsa-reveal.is-in, html.wsa-js .wsa-reveal.is-static { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) { html.wsa-js .wsa-reveal { opacity: 1; transform: none; } }

  /* Honeypot */
  .wsa-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* Skip link */
  .wsa-skip { position: absolute; left: 16px; top: -60px; padding: 10px 16px; background: var(--accent); color: #fff; border-radius: 8px; z-index: 100; }
  .wsa-skip:focus { top: 16px; }

  /* ---------- Header ---------- */
  .wsa-header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color 0.35s, backdrop-filter 0.35s, box-shadow 0.35s; }
  .wsa-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; transition: height 0.3s var(--ease-out); }
  .wsa-header.is-stuck { background: rgba(7,11,26,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); }
  .wsa-header.is-stuck .wsa-header__inner { height: 68px; }
  .wsa-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; }
  .wsa-logo__mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent-deep), var(--accent-bright)); display: grid; place-items: center; box-shadow: 0 0 24px var(--accent-glow); }
  .wsa-logo__mark svg { width: 18px; height: 18px; }
  .wsa-logo img { height: 36px; width: auto; }
  .wsa-nav { display: flex; align-items: center; gap: 4px; }
  .wsa-nav li { list-style: none; display: contents; }
  .wsa-nav a { padding: 10px 14px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.95rem; color: var(--muted); transition: color 0.2s, background-color 0.2s; }
  .wsa-nav a:hover, .wsa-nav .current-menu-item > a { color: var(--ink); background: var(--glass); }
  .wsa-nav__cta { margin-left: 12px; }
  .wsa-nav__cta .wsa-btn { padding: 12px 22px; font-size: 0.95rem; }
  .wsa-burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); place-items: center; }
  .wsa-burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }

  @media (max-width: 960px) {
    .wsa-burger { display: grid; }
    .wsa-nav { position: fixed; inset: 0; background: var(--bg); flex-direction: column; justify-content: center; gap: 8px; padding: 32px; transform: translateY(-100%); opacity: 0; transition: transform 0.45s var(--ease-out), opacity 0.3s; pointer-events: none; }
    .wsa-nav.is-open { transform: none; opacity: 1; pointer-events: auto; }
    .wsa-nav a { font-size: 1.5rem; padding: 12px 20px; }
    .wsa-nav__cta { margin: 16px 0 0; }
    .wsa-header.is-open .wsa-burger span { background: transparent; }
  }

  /* Page body offset for fixed header on non-hero pages */
  .wsa-page-head { padding: calc(84px + var(--space-xl)) 0 var(--space-lg); }
  .wsa-page-head .wsa-heading { max-width: 20ch; }
  .wsa-breadcrumbs { font-size: var(--fs-small); color: var(--muted); margin-bottom: 16px; }
  .wsa-breadcrumbs a { color: var(--muted); }
  .wsa-breadcrumbs a:hover { color: var(--ink); }

  /* Long-form content (posts) */
  .wsa-prose { max-width: 72ch; margin-inline: auto; font-size: 1.125rem; }
  .wsa-prose > * + * { margin-top: 1.4em; }
  .wsa-prose h2 { font-size: 2rem; margin-top: 2em; }
  .wsa-prose h3 { margin-top: 1.6em; }
  .wsa-prose ul { list-style: disc; padding-left: 1.4em; }
  .wsa-prose ol { list-style: decimal; padding-left: 1.4em; }
  .wsa-prose a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
  .wsa-prose img { border-radius: var(--radius-md); }
  .wsa-prose blockquote { border-left: 3px solid var(--accent); padding-left: 20px; color: var(--muted); font-size: 1.25rem; }
  .wsa-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
  .wsa-prose pre { background: var(--surface); border: 1px solid var(--line); padding: 20px; border-radius: var(--radius-md); overflow: auto; }

  /* Archive cards */
  .wsa-post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .wsa-post-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius-md); border: 1px solid var(--line-soft); background: var(--glass); transition: transform 0.3s var(--ease-out), border-color 0.3s; }
  .wsa-post-card:hover { transform: translateY(-4px); border-color: rgba(96,165,250,0.4); }
  .wsa-post-card__media { aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, var(--surface-2), var(--accent-deep)); }
  .wsa-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .wsa-post-card__meta { display: flex; gap: 10px; font-size: var(--fs-label); color: var(--muted); font-weight: 600; }
  .wsa-post-card__meta b { color: var(--accent-bright); font-weight: 600; }
  .wsa-post-card h3 { font-size: 1.2rem; }
  .wsa-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; }
  .wsa-pagination a, .wsa-pagination span { padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); }
  .wsa-pagination .current { background: var(--accent); border-color: var(--accent); color: #fff; }
  @media (max-width: 900px) { .wsa-post-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .wsa-post-grid { grid-template-columns: 1fr; } }

  /* ---------- Footer ---------- */
  .wsa-footer { border-top: 1px solid var(--line-soft); padding: var(--space-xl) 0 40px; background: linear-gradient(180deg, var(--bg), #050814); }
  .wsa-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
  .wsa-footer__brand p { color: var(--muted); margin-top: 16px; max-width: 34ch; }
  .wsa-footer h4 { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 18px; font-weight: 700; }
  .wsa-footer ul { display: grid; gap: 10px; }
  .wsa-footer ul a { color: var(--ink); opacity: 0.85; }
  .wsa-footer ul a:hover { opacity: 1; color: var(--accent-bright); }
  .wsa-footer__contact { display: grid; gap: 10px; color: var(--ink); }
  .wsa-footer__contact small { color: var(--muted); display: block; }
  .wsa-footer__bottom { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; font-size: var(--fs-small); color: var(--muted); }
  .wsa-footer__bottom nav { display: flex; gap: 20px; }
  .wsa-badges { display: flex; gap: 10px; flex-wrap: wrap; }
  .wsa-badges span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; }
  .wsa-badges span i { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
  @media (max-width: 900px) { .wsa-footer__grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .wsa-footer__grid { grid-template-columns: 1fr; } }
}

@layer utilities {
  .wsa-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

@layer base {
  .wsa-prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; display: block; overflow-x: auto; }
  .wsa-prose th, .wsa-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .wsa-prose th { color: var(--ink); font-weight: 700; background: var(--surface); }
  .wsa-prose td { color: var(--muted); }
  .wsa-prose .wsa-callout { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-md); padding: 24px 28px; }
  .wsa-prose .wsa-callout p { margin: 0; }
  .wsa-prose .wsa-callout p + p { margin-top: 12px; }
  .wsa-prose .wsa-callout .wsa-btn { margin-top: 16px; text-decoration: none; }
  .wsa-prose .wsa-faq { padding-block: 24px; }
  .wsa-prose .wsa-faq .wsa-container { width: 100%; }
  .wsa-prose .wsa-faq h3 { margin-top: 0; }
}