/**
 * CookieYes — Corporate Realty brand skin
 * ----------------------------------------------------------------------------
 * Restyles the CookieYes (cookie-law-info) consent bar to match the theme
 * brand. Tokens + button style taken from the theme itself
 * (less/child-theme.less), NOT the SplitSight plugin skin:
 *   @brand-primary/@brand-yellow  #fdba12   (gold)
 *   @dark                         #444
 *   @dark-grey                    #4f4e4e
 *   @headings-font-family         futura-pt, ...
 * Theme CTA (.btn-primary, line ~527): gold bg, dark text, square corners,
 * futura uppercase, letter-spacing 0.1em, font-weight 500. We mirror that.
 * The close button is the one intentional exception — a pill, per request.
 *
 * Standalone override file — NOT compiled from less/child-theme.less. Enqueued
 * after child-theme.css in functions.php so it wins on load order.
 *
 * Specificity note: CookieYes injects its stylesheet at RUNTIME via JS
 * (_ckyStyles), so its rules can land AFTER this file in source order. Its
 * selectors top out at (0,2,0) — e.g. `.cky-consent-bar .cky-banner-btn-close`
 * — and button colors are just `.cky-btn-accept` (0,1,0). Everything here is
 * scoped under `.cky-consent-container` to reach (0,3,0)+, so it wins on
 * specificity regardless of injection order. !important is used only to hide
 * the close-icon <img>.
 */

/* Brand tokens (from theme less/child-theme.less) ----------------------- *
 * Declared on both roots: .cky-modal is a SIBLING of .cky-consent-container,
 * not a descendant, so it needs its own copy for the vars to resolve.       */
.cky-consent-container,
.cky-modal {
    --cr-gold: #fdba12;
    --cr-gold-hover: #fecb3d;   /* ~ lighten(@brand-primary, 5%) */
    --cr-dark: #444;
    --cr-dark-hover: #4f4e4e;   /* @dark-grey */
    --cr-heading-font: futura-pt, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* === Bar surface — white, gold top accent =============================== */
.cky-consent-container .cky-consent-bar {
    background: #fff;
    border-top: 4px solid var(--cr-gold);
    color: var(--cr-dark);
}

/* === Title — futura uppercase dark ===================================== */
.cky-consent-container .cky-consent-bar .cky-title {
    font-family: var(--cr-heading-font);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cr-dark);
}

/* === Description + policy link ========================================= */
.cky-consent-container .cky-consent-bar .cky-notice-des,
.cky-consent-container .cky-consent-bar .cky-notice-des * {
    color: var(--cr-dark);
}

/* !important on link colors: the plugin writes the admin-configured color as
   an inline style attribute (specificity 1,0,0,0) on these, so only
   !important can rebrand them. */
