/* ============================================================
   FlowStone WordPress additions (loaded after fs.css).
   Everything here supports the editable sections: background and
   spacing options, the italic accent in headings, lists written in
   the visual editor, and a few rules the approved design kept
   inline. Brand colors and fonts are overridden from
   Site Settings > Brand (printed after this file).
   ============================================================ */

/* WordPress adds width/height attributes to images (to prevent layout
   shift); let the stylesheet's sizing and aspect ratios win. */
img { height: auto; }

/* ---------- Header ---------- */
.header-utils { display: flex; align-items: center; gap: 1rem; }
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) {
  body.admin-bar .site-header { top: 0; }
  .header-cta { display: none; }
}
/* The logo never shrinks and the header button stays on one line.
   On small laptops the menu tightens, and below 1280px it moves into
   the menu button (the same drawer phones use) so nothing overlaps. */
.logo { flex-shrink: 0; margin-right: 1.5rem; }
.header-utils { margin-left: 1.5rem; }
.header-cta { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1380px) {
  .main-nav { gap: 1.4rem; }
}
@media (min-width: 981px) and (max-width: 1279px) {
  .main-nav {
    position: fixed;
    inset: 0;
    background: rgba(11, 14, 18, 0.97);
    backdrop-filter: blur(16px);
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
  }
  body.nav-open .main-nav { opacity: 1; pointer-events: auto; }
  .main-nav a:not(.btn) { font-size: 1.1rem; }
  .nav-toggle { display: block; }
  html.no-js .main-nav { position: static; inset: auto; background: none; backdrop-filter: none; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 0.9rem 1.2rem; opacity: 1; pointer-events: auto; }
  html.no-js .main-nav a:not(.btn) { font-size: 0.72rem; }
  html.no-js .nav-toggle { display: none; }
}

/* ---------- Section options (Layout options in the editor) ---------- */
.section--alt { background: var(--ink-2); }
.section--compact { padding: clamp(3rem, 6vw, 5rem) 0; }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

/* Italic accent words in headings (the *asterisk* style). */
.section-head h2 em,
.fs-split h2 em,
.fs-centered h2 em,
.market-detail h2 em,
.next-steps h2 em,
.fs-columns h3 em,
.benefit h3 em,
.value-card h3 em { font-style: italic; color: var(--blue-soft); }
.why .section-head h2 em,
.why .fs-split h2 em,
.why .fs-centered h2 em,
.why h3 em { color: inherit; }

/* ---------- Page header variants ---------- */
.page-hero--center { min-height: 80svh; display: flex; align-items: center; }
.page-hero--center .wrap { text-align: center; }
.page-hero--center h1 { margin-left: auto; margin-right: auto; }
.page-hero--center .eyebrow,
.page-hero--center .hero-ctas { justify-content: center; }
.page-hero--center .lede { margin: 1.4rem auto 2.2rem; }
.page-hero .hero-ctas { margin-top: 2rem; }
.page-hero .tag { display: inline-block; margin-top: 1.5rem; cursor: default; }

/* ---------- Text sections ---------- */
.fs-links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
.fs-links--center { justify-content: center; }
.fs-centered .eyebrow { justify-content: center; }
.fs-centered .prose p { margin-left: auto; margin-right: auto; }
.fs-narrow { max-width: 880px; }

/* Lists typed in the visual editor pick up the brand diamond bullets
   (the same look as the contact and spec-assistance lists). */
.fs-list ul, .prose ul { margin: 0 0 1.1rem; }
.fs-list ul li, .prose ul li {
  display: flex;
  gap: 0.8rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--text-dim);
}
.fs-list ul li::before, .prose ul li::before {
  content: "\25C6";
  color: var(--blue);
  font-size: 0.5rem;
  line-height: 2.4;
  flex: none;
}
.why .fs-list ul li, .why .prose ul li { border-bottom-color: var(--line-dark); }
.prose ol { padding-left: 1.2rem; margin: 0 0 1.1rem; color: var(--text-dim); }
.prose ol li { padding: 0.25rem 0; }
.prose a, .fs-note a, .form-note a, .swatch-footnote a, .viz-note a {
  color: var(--blue-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.prose a:hover, .fs-note a:hover, .form-note a:hover, .viz-note a:hover { color: #fff; }
.why .prose a, .why .form-note a { color: var(--blue-deep); }
.fs-col-title { font-size: 1.35rem; }
.fs-columns .eyebrow { margin-bottom: 0.4rem; }
.grid-2.fs-columns, .grid-3.fs-columns { align-items: start; }
.fs-note p + p { margin-top: 0.6rem; }
.stat-cite.fs-note { font-size: 0.72rem; margin-top: 1.2rem; }

/* ---------- Collections ---------- */
/* A collection's full palette shows the whole chart chip. */
.swatch-grid--chart .swatch img { aspect-ratio: 1 / 1; }
a.collection-visual { display: block; }
.market-detail .visual .collection-texture { position: absolute; inset: 0; background-size: cover; background-position: center; }
.swatch-empty { display: block; aspect-ratio: 5 / 3; background: var(--ink-3); }

/* ---------- Forms ---------- */
.contact-grid.fs-top { align-items: start; }
.form-narrow { max-width: 920px; margin: 0 auto; }
.check-group { border: 1px solid var(--line); padding: 1.2rem 1.3rem 0.7rem; }
.check-group legend {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-dim); padding: 0 0.5rem;
}
.check { display: inline-flex; align-items: center; gap: 0.55rem; margin: 0 1.8rem 0.7rem 0; font-size: 0.92rem; color: var(--text); cursor: pointer; }
.check input { accent-color: var(--blue); width: 1rem; height: 1rem; }
.form-break {
  grid-column: 1 / -1; font-family: var(--font-body); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--blue-soft);
  border-top: 1px solid var(--line); padding-top: 1.4rem; margin-top: 0.4rem;
}

/* ---------- Legal text ---------- */
.legal-body { max-width: 68ch; }
.legal-body h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin: 2.8rem 0 1rem; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 { font-size: 1.2rem; margin: 2rem 0 0.8rem; }
.legal-body p, .legal-body li { color: var(--text-dim); max-width: 62ch; }
.legal-body p { margin-bottom: 1.05rem; }
.legal-body ul { margin: 0 0 1.3rem; padding-left: 1.15rem; list-style: disc; }
.legal-body ol { margin: 0 0 1.3rem; padding-left: 1.15rem; }
.legal-body li { margin-bottom: 0.55rem; }
.legal-body a { color: var(--blue-soft); text-decoration: underline; transition: color 0.3s; }
.legal-body a:hover { color: #fff; }
.legal-body strong { color: var(--text); }

/* ---------- Thank-you next steps ---------- */
.next-actions { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: center; margin-top: 2.2rem; }

/* ---------- Visualizer ---------- */
.viz-cta { width: 100%; justify-content: center; margin-top: 0.8rem; }
.viz-note p { margin: 0; }

/* ---------- Footer ---------- */
.footer-sib { font-size: 0.78rem; color: var(--text-dim); margin: 0 0 1.1rem; }
.footer-sib a { color: var(--text-dim); text-decoration: underline; transition: color 0.3s; }
.footer-sib a:hover { color: var(--blue-soft); }
.footer-legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }

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

@media (max-width: 980px) {
  .grid-3.fs-columns { grid-template-columns: 1fr; }
}