/* =========================================================
   Site header -- announcement bar, sticky main bar, navigation, mobile sheet
   Prefix: uq-site-header / uq-site-utility
   Markup: template-parts/site-header.php  Data: inc/site-header.php
   Behaviour: js/site-header.js

   Quo's header, rebuilt from quo.com measurements (Sept 2026) and populated
   with Roofer On Demand's content and brand colours. Quo's structure and
   proportions -- white bar, #222 text, warm-grey #F7F5F2 hovers, 6px radii,
   1px rgba(0,0,0,.1) keylines, the outlined / filled action pair --
   with ROD's navy announcement bar and ROD's yellow CTA at every width.
   Navy also marks the current page, where Quo uses its purple.

   Quo, as measured (px):
                     <480        480-767     768-991     >=992
     announcement    56, 12/400  56, 14/400  56, 14/500  56, 16/500
     bar             64          64          68          76
     gutter          20 | 0      32 | 16     40 | 16     48
     CTA             38          35          35          36
     sheet rows      56, 16px    72, 18px    74, 19px    --

   The CTA row is Quo's; the phone and CTA here are the site's 42px buttons
   instead (--uq-sh-button-height).

   WRITTEN MOBILE-FIRST, ON PURPOSE. The base rules are the phone bar and its
   menu sheet; the desktop bar is layered on at >= 992px, scoped to
   `.uq-site-header:not(.uq-site-header--collapsed)`. The inline fit check in
   the template adds --collapsed when a desktop-width window cannot fit the
   menu the editor has built -- the navigation then falls back to the
   hamburger instead of squeezing or wrapping -- and because the mobile layout
   is the base, that needs no second copy of any rule.

   Every class is uq-prefixed. The old header's selectors (.header, .top, .nav,
   .logo, .wrapper), which the Customizer's Additional CSS still targets, match
   nothing in here.
   ========================================================= */

/* ---------- Shared geometry tokens ----------
   On body, not :root: the admin-bar override below is keyed off the
   body.admin-bar class, and a custom property that uses var() resolves on the
   element that declares it -- declaring the offset on :root would freeze it
   before body could change --uq-site-header-top.

   --uq-site-header-offset is the one number sticky UI elsewhere needs: how far
   down the viewport the stuck bar reaches. Only the bar sticks; the
   announcement bar scrolls away, so it is not part of it. Used by style.css
   (--uq-pd-sticky-top), css/blog.css (--uq-blog-sticky-top) and js/blog.js. */
body {
    --uq-site-header-bar-height: 64px;
    --uq-site-header-top: 0px;
    --uq-site-header-offset: calc(var(--uq-site-header-top) + var(--uq-site-header-bar-height));
}

@media (min-width: 768px) {
    body {
        --uq-site-header-bar-height: 68px;
    }
}

@media (min-width: 992px) {
    body {
        --uq-site-header-bar-height: 76px;
    }
}

/* The WordPress admin bar is fixed at 46px from 601px and 32px from 783px, so
   the sticky bar parks under it. Below 601px WordPress makes the admin bar
   scroll away (position: absolute), so the bar sticks at 0 there. */
@media (min-width: 601px) {
    body.admin-bar {
        --uq-site-header-top: 46px;
    }
}

@media (min-width: 783px) {
    body.admin-bar {
        --uq-site-header-top: 32px;
    }
}

