/* ==========================================================================
   HIPAA Auditors — V4 site chrome (utility bar, header, mobile nav, footer,
   mobile sticky CTA). Loaded on every marketing page.

   Every class and custom property is prefixed `v4-` because inner pages still
   load the V3 stylesheets, which own generic names like .btn, .container and
   --gold-500. Resets are scoped to `.v4-chrome` for the same reason: global
   element rules here would leak into V3 page bodies.
   ========================================================================== */

:root {
    --v4-ink-950: #061325;
    --v4-ink-900: #0A1E3C;
    --v4-ink-800: #102B52;
    --v4-ink-700: #183A6B;

    --v4-teal-800: #115E59;
    --v4-teal-700: #0F766E;
    --v4-teal-600: #0D9488;
    --v4-teal-300: #5EEAD4;
    --v4-teal-100: #CCFBF1;
    --v4-teal-50:  #F0FDFA;

    --v4-gold-600: #B7790B;
    --v4-gold-500: #F2B33D;
    --v4-gold-400: #F7C766;
    --v4-gold-50:  #FFF8E8;

    --v4-text:   #0A1E3C;
    --v4-text-2: #3E4C63;
    --v4-text-3: #5B6880;
    --v4-tint:   #F4F6FA;
    --v4-line:   #E3E8F0;
    --v4-line-2: #CBD3E0;
    --v4-slate-100: #EEF2F7;
    --v4-slate-400: #8A96AA;

    --v4-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --v4-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --v4-r-sm: 10px;
    --v4-r: 14px;
    --v4-r-lg: 20px;
    --v4-r-xl: 28px;

    --v4-shadow-sm: 0 1px 2px rgba(10, 30, 60, .06), 0 1px 3px rgba(10, 30, 60, .05);
    --v4-shadow: 0 6px 20px -6px rgba(10, 30, 60, .14), 0 2px 6px rgba(10, 30, 60, .05);
    --v4-shadow-lg: 0 30px 60px -20px rgba(6, 19, 37, .45), 0 12px 24px -12px rgba(6, 19, 37, .25);

    --v4-ease: cubic-bezier(.22, .8, .24, 1);
    --v4-gutter: clamp(16px, 4vw, 32px);
    --v4-header-h: 72px;
    --v4-focus: var(--v4-teal-600);
}

html { scroll-padding-top: calc(var(--v4-header-h) + 16px); }

/* ─── Scoped reset ─────────────────────────────────────────────────────── */

.v4-chrome, .v4-chrome *, .v4-chrome *::before, .v4-chrome *::after { box-sizing: border-box; }
.v4-chrome { font-family: var(--v4-font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.v4-chrome h2, .v4-chrome h3, .v4-chrome p, .v4-chrome ul, .v4-chrome li { margin: 0; padding: 0; }
.v4-chrome ul { list-style: none; }
.v4-chrome a { color: inherit; text-decoration: none; }
.v4-chrome a:hover { color: inherit; }
.v4-chrome button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.v4-chrome img, .v4-chrome svg { display: block; max-width: 100%; }
.v4-chrome :focus-visible { outline: 3px solid var(--v4-focus); outline-offset: 2px; border-radius: 6px; }
/* V3's global `strong` colour (slate-900) would otherwise darken chrome text. */
.v4-chrome strong { color: inherit; font-weight: 700; }

.v4-ico {
    width: 1.15em; height: 1.15em; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round;
}

.v4-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.v4-wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--v4-gutter); }

.v4-skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 1000;
    background: var(--v4-gold-500); color: var(--v4-ink-900);
    padding: 10px 16px; border-radius: var(--v4-r-sm);
    font: 700 1rem/1.2 var(--v4-font-sans); text-decoration: none;
    transition: top .2s var(--v4-ease);
}
.v4-skip-link:focus { top: 12px; color: var(--v4-ink-900); }

/* ─── Buttons (chrome only) ────────────────────────────────────────────── */

