/*
 * MODULE HIERARCHY (L7) — Plugin Overrides (Last-Loaded)
 * Purpose: Override late-loading third‑party/plugin CSS that cannot be controlled by the theme.
 * Scope: .cf-*, .wpcf7-*, .sharedaddy, embed iframes, chat widgets, cookie banners.
 * Dependencies: L0 variables.css, L1 base.css (tokens + resets only).
 */

/* ========================================
   §1 — CLOUDFLARE WIDGET OVERRIDES
   Only override UI that renders after theme styles.
   ======================================== */

.cf-footer-ip-reveal-btn {
    background: var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    border: 1px solid var(--color-primary-surface, var(--color-primary, #0066CC)) !important;
    color: #FFFFFF !important;
    border-radius: 999px !important;
    padding: 0.55rem 1rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.cf-footer-ip-reveal-btn:hover {
    background: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
    border-color: var(--color-primary-surface-hover, var(--color-primary-hover, #004D99)) !important;
}

.cf-turnstile,
[data-cf-turnstile] {
    border-radius: var(--radius-lg, 8px) !important;
}

/* ========================================
   §2 — WORDPRESS PLUGIN OVERRIDES
   Keep specificity local to plugin namespaces.
   ======================================== */

.sharedaddy .sd-social-icon .sd-content ul li a.sd-button {
    background: var(--color-surface, #FFFFFF) !important;
    border: 1px solid var(--color-border, #E5E7EB) !important;
}

.wpcf7-form input[type="submit"] {
    background: var(--color-primary, #0066CC) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--radius-lg, 8px) !important;
    padding: var(--space-3, 12px) var(--space-6, 24px) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.wpcf7-form input[type="submit"]:hover {
    background: var(--color-primary-hover, #004D99) !important;
}

.yoast-breadcrumb {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-text-muted, #6B7280);
}

.yoast-breadcrumb a {
    color: var(--color-primary, #0066CC);
    text-decoration: none;
}

/* ========================================
   §3 — EMBED WIDGETS
   Keep them visually consistent without fighting layout.
   ======================================== */

.twitter-tweet {
    margin: var(--space-6, 24px) auto;
}

.wp-block-embed__wrapper iframe {
    border-radius: var(--radius-lg, 8px);
}

/* ========================================
   §4 — CHAT WIDGET PLUGINS
   Ensure launchers sit above content but below modals.
   ======================================== */

[id*="crisp-"],
[id*="intercom-"],
[class*="tawk-"],
[class*="zendesk-"] {
    z-index: 9990 !important;
}

/* ========================================
   §5 — ACCESSIBILITY EMERGENCY OVERRIDES
   Use ONLY when plugin content fails contrast requirements.
   ======================================== */

.plugin-content-low-contrast,
[data-needs-contrast-fix] {
    color: var(--color-text, #1F2937) !important;
    background: var(--color-surface, #FFFFFF) !important;
}

[data-theme="dark"] .plugin-content-low-contrast,
[data-theme="dark"] [data-needs-contrast-fix] {
    color: var(--color-text-dark, #F9FAFB) !important;
    background: var(--color-surface-dark, #1F2937) !important;
}

/* ========================================
   END — Plugin Overrides Only
   ======================================== */

/* ========================================
   §6 — HEADER SEARCH SYSTEM (LAST-IN-CASCADE)
   Purpose: enforce a single, deterministic search behavior across breakpoints.
   Fixes: mid-width inline search showing when it should be toggle-only,
          duplicate magnifiers, and mobile indentation drift.
   ======================================== */

:root {
    --aiwp-search-overlay-gutter-mobile: var(--header-padding-x-mobile, var(--space-4, 16px));
    --aiwp-search-overlay-gutter-desktop: clamp(16px, 3vw, 24px);
}

/* Search toggle icon must stay visible on active (primary) background. */
.site-header .header-search-toggle svg,
.site-header button.header-search-toggle svg {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.site-header .header-search-toggle[aria-expanded='true'] svg,
.site-header button.header-search-toggle[aria-expanded='true'] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* MOBILE/TABLET (<960px): toggle-only, search opens as a padded overlay aligned to header */
@media (max-width: 959px) {
    .site-header .header-search-toggle,
    .site-header button.header-search-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .site-header .header-search:not(.is-open),
    .site-header form.header-search:not(.is-open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .site-header.search-open .header-search,
    .site-header .header-search.is-open {
        display: flex !important;
        position: fixed !important;
        top: calc(var(--header-height, 80px) + 8px) !important;
        left: var(--aiwp-search-overlay-gutter-mobile) !important;
        right: var(--aiwp-search-overlay-gutter-mobile) !important;
        width: auto !important;
        max-width: none !important;
        align-items: center !important;
        margin: 0 !important;
        padding: var(--aiwp-search-padding-y, 10px) var(--aiwp-search-padding-x, 12px) !important;
        border-radius: var(--aiwp-search-radius, 9999px) !important;
        box-sizing: border-box !important;
        background: var(--aiwp-search-bg, rgba(var(--color-white-rgb), 0.98)) !important;
        border: var(--aiwp-search-border, 1px solid rgba(var(--color-black-rgb), 0.12)) !important;
        box-shadow: var(--aiwp-search-shadow, 0 10px 28px rgba(0, 0, 0, 0.12)) !important;
        z-index: 10002 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .site-header.search-open .header-search__button,
    .site-header .header-search.is-open .header-search__button {
        display: flex !important;
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .site-header.search-open .header-search__input,
    .site-header .header-search.is-open .header-search__input {
        width: 100% !important;
        max-width: 100% !important;
        /* v10.6.0 (2026-01-28): Prevent native searchfield styling from
           overriding padding/background in dark color-scheme.
           We match header-navigation.css desktop spacing: button is 44px at left:10px;
           66px padding-left yields ~12px breathing room after the icon. */
        padding-left: 66px !important;
        padding-right: 16px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: inherit !important;
        outline: none !important;
        /* Strip UA searchfield styling (removes the "inner box" + weird padding) */
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        /* Keep cursor/text aligned and stable */
        line-height: 1.2 !important;
        min-height: 24px !important;
    }

    /* Remove WebKit search decorations that can appear as extra UI inside the pill */
    .site-header.search-open .header-search__input::-webkit-search-decoration,
    .site-header.search-open .header-search__input::-webkit-search-cancel-button,
    .site-header.search-open .header-search__input::-webkit-search-results-button,
    .site-header.search-open .header-search__input::-webkit-search-results-decoration,
    .site-header .header-search.is-open .header-search__input::-webkit-search-decoration,
    .site-header .header-search.is-open .header-search__input::-webkit-search-cancel-button,
    .site-header .header-search.is-open .header-search__input::-webkit-search-results-button,
    .site-header .header-search.is-open .header-search__input::-webkit-search-results-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
    }

    [data-theme='dark'] .site-header.search-open .header-search,
    [data-theme='dark'] .site-header .header-search.is-open {
        background: var(--aiwp-search-bg, rgba(var(--color-black-rgb), 0.88)) !important;
        border: var(--aiwp-search-border, 1px solid rgba(var(--color-white-rgb), 0.12)) !important;
        box-shadow: var(--aiwp-search-shadow, 0 12px 32px rgba(0, 0, 0, 0.45)) !important;
    }
}

/* MID-WIDTH DESKTOP (960–1439px): toggle-only, search opens as centered overlay */
@media (min-width: 960px) and (max-width: 1439px) {
    .site-header .header-search,
    .site-header form.header-search {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .site-header .header-search-toggle,
    .site-header button.header-search-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .site-header.search-open .header-search,
    .site-header .header-search.is-open {
        display: flex !important;
        position: fixed !important;
        top: calc(var(--header-height, 80px) + 8px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(720px, calc(100vw - 32px)) !important;
        max-width: 720px !important;
        align-items: center !important;
        padding: var(--aiwp-search-padding-y, 10px) var(--aiwp-search-padding-x, 12px) !important;
        margin: 0 !important;
        border-radius: var(--aiwp-search-radius, 9999px) !important;
        background: var(--aiwp-search-bg, rgba(var(--color-white-rgb), 0.96)) !important;
        border: var(--aiwp-search-border, 1px solid rgba(var(--color-black-rgb), 0.12)) !important;
        box-shadow: var(--aiwp-search-shadow, 0 12px 32px rgba(0, 0, 0, 0.18)) !important;
        z-index: 10002 !important;
    }

    .site-header.search-open .header-search__button,
    .site-header .header-search.is-open .header-search__button {
        display: flex !important;
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 20px !important;
        height: 20px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .site-header.search-open .header-search__input,
    .site-header .header-search.is-open .header-search__input {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 46px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    [data-theme='dark'] .site-header.search-open .header-search,
    [data-theme='dark'] .site-header .header-search.is-open {
        background: var(--aiwp-search-bg, rgba(var(--color-black-rgb), 0.88)) !important;
        border: var(--aiwp-search-border, 1px solid rgba(var(--color-white-rgb), 0.12)) !important;
        box-shadow: var(--aiwp-search-shadow, 0 16px 40px rgba(0, 0, 0, 0.5)) !important;
    }
}

/* LARGE DESKTOP (>=1440px): inline search only, toggle hidden */
@media (min-width: 1440px) {
    /*
      IMPORTANT: The navbar JS can set data-search-mode="compact" when the header
      detects collisions (nav items + actions). In that state, we MUST NOT hide the
      search toggle on wide screens — otherwise search disappears entirely.

      Rules:
      - data-search-mode="inline": show inline form, hide toggle
      - data-search-mode="compact": hide inline (unless open), show toggle
      - no data-search-mode: default to inline (safe for large desktops)
    */

    /* Default / inline: show inline search */
    .site-header:not([data-search-mode]) .header-search,
    .site-header:not([data-search-mode]) form.header-search,
    .site-header[data-search-mode='inline'] .header-search,
    .site-header[data-search-mode='inline'] form.header-search {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .site-header:not([data-search-mode]) .header-search-toggle,
    .site-header:not([data-search-mode]) button.header-search-toggle,
    .site-header[data-search-mode='inline'] .header-search-toggle,
    .site-header[data-search-mode='inline'] button.header-search-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Compact: toggle-only (inline hidden unless explicitly opened) */
    .site-header[data-search-mode='compact'] .header-search:not(.is-open),
    .site-header[data-search-mode='compact'] form.header-search:not(.is-open) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .site-header[data-search-mode='compact'] .header-search-toggle,
    .site-header[data-search-mode='compact'] button.header-search-toggle {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* v10.6.0 (2026-01-28): In large desktop COMPACT mode, open search as a centered overlay pill.
       Without this, the open state can inherit inconsistent geometry and look "off" on desktop. */
    .site-header[data-search-mode='compact'].search-open .header-search,
    .site-header[data-search-mode='compact'] .header-search.is-open {
        display: flex !important;
        position: fixed !important;
        top: calc(var(--header-height, 80px) + 8px) !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(720px, calc(100vw - 32px)) !important;
        max-width: 720px !important;
        align-items: center !important;
        margin: 0 !important;
        padding: var(--aiwp-search-padding-y, 10px) var(--aiwp-search-padding-x, 12px) !important;
        border-radius: var(--aiwp-search-radius, 9999px) !important;
        box-sizing: border-box !important;
        background: var(--aiwp-search-bg, rgba(var(--color-white-rgb), 0.96)) !important;
        border: var(--aiwp-search-border, 1px solid rgba(var(--color-black-rgb), 0.12)) !important;
        box-shadow: var(--aiwp-search-shadow, 0 12px 32px rgba(0, 0, 0, 0.18)) !important;
        z-index: 10002 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    [data-theme='dark'] .site-header[data-search-mode='compact'].search-open .header-search,
    [data-theme='dark'] .site-header[data-search-mode='compact'] .header-search.is-open {
        background: var(--aiwp-search-bg, rgba(var(--color-black-rgb), 0.88)) !important;
        border: var(--aiwp-search-border, 1px solid rgba(var(--color-white-rgb), 0.12)) !important;
        box-shadow: var(--aiwp-search-shadow, 0 16px 40px rgba(0, 0, 0, 0.5)) !important;
    }
}

/* ========================================
   §7 — HERO EYEBROW CONTRAST (LAST-IN-CASCADE)
   Purpose: ensure hero eyebrow pills are always readable in LIGHT MODE.

   Evidence (2026-01-27):
   - /blog/ "Company Updates" rendered as white text on a transparent pill
     (background computed as transparent).
   - This override forces a deterministic primary background + white text.
   ======================================== */

.archive-hero__eyebrow,
.page-hero__eyebrow,
.front-hero__eyebrow {
    background: var(--color-primary, #0066cc) !important;
    background-color: var(--color-primary, #0066cc) !important;
    border-color: transparent !important;
    color: var(--smart-btn-text-on-primary, #ffffff) !important;
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #ffffff) !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.archive-hero__eyebrow *,
.page-hero__eyebrow *,
.front-hero__eyebrow * {
    color: var(--smart-btn-text-on-primary, #ffffff) !important;
    -webkit-text-fill-color: var(--smart-btn-text-on-primary, #ffffff) !important;
}

.archive-hero__eyebrow svg,
.page-hero__eyebrow svg,
.front-hero__eyebrow svg {
    color: var(--smart-btn-text-on-primary, #ffffff) !important;
    stroke: var(--smart-btn-text-on-primary, #ffffff) !important;
    fill: none !important;
}

/* ========================================
   §8 — HEADER SEARCH (PLUGIN OVERRIDE HARDENING)
   Purpose: plugin design-system.css can apply !important backgrounds/padding to all
   input[type=search] controls. The header search MUST stay "one pill" (Google-style)
   with no inner field background, and MUST NOT jump on focus.
   ======================================== */

.site-header .header-search__input {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.site-header .header-search__input:focus,
.site-header .header-search__input:focus-visible {
    transform: none !important;
    box-shadow: none !important;
}

.site-header .header-search__input::-webkit-search-decoration,
.site-header .header-search__input::-webkit-search-cancel-button,
.site-header .header-search__input::-webkit-search-results-button,
.site-header .header-search__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* ========================================
   §9 — DESKTOP NAV HOVER (EDGE OUTLINE ONLY)
   Purpose: User request — on desktop, nav hover/active should be a full-edge
   outline highlight (not underline, not filled chip).
   Notes: This file loads last, so it can reliably override earlier nav modules.
   ======================================== */

@media (min-width: 960px) {
    .site-header .primary-nav .menu > li > a {
        background: transparent !important;
        box-shadow: none !important;
        border: 1px solid transparent !important;
    }

    .site-header .primary-nav .menu > li > a::after {
        content: none !important;
        display: none !important;
    }

    .site-header .primary-nav .menu > li > a:hover,
    .site-header .primary-nav .menu > li > a:focus,
    .site-header .primary-nav .menu > li > a:focus-visible {
        background: transparent !important;
        box-shadow: none !important;
        border-color: var(--nav-link-underline-color, var(--color-primary, #0066cc)) !important;
    }

    .site-header .primary-nav .menu > li.current-menu-item > a,
    .site-header .primary-nav .menu > li.current_page_item > a,
    .site-header .primary-nav .menu > li.current-menu-ancestor > a {
        border-color: var(--nav-link-underline-color, var(--color-primary, #0066cc)) !important;
    }
}