.uq-site-utility,
.uq-site-header {
    --uq-sh-black: #000000;
    --uq-sh-ink: #222222;
    --uq-sh-white: #FFFFFF;
    --uq-sh-yellow: var(--uq-theme-accent, #FDBB2F);
    --uq-sh-yellow-hover: #F3AE17;
    --uq-sh-navy: var(--uq-theme-primary, #104E8B);
    --uq-sh-muted: rgba(0, 0, 0, 0.6);
    /* Quo's warm greys: nav/link hover, outlined-button hover, panel tint. */
    --uq-sh-hover: #F7F5F2;
    --uq-sh-hover-button: #F7F6F5;
    --uq-sh-tint: rgba(247, 245, 242, 0.6);
    --uq-sh-border: rgba(0, 0, 0, 0.1);
    --uq-sh-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.1);
    --uq-sh-radius: 6px;
    --uq-sh-panel-radius: 10px;
    /* Height of the phone and appointment buttons, bar and sheet, at every
       width: the site's own button height -- the min-height: 42px that
       .uq-home-hero__button, .uq-service-gallery-hero__button and the
       .uq-project-split / .uq-service-feature filled buttons declare. Quo's
       compact 35-38px read as a different, smaller button beside the page's. */
    --uq-sh-button-height: 42px;
    --uq-sh-container: 1200px;
    /* Start / end gutters. Below 992px Quo's end gutter is smaller: the
       48px-wide menu button carries its own 12px of air. */
    --uq-sh-gutter: 20px;
    --uq-sh-gutter-end: 0px;
    /* The stable stack: Inter, with a metrics-matched Arial in front of plain
       Arial, so the bar does not re-flow when the webfont arrives. (a, p, li
       and button get it from style.css's !important exception group.) */
    --uq-sh-font: var(--uq-site-font-body-stable, var(--uq-site-font-body, "Inter", Arial, sans-serif));
    --uq-sh-font-heading: var(--uq-site-font-heading, Arial, sans-serif);
    --uq-sh-focus: #1A6EFF;
}

@media (min-width: 480px) {
    .uq-site-utility,
    .uq-site-header {
        --uq-sh-gutter: 32px;
        --uq-sh-gutter-end: 16px;
    }
}

@media (min-width: 768px) {
    .uq-site-utility,
    .uq-site-header {
        --uq-sh-gutter: 40px;
    }
}

/* After the 480 / 768 steps, so it is not overridden by them. */
@media (min-width: 992px) {
    .uq-site-utility,
    .uq-site-header {
        --uq-sh-gutter: 48px;
        --uq-sh-gutter-end: 48px;
    }

    /* Collapsed desktop: the menu button's glyph (not its 48px box) lands on
       the gutter, so logo and glyph frame the same 1200px as the full bar. */
    .uq-site-header--collapsed .uq-site-header__menu-button {
        margin-right: -12px;
    }
}

.uq-site-utility *,
.uq-site-utility *::before,
.uq-site-utility *::after,
.uq-site-header *,
.uq-site-header *::before,
.uq-site-header *::after {
    box-sizing: border-box;
}

/* ==========================================================
   ANNOUNCEMENT BAR -- Quo's: 56px, one centred line with an accent tile and
   an arrow; the whole bar is the link. In ROD navy. Not sticky.
   ========================================================== */
.uq-site-utility {
    position: relative;
    background: var(--uq-sh-navy);
    color: var(--uq-sh-white);
    font-family: var(--uq-sh-font);
}

.uq-site-utility__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 var(--uq-sh-gutter);
    color: var(--uq-sh-white);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    transition: none;
}

.uq-site-utility__link:hover,
.uq-site-utility__link:focus-visible {
    background: none;
    color: var(--uq-sh-white);
}

.uq-site-utility__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.uq-site-utility__icon {
    display: block;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    color: var(--uq-sh-yellow);
}

.uq-site-utility__text {
    /* Optical nudge. The line box is centred, but Inter's capitals and digits
       paint ~1-1.5px above the phone tile's centre; 1px down lines them up.
       Relative, so nothing else moves. */
    position: relative;
    top: 1px;
    display: flex;
    gap: 0.3em;
    min-width: 0;
    white-space: nowrap;
}

.uq-site-utility__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.uq-site-utility__sep,
.uq-site-utility__number {
    flex: 0 0 auto;
}

