/*
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
   ================================================================= */


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

@font-face {
  font-family: "Space Grotesk";
  src: url('/wp-content/themes/oi-support-child/assets/fonts/SpaceGrotesk-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

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

@font-face {
  font-family: "Space Grotesk";
  src: url('/wp-content/themes/oi-support-child/assets/fonts/SpaceGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url('/wp-content/themes/oi-support-child/assets/fonts/SpaceGrotesk-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url('/wp-content/themes/oi-support-child/assets/fonts/SpaceGrotesk-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: #00a9e0;
  --oi-color-secondary: #04a0cf;
  --oi-color-primary-dark: #0083ad;
  --oi-color-blue35: #1b3f8b;
  --oi-color-purple: #6360d6;
  --oi-color-dark: #1c1f2a;
  --oi-color-white: #ffffff;
  --oi-color-grey10: #ecedee;
  --oi-color-grey25: #e3e4e8;
  --oi-color-heading: #1c1f2a;
  --oi-bg-accent: #cceef9;

  --oi-color-grey60: #77797f;      /* footer rule + legal divider */
  --oi-color-ink: #0e0e0e;         /* white-blackfont preset. Not --oi-color-dark. */
  --oi-color-ol-blue: #049fda;     /* btn-ol-blue. OneLogin brand; confirm it belongs here. */
  --oi-color-cyan-bright: #04aada; /* hero gradient start. confirm — carried from the OL hero. */
  --oi-color-blue-deep: #0b5c8f;   /* hero gradient end.   confirm — carried from the OL hero. */

  /* Card palette — moved out of the .card rules to honour the token rule */
  --oi-color-grey5: #e8e8ec;       /* card image placeholder */
  --oi-color-ink-900: #1a1a2e;     /* card heading. confirm — near --oi-color-dark, may be a duplicate. */
  --oi-color-grey55: #5a5a6a;      /* card body copy */

  /* ── Elevation & scrims ───────────────────────────────────────── */
  --oi-shadow-pill: 0 2px 10px rgb(0 0 0 / 12%);
  --oi-shadow-card: 0 1px 3px rgb(0 0 0 / 8%);
  --oi-shadow-float: 0 2px 6px rgb(0 0 0 / 20%);
  --oi-scrim: rgb(0 0 0 / 35%);

  /* ── Buttons — legacy .oi-btn-cta pair ────────────────────────── */
  --oi-btn-cta: var(--oi-color-secondary);
  --oi-btn-cta-hover: var(--oi-color-blue35);
  --oi-btn-cta-border: var(--oi-color-secondary);
  --oi-btn-secondary: var(--oi-color-blue35);

  /* ── .btn-v3 variant system — see section 7 ───────────────────
     These were the missing piece: the tokens existed, the rules that
     consume them did not, so every .btn-v3 rendered as a bare link. */
  --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) ──────────────────────
     Consumed by the separate oi-btn.css partial. Kept here so that
     file has its tokens; delete both if that partial is retired. */
  --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-dark);
  --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);
  --oi-footer-text: var(--oi-color-white);

  --oi-text-light: var(--oi-color-white);        /* text on dark surfaces */
  --oi-focus-ring-light: var(--oi-color-white);  /* dark topbar + 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 */

  /* ── Typography families ($font-family-base) ──────────────────── */
  /* The fallback stack lives here, not in @font-face — that
     descriptor takes a single family name. */
  --oi-font-heading: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --oi-font-body: "Space Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, 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: 24px;            /* 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 is deliberately WIDER than --oi-container-max.
     Seven labels ("Product Documentation" and "Contact Support" are
     the long ones) measure roughly 720px at 15px, plus six 16px gaps,
     plus logo, CTA and pill padding — about 1250px total. At 1170 the
     nav collides with the CTA. Do not collapse these two tokens. */
  --oi-header-max: 1280px;
  --oi-header-height: 72px;
  --oi-header-gap: 20px;        /* floating gap from top of viewport */
  --oi-topbar-height: 40px;
  --oi-nav-gap: 13px;
  --oi-nav-size: 15px;
  --oi-header-fast: 160ms ease;
  --oi-header-med: 220ms ease;

  /* ── Shared mask assets ───────────────────────────────────────
     Declared once and consumed by both the prefixed and unprefixed
     mask-image properties. Previously each data URI was written out
     twice per rule; this halves them. */
  --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

   Minimum needed to put the loaded font on the page. Everything else
   about type belongs in the type partial.
   ================================================================= */

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);
}


