/*
Theme Name:   OI Support Child
Theme URI:    https://support.oneidentity.com/
Description:  Support-site child theme for OceanWP.
Author:       One Identity Web Team
Author URI:   https://www.oneidentity.com/
Template:     oceanwp
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  oi-support
Tags:         one-column, right-sidebar, custom-menu, custom-logo, accessibility-ready
*/

/* =================================================================
   SCOPE: fonts, tokens, layout, header, buttons, hero, cards, footer.

   PLAIN CSS ONLY. No nesting, no `&`, no SCSS syntax. If you need
   nesting, it belongs in a preprocessed partial, not here.

   TOKEN RULE: hex values appear ONLY in the :root block below.
   Every rule in this file consumes var(--oi-*). If you are typing
   '#' outside :root, the token is missing — add it to :root instead.

   Values marked "confirm" could not be derived from the existing
   files. Verify before shipping.

   BREAKPOINTS — the only five in use. Do not introduce more.
     min-width: 768px   / max-width: 767.98px    $bp-xs
     min-width: 992px   / max-width: 991.98px    $bp-sm
     min-width: 1170px  / max-width: 1169.98px   $bp-md
     min-width: 1280px  / max-width: 1279.98px   desktop nav cutoff
     min-width: 1500px                           hero bleed containment

   ---------------------------------------------------------------
   GLOBAL vs HOME-ONLY — read before adding a rule.

   This sheet prints AFTER oi-custom-block.css, so any selector here
   that matches markup inside an OI custom block beats the block's own
   rule on a specificity tie. To keep the blocks working on every page:

     GLOBAL     fonts, :root tokens, base elements (body, h1–h6, a),
                accessibility, layout wrappers, header, footer.
     HOME ONLY  #wrap gradient, buttons (.btn / .btn-link / .cta-v3),
                hero, support resources. Every selector is prefixed
                with body.home.

   Never add a bare generic class here (.container, .btn, .hero,
   .card, .section...). Scope it to an OceanWP wrapper ID, #header,
   #footer, or body.home.
   ---------------------------------------------------------------

   Section order:
     1. Fonts
     2. Tokens
     3. Base
     4. Accessibility
     5. Container & layout
     6. Header
     7. Buttons            (home only)
     8. Hero               (home only)
     9. Support resources  (home only)
    10. Footer
   ================================================================= */


/* =================================================================
   1. FONTS
   ================================================================= */

