/*
 * Main menu panels.
 *
 * Kept out of the design team's style.css so a fresh drop of their stylesheet
 * cannot wipe it.
 *
 * Grouped sections use a two-pane layout — a category rail that swaps the
 * product list beside it, plus a promo tile — so a 40-product section stays one
 * readable screen instead of a six-column wall.
 */

:root {
    --menu-red: #d0322f;
    --menu-ink: #1f2430;
    --menu-muted: #6b7280;
    --menu-line: #ecedf0;
}

/* style.css clips and un-pads every .dropdown-menu; these panels need room. */
.menu-panel {
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.menu-panel__inner {
    display: flex;
    align-items: stretch;
}

/* ------------------------------------------------------------ left rail */

.menu-rail {
    list-style: none;
    margin: 0;
    padding: 0.75rem;
    background: #fbfbfc;
    border-right: 1px solid var(--menu-line);
    border-radius: 14px 0 0 14px;
    min-width: 15rem;
}

/* style.css sets `.site-header .dropdown-menu li { border-bottom }`, which
   outranks a plain `.menu-rail li`. Matched here so the panels stay clean —
   the grouping does the separating, not a rule under every row. */
.site-header .menu-panel li {
    border-bottom: 0;
}

.menu-rail__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--menu-ink);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.menu-rail__item i {
    font-size: 0.65rem;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.menu-rail__item:hover,
.menu-rail__item:focus-visible,
.menu-rail__item.is-active {
    background: #fff;
    color: var(--menu-red);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.menu-rail__item.is-active i,
.menu-rail__item:hover i {
    opacity: 1;
    transform: translateX(0);
}

/* ------------------------------------------------------------ right pane */

.menu-pane {
    flex: 1 1 auto;
    padding: 1.15rem 1.5rem 1.25rem;
    min-width: 21rem;
}

.menu-pane__group {
    display: none;
}

.menu-pane__group.is-active {
    display: block;
    animation: menuFade 0.18s ease;
}

@keyframes menuFade {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

.menu-pane__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--menu-line);
}

.menu-pane__head a {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--menu-ink);
    text-decoration: none;
}

.menu-pane__head a:hover {
    color: var(--menu-red);
}

.menu-pane__head span {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--menu-muted);
    white-space: nowrap;
}

.menu-pane__list {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 1.75rem;
}

.menu-pane__list li {
    break-inside: avoid;
}

