/* ============================================================
   Octoflow Brand — Site Overrides
   ============================================================
   Targets specific Elementor widget inline styles that came
   from Claude Design output (system-font stacks + close-but-
   off hex colours). Pure CSS layer; does not mutate widget
   data. Disable mu-plugin to revert.
   ============================================================ */

/* ── Force JetBrains Mono on widgets using system mono stacks ────── */
.elementor-widget-html *[style*="ui-monospace"],
.elementor-widget-html *[style*="SF Mono"],
.elementor-widget-html *[style*="Menlo"],
.elementor-widget-html *[style*="Consolas"],
.elementor-widget-html code,
.elementor-widget-html pre,
.elementor-widget-html kbd,
.elementor-widget-text-editor code,
.elementor-widget-text-editor pre {
    font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important;
}

/* ── Map close-but-off hex deviations to canonical brand neutrals ── */
/* #5A6063 -> --neutral-3 (#5C6770)  · existing widgets only        */
.elementor-element[style*="#5A6063"],
.elementor-element [style*="color:#5A6063"],
.elementor-element [style*="color: #5A6063"] {
    color: var(--neutral-3, #5C6770) !important;
}

/* #2D3133 -> --neutral-2 (#2D3438) · existing widgets only         */
.elementor-element[style*="#2D3133"],
.elementor-element [style*="color:#2D3133"],
.elementor-element [style*="color: #2D3133"] {
    color: var(--neutral-2, #2D3438) !important;
}

/* ── Force Elementor body inheritance so widgets without explicit
   font-family also pick up Outfit via cascade                    */
.elementor-page,
.elementor-page .elementor-widget-heading h1,
.elementor-page .elementor-widget-heading h2,
.elementor-page .elementor-widget-heading h3,
.elementor-page .elementor-widget-heading h4,
.elementor-page .elementor-widget-text-editor,
.elementor-page .elementor-widget-button .elementor-button {
    font-family: 'Outfit', system-ui, sans-serif;
}

/* ── Inherit colour from CSS variable system where widgets do not
   set their own; preserves widget choice when set explicitly     */
.elementor-page {
    color: var(--fg-1);
}

/* ============================================================
   Astra chrome brand layer (header / nav / footer / native pages)
   Added 2026-05-29 — Astra DOM sits OUTSIDE Elementor, so the
   .elementor-* rules above never reach it. Brand it explicitly.
   ============================================================ */

/* ── Brand surface on every page, incl. non-Elementor (ToS) ── */
html, body { background-color: var(--paper) !important; }
.site, #page, #content.site-content, #content .ast-container { background: transparent; }
.ast-separate-container { background-color: transparent !important; }

/* ── Header: dark brand bar (flip --ink → --paper for a light bar) ── */
.site-header,
#masthead,
.main-header-bar,
.ast-primary-header-bar.main-header-bar,
.ast-mobile-header-wrap,
.ast-mobile-header-content {
    background-color: var(--ink) !important;
    border-bottom: 1px solid rgba(244, 242, 236, 0.10);
}
.site-title a,
.site-title a:focus,
.site-title a:hover { color: var(--paper) !important; }
.main-header-menu .menu-link,
.ast-builder-menu .menu-item > .menu-link,
.ast-header-navigation-wrap .menu-link,
.main-header-menu a { color: var(--paper) !important; }
.main-header-menu .menu-item:hover > .menu-link,
.ast-builder-menu .menu-item:hover > .menu-link,
.current-menu-item > .menu-link { color: var(--teal) !important; }

/* ── Hide redundant Astra page-title banner on Elementor pages
   (Home / M1 / Privacy carry their own H1). Native pages keep it. ── */
.elementor-page .entry-header,
.elementor-page .ast-single-entry-banner,
.elementor-page .ast-archive-description { display: none !important; }

/* ── Native (non-Elementor) page content: centered brand container ── */
body:not(.elementor-page) #content .ast-container {
    max-width: 980px;
    margin-inline: auto;
}
body:not(.elementor-page) .ast-article-single,
body:not(.elementor-page) .entry-content {
    padding: clamp(28px, 4vw, 56px);
}
body:not(.elementor-page) .entry-content { color: var(--fg-1); }
body:not(.elementor-page) .entry-content a { color: var(--teal-deep); text-decoration: underline; }
body:not(.elementor-page) .entry-title {
    color: var(--fg-1);
    font-family: var(--font-display);
    font-size: clamp(36px, 4.6vw, 52px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: var(--display-weight);
}
body:not(.elementor-page) .entry-content h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    line-height: 1.2;
    letter-spacing: -0.01em;
    font-weight: var(--display-weight);
    margin-top: var(--space-8);
    margin-bottom: var(--space-4);
}
body:not(.elementor-page) .entry-content h3 {
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.3;
    font-weight: 500;
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}
body:not(.elementor-page) .entry-content p,
body:not(.elementor-page) .entry-content li {
    font-size: 18px;
    line-height: 1.85;
    color: var(--neutral-2);
}

/* ── Footer: dark brand bar to match header ── */
.site-footer,
.site-footer .site-below-footer-wrap,
.site-footer .site-primary-footer-wrap,
.site-footer .ast-builder-grid-row-container,
.site-footer .ast-builder-grid-row-container-inner,
.ast-small-footer,
[data-section="section-footer-builder"] { background-color: var(--ink) !important; }
.ast-footer-copyright,
.ast-footer-copyright a { color: var(--paper) !important; }
.ast-footer-copyright a:hover { color: var(--teal) !important; }

/* Footer: inline 2-column layout (copyright left · links right), dark */
.ast-footer-copyright { padding-block: 28px; }
.ast-footer-copyright .oc-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 32px;
    flex-wrap: wrap;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.oc-foot-l {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--neutral-4) !important;
}
.oc-foot-r { display: flex; gap: 8px 18px; flex-wrap: wrap; }
@media (max-width: 600px) {
    .ast-footer-copyright .oc-foot { justify-content: center; text-align: center; }
    .oc-foot-r { justify-content: center; }
}