@font-face {
  font-family: "Noto Sans";
  src: url("/wp-content/themes/oi-support-child/assets/fonts/NotoSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/wp-content/themes/oi-support-child/assets/fonts/NotoSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* =================================================================
   2. TOKENS
   ================================================================= */

:root {

  /* ── Raw palette — the only hex values in this file ───────────── */
  --oi-color-primary: #1a4fd6;      /* OI: was #00a9e0 — action blue */
  --oi-color-secondary: #14c2c2;    /* OI: was #04a0cf — logo mid-ring */
  --oi-color-primary-dark: #10265f; /* OI: was #0083ad. Canonical deep navy-blue. */
  --oi-color-blue35: var(--oi-color-primary-dark);  /* was #1b3f8b — CTA hover. Aliased: same value. */
  --oi-color-purple: #6360d6;       /* unchanged — no OI counterpart; confirm it survives the rebrand */
  --oi-color-dark: #060f33;         /* OI: was #1c1f2a — navy */
  --oi-color-white: #ffffff;
  --oi-color-grey10: #ecedee;
  --oi-color-grey25: #e4e7ee;       /* OI: was #e3e4e8 — borders + dividers */
  --oi-color-heading: var(--oi-color-dark);  /* was #1c1f2a. Aliased: same value. */
  --oi-bg-accent: #e6ecfb;          /* OI: was #cceef9 — action blue at ~8% */

  --oi-color-grey60: #77797f;      /* footer rule + legal divider */
  --oi-color-ink: #14192b;         /* OI: was #0e0e0e. Nav + body copy. Not --oi-color-dark. */
  --oi-color-ol-blue: #049fda;     /* btn-ol-blue. OneLogin brand — leave as-is, retire with the OL partials. */
  --oi-color-cyan-bright: var(--oi-color-primary);       /* was #04aada. hero gradient start. Aliased. */
  --oi-color-blue-deep: var(--oi-color-primary-dark);    /* was #0b5c8f. hero gradient end. Aliased. */

  /* Card palette — moved out of the .card rules to honour the token rule */
  --oi-color-grey5: #f6f7fa;       /* OI: was #e8e8ec. Icon-button hover wash + card surface. Now LIGHTER than grey10 — the ramp is out of order, rename when convenient. */
  --oi-color-ink-900: var(--oi-color-ink);  /* was #1a1a2e. Aliased: identical to --oi-color-ink. */
  --oi-color-grey55: #5a5a6a;      /* card body copy — AUDIT: .resource-card p uses #5b6472, NOT this. See section 9. */

  /* ── OI additions — new hues with no OL counterpart ───────────── */
  --oi-color-lime: #c9e300;        /* CTA icon chip. AUDIT: also used as an icon *foreground* in sections 8 and 10, which contradicts this note. Pick one rule. */

  /* ── Elevation & scrims ───────────────────────────────────────── */
  --oi-shadow-pill: 0 2px 10px rgb(0 0 0 / 12%);  /* AUDIT: only consumed by the commented pill variant in section 6. */
  --oi-shadow-card: 0 1px 3px rgb(0 0 0 / 8%);
  --oi-shadow-float: 0 2px 6px rgb(0 0 0 / 20%);
  --oi-shadow-mnav: -8px 0 24px rgb(6 15 51 / 18%);  /* OI addition — off-canvas panel */
  --oi-scrim: rgb(6 15 51 / 55%);  /* OI: was rgb(0 0 0 / 35%) — navy tint, matching the mock */

  /* ── Buttons — legacy .oi-btn-cta pair: REMOVED ──────────────────
     --oi-btn-cta, --oi-btn-cta-hover, --oi-btn-cta-border and
     --oi-btn-secondary were defined here and consumed nowhere in this
     file. The OI custom blocks do consume those exact names (.btn-v3
     variants), and this :root beats the :where(:root) in theme.css, so
     these values were painting block buttons: navy fill under primary
     blue text on .btn-primary-white. Do not re-add them; theme.css supplies
     the values the buttons expect. */

  /* ── .btn-v3 variant system — see section 7 ─. */
  --btn-v3-radius: 999px;
  --btn-v3-pad-y: 14px;
  --btn-v3-pad-x: 20px;
  --btn-v3-gap: 12px;
  --btn-v3-border-width: 1px;
  --btn-v3-font-size: 16px;
  --btn-v3-font-weight: 600;
  --btn-v3-transition: 200ms ease;

  /* ── .oi-btn variant system (oi-btn.css) ──. */
  --oi-btn-primary-bg: var(--oi-color-primary);
  --oi-btn-primary-font: var(--oi-color-white);
  --oi-btn-white-bg: var(--oi-color-white);
  --oi-btn-white-font: var(--oi-color-dark);
  --oi-btn-black-font: var(--oi-color-dark);
  --oi-btn-purple-font: var(--oi-color-purple);
  --oi-btn-focus-ring: var(--oi-focus-ring);

  /* ── Semantic aliases — never redeclare a hex here ────────────── */
  --oi-body-bg: var(--oi-color-white);
  --oi-body-color: var(--oi-color-ink);   /* OI: was --oi-color-dark; navy is too heavy for body copy */
  --oi-link-color: var(--oi-color-primary);
  --oi-link-hover: var(--oi-color-primary-dark);
  --oi-focus-ring: var(--oi-color-dark);
  --oi-footer-bg: var(--oi-color-dark);     /* AUDIT: unused — section 10 paints #020B71 directly. */
  --oi-footer-text: var(--oi-color-white);  /* AUDIT: unused — section 10 uses --oi-color-white. */

  --oi-text-light: var(--oi-color-white);        /* text on dark surfaces */
  --oi-focus-ring-light: var(--oi-color-white);  /* dark footer, SC 2.4.11 */
  --oi-color-gradient-start: var(--oi-color-cyan-bright); /* hero ::after */
  --oi-color-gradient-end: var(--oi-color-blue-deep);     /* hero ::after */

  /* ── Header colour aliases — OI addition ──*/
  --oi-header-bg: var(--oi-color-white);
  --oi-header-border: var(--oi-color-grey25);
  --oi-nav-color: var(--oi-color-ink);
  --oi-nav-color-hover: var(--oi-color-primary);
  --oi-btn-nav-bg: var(--oi-color-dark);
  --oi-btn-nav-bg-hover: var(--oi-color-blue35);
  --oi-btn-nav-font: var(--oi-color-white);
  --oi-btn-icon-bg: var(--oi-color-lime);
  --oi-btn-icon-font: var(--oi-color-dark);
  --oi-icon-hover-bg: var(--oi-color-grey5);

  /* Header & Hero background  */
  --brand-gradient-blue: #23b0e4;   /* 13.97% — bright cyan, right edge */
  --brand-contrast-blue: #0a5fd0;   /* 45.63% — mid blue */
  --brand-dark-blue: #001a72;       /* 85.99% — deep navy, left edge */

  /* ── Typography families ($font-family-base) ──────────────────── */
  --oi-font-heading: "Noto Sans", sans-serif;
  --oi-font-body: "Noto Sans", sans-serif;

  /* Sizes beyond the base live in the type partial, not here. */
  --oi-font-size-base: 16px;    /* $font-size-base   */
  --oi-line-height-base: 1.5;   /* $line-height-base */

  /* ── Layout ───────────────────────────────────────────────────── */
  --oi-container-max: 1170px;   /* $container-lg */
  --oi-gutter: 15px;            /* confirm — taken from .oi-topbar-inner */
  --oi-section-padding: 100px;  /* $section-padding */
  --oi-sidebar-width: 300px;    /* confirm — no source value found */
  --oi-radius: 8px;             /* confirm — no source value found */

  /* ── Header  */
  --oi-header-max: 1240px;      /* OI: was 1280px — flat bar, not a pill */
  --oi-header-height: 76px;     /* OI: was 72px */
  --oi-header-height-sm: 64px;  /* OI addition — <= 480px */
  --oi-header-gap: 0px;         /* OI: was 20px. Flat bar sits flush; set to 20px only for the pill variant. */
  --oi-topbar-height: 40px;     /* retained — the support header emits no topbar, marketing still does */
  --oi-nav-gap: 20px;           /* OI: was 24px */
  --oi-nav-size: 14px;          /* OI: was 16px */
  --oi-header-fast: 180ms ease; /* OI: was 160ms */
  --oi-header-med: 300ms ease;  /* OI: was 220ms */

    /* ── Hero band — the #wrap gradient and .hero must share one height
     or the band cuts through the section. Never edit one alone. */
  --oi-hero-height: 540px;
  --oi-hero-height-md: 550px;   /* <= 1279.98px */
  --oi-hero-height-sm: 600px;   /* <= 767.98px  */

  /* ── Shared mask assets ── */
  --oi-mask-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --oi-mask-arc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85 86' preserveAspectRatio='none'%3E%3Cpath d='M33.2048 85.9953V84.0244C33.2048 56.4136 54.4113 33.5376 84.5906 33.5376L85 0C36.4279 0 0 37.0756 0 85.9905L32.5506 86L33.2048 85.9953Z' fill='%23000'/%3E%3C/svg%3E");
  --oi-mask-hero-shape: url('../img/bottom-right.png');
}


/* =================================================================
   3. BASE
   Element selectors only (0,0,1): any class inside a block beats them.
   ================================================================= */

body {
  background: var(--oi-body-bg);
  color: var(--oi-body-color);
  font-family: var(--oi-font-body);
  font-size: var(--oi-font-size-base);
  line-height: var(--oi-line-height-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--oi-font-heading);
  color: var(--oi-color-heading);
}

a {
  color: var(--oi-link-color);
}

a:hover,
a:focus {
  color: var(--oi-link-hover);
}

/* Hero band — HOME ONLY.
   #wrap is OceanWP's outermost wrapper and exists on every template.
   Unscoped, it painted this 540px gradient behind the header and under
   any Overview block on every page. */
body.home #wrap {
  background-image:
    url("/wp-content/themes/oi-support-child/assets/img/LooperGroup.svg"),
    linear-gradient(283deg,
      var(--brand-gradient-blue) 13.97%,
      var(--brand-contrast-blue) 45.63%,
      var(--brand-dark-blue) 85.99%);
  background-position: right top, right top;
  background-size:
    75% var(--oi-hero-height),
    100% var(--oi-hero-height);
  background-repeat: no-repeat, no-repeat;
}

/* Tablet and below */
@media (max-width: 1279.98px) {
  body.home #wrap {
    background-size:
      100% var(--oi-hero-height-md),
      100% var(--oi-hero-height-md);
  }
}