/* =================================================================
   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;
}

/* SC 2.4.11 Focus Appearance — a visible indicator at >= 3:1 against both
   the component and the adjacent background. Never replace this with
   outline: none. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--oi-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

html {
  /* SC 2.4.12 Focus Not Obscured — the sticky bar can otherwise cover a
     keyboard-focused target on in-page jumps. */
  scroll-padding-top: calc(var(--oi-header-height) + var(--oi-header-gap) + 8px);

  /* Absorbs the 100vw full-bleed overrun. 100vw includes the scrollbar,
     so any edge-to-edge block overruns the document by the scrollbar
     width on platforms that reserve one.

     clip, not hidden: clip does not create a scroll container, so
     position:sticky, scroll-padding-top above and the fixed header pill
     all keep working. Removing this brings back the horizontal
     scrollbar — it does NOT make the hero any wider. */
  overflow-x: clip;
}


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

   Stepped widths mirror $container-sm / -md / -lg. Below $bp-sm the
   container is fluid and the gutter alone does the work.
   ================================================================= */

#main .container,
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--oi-gutter);
  box-sizing: border-box;
}

/* $bp-sm */
@media (min-width: 768px) {
  #main .container,
  .container {
    max-width: 750px; /* $container-sm */
  }
}

/* $bp-md */
@media (min-width: 992px) {
  #main .container,
  .container {
    max-width: 970px; /* $container-md */
  }
}

/* $bp-lg */
@media (min-width: 1170px) {
  #main .container,
  .container {
    max-width: var(--oi-container-max); /* $container-lg */
  }
}

.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 — top bar, logo, flat nav, mobile off-canvas

   Single tier. No mega panels, no dropdowns. Every item is a link.
   Markup comes from the Special Tags plugin; this styles only the
   wrapper that header.php owns.
   ================================================================= */

/* Home-only backdrop. The dark field sits on #header itself, behind the
   floating white pill. body.home (1,2,0) outranks the transparent
   background on the bare #header reset below. */
body.home #header {
  background: var(--oi-color-dark);
  padding: 5px 25px 25px;
  margin: 0;
}

body.oi-nav-open {
  overflow: hidden;
}

/* ── OceanWP container reset ──────────────────────────────────────
   #header is OceanWP's custom-header wrapper. The theme styles it (and
   the .container / #site-header-inner it injects) with ID-level
   selectors, which out-specify any bare class. Every rule below is
   prefixed with #header — that alone raises specificity above the
   theme. -------------------------------------------------------- */

#header {
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}

/* OceanWP paints a gradient and/or shadow on its header wrappers, which
   shows through as a grey band across the top of the bar. */
#header,
#header .oi-header-inner,
#header .oi-header-nav,
#header .oi-nav-list,
#header .oi-nav-item {
  background-image: none;
  box-shadow: none;
  border-bottom: none;
}

/* Neutralise the theme's inner wrappers so the pill controls its own
   width — this also stops the stepped .container widths above from
   applying inside the header. */
#header .container,
#header #site-header-inner {
  max-width: none;
  width: auto;
  padding: 0;
  margin: 0;
}

/* OceanWP underlines every anchor on hover at 0,1,1 specificity. */
#header a {
  text-decoration: none;
}

/* ── Top bar ──────────────────────────────────────────────────── */

