/**
 * FIVE WITHIN design system — paste into WP Additional CSS
 * Version: fw-ds-1.0.0
 * Date: 2026-09-23
 * Contents: tokens.css + components.css
 * Host: WordPress.com Assembler (Additional CSS only; no theme.json)
 */
/**
 * FIVE WITHIN design tokens — fw-ds-1.0.0
 * Two layers: primitives (raw values) + semantic (preferred in components).
 * Backward-compatible aliases preserve --fw-ink, --fw-paper, etc.
 * Host: WordPress.com Assembler Additional CSS (no theme.json / style engine).
 */
:root {
  /* ── Primitives ─────────────────────────────────────────── */
  /* Ink / paper / line */
  --fw-color-ink-950: #151514;
  --fw-color-ink-800: #343430;
  --fw-color-ink-500: #6b6861;
  --fw-color-ink-400: #999999;
  --fw-color-paper-100: #f5f1e9;
  --fw-color-paper-50: #f8f5ef;
  --fw-color-line-200: #d2cbc0;
  --fw-color-line-300: #cfc8bd;
  /* Five Elements (palette primitives) */
  --fw-color-wood: #829487;
  --fw-color-fire: #b86145;
  --fw-color-earth: #9a7748;
  --fw-color-metal: #8a8780;
  --fw-color-water: #394846;
  /* Danger (error chrome) */
  --fw-color-danger-fg: #8b2e2e;
  --fw-color-danger-bg: #f7e8e4;
  --fw-color-danger-border: #e2b7ae;
  /* Inverse / elevated surfaces */
  --fw-color-white: #ffffff;
  --fw-color-line-faint: #eeeeee;
  /* Font stacks */
  --fw-font-stack-display: "Bodoni Moda", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fw-font-stack-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  /* Space scale (4 / 8 / 12 / 16 / 24 / 32 / 48 / 64) */
  --fw-space-1: 4px;
  --fw-space-2: 8px;
  --fw-space-3: 12px;
  --fw-space-4: 16px;
  --fw-space-5: 24px;
  --fw-space-6: 32px;
  --fw-space-7: 48px;
  --fw-space-8: 64px;

  /* Radius (brand: square) */
  --fw-radius-0: 0;

  /* Layout */
  --fw-size-max-width: 1320px;
  --fw-size-header-h: 84px;
  --fw-size-header-h-compact: 64px;
  --fw-size-focus-width: 2px;

  /* Elevation */
  --fw-elevation-menu: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* ── Semantic (prefer these in components) ──────────────── */
  --fw-bg-canvas: var(--fw-color-paper-100);
  --fw-bg-surface: var(--fw-color-paper-50);
  --fw-bg-elevated: var(--fw-color-white);
  --fw-border-default: var(--fw-color-line-200);
  --fw-border-strong: var(--fw-color-line-300);
  --fw-text-primary: var(--fw-color-ink-950);
  --fw-text-secondary: var(--fw-color-ink-800);
  --fw-text-muted: var(--fw-color-ink-500);
  --fw-text-faint: var(--fw-color-ink-400);
  --fw-text-inverse: var(--fw-color-white);
  --fw-brand-cta-bg: var(--fw-color-ink-950);
  --fw-brand-cta-fg: var(--fw-color-white);
  --fw-state-danger-bg: var(--fw-color-danger-bg);
  --fw-state-danger-fg: var(--fw-color-danger-fg);
  --fw-state-danger-border: var(--fw-color-danger-border);
  --fw-focus-ring: var(--fw-color-ink-950);
  --fw-font-display: var(--fw-font-stack-display);
  --fw-font-body: var(--fw-font-stack-body);
  --fw-radius-none: var(--fw-radius-0);
}