/* $bp-xs-max — taller band: the hero content stacks and grows here. */
@media (max-width: 767.98px) {
  body.home #wrap {
    background-size:
      100% var(--oi-hero-height-sm),
      100% var(--oi-hero-height-sm);
  }
}

/* =================================================================
   4. ACCESSIBILITY — skip link + focus (WCAG 2.2 AA)
   ================================================================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
}

.skip-link:focus {
  left: 0;
  display: block;
  padding: 0.75rem 1.25rem;
  background: var(--oi-color-dark);
  color: var(--oi-color-white);
  text-decoration: none;
  /* SC 2.4.12 Focus Not Obscured — sits above any sticky header */
  z-index: 100001;
}

/* :where() keeps this at 0,0,0, so any block focus style wins. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--oi-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

html {
  scroll-padding-top: calc(var(--oi-header-height) + var(--oi-header-gap) + 8px);
  overflow-x: clip;
}


@media (prefers-reduced-motion: reduce) {
  #header .oi-mnav,
  #header .oi-mnav-backdrop,
  #header .oi-nav-link,
  #header .oi-btn-primary {
    transition: none;
  }
}


/* =================================================================
   5. CONTAINER & LAYOUT

   Scoped to the wrappers this theme owns. The previous bare `.container`
   and `#main .container` also matched every .container INSIDE an OI
   custom block and forced it to 750 / 970 / 1170px with a 15px gutter.

   #content-wrap.container stays at 0,1,1 on purpose: OceanWP's
   full-width page layout (.content-full-screen #main #content-wrap) is
   heavier and must keep winning. Do not raise it.

   If another support template wraps its content in .container outside
   these four, add that wrapper here. Never go back to a bare .container.
   ================================================================= */

#content-wrap.container,
#footer .container,
body.home .hero .container,
body.home .resources .container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--oi-gutter);
  box-sizing: border-box;
}

/* $bp-sm */
@media (min-width: 768px) {
  #content-wrap.container,
  #footer .container,
  body.home .hero .container,
  body.home .resources .container {
    max-width: 750px; /* $container-sm */
  }
}

/* $bp-md */
@media (min-width: 992px) {
  #content-wrap.container,
  #footer .container,
  body.home .hero .container,
  body.home .resources .container {
    max-width: 970px; /* $container-md */
  }
}

/* $bp-lg */
@media (min-width: 1170px) {
  #content-wrap.container,
  #footer .container,
  body.home .hero .container,
  body.home .resources .container {
    max-width: var(--oi-container-max); /* $container-lg */
  }
}

/* AUDIT: .oi-section shares the oi- namespace with the custom blocks.
   Confirm no block emits this class; if one does, scope this rule. */
.oi-section {
  padding-block: var(--oi-section-padding);
}

body.content-full-width #content-wrap .content-area {
  width: 100%;
}

