/* ==========================================================================
   Cookiebot banner — Michter's brand overrides
   --------------------------------------------------------------------------
   Banner template: Cookiebot **Swift** (DialogVersion 2). This matters, and it
   is the reason the first version of this file did almost nothing:

   1. Swift puts its buttons inside #CybotCookiebotDialogFooter and shares the
      class .CybotCookiebotDialogBodyButton across them. The primary CTA is one
      of THREE ids depending on consent mode:
        #CybotCookiebotDialogBodyButtonAccept
        #CybotCookiebotDialogBodyLevelButtonAccept
        #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll
      Targeting a bare #CybotCookiebotDialogBodyButtonAccept matches nothing on
      a banner that renders one of the other two.

   2. Swift is sized in **em**, off a root font-size on the dialog
      (Cookiebot's default is 0.9375rem = 15px). Radii, gaps, padding and the
      customize arrow are all em-based, so lowering that ONE font-size scales
      the whole banner down proportionally. That — not max-width — is how you
      "make the banner smaller". Cookiebot's own default max-width:900px is
      irrelevant when the Swift edge banner is laid out at 100vw.

   3. Cookiebot's runtime CSS is injected by consent.cookiebot.com/uc.js AFTER
      WordPress prints its <link> tags, and it sets button colours with
      two-id selectors. Hence !important and footer-scoped selectors here.
      Its JS also assigns button height as an INLINE style, so height has to be
      reset explicitly.

   Brand values, taken from the rendered site:
     display / CTA type .. BrandonGrotesque-Bold, uppercase, 1.5px tracking
     body type ........... TradeGothicLTStd
     brand red ........... #C8322E  (white on it = 5.31:1, passes WCAG AA)
     corners ............. square; the brand uses 0 radius throughout

   ACCESSIBILITY GUARDRAILS (site is under active ADA remediation):
     - Buttons keep a 44px min-height; the size reduction comes from type and
       padding, never from target size.
     - Banner body copy stays at 13px or above.
     - Brand tan (#C7B299) is ~1.9:1 on white and is never used for text.
   ========================================================================== */

/* --- Master SPACING control ----------------------------------------------
   Swift's padding, gaps, radii and chevron are all em-based, so this one value
   controls the banner's bulk. It is kept low to keep the banner compact.

   IMPORTANT: type is NOT allowed to inherit from this. Every text rule below
   is set in **rem**, deliberately, so the banner can be physically compact
   while the copy stays readable. Setting the type in em (the first attempt)
   shrank the layout and the text together and made the banner unreadable. */
#CybotCookiebotDialog {
    font-size: 0.8125rem !important;
    font-family: 'TradeGothicLTStd', Arial, sans-serif !important;
    border-radius: 0 !important;
}

/* The edge/bar layout carries its own generous padding — tighten it. */
#CybotCookiebotDialog.CybotEdge,
#CybotCookiebotDialog {
    padding: 14px !important;
}

#CybotCookiebotDialogBodyContent {
    padding: 12px 14px 8px !important;
}

/* --- Copy ---------------------------------------------------------------- */
#CybotCookiebotDialogBodyContentTitle {
    font-family: 'BrandonGrotesque-Bold', Arial, sans-serif !important;
    font-size: 1.4rem !important;     /* ~22px — kept above the 1.2rem body
                                         copy so the hierarchy still reads */
    line-height: 1.3 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #1C1C1C !important;
    margin-bottom: 6px !important;
}

#CybotCookiebotDialogBodyContentText,
#CybotCookiebotDialogBodyContentText p {
    font-family: 'TradeGothicLTStd', Arial, sans-serif !important;
    font-size: 1.2rem !important;     /* ~19px — client-set; larger than
                                         Cookiebot's 15px default on purpose */
    line-height: 1.5 !important;
    /* #595959 on white is 7.0:1 — AA with room, and darker than the site's
       default #8C8C8C body grey which would be borderline at this size. */
    color: #595959 !important;
}

#CybotCookiebotDialogBodyContentText a,
#CybotCookiebotDialogBodyLevelDetailsButton {
    color: #C8322E !important;
    text-decoration: underline !important;
}

/* --- Buttons -------------------------------------------------------------
   Class-based so it covers every button Swift renders, whichever ids appear. */
#CybotCookiebotDialogFooter .CybotCookiebotDialogBodyButton {
    font-family: 'BrandonGrotesque-Bold', Arial, sans-serif !important;
    font-size: 0.875rem !important;   /* 14px — rem, not em */
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    border-width: 1px !important;
    border-style: solid !important;
    padding: 0.85em 1.4em !important;
    /* Cookiebot's JS writes an inline pixel height onto the accept/decline
       buttons; reset it and hold the target size with min-height instead. */
    height: auto !important;
    min-height: 44px !important;
}

/* Primary CTA — brand red. All three possible ids. */
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
    background-color: #C8322E !important;
    border-color: #C8322E !important;
    color: #FFFFFF !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept:hover,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept:hover,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover {
    background-color: #A82824 !important;
    border-color: #A82824 !important;
    opacity: 1 !important;
}

/* Secondary — outlined dark on white (near 16:1). */
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDetails,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {
    background-color: transparent !important;
    border-color: #1C1C1C !important;
    color: #1C1C1C !important;
}

