/* ============================================================
   OK CHROME - the shared header, footer and brand lockup, sitewide.
   Lifted from the approved homepage (Oleg's Claude Design file) on
   2026-09-02 so every page carries the same design. The .ok-header /
   .ok-nav / .ok-hamburger class names are kept for ok-animations.js.
   ============================================================ */

.okh-inner, .ok-container { width: 100%; max-width: var(--ok-maxw); margin-inline: auto; padding-inline: var(--ok-gutter); }

/* ---------- header ---------- */
.okh-header { border-bottom: 1px solid var(--ok-border); background: var(--ok-bg); }
.okh-header-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; }
/* Brand lockup, header scale. Faithful to Oleg's Higgsfield master
   (assets/brand/source/ok-logo-higgsfield-2026-08-24.png): serif OK, a ribbon
   band through the exact vertical center carrying the name in spaced caps,
   band running slightly wider than the letters, letters fading toward the
   baseline. At header size the band must run wider than the monogram or the
   name is unreadable, which matches how the ribbon reads in the master. */
.okh-logo { position: relative; display: inline-flex; flex: 0 0 116px; width: 116px; min-height: 48px; align-items: center; justify-content: center; text-decoration: none; padding: 0; margin: 0; }
.okh-logo-ok { font-family: var(--ok-serif); font-weight: 500; letter-spacing: -0.056em; line-height: 1; font-size: 48px; color: var(--ok-logo-ink); background: linear-gradient(to bottom, var(--ok-logo-ink) 52%, var(--ok-text-muted) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.okh-logo-band { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 108%; width: max-content; padding: 1px 0.7em 1px 1.2em; background: var(--ok-logo-band-bg); color: var(--ok-logo-band-ink); text-align: center; font-family: var(--ok-sans); font-weight: 400; font-size: 6.5px; letter-spacing: 0.5em; white-space: nowrap; line-height: 1.9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
html[data-theme="dark"] .okh-logo-band { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); }
.okh-nav { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--ok-sans); font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.okh-nav a { color: var(--ok-text-muted); text-decoration: none; transition: color 0.18s ease; }
.okh-nav a:hover, .okh-nav a.is-current { color: var(--ok-text); }
.okh-toggle { width: 34px; height: 34px; padding: 0; border: 1px solid var(--ok-border); border-radius: 50%; background: transparent; color: var(--ok-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.18s ease, border-color 0.18s ease; }
.okh-toggle:hover { border-color: var(--ok-text-muted); color: var(--ok-text); }
.okh-toggle .ok-icon-sun { display: var(--ok-sun-display, block); }
.okh-toggle .ok-icon-moon { display: var(--ok-moon-display, none); }


/* ---------- footer ---------- */
.okh-footer { border-top: 1px solid var(--ok-border); margin-top: 120px; }
.okh-footer-grid { padding-top: 64px; padding-bottom: 28px; display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.okh-footer-brand { min-width: 220px; }
.okh-lockup { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.okh-lockup-ok { font-family: var(--ok-serif); font-weight: 500; letter-spacing: -0.056em; line-height: 1; color: var(--ok-logo-ink); font-size: 120px; }
.okh-lockup-band { position: absolute; left: -4%; width: 108%; top: 50%; transform: translateY(-50%); background: var(--ok-logo-band-bg); color: var(--ok-logo-band-ink); text-align: center; font-family: var(--ok-sans); font-weight: 300; letter-spacing: 0.65em; white-space: nowrap; font-size: 8.7px; padding: 2px 0 2px 0.65em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.okh-footer-tag { display: block; margin-top: 14px; color: var(--ok-text-muted); font-size: 15px; }
.okh-footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 130px; font-family: var(--ok-sans); font-size: 14px; }
.okh-footer-col b { color: var(--ok-text); font-size: 13px; margin-bottom: 4px; }
.okh-footer-col a { color: var(--ok-text-muted); text-decoration: none; transition: color 0.18s ease; }
.okh-footer-col a:hover { color: var(--ok-text); }
.okh-footer-addr { color: var(--ok-text-muted); font-size: 12.5px; margin-top: 6px; line-height: 1.6; }
.okh-footer-bottom { padding-bottom: 40px; color: var(--ok-text-muted); font-family: var(--ok-sans); font-size: 12px; }


/* ---------- .ok-header restyled to the approved look ----------
   Sticky and in-flow (the old header was fixed/transparent, which is why the
   inner-page heroes carry inline padding-top:120px; neutralized below). */
.ok-header { position: sticky; top: 0; z-index: 1000; padding: 0; background: var(--ok-bg); border-bottom: 1px solid var(--ok-border); transition: background-color .18s ease, border-color .18s ease; }
.ok-header.scrolled { background: var(--ok-header-bg); backdrop-filter: var(--ok-header-blur); -webkit-backdrop-filter: var(--ok-header-blur); box-shadow: none; padding: 0; }
.ok-header-inner { width: 100%; max-width: var(--ok-maxw); margin-inline: auto; padding: 20px var(--ok-gutter); display: flex; align-items: center; justify-content: flex-start; gap: 24px; }
@media (max-width: 640px) { .ok-header-inner { padding-block: 14px; gap: 16px; } }
.ok-header .ok-logo { font-size: inherit; font-weight: inherit; letter-spacing: normal; }
.ok-header .ok-nav { margin-left: auto; gap: 24px; }
.ok-header .ok-nav a { font-family: var(--ok-sans); font-weight: 600; font-size: 11px !important; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ok-text-muted); text-decoration: none; transition: color .18s ease; }
.ok-header .ok-nav a:hover, .ok-header .ok-nav a.is-current { color: var(--ok-text); }
.ok-header-actions { display: flex; align-items: center; gap: 14px; }
.ok-header .ok-theme-toggle { width: 44px; height: 44px; flex: 0 0 44px; }
.ok-header .ok-theme-toggle svg { width: 16px; height: 16px; }
.ok-hamburger span { background: var(--ok-text); }
@media (max-width: 968px) {
  .ok-header .ok-nav { display: none; }
  .ok-header .ok-nav.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--ok-bg); border-bottom: 1px solid var(--ok-border); padding: 20px; gap: 16px; }
  .ok-header .ok-nav.open a { font-size: 13px !important; }
  .ok-hamburger { display: flex; }
  /* nav is hidden here, so the actions must push themselves to the right edge (audit 2026-09-02) */
  .ok-header .ok-header-actions { margin-left: auto; }
}
/* inner-page heroes were padded to clear the old fixed header */
.ok-hero[style*="padding-top"] { padding-top: 56px !important; }
/* the old Blue Hour navy hero tint is retired; heroes read as the page surface */
html[data-theme="light"] .ok-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.035) 100%) !important; }
html[data-theme="dark"] .ok-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.12) 0%, rgba(0,0,0,0.45) 100%) !important; }
.ok-hero.has-bg .ok-hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 100%) !important; }