#header .oi-topbar {
  width: 100%;
  background: var(--oi-color-dark);
  color: var(--oi-color-white);
  height: var(--oi-topbar-height);
  position: relative;
  z-index: 600;
}

#header .oi-topbar-inner {
  max-width: var(--oi-header-max);
  margin: 0 auto;
  height: 100%;
  padding-inline: var(--oi-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

#header .oi-topbar-contact {
  font-size: 13px;
  white-space: nowrap;
}

#header .oi-topbar-links {
  display: flex;
  align-items: center;
  gap: 8px;
}

#header .oi-topbar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  margin-right: 8px;
}

#header .oi-topbar .oi-icon-btn {
  color: var(--oi-color-white);
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

/* Single-locale site. Hidden, not deleted — the plugin still emits it. */
#header .oi-topbar-locale,
#header .oi-mnav-locale {
  display: none;
}

/* ── Header pill ──────────────────────────────────────────────── */

#header .oi-header-inner {
  position: relative;
  z-index: 500;
  margin-top: var(--oi-header-gap);
  background: transparent;
  /* box-shadow on the inner pill, not filter: drop-shadow here.
     drop-shadow only existed to fuse the pill with an open mega panel;
     with no panel it buys nothing and creates a containing block for
     fixed descendants — a latent trap for .oi-mnav. */
}

#header .oi-header-inner.oi-is-stuck {
  position: fixed;
  top: var(--oi-header-gap);
  left: 0;
  right: 0;
  margin-top: 0; /* the gap is now provided by `top` */
}

#header .oi-header-spacer {
  height: 0;
}

#header .oi-header-inner {
  position: relative;
  max-width: var(--oi-header-max);
  margin: 0 auto;
  height: var(--oi-header-height);
  padding-inline: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--oi-color-white);
  border-radius: calc(var(--oi-header-height) / 2);
  box-shadow: var(--oi-shadow-pill);
}

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

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

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

#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;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: var(--oi-nav-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}

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

#header .oi-nav-link {
  font-size: var(--oi-nav-size);
  font-weight: 500;
  line-height: var(--oi-line-height-base);
  white-space: nowrap; /* a wrap would break the pill's fixed height */
  color: var(--oi-color-dark);
  display: inline-flex;
  align-items: center;
  background-color: transparent;
  transition: color var(--oi-header-fast);
}

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

/* Current-section state. With no dropdowns this is the only wayfinding
   signal in the bar, so it carries weight as well as colour — colour
   alone would fail SC 1.4.1 Use of Color. */
#header .oi-nav-item.oi-is-current .oi-nav-link,
#header .oi-nav-link[aria-current='page'] {
  color: var(--oi-color-primary);
  font-weight: 700;
}

/* ── Header actions — CTA, search, hamburger ──────────────────── */

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

/* .oi-btn covers the `oi-btn oi-btn-primary-base` markup the header
   emits; .oi-btn-cta covers the off-canvas footer button. */
#header .oi-header-actions .oi-btn,
#header .oi-btn-cta {
  background: var(--oi-btn-cta);
  border: 1px solid var(--oi-btn-cta-border);
  color: var(--oi-color-white);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  height: 41px;
  transition: background var(--oi-header-fast), border-color var(--oi-header-fast);
  text-decoration: none;
}

#header .oi-header-actions .oi-btn:hover,
#header .oi-btn-cta:hover {
  background: var(--oi-btn-cta-hover);
  border-color: var(--oi-btn-cta-hover);
  color: var(--oi-color-white);
  text-decoration: none;
}

#header .oi-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--oi-color-dark);
  /* SC 2.5.8 Target Size — 24x24 minimum. */
  min-width: 24px;
  min-height: 24px;
}

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

#header .oi-header-toggle {
  display: none;
  color: var(--oi-color-primary);
  background: none;
  border: none;
  cursor: pointer;
}

#header .oi-header-actions-search {
  display: none; /* shown only below the desktop-nav breakpoint */
  background-color: transparent;
}