body.content-right-sidebar #right-sidebar,
body.content-left-sidebar #left-sidebar {
  width: var(--oi-sidebar-width);
}

@media (max-width: 767.98px) {
  body.content-right-sidebar #right-sidebar,
  body.content-left-sidebar #left-sidebar {
    width: 100%;
  }
}

/* Page header suppression mirror — the server already skipped the render,
   this covers any late plugin re-insertion. */
body.oi-hide-page-header .page-header,
body.oi-hide-page-header #page-header {
  display: none;
}

h1.title {
  font-size: 32px;
  line-height: 1.42;
}


/* =================================================================
   6. HEADER — logo, flat nav, mobile off-canvas
   ================================================================= */

/**
 * One Identity Support — Header (single tier)
 *
 * Sticky pill bar, flat nav, mobile off-canvas.
 * Markup: header#header > .oi-header-inner + .oi-mnav + .oi-mnav-backdrop
 *
 * There is no .oi-header wrapper in this template — the sticky bar IS #header.
 *
 * WARNING: never add transform / filter / will-change / contain to #header.
 * Any of those turns it into a containing block for position:fixed and the
 * off-canvas panel would be clipped to the header box.
 *
 * WARNING: no ancestor of #header may set overflow:hidden|auto, or sticky
 * silently stops working.
 */

/* ── Header shell ─────────────────────────────────────────────── */

#header {
  position: sticky;
  top: var(--oi-header-gap, 0px);
  z-index: 999; /* one stacking context for the bar, backdrop and off-canvas */
  height: var(--oi-header-height, 72px);
  background: var(--oi-header-bg);
  border-bottom: none;
  overflow: visible;
}

/* Neutralises OceanWP's own sticky header, which switches to position:fixed
   with left/right/width set. Ours already sticks. */
#header.is-sticky,
#header.oi-is-stuck {
  position: sticky;
  left: auto;
  right: auto;
  width: auto;
  margin-top: 0;
}

/* Present on the main OI site, absent here. Kept so the same file works if
   the wrapper is ever added to this template. */
#header .oi-header {
  height: 100%;
  background: var(--oi-header-bg);
  border-bottom: none;
}

/* JS-injected when the bar is detached from flow. Zero unless JS sets it. */
#header .oi-header-spacer {
  height: 0;
}

#header .oi-header-inner {
  position: relative;
  max-width: var(--oi-header-max, 1440px);
  margin: 0 auto;
  height: 100%;
  padding-inline: var(--oi-gutter, 24px);
  display: flex;
  align-items: center;
  gap: 25px;
  background: var(--oi-header-bg);
  border-radius: calc(var(--oi-header-height, 72px) / 2);
}

#header .oi-header-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

#header .oi-header-logo img {
  display: block;
  height: 36px;
  width: auto;
}

/* SC 2.4.12 Focus Not Obscured — without this the sticky bar covers the
   focused element when tabbing or following an in-page anchor. */
html {
  scroll-padding-top: calc(
    var(--oi-header-height, 72px) + var(--oi-header-gap, 0px) + 16px
  );
}

/* JS must toggle this class on <body> while the off-canvas is open,
   otherwise the page scrolls behind the panel. */
body.oi-mnav-open {
  overflow: hidden;
}

/* ── Nav — single tier, direct links only ─────────────────────── */

/* OceanWP styles bare <ul> with a left margin and list markers. Reset both
   lists here or bullets show up inside the off-canvas panel. */
#header .oi-nav-list,
#header .oi-mnav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#header .oi-nav-list > li,
#header .oi-mnav-list > li {
  list-style: none;
  margin: 0;
}

#header .oi-header-nav {
  flex: 1;
  min-width: 0; /* lets the nav shrink instead of pushing the CTA out */
}

#header .oi-nav-list {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--oi-nav-gap, 20px);
}

#header .oi-nav-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

#header .oi-nav-link {
  font-size: var(--oi-nav-size, 15px);
  font-weight: 500;
  line-height: var(--oi-line-height-base, 1.5);
  white-space: nowrap; /* a wrap would break the bar's fixed height */
  color: var(--oi-nav-color);
  display: inline-flex;
  align-items: center;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  background-color: transparent;
  transition: color var(--oi-header-fast, 0.2s),
    border-color var(--oi-header-fast, 0.2s);
}

#header .oi-nav-link:hover,
#header .oi-nav-link:focus-visible {
  color: var(--oi-nav-color-hover);
  border-bottom-color: var(--oi-nav-color-hover);
}

#header .oi-nav-item.oi-is-current .oi-nav-link,
#header .oi-nav-link[aria-current='page'] {
  color: var(--oi-nav-color-hover);
  border-bottom-color: var(--oi-nav-color-hover);
  font-weight: 700;
}

/* ── Header actions — CTA + hamburger ─────────────────────────── */

#header .oi-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  margin-left: auto;
  background: transparent;
}

/* .oi-btn-primary is the navy pill in the bar; .oi-btn-block is the
   same button stretched across the off-canvas footer. */
#header .oi-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--oi-btn-nav-bg);
  border: 1px solid var(--oi-btn-nav-bg);
  color: var(--oi-btn-nav-font);
  padding: 10px 10px 10px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--oi-header-fast, 0.2s),
    border-color var(--oi-header-fast, 0.2s);
}