/* Quo's arrow: an 18px box, nudged right on hover. */
.uq-site-utility__arrow {
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-left: -4px;
    padding: 3.2px;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.uq-site-utility__link:hover .uq-site-utility__arrow {
    transform: translateX(0.25em);
}

/* The narrowest phones: the number never truncates, so "Call" goes. */
@media (max-width: 374px) {
    .uq-site-utility__link {
        padding-right: 16px;
        padding-left: 16px;
    }

    .uq-site-utility__inner {
        gap: 8px;
    }

    .uq-site-utility__call-word {
        display: none;
    }
}

@media (min-width: 480px) {
    .uq-site-utility__link {
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    .uq-site-utility__link {
        font-weight: 500;
    }

    .uq-site-utility__inner {
        gap: 12px;
    }

    .uq-site-utility__arrow {
        margin-left: -6px;
    }
}

@media (min-width: 992px) {
    .uq-site-utility__link {
        font-size: 16px;
    }
}

/* ==========================================================
   MAIN BAR -- base (mobile) layout
   ========================================================== */
.uq-site-header {
    position: -webkit-sticky;
    position: sticky;
    top: var(--uq-site-header-top, 0px);
    z-index: 1000;
    width: 100%;
    background: var(--uq-sh-white);
    color: var(--uq-sh-ink);
    font-family: var(--uq-sh-font);
}

/* Flat, as Quo's: no border or shadow, stuck or not. (.is-stuck, which
   js/site-header.js still toggles, is left as a hook.) */
.uq-site-header__bar {
    position: relative;
    height: var(--uq-site-header-bar-height, 64px);
    background: var(--uq-sh-white);
}

.uq-site-header__container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: calc(var(--uq-sh-container) + var(--uq-sh-gutter) + var(--uq-sh-gutter-end));
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--uq-sh-gutter-end) 0 var(--uq-sh-gutter);
}

/* ---------- Logo ----------
   --uq-sh-logo-h is the height of the VISIBLE mark. The logo file carries its
   own white border; inc/site-header.php measures it (the -t/-r/-b/-l
   fractions and the file's ratio, inline on the link) and this crops it back
   out, so the mark -- not the file -- sits on the gutter, and the gap to the
   navigation is the gap you see. Without those values it is a plain image
   at that height. */
.uq-site-header__logo {
    --uq-sh-logo-h: 29px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin-right: auto;
    overflow: hidden;
    color: var(--uq-sh-black);
    text-decoration: none;
    transition: none;
}

.uq-site-header__logo:hover,
.uq-site-header__logo:focus {
    background: none;
    color: var(--uq-sh-black);
}

.uq-site-header__logo-img {
    --uq-sh-logo-img-h: calc(var(--uq-sh-logo-h) / (1 - var(--uq-sh-logo-t, 0) - var(--uq-sh-logo-b, 0)));
    --uq-sh-logo-img-w: calc(var(--uq-sh-logo-img-h) * var(--uq-sh-logo-ratio, 0));
    display: block;
    flex: 0 0 auto;
    width: auto;
    height: var(--uq-sh-logo-img-h);
    max-width: none;
    margin:
        calc(var(--uq-sh-logo-img-h) * var(--uq-sh-logo-t, 0) * -1)
        calc(var(--uq-sh-logo-img-w) * var(--uq-sh-logo-r, 0) * -1)
        calc(var(--uq-sh-logo-img-h) * var(--uq-sh-logo-b, 0) * -1)
        calc(var(--uq-sh-logo-img-w) * var(--uq-sh-logo-l, 0) * -1);
    /* style.css rounds every <img> by 4px. */
    border-radius: 0;
}

.uq-site-header__logo-text {
    font-family: var(--uq-sh-font-heading);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .uq-site-header__logo {
        --uq-sh-logo-h: 31px;
    }
}

/* ---------- Actions: phone, CTA (Quo: Talk to Sales, Try for free) ----------
   Quo's third, the plain "Log in" link, was "Email us" here; it was removed
   at the client's request. */
.uq-site-header__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    margin-right: 16px;
}

/* Phones: the CTA alone; the phone is in the sheet. */
.uq-site-header__phone {
    display: none;
}

/* Quo's buttons: 1px border, 6px radius, 12px sides, 500 weight -- at the
   site's button height. min-height, not padding, sets it: each label's line
   box is shorter than 42px, so the flex centring splits the spare height
   evenly above and below whatever font size a breakpoint gives the label. */
.uq-site-header__phone,
.uq-site-header__cta,
.uq-site-header__sheet-cta,
.uq-site-header__sheet-call {
    align-items: center;
    justify-content: center;
    min-height: var(--uq-sh-button-height);
    margin: 0;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--uq-sh-radius);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
    -webkit-appearance: none;
    appearance: none;
}

/* "Talk to Sales": white, keyline, warm grey on hover. */
.uq-site-header__phone,
.uq-site-header__sheet-call {
    border-color: var(--uq-sh-border);
    background: var(--uq-sh-white);
    color: var(--uq-sh-black);
}