.cky-consent-container .cky-consent-bar .cky-notice-des a,
.cky-consent-container .cky-consent-bar .cky-notice-des a.cky-policy {
    color: var(--cr-dark) !important;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.cky-consent-container .cky-consent-bar .cky-notice-des a:hover,
.cky-consent-container .cky-consent-bar .cky-notice-des a.cky-policy:hover {
    color: var(--cr-gold) !important;
}

/* "Do Not Sell / Share My Personal Information" — subtle light-gray button
   with dark text. Plugin defaults it to a left-aligned link, so we also reset
   padding/align. color/background/border are inline-styled by the plugin, so
   !important is required. */
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-do-not-sell {
    background: #ececec !important;
    color: var(--cr-dark) !important;
    border: 1px solid #d8d8d8 !important;
    padding: 6px 12px;
    text-align: center;
    font-size: 12px;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-do-not-sell:hover,
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-do-not-sell:focus {
    background: #e0e0e0 !important;
    border-color: #cccccc !important;
    color: var(--cr-dark) !important;
}

/* Right-align the notice button group so the do-not-sell button hugs the
   right edge, under the close button. */
.cky-consent-container .cky-notice-btn-wrapper {
    justify-content: flex-end;
}

/* === Buttons — shared brand shape (square, futura uppercase) ============ */
.cky-consent-container .cky-notice-btn-wrapper .cky-btn {
    border-radius: 0;
    font-family: var(--cr-heading-font);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Button colors use !important throughout: the plugin writes admin-configured
   colors as inline style attributes on each button, which only !important can
   override. (Accept/Reject/Customize appear in GDPR consent mode; the current
   CCPA banner shows only the do-not-sell link above.) */

/* Primary CTA — ACCEPT: gold fill, dark text (theme .btn-primary) */
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept {
    background: var(--cr-gold) !important;
    color: var(--cr-dark) !important;
    border: 2px solid var(--cr-gold) !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept:hover,
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept:focus {
    background: var(--cr-gold-hover) !important;
    border-color: var(--cr-gold-hover) !important;
    color: var(--cr-dark) !important;
}

/* Secondary — REJECT / CUSTOMIZE: dark outline ghost on the white bar (the
   theme's own .btn-secondary uses a white border meant for dark sections, so
   we adapt to a dark outline here), fills gold on hover. */
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject,
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize {
    background: transparent !important;
    color: var(--cr-dark) !important;
    border: 2px solid var(--cr-dark) !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject:hover,
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject:focus,
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize:hover,
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize:focus {
    background: var(--cr-gold) !important;
    color: var(--cr-dark) !important;
    border-color: var(--cr-gold) !important;
}

/* === Close button — reversed-out squared "CLOSE" button =============== *
 * Plugin default: a 24x24 box holding a 9px X <img>, absolute top-right
 * (right:9px top:5px, line-height:0). We drop the icon and grow the button
 * into a squared, reversed-out text button (dark fill, gold label) — the
 * inverse of the white bar. Overriding width/height/line-height is required
 * because the plugin fixes them.                                             */
.cky-consent-container .cky-consent-bar .cky-banner-btn-close {
    /* 24px matches the bar's horizontal padding so the close button's right
       edge lines up with the right-aligned do-not-sell button below it. */
    right: 24px;
    top: 12px;
    width: auto;
    height: auto;
    min-height: 0;
    line-height: 1;
    padding: 9px 17px;
    /* !important: plugin forces `background:transparent` via
       `button.cky-banner-btn-close:not(:hover):not(:active)` (0,3,1), which
       otherwise beats us and leaves the fill see-through. */
    background: var(--cr-dark) !important;
    border-radius: 0;
    color: var(--cr-gold);
    font-family: var(--cr-heading-font);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
}

.cky-consent-container .cky-consent-bar .cky-banner-btn-close:hover,
.cky-consent-container .cky-consent-bar .cky-banner-btn-close:focus {
    background: var(--cr-dark-hover) !important;
    color: var(--cr-gold);
}

/* Hide the default X icon — plugin sets it inline via the template, so
   !important is the reliable kill here. */
.cky-consent-container .cky-consent-bar .cky-banner-btn-close img {
    display: none !important;
}

.cky-consent-container .cky-consent-bar .cky-banner-btn-close::before {
    content: "CLOSE  ✕";
}

/* ======================================================================= *
 * Preference center — Customize (#ckyPreferenceCenter) AND the opt-out /
 * "do not sell my personal information" popup (#ckyOptoutPreferenceCenter).
 * Both share .cky-preference-center + .cky-btn classes, so styling the shared
 * classes brands both consistently.
 *
 * TWO layouts, TWO parent scopes: the plugin renders the preference center
 * inside .cky-modal for the POPUP/BOX banner, but inside .cky-consent-container
 * (as .cky-preference-wrapper) for the CLASSIC banner. This site uses the
 * classic banner (.cky-classic-bottom), so every rule below is scoped under
 * BOTH parents — .cky-modal alone would never match here, leaving the whole
 * Customize panel (incl. "Save My Preferences") on the plugin's blue defaults.
 * Both scopes reach (0,3,0)+, beating the plugin's JS-injected rules and, with
 * !important, its inline button colors. Vars resolve on both roots (declared
 * at the top of this file on .cky-consent-container and .cky-modal).
 * ======================================================================= */

/* Panel — white surface, squared, gold top accent (matches the bar) */
.cky-modal .cky-preference-center,
.cky-consent-container .cky-preference-center {
    background: #fff;
    border-radius: 0;
    border-top: 4px solid var(--cr-gold, #fdba12);
    color: var(--cr-dark, #444);
}

/* Header title — futura uppercase dark */
.cky-modal .cky-preference-header .cky-preference-title,
.cky-consent-container .cky-preference-header .cky-preference-title {
    font-family: var(--cr-heading-font, futura-pt, sans-serif);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--cr-dark, #444);
}

/* Body copy — description, opt-out option label, GPC note */
.cky-modal .cky-preference-content-wrapper,
.cky-modal .cky-preference-content-wrapper *,
.cky-modal .cky-opt-out-checkbox-label,
.cky-modal .cky-gpc-wrapper .cky-gpc-desc,
.cky-modal .cky-gpc-wrapper .cky-gpc-desc *,
.cky-consent-container .cky-preference-content-wrapper,
.cky-consent-container .cky-preference-content-wrapper *,
.cky-consent-container .cky-opt-out-checkbox-label,
.cky-consent-container .cky-gpc-wrapper .cky-gpc-desc,
.cky-consent-container .cky-gpc-wrapper .cky-gpc-desc * {
    color: var(--cr-dark, #444);
}

/* Preference-center close (X) — small reversed-out squared button; recolor
   the grey #828EA2 icon to white so it reads on the dark fill. */
.cky-modal .cky-preference-header .cky-btn-close,
.cky-consent-container .cky-preference-header .cky-btn-close {
    background: var(--cr-dark, #444);
    border-radius: 0;
    padding: 6px;
    transition: background-color 0.3s ease;
}

.cky-modal .cky-preference-header .cky-btn-close:hover,
.cky-modal .cky-preference-header .cky-btn-close:focus,
.cky-consent-container .cky-preference-header .cky-btn-close:hover,
.cky-consent-container .cky-preference-header .cky-btn-close:focus {
    background: var(--cr-dark-hover, #4f4e4e);
}

.cky-modal .cky-preference-header .cky-btn-close img,
.cky-consent-container .cky-preference-header .cky-btn-close img {
    filter: brightness(0) invert(1); /* grey X -> white */
}

/* Opt-out checkbox — brand the checked state (plugin default is #1863dc).
   Dark fill keeps the plugin's white checkmark readable. High-specificity
   plugin rules on :checked warrant !important here. */
.cky-modal .cky-opt-out-checkbox-wrapper input[type="checkbox"].cky-opt-out-checkbox:checked,
.cky-consent-container .cky-opt-out-checkbox-wrapper input[type="checkbox"].cky-opt-out-checkbox:checked {
    background-color: var(--cr-dark, #444) !important;
}

/* Category switches (Customize accordion) — brand the "on" state gold */
.cky-modal .cky-switch input[type="checkbox"]:checked,
.cky-consent-container .cky-switch input[type="checkbox"]:checked {
    background: var(--cr-gold, #fdba12) !important;
}

/* --- Preference-center buttons --------------------------------------- *
 * Primary: ACCEPT / SAVE PREFERENCES / CONFIRM  -> gold fill, dark text.
 * Secondary: REJECT / CANCEL                    -> dark outline ghost.     */
.cky-modal .cky-footer-wrapper .cky-btn,
.cky-consent-container .cky-footer-wrapper .cky-btn {
    border-radius: 0;
    font-family: var(--cr-heading-font, futura-pt, sans-serif);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* !important: plugin writes configured button colors as inline styles here
   too — e.g. the Customize panel's "Save My Preferences" (preferences) button
   and the opt-out popup's "Save My Preferences" (confirm) button. */
.cky-modal .cky-footer-wrapper .cky-btn-accept,
.cky-modal .cky-footer-wrapper .cky-btn-preferences,
.cky-modal .cky-opt-out-btn-wrapper .cky-btn-confirm,
.cky-consent-container .cky-footer-wrapper .cky-btn-accept,
.cky-consent-container .cky-footer-wrapper .cky-btn-preferences,
.cky-consent-container .cky-opt-out-btn-wrapper .cky-btn-confirm {
    background: var(--cr-gold, #fdba12) !important;
    color: var(--cr-dark, #444) !important;
    border: 1px solid var(--cr-gold, #fdba12) !important;
}

.cky-modal .cky-footer-wrapper .cky-btn-accept:hover,
.cky-modal .cky-footer-wrapper .cky-btn-accept:focus,
.cky-modal .cky-footer-wrapper .cky-btn-preferences:hover,
.cky-modal .cky-footer-wrapper .cky-btn-preferences:focus,
.cky-modal .cky-opt-out-btn-wrapper .cky-btn-confirm:hover,
.cky-modal .cky-opt-out-btn-wrapper .cky-btn-confirm:focus,
.cky-consent-container .cky-footer-wrapper .cky-btn-accept:hover,
.cky-consent-container .cky-footer-wrapper .cky-btn-accept:focus,
.cky-consent-container .cky-footer-wrapper .cky-btn-preferences:hover,
.cky-consent-container .cky-footer-wrapper .cky-btn-preferences:focus,
.cky-consent-container .cky-opt-out-btn-wrapper .cky-btn-confirm:hover,
.cky-consent-container .cky-opt-out-btn-wrapper .cky-btn-confirm:focus {
    background: var(--cr-gold-hover, #fecb3d) !important;
    border-color: var(--cr-gold-hover, #fecb3d) !important;
    color: var(--cr-dark, #444) !important;
}

.cky-modal .cky-footer-wrapper .cky-btn-reject,
.cky-modal .cky-opt-out-btn-wrapper .cky-btn-cancel,
.cky-consent-container .cky-footer-wrapper .cky-btn-reject,
.cky-consent-container .cky-opt-out-btn-wrapper .cky-btn-cancel {
    background: transparent !important;
    color: var(--cr-dark, #444) !important;
    border: 1px solid var(--cr-dark, #444) !important;
}

.cky-modal .cky-footer-wrapper .cky-btn-reject:hover,
.cky-modal .cky-footer-wrapper .cky-btn-reject:focus,
.cky-modal .cky-opt-out-btn-wrapper .cky-btn-cancel:hover,
.cky-modal .cky-opt-out-btn-wrapper .cky-btn-cancel:focus,
.cky-consent-container .cky-footer-wrapper .cky-btn-reject:hover,
.cky-consent-container .cky-footer-wrapper .cky-btn-reject:focus,
.cky-consent-container .cky-opt-out-btn-wrapper .cky-btn-cancel:hover,
.cky-consent-container .cky-opt-out-btn-wrapper .cky-btn-cancel:focus {
    background: var(--cr-gold, #fdba12) !important;
    color: var(--cr-dark, #444) !important;
    border-color: var(--cr-gold, #fdba12) !important;
}

/* === Revisit tab — floating "reopen consent" button ==================== *
 * Lives outside .cky-consent-container, so scope it under its own wrapper.
 * Default is blue; bring it to brand gold to match the bar.                 */
.cky-btn-revisit-wrapper .cky-btn-revisit {
    background: #fdba12;
}