#header .oi-btn-primary:hover,
#header .oi-btn-primary:focus-visible {
  background: var(--oi-btn-nav-bg-hover);
  border-color: var(--oi-btn-nav-bg-hover);
  color: var(--oi-btn-nav-font);
  text-decoration: none;
}

#header .oi-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--oi-btn-icon-bg);
  color: var(--oi-btn-icon-font);
  flex-shrink: 0;
}

#header .oi-btn-block {
  justify-content: center;
  width: 100%;
}

#header .oi-header-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* SC 2.5.8 Target Size — 24x24 minimum; 40x40 gives comfortable margin. */
  width: 40px;
  height: 40px;
  color: var(--oi-color-dark);
  border-radius: 8px;
}

#header .oi-header-toggle:hover {
  background: var(--oi-icon-hover-bg);
}

/* SC 2.4.11 Focus Appearance, scoped to the header's own contrast. */
#header a:focus-visible,
#header button:focus-visible {
  outline: 2px solid var(--oi-focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Mobile off-canvas — single panel, flat list ──────────────── */

#header .oi-mnav-backdrop {
  position: fixed;
  inset: 0;
  background: var(--oi-scrim);
  z-index: 800;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--oi-header-med, 0.3s),
    visibility var(--oi-header-med, 0.3s);
}

#header .oi-mnav-backdrop.oi-is-open {
  opacity: 1;
  visibility: visible;
}

#header .oi-mnav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  height: 100dvh; /* iOS: 100% leaves the footer under the URL bar */
  width: min(420px, 100%);
  background: var(--oi-color-white);
  z-index: 900;
  transform: translateX(100%);
  /* visibility backs up the inert attribute: nothing inside is focusable
     or hit-testable while the panel is parked off-screen. */
  visibility: hidden;
  transition: transform var(--oi-header-med, 0.3s),
    visibility var(--oi-header-med, 0.3s);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--oi-shadow-mnav);
}

#header .oi-mnav.oi-is-open {
  transform: translateX(0);
  visibility: visible;
}

#header .oi-mnav-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain; /* stops scroll chaining to the page */
  background: var(--oi-color-white);
  transform: none;
}

#header .oi-mnav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--oi-header-border);
}

#header .oi-mnav-header .oi-header-logo img {
  height: 30px;
}

#header .oi-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  /* SC 2.5.8 Target Size — 24x24 minimum; 36x36 gives margin. */
  width: 36px;
  height: 36px;
  color: var(--oi-color-dark);
  border-radius: 8px;
}

#header .oi-close-btn:hover {
  background: var(--oi-icon-hover-bg);
}

/* Supplied glyphs range from 16x15 to 24x24 viewBoxes. Fixed width with
   height:auto keeps them from stretching. */
#header .oi-close-btn svg,
#header .oi-header-toggle svg {
  display: block;
  width: 24px;
  height: auto;
}

#header .oi-mnav-list {
  padding: 8px 20px; /* re-applied after the list reset above */
}

#header .oi-mnav-item {
  width: 100%;
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--oi-header-border);
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  /* Explicit: a global `a { color: ... }` rule otherwise wins and can
     render these against the white off-canvas panel. */
  color: var(--oi-nav-color);
  background: none;
}

#header .oi-mnav-item:hover,
#header .oi-mnav-item:focus-visible {
  color: var(--oi-nav-color-hover);
}

#header .oi-mnav-item.oi-is-current,
#header .oi-mnav-item[aria-current='page'] {
  color: var(--oi-nav-color-hover);
  font-weight: 700;
}

#header .oi-mnav-footer {
  margin-top: 25px;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--oi-header-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Header media queries ─────────────────────────────────────── */

@media (min-width: 1280px) {
  #header .oi-header-nav { display: block; }
}

@media (max-width: 1279.98px) {
  #header .oi-header-nav { display: none; }
  #header .oi-header-toggle { display: inline-flex; }
}

/* $bp-sm-max */
@media (max-width: 991.98px) {
  #header .oi-header-inner { padding-inline: 16px; gap: 16px; }
  #header .oi-header-actions { gap: 12px; }
}

/* $bp-xs-max */
@media (max-width: 767.98px) {
  #header .oi-mnav { width: 100%; }
}

/* Scoped to .oi-header-actions so the off-canvas footer CTA survives. */
@media (max-width: 640px) {
  #header .oi-header-actions .oi-btn-primary { display: none; }
}

@media (max-width: 480px) {
  #header { height: var(--oi-header-height-sm, 60px); }
  #header .oi-header-logo img { height: 30px; }
}

/* ── Motion and print ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #header .oi-mnav,
  #header .oi-mnav-backdrop,
  #header .oi-nav-link,
  #header .oi-btn-primary {
    transition: none;
  }
}

@media print {
  #header {
    position: static;
    height: auto;
  }

  #header .oi-mnav,
  #header .oi-mnav-backdrop,
  #header .oi-header-toggle {
    display: none;
  }
}

/* ── Pill variant — optional ──────────────────────────────────── */

/*
body.home #header {
  background: var(--oi-color-dark);
  padding: 5px 25px 25px;
  height: auto;
}
body.home #header .oi-header-inner {
  background: var(--oi-header-bg);
  box-shadow: var(--oi-shadow-pill);
  padding-inline: 32px;
  height: var(--oi-header-height, 72px);
}
*/