.uq-site-header__phone:hover,
.uq-site-header__phone:focus-visible,
.uq-site-header__sheet-call:hover,
.uq-site-header__sheet-call:focus-visible {
    border-color: var(--uq-sh-border);
    background: var(--uq-sh-hover-button);
    color: var(--uq-sh-black);
}

/* Quo's filled "Try for free" slot, dressed as the site's own primary button
   (.uq-home-hero__button--primary, "Book an Assessment"): ROD yellow fill and
   matching 1px border, 6px radius, the shared button face from the
   --uq-button-* tokens (Roobert 17 / 500; the family itself is in style.css's
   exception group, because style.css pins header buttons to the body face
   with !important), 20px sides, and the same hover -- a 1px lift and 88%
   opacity, not a colour change. And the same 42px height (the shared rule
   above), where it used to be a compact 38 / 35 / 36. */
.uq-site-header__cta,
.uq-site-header__sheet-cta {
    display: inline-flex;
    gap: 10px;
    padding: 0 16px;
    border-color: var(--uq-sh-yellow);
    background: var(--uq-sh-yellow);
    color: var(--uq-sh-black);
    font-size: var(--uq-button-font-size, 17px);
    font-weight: var(--uq-button-font-weight, 500);
    line-height: 1.2;
    transition: transform 0.3s, opacity 0.3s;
}

.uq-site-header__cta:hover,
.uq-site-header__sheet-cta:hover {
    border-color: var(--uq-sh-yellow);
    background: var(--uq-sh-yellow);
    color: var(--uq-sh-black);
    opacity: 0.88;
    transform: translateY(-1px);
}

.uq-site-header__cta:focus-visible,
.uq-site-header__sheet-cta:focus-visible {
    border-color: var(--uq-sh-yellow);
    background: var(--uq-sh-yellow);
    color: var(--uq-sh-black);
}

/* The narrowest phones: clear air between the logo and "Book now". */
@media (max-width: 374px) {
    .uq-site-header__cta {
        padding-right: 12px;
        padding-left: 12px;
    }
}

.uq-site-header__cta-long {
    display: none;
}

/* ---------- Menu button: Quo's 48x36, 24px glyph -> X ---------- */
.uq-site-header__menu-button {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--uq-sh-radius);
    background: transparent;
    color: var(--uq-sh-black);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.uq-site-header__menu-button span {
    position: absolute;
    left: 12px;
    width: 24px;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease, top 0.2s ease, height 0.2s ease;
}

.uq-site-header__menu-button span:nth-child(1) {
    top: 11px;
}

.uq-site-header__menu-button span:nth-child(2) {
    top: 17px;
}

.uq-site-header__menu-button span:nth-child(3) {
    top: 23px;
}

/* Quo's X is a finer line than its bars. */
.uq-site-header__menu-button[aria-expanded="true"] span:nth-child(1),
.uq-site-header__menu-button[aria-expanded="true"] span:nth-child(3) {
    top: 17.25px;
    height: 1.5px;
}

.uq-site-header__menu-button[aria-expanded="true"] span:nth-child(1) {
    transform: rotate(45deg);
}

.uq-site-header__menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.uq-site-header__menu-button[aria-expanded="true"] span:nth-child(3) {
    transform: rotate(-45deg);
}

@media (min-width: 480px) {
    .uq-site-header__actions {
        margin-right: 24px;
    }
}

/* ==========================================================
   MOBILE SHEET (base): the panel is a fixed sheet under the bar
   ========================================================== */
.uq-site-header__panel {
    /* Quo's row geometry, per breakpoint (below). */
    --uq-sh-row-pad-x: 24px;
    --uq-sh-row-pad-y: 16px;
    position: fixed;
    z-index: 1;
    /* js/site-header.js measures the bar's bottom edge when the sheet opens
       (the announcement bar may still be partly on screen). The fallback is
       the stuck position. */
    top: var(--uq-sh-sheet-top, var(--uq-site-header-offset, 64px));
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--uq-sh-sheet-top, var(--uq-site-header-offset, 64px)));
    max-height: calc(100dvh - var(--uq-sh-sheet-top, var(--uq-site-header-offset, 64px)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--uq-sh-white);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.uq-site-header.is-menu-open .uq-site-header__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}

