/**
 * HJCo Consent — styles.
 *
 * MATCHED TO THE LIVE THEME, not to the Elementor kit.
 * The kit reports Roboto/Roboto Slab and a #58A7C8 "primary", but what the storefront actually
 * renders is different, and the rendered page is what customers see:
 *
 *   h1 / section heads   Cardo, serif, 600            (hero: "Life's favorite moments…")
 *   body copy            Roboto, #333
 *   buttons              Poppins 500, TRANSPARENT bg, 1px solid #000, 3px radius, capitalize
 *   brand accent         gold #FFCC33 (announcement bar, logo sunburst)
 *
 * #58A7C8 appears nowhere on the homepage, so the old blue primary button read as foreign.
 * The palette here is the site's real one: black, white, and gold.
 *
 * Cardo, Poppins and Roboto are already loaded by the theme, so matching costs no extra
 * request. Each still declares a real fallback in case a template drops one.
 *
 * CONTRAST: every pair computed, not eyeballed. 16 of 17 meet WCAG 2.1 AA; the single
 * exception is the gold top accent at 1.51:1, which is DECORATIVE ONLY — the bar's boundary is
 * carried by its box-shadow, never by that stripe. Do not make gold carry meaning, and do not
 * use gold for text: it fails badly on white.
 *
 * The theme also sets a global `!important` border on every <button> (hjco-pill-filters.php),
 * so button rules here are class-scoped (0-2-0) and marked !important to win predictably.
 */

:root {
    --hjco-c-surface:   #FFFFFF;
    --hjco-c-sunken:    #F6F6F6;
    --hjco-c-ink:       #333333;   /* the site's own body colour */
    --hjco-c-strong:    #000000;
    --hjco-c-line:      #000000;   /* 1px black, as .elementor-button uses */
    --hjco-c-accent:    #FFCC33;   /* decorative only — 1.51:1 on white */
    --hjco-c-focus:     #000000;
    --hjco-c-note-bg:   #FFF6DF;
    --hjco-c-note-ink:  #3D3226;
    --hjco-c-scrim:     rgba(0, 0, 0, .55);

    --hjco-font-display: "Cardo", Georgia, "Times New Roman", serif;
    --hjco-font-ui:      "Poppins", system-ui, -apple-system, sans-serif;
    --hjco-font-body:    "Roboto", system-ui, -apple-system, sans-serif;

    --hjco-radius:      3px;       /* matches .elementor-button */
    --hjco-shadow:      0 -2px 24px rgba(0, 0, 0, .16);
}

/* ------------------------------------------------------------------ visibility ------- */

.hjco-consent.is-idle .hjco-consent__bar,
.hjco-consent.is-idle .hjco-consent__modal,
.hjco-consent.is-idle .hjco-consent__scrim {
    display: none !important;
}

.hjco-consent__modal,
.hjco-consent__scrim {
    display: none;
}

.hjco-consent.is-open .hjco-consent__modal,
.hjco-consent.is-open .hjco-consent__scrim {
    display: block;
}

/* While the dialog is open the bar underneath is redundant and would be reachable by Tab. */
.hjco-consent.is-open .hjco-consent__bar {
    display: none !important;
}

.hjco-consent__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;
}

/* ------------------------------------------------------------------------- bar ------- */

/**
 * Z-INDEX: deliberately near max-int.
 *
 * Third-party chat widgets park themselves at the top of the stacking order and do not
 * negotiate. The Kenect texting widget on production sits at 2147483000, pinned bottom-right,
 * directly over these buttons — measured on live production 2026-09-16, where a real pointer
 * at the centre of "Essential only" hit the widget, not the button. A consent control that
 * cannot be clicked is worse than no consent control, so this sits above it.
 */
.hjco-consent__bar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 2147483644;
    background: var(--hjco-c-surface);
    /* Decorative accent echoing the gold announcement bar. The real boundary is the shadow. */
    border-top: 3px solid var(--hjco-c-accent);
    box-shadow: var(--hjco-shadow);
    font-family: var(--hjco-font-body);
    animation: hjco-consent-rise .22s ease-out;
}

@keyframes hjco-consent-rise {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.hjco-consent__bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
}

.hjco-consent__copy {
    flex: 1 1 360px;
    min-width: 0;
}

/**
 * Cardo, matching the hero h1 and the section heads. Sentence case, like the hero — the site's
 * uppercase treatment is reserved for section headings, and putting literal capitals in the
 * DOM would make some screen readers spell the words out letter by letter.
 */
.hjco-consent__title {
    margin: 0 0 5px;
    font-family: var(--hjco-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hjco-c-strong);
}

.hjco-consent__text {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--hjco-c-ink);
}

.hjco-consent__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
}

/* ---------------------------------------------------------------------- buttons ------- */