.v4-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 44px; padding: 10px 20px;
    border-radius: 12px; border: 1.5px solid transparent;
    font-weight: 700; font-size: .9375rem; line-height: 1.2; white-space: nowrap;
    touch-action: manipulation;
    transition: background-color .2s var(--v4-ease), color .2s var(--v4-ease), border-color .2s var(--v4-ease), transform .2s var(--v4-ease);
}
.v4-btn:active { transform: scale(.98); }
.v4-chrome a.v4-btn-gold, .v4-chrome a.v4-btn-gold:hover { color: var(--v4-ink-900); }
.v4-btn-gold { background: var(--v4-gold-500); box-shadow: 0 6px 18px -8px rgba(242, 179, 61, .8); }
.v4-btn-gold:hover { background: var(--v4-gold-400); }
.v4-chrome a.v4-btn-ghost { color: var(--v4-text); }
.v4-btn-ghost:hover { background: var(--v4-tint); }
.v4-chrome a.v4-btn-outline { color: var(--v4-text); }
.v4-btn-outline { border-color: var(--v4-line-2); background: #fff; }
.v4-btn-outline:hover { border-color: var(--v4-ink-900); }
.v4-btn-block { width: 100%; }

/* ─── Utility bar ──────────────────────────────────────────────────────── */

.v4-utility { background: var(--v4-ink-950); color: #fff; font-size: .8125rem; --v4-focus: var(--v4-gold-400); }
.v4-utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.v4-utility-proof { display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; color: #fff; }
.v4-stars { display: inline-flex; gap: 2px; color: var(--v4-gold-500); }
.v4-stars svg { width: 13px; height: 13px; }
.v4-utility-muted { color: rgba(255, 255, 255, .66); }
.v4-utility-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .2); margin-inline: 6px; }
.v4-utility-links { display: flex; align-items: center; gap: 4px 20px; }
.v4-chrome .v4-utility-links a { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .8); min-height: 40px; }
.v4-chrome .v4-utility-links a:hover { color: #fff; }

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

.v4-header {
    position: sticky; top: 0; z-index: 900;
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--v4-line);
    transition: box-shadow .25s var(--v4-ease);
}
.v4-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(10, 30, 60, .35); }
.v4-header-inner { display: flex; align-items: center; gap: 24px; height: var(--v4-header-h); }

.v4-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.v4-brand img { width: 44px; height: 44px; }
.v4-brand-name { font-family: var(--v4-font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--v4-text); line-height: 1; }
.v4-brand-name span { color: var(--v4-teal-700); }
.v4-brand-light .v4-brand-name { color: #fff; }
.v4-brand-light .v4-brand-name span { color: var(--v4-teal-300); }

.v4-nav { margin-left: 12px; }
.v4-nav > ul { display: flex; align-items: center; gap: 2px; }
.v4-nav > ul > li { position: relative; }
.v4-chrome .v4-nav > ul > li > a, .v4-chrome .v4-nav-trigger {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 10px 14px; min-height: 44px; border-radius: 10px;
    font-weight: 600; font-size: .9375rem; color: var(--v4-text);
    transition: background-color .2s var(--v4-ease);
}
.v4-chrome .v4-nav > ul > li > a:hover, .v4-nav-trigger:hover, .v4-has-menu.is-open .v4-nav-trigger { background: var(--v4-tint); color: var(--v4-text); }
.v4-chrome .v4-nav [aria-current="page"], .v4-has-menu.is-current .v4-nav-trigger { color: var(--v4-teal-700); box-shadow: inset 0 -2px 0 var(--v4-teal-600); border-radius: 10px 10px 0 0; }
.v4-nav-trigger .v4-ico { width: 16px; height: 16px; transition: transform .2s var(--v4-ease); }
.v4-has-menu.is-open .v4-nav-trigger .v4-ico { transform: rotate(180deg); }

.v4-menu {
    position: absolute; top: calc(100% + 8px); left: -12px; z-index: 10;
    width: 540px; padding: 12px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    background: #fff; border: 1px solid var(--v4-line); border-radius: var(--v4-r-lg);
    box-shadow: var(--v4-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--v4-ease), transform .18s var(--v4-ease), visibility 0s linear .18s;
}
.v4-has-menu.is-open .v4-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.v4-chrome .v4-menu a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; transition: background-color .15s var(--v4-ease); }
.v4-chrome .v4-menu a:hover { background: var(--v4-tint); }
.v4-menu strong { color: var(--v4-text); font-size: .9375rem; font-weight: 700; }
.v4-menu span { color: var(--v4-text-3); font-size: .8125rem; }
.v4-chrome .v4-menu .v4-menu-feature { grid-column: 1 / -1; background: var(--v4-teal-50); }
.v4-chrome .v4-menu .v4-menu-feature:hover { background: var(--v4-teal-100); }
.v4-menu .v4-menu-feature span { color: var(--v4-teal-700); font-weight: 600; }