/* 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), visibility var(--oi-header-med);
}

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

#header .oi-mnav {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 100%);
  background: var(--oi-color-white);
  z-index: 900;
  transform: translateX(100%);
  transition: transform var(--oi-header-med);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

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

/* Kept so markup carrying a .oi-mnav-panel wrapper still scrolls; the
   tier-2 slide is gone, so it never transforms. */
#header .oi-mnav-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  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-color-grey25);
}

#header .oi-mnav-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

#header .oi-close-btn {
  color: var(--oi-color-primary);
  display: flex;
  background: none;
  border: none;
  cursor: pointer;
  /* SC 2.5.8 Target Size — 24x24 minimum. */
  min-width: 24px;
  min-height: 24px;
}

#header .oi-mnav-list {
  padding: 8px 20px;
  list-style: none;
  margin: 0;
}

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

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

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

#header .oi-mnav-footer {
  margin-top: 25px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

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

/* ── Header media queries ─────────────────────────────────────────
   1280 is the desktop-nav cutoff — raised from 1200 because seven
   labels no longer fit below it. It has no matching $bp-* var and it
   MUST stay in sync with DESKTOP_BP in oi-frontend.js — if they drift,
   the nav and the hamburger both show across the gap. ------------- */

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

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

  /* The off-canvas footer carries its own CTA, so hiding this one
     avoids showing it twice. */
  #header .oi-header-actions .oi-btn,
  #header .oi-header-actions .oi-btn-cta { display: none; }
  #header .oi-header-actions-search { display: inline-flex; }
  #header .oi-topbar { display: none; }
}

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

/* $bp-xs-max */
@media (max-width: 767.98px) {
  #header .oi-header-logo img { height: 40px; }
  #header .oi-btn-cta { padding: 10px 16px; font-size: 14px; }
  #header .oi-topbar-inner { gap: 16px; }
  #header .oi-mnav { width: 100%; }
  #header .oi-header.oi-is-stuck { padding-inline: 20px; }
}


/* =================================================================
   7. BUTTONS

   Two systems live here.

   .oi-btn / .oi-btn-cta / .wp-block-button__link — arrow nudge only.
     This block was previously written in SCSS nesting syntax inside a
     plain .css file. Flattened. Do not re-nest.

   .btn-v3 — the legacy V3 button classes the hero markup emits
     (btn-v3, btn-ol-blue, btn-white-outline, btn-block-xs). The base
     rule existed under #hero only and set no colour; the variants had
     no rule at all. Both are defined here, unscoped, so V3 buttons
     work anywhere on the site rather than only inside the hero.

   Selectors are doubled (.btn-v3.btn-v3 = 0,2,0) to outrank OceanWP's
   anchor styling without !important. Do not simplify to one class.
   ================================================================= */

/* ── Arrow nudge on the .oi-btn family ────────────────────────── */

/* :is() keeps this at four selectors instead of eighteen. Specificity is
   the highest of its arguments — all classes — so this stays at 0,1,0,
   identical to what the old nested block resolved to. */

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

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

/* ── .btn-v3 base ─────────────────────────────────────────────── */

.btn-v3.btn-v3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-v3-gap);
  padding: var(--btn-v3-pad-y) var(--btn-v3-pad-x);
  border: var(--btn-v3-border-width) solid var(--btn-v3-border, transparent);
  border-radius: var(--btn-v3-radius);
  background-color: var(--btn-v3-bg, transparent);
  color: var(--btn-v3-fg, inherit);
  font-size: var(--btn-v3-font-size);
  font-weight: var(--btn-v3-font-weight);
  line-height: var(--oi-line-height-base);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--btn-v3-transition),
    color var(--btn-v3-transition),
    border-color var(--btn-v3-transition);
}

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

/* OceanWP sets :focus { outline: none } with no replacement — SC 2.4.11.
   --btn-v3-focus-ring is set per surface (see the hero override). */