/* ---------- small-screen polish (2026-09-02) ----------
   On phones the ribbon band is centered on the OK and ran flush to the
   viewport edge; anchor it to the monogram's left edge instead. Generic
   pages (cart, account, download) padded 140px for the old fixed header. */
@media (max-width: 640px) {
  .ok-header .okh-logo { margin-left: 0; padding: 0; }
  .ok-header .okh-logo-band { left: 50%; transform: translate(-50%, -50%); min-width: 100%; }
}
.ok-page-generic[style*="padding-top"] { padding-top: 64px !important; }

/* ---------- accent buttons: ink follows the accent token (2026-09-02) ----------
   theme-override.css still forces white text on .ok-btn (a Tungsten-era contrast
   fix). White on the sage dark-theme button is 1.9:1, so the ink token wins here
   (this sheet loads after theme-override). Outline/secondary buttons keep page ink. */
.ok-btn, .ok-price-btn, .ok-gw-item .ok-gw-price-btn, .ok-hero .ok-btn,
.ok-affiliate-btns .ok-video-btn { color: var(--ok-accent-ink) !important; }
.ok-btn-outline, .ok-btn-secondary, .ok-hero .ok-btn-outline { color: var(--ok-text) !important; }
.ok-btn-outline:hover, .ok-btn-secondary:hover { color: var(--ok-text) !important; }
/* theme-scoped hero button rules in theme-override outrank the plain selector above */
html[data-theme] .ok-hero .ok-btn:not(.ok-btn-outline):not(.ok-btn-secondary),
html[data-theme] .ok-btn:not(.ok-btn-outline):not(.ok-btn-secondary),
html[data-theme] .ok-price-btn, html[data-theme] .ok-gw-item .ok-gw-price-btn { color: var(--ok-accent-ink) !important; }
html[data-theme] .ok-hero .ok-btn-outline, html[data-theme] .ok-btn-outline, html[data-theme] .ok-btn-secondary { color: var(--ok-text) !important; }

/* ---------- hero text follows the theme (2026-09-02) ----------
   theme-override.css forces #FFFFFF on hero h1/p in BOTH themes, a leftover
   from when every hero sat on a dark overlay. On the sage light theme the hero
   surface is cream, so white words vanished ("The Shop Opens Soon"). Selectors
   mirror the override's own so the later sheet wins on equal specificity.
   Heroes with a real photo behind them (.has-bg) keep white text over the
   dark image gradient. */
