/* ==========================================================================
   Be Home Partners — brand skin for the Cookie Consent Widget
   ==========================================================================

   Loaded AFTER cookie-consent.css. That vendor file is kept byte-identical to
   the client's delivery so it can be replaced on a future update without
   losing the branding.

   COLOURS ONLY. No selector here changes a size, a spacing, a border radius,
   a font size, a grid template or a display mode, so the approved popup copy,
   structure, dimensions, spacing and layout are untouched.

   Approved palette
     main text ............................ #1a2845
     icon background and active toggles ... #b81f3a
     button hover and keyboard focus ...... #1a2845
     button active ........................ #0f1a3d
     main surface and action bar ........... white

   Specificity note: every rule below is prefixed with `.ccw-root` so it wins
   over the single-class vendor rules. Interactive states are written as
   `.ccw-root .ccw-action-…:hover` (three selectors) so they stay stronger than
   the two-selector base rules further down this file — otherwise the white
   action bar would override its own hover state.
   ========================================================================== */

.ccw-root {
  /* Main text. Also inherited by headings, category labels and detail terms. */
  --ccw-text: #1a2845;

  /* The vendor uses --ccw-primary for hover/focus fills and --ccw-primary-hover
     for the pressed/hover fills of the choice buttons. Both become the approved
     navy; the pressed state is darkened separately below. */
  --ccw-primary: #1a2845;
  --ccw-primary-hover: #1a2845;

  /* Brand accent: cookie icon plate and the "on" state of the toggles. */
  --ccw-brand: #b81f3a;

  /* Pressed state. */
  --ccw-active: #0f1a3d;
}

/* ── Icon plate ──────────────────────────────────────────────────────────
   The vendor fills this with the neutral --ccw-secondary. --ccw-secondary is
   also the action-bar divider, so it is NOT redefined; the plate is recoloured
   directly instead. The glyph turns white to stay legible on the accent. */
.ccw-root .ccw-icon-box {
  background: var(--ccw-brand);
  color: #fff;
}

/* ── Toggles ─────────────────────────────────────────────────────────────
   "Active toggles" use the brand accent. Unchecked keeps the vendor grey. */
.ccw-root .ccw-switch:checked {
  border-color: var(--ccw-brand);
  background: var(--ccw-brand);
}

/* Same 3px / 2px geometry as the vendor rule — only the colour changes.
   #1a2845 per the ticket's single keyboard-focus colour; it reads clearly
   against both the grey (unchecked) and the brand-red (checked) track, which a
   red ring did not. Previous rule, kept for reference:
     outline: 3px solid color-mix(in srgb, var(--ccw-brand) 45%, transparent); */
.ccw-root .ccw-switch:focus-visible {
  outline: 3px solid var(--ccw-primary);
  outline-offset: 2px;
}

/* ── Main surface and action bar: white ──────────────────────────────────
   All three actions share one white base, which is what keeps "Reject all" and
   "Accept all" at identical visual weight. This also neutralises the vendor's
   faint tinted variant of .ccw-action-choice under 480px (see below). */
.ccw-root .ccw-surface,
.ccw-root .ccw-footer,
.ccw-root .ccw-action {
  background: #fff;
}

/* ── Hover and keyboard focus: #1a2845 ───────────────────────────────────
   Identical treatment for Customize, Reject all and Accept all. */
.ccw-root .ccw-action-customize:hover,
.ccw-root .ccw-action-customize:focus-visible,
.ccw-root .ccw-action-choice:hover,
.ccw-root .ccw-action-choice:focus-visible {
  background: var(--ccw-primary-hover);
  color: #fff;
}

/* ── Pressed: #0f1a3d ────────────────────────────────────────────────────── */
.ccw-root .ccw-action-customize:active,
.ccw-root .ccw-action-choice:active {
  background: var(--ccw-active);
  color: #fff;
}