.btn-v3.btn-v3:focus-visible {
  outline: 3px solid var(--btn-v3-focus-ring, var(--oi-focus-ring));
  outline-offset: 3px;
}

/* Trailing arrow. currentColor means it tracks --btn-v3-fg for free. */
.btn-v3.btn-v3::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask-image: var(--oi-mask-arrow);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--oi-mask-arrow);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: transform var(--oi-header-fast);
}

.btn-v3.btn-v3:hover::after,
.btn-v3.btn-v3:focus-visible::after {
  transform: translateX(4px);
}

/* ── .btn-v3 variants — token overrides only, no rule duplication ── */

.btn-v3.btn-ol-blue {
  --btn-v3-bg: var(--oi-color-ol-blue);
  --btn-v3-bg-hover: var(--oi-color-primary-dark);
  --btn-v3-fg: var(--oi-color-white);
  --btn-v3-fg-hover: var(--oi-color-white);
  --btn-v3-border: var(--oi-color-ol-blue);
  --btn-v3-border-hover: var(--oi-color-primary-dark);
}

/* NOTE — behaviour change. The old rule set hover to `background: none;
   color: white`, i.e. identical to rest state, so the button had no
   hover affordance at all. This fills on hover. Revert the two -hover
   tokens to their rest values if the flat behaviour was intentional. */
.btn-v3.btn-white-outline {
  --btn-v3-bg: transparent;
  --btn-v3-bg-hover: var(--oi-color-white);
  --btn-v3-fg: var(--oi-color-white);
  --btn-v3-fg-hover: var(--oi-color-dark);
  --btn-v3-border: var(--oi-color-white);
  --btn-v3-border-hover: var(--oi-color-white);
}

/* ── .btn-v3 modifiers ────────────────────────────────────────── */

@media (max-width: 767.98px) {
  .btn-v3.btn-block-xs {
    display: flex;
    width: 100%;
    margin: 0 0 20px;
  }
}

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

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

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


/* =================================================================
   8. HERO — #hero.oi-custom-block.oi-ovrw

   Layout and decoration only. Button colour lives in section 7; the
   hero just supplies the light focus ring for its dark background.
   ================================================================= */

/* ── Full-bleed shell ───────────────────────────────────────────── */

#hero.oi-ovrw {
  position: relative;

  /* Edge to edge, deliberately. calc self-corrects: if the parent is
     already full width the margin resolves to ~0 and nothing moves.

     100vw includes the scrollbar, so this overruns the document by the
     scrollbar width. That overrun is absorbed by `html { overflow-x:
     clip }` in section 4 — the two rules are a pair. Do not "fix" this
     by swapping 100vw for 100%; that gives up the bleed. */
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);

  /* clip, NOT hidden. hidden creates a scroll container and kills
     position:sticky in descendants. clip on one axis also leaves the
     vertical axis visible, so the -60px arc is not cut off. */
  overflow-x: clip;

  background-color: var(--oi-color-dark);
  /* mirrors bg-preset-ps-neutral-black-900 so the block works with or
     without that class */
  --block-color: var(--oi-color-white);

  /* dark surface — the default dark focus ring would be invisible here */
  --btn-v3-focus-ring: var(--oi-focus-ring-light);

  padding-block: 50px;
}

/* keeps .container above the decorative layer */
#hero.oi-ovrw > * {
  position: relative;
  z-index: 1;
}

/* content stays capped while the background runs to the edge */
#hero.oi-ovrw > .container {
  width: 100%;
  max-width: var(--oi-container-max);
  margin-inline: auto;
  padding-inline: 15px;
  box-sizing: border-box;
}