html[data-theme] .ok-hero h1,
html[data-theme] .ok-hero-content h1 { color: var(--ok-text) !important; }
html[data-theme] .ok-hero p,
html[data-theme] .ok-hero .ok-subtitle,
html[data-theme] .ok-hero-content p,
html[data-theme] .ok-hero-content .ok-subtitle,
html[data-theme] .ok-hero-content > p:first-of-type { color: var(--ok-text-muted) !important; opacity: 1; }
html[data-theme] .ok-hero h1 span:not(.ok-counter) { color: var(--ok-accent) !important; }
html[data-theme="light"] .ok-hero h1 span:not(.ok-counter) { color: var(--ok-link) !important; }
html[data-theme] .ok-hero.has-bg h1,
html[data-theme] .ok-hero.has-bg h1 span:not(.ok-counter),
html[data-theme] .ok-hero.has-bg p,
html[data-theme] .ok-hero.has-bg .ok-subtitle,
html[data-theme] .ok-hero.has-bg .ok-hero-content > p:first-of-type { color: #FFFFFF !important; }

/* ---------- headings forced white outside heroes (audit 2026-09-02) ---------- */

/* gear cards: the video button is an OUTLINE button, the badge sits on a dark chip */
html[data-theme] .ok-gear-card .ok-video-btn { background: transparent !important; color: var(--ok-text) !important; border-color: var(--ok-border) !important; }
html[data-theme] .ok-gear-card .ok-video-btn:hover, html[data-theme] .ok-gear-card .ok-video-btn:focus-visible { border-color: var(--ok-text-muted) !important; color: var(--ok-text) !important; }
html[data-theme] .ok-gear-card .ok-vid-badge { color: #FFFFFF !important; background: rgba(13,13,13,0.82) !important; }
/* WooCommerce buttons inherit the accent ink */
html[data-theme] a.button, html[data-theme] button.button, html[data-theme] .add_to_cart_button, html[data-theme] .wc-block-components-button,
html[data-theme] .single_add_to_cart_button { color: var(--ok-accent-ink) !important; background: var(--ok-accent) !important; border-color: var(--ok-accent) !important; }

/* ---------- page-scoped hero overrides (audit 2026-09-02) ----------
   Page stylesheets such as ok-lens-advisor.css load after this sheet and scope
   white hero text under body.page-template-*. A body-prefixed selector here
   outranks them on specificity regardless of load order. */
html[data-theme] body .ok-hero h1, html[data-theme] body .ok-hero-content h1 { color: var(--ok-text) !important; }
html[data-theme] body .ok-hero p, html[data-theme] body .ok-hero-content p, html[data-theme] body .ok-hero .ok-subtitle { color: var(--ok-text-muted) !important; }
html[data-theme] body .ok-hero h1 span:not(.ok-counter) { color: var(--ok-accent) !important; }
html[data-theme="light"] body .ok-hero h1 span:not(.ok-counter) { color: var(--ok-link) !important; }
html[data-theme] body .ok-hero.has-bg h1, html[data-theme] body .ok-hero.has-bg h1 span:not(.ok-counter),
html[data-theme] body .ok-hero.has-bg p, html[data-theme] body .ok-hero.has-bg .ok-subtitle { color: #FFFFFF !important; }
/* gear video badge: outrank the legacy theme-wide span color rule */
html[data-theme] .ok-gear-card .ok-gear-thumb span.ok-vid-badge { color: #FFFFFF !important; }

/* ---------- audit fixes (2026-09-03) ---------- */

/* Contact: the two columns stack instead of overflowing on phones (WCAG 1.4.10 reflow) */
.ok-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 60px; }
.ok-contact-grid > * { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .ok-contact-grid { gap: 40px; } }

/* Outline / secondary buttons: hover and focus fill with the accent and switch to accent ink.
   Before: page ink on the accent-hover fill measured 1.49:1 (light) and 1.00:1 on /resources/. */
html[data-theme] .ok-btn.ok-btn-outline:hover, html[data-theme] .ok-btn.ok-btn-secondary:hover,
html[data-theme] .ok-btn.ok-btn-outline:focus-visible, html[data-theme] .ok-btn.ok-btn-secondary:focus-visible,
html[data-theme] .ok-hero .ok-btn.ok-btn-outline:hover, html[data-theme] .ok-hero .ok-btn.ok-btn-outline:focus-visible {
  background: var(--ok-accent-hover) !important; border-color: var(--ok-accent-hover) !important; color: var(--ok-accent-ink) !important;
}

/* Visible keyboard focus on every shared control (WCAG 2.4.7). The ring uses page ink at an offset,
   so it stays visible on the accent buttons whose text color equals the page background. */
.ok-header a:focus-visible, .ok-header .ok-nav a:focus-visible, .okh-footer a:focus-visible,
button.okh-toggle:focus-visible, button.ok-hamburger:focus-visible, .ok-theme-toggle:focus-visible,
.ok-btn:focus-visible, .okh-btn:focus-visible, .okh-card:focus-visible, .okh-index a:focus-visible,
.okh-capture-form button:focus-visible, .okh-capture-form input:focus-visible, .ok-blog-card a:focus-visible,
#ast-scroll-top:focus-visible {
  outline: 2px solid var(--ok-text) !important; outline-offset: 3px !important;
}
/* Astra paints button:focus bright blue; the theme has no blue */
button.okh-toggle:focus, button.ok-hamburger:focus, .ok-theme-toggle:focus, button.okh-toggle:focus-visible, button.ok-hamburger:focus-visible {
  background: transparent !important; color: var(--ok-text) !important; border-color: var(--ok-text-muted) !important;
}

/* Skip link: hidden until it receives keyboard focus */
.ok-skip-link { position: absolute; left: -999px; top: 0; z-index: 2000; padding: 10px 16px; background: var(--ok-accent); color: var(--ok-accent-ink); font-family: var(--ok-sans); font-weight: 700; font-size: 14px; text-decoration: none; border-radius: 6px; }
.ok-skip-link:focus { left: 16px; top: 16px; outline: 2px solid var(--ok-text); outline-offset: 3px; }

/* Astra scroll-to-top: disabled in functions.php; if it ever renders, it follows the accent, never Astra blue */
#ast-scroll-top { background-color: var(--ok-accent) !important; color: var(--ok-accent-ink) !important; }
#ast-scroll-top svg, #ast-scroll-top .ast-icon svg { fill: currentColor !important; }

/* Shared layout contract. Fix the content's constraints rather than clipping
   document overflow. Narrow reading columns keep their intentional max-width. */
html { scroll-padding-top: 112px; }
body { overflow-x: visible; }
main { min-width: 0; }
/* Retired blue and red gradients must not tint the locked brand surfaces. */
html[data-theme] .ok-section,
html[data-theme] .ok-section-dark,
html[data-theme] .ok-section-alt,
html[data-theme] .ok-proof-strip { background-image: none; }
.ok-container > *, .okh-inner > *, .ok-header-inner > * { min-width: 0; }
.okh-logo-band { max-width: 116px; min-width: 100%; box-sizing: border-box; }
.ok-header-actions { flex-shrink: 0; }
.ok-header .ok-hamburger { width: 44px; min-height: 44px; padding: 10px; align-items: center; justify-content: center; }
.ok-header .ok-nav.open { max-height: calc(100dvh - 88px); overflow-y: auto; margin: 0; }
.ok-header .ok-nav.open a { display: block; padding: 10px 0; }
.okh-footer { margin-top: clamp(48px, 7vw, 88px); }
.okh-footer-grid { gap: 36px; }
.okh-footer-brand { min-width: 0; flex: 1 1 220px; }
.okh-footer-col { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.okh-footer-bottom { overflow-wrap: anywhere; }
.ok-section-subtitle, .ok-hero-content > p { margin-inline: auto; }
.ok-hero-content { width: 100%; max-width: var(--ok-maxw); padding-inline: var(--ok-gutter); }
.ok-btn, .okh-btn { max-width: 100%; white-space: normal; text-align: center; overflow-wrap: break-word; }
.ok-blog-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.ok-blog-meta, .ok-blog-date { color: var(--ok-text-muted); opacity: 1; }
.ok-article-hero { padding-top: clamp(48px, 6vw, 80px); }
/* Author styles must never override the native hidden state. This covers
   successful signup forms, embed loading controls and tool recovery states. */
[hidden]:not([hidden="until-found"]) { display: none !important; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--ok-text); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
@media (max-width: 640px) {
  .okh-footer-grid { padding-top: 40px; gap: 28px; }
  .okh-footer-brand { flex-basis: 100%; }
  .okh-footer-col { flex: 1 1 120px; }
  .ok-hero[style*="padding-top"] { padding-top: 40px !important; min-height: 0 !important; padding-bottom: 40px; }
  .ok-contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Theme surfaces and their text must settle together for reduced motion. */
  *, *::before, *::after { transition-duration: 0s !important; }
  .ok-reveal { opacity: 1; transform: none; transition: none; }
}