/* ── Keyboard focus on the action bar ────────────────────────────────────
   NO ring. Keyboard focus IS the approved #1a2845 fill with white text (see
   the rule above), exactly as the palette specifies — "button hover and
   keyboard focus ...... #1a2845" — and #1a2845 on white is a 13:1 background
   change, which is a valid focus indicator on its own (WCAG 1.4.11 / 2.4.11).

   Why the ring had to go rather than just be recoloured (client QA, 2026-09):
   the three actions are a flush `grid-template-columns: repeat(3, 1fr)` with
   `gap: 0`, and `.ccw-actions` sets `overflow: hidden`. An outline at
   `outline-offset: 2px` is therefore clipped along the OUTSIDE of the group
   but not along the internal column joins — so the only part of it that ever
   showed was two vertical segments sitting exactly on the joins, which read as
   a coloured line "between the buttons". Recolouring it navy would have left
   the same artefact in navy. `outline: none` also has to override the vendor's
   own `.ccw-action-choice:focus-visible` ring (cookie-consent.css line ~433),
   which would otherwise paint the identical artefact in translucent navy.

   Previous rule, kept for reference:
     .ccw-root .ccw-action:focus-visible {
       outline: 3px solid var(--ccw-brand);
       outline-offset: 2px;
     }

   If keyboard focus must be distinguishable from mouse hover, the one-line
   addition is an INSET hairline, which cannot reach a join:
     outline: 2px solid #fff; outline-offset: -5px;
*/
.ccw-root .ccw-action:focus-visible {
  outline: none;
}

/* ── Keyboard focus everywhere else in the widget: #1a2845 ───────────────
   The vendor declares an `outline` in exactly two places — `.ccw-switch` and
   `.ccw-action-choice`. Every other focusable control inside the popup
   (`.ccw-chevron`, the per-category cookie DETAIL button; `.ccw-collapse`, the
   back button; `.ccw-text-button`, the inline "manage" link; and the cookie
   policy link) was left with the browser's default ring, which Chrome paints
   in its own blue. That is the blue focus the client reported on the cookie
   detail button. These controls sit inside the panel with room around them, so
   an offset ring is correct here and produces no line artefact.

   Colours only: no size, spacing, radius or layout is touched. */
.ccw-root .ccw-chevron:focus-visible,
.ccw-root .ccw-collapse:focus-visible,
.ccw-root .ccw-text-button:focus-visible,
.ccw-root .ccw-policy a:focus-visible {
  outline: 2px solid var(--ccw-primary);
  outline-offset: 2px;
}

/* ── Separators between the three actions ────────────────────────────────
   The vendor draws each separator as an inset shadow on the LEFT edge of a
   choice button, and clears it when that same button is hovered, focused or
   pressed. That only removes the separator on one side of the active button:
   hovering "Reject all" left the Reject | Accept line visible.

   The rules below also clear the separator owned by the FOLLOWING button, so a
   separator disappears as soon as EITHER adjacent button is hovered, focused or
   pressed. Nothing else about the separators changes — they are still the same
   inset line in the same place. */
.ccw-root .ccw-action:hover + .ccw-action,
.ccw-root .ccw-action:focus-visible + .ccw-action,
.ccw-root .ccw-action:active + .ccw-action {
  box-shadow: none;
}

/* Belt and braces on the focused button's own separator. The vendor clears it
   on `.ccw-action-choice:hover, :focus-visible`, but that is a two-class
   selector and this file raises the specificity of neighbouring rules, so the
   clear is restated here at three classes. `--ccw-border` (#d3d7de) is grey:
   the separator was never the red line the client saw — that was the focus
   outline, handled above. */
.ccw-root .ccw-action:hover,
.ccw-root .ccw-action:focus-visible,
.ccw-root .ccw-action:active {
  box-shadow: none;
}

/* ── Mobile ──────────────────────────────────────────────────────────────
   Under 480px the vendor tints the choice buttons with 3% of --ccw-primary.
   The approved action bar is white, and both choices must stay identical, so
   the tint is dropped. Declared explicitly rather than relying on specificity
   so a future vendor update cannot quietly reintroduce it. */
@media (max-width: 480px) {
  .ccw-root .ccw-action,
  .ccw-root .ccw-action-choice {
    background: #fff;
  }
}