/*
 * polish.css — design polish APPLICATION LAYER.
 *
 * Architecture (as of 2026-04-25 design-tokens promotion):
 *
 *   Source-of-truth design tokens live in tailwind.config.js under
 *   theme.extend.colors.{paper,ink,brass} and theme.extend.fontFamily.serif.
 *   Those tokens compile to Tailwind utility classes (`bg-paper`,
 *   `text-brass`, `font-serif`, etc.) usable directly in any markup
 *   that goes through the Tailwind content scan (HTML pages and
 *   public/app.src.js).
 *
 *   This file is the APPLICATION layer. It is responsible for:
 *     1. Declaring matching CSS variables (--polish-*) for any
 *        non-Tailwind context (inline page styles).
 *     2. Overriding per-page legacy <style> blocks where the cascade
 *        would otherwise win against the new tokens (uses !important
 *        only when the per-page rule predates this layer).
 *     3. Targeting class hooks (.shield-icon, .logo-text, .article-hero h1)
 *        that exist in markup but can't be authored as Tailwind utilities.
 *
 *   New design work should prefer Tailwind utility classes (bg-paper,
 *   text-brass, font-serif). This file should not grow — it should
 *   shrink as legacy inline styles are migrated.
 *
 * Loaded AFTER each page's inline <style> so high-specificity selectors
 * here win the cascade. Items match the polish-bundle the user signed
 * off on 2026-04-25, dialed back to "platform" mood (less editorial):
 *
 *   - A: Source Serif 4 for hero + guide H1 only (Inter elsewhere)
 *   - C: text-wrap balance on headings, pretty on paragraphs
 *   - D: warm paper background (#FBFAF6) replaces pure white
 *        warm beige (#F1EDE2) replaces mint callouts (#DEF2F1)
 *   - E: restrained brass (#A37A3B) — eyebrow caps + hero verb only
 *   - I: hover-border replaces hover-lift on cards
 *   - K: typographic wordmark (drop the shield), no period, no separator
 *
 * Reversibility: removing the <link rel="stylesheet" href="/polish.css">
 * from page heads cleanly reverts the whole bundle. No HTML rewrites
 * outside the SPA hero are required for the visual layer to work.
 */

:root {
  --polish-ink: #17252A;
  --polish-ink-soft: #2A2925;
  --polish-paper: #FBFAF6;
  --polish-paper-warm: #F1EDE2;
  --polish-paper-edge: #DDD8C8;
  /* Brass accent retired 2026-04-26 per user feedback ("get rid of the
     gold on the hero, replace with something matching"). The variable
     name stays but the value now points to teal-deep so all downstream
     selectors (hero accent, eyebrow caps, footer rules, OG images)
     unify on the existing brand teal. Cleanup task: rename --polish-brass
     to --polish-accent in a follow-up. */
  --polish-brass: #1F5C5A;
  --polish-muted: #5A5648;
  --polish-teal: #2B7A78;
  --polish-teal-deep: #1F5C5A;
}

/* ============================================================
   1 — TYPOGRAPHIC FOUNDATIONS
   ============================================================ */

html {
  /* warmth comes through on first paint before any swap */
  background: var(--polish-paper);
}