.uq-site-header__nav {
    flex: 0 0 auto;
}

.uq-site-header__menu,
.uq-site-header__links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.uq-site-header__menu > li,
.uq-site-header__links > li {
    margin: 0;
    padding: 0;
}

.uq-site-header__menu > li::before,
.uq-site-header__links > li::before {
    content: none;
}

/* Quo: a keyline ABOVE every row -- the first one is the line under the bar. */
.uq-site-header__item {
    border-top: 1px solid var(--uq-sh-border);
}

.uq-site-header__toggle,
.uq-site-header__nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: var(--uq-sh-row-pad-y) var(--uq-sh-row-pad-x);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--uq-sh-ink);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.uq-site-header__nav-link:hover,
.uq-site-header__nav-link:focus-visible,
.uq-site-header__toggle:hover,
.uq-site-header__item.is-open > .uq-site-header__toggle {
    background: var(--uq-sh-hover);
    color: var(--uq-sh-ink);
}

.uq-site-header__nav-link--label {
    cursor: default;
}

.uq-site-header__nav-link[aria-current="page"],
.uq-site-header__item.is-current > .uq-site-header__toggle {
    color: var(--uq-sh-navy);
}

/* Quo's chevron -- its 16x9 hairline -- 15px wide in the sheet, 40px in from
   the edge, and not rotated when open (the row's tint says it is open). A
   mask, so it takes the text colour. */