/* gradient shape, bottom right */
#hero.oi-ovrw::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(
    135deg,
    var(--oi-color-gradient-start) 0%,
    var(--oi-color-gradient-end) 100%
  );
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: min(45vw, 771px) auto;
  -webkit-mask-image: var(--oi-mask-hero-shape);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: right bottom;
  -webkit-mask-size: min(45vw, 771px) auto;
  mask-image: var(--oi-mask-hero-shape);
  mask-repeat: no-repeat;
  mask-position: right bottom;
  mask-size: min(45vw, 771px) auto;
}

/* ── Grid ───────────────────────────────────────────────────────
   Redundant if oi-custom-block.css is loaded — delete this block
   then. Without it the flex sizing below is dead and the columns
   fall back to float 50/50. ------------------------------------- */

#hero.oi-ovrw .row.zz-vertical-center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-inline: -15px;
}

#hero.oi-ovrw .col-xs-12 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-inline: 15px;
  box-sizing: border-box;
}

/* ── Text column ────────────────────────────────────────────────── */

#hero.oi-ovrw .oi-ovrw-text {
  max-width: 640px;
  z-index: 2;
}

#hero.oi-ovrw .oi-ovrw-content {
  position: relative;
  /* room for the arc, offset -60px */
  padding-top: 35px;
}

#hero.oi-ovrw .oi-ovrw-content > * {
  position: relative;
  z-index: 1;
}

#hero.oi-ovrw h1 {
  color: var(--block-color, var(--oi-color-white));
  font-size: 80px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

/* on h1, not on .oi-ovrw-content */
#hero.oi-ovrw .oi-ovrw-content h1::before {
  content: "";
  position: absolute;
  top: -60px;
  left: -60px;
  z-index: 0;
  width: 85px;
  height: 86px;
  background: var(--oi-color-purple);
  pointer-events: none;
  -webkit-mask-image: var(--oi-mask-arc);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--oi-mask-arc);
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 100% 100%;
}

#hero.oi-ovrw .oi-ovrw-desc {
  margin-block: 0;
  color: var(--block-color, var(--oi-color-white));
  font-size: 18px;
  line-height: 1.5;
}

#hero.oi-ovrw .oi-ovrw-desc p {
  margin-bottom: 0;
  color: inherit;
}

/* ── Media column ───────────────────────────────────────────────── */

#hero.oi-ovrw .oi-ovrw-media {
  margin-top: 0;
  padding-left: 0;
}

/* Consolidated from four blocks. Base covers < 992px; the two
   min-width queries below override only what differs. */
#hero.oi-ovrw .oi-ovrw-media-wrap {
  position: relative;
  box-sizing: content-box;
  width: 941px;
  max-width: 100%;
  margin-inline: auto;
}

#hero.oi-ovrw .oi-ovrw-img {
  display: block;
  border: 0;
  vertical-align: middle;
  object-fit: contain;
  pointer-events: none;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* ── Hero CTAs — spacing only; colour comes from section 7 ──────── */

#hero.oi-ovrw .cta-v3 {
  margin-top: 36px;
  margin-bottom: -20px;
}

/* ── >= 992px ───────────────────────────────────────────────────── */

@media (min-width: 992px) {
  #hero.oi-ovrw .oi-ovrw-text {
    flex: 0 0 55%;
    width: 55%;
    max-width: 55%;
    padding-right: 55px;
  }

  #hero.oi-ovrw .oi-ovrw-media {
    flex: 0 0 45%;
    width: 45%;
    max-width: 45%;
    padding-left: 0;
  }

  /* intentional bleed: 941px in a ~527px column, clipped right */
  #hero.oi-ovrw .oi-ovrw-media-wrap {
    max-width: 100%;
    margin: 0;
  }
}

/* ── >= 1500px — contain the bleed, drop the shape ──────────────── */

@media (min-width: 1500px) {
  #hero.oi-ovrw::after {
    display: none;
  }

  #hero.oi-ovrw .oi-ovrw-media-wrap {
    max-width: 100%;
    margin-left: auto;
    margin-right: 0;
  }
}

/* ── <= 1279.98px — type only ───────────────────────────────────── */