.menu-pane__list a {
    display: block;
    padding: 0.32rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: #40464f;
    text-decoration: none;
    border-radius: 6px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.menu-pane__list a:hover,
.menu-pane__list a:focus-visible {
    color: var(--menu-red);
    background: #fdf3f3;
}

.menu-pane--flat .menu-pane__list {
    columns: 2;
    min-width: 26rem;
}

/* ------------------------------------------------------------ promo tile */

.menu-promo {
    width: 15rem;
    flex: 0 0 15rem;
    padding: 1.25rem;
    background: linear-gradient(160deg, #fdf2f2 0%, #ffffff 70%);
    border-left: 1px solid var(--menu-line);
    border-radius: 0 14px 14px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.menu-promo img {
    width: 100%;
    max-height: 8.5rem;
    object-fit: contain;
    margin-bottom: 0.75rem;
}

.menu-promo__text {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--menu-muted);
    margin-bottom: 0.9rem;
}

.menu-promo__cta {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    background: var(--menu-red);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.menu-promo__cta:hover {
    background: #a5201e;
    color: #fff;
}

.menu-panel__footer {
    padding: 0 1.25rem 1rem;
}

.menu-panel__footer a {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--menu-red);
    text-decoration: none;
}

/* ------------------------------------------------------------ desktop placement */

@media (min-width: 992px) {

    .navbar {
        position: relative;
    }

    .custom-nav-dropdown {
        position: static;
    }

    .menu-panel {
        margin-top: 0.5rem;
    }

    /* Narrow panels sit under their own item; wide ones centre on the navbar
       so they cannot run off the edge of the screen. */
    .nav-has-panel:not(.nav-has-panel--wide) .menu-panel {
        position: absolute;
        left: auto;
        min-width: 14rem;
    }

    .nav-has-panel--wide .menu-panel {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
        max-width: min(1080px, calc(100vw - 2rem));
    }
}

/* ------------------------------------------------------------ mobile */

@media (max-width: 991.98px) {

    /* Inside the offcanvas there is no room for a rail and a promo, so the
       groups stack and every product stays reachable by scrolling.

       The drawer itself is the scroll container and the panel is left to its
       full height. It used to be capped at 60vh with its own scrollbar, which
       did not work at all: style.css line 46 sets `.site-header .dropdown-menu
       { overflow: hidden }` and outranks a class on its own, so the cap applied
       and the scrolling did not. Carrom Accessories showed 487px of 1507 —
       a third of 53 links, with no way to reach the rest.

       Even fixed, a scroller inside a scroller is a poor thing to hand a thumb;
       one is enough. Bootstrap closes the other sections when one opens, so the
       drawer never grows past the menu plus a single section. Specificity is
       raised here so a `overflow: hidden` shorthand elsewhere cannot quietly
       clip it again. */
    .site-header .menu-panel {
        position: static !important;
        transform: none !important;
        width: auto;
        max-width: none;
        box-shadow: none;
        border-left: 2px solid #f4dede;
        border-radius: 0;
        margin: 0.25rem 0 0.75rem;
        max-height: none;
        overflow: visible;
    }

    .menu-panel__inner {
        display: block;
    }

    .menu-rail {
        display: none;   /* the pane headings already name each group */
    }

    .menu-pane {
        padding: 0.25rem 0 0.5rem 0.75rem;
        min-width: 0;
    }

    .menu-pane__group {
        display: block;   /* show every group, stacked */
        margin-bottom: 0.75rem;
    }

    /* Carrom Accessories is 53 links over seven groups — far enough to scroll
       that the group you are inside scrolls away from you. The heading follows
       it down, so "which of these am I looking at" is always answered. */
    .menu-pane__head {
        position: sticky;
        top: 0;
        z-index: 1;
        padding-top: 0.5rem;
        background: #fff;
    }

    .menu-pane__list,
    .menu-pane--flat .menu-pane__list {
        columns: 1;
        min-width: 0;
    }

    .menu-promo {
        display: none;   /* imagery is not worth the scroll on a phone */
    }
}

/* ==================================================================
 * Top-level menu bar
 *
 * style.css spaces the row with `gap: 15px` plus `padding: 22px 10px`, and
 * hard-codes the active underline to that 10px (`left: 10px; width: calc(100%
 * - 20px)`). Changing one without the other pulls the underline off the label,
 * so the padding lives in a custom property that the underline reads too.
 * ================================================================== */

@media (min-width: 992px) {

    .site-header .navbar-nav {
        --nav-pad-x: 15px;
        /* One rhythm instead of two: spacing comes from the link padding, so
           the hover target is continuous and every gap is identical. */
        gap: 0;
        align-items: center;
    }

    .site-header .navbar-nav .nav-link {
        display: inline-flex;
        align-items: center;
        padding: 21px var(--nav-pad-x) !important;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Underline follows the padding rather than a fixed 10px. */
    .site-header .navbar-nav .nav-link::after {
        left: var(--nav-pad-x);
        bottom: 15px;
    }

    .site-header .navbar-nav .nav-link.active::after,
    .site-header .navbar-nav .nav-link:hover::after,
    .site-header .navbar-nav .nav-link:focus-visible::after,
    .site-header .navbar-nav .nav-link[aria-expanded="true"]::after {
        width: calc(100% - (2 * var(--nav-pad-x)));
    }

    .site-header .navbar-nav .nav-link[aria-expanded="true"] {
        color: var(--menu-red) !important;
    }

    /* The caret is punctuation, not a label: quieter, and it turns when open. */
    .site-header .nav-drop-icon {
        font-size: 10px;
        margin-left: 6px;
        opacity: 0.5;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .site-header .navbar-nav .nav-link:hover .nav-drop-icon,
    .site-header .navbar-nav .nav-link[aria-expanded="true"] .nav-drop-icon {
        opacity: 1;
    }

    .site-header .navbar-nav .nav-link[aria-expanded="true"] .nav-drop-icon {
        transform: rotate(180deg);
    }

    /* .bottom-bar is space-between with two children, so tightening the item
       spacing just moved the slack into one gap before the Contact button.
       Letting the nav take the free width and centring the items inside it
       balances the row between the logo and the button instead. */
    .site-header .bottom-bar {
        gap: 1.75rem;
    }

    .site-header .bottom-bar .navbar {
        flex: 1 1 auto;
        min-width: 0;
    }

    .site-header .bottom-bar .navbar .offcanvas,
    .site-header .bottom-bar .navbar .offcanvas-body {
        justify-content: center;
    }

    .site-header .navbar-nav {
        justify-content: center;
    }

    /* At laptop widths the button was breaking onto two lines ("Contact / Us")
       while the menu kept its space. The button holds its shape and the menu
       gives way instead. */
    .site-header .header-action {
        flex: 0 0 auto;
    }

    .site-header .btn-contact-slanted {
        white-space: nowrap;
    }

    /* The row has to survive a 1024px laptop without wrapping, so the spacing
       tightens gradually rather than breaking onto a second line. */
    @media (max-width: 1400px) {
        .site-header .navbar-nav {
            --nav-pad-x: 11px;
        }
        .site-header .navbar-nav .nav-link {
            font-size: 14.5px;
        }
    }

    @media (max-width: 1200px) {
        .site-header .navbar-nav {
            --nav-pad-x: 8px;
        }
        .site-header .navbar-nav .nav-link {
            font-size: 14px;
        }
        .site-header .bottom-bar {
            gap: 1rem;
            padding-left: 12px;
        }
        .site-header .btn-contact-slanted {
            padding: 6px 14px;
            font-size: 14px;
        }
    }
}

/* ------------------------------------------------------------ simple dropdown
 * Short sections (About Us) get a plain list rather than the panel treatment.
 */

.menu-panel--simple {
    min-width: 13.5rem;
    padding: 0.5rem;
    border-radius: 10px;
}

.menu-simple {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-simple a {
    display: block;
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #40464f;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.menu-simple a:hover,
.menu-simple a:focus-visible {
    color: var(--menu-red);
    background: #fdf3f3;
}

@media (max-width: 991.98px) {
    .menu-panel--simple {
        padding: 0 0 0 0.75rem;
        min-width: 0;
    }
}

/* ==================================================================
 * Footer additions
 *
 * The design's footer had no contact links or calls to action; these styles
 * cover what was added. Everything else still comes from style.css.
 * ================================================================== */

.footer-contact-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact-link:hover,
.footer-contact-link:focus-visible {
    color: var(--menu-red);
}

.footer-actions {
    display: flex;
    /* Side by side these two wrap at the column width and end up different
       widths, which reads as untidy. Stacked and matched instead. */
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 1.5rem;
    max-width: 15rem;
}

.footer-action {
    display: block;
    text-align: center;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* On a phone responsive.css centres the whole footer column, but this block
   is capped at 15rem and had no auto margins — so the two buttons stayed
   pinned to the left of centred text, which reads as a mistake. */
@media (max-width: 767px) {
    .footer-actions {
        margin-inline: auto;
    }

    /* The contact lines centre with the column; their icons were left-aligned
       against the text, which pulled each line off centre by the icon's width. */
    .footer-contact-list li {
        justify-content: center;
    }
}

.footer-action:hover,
.footer-action:focus-visible {
    background: var(--menu-red);
    border-color: var(--menu-red);
    color: #fff;
}

/* The columns hold 7-12 links now, so the design's 18px row spacing made the
   footer far taller than it needs to be. */
.site-footer .footer-links li {
    margin-bottom: 10px;
}

.site-footer .footer-heading {
    margin-bottom: 22px;
    font-size: 14px;
}

.footer-blurb {
    max-width: 34rem;
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #cfd2d6;
}

.footer-directions {
    display: inline-block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--menu-red);
}

.footer-brand .footer-contact-list li {
    margin-bottom: 16px;
}

/* The first action is the primary one. */
.footer-actions .footer-action:first-child {
    background: var(--menu-red);
    border-color: var(--menu-red);
}

.footer-actions .footer-action:first-child:hover {
    background: #a5201e;
    border-color: #a5201e;
}

/* ------------------------------------------------------------ top bar CTA
 * Sits in the top bar where the language selector used to be. It was Get a
 * Bulk Quote; the client replaced it with Become Our Distributor.
 */

.top-bar .btn-top-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 5px 14px;
    margin-right: 1rem;
    border-radius: 4px;
    background: #ffffff;
    color: var(--menu-red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.top-bar .btn-top-cta i {
    font-size: 11px;
}

.top-bar .btn-top-cta:hover,
.top-bar .btn-top-cta:focus-visible {
    background: #111;
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 991.98px) {
    .top-bar .btn-top-cta {
        margin-right: 0.5rem;
        padding: 4px 10px;
        font-size: 11px;
    }
}

/* The agency credit.
   The name is a link now, and an unstyled anchor here takes the site's link
   colour — red on a black footer, which reads as a warning rather than a
   credit. White with a faint rule under it, brand red on hover. */
.developed-by a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.developed-by a:hover,
.developed-by a:focus-visible {
    color: var(--menu-red);
    border-color: var(--menu-red);
}

/* The Bulk Quote call to action inside the mobile menu. */
.nav-item--cta {
    margin-top: 0.75rem;
}

.nav-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    background: var(--menu-red);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.nav-cta:hover,
.nav-cta:focus-visible {
    background: #a5201e;
    color: #fff;
}

/* reCAPTCHA v3 notice, shown beside each protected form in place of Google's
   badge (which is hidden because it covered the live chat button). */
.recaptcha-notice {
    margin: 0.25rem 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}

.recaptcha-notice a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}