/* FPD Webinar Hub — base shared navy/gold accent layer.
   Background surfaces (body, panels, cards, inputs, footer, navigation) are NOT
   recoloured. Only text, accent/borders, focus states and BUTTON backgrounds.
   Semantic danger/success/warning colours and third-party platform logos remain.
   Load LAST so signed-in and public pages use the same brand accents. */
body.wh-v4 {
    --wh-brand-navy: #021f2d;
    --wh-brand-gold: #f6a220;
    --wh-brand-navy-hover: #173b4b;
    --wh-brand-gold-hover: #e99814;
    /* Do not override legacy variables also used to paint page/card surfaces. */
}

/* Shared brand identity and primary page titles. */
body.wh-v4 .topbar .brand,
body.wh-v4 .topbar .brand span,
body.wh-v4 .topbar .brand span b,
body.wh-v4 :is(.section-head h1, .concept-participant-heading h1, .wh-detail-shell-copy h1,
    .wh4-section-head h2, .wh4-hero h1, .wh-premium-subheading h2,
    .wh-detail-tab-panel h2, .wh-detail-calendar-inline h2,
    .wh-public-footer h2, .wh-public-footer-brand strong),
body.wh-v4 .wh-premium-admin > .section-head h1,
body.wh-v4 .wh-premium-participant .concept-participant-heading h1,
body.wh-v4 .wh-premium-profile > .section-head h1 {
    color: var(--wh-brand-navy) !important;
}
/* Gold is the second heading colour, but not applied to small body text. */
body.wh-v4 :is(.section-head h1, .section-head h2, .concept-participant-heading h1,
    .wh-detail-shell h1, .wh-detail-shell h2, .wh4-section-head h2) .wh-title-accent,
body.wh-v4 .wh4-hero h1 em,
body.wh-v4 .brand span b {
    color: var(--wh-brand-gold) !important;
}
/* Small section headings can show the brand pairing with an accent underline;
   their text stays navy for readable contrast on white. */
body.wh-v4 .wh-detail-calendar-inline h2 .wh-title-accent,
body.wh-v4 .wh-detail-tab-panel h2 .wh-title-accent {
    text-decoration-line: underline;
    text-decoration-color: var(--wh-brand-gold);
    text-decoration-thickness: .10em;
    text-underline-offset: .15em;
}

/* Brand-coloured text and icons. Preserve subdued descriptions and semantic
   payment/registration status colour meanings. */
body.wh-v4 .topbar nav a:hover,
body.wh-v4 .topbar nav a:focus-visible,
body.wh-v4 .wh4-hero-link,
body.wh-v4 .wh4-seats,
body.wh-v4 .wh4-more-date,
body.wh-v4 .wh4-meta span,
body.wh-v4 .wh-detail-back,
body.wh-v4 .wh-detail-capacity,
body.wh-v4 .wh-detail-capacity-icon,
body.wh-v4 .wh-detail-meta-icon,
body.wh-v4 .wh-detail-meta-icon-teal,
body.wh-v4 .wh-detail-calendar-icon,
body.wh-v4 .wh-detail-overview-link,
body.wh-v4 .wh-calendar-links a,
body.wh-v4 .wh-webinar-share-links a,
body.wh-v4 .wh-public-footer a,
body.wh-v4 .wh4-hero-benefits b,
body.wh-v4 .wh4-hero-promo-eyebrow,
body.wh-v4 .wh4-webinar-content h3,
body.wh-v4 .wh-premium-stat > strong,
body.wh-v4 .wh-premium-stat-top > span:first-child,
body.wh-v4 .wh-premium-quicklink .wh-premium-link-arrow,
body.wh-v4 .hub-responsive-table-caption {
    color: var(--wh-brand-navy) !important;
}

/* Primary submit / registration / creation buttons are navy with white text. */
body.wh-v4 :is(a.btn-primary, button.btn-primary, input.btn-primary,
    .btn.solid, .topbar .navbtn.solid, .wh4-register, .wh-detail-register) {
    background: var(--wh-brand-navy) !important;
    border-color: var(--wh-brand-navy) !important;
    color: #fff !important;
}
body.wh-v4 :is(a.btn-primary, button.btn-primary, input.btn-primary,
    .btn.solid, .topbar .navbtn.solid, .wh4-register, .wh-detail-register):is(:hover, :focus-visible) {
    background: var(--wh-brand-navy-hover) !important;
    border-color: var(--wh-brand-navy-hover) !important;
    color: #fff !important;
}
/* Secondary calls to action are gold, always with dark text. Do not target
   .btn-danger or special-purpose approval/payment controls. */
