/**
 * RDW Header widget — front-end styles.
 *
 * Clones the Resin Driveway UK header: a full-width navy utility bar on top, and
 * below it a floating white "pill" bar (logo, primary menu with dropdowns, and a
 * Driveway Calculator button). On narrow screens the pill shows the logo + a
 * compact calculator icon, and the envelope / menu / phone icons dock to a fixed
 * bar at the bottom of the screen. The mobile switch is driven by the ".is-mobile"
 * class that header.js toggles at the widget's breakpoint.
 *
 * Live-site colours: navy #0d3577, gold #ffca00, menu text #4d5061.
 *
 * @package RDW_Store_Suite
 * @since   1.14.0
 */

.rdw-header { width: 100%; font-family: inherit; }
/* Sticky: header.js adds .rdw-is-fixed on scroll (to the whole header or just
   the main bar) and inserts a spacer to keep the page from jumping. */
.rdw-header.rdw-is-fixed,
.rdw-header .rdw-header__main.rdw-is-fixed { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 1000; }
.rdw-header__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.rdw-header a { text-decoration: none; }
.rdw-header ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Top utility bar ---------- */
.rdw-header__top { background: #0d3577; }
.rdw-header__top .rdw-header__inner { justify-content: space-between; min-height: 54px; }
.rdw-header__utility .rdw-menu { display: flex; align-items: center; gap: 40px; }
.rdw-header__utility .rdw-menu > li > a {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: -.01em;
    padding: 14px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rdw-header__utility .rdw-menu > li > a:hover { opacity: .82; }
.rdw-header__actions { display: flex; align-items: center; gap: 18px; }
.rdw-header__call { display: inline-flex; align-items: baseline; gap: 7px; color: #fff; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #ffca00; }
.rdw-header__call-label { font-size: 15px; }
.rdw-header__call-num { color: #ffca00; font-size: 16px; }
.rdw-header__extra { display: inline-flex; align-items: center; color: #fff; }

/* Top-bar dropdowns (About Us, Help & Advice submenus) */
.rdw-header__utility .rdw-menu > li { position: relative; }
.rdw-header__utility .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: #0d3577;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    padding: 6px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 60;
}
.rdw-header__utility .rdw-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.rdw-header__utility .sub-menu a {
    display: block;
    padding: 10px 18px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
    transition: background-color .15s ease;
}
.rdw-header__utility .sub-menu a:hover { background: #1f4aa0; }

/* ---------- Main bar: a floating white pill (Figma: 105px tall, r150, drop shadow) ---------- */
.rdw-header__main { background: transparent; padding: 14px 0; }
.rdw-header__main .rdw-header__inner {
    background: #fff;
    border-radius: 150px;
    min-height: 105px;
    padding: 8px 8px 8px 26px;
    gap: 18px;
    box-shadow: 0 4px 17px rgba(0, 0, 0, .25);
    justify-content: space-between;
}
.rdw-header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.rdw-header__logo img { height: 66px; width: auto; display: block; }
.rdw-header__logo-text { font-size: 24px; font-weight: 800; color: #0d3577; }

/* Primary menu — labels stack over a centred chevron, and hovering an item
   shows a cream cell with a gold underline bar (per the Figma). */
.rdw-header__primary { flex: 1 1 auto; display: flex; justify-content: center; align-self: stretch; }
.rdw-header__primary > .rdw-menu { display: flex; align-items: stretch; gap: 16px; }
.rdw-header__primary > .rdw-menu > li { position: relative; display: flex; }
.rdw-header__primary > .rdw-menu > li > a {
    color: #4d5061;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
    line-height: 1.15;
    padding: 24px 16px 18px;
    margin: -8px 0;              /* fill the pill's vertical padding so the hover cell reaches its edges */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 9px;
    border-bottom: 4px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* centred chevron below the label — a thin V (border corner), like the design */
.rdw-header__primary > .rdw-menu > li.menu-item-has-children > a::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform .2s ease;
}
/* Hover AND the current page share the same look: cream cell + gold underline. */
.rdw-header__primary > .rdw-menu > li:hover > a,
.rdw-header__primary > .rdw-menu > li.current-menu-item > a,
.rdw-header__primary > .rdw-menu > li.current-menu-ancestor > a { background: #fdf3d6; border-bottom-color: #ffca00; }
.rdw-header__primary > .rdw-menu > li:hover > a::after { transform: rotate(-135deg); margin-top: 2px; }
/* Primary-menu label alignment (class set on the widget wrapper by the control). */
.rdw-menu-align-left  .rdw-header__primary > .rdw-menu > li > a { align-items: flex-start; }
.rdw-menu-align-center .rdw-header__primary > .rdw-menu > li > a { align-items: center; }
.rdw-menu-align-right .rdw-header__primary > .rdw-menu > li > a { align-items: flex-end; }

/* Dropdown */
.rdw-header__primary .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(13, 53, 119, .16);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 40;
}
.rdw-header__primary > .rdw-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.rdw-header__primary .sub-menu a {
    display: block;
    padding: 11px 20px;
    color: #4d5061;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.rdw-header__primary .sub-menu a:hover { background: #f4f5f7; color: #0d3577; }

/* CTA button (navy pill) — Figma: r41.5, gold calc icon, two-line Black label */
.rdw-header__cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #0d3577;
    color: #fff;
    padding: 14px 30px;
    border-radius: 41.5px;
    flex: 0 0 auto;
    border: 0;
    transition: background-color .18s ease, box-shadow .18s ease;
}
.rdw-header__cta svg { height: 40px; width: auto; color: #ffca00; flex: 0 0 auto; }
.rdw-header__cta i { color: #ffca00; }
.rdw-header__cta span { color: #fff; font-size: 16px; font-weight: 900; text-transform: uppercase; line-height: 1.05; letter-spacing: .01em; text-align: left; white-space: normal; max-width: 110px; }
.rdw-header__cta:hover { background: #12408f; }

/* Compact calculator button — shown next to the logo on mobile only */
.rdw-header__cta-mini { display: none; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: #0d3577; flex: 0 0 auto; }
.rdw-header__cta-mini svg { height: 28px; width: auto; color: #ffca00; }
.rdw-header__cta-mini i { color: #ffca00; font-size: 26px; }

/* Cart (mini-cart shortcode inherits its own styling; keep it aligned) */
.rdw-header__cart { display: inline-flex; align-items: center; }
/* The "Main bar" cart placement is for tablet/mobile only (shown next to the
   logo + calculator icon when the desktop menu has collapsed). */
/* The main-bar cart shows only in the mobile layout (revealed by the media
   query below); hidden by default so a stale .is-mobile class can't reveal it. */
.rdw-header__cart--main { display: none; }
/* Order of the compact calculator icon vs the cart on the tablet/mobile main
   bar (class set on the widget wrapper by the "Tablet/mobile order" control).
   The logo keeps order 0, so these sit after it and before the mobile icons. */
.rdw-mborder-calc .rdw-header__cta-mini  { order: 1; }
.rdw-mborder-calc .rdw-header__cart--main { order: 2; }
.rdw-mborder-calc .rdw-header__mobile     { order: 3; }
.rdw-mborder-cart .rdw-header__cart--main { order: 1; }
.rdw-mborder-cart .rdw-header__cta-mini  { order: 2; }
.rdw-mborder-cart .rdw-header__mobile     { order: 3; }

/* ---------- Mobile action icons ---------- */
.rdw-header__mobile { display: none; align-items: center; gap: 12px; }
.rdw-header__micon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffca00;
    color: #0d3577;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.rdw-header__micon svg { width: 20px; height: 20px; }

/* ---------- Drawer (design: "Resin Driveways Mobile" — Drawer.dc.html) ----------
   A white panel of flat rows that each NAVIGATE (no accordions). Header lockup,
   search, eight nav rows, a basket row, a spacer, and the footer actions, laid
   out as a flex column so the footer sits at the bottom and is pushed down on a
   short screen. Standardised on the storefront-kit yellow #FFCA00 (v1.28.8;
   the drawer design's #F5B60C was retagged to match the rest of the site). */
.rdw-header__drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(390px, 100vw);
    background: #fff;
    color: #1B2436;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1000;
    overflow-y: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.rdw-header__drawer.is-open { transform: translateX(0); }

/* Header lockup + close */
.rdw-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #E4E8F0; }
.rdw-drawer__brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rdw-drawer__logo-img { display: block; height: 34px; width: auto; max-width: 200px; object-fit: contain; }
.rdw-drawer__mark { display: inline-flex; flex: 0 0 auto; }
.rdw-drawer__mark svg { width: 30px; height: 30px; display: block; }
.rdw-drawer__wordmark { display: flex; flex-direction: column; }
.rdw-drawer__wm1 { font-weight: 800; font-size: 12px; line-height: 1; letter-spacing: .02em; color: #0D3577; }
.rdw-drawer__wm2 { font-weight: 600; font-size: 12px; line-height: 1.2; color: #3F62A8; }
.rdw-header__close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 0;
    background: #F1F4FA;
    color: #0D3577;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rdw-header__close svg { width: 20px; height: 20px; }

/* Search (bottom padding trimmed 10->4 to help the ten-row menu fit 390x844). */
.rdw-drawer__search { padding: 14px 16px 4px; }
.rdw-drawer__search-box { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 14px; background: #F1F4FA; border: 1px solid #E4E8F0; }
.rdw-drawer__search-ic { display: inline-flex; flex: 0 0 auto; color: #8894AC; }
.rdw-drawer__search-ic svg { width: 18px; height: 18px; }
.rdw-drawer__search-input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-family: inherit; font-weight: 400; font-size: 14px; line-height: 1; color: #1B2436; padding: 0; }
.rdw-drawer__search-input:focus { outline: none; }
.rdw-drawer__search-input::placeholder { color: #8894AC; opacity: 1; }

/* Nav rows — a top-level item is a link; the chevron means "go". A parent with
   children keeps its link and gets a chevron TOGGLE that reveals indented
   sub-rows (accordion wired in header.js). */
.rdw-drawer__nav { display: flex; flex-direction: column; padding: 0 8px; }
.rdw-drawer__nav > * + * { border-top: 1px solid #EEF1F7; }
.rdw-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 7px 8px; border-radius: 12px; }
.rdw-drawer__row-label { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; line-height: 1.25; color: #0D3577; min-width: 0; }
/* Show the whole menu label — wrap long text and honour any <br> the menu
   author added, rather than truncating with an ellipsis. */
.rdw-drawer__row-label > span { overflow-wrap: anywhere; }
.rdw-drawer__row-ic { display: inline-flex; flex: 0 0 auto; color: #FFCA00; }
.rdw-drawer__row-ic svg { width: 18px; height: 18px; }
.rdw-drawer__chev { display: inline-flex; flex: 0 0 auto; color: #8894AC; }
.rdw-drawer__chev svg { width: 18px; height: 18px; }
.rdw-drawer__row--featured { background: #F7F9FD; }

/* Parent-with-children: the link fills the row, the toggle sits at the end. */
.rdw-drawer__group { display: flex; flex-direction: column; }
.rdw-drawer__rowwrap { display: flex; align-items: stretch; }
.rdw-drawer__rowwrap .rdw-drawer__row--parent { flex: 1 1 auto; justify-content: flex-start; border-radius: 12px 0 0 12px; }
.rdw-drawer__toggle { flex: 0 0 auto; width: 48px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: #8894AC; cursor: pointer; border-radius: 0 12px 12px 0; }
.rdw-drawer__toggle .rdw-drawer__chev { transform: rotate(90deg); transition: transform .2s ease; }
.rdw-drawer__group.is-open .rdw-drawer__toggle .rdw-drawer__chev { transform: rotate(-90deg); }

/* Indented children, hidden until the parent is expanded. */
.rdw-drawer__sub { display: flex; flex-direction: column; background: #FAFBFE; border-radius: 0 0 12px 12px; }
.rdw-drawer__sub[hidden] { display: none; }
.rdw-drawer__sub .rdw-drawer__row--sub + .rdw-drawer__row--sub { border-top: 1px solid #EEF1F7; }
.rdw-drawer__row--sub { min-height: 46px; padding-left: 18px; }
.rdw-drawer__row--sub .rdw-drawer__row-label { font-weight: 500; font-size: 14px; color: #4D5061; }

/* Basket row — one link, full 56px hit area. display:flex + min-height are
   forced so an active theme that resets <a> (e.g. display:inline / height:auto)
   can't collapse the row to its content height. */
.rdw-drawer__basket { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 16px 0; min-height: 56px; height: 56px; padding: 0 14px; border-radius: 14px; background: #F1F4FA; border: 1px solid #E4E8F0; box-sizing: border-box; }
.rdw-drawer__basket-l { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; line-height: 1; color: #0D3577; }
.rdw-drawer__basket-ic { display: inline-flex; flex: 0 0 auto; color: #0D3577; }
.rdw-drawer__basket-ic svg { width: 20px; height: 20px; }
.rdw-drawer__basket-r { display: flex; align-items: center; gap: 8px; }
.rdw-drawer__basket-total { font-weight: 700; font-size: 14px; line-height: 1; color: #0D3577; }
.rdw-drawer__basket-total .woocommerce-Price-amount { font-weight: 700; }
.rdw-drawer__basket-count { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px; background: #FFCA00; color: #0A2757; font-weight: 700; font-size: 12px; line-height: 24px; text-align: center; }

/* Spacer pushes the footer to the bottom */
.rdw-drawer__spacer { flex: 1 1 auto; }

/* Footer actions */
.rdw-drawer__footer { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); border-top: 1px solid #E4E8F0; background: #fff; }
.rdw-drawer__calc { display: flex; align-items: center; justify-content: center; gap: 10px; height: 52px; border-radius: 14px; background: #0D3577; color: #fff; font-weight: 700; font-size: 15px; line-height: 1; }
.rdw-drawer__calc-ic { display: inline-flex; flex: 0 0 auto; color: #FFCA00; }
.rdw-drawer__calc-ic svg { width: 18px; height: 18px; }
.rdw-drawer__phone { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; border-radius: 14px; border: 1.5px solid #0D3577; color: #0D3577; font-weight: 600; font-size: 15px; line-height: 1; }
.rdw-drawer__phone-ic { display: inline-flex; flex: 0 0 auto; color: #0D3577; }
.rdw-drawer__phone-ic svg { width: 17px; height: 17px; }

.rdw-header__overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 18, 45, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
    z-index: 999;
}
.rdw-header__overlay.is-open { opacity: 1; visibility: visible; }

/* Reduced motion: the drawer and its backdrop appear without sliding / fading
   for anyone who has asked the OS for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .rdw-header__drawer,
    .rdw-header__overlay { transition: none; }
}

/* ---------- Mobile layout ----------
   Driven ENTIRELY by this CSS media query (instant, no JavaScript lag) at the
   1024px breakpoint — the widget's default and Elementor's tablet width. The
   `.is-mobile` class header.js toggles is now used ONLY to turn the mobile icon
   row into a fixed bottom bar (a progressive enhancement), and it too is gated
   to this width. This means a stale `.is-mobile` class left over from an
   Elementor device-preview switch (or a fast resize) can no longer force the
   mobile layout onto the desktop view — which is what made the menu / call /
   cart / CTA vanish and the bottom bar stick when flipping between device
   modes. With zero JavaScript the header still collapses correctly here too. */
@media (max-width: 1024px) {
    .rdw-header__top { display: none; }
    .rdw-header__primary,
    .rdw-header__cta { display: none; }
    .rdw-header__main .rdw-header__inner { justify-content: space-between; }
    .rdw-header__cta-mini { display: inline-flex; }
    .rdw-header__mobile { display: flex; }
    .rdw-header__cart--main { display: inline-flex; align-items: center; }

    /* Fixed bottom action bar (envelope / menu / phone) — enabled by the
       widget's bottom-bar option, which header.js flags with .is-mobile. */
    .rdw-header--bottombar.is-mobile .rdw-header__mobile {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 14px;
        background: #0d3577;
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
        z-index: 998;
    }
    .rdw-header--bottombar.is-mobile .rdw-header__micon { width: 46px; height: 46px; }
    /* Keep page content clear of the fixed bar (body class added by header.js). */
    body.rdw-has-bottombar { padding-bottom: 74px; }
}