#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonDecline:hover,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize:hover,
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection:hover {
    background-color: #1C1C1C !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* The "Customize" chevron is drawn with borders and inherits Cookiebot's
   theme colour; keep it on the button's own text colour. */
#CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize .CybotCookiebotDialogArrow {
    border-color: #1C1C1C !important;
}

/* Keyboard focus must stay obvious — sweep 1 restored visible focus site-wide
   (WCAG 2.4.7) and the banner must not be the one place it disappears. */
#CybotCookiebotDialog button:focus-visible,
#CybotCookiebotDialog a:focus-visible,
#CybotCookiebotDialog input:focus-visible {
    outline: 2px solid #C8322E !important;
    outline-offset: 2px !important;
}

/* --- Category toggles ---------------------------------------------------- */
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #9A9A9A !important;
}

#CybotCookiebotDialog input:checked + .CybotCookiebotDialogBodyLevelButtonSlider {
    background-color: #C8322E !important;
}

#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonDescription {
    font-family: 'TradeGothicLTStd', Arial, sans-serif !important;
    font-size: 0.875rem !important;   /* 14px — rem, not em */
    color: #4A4A4A !important;
}

/* --- Tabs / nav ---------------------------------------------------------- */
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink {
    font-family: 'BrandonGrotesque-Bold', Arial, sans-serif !important;
    font-size: 0.8125rem !important;  /* 13px — rem, not em */
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: #4A4A4A !important;
}

#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.CybotCookiebotDialogActive {
    color: #C8322E !important;
    border-bottom: 2px solid #C8322E !important;
}

/* ==========================================================================
   THE CONSENT-STATE WIDGET ("Cookie settings" / withdraw-consent panel)
   --------------------------------------------------------------------------
   This is a SEPARATE dialog from the banner, with its own id namespace
   (#CookiebotWidget...), served by a different script
   (consent.cookiebot.com/Scripts/widget.min.js — the banner lives in cc.js).
   Nothing above reaches it, which is why it stayed default blue after the
   banner was branded.

   Its own rules are **three ids deep**, e.g.
     #CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change
   so overrides must be scoped and !important to win. There are no CSS custom
   properties to hook — colours are baked into generated rules.

   The widget's buttons already ship min-height:48px. That is above the 44px
   target-size floor, so it is left alone rather than shrunk.
   ========================================================================== */

#CookiebotWidget {
    font-family: 'TradeGothicLTStd', Arial, sans-serif !important;
    border-radius: 0 !important;
}

/* Panel title ("Cookie settings") and the section heading. */
#CookiebotWidget .CookiebotWidget-header,
#CookiebotWidget .CookiebotWidget-body h2,
#CookiebotWidget .CookiebotWidget-body-inner h2 {
    font-family: 'BrandonGrotesque-Bold', Arial, sans-serif !important;
    letter-spacing: 1px !important;
    color: #1C1C1C !important;
}

#CookiebotWidget .CookiebotWidget-body,
#CookiebotWidget .CookiebotWidget-body-inner {
    font-size: 0.9375rem !important;   /* 15px */
    color: #1C1C1C !important;
}

/* Category list: the approved ticks and the "necessary" padlock both take
   Cookiebot's accent blue. Move them onto brand red. */
#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li svg,
#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-consents-list li.CookiebotWidget-approved svg {
    fill: #C8322E !important;
}

/* "Show details" disclosure link. */
#CookiebotWidget #CookiebotWidget-show-consent-details,
#CookiebotWidget .CookiebotWidget-show-consent-details {
    color: #C8322E !important;
    font-family: 'BrandonGrotesque-Bold', Arial, sans-serif !important;
    letter-spacing: 1px !important;
}

/* Shared button treatment — square, brand type. Height left at Cookiebot's
   48px on purpose (see note above). */
#CookiebotWidget #CookiebotWidget-buttons button {
    font-family: 'BrandonGrotesque-Bold', Arial, sans-serif !important;
    font-size: 0.875rem !important;    /* 14px, rem so it is size-stable */
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    border-width: 1px !important;
}

/* Primary — "Change your consent". */
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-change {
    background-color: #C8322E !important;
    border-color: #C8322E !important;
    color: #FFFFFF !important;
}

/* Secondary — "Withdraw your consent". Outlined dark on white (near 16:1). */
#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw {
    background-color: transparent !important;
    border-color: #1C1C1C !important;
    color: #1C1C1C !important;
}

#CookiebotWidget #CookiebotWidget-buttons #CookiebotWidget-btn-withdraw:hover {
    background-color: #1C1C1C !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
}

/* Close control — keep the glyph dark rather than accent blue, and keep a
   visible keyboard focus ring (WCAG 2.4.7). */
#CookiebotWidget .CookiebotWidget-header .CookiebotWidget-close svg {
    fill: #1C1C1C !important;
}

#CookiebotWidget button:focus-visible,
#CookiebotWidget a:focus-visible {
    outline: 2px solid #C8322E !important;
    outline-offset: 2px !important;
}

/* NOTE: the Cookiebot "powered by" logo is deliberately NOT resized here.
   An earlier max-height override shrank it to the point of looking broken,
   and it was the only rule in this file that was actually binding. It now
   scales with the banner's font-size like everything else. */