body {
  background: var(--polish-paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Universal type-setting niceties (Chromium/Safari support text-wrap) */
h1, h2, h3, h4, h5 { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* Source Serif 4 utility — applied selectively below */
.polish-serif,
.article-hero h1,
.article-hero-content h1 {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.12;
}

/* All H1 / H2 / H3 headings site-wide use the hero's serif family.
   Per-page font-weight is preserved (so existing font-bold / font-black
   markup keeps its emphasis hierarchy) — only the family + tracking
   change. Body, lede, UI and buttons stay Inter for scan-speed. */
h1, h2, h3 {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif !important;
  letter-spacing: -0.012em !important;
}

/* ============================================================
   2 — WORDMARK (drop the shield, typographic Wiser Workplace)
   ============================================================ */

.shield-icon,
header .logo-section svg {
  display: none !important;
}

/* Catch-all: hide any shield-shaped SVG (d="M12 1L3 5V11...") and the
   styled-box DIV that wraps it. Two selectors so we cover both patterns:

     A) <a class="logo"><svg>shield</svg><span>Wiser Workplace</span></a>
        — hide the SVG; the link + wordmark span stay visible.

     B) <a class="logo"><div class="w-8 h-8 bg-ink"><svg>shield</svg></div>
                       <span>Wiser Workplace</span></a>
        — hide the SVG AND the styled-box DIV; the link + wordmark stay.

   Critical: we must NOT hide <a> elements — the wordmark span lives
   alongside the shield inside the same link. Hiding the link kills the
   wordmark too (caused the about.html "missing wordmark" bug 2026-04-26).

   Uses CSS :has(), supported in Chrome 105+ / Safari 15.4+ / Firefox 121+
   — well above our launch baseline. */
/* Three shield-SVG path variants in the codebase — match all three.
   Variant A: M12 1L3 5V11C3 18.732 ... (most pages)
   Variant B: M12 1L3 5V11C3 17.6   ... (slight differ)
   Variant C: M12 22s8-4 8-10V5l-8-3 ... (contact, intake widgets) */
svg:has(> path:is(
  [d^="M12 1L3 5V11C3 18.732"],
  [d^="M12 1L3 5V11C3 17.6"],
  [d^="M12 22s8-4 8-10V5l-8-3"]
)) {
  display: none !important;
}

/* Hide DIV/SPAN wrappers that contain only the shield SVG (the styled
   "box" pattern: w-8 h-8 rounded-lg bg-ink, or inline-styled square).
   Wordmark span next to it stays visible (it's a sibling, not a child). */
:is(div, span):has(> svg > path:is(
  [d^="M12 1L3 5V11C3 18.732"],
  [d^="M12 1L3 5V11C3 17.6"],
  [d^="M12 22s8-4 8-10V5l-8-3"]
)) {
  display: none !important;
}

/* Wordmark span that follows a hidden shield (or its wrapper): set
   Source Serif 4 so the wordmark renders in the brand serif even when
   the page's per-page <style> block sets it to bold sans (Inter /
   system). General sibling combinator (~) matches a span that comes
   after the shield SVG or its styled-box wrapper as siblings under
   the same parent. */
svg:has(> path:is(
  [d^="M12 1L3 5V11C3 18.732"],
  [d^="M12 1L3 5V11C3 17.6"],
  [d^="M12 22s8-4 8-10V5l-8-3"]
)) ~ span,
:is(div, span):has(> svg > path:is(
  [d^="M12 1L3 5V11C3 18.732"],
  [d^="M12 1L3 5V11C3 17.6"],
  [d^="M12 22s8-4 8-10V5l-8-3"]
)) ~ span,
header a > span:only-child,
.header-logo span,
.logo-section span {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
}

.logo-text {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  /* color: intentionally NOT set — let it inherit from .logo-section
     parent (white on blog/guide dark headers; ink on marketing-page
     light headers). Setting it to ink broke dark-header pages on
     2026-04-26. */
  line-height: 1.1 !important;
}

/* When wordmark sits in a flex row with the (now-hidden) shield, drop the gap */
.logo-section,
.header-container .logo-section,
header .logo-section {
  gap: 0 !important;
}

/* Dark-background variant (footer, dark-band sub-page wordmarks) */
.logo-text.logo-text-light,
footer .logo-text {
  color: #FFFFFF !important;
}

/* ============================================================
   3 — PAPER BACKGROUND OVERRIDES
   Replace pure-white surfaces with warm off-white. We avoid touching
   in-page <style> for portals/admin — those aren't loading polish.css.
   ============================================================ */

/* Top-level page surface */
body { background: var(--polish-paper); }

/* Tailwind-emitted bg-white SECTIONS on marketing pages.
   Scoped to section/main/header/footer so cards, modals, dropdowns,
   and form inputs (which also use bg-white) keep their pure white
   for contrast on the warm paper surface. */
section.bg-white,
main.bg-white,
header.bg-white,
footer.bg-white,
section.bg-gray-50,
section.bg-gray-50\/50,
section.bg-gray-100 {
  background-color: var(--polish-paper) !important;
}

/* Sticky nav (transparent backdrop blur over paper) */
nav.bg-white\/95 {
  background-color: rgba(251, 250, 246, 0.92) !important;
}

/* Mint callout boxes → warm beige */
.bg-teal-50,
.bg-\[\#DEF2F1\],
[style*="#DEF2F1"]:not(.no-polish) {
  background-color: var(--polish-paper-warm) !important;
}

/* The mint pill in the hero (Launching May 1) */
.hero-pill,
.bg-teal-50.border-teal-200 {
  background-color: var(--polish-paper-warm) !important;
  border-color: var(--polish-paper-edge) !important;
  color: var(--polish-muted) !important;
}

/* ============================================================
   4 — BRASS ACCENT (restrained: eyebrow caps + hero verb)
   ============================================================ */

/* Eyebrow caps: small, uppercase, letter-spaced — applied via class */
.polish-eyebrow {
  color: var(--polish-brass) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

/* Hero "heard" word — roman brass, no italic, no gradient */
.gradient-text,
.hero-accent {
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--polish-brass) !important;
  background-clip: initial !important;
  color: var(--polish-brass) !important;
  font-style: normal !important;
}

/* Disclaimer / important callout left rule (was teal, now brass for editorial signal) */
.callout-important,
.disclaimer-block {
  border-left-color: var(--polish-brass) !important;
}

/* ============================================================
   5 — HERO HEADLINE (SPA — Source Serif 4, weight 400-500)
   Target the SPA hero h1 specifically; structural JSX edit also lands.
   ============================================================ */

section .max-w-4xl > h1.text-4xl,
section .max-w-4xl h1.text-4xl.font-black,
.hero-h1 {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.06 !important;
}

/* ============================================================
   6 — GUIDE / BLOG H1 — Source Serif 4 (signature surface)
   Article H2/H3/body/lede stay Inter for scan-speed.
   ============================================================ */

.article-hero h1,
.article-hero-content h1 {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.14 !important;
}

/* Article lede — Inter, generous line-height, slightly muted */
.article-hero p,
.article-content > p:first-of-type {
  line-height: 1.65;
}

/* Article body section dividers — hairline rule above each H2 */
.article-content h2 {
  border-top: 1px solid var(--polish-paper-edge);
  padding-top: 28px;
  margin-top: 48px;
}

/* ============================================================
   7 — HOVER-BORDER REPLACES HOVER-LIFT (cards only)
   Targets common Tailwind hover patterns used on bordered cards.
   ============================================================ */

/* Generic card hover: stay put, darken border */
.polish-card,
.polish-card:hover {
  transition: border-color 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
.polish-card:hover {
  border-color: var(--polish-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Override hover-lift on bordered card patterns commonly used in marketing */
.bg-white.border.rounded-2xl:hover,
.bg-white.border.rounded-xl:hover,
.bg-white.border-gray-100:hover,
.bg-gray-50.border:hover {
  transform: none !important;
  box-shadow: 0 0 0 1px var(--polish-ink) inset !important;
  border-color: var(--polish-ink) !important;
}

/* ============================================================
   8 — STATS BAR (homepage) — keep ink numbers, brass eyebrow caps
   ============================================================ */

/* Stats label color → brass cap */
.stats-label,
section.border-y .text-xs.font-semibold.uppercase {
  color: var(--polish-brass) !important;
  letter-spacing: 0.08em !important;
}

/* Stats number stays ink, but adopt slightly-tighter tracking */
section.border-y .text-3xl.font-black,
section.border-y .text-4xl.font-black {
  letter-spacing: -0.02em !important;
}

/* ============================================================
   9 — FOUNDING-PARTNER STRIP (the dark band) — restrain
   ============================================================ */

/* The mint pill on the dark band → warm paper for consistency */
section[style*="linear-gradient(135deg,#17252A"] span[style*="#DEF2F1"] {
  background-color: var(--polish-paper-warm) !important;
}

/* ============================================================
   11 — INLINE-STYLE COOL-GRAY OVERRIDES
   Catches per-page inline style="..." attributes that polish.css
   selectors otherwise can't override. !important defeats the inline
   value because the inline rule isn't itself !important.
   ============================================================ */

/* Cards / sections with cool-gray borders -> paper edge */
[style*="border:1px solid #e5e7eb"],
[style*="border: 1px solid #e5e7eb"],
[style*="border:2px solid #e5e7eb"],
[style*="border: 2px solid #e5e7eb"],
[style*="border-color:#e5e7eb"],
[style*="border-bottom:1px solid #f3f4f6"],
[style*="border-top:1px solid #f3f4f6"] {
  border-color: var(--polish-paper-edge) !important;
}

/* Page-level cool-gray section backgrounds -> warm paper */
section[style*="background:#f9fafb"],
section[style*="background: #f9fafb"],
section[style*="background-color:#f9fafb"] {
  background-color: var(--polish-paper) !important;
}

/* Light gray emphasis backgrounds -> warm beige */
[style*="background:#f3f4f6"],
[style*="background-color:#f3f4f6"] {
  background-color: var(--polish-paper-warm) !important;
}

/* Mid-weight ink text -> soft ink (warmer) */
[style*="color:#4b5563"],
[style*="color: #4b5563"] {
  color: var(--polish-ink-soft) !important;
}

/* Cool-gray muted text on LIGHT backgrounds -> warm muted.
   Scoped to NOT touch footer/dark contexts where the cool gray is
   intentional for readability against navy. The :where() chain keeps
   the selector specificity at 0,2,0 so it doesn't fight other rules. */
section [style*="color:#6b7280"],
section [style*="color: #6b7280"],
article [style*="color:#6b7280"],
main [style*="color:#6b7280"],
.article-hero [style*="color:#6b7280"],
.article-content [style*="color:#6b7280"] {
  color: var(--polish-muted) !important;
}

/* ============================================================
   12 — INLINE font-family OVERRIDES on HEADINGS
   Same pattern as #11: inline `style="font-family:Inter..."` on
   H1/H2/H3 beats class-based polish.css h1/h2/h3 rules because
   inline specificity is 1000. Override with attribute-selector +
   !important to keep authored markup cohesive with the brand serif.
   ============================================================ */

h1[style*="font-family:Inter"],
h2[style*="font-family:Inter"],
h3[style*="font-family:Inter"],
h1[style*="font-family: Inter"],
h2[style*="font-family: Inter"],
h3[style*="font-family: Inter"] {
  font-family: 'Source Serif 4', 'Iowan Old Style', Georgia, serif !important;
  letter-spacing: -0.012em !important;
}

/* ============================================================
   10 — LINK / CTA — keep teal as primary action color
   No override needed; teal.bg-brand-accent stays.
   ============================================================ */

/* But: outline buttons get a slightly warmer border */
button.border-2.border-gray-200,
a.border-2.border-gray-200 {
  border-color: var(--polish-paper-edge) !important;
}
button.border-2.border-gray-200:hover,
a.border-2.border-gray-200:hover {
  border-color: var(--polish-ink) !important;
}