@media (max-width: 1279.98px) {
  #hero.oi-ovrw h1 {
    font-size: 56px;
    line-height: 1.15;
  }
}

/* ── <= 991.98px — layout only ──────────────────────────────────── */

@media (max-width: 991.98px) {
  #hero.oi-ovrw {
    min-height: 0;
  }

  #hero.oi-ovrw::after {
    display: none;
  }

  #hero.oi-ovrw .oi-ovrw-text {
    max-width: 100%;
    padding-right: 15px;
  }

  #hero.oi-ovrw .oi-ovrw-media {
    padding-inline: 15px;
  }

  #hero.oi-ovrw .cta-v3 {
    justify-content: center;
  }
}

/* ── <= 767.98px ────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  #hero.oi-ovrw h1 {
    font-size: 36px;
  }

  #hero.oi-ovrw .oi-ovrw-content {
    padding-top: 0;
  }

  #hero.oi-ovrw .oi-ovrw-content h1::before {
    display: none;
  }

  #hero.oi-ovrw .oi-ovrw-desc {
    font-size: 18px;
    line-height: 1.44;
  }
}


/* =================================================================
   9. CARD GRID
   ================================================================= */

.container-grid {
  margin-block: var(--oi-section-padding);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 991.98px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .grid { grid-template-columns: 1fr; }
}

.card {
  display: block;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--oi-radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--oi-color-white);
  box-shadow: var(--oi-shadow-card);
  transition: border-color 150ms ease;
}

/* Replaces the old `text-decoration: none !important` on four selectors.
   Raising specificity to 0,2,0 beats OceanWP's anchor underline without
   the suppression. */
.card.card,
.card.card:is(:hover, :focus, :visited) {
  text-decoration: none;
}

.card:hover {
  border-color: rgb(4 160 207 / 90%); /* --oi-color-secondary at 90% */
}

.card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--oi-color-grey5);
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hover-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--oi-color-white);
  box-shadow: var(--oi-shadow-float);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}

/* :focus-within added — the reveal was mouse-only, so keyboard users
   never saw the affordance. */
.card:hover .hover-btn,
.card:focus-within .hover-btn {
  opacity: 1;
}

.card-body {
  padding: 20px 20px 24px;
}

.card-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--oi-color-ink-900);
  margin: 0 0 8px;
}

.card-body p {
  font-size: 15px;
  line-height: 1.5;
  color: var(--oi-color-grey55);
  margin: 0;
}

/* Card links are block-level surfaces, not inline body links. The
   entry-content rule sets text-decoration on the <a>, and that
   decoration propagates into the h3/p — it cannot be cancelled from
   the children, only from the anchor itself.
   #main is OceanWP's wrapper ID: 1,2,1 outspecifies the 0,6,1 rule. */
#main .entry a.card,
#main .entry-content a.card,
#main .entry a.card:hover,
#main .entry-content a.card:hover,
#main .entry a.card:focus,
#main .entry-content a.card:focus {
  text-decoration: none;
}

/* Underline was the only non-colour affordance on these; the card has
   its own hover treatment, but keep a visible focus ring (SC 2.4.11). */
#main .entry a.card:focus-visible,
#main .entry-content a.card:focus-visible {
  outline: 2px solid var(--oi-focus-ring, currentColor);
  outline-offset: 3px;
  border-radius: 8px; /* match the card radius */
}


/* =================================================================
   10. FOOTER
   ================================================================= */

.owp_site-footer {
  position: relative;
  background: var(--oi-footer-bg);
  color: var(--oi-text-light);
}

/* Path was absolute and pointed at oceanwp-child-theme-master, a
   different theme. Now relative to this theme's /assets/css/.
   CONFIRM footer-left-bottom.png was copied into /assets/img/. */
.owp_site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../img/footer-left-bottom.png');
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 10% auto;
  pointer-events: none;
  z-index: 0;
}