.v4-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.v4-menu-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; color: var(--v4-text); }
.v4-chrome .v4-menu-toggle { display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center; }
.v4-menu-toggle:hover { background: var(--v4-tint); }
.v4-menu-toggle .v4-ico { width: 24px; height: 24px; }
.v4-menu-toggle .v4-ico-close, .v4-menu-toggle[aria-expanded="true"] .v4-ico-open { display: none; }
.v4-menu-toggle[aria-expanded="true"] .v4-ico-close { display: block; }

.v4-mobile-nav {
    position: fixed; inset: var(--v4-mobile-nav-top, 112px) 0 0 0; z-index: 899;
    background: #fff; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--v4-gutter) calc(24px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--v4-line);
}
.v4-mobile-nav[hidden] { display: none; }
.v4-chrome .v4-mobile-nav nav a { display: flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--v4-text); border-bottom: 1px solid var(--v4-slate-100); }
.v4-chrome .v4-mobile-nav nav a[aria-current="page"] { color: var(--v4-teal-700); }
.v4-mobile-label { margin-top: 20px !important; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--v4-text-3); }
.v4-mobile-cta { display: grid; gap: 10px; margin-top: 24px; }
html.v4-nav-open { overflow: hidden; }

/* ─── Footer ───────────────────────────────────────────────────────────── */