/* ── Mobile menu: dark panel + light links (Astra default panel was light → light brand links invisible) ── */
@media (max-width: 921px) {
    .ast-builder-menu-mobile .main-header-menu,
    .ast-builder-menu-mobile .main-navigation,
    .ast-builder-menu-mobile .sub-menu,
    .main-header-menu.stack-on-mobile,
    .main-header-menu.stack-on-mobile .sub-menu {
        background-color: var(--ink) !important;
    }
    .ast-builder-menu-mobile .menu-link,
    .ast-builder-menu-mobile .menu-item > .menu-link,
    .main-header-menu.stack-on-mobile .menu-link,
    .ast-builder-menu-mobile .ast-header-navigation-arrow,
    .main-header-menu.stack-on-mobile .ast-header-navigation-arrow { color: var(--paper) !important; }
    .ast-builder-menu-mobile .menu-item:hover > .menu-link,
    .ast-builder-menu-mobile .current-menu-item > .menu-link,
    .main-header-menu.stack-on-mobile .current-menu-item > .menu-link { color: var(--teal) !important; }
    .ast-builder-menu-mobile .main-header-menu .menu-item,
    .main-header-menu.stack-on-mobile .menu-item { border-top: 1px solid rgba(244, 242, 236, 0.10) !important; }
    /* Hamburger toggle: light on the dark bar */
    .ast-menu-toggle,
    .main-header-menu-toggle,
    .ast-mobile-menu-trigger-minimal,
    .ast-mobile-menu-trigger-fill { color: var(--paper) !important; }
    .ast-menu-toggle svg,
    .main-header-menu-toggle svg,
    .ast-mobile-menu-trigger-minimal svg { fill: var(--paper) !important; }
}

/* ── Branded 404 (mu-plugin octoflow-404.php renders .oc404) ── */
.error404 .ast-single-entry-banner,
.error404 .entry-header,
.error404 .ast-archive-description { display: none !important; }
.oc404 { position: relative; text-align: center; padding: clamp(56px, 9vw, 132px) 0; }
.oc404__ghost {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(120px, 26vw, 320px);
    line-height: 0.9; letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--ink) 6%, var(--paper));
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -54%);
    z-index: 0; pointer-events: none; user-select: none;
}
.oc404 > :not(.oc404__ghost) { position: relative; z-index: 1; }
.oc404__eyebrow { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: 0.18em; font-size: 14px; color: var(--teal-deep); margin: 0 0 18px; }
.oc404__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 6.4vw, 76px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); margin: 0 0 18px; }
.oc404__lede { font-size: 19px; line-height: 1.65; color: color-mix(in srgb, var(--ink) 72%, var(--paper)); max-width: 30em; margin: 0 auto 36px; }
.oc404__links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.oc404__btn { display: inline-block; padding: 14px 26px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--ink); text-decoration: none; font-weight: 500; transition: color .15s, background-color .15s, border-color .15s; }
.oc404__btn:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
.oc404__btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.oc404__btn--primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: var(--paper); }
@media (max-width: 600px){ .oc404__links { flex-direction: column; } .oc404__btn { width: 100%; } }


/* Premium micro-touch: brand text selection (2026-06-09) */
::selection { background: var(--teal); color: var(--ink); }
::-moz-selection { background: var(--teal); color: var(--ink); }