/**
 * 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 ---------- */
.rdw-header__drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(340px, 86vw);
    background: #fff;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1000;
    overflow-y: auto;
    padding: 24px 22px 32px;
}
.rdw-header__drawer.is-open { transform: translateX(0); }
/* Top row of the drawer: logo on the left, close button on the right. */
.rdw-header__drawer-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.rdw-header__close {
    margin-left: auto;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #f1f2f5;
    color: #0d3577;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rdw-header__close svg { width: 20px; height: 20px; }
.rdw-header__drawer .rdw-menu--stack { display: block; }
.rdw-header__drawer .rdw-menu--stack li { border-bottom: 1px solid #eef0f3; }
.rdw-header__drawer .rdw-menu--stack a {
    display: block;
    padding: 13px 4px;
    color: #0d3577;
    font-size: 15px;
    font-weight: 700;
}
.rdw-header__drawer .rdw-menu--stack .sub-menu { display: none; padding: 0 0 6px 14px; }
.rdw-header__drawer .rdw-menu--stack li.is-open > .sub-menu { display: block; }
.rdw-header__drawer .rdw-menu--stack .sub-menu a { font-size: 14px; font-weight: 500; padding: 9px 4px; color: #4d5061; }
.rdw-header__drawer .rdw-menu--stack .menu-item-has-children > a { position: relative; }
.rdw-header__drawer .rdw-menu--stack .menu-item-has-children > a::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    width: 8px; height: 8px;
    margin-top: -6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.rdw-header__drawer .rdw-menu--stack li.is-open > a::after { transform: rotate(-135deg); margin-top: -2px; }
.rdw-header__drawer-utility { margin-top: 10px; }
/* Logo shown at the top of the drawer (optional) — sits in the top row. */
.rdw-header__drawer-logo { display: block; margin: 0; }
.rdw-header__drawer-logo img { max-width: 160px; height: auto; display: block; }
/* Cart shown inside the drawer (optional). */
.rdw-header__drawer-cart { margin-top: 16px; display: flex; justify-content: flex-start; }
/* Drawer calculator button — styled like the desktop button (icon + label). */
.rdw-header__drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
    background: #0d3577;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    padding: 14px 18px;
    border-radius: 40px;
}
.rdw-header__drawer-cta svg { height: 26px; width: auto; color: #ffca00; flex: 0 0 auto; }
.rdw-header__drawer-cta i { color: #ffca00; font-size: 24px; }
.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; }

/* ---------- 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; }
}