/**
 * Shaped after .elementor-button as the storefront actually renders it: Poppins 500,
 * 1px solid black, 3px radius, capitalize.
 *
 * The site has no filled buttons anywhere — every call to action is outlined. A solid black
 * fill is therefore the natural one-step-up for the primary action: it reads as emphatic
 * inside this monochrome system without introducing a colour the brand does not use, and it
 * avoids competing with the gold announcement bar or the gold chat bubble.
 */
.hjco-consent .hjco-consent__btn {
    font-family: var(--hjco-font-ui);
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: capitalize;
    cursor: pointer;
    padding: 11px 22px !important;
    min-height: 44px;              /* pointer target floor, WCAG 2.5.8 */
    border: 1px solid var(--hjco-c-line) !important;
    border-radius: var(--hjco-radius) !important;
    background: transparent !important;
    color: var(--hjco-c-strong) !important;
    transition: background-color .15s ease, color .15s ease;
}

.hjco-consent .hjco-consent__btn--primary {
    background: var(--hjco-c-strong) !important;
    border-color: var(--hjco-c-strong) !important;
    color: var(--hjco-c-surface) !important;   /* white on black = 21:1 */
}

.hjco-consent .hjco-consent__btn--primary:hover {
    background: #2B2B2B !important;
}

.hjco-consent .hjco-consent__btn--secondary:hover {
    background: var(--hjco-c-sunken) !important;
}

/**
 * The third action is a text link, not a third box — three equal-weight boxes in a row read as
 * a toolbar and flatten the hierarchy. Black underlined, matching the site's own links.
 */
.hjco-consent .hjco-consent__btn--ghost {
    border-color: transparent !important;
    background: transparent !important;
    padding: 11px 6px !important;
    color: var(--hjco-c-strong) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-transform: none;
}

.hjco-consent .hjco-consent__btn--ghost:hover {
    text-decoration-thickness: 2px;
}

/**
 * Focus is never removed, only replaced with something stronger. Two-tone so it stays visible
 * on the white bar, the solid black primary button and the dark scrim alike.
 */
.hjco-consent :focus-visible,
button.hjco-consent-trigger:focus-visible {
    outline: 3px solid var(--hjco-c-focus) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px var(--hjco-c-surface) !important;
}

/* ------------------------------------------------------------------- footer link ------ */

.hjco-consent-footer {
    text-align: center;
    padding: 12px 16px;
}

button.hjco-consent-trigger {
    font-family: var(--hjco-font-ui);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    background: none !important;
    border: 0 !important;
    padding: 6px 4px !important;
    color: var(--hjco-c-strong) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ----------------------------------------------------------------------- modal -------- */

.hjco-consent__scrim {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    background: var(--hjco-c-scrim);
}

.hjco-consent__modal {
    position: fixed;
    z-index: 2147483646;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 32px));
    max-height: min(85vh, 720px);
    overflow-y: auto;
    background: var(--hjco-c-surface);
    border-top: 3px solid var(--hjco-c-accent);
    border-radius: var(--hjco-radius);
    box-shadow: 0 12px 48px rgba(0, 0, 0, .35);
    padding: 26px 24px 24px;
    font-family: var(--hjco-font-body);
}

.hjco-consent__modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.hjco-consent__modal-title {
    margin: 0;
    font-family: var(--hjco-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--hjco-c-strong);
}

.hjco-consent .hjco-consent__close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    background: none !important;
    border: 1px solid transparent !important;
    color: var(--hjco-c-strong) !important;
    border-radius: var(--hjco-radius) !important;
}

.hjco-consent .hjco-consent__close:hover {
    background: var(--hjco-c-sunken) !important;
}

.hjco-consent__modal-desc {
    margin: 0 0 18px;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--hjco-c-ink);
}

.hjco-consent__gpc {
    margin: 0 0 18px;
    padding: 12px 14px;
    background: var(--hjco-c-note-bg);
    border-left: 3px solid #B8891F;
    border-radius: var(--hjco-radius);
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--hjco-c-note-ink);
}

.hjco-consent__gpc[hidden] {
    display: none;
}

/* ---------------------------------------------------------------- category list ------- */

.hjco-consent__list {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.hjco-consent__item {
    padding: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, .14);
}

.hjco-consent__item:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, .14);
}

.hjco-consent__item-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hjco-consent__label {
    flex: 1 1 auto;
    font-family: var(--hjco-font-ui);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--hjco-c-strong);
    cursor: pointer;
}

.hjco-consent__always {
    font-family: var(--hjco-font-ui);
    font-size: .75rem;
    font-weight: 500;
    text-transform: none; /* never ALL CAPS: some screen readers spell it out */
    color: var(--hjco-c-ink);
}

/**
 * A real checkbox, scaled up — not a div pretending to be a switch. Keyboard operation,
 * announcement and the browser's own checked state all come for free.
 */
.hjco-consent__check {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--hjco-c-strong);
    cursor: pointer;
}

.hjco-consent__check:disabled {
    cursor: not-allowed;
    opacity: .75;
}

