/**
 * Chubb Safe (chubb-safe.co.uk) brand palette.
 *
 * The parent Hyvä theme (Sss/hyva-safesecurity) is fully token-driven: every brand
 * accent in the compiled styles.css resolves through the `--color-primary*` custom
 * properties (Tailwind `text-primary` / `bg-primary` utilities + raw `var(--color-primary)`).
 * Re-declaring those properties here re-skins the WHOLE site from SSS orange to Chubb
 * blue with NO Tailwind rebuild — the child inherits the parent's compiled styles.css
 * via Magento static fallback, and this file is loaded after it (see
 * Magento_Theme/layout/default_head_blocks.xml).
 *
 * Specificity note: the compiled stylesheet defines the tokens on `:root` (0,1,0).
 * `:root:root` (0,2,0) guarantees these overrides win regardless of stylesheet order.
 *
 * Palette: anchored on the Luma Chubb @maincolor (#6FADDD, a light sky blue). That value
 * is too light for white button text (~1.7:1), so it becomes the LIGHTER shade and the
 * DEFAULT/DARKER are deepened along the same hue so `text-on-primary` (#fff) stays legible:
 *   #2A6C9C on white text ≈ 5.6:1  (WCAG AA pass)
 *   #1E5176 on white text ≈ 8.9:1  (AAA)
 *
 * `--color-secondary` (#3757A0 navy) is already Chubb's Luma @secondarycolor, so the
 * secondary scale is inherited from the parent unchanged.
 */
:root:root {
    --color-primary-lighter: #6faddd; /* Luma Chubb @maincolor — light accents, hover backgrounds */
    --color-primary:         #2a6c9c; /* balanced Chubb blue — buttons / links (white text passes AA) */
    --color-primary-darker:  #1e5176; /* hover / active / pressed */

    /* Header: Chubb uses a light-grey header (live Luma @bkgheader #e3e3e3) with dark-grey
       text, NOT the SSS dark-navy band. `#header` (main band) + `.bg-header` resolve to
       --color-header; all header/top-bar text + links resolve to --color-on-header. */
    --color-header:    #e3e3e3; /* main header band (was #121927 navy) */
    --color-on-header: #5c5c5c; /* header + top-bar text/links (was #fff) */
}

/**
 * Top utility bar: a touch darker than the main header. It uses `bg-header` (= --color-header,
 * now #e3e3e3), so override its background to #c3c3c3 here. `.header-top-bar.header-top-bar`
 * (0,2,0) beats the `.bg-header` utility regardless of source order. The wrapper also carries a
 * hardcoded `text-white`; repoint it to the on-header grey so the "Any questions?…" label stays
 * readable on the grey.
 *
 * EXCEPTION — the green WhatsApp button must keep white text/icon. Its `<a>` has a `text-white`
 * utility (0,1,0) but that loses to the parent's `.header-top-bar a` rule (0,2,0), which resolves
 * to `--color-on-header` (now grey). The button is the only top-bar link with `bg-green-600`, so
 * `.header-top-bar a.bg-green-600` (0,2,1) wins it back to white (the SVG uses currentColor too).
 */