@media (max-width: 720px) {
  header[style*="border-bottom"] > div {
    min-height: var(--fw-header-height-compact) !important;
    gap: var(--fw-space-md) !important;
    padding: 10px 0 !important;
  }

  header[style*="border-bottom"] a[href="/"] {
    font-size: 22px !important;
  }

  header[style*="border-bottom"] a[href="/"] span {
    font-size: 14px !important;
  }

  /* Primary nav links in one wrapping row with smaller gap */
  nav[aria-label="Primary navigation"] {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: var(--fw-space-md) var(--fw-space-lg) !important;
  }

  nav[aria-label="Primary navigation"] a {
    font-size: 13px !important;
    padding: 10px 0 !important;
  }

  /* CTA stays reachable; may sit below links */
  nav[aria-label="Primary navigation"] a[href="/your-reading/"][style*="background"],
  nav[aria-label="Primary navigation"] a.fw-nav-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-top: var(--fw-space-xs);
    padding: var(--fw-space-md) var(--fw-space-lg) !important;
    font-size: 12px !important;
    width: auto;
    max-width: 100%;
    background: var(--fw-brand-cta-bg) !important;
    color: var(--fw-brand-cta-fg) !important;
    border: 1px solid var(--fw-brand-cta-bg) !important;
  }
}

@media (max-width: 480px) {
  /* Hide Methodology only (href="/sources-and-schools/"); Learn, Your Reading, CTA remain.
     Sources page stays reachable from footer. */
  nav[aria-label="Primary navigation"] a[href="/sources-and-schools/"] {
    display: none !important;
  }

  /* Reduce vertical stack: logo row + one link row + CTA max */
  header[style*="border-bottom"] > div {
    min-height: 56px !important;
    gap: var(--fw-space-sm) !important;
    padding: var(--fw-space-sm) 0 !important;
  }

  nav[aria-label="Primary navigation"] {
    gap: var(--fw-space-sm) var(--fw-space-md) !important;
  }

  nav[aria-label="Primary navigation"] a {
    font-size: 12px !important;
    padding: var(--fw-space-sm) 0 !important;
  }

  nav[aria-label="Primary navigation"] a[href="/your-reading/"][style*="background"],
  nav[aria-label="Primary navigation"] a.fw-nav-cta {
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--fw-space-xs);
    padding: var(--fw-space-md) var(--fw-space-lg) !important;
  }
}

.fw-bazi__field > span,
.fw-bazi__field > label,
.fw-bazi__location > label {
  font-weight: 600;
  font-size: 13px;
}

.fw-bazi__field input,
.fw-bazi__field select,
.fw-bazi__location input[type="search"] {
  appearance: none;
  border: 1px solid var(--fw-border-default);
  background: var(--fw-bg-elevated);
  color: var(--fw-text-primary);
  padding: 14px 14px;
  font: inherit;
  font-size: 15px;
  border-radius: var(--fw-radius-none);
  width: 100%;
  box-sizing: border-box;
}

.fw-bazi__field input:focus,
.fw-bazi__field select:focus,
.fw-bazi__location input:focus,
.fw-bazi__field input:focus-visible,
.fw-bazi__field select:focus-visible,
.fw-bazi__location input:focus-visible {
  outline: var(--fw-size-focus-width, 2px) solid var(--fw-focus-ring);
  outline-offset: 1px;
}

.fw-bazi__field small,
.fw-bazi__location small {
  color: var(--fw-text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.fw-bazi__check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--fw-space-xs) 0 18px;
  font-size: 14px;
  color: var(--fw-text-secondary);
}

.fw-bazi__location {
  position: relative;
  margin-bottom: 18px;
}

.fw-bazi__location-results {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% - 22px);
  background: var(--fw-bg-elevated);
  border: 1px solid var(--fw-border-default);
  max-height: 220px;
  overflow: auto;
  box-shadow: var(--fw-shadow-menu);
}

.fw-bazi__primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--fw-brand-cta-bg);
  color: var(--fw-brand-cta-fg);
  border: 1px solid var(--fw-brand-cta-bg);
  padding: var(--fw-space-lg) 26px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--fw-radius-none);
}

.fw-bazi__primary:hover {
  opacity: 0.92;
}