/* =================================================================
   7. BUTTONS — HOME ONLY

   Consolidated from three copies of this section. Values are the ones
   that won the cascade before (last copy), so the home renders the same.
   Every selector carries body.home so .btn / .btn-link / .oi-btn inside
   an OI custom block keep the block's own styling on every page.
   ================================================================= */

/* ── Arrow nudge on the .oi-btn family ────────────────────────── */
/* AUDIT: no .oi-btn / .oi-btn-cta rule exists in this file. Kept in
   case home partials still emit those classes — delete once
   confirmed unused. */

body.home :is(.oi-btn, .oi-btn-cta, .wp-block-button__link) .oi-arrow,
body.home :is(.oi-btn, .oi-btn-cta, .wp-block-button__link) > span[aria-hidden='true'] {
  display: inline-block;
  transition: transform var(--oi-header-fast);
}

body.home :is(.oi-btn, .oi-btn-cta, .wp-block-button__link):is(:hover, :focus-visible) .oi-arrow,
body.home :is(.oi-btn, .oi-btn-cta, .wp-block-button__link):is(:hover, :focus-visible) > span[aria-hidden='true'] {
  transform: translateX(4px);
}

/* ── .btn base — pill geometry, unscoped twin of the header CTA ──
   Class is doubled to beat OceanWP's `a:hover` (0,1,1). */

body.home .btn.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 20px;
  border: 1px solid var(--btn-border, transparent);
  border-radius: 999px;
  background: var(--btn-bg, transparent);
  color: var(--btn-fg, inherit);
  /* Form controls do not inherit typography — declared so a <button>.btn
     matches an <a>.btn. */
  font-family: var(--oi-font-body);
  font-size: 15px;
  font-weight: 600;
  line-height: var(--oi-line-height-base);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  /* Overrides OceanWP's `transition: all .3s ease` on anchors. */
  transition:
    background var(--oi-header-fast),
    border-color var(--oi-header-fast),
    color var(--oi-header-fast);
}

body.home .btn.btn:hover,
body.home .btn.btn:focus-visible {
  background: var(--btn-bg-hover, var(--btn-bg, transparent));
  color: var(--btn-fg-hover, var(--btn-fg, inherit));
  border-color: var(--btn-border-hover, var(--btn-border, transparent));
  text-decoration: none;
}

/* SC 2.4.11 Focus Appearance — ring token is per-variant so it can flip
   to white on dark surfaces. */
body.home .btn.btn:focus-visible {
  outline: 2px solid var(--btn-focus-ring, var(--oi-focus-ring));
  outline-offset: 3px;
}

/* Lime icon chip. .btn-icon-box is the only icon class in this system —
   .btn-icon belongs to #header .oi-btn-icon and must not be reused. */
body.home .btn.btn .btn-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--btn-icon-bg, var(--oi-color-lime));
  color: var(--btn-icon-fg, var(--oi-color-dark));
  transition: transform var(--oi-header-fast);
}

/* Locked so a stray width attribute on the SVG cannot resize the chip. */
body.home .btn.btn .btn-icon-box svg {
  display: block;
  width: 14px;
  height: 14px;
}

body.home .btn.btn:hover .btn-icon-box,
body.home .btn.btn:focus-visible .btn-icon-box {
  transform: translateX(3px);
}

/* ── .btn variants — token overrides only ─────────────────────── */

/* White pill, dark label, lime chip. */
body.home .btn.btn-white {
  --btn-bg: var(--oi-color-white);
  --btn-bg-hover: var(--oi-color-grey10);
  --btn-fg: var(--oi-color-dark);
  --btn-fg-hover: var(--oi-color-dark);
  --btn-border: var(--oi-color-white);
  --btn-border-hover: var(--oi-color-grey10);
  /* Sits on the blue gradient — a navy ring would not clear 3:1. */
  --btn-focus-ring: var(--oi-focus-ring-light);
}

/* Navy pill, white label, lime chip. */
body.home .btn.btn-navy {
  --btn-bg: var(--oi-btn-nav-bg);
  --btn-bg-hover: var(--oi-btn-nav-bg-hover);
  --btn-fg: var(--oi-btn-nav-font);
  --btn-fg-hover: var(--oi-btn-nav-font);
  --btn-border: var(--oi-btn-nav-bg);
  --btn-border-hover: var(--oi-btn-nav-bg-hover);
  --btn-focus-ring: var(--oi-focus-ring-light);
}

/* ── .btn-link — flat variant, used as `class="btn btn-link"`. Strips
   the pill surface and the chip, keeps the flex row and the nudge.
   Same specificity as .btn: this block MUST stay after it. ──────── */

body.home .btn-link.btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--oi-text-light);
  gap: 6px;   /* tighter than the pill — no chip to clear */
  text-decoration: none;
}

/* Colour and decoration both restated: OceanWP's a:hover (0,1,1) would
   otherwise repaint this in #13aff0 and underline it. */
body.home .btn-link.btn-link:hover,
body.home .btn-link.btn-link:focus-visible {
  background: none;
  border-color: transparent;
  color: var(--oi-link-hover);
  text-decoration: none;
}

/* AUDIT: hover outline carried over from the first copy of this section,
   which no later copy reset, so it was live. Looks unintended: delete
   this rule if the home links should not show a box on hover. */
body.home .btn-link.btn-link:hover {
  outline: 2px solid var(--oi-link-hover);
  outline-offset: 2px;
}