body.wh-v4 :is(a.btn-secondary, button.btn-secondary, a.btn-ghost, button.btn-ghost,
    .wh-public-card-actions > .wh-public-direct-register) {
    background: var(--wh-brand-gold) !important;
    border-color: var(--wh-brand-gold) !important;
    color: var(--wh-brand-navy) !important;
}
body.wh-v4 :is(a.btn-secondary, button.btn-secondary, a.btn-ghost, button.btn-ghost,
    .wh-public-card-actions > .wh-public-direct-register):is(:hover, :focus-visible) {
    background: var(--wh-brand-gold-hover) !important;
    border-color: var(--wh-brand-gold-hover) !important;
    color: var(--wh-brand-navy) !important;
}

/* Preserve neutral surfaces; only selection text/lines change. */
body.wh-v4 .wh-detail-tabs button[aria-selected="true"],
body.wh-v4 :is(.concept-tabs .is-active, .wh4-hero-link:hover) {
    color: var(--wh-brand-navy) !important;
    border-bottom-color: var(--wh-brand-gold) !important;
}
body.wh-v4 .wh-detail-shell .wh-detail-meta-grid,
body.wh-v4 .wh4-webinar-card {
    border-top-color: var(--wh-brand-gold);
}
body.wh-v4 .wh4-webinar-card:nth-child(even) { border-top-color: var(--wh-brand-gold); }
body.wh-v4 :is(.hub-side-nav a.active, .admin-sidebar a.active,
    .hub-sidebar a.active, .hub-sidebar-link.active, [aria-current="page"]) {
    border-left-color: var(--wh-brand-gold);
}
body.wh-v4 .wh-premium-stat.wh-premium-tone-teal,
body.wh-v4 .wh-premium-stat.wh-premium-tone-navy,
body.wh-v4 .wh-premium-stat-grid .wh-premium-stat {
    border-top-color: var(--wh-brand-gold);
}
/* Accent strokes and accessible keyboard focus. No form backgrounds change. */
body.wh-v4 :is(a, button, input, select, textarea, [role="tab"]):focus-visible {
    outline: 3px solid var(--wh-brand-gold) !important;
    outline-offset: 2px;
}
body.wh-v4 :is(input, select, textarea):focus {
    border-color: var(--wh-brand-navy) !important;
}

/* Public webinar share and calendar actions: white surfaces preserved. */
body.wh-v4.wh-public-informational :is(.wh-calendar-links a, .wh-webinar-share-links a) {
    color: var(--wh-brand-navy) !important;
    border-color: var(--wh-brand-navy) !important;
}
body.wh-v4.wh-public-informational .wh-webinar-share-links a:first-child {
    background: var(--wh-brand-gold) !important;
    border-color: var(--wh-brand-gold) !important;
}
body.wh-v4.wh-public-informational :is(.wh-calendar-links a, .wh-webinar-share-links a):is(:hover, :focus-visible) {
    border-color: var(--wh-brand-gold) !important;
}

/* Fixed action placement and existing responsive behaviour are deliberately
   unaffected. Never recolour charts' meaning-specific categories or alerts. */

/* Operational panels, editor controls and analytics use the same accents.
   These selectors deliberately change only foreground colour/stroke/border. */
body.wh-v4 :is(.wh-comms-studio .wh-comms-pill,
    .wh-comms-studio .wh-comms-recipient-head h3,
    .wh-comms-studio .wh-comms-person-text strong,
    .wh-mail-dialog-icon,
    .wh-mail-dialog-counts strong,
    .wh-bi-breakdown-link,
    .wh-bi-kpi strong,
    .wh-bi-donut-label,
    .wh-staff-page .wh-staff-panel h2,
    .wh-reg360 h2,
    .wh-comms-studio h2,
    .hub-draft-notices h2,
    .wh-premium-admin .wh-bi-titleline h2) {
    color: var(--wh-brand-navy) !important;
}
body.wh-v4 :is(.wh-comms-studio .wh-comms-person input[type="checkbox"],
    .wh-comms-studio input[type="radio"],
    .wh-staff-page input[type="checkbox"],
    input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--wh-brand-navy);
}
body.wh-v4 .bi-line { stroke: var(--wh-brand-navy); }
body.wh-v4 .bi-dot { fill: var(--wh-brand-gold); }