.owp_site-footer-inner {
  position: relative;
  z-index: 1;
  max-width: var(--oi-container-max);
  margin: 0 auto;
  padding: 56px 20px 32px;
}

/* --- Top row: logo + social icons --- */

.owp_footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.owp_footer-logo {
  font-size: 28px;
  font-weight: 700;
  color: var(--oi-text-light);
  letter-spacing: -0.018em;
}

.owp_footer-logo .f-logo {
  display: block;
  width: 220px;
  height: auto; /* attrs above reserve the ratio, so no CLS */
}

.owp_footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* was var(--oi-bg-white) — a token that is never declared, so the
   background resolved to nothing against the dark footer. */
.owp_social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--oi-color-white);
  color: var(--oi-color-dark);
  font-size: 15px;
  transition: background 160ms ease, transform 160ms ease;
}

.owp_social-link:hover {
  background: var(--oi-color-primary);
  color: var(--oi-text-light);
  transform: translateY(-2px);
}

/* --- Language row --- */

.owp_footer-lang {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  font-size: 14px;
  color: var(--oi-text-light);
}

.owp_footer-lang .fa-globe {
  font-size: 16px;
}

/* --- Link columns --- */

/* CONFIRM — 125px x 3 gaps leaves ~199px per column at 1170px max.
   Likely too tight for the longest labels; kept as-is pending design. */
.owp_footer-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 125px;
  margin-top: 48px;
}

.owp_footer-col-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--oi-text-light);
  margin: 0 0 18px;
}

/* was #footer .owp_footer-columns .owp_footer-col .owp_footer-col-list
   (1 ID + 3 classes) for a single margin. Nothing competes with it. */
.owp_footer-col-list {
  margin: 15px 0 5px;
}

.owp_footer-col-list li {
  list-style: none;
}

.owp_footer-col-list a {
  font-size: 16px;
  line-height: 1.2;
  color: var(--oi-text-light);
  transition: color 160ms ease;
}

/* Colour is unchanged on hover — --oi-text-light is already the rest
   colour — so the underline is the only cue. Intentional or not,
   flagged: SC 1.4.1 is satisfied by the underline alone. */
.owp_footer-col-list a:hover {
  text-decoration: underline;
}

/* --- Bottom legal bar --- */

.owp_footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--oi-color-grey60);
}

.owp_footer-copyright {
  font-size: 16px;
  color: var(--oi-text-light);
}

.owp_footer-legal {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.owp_footer-legal a {
  font-size: 16px;
  color: var(--oi-text-light);
  text-decoration: underline;
}

.owp_footer-legal-divider {
  color: var(--oi-color-grey60);
  font-size: 14px;
}

/* Dark surface — the default dark focus ring is invisible here.
   SC 2.4.11 Focus Appearance. */
.owp_site-footer a:focus-visible,
.owp_site-footer button:focus-visible {
  outline: 2px solid var(--oi-focus-ring-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Footer responsive: stack columns on tablet + mobile --- */

@media (max-width: 991.98px) {
  .owp_site-footer-inner {
    padding: 48px 24px 28px;
  }

  .owp_footer-columns {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 40px;
  }

  .owp_footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 767.98px) {
  .owp_site-footer-inner {
    padding: 40px 16px 24px;
  }

  .owp_footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .owp_footer-logo {
    font-size: 24px;
  }

  .owp_footer-lang {
    margin-top: 24px;
  }

  .owp_footer-columns {
    margin-top: 32px;
    gap: 28px;
  }

  .owp_footer-bottom {
    margin-top: 36px;
  }

  .owp_footer-legal {
    gap: 6px;
  }

  .owp_footer-legal a,
  .owp_footer-legal-divider {
    font-size: 13px;
  }
}


/* =================================================================
   11. REDUCED MOTION

   Global sweep. The per-component reduced-motion block that used to
   sit next to the .oi-btn arrow rules was fully covered by this and
   has been removed.
   ================================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}