.uq-site-header__chevron {
    display: block;
    flex: 0 0 auto;
    width: 15px;
    aspect-ratio: 16 / 9;
    margin-right: calc(40px - var(--uq-sh-row-pad-x));
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Accordion panel: animates its height with grid rows, and is
   visibility:hidden while closed so nothing inside it can take focus. Opened
   only inside an OPEN sheet: a child set to visibility:visible would otherwise
   show through the closed (hidden) sheet. */
.uq-site-header__dropdown {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.22s ease, visibility 0s linear 0.22s;
}

.uq-site-header.is-menu-open .uq-site-header__item.is-open > .uq-site-header__dropdown {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.22s ease, visibility 0s linear 0s;
}

.uq-site-header__dropdown-inner {
    min-height: 0;
    overflow: hidden;
}

/* Quo: a 60% warm-grey tint under a keyline. */
.uq-site-header__dropdown-main {
    border-top: 1px solid var(--uq-sh-border);
    background: var(--uq-sh-tint);
}

.uq-site-header__columns {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
}

.uq-site-header__column {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Group titles: the heading face, as Quo's. A link title is an <a>, which
   style.css pins to the body face with !important, so the family is also in
   style.css's exception group. */
.uq-site-header__column-title {
    display: block;
    align-self: flex-start;
    margin: 0 0 10px;
    padding: 4px 8px;
    border-radius: var(--uq-sh-radius);
    color: var(--uq-sh-black);
    font-family: var(--uq-sh-font-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.24px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

a.uq-site-header__column-title:hover,
a.uq-site-header__column-title:focus-visible {
    background: var(--uq-sh-hover);
    color: var(--uq-sh-black);
}

.uq-site-header__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Quo's 3px 8px link pills. The 10px between them is shared out as extra,
   invisible hit area, so each target is ~37px tall without looking bigger. */
.uq-site-header__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: var(--uq-sh-radius);
    color: var(--uq-sh-black);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.uq-site-header__link::after {
    content: "";
    position: absolute;
    top: -5px;
    right: 0;
    bottom: -5px;
    left: 0;
}

.uq-site-header__link:hover,
.uq-site-header__link:focus-visible {
    background: var(--uq-sh-hover);
    color: var(--uq-sh-black);
}

.uq-site-header__link[aria-current="page"] {
    color: var(--uq-sh-navy);
}

.uq-site-header__link--label {
    color: var(--uq-sh-muted);
}

/* Quo's bottom banner: keyline above, 17.5px tall padding. */
.uq-site-header__dropdown-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 17.5px var(--uq-sh-row-pad-x);
    border-top: 1px solid var(--uq-sh-border);
    color: var(--uq-sh-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.uq-site-header__dropdown-footer:hover,
.uq-site-header__dropdown-footer:focus-visible {
    background: var(--uq-sh-tint);
    color: var(--uq-sh-black);
}

.uq-site-header__arrow {
    display: block;
    flex: 0 0 auto;
    width: 11px;
    height: 10px;
}

/* Quo drops the feature card in the sheet, and so does this. */
.uq-site-header__card {
    display: none;
}

/* ---------- Sheet footer (phones): Quo's stacked buttons ---------- */
.uq-site-header__sheet-footer {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    padding: 24px 24px calc(28px + env(safe-area-inset-bottom, 0px));
}

.uq-site-header__sheet-cta,
.uq-site-header__sheet-call {
    display: flex;
    width: 100%;
}

.uq-site-header__sheet-hours {
    display: block;
    color: var(--uq-sh-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

/* ---------- 480-767: Quo's roomier rows ---------- */
@media (min-width: 480px) {
    .uq-site-header__panel {
        --uq-sh-row-pad-x: 32px;
        --uq-sh-row-pad-y: 24px;
    }

    .uq-site-header__toggle,
    .uq-site-header__nav-link {
        font-size: 18px;
    }

    .uq-site-header__columns {
        padding: 26px 24px 20px;
    }

    .uq-site-header__column-title,
    .uq-site-header__link {
        font-size: 16px;
    }

    .uq-site-header__sheet-footer {
        padding-right: 32px;
        padding-left: 32px;
    }
}

/* ---------- 768+: the whole action set is in the bar ---------- */
@media (min-width: 768px) {
    .uq-site-header__logo {
        --uq-sh-logo-h: 31px;
    }

    .uq-site-header__actions {
        margin-right: 20px;
    }

    /* The phone and the CTA share the same 20px sides, so the air before the
       first digit and after the last matches the air around "Make an
       Appointment": 21px from the outer edge to the label on both sides of
       both buttons, border included. Quo's 12px read as a tighter, different
       button beside it. Width still follows the label. */
    .uq-site-header__phone {
        display: inline-flex;
        padding: 5px 20px;
        font-size: 15px;
        line-height: 22.5px;
    }

    .uq-site-header__cta {
        padding: 0 20px;
    }

    .uq-site-header__cta-long {
        display: inline;
    }

    .uq-site-header__cta-short {
        display: none;
    }

    .uq-site-header__panel {
        --uq-sh-row-pad-x: 40px;
        --uq-sh-row-pad-y: 24px;
    }

    .uq-site-header__toggle,
    .uq-site-header__nav-link {
        font-size: 19px;
        line-height: 26px;
    }

    .uq-site-header__columns {
        display: grid;
        grid-template-columns: repeat(var(--uq-sh-cols, 3), minmax(0, 1fr));
        gap: 0;
        padding: 26px 32px;
    }

    .uq-site-header__column-title,
    .uq-site-header__link {
        font-size: 17px;
    }

    /* A flat dropdown (links only): one list, flowed down Quo's columns. */
    .uq-site-header__item--flat .uq-site-header__column {
        grid-column: 1 / -1;
    }

    .uq-site-header__item--flat .uq-site-header__links {
        display: block;
        columns: var(--uq-sh-cols, 3);
        column-gap: 24px;
    }

    .uq-site-header__item--flat .uq-site-header__links > li {
        padding-bottom: 10px;
        break-inside: avoid;
    }

    /* The buttons live in the bar from here. */
    .uq-site-header__sheet-footer {
        display: none;
    }
}

/* Short landscape phones: the rows tighten so more of the menu is on screen;
   the sheet itself always scrolls, so nothing is ever cut off. */
@media (max-height: 500px) and (orientation: landscape) {
    .uq-site-header__panel {
        --uq-sh-row-pad-y: 12px;
    }

    .uq-site-header__sheet-footer {
        padding-top: 16px;
    }
}

/* While the sheet is open js pins the BAR where it is (position: fixed at the
   measured top), because the page underneath is locked with position: fixed
   and a sticky element must not be left to guess where its scroll container
   went. The header element itself stays in the flow at the bar's height, so
   nothing below it moves -- not even behind the sheet while it fades. */
.uq-site-header.is-menu-open {
    height: var(--uq-site-header-bar-height, 64px);
}

.uq-site-header.is-menu-open .uq-site-header__bar {
    position: fixed;
    top: var(--uq-sh-open-top, 0px);
    right: 0;
    left: 0;
}

/* The page's floating widgets sit far above anything a header can reasonably
   claim -- Endorsal's at z-index 1,000,000 and 2,147,483,001, the footer's
   back-to-top button at 99,999 -- so they are hidden while the menu sheet is
   open instead of being allowed to float over it. */
html.uq-site-header-menu-open #NDRSL-fomo,
html.uq-site-header-menu-open #NDRSL-reviewhq,
html.uq-site-header-menu-open .scrollup,
html.uq-site-header-menu-open .grecaptcha-badge {
    visibility: hidden !important;
}

/* ==========================================================
   DESKTOP (>= 992px)
   ========================================================== */
@media (min-width: 992px) {
    /* Actions keep Quo's desktop size whether or not the bar collapsed. */
    .uq-site-header__phone {
        font-size: 16px;
        line-height: 24px;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__logo {
        margin-right: 16px;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__menu-button,
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__sheet-footer {
        display: none;
    }

    /* The panel is just the nav's slot in the bar, packed to the logo. */
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__panel {
        position: static;
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        min-width: 0;
        max-height: none;
        height: 100%;
        overflow: visible;
        background: none;
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: none;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__nav,
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__menu {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__menu {
        flex-wrap: nowrap;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__item {
        flex: 0 0 auto;
        border-top: 0;
    }

    /* Quo's nav controls: 32px, 8px 16px, 16/16 at 500, #222, 6px pill,
       #F7F5F2 on hover and while open. A dropdown trigger ends in a 10px
       chevron with 10px either side. */
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__toggle,
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__nav-link {
        width: auto;
        padding: 8px 16px;
        border-radius: var(--uq-sh-radius);
        font-size: 16px;
        font-weight: 500;
        line-height: 16px;
        white-space: nowrap;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__toggle {
        gap: 10px;
        padding-right: 10px;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__chevron {
        width: 10px;
        margin-right: 0;
    }

    /* ---------- Quo's mega panel ----------
       Flush under the bar (22px below the triggers), centred on it, 78px in
       from each side, 870-1280px. White, 1px keyline, 10px radius, Quo's
       shadow. Opens instantly, as Quo's does. */
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__dropdown {
        position: absolute;
        top: 100%;
        left: 50%;
        display: none;
        width: min(max(calc(100% - 156px), 870px), 1280px);
        max-height: calc(100vh - var(--uq-site-header-offset, 76px) - 24px);
        overflow: auto;
        border: 1px solid var(--uq-sh-border);
        border-radius: var(--uq-sh-panel-radius);
        background: var(--uq-sh-white);
        box-shadow: var(--uq-sh-shadow);
        visibility: visible;
        transform: translateX(-50%);
        transition: none;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__item.is-open > .uq-site-header__dropdown {
        display: block;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__dropdown-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        overflow: visible;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__dropdown--has-card .uq-site-header__dropdown-inner {
        grid-template-columns: minmax(0, 1fr) 290px;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__dropdown-main {
        display: flex;
        flex-direction: column;
        min-width: 0;
        border-top: 0;
        background: none;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__columns {
        display: grid;
        flex: 1 1 auto;
        grid-template-columns: repeat(var(--uq-sh-cols, 3), minmax(0, 1fr));
        gap: 24px;
        padding: 40px;
    }

    /* Quo: Roobert 24 / 500, -0.24px, in a 4px 8px pill, 12px above the links. */
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__column-title {
        margin-bottom: 12px;
        font-size: 24px;
        font-weight: 500;
        line-height: 1.2;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__links {
        gap: 4px;
    }

    /* Quo: 16 / 24 / 400 links in a 3px 8px pill. */
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__link {
        font-size: 16px;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__link::after {
        content: none;
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__item--flat .uq-site-header__links > li {
        padding-bottom: 4px;
    }

    /* Quo's bottom banner: 17.5px 40px, rounded into the panel's corner. */
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__dropdown-footer {
        padding: 17.5px 40px;
        border-radius: 0 0 var(--uq-sh-panel-radius) var(--uq-sh-panel-radius);
    }

    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__dropdown--has-card .uq-site-header__dropdown-footer {
        border-radius: 0 0 0 var(--uq-sh-panel-radius);
    }

    /* Optional feature card (menu-item ACF image). */
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__card {
        display: flex;
        flex-direction: column;
        min-width: 0;
        border-left: 1px solid var(--uq-sh-border);
        background: var(--uq-sh-tint);
        color: var(--uq-sh-black);
        text-decoration: none;
        transition: none;
    }

    .uq-site-header__card-visual {
        display: grid;
        flex: 1 1 auto;
        min-height: 224px;
        padding: 24px;
        place-items: center;
        overflow: hidden;
    }

    .uq-site-header__card-img {
        display: block;
        max-width: 100%;
        height: auto;
        border-radius: 0;
        object-fit: contain;
    }

    .uq-site-header__card-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 57px;
        padding: 16px 24px;
        border-top: 1px solid var(--uq-sh-border);
        font-size: 16px;
        font-weight: 500;
    }

    .uq-site-header__card-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 4px;
        transition: background-color 180ms ease, color 180ms ease;
    }

    .uq-site-header__card:hover .uq-site-header__card-arrow,
    .uq-site-header__card:focus-visible .uq-site-header__card-arrow {
        background: var(--uq-sh-black);
        color: var(--uq-sh-white);
    }

    /* ---------- Actions ---------- */
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__actions {
        margin-right: 0;
        margin-left: 16px;
    }

    /* The fit check drops the phone before it collapses the bar. */
    .uq-site-header--no-phone .uq-site-header__phone {
        display: none;
    }
}

/* ==========================================================
   Focus -- visible everywhere. style.css sets `a:focus { outline: 0 }`
   site-wide, so this has to be restated.
   ========================================================== */
.uq-site-utility a:focus-visible,
.uq-site-header a:focus-visible,
.uq-site-header button:focus-visible {
    outline: 2px solid var(--uq-sh-focus);
    outline-offset: 2px;
}

.uq-site-utility a:focus-visible {
    outline-color: var(--uq-sh-white);
    outline-offset: -4px;
}

/* Full-bleed sheet rows: inside the row, or the ring is clipped by the sheet. */
.uq-site-header__toggle:focus-visible,
.uq-site-header__nav-link:focus-visible,
.uq-site-header__dropdown-footer:focus-visible {
    outline-offset: -2px;
}

@media (min-width: 992px) {
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__toggle:focus-visible,
    .uq-site-header:not(.uq-site-header--collapsed) .uq-site-header__nav-link:focus-visible {
        outline-offset: 2px;
    }
}

/* ==========================================================
   No JavaScript: the dropdowns and the sheet still work
   ========================================================== */
@media (min-width: 992px) {
    .no-js .uq-site-header .uq-site-header__item--dropdown:hover > .uq-site-header__dropdown,
    .no-js .uq-site-header .uq-site-header__item--dropdown:focus-within > .uq-site-header__dropdown {
        display: block;
    }
}

/* Below the desktop bar the menu is printed open, full width under the bar
   (which then scrolls with the page instead of sticking over it). */
@media (max-width: 991px) {
    .no-js .uq-site-header {
        position: relative;
    }

    .no-js .uq-site-header__bar {
        height: auto;
    }

    .no-js .uq-site-header__container {
        flex-wrap: wrap;
        height: auto;
    }

    .no-js .uq-site-header__actions {
        height: var(--uq-site-header-bar-height, 64px);
    }

    .no-js .uq-site-header__menu-button {
        display: none;
    }

    .no-js .uq-site-header__panel {
        position: static;
        order: 1;
        flex: 0 0 calc(100% + var(--uq-sh-gutter) + var(--uq-sh-gutter-end));
        max-height: none;
        margin: 0 calc(var(--uq-sh-gutter-end) * -1) 0 calc(var(--uq-sh-gutter) * -1);
        overflow: visible;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .no-js .uq-site-header__dropdown {
        grid-template-rows: 1fr;
        visibility: visible;
    }
}

@media (prefers-reduced-motion: reduce) {
    .uq-site-utility *,
    .uq-site-header,
    .uq-site-header *,
    .uq-site-header *::before,
    .uq-site-header *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}