.header-top-bar.header-top-bar { background-color: #c3c3c3; color: #5c5c5c; }
.header-top-bar a.bg-green-600 { color: #ffffff; }

/**
 * Header action icons (account / compare / cart) turn the Chubb nav-bar blue
 * (--color-primary, the same #2a6c9c the category buttons use) on hover, instead
 * of the parent's faint white-tint background — invisible on the light-grey Chubb
 * header. The icons are inline SVGs drawn with currentColor, so recolouring the
 * button text recolours the glyph.
 *
 * `:not(.btn-primary)` spares the search submit, which is a solid blue
 * `btn btn-primary` and must keep its filled background + white glyph.
 *
 * Specificity: (1,4,0) beats the parent's `#header > .container .btn:hover`
 * (1,3,0); this file also loads after the compiled styles.css.
 */
#header > .container .btn:not(.btn-primary):hover {
    background-color: transparent;
    color: var(--color-primary);
}

/**
 * footer.phtml scopes its own `--sss-orange` accent (icons + link hover) instead of the
 * primary token. Repoint it to the Chubb blue so the footer follows the brand, exactly as
 * it did under Luma where the footer keyed off the (overridden) @maincolor.
 *
 * footer.phtml sets this in an inline <style> (`.sss-footer{--sss-orange:#e49228}`) that
 * renders later in the DOM, so an equal-specificity rule here would LOSE on source order.
 * `.sss-footer.sss-footer` (0,2,0) beats that inline `.sss-footer` (0,1,0) outright.
 */
.sss-footer.sss-footer { --sss-orange: #2a6c9c; }

/**
 * "Help & Advice" top-level nav button: give it a light-grey (#c3c3c3) background so it
 * reads as a distinct band element on the Chubb light-grey header.
 *
 * The background goes on the WRAPPER (`.sss-haa-wrap`), not the inner toggle button — the
 * wrapper carries a `border-b-2 border-transparent hover:border-primary` underline, and the
 * button sits inside its content box ABOVE that 2px border. Painting the bg on the button
 * leaves the band (`#e3e3e3`) showing through that 2px border = a grey gap under the button.
 * On the wrapper the bg paints under the transparent border (default border-box clip), so the
 * grey reaches flush to the band bottom; on hover the border turns navy on top of it — the
 * same underline the orange category buttons get.
 *
 * Specificity: the parent's inline desktop.phtml <style> (`.sss-mainnav .sss-haa-wrap`, 0,2,0)
 * renders later in the DOM than this head-loaded file, so doubling the class (0,3,0) wins.
 */
.sss-mainnav .sss-haa-wrap.sss-haa-wrap { background-color: #c3c3c3; }

/**
 * Homepage "top content" — category-tile + aftercare sections.
 *
 * Self-contained plain CSS ported from the Luma _sss-home-category-banner.less /
 * _sss-aftercare-support.less. Lives here (not in top-home.phtml) because it is plain CSS,
 * not Tailwind utilities, so it is NOT subject to the parent theme's Tailwind v4 purge and
 * is cacheable as a static asset. Scoped to .chubb-top-home; uses the Chubb blue
 * (#2a6c9c primary, #6faddd card).
 */
.chubb-top-home .home-category-banner { margin: 3rem 0; }
.chubb-top-home .home-category-banner-content { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 768px) { .chubb-top-home .home-category-banner-content { grid-template-columns: repeat(4, 1fr); } }
.chubb-top-home .cat-box { position: relative; display: block;
    min-height: 120px;
    color: #fff;
    border: 1px solid #bebebe; background-size: cover; background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1;
    overflow: hidden;
    text-decoration: none; transition: all .3s ease-out; }
.chubb-top-home .cat-box h3 { display: inline-block; margin: 0; font-size: 1.4rem;
 width:100%; line-height: 1.4;
    padding: 2px 15px; background-color: rgba(47,47,47,.52); color: #fff; }
.chubb-top-home .cat-box-top-picks h3 { background-color: #2a6c9c; }
.chubb-top-home .cat-box small { position: absolute; right: 15px; bottom: 5px; opacity: 0; transform: translateY(50px);
    text-transform: uppercase; font-size: .8125rem; transition: all .3s cubic-bezier(.68,-.55,.27,1.55); }
.chubb-top-home .cat-box:hover { border-color: #2a6c9c; transform: scale(1.02); }
.chubb-top-home .cat-box:hover small { opacity: 1; transform: translateY(0); }

.chubb-top-home .aftercare-support-banner { margin: 3rem 0; }
.chubb-top-home .aftercare-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 1024px) { .chubb-top-home .aftercare-grid { grid-template-columns: 2fr 1fr; } }
.chubb-top-home .aftercare-right { display: grid; grid-template-rows: 1fr 1fr; gap: 30px; }
.chubb-top-home .ac-card { position: relative; display: flex; flex-direction: column; min-height: 160px;
    overflow: hidden; border-radius: 8px; background-color: #6faddd; color: #fff; text-decoration: none; }
.chubb-top-home .ac-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 15px 25px; background-color: rgba(74,74,74,.12); font-weight: 600; }
.chubb-top-home .ac-aftercare .ac-head { text-decoration: underline; }
.chubb-top-home .ac-panel { position: relative; flex: 1; min-height: 220px;
    background-size: cover; background-position: center; background-repeat: no-repeat; }
.chubb-top-home .ac-aftercare .ac-panel { background-image: url('/media/video-thumbs/aftercare2.png'); }
.chubb-top-home .ac-repair   .ac-panel { background-image: url('/media/video-thumbs/safe-repair2.png'); }
.chubb-top-home .ac-moving   .ac-panel { background-image: url('/media/video-thumbs/moving.png'); }
.chubb-top-home .ac-aftercare .ac-content { height: 100%; padding: 20px; background-color: rgba(10,10,10,.4); }
@media (min-width: 1024px) { .chubb-top-home .ac-aftercare .ac-content { max-width: 55%; } }
.chubb-top-home .ac-content p { margin-bottom: 10px; font-weight: 600; }
.chubb-top-home .ac-content ul { margin: 0; line-height: 1.6; }
.chubb-top-home .ac-content ul.disc { list-style: disc; padding-left: 18px; }
.chubb-top-home .ac-li { display: flex; align-items: flex-start; gap: 8px; }
.chubb-top-home .ac-check { margin-top: 4px; }
.chubb-top-home .ac-mini .ac-content { position: absolute; inset: 0; padding: 16px;
    background-color: rgba(10,10,10,.55); transform: translateX(-110%); transition: transform .25s ease-out; }
.chubb-top-home .ac-mini:hover .ac-content { transform: translateX(0); }