/* ---------------------------------------------------------------------------
   Menu, Stores and Events — layout fixes and polish.

   Kept out of main.css so a template update can't drop it, same arrangement as
   assets/css/blog-additions.css for the blog.

   Colours reuse the values already in main.css (the BIGGS navy #1C214F, the
   cyan #2DA7DF and the red used on .bg-biggs) rather than introducing new ones.
   --------------------------------------------------------------------------- */

:root {
    --biggs-navy: #1c214f;
    --biggs-cyan: #2da7df;
    --biggs-red: #be2230;
    --biggs-line: #e6e6e6;
    --biggs-muted: #6c757d;
}

/* =========================================================================
   MENU — category tabs and submenus
   ========================================================================= */

.menu-tabs {
    flex-wrap: wrap;
    row-gap: .25rem;
    border-bottom: 0;
}

/* The tab strip is a row of links; the template's underline effect lives in
   main.css (.menu-link::after). These only add what was missing. */
.menu-tabs .nav-link {
    background-color: transparent;
    cursor: pointer;
}

/* The Sizzler link carried two style attributes, so its cursor:pointer was
   dropped by the parser and that one tab felt dead. Set for all of them here
   instead of inline. */
.menu-tabs .menu-link,
.menu-tabs .menu-group-toggle {
    cursor: pointer;
}

/* The group toggles are <button> now, so they need the anchor's appearance. */
.menu-group-toggle {
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* Keyboard users could not see where they were: nothing in the tab strip had a
   focus style, and buttons need one more than links do. */
.menu-tabs .menu-link:focus-visible,
.menu-tabs .menu-group-toggle:focus-visible {
    outline: 2px solid var(--biggs-cyan);
    outline-offset: 3px;
    border-radius: 3px;
}

/* A caret, so a group reads as openable rather than as a dead tab. */
.menu-group-caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform .15s ease;
}

.nav-item.dropdown.is-open .menu-group-caret { transform: rotate(180deg); }

/* --- The submenu -------------------------------------------------------- */

.menu-header-wrap .nav-item.dropdown { position: relative; }

.menu-header-wrap .dropdown-content {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    min-width: 11rem;
    margin: 0;
    padding: .35rem 0;
    background-color: #fff;
    border: 1px solid var(--biggs-line);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    z-index: 999;
}

/* Opened by a class now, not by writing element.style.display from JS. The old
   version could only be opened by a mouseover, which a touch screen never
   sends — nine categories were unreachable on a phone. */
.menu-header-wrap .nav-item.dropdown.is-open .dropdown-content { display: block; }

.menu-header-wrap .dropdown-content .menu-link {
    display: block;
    padding: .55rem 1rem;
    font-size: 1rem;
    color: #212529;
    text-decoration: none;
    white-space: nowrap;
}

.menu-header-wrap .dropdown-content .menu-link:hover,
.menu-header-wrap .dropdown-content .menu-link:focus-visible {
    background-color: #f6f7f9;
    color: var(--biggs-navy);
}

/* The template's sliding underline is for the top-level strip; inside the panel
   it renders as a stray line under each row. */
.menu-header-wrap .dropdown-content .menu-link::after { display: none; }

@media (max-width: 575.98px) {
    /* Anchored to the viewport edge on a narrow screen: a centred panel on the
       last tab hangs off the right of the page. */
    .menu-header-wrap .dropdown-content {
        left: auto;
        right: 0;
        transform: none;
        min-width: 9.5rem;
    }

    .menu-tabs .nav-item { padding-left: .4rem !important; padding-right: .4rem !important; }
    .menu-tabs .nav-link { font-size: 1rem; }
}

/* --- Menu cards --------------------------------------------------------- */

.menu .menu-item .shadow {
    border-radius: 8px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

@media (hover: hover) and (pointer: fine) {
    .menu .menu-item .shadow:hover {
        transform: translateY(-3px);
        box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .16) !important;
    }
}

/* =========================================================================
   STORES
   ========================================================================= */

.store-card {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}

.store-card .card-body {
    /* Was height:10rem with overflow-auto, which put a scrollbar inside every
       card — all 25 branches overflowed it, so every address was clipped. */
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: .35rem;
    padding: 1rem 1rem 1.25rem;
}

.store-card-title {
    margin: 0;
    padding-top: .5rem;
    font-size: 1.15rem;
    line-height: 1.3;
    color: var(--biggs-navy);
}

.store-card-address {
    margin: 0;
    font-size: .92rem;
    line-height: 1.45;
    color: var(--biggs-muted);
}

/* Reserve two lines for the address wherever cards sit side by side.

   Five of the twenty-five branches carry an address long enough to wrap ("24HRS,
   With FoodPanda & Function Hall, ..."), which made those cards 22px taller than
   the rest, so the red phone strip sat at a different height as the carousel
   moved. Reserving the second line levels them without truncating anyone.

   Forcing the slides to equal height with flexbox was tried first and is the
   wrong tool: Owl sizes .owl-item itself, and overriding it collapsed the item
   box to 100px while the card inside stayed 408px. */
@media (min-width: 600px) {
    .store-card-address { min-height: 2.7rem; }
}

.store-card-address a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.store-card-address a:hover,
.store-card-address a:focus-visible {
    color: var(--biggs-navy);
    border-bottom-color: currentColor;
}

/* Pinned to the bottom so the phone strip lines up across cards regardless of
   how long the address above it runs. */
.store-card-contact { margin-top: auto; }

.store-card-contact a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
}

.store-card-contact a:hover,
.store-card-contact a:focus-visible { text-decoration: underline; }

@media (hover: hover) and (pointer: fine) {
    .store-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 .85rem 1.75rem rgba(0, 0, 0, .18) !important;
    }
}

/* The multi-image card's indicators sat over a white card with no contrast. */
.store-card .carousel-indicators [data-bs-slide-to] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(28, 33, 79, .35);
    border: 0;
}

.store-card .carousel-indicators .active { background-color: var(--biggs-navy); }

/* =========================================================================
   EVENTS
   ========================================================================= */

.events-banner { background-color: #fff; }

.events-banner-title {
    color: var(--biggs-navy);
    letter-spacing: .04em;
}

.event-title {
    color: var(--biggs-navy);
    font-size: clamp(1.6rem, 3.2vw, 2.5rem);
    line-height: 1.2;
}

.event-description {
    max-width: 46rem;
    font-size: 1rem;
    line-height: 1.65;
    color: #444;
}

/* Was overflow-auto with no height, so long copy simply ran on. Clamped to a
   readable block; the full text is still in the DOM for search engines. */
.event-img {
    width: 100%;
    max-height: 26rem;
    object-fit: cover;
    border-radius: 10px;
}

@media (max-width: 991.98px) {
    .event-row { padding-bottom: 1.5rem; }
    .event-description { margin-top: 1rem !important; }
}