.v4-footer { background: var(--v4-ink-950); color: rgba(255, 255, 255, .66); padding-top: 72px; font-size: .9375rem; --v4-focus: var(--v4-gold-400); }
.v4-footer-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
    padding: 28px 32px; margin-bottom: 56px; border-radius: var(--v4-r-xl);
    background: radial-gradient(500px 200px at 0% 0%, rgba(13, 148, 136, .3), transparent 70%), var(--v4-ink-900);
    border: 1px solid rgba(255, 255, 255, .1);
}
.v4-footer-cta h2 { font-family: var(--v4-font-display); font-weight: 600; font-size: clamp(1.4rem, 1.2vw + 1rem, 1.9rem); color: #fff; line-height: 1.15; letter-spacing: -0.01em; }
.v4-footer-cta h2 em { color: var(--v4-gold-400); font-style: italic; font-weight: 500; }
.v4-footer-cta p { margin-top: 6px; color: rgba(255, 255, 255, .7); }
.v4-footer-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.v4-chrome a.v4-btn-outline-light { border-color: rgba(255, 255, 255, .32); color: #fff; }
.v4-chrome a.v4-btn-outline-light:hover { border-color: #fff; background: rgba(255, 255, 255, .06); color: #fff; }

.v4-footer-top { display: grid; grid-template-columns: 1fr 2fr; gap: 48px 64px; padding-bottom: 48px; }
.v4-footer-brand > p { margin-top: 16px; max-width: 40ch; color: rgba(255, 255, 255, .66); }
.v4-footer-contact { display: grid; gap: 8px; margin-top: 20px !important; }
.v4-chrome .v4-footer-contact a, .v4-footer-contact span { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; }
.v4-chrome .v4-footer-contact a:hover { color: #fff; }
.v4-footer-contact .v4-ico { color: var(--v4-teal-300); }
.v4-chrome a.v4-social { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-top: 16px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); color: #fff; transition: background-color .2s var(--v4-ease); }
.v4-chrome a.v4-social:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.v4-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.v4-footer h3 { font-family: var(--v4-font-sans); font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 14px; line-height: 1.4; }
.v4-footer-cols ul { display: grid; gap: 4px; }
.v4-chrome .v4-footer-cols a { display: inline-flex; min-height: 32px; align-items: center; transition: color .2s var(--v4-ease); }
.v4-chrome .v4-footer-cols a:hover { color: #fff; }
.v4-footer-courses { padding-block: 28px; border-top: 1px solid rgba(255, 255, 255, .1); }
.v4-footer-courses ul { display: flex; flex-wrap: wrap; gap: 4px 0; }
.v4-footer-courses li { font-size: .8438rem; }
.v4-footer-courses li:not(:last-child)::after { content: "·"; margin-inline: 10px; color: rgba(255, 255, 255, .3); }
.v4-chrome .v4-footer-courses a { display: inline-flex; align-items: center; min-height: 32px; }
.v4-chrome .v4-footer-courses a:hover { color: #fff; }
.v4-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-block: 12px 24px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .8438rem; }
.v4-footer-bottom ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.v4-chrome .v4-footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
.v4-chrome .v4-footer-bottom a:hover { color: #fff; }

/* ─── Mobile sticky CTA ────────────────────────────────────────────────── */

.v4-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 800;
    padding: 12px var(--v4-gutter) calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97); border-top: 1px solid var(--v4-line);
    box-shadow: 0 -10px 30px -12px rgba(10, 30, 60, .25);
    transform: translateY(110%); transition: transform .3s var(--v4-ease);
    display: none;
}
.v4-sticky-cta.is-shown { transform: none; }
/* Keep the WhatsApp bubble clear of the sticky bar while it is showing. */
/* The widget's own mobile rule sets `bottom: 15px !important`, hence !important. */
body.v4-sticky-visible .whatsapp-widget.whatsapp-bottom-right,
body.v4-sticky-visible .whatsapp-widget.whatsapp-bottom-left { bottom: 88px !important; transition: bottom .3s var(--v4-ease); }

/* ─── Cookie consent banner (includes/cookie-consent.php) ──────────────────
   Its own CSS reads variables no stylesheet defines (--border-primary,
   --text-primary…) and its buttons use V3 .btn classes the V4 homepage
   doesn't load. `body` raises specificity over its in-body <style>. */
body .cookie-consent-banner {
    padding: 16px var(--v4-gutter) calc(16px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--v4-line);
    box-shadow: 0 -10px 30px -12px rgba(10, 30, 60, .25);
    font-family: var(--v4-font-sans);
}
body .cookie-consent-content { max-width: 1240px; gap: 20px; }
body .cookie-consent-title { margin: 0 0 4px; font: 700 1rem/1.35 var(--v4-font-sans); color: var(--v4-text); letter-spacing: 0; }
body .cookie-consent-description { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--v4-text-2); }
body .cookie-consent-link { color: var(--v4-teal-700); font-weight: 600; }
body .cookie-consent-actions { gap: 10px; }
body .cookie-consent-actions .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 20px; border-radius: 12px; border: 1.5px solid transparent;
    font: 700 .9375rem/1.2 var(--v4-font-sans); cursor: pointer; box-shadow: none; transform: none;
}
body .cookie-consent-actions .btn-primary { background: var(--v4-gold-500); color: var(--v4-ink-900); }
body .cookie-consent-actions .btn-primary:hover { background: var(--v4-gold-400); }
body .cookie-consent-actions .btn-outline { background: #fff; color: var(--v4-text); border-color: var(--v4-line-2); }
body .cookie-consent-actions .btn-outline:hover { border-color: var(--v4-ink-900); background: #fff; color: var(--v4-text); }
body .cookie-consent-actions .btn:focus-visible { outline: 3px solid var(--v4-teal-600); outline-offset: 2px; }
@media (max-width: 768px) {
    body .cookie-consent-actions .btn { flex: 1; }
}

/* ─── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
    .v4-hide-md { display: none !important; }
}
@media (max-width: 1080px) {
    .v4-nav { display: none; }
    .v4-chrome .v4-menu-toggle { display: inline-flex; }
}
@media (max-width: 960px) {
    .v4-footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .v4-sticky-cta { display: block; }
    .v4-footer { padding-bottom: 76px; }
    .v4-utility-sep, .v4-hide-sm { display: none !important; }
    .v4-footer-cta { padding: 24px; }
}
@media (max-width: 640px) {
    :root { --v4-header-h: 64px; }
    .v4-brand img { width: 38px; height: 38px; }
    .v4-brand-name { font-size: 1.125rem; }
    .v4-header-actions .v4-btn-gold { display: none; }
    .v4-footer-cols { grid-template-columns: 1fr 1fr; }
    .v4-footer-cta-actions, .v4-footer-cta-actions .v4-btn { width: 100%; }
}
@media (max-width: 480px) {
    .v4-hide-xs { display: none !important; }
}
@media (max-width: 380px) {
    .v4-brand-name { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .v4-chrome *, .v4-sticky-cta { transition-duration: .01ms !important; }
}