/* Legacy public CTA selectors have high specificity and sometimes !important.
   Override only the actual button surfaces, not surrounding backgrounds. */
body.wh-v4.wh-public-informational .wh-public-card-actions > a.wh4-register.btn.btn-primary,
body.wh-v4.wh-public-informational .wh-detail-shell-actions > a.wh-detail-register.btn.btn-primary {
    background: var(--wh-brand-navy) !important;
    border-color: var(--wh-brand-navy) !important;
    color: #fff !important;
}
body.wh-v4.wh-public-informational .wh-public-card-actions > a.wh4-register.btn.btn-primary:is(:hover, :focus-visible),
body.wh-v4.wh-public-informational .wh-detail-shell-actions > a.wh-detail-register.btn.btn-primary:is(:hover, :focus-visible) {
    background: var(--wh-brand-navy-hover) !important;
    border-color: var(--wh-brand-navy-hover) !important;
    color: #fff !important;
}
/* Keep a two-colour FPD name mark everywhere in the shared topbar. */
body.wh-v4 .topbar .brand span b,
body.wh-v4.wh-public-informational .topbar .brand span b {
    color: var(--wh-brand-gold) !important;
}


/* Universal two-tone title rule. Earlier page-specific styling used older
   teal/blue with higher specificity, particularly in analytics and profiles.
   Scope to authored accent spans inside headings, not registration statuses,
   platform logos, or message severity markers. */
body.wh-v4 :is(h1, h2, h3, h4, h5, h6) .wh-title-accent,
body.wh-v4.wh-unified-signed-in .app-shell > main > .section h2 .wh-title-accent,
body.wh-v4.wh-public-informational .wh4-section-head h2 .wh-title-accent,
body.wh-v4.wh-public-informational .wh-detail-shell h2 .wh-title-accent {
    color: #f6a220 !important;
}
body.wh-v4 :is(.section-head, .concept-participant-heading, .wh4-section-head,
    .wh-detail-shell, .wh-bi-titleline, .wh-premium-subheading) :is(h1, h2, h3) {
    /* Navy on regular text, gold only on an explicit accent element. */
    color: #021f2d !important;
}
body.wh-v4 .wh4-hero h1 em { color: #f6a220 !important; }

/* Presentational navigation / detail-page accents.  Existing backgrounds,
   status pills and payments retain their specialised colour semantics. */
body.wh-v4 :is(.admin-sidebar, .hub-sidebar, .hub-side-nav) a:is(:hover, :focus-visible),
body.wh-v4 :is(.admin-sidebar, .hub-sidebar, .hub-side-nav) a.active,
body.wh-v4 :is(.admin-sidebar, .hub-sidebar, .hub-side-nav) a[aria-current="page"],
body.wh-v4 :is(.wh-premium-participant .concept-list-heading > a,
    .wh-premium-profile .profile-table a, .wh-premium-quicklink .wh-premium-link-arrow,
    .wh-premium-admin .wh-premium-quicklinks .wh-premium-link-arrow,
    .wh4-hero-benefits b, .wh4-hero-link, .wh4-more-card > span:last-child),
body.wh-v4 .topbar .brand,
body.wh-v4 .wh-public-footer a {
    color: #021f2d !important;
}
body.wh-v4 :is(.wh-premium-admin .wh-premium-quicklinks > a,
    .wh4-more-card, .wh4-webinar-card):is(:hover, :focus-visible) {
    border-color: #f6a220 !important;
}
body.wh-v4 .wh-premium-admin .wh-premium-quicklinks > a:focus-visible {
    outline-color: #f6a220 !important;
}
/* Decorative active indicators use gold without repainting their surfaces. */
body.wh-v4 :is(.hub-side-nav a.active, .admin-sidebar a.active,
    .hub-sidebar a.active, .hub-sidebar-link.active, [aria-current="page"]) {
    border-left-color: #f6a220 !important;
}
@media (max-width: 480px) {
    body.wh-v4.wh-public-informational .wh4-hero--copy-only .wh4-hero-copy {
        max-width: 100% !important;
    }
}