.hjco-consent__item-desc {
    margin: 7px 0 0;
    font-size: .8125rem;
    line-height: 1.6;
    color: var(--hjco-c-ink);
}

.hjco-consent__modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hjco-consent__policy {
    margin: 18px 0 0;
    font-size: .8125rem;
}

/**
 * !important because the Elementor kit sets a global link colour to its "primary" #58A7C8 at
 * a specificity this cannot otherwise beat. That blue appears nowhere else on the storefront,
 * and without this the one anchor in the dialog renders blue inside an otherwise black-and-gold
 * panel. Verified on production: computed colour was rgb(88, 167, 200) before this rule.
 */
.hjco-consent .hjco-consent__policy-link,
.hjco-consent .hjco-consent__policy-link:visited {
    color: var(--hjco-c-strong) !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.hjco-consent .hjco-consent__policy-link:hover {
    text-decoration-thickness: 2px;
}

/* -------------------------------------------------- keep pinned widgets clear -------- */

/**
 * Lift bottom-pinned widgets clear of the bar.
 *
 * Two here: the pojo-accessibility toggle (one accessibility feature must not bury another)
 * and the Kenect chat widget, which sits at z-index 2147483000 and was measured on live
 * production intercepting the pointer at the centre of "Essential only".
 *
 * The offset is the bar's REAL measured height, published by consent.js as
 * --hjco-consent-bar-h, because that height changes with viewport and with whatever wording
 * the client sets. A hardcoded offset would be wrong the moment either changed.
 */
:root.hjco-consent-bar-visible .pojo-a11y-toggle-button,
:root.hjco-consent-bar-visible #pojo-a11y-toolbar,
:root.hjco-consent-bar-visible [id^="widget-"][class*="widget-container-"] {
    transform: translateY(calc(-1 * var(--hjco-consent-bar-h, 120px))) !important;
    transition: transform .2s ease;
}

/* --------------------------------------------------------------------- responsive ----- */

@media (max-width: 782px) {
    .hjco-consent__bar-inner {
        padding: 18px 16px;
        gap: 14px;
    }

    .hjco-consent__title {
        font-size: 1.125rem;
    }

    .hjco-consent__actions {
        width: 100%;
    }

    .hjco-consent .hjco-consent__btn {
        flex: 1 1 100%;
    }

    .hjco-consent__modal {
        padding: 22px 16px 20px;
        max-height: 88vh;
    }

    .hjco-consent__modal-title {
        font-size: 1.3rem;
    }
}

/* ----------------------------------------------------------------- reduced motion ----- */

@media (prefers-reduced-motion: reduce) {
    .hjco-consent__bar {
        animation: none;
    }

    .hjco-consent .hjco-consent__btn {
        transition: none;
    }

    :root.hjco-consent-bar-visible .pojo-a11y-toggle-button,
    :root.hjco-consent-bar-visible #pojo-a11y-toolbar,
    :root.hjco-consent-bar-visible [id^="widget-"][class*="widget-container-"] {
        transition: none;
    }
}

/* ------------------------------------------------------------------------ dark --------- */

@media (prefers-color-scheme: dark) {
    :root {
        --hjco-c-surface:  #15181A;
        --hjco-c-sunken:   #22262A;
        --hjco-c-ink:      #D6DADD;
        --hjco-c-strong:   #FFFFFF;
        --hjco-c-line:     #D6DADD;
        --hjco-c-note-bg:  #332B1C;
        --hjco-c-note-ink: #F2E4C4;
        --hjco-shadow:     0 -2px 24px rgba(0, 0, 0, .6);
    }

    .hjco-consent .hjco-consent__btn {
        border-color: var(--hjco-c-line) !important;
        color: var(--hjco-c-strong) !important;
    }

    /* Inverted in dark: white fill, black text — still 21:1. */
    .hjco-consent .hjco-consent__btn--primary {
        background: #FFFFFF !important;
        border-color: #FFFFFF !important;
        color: #000000 !important;
    }

    .hjco-consent .hjco-consent__btn--primary:hover {
        background: #E2E5E7 !important;
    }

    .hjco-consent .hjco-consent__btn--ghost {
        border-color: transparent !important;
        color: var(--hjco-c-strong) !important;
    }

    .hjco-consent :focus-visible,
    button.hjco-consent-trigger:focus-visible {
        outline-color: #FFFFFF !important;
        box-shadow: 0 0 0 6px var(--hjco-c-surface) !important;
    }

    .hjco-consent__item,
    .hjco-consent__item:last-child {
        border-color: rgba(214, 218, 221, .26);
    }
}

/* --------------------------------------------------------------- forced colors -------- */

@media (forced-colors: active) {
    .hjco-consent__bar,
    .hjco-consent__modal {
        border: 1px solid CanvasText;
    }

    .hjco-consent :focus-visible {
        outline: 3px solid Highlight !important;
    }
}