body.home .btn-link.btn-link:focus-visible {
  outline: 2px solid var(--oi-focus-ring-light);
  outline-offset: 2px;
}

/* Bare arrow — chip removed explicitly, not left to the absence of a
   rule, so a chip reintroduced elsewhere cannot leak in. */
body.home .btn-link.btn-link .btn-icon-box {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: currentColor;
}

body.home .btn-link.btn-link:hover .btn-icon-box,
body.home .btn-link.btn-link:focus-visible .btn-icon-box {
  transform: translateX(5px);
}

/* ── CTA group ────────────────────────────────────────────────── */

body.home .cta-v3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

@media (max-width: 767.98px) {
  body.home .cta-v3 {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Must out-rank OceanWP's (0,6,1) entry-link rule. The two :not()
   pseudo-classes carry the weight; they are not filters here. */
body.home.page:not(.elementor-page):not(.woocommerce-page) .entry a.btn.btn,
body.home.page:not(.elementor-page):not(.woocommerce-page) .entry a.btn.btn:hover,
body.home.page:not(.elementor-page):not(.woocommerce-page) .entry a.btn.btn:focus,
body.home.page:not(.elementor-page):not(.woocommerce-page) .entry a.btn.btn:focus-visible {
  text-decoration: none;
  transition:
    background var(--oi-header-fast),
    border-color var(--oi-header-fast),
    color var(--oi-header-fast);
}

body.home.page:not(.elementor-page):not(.woocommerce-page) .entry a.btn.btn .btn-icon-box {
  transition: transform var(--oi-header-fast);
}

body.home.page:not(.elementor-page):not(.woocommerce-page) .entry a.btn.btn:hover .btn-icon-box,
body.home.page:not(.elementor-page):not(.woocommerce-page) .entry a.btn.btn:focus-visible .btn-icon-box {
  transform: translateX(3px);
}

body.home.page:not(.elementor-page):not(.woocommerce-page) .entry a.btn-link.btn-link:hover .btn-icon-box,
body.home.page:not(.elementor-page):not(.woocommerce-page) .entry a.btn-link.btn-link:focus-visible .btn-icon-box {
  transform: translateX(5px);
}


/* =================================================================
   8. HERO — HOME ONLY
   ================================================================= */

body.home .hero {
  position: relative;
  color: var(--oi-text-light);
  min-height: 500px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
}

body.home .hero__decor {
  position: absolute;
  top: 0;
  right: 0;
  width: min(560px, 55%);
  height: 100%;
  opacity: 0.55;
  pointer-events: none;
}

body.home .hero__inner {
  position: relative;
  z-index: 1;
  max-width: 480px;
}

body.home .hero__eyebrow-banner {
  position: absolute;
  top: 10px;
  right: 24px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 430px;
  background: rgba(47, 111, 224, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 16px 40px 16px 16px;
  /* AUDIT [PERF]: backdrop-filter forces this subtree onto its own
     compositor layer and repaints on scroll. Cheap on desktop, measurable
     on low-end mobile — check INP if the hero is above the fold. */
  backdrop-filter: blur(6px);
}

body.home .hero__eyebrow-banner .icon-triangle {
  display: block;
  box-sizing: border-box;   /* without this the border pushes it to 72 */
  width: 60px;
  height: 60px;
  padding: 15px;
  border-radius: 16px;
  border: 1px solid var(--oi-color-white);
  color: var(--oi-color-lime);
  flex-shrink: 0;
}

body.home .hero__eyebrow-banner p {
  font-size: 12.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  padding: 0;
}

body.home .hero__eyebrow-banner strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

body.home .hero__eyebrow-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  background: transparent;
}

body.home .hero__eyebrow-close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #000;
}

body.home .hero h1 {
  font-size: 46px;
  line-height: 1.12;
  font-weight: 700;
  color: #ffffff;
  /* Clears the absolutely-positioned eyebrow banner; reset to 0 at 900px
     where the banner goes static. */
  margin-top: 0;
}

body.home .hero p.hero__lede {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 460px;
}

body.home .hero__actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 30px;
}

body.home .hero .eyebrow-desc {
  font-size: 10px;
}


/* =================================================================
   9. SUPPORT RESOURCES — HOME ONLY
   ================================================================= */

body.home .resources {
  padding: 20px 0 92px;
}

body.home .resources__title {
  font-size: 30px;
  font-weight: 700;
  color: var(--oi-color-heading);   /* was #060f33 */
  margin-bottom: 32px;
}

body.home .resources__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

body.home .resource-card {
  background: var(--oi-color-grey5);   /* was #f6f7fa */
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 26px 24px 24px;
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

body.home .resource-card:hover,
body.home .resource-card:focus-within {
  border-color: var(--oi-color-secondary);   /* was #14c2c2 */
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(6, 15, 51, 0.08);
}

body.home .resource-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f2eefb;
  color: #6b3fd6;
  font-size: 19px;
  margin-bottom: 18px;
}

body.home .resource-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--oi-color-heading);   /* was #060f33 */
  margin-bottom: 8px;
}

body.home .resource-card p {
  font-size: 14px;
  line-height: 1.5;
  color: #5b6472;
}

/* Must stay after section 7: same specificity as .btn-link.btn-link,
   and the blue colour has to win over the white default there. */
