/* ============================================================
   HEADER

   assets/css/header.css

   Part of the Rodi Express child theme. Loaded by inc/enqueue.php.
   Navigation and submenus.
   ============================================================ */

/* ============================================================
   HEADER SUBMENU COLOURS

   The parent theme styles submenus for a DARK header:

     modern-header.css:142  .main-menu .sub-menu { background: #222 }

   with light link text and a translucent white divider. This
   header is white with dark links, so the links inherit dark
   and land on a near-black panel - the submenu renders as a
   black rectangle with invisible text.

   Restyled to match the rest of the site rather than the theme
   demo it was designed against.
   ============================================================ */

.main-menu .sub-menu {
    background: #fff;
    min-width: 220px;
    padding: 6px;
    border: 1px solid var(--fm-border, #ececec);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.main-menu .sub-menu li a {
    padding: 9px 12px;
    border-radius: 7px;
    border-bottom: none;
    color: #2f2f2f;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    transition: background 0.15s ease, color 0.15s ease;
}

.main-menu .sub-menu li a:hover,
.main-menu .sub-menu li a:focus {
    background: #f6f6f6;
    color: var(--fm-primary, #cf2027);
}

/* Current page, so people can see where they are. */

.main-menu .sub-menu li.current-menu-item > a {
    color: var(--fm-primary, #cf2027);
    font-weight: 600;
}

/* ---- Mobile ----
   Same problem inverted: the theme tints the open submenu with
   rgba(255,255,255,0.05), which is invisible on a white burger
   panel. A light grey tint and an indent read better. */

@media (max-width: 768px) {

    .main-menu .sub-menu {
        background: #f7f7f7;
        border: none;
        border-radius: 8px;
        box-shadow: none;
        padding: 4px;
    }

    .main-menu .sub-menu li a {
        padding-left: 18px;
    }
}

/* ============================================================
   ONE LINE ON COMPUTERS

   The theme spaces the menu items 35px apart and lets each label
   wrap. With seven items, the account menu and the Order Now button
   sharing the row, "The Story", "Contact & Location" and "Trade
   Account" were each breaking onto two lines.

   Labels now never wrap, and the spacing tightens as the screen
   narrows, down to the width where the theme switches to its
   burger menu (768px).
   ============================================================ */

@media (min-width: 769px) {

    .main-menu {
        flex-wrap: nowrap;
        gap: 26px;
    }

    .main-menu > li > a {
        white-space: nowrap;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {

    .main-menu {
        gap: 18px;
    }

    .main-menu > li > a {
        font-size: 14px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    .main-menu {
        gap: 12px;
    }

    .main-menu > li > a {
        font-size: 13.5px;
    }
}

/* Narrowest tablet and laptop widths: one more step, so the row
   still fits next to the basket and Order Now button. */

@media (min-width: 769px) and (max-width: 860px) {

    .main-menu {
        gap: 8px;
    }

    .main-menu > li > a {
        font-size: 13px;
    }
}

/* ============================================================
   ACCOUNT DROPDOWN OPENS TO THE LEFT

   "Sign in" is the last item in the row, so its dropdown, opening
   to the right like the others, ran past the edge of the screen.
   Even while closed it made the whole page slide sideways on tablets
   and narrow laptop windows (783px to 900px wide), and when opened
   part of it was cut off. It now lines up with the right edge of
   the button and opens towards the middle of the screen.
   ============================================================ */

@media (min-width: 769px) {

    .main-menu > li.rodi-account-menu > .sub-menu {
        left: auto;
        right: 0;
    }
}

/* ============================================================
   "Deals" stands out in the header and the phone bar, with a
   "Now" badge while a last minute or surprise deal is on
   (52-deal-banner.js).
   ============================================================ */

@media (min-width: 769px) {
    /* A plain pill (no flex), with the tag icon as a background, and
       nothing allowed to squeeze it: the whole word always shows. */
    html body .main-menu > li.menu-item-rodi-deals {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0;
        max-width: none !important;
        overflow: visible !important;
    }
    html body .main-menu > li.menu-item-rodi-deals > a {
        display: inline-block !important;
        position: relative;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        overflow: visible !important;
        white-space: nowrap !important;
        text-overflow: clip !important;
        box-sizing: content-box !important;
        margin: 0 !important;
        padding: 6px 13px 6px 31px !important;
        border-radius: 999px;
        background: #fdecea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c62828' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E") no-repeat 11px 50% / 15px 15px !important;
        color: #c62828 !important;
        font-weight: 700 !important;
        line-height: 1.25 !important;
        letter-spacing: 0 !important;
        transition: background-color .15s ease;
    }
    html body .main-menu > li.menu-item-rodi-deals > a::before,
    html body .main-menu > li.menu-item-rodi-deals > a::after { content: none !important; display: none !important; }
    html body .main-menu > li.menu-item-rodi-deals > a:hover { background-color: #fbd9d5 !important; }
    html body .main-menu > li.menu-item-rodi-deals.current-menu-item > a {
        background: #c62828 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E") no-repeat 11px 50% / 15px 15px !important;
        color: #fff !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    html body .main-menu > li.menu-item-rodi-deals > a {
        padding: 5px 8px 5px 24px !important;
        background-position: 7px 50% !important;
        background-size: 13px 13px !important;
    }
}

/* Phone bar: Deals in red, so it's easy to spot. */
.rodi-tabbar a[data-tab="deals"] { color: #c62828 !important; }

/* A dot on Deals, like a traffic light: green while deals are on, amber
   (with a soft ripple) while a last minute deal is on. No dot otherwise. */
.rodi-deals-now {
    display: inline-block;
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: 2px;
    border-radius: 50%;
    background: #22a34a;
    box-shadow: 0 0 0 2px #fff;
    vertical-align: middle;
}
.rodi-deals-now.is-last {
    background: #f59e0b;
    animation: rodiLastGlow 2s ease-out infinite;
}
.main-menu > li.menu-item-rodi-deals > a { position: relative; }
.main-menu > li.menu-item-rodi-deals .rodi-deals-now,
.rodi-tab-ic .rodi-deals-now {
    position: absolute;
    top: -2px;
    right: -2px;
    margin: 0;
}
.rodi-tab-ic .rodi-deals-now { top: -1px; right: -3px; width: 10px; height: 10px; }
@keyframes rodiLastGlow {
    0%   { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(245, 158, 11, .6); }
    70%  { box-shadow: 0 0 0 2px #fff, 0 0 0 9px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .rodi-deals-now.is-last { animation: none; }
}