.fw-bazi__primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fw-bazi__primary:focus-visible {
  outline: var(--fw-size-focus-width, 2px) solid var(--fw-focus-ring);
  outline-offset: 2px;
}

.fw-bazi__privacy {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--fw-text-muted);
}

.fw-bazi__result {
  padding: var(--fw-space-7) var(--fw-space-5) var(--fw-space-7) 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  box-sizing: border-box;
}

.fw-bazi__empty {
  text-align: center;
  max-width: 320px;
}

.fw-bazi__seal {
  display: inline-flex;
  width: 72px;
  height: 72px;
  border: 1px solid var(--fw-border-default);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 34px;
  color: var(--fw-text-primary);
  margin-bottom: 18px;
  background: var(--fw-bg-elevated);
  opacity: 0.92;
}

.fw-bazi__reading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: var(--fw-space-xl);
}

.fw-bazi__reading-grid article,
.fw-bazi__insights article {
  border: 1px solid var(--fw-border-default);
  background: var(--fw-bg-surface);
  padding: 22px;
}

.fw-bazi__eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fw-text-muted);
  margin: 0 0 10px;
}

.fw-bazi__secondary {
  display: inline-block;
  margin-top: 14px;
  color: var(--fw-text-primary);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
}

.fw-bazi__secondary:focus-visible {
  outline: var(--fw-size-focus-width, 2px) solid var(--fw-focus-ring);
  outline-offset: 2px;
}

.fw-bazi__method-note,
.fw-bazi__disclaimer {
  width: min(var(--fw-max-width), calc(100% - var(--fw-space-7)));
  margin: var(--fw-space-xl) auto 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fw-text-muted);
}

.fw-bazi__disclaimer {
  padding-top: var(--fw-space-sm);
  border-top: 0;
}

.fw-bazi__boundary-note {
  font-size: 12px;
  color: var(--fw-text-muted);
  margin-top: 14px;
}

.fw-bazi__reading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: var(--fw-space-xl);
}

.fw-bazi__reading-grid article,
.fw-bazi__insights article {
  border: 1px solid var(--fw-border-default);
  background: var(--fw-bg-surface);
  padding: 22px;
}

.fw-bazi__eyebrow {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fw-text-muted);
  margin: 0 0 10px;
}

.fw-bazi__secondary {
  display: inline-block;
  margin-top: 14px;
  color: var(--fw-text-primary);
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
}

.fw-bazi__secondary:focus-visible {
  outline: var(--fw-size-focus-width, 2px) solid var(--fw-focus-ring);
  outline-offset: 2px;
}

.fw-bazi__method-note,
.fw-bazi__disclaimer {
  width: min(var(--fw-max-width), calc(100% - var(--fw-space-7)));
  margin: var(--fw-space-xl) auto 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fw-text-muted);
}

.fw-bazi__disclaimer {
  padding-top: var(--fw-space-sm);
  border-top: 0;
}

.fw-bazi__boundary-note {
  font-size: 12px;
  color: var(--fw-text-muted);
  margin-top: 14px;
}

@media (max-width: 860px) {
  .fw-bazi__workspace {
    grid-template-columns: 1fr;
  }

  .fw-bazi__form {
    border-right: 0;
    border-bottom: 1px solid var(--fw-border-default);
    padding: 28px 0;
  }

  .fw-bazi__result {
    padding: 36px 0;
    min-height: 240px;
  }

  .fw-bazi__field-row {
    grid-template-columns: 1fr;
  }

  .fw-bazi__pillars,
  .fw-bazi__element-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .fw-bazi__intro,
  .fw-bazi__workspace,
  .fw-bazi__elements,
  .fw-bazi__insights,
  .fw-bazi__reading,
  .fw-bazi__method-note,
  .fw-bazi__disclaimer {
    width: min(var(--fw-max-width), calc(100% - var(--fw-space-6)));
  }

  .fw-bazi__pillars,
  .fw-bazi__element-grid {
    grid-template-columns: 1fr 1fr;
  }
}