body.home .resource-card .btn-link {
  margin-top: 14px;
  padding: 0;
  color: var(--oi-link-color);   /* was #1a4fd6 */
}

@media (max-width: 900px) {
  body.home .resources__grid { grid-template-columns: 1fr 1fr; }
  body.home .hero__eyebrow-banner { position: static; margin-bottom: 28px; max-width: none; }
  body.home .hero h1 { margin-top: 0; font-size: 38px; }
}

@media (max-width: 640px) {
  body.home .hero { padding: 40px 0 56px; }
  body.home .hero__decor { display: none; }
  body.home .hero__actions { align-items: center; }
  body.home .resources { padding: 56px 0 64px; }
  body.home .resources__grid { grid-template-columns: 1fr; }
}


/* =================================================================
   10.1 FOOTER — STRUCTURE
   ================================================================= */

#footer.site-footer .footer-box {
  background: #020B71;
  color: var(--oi-color-white);
}


/* =================================================================
   10.2 FOOTER — PHONE NUMBER LISTING
   ================================================================= */

#footer.site-footer .phone-listing {
  padding: 64px 0 56px;
}

#footer.site-footer .phone-listing__title {
  font-size: 30px;
  font-weight: 700;
  color: var(--oi-color-white);
}

/* 6.28:1 on #020B71 — passes WCAG 2.2 AA for normal text */
#footer.site-footer .phone-listing__note {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14.5px;
  max-width: 420px;
}

#footer.site-footer .phone-listing__grid {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

/* Soft top-left highlight matching the reference mockup.
   Overlay alphas keep the card readable on any dark footer background. */
#footer.site-footer .phone-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.035) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 28px 30px 30px;
}

#footer.site-footer .phone-card p {
  margin: 0;
}

#footer.site-footer .phone-card__region {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--oi-color-secondary);
  margin-bottom: 12px;
}

/* CHANGED: divider alpha lowered from #ffffff78 to 0.16 to match the
   reference. Revert to #ffffff78 if the brighter rule is intentional. */
#footer.site-footer .phone-card__name {
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--oi-color-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  margin-bottom: 18px;
  padding-bottom: 18px;
}

#footer.site-footer .phone-card__row {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 10px;
}

/* Icons are aria-hidden and always paired with adjacent text, so the
   muted tone carries no information and is exempt from 1.4.3 */
#footer.site-footer .phone-card__row i {
  width: 16px;
  flex: none;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

/* Two-line contact entry: single icon spanning label plus number */
#footer.site-footer .phone-card__contact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

#footer.site-footer .phone-card__contact i {
  width: 16px;
  flex: none;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
  color: var(--oi-color-lime);
}

#footer.site-footer .phone-card__contact-body {
  min-width: 0;
}

/* 6.4:1 over the composited card surface — passes AA */
#footer.site-footer .phone-card__label {
  display: block;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

#footer.site-footer .phone-card__number {
  display: block;
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--oi-color-white);
  text-decoration: none;
  white-space: nowrap;
}

/* Same colour as rest state — defeats OceanWP anchor hover colour */
#footer.site-footer .phone-card__number:hover,
#footer.site-footer .phone-card__number:focus {
  color: var(--oi-color-white);
}

/* WCAG 2.2 SC 2.4.11 Focus Appearance — lime outline is 8.9:1 on the card */
#footer.site-footer .phone-card__number:focus-visible {
  outline: 2px solid var(--oi-color-lime);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (max-width: 1100px) {
  #footer.site-footer .phone-listing__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  #footer.site-footer .phone-listing__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  #footer.site-footer .phone-listing { padding: 48px 0 40px; }
  #footer.site-footer .phone-card { padding: 24px 22px 26px; }
  #footer.site-footer .phone-card__name { font-size: 22px; }
}


/* =================================================================
   10.3 FOOTER — BOTTOM NAV
   ================================================================= */

#footer.site-footer .footer-bottom {
  border-top: 1px solid #ffffff78;
  padding: 20px 0;
}

#footer.site-footer .footer-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
}

#footer.site-footer .footer-bottom p {
  font-size: 12.5px;
  color: var(--oi-color-white);
}

/* list-style-type is inherited, so the li rule below is technically
   redundant — kept because OceanWP ships li rules under #footer ul
   that could re-assert a marker at equal or higher specificity. */
#footer.site-footer .footer-bottom__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  list-style-type: none;
}

#footer.site-footer .footer-bottom__links li {
  list-style-type: none;
}

#footer.site-footer .footer-bottom__links li:not(:last-child)::after {
  content: "|";
  color: var(--oi-color-white);
  margin: 0 10px;
}

#footer.site-footer .footer-bottom__links a {
  font-size: 12.5px;
  color: var(--oi-color-white);
}

/* Same colour as rest state — defeats OceanWP anchor hover colour.
   Do not simplify by deleting it. */
#footer.site-footer .footer-bottom__links a:hover {
  color: var(--oi-color-white);
}

/* WCAG 2.2 SC 2.4.11 Focus Appearance */
#footer.site-footer .footer-bottom__links a:focus-visible {
  outline: 2px solid var(--oi-color-lime);
  outline-offset: 3px;
  border-radius: 3px;
}

@media (max-width: 640px) {
  #footer.site-footer .footer-bottom__inner { flex-direction: column; align-items: flex-start; }
}