/* =================================================================
   mobile.css — Global responsive overrides for MealNuzzle
   Loaded last on every page so these rules win over page-specific
   stylesheets without requiring !important.

   Strategy: desktop-first (max-width), matching the existing
   codebase convention.

   Breakpoints:
     ≤768px  — tablet + mobile  (--bp-tablet)
     ≤480px  — phone only       (--bp-mobile)
   ================================================================= */


/* =================================================================
   SECTION 1 — Hamburger button (hidden on desktop, shown by media
   query below).  Placed outside a media query so the element is
   always in the DOM and the "open" animation always works.
   ================================================================= */

.nav-hamburger {
    display: none;          /* hidden on desktop */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 10px;
    margin-left: auto;      /* push to right edge of nav */
    flex-shrink: 0;
    z-index: 1200;
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #333;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Animate bars into × shape when drawer is open */
.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* Filter sheet header, generic drawer header, and Filters pill button: hidden on desktop */
.ar-filter-sheet-header { display: none; }
.mn-right-drawer__header { display: none; }
.ar-filters-btn { display: none; }

/* =================================================================
   SECTION 1b — Desktop / Mobile visibility helpers
   Base (desktop-first) defaults. The ≤768px block below flips them.
   Owned here so they win over any page-specific stylesheet that
   incorrectly declares them after a media query.
   ================================================================= */
.desktop-only { display: block; }
.mobile-only  { display: none; }


/* =================================================================
   SECTION 2 — ≤768px: Tablet + Mobile
   ================================================================= */

@media (max-width: 768px) {

    /* ── Main content: tighter horizontal padding ────────────── */
    main {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* ── Page-brand: shrink header text ─────────────────────── */
    .mn-page-brand {
        padding: 10px 16px 8px;
    }

    .mn-page-brand__title {
        font-size: 1.2rem;
        margin-bottom: 0;
    }

    /* Hide subtitle on mobile — saves vertical space */
    .mn-page-brand__subtitle {
        display: none;
    }


    /* ── Navigation: hamburger on left, desktop links hidden ─── */

    /* Show the hamburger button, move it to the left */
    .nav-hamburger {
        display: flex;
        margin-left: 0;
        margin-right: auto;
        order: -1;          /* ensure it sits before any other flex children */
    }

    /* Desktop nav bar: flex row — scoped to #site-nav-header so the
       mobile drawer (<nav class="nav-drawer">) is never affected */
    #site-nav-header nav {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        padding: 10px 14px !important;
    }

    /* Hide the desktop link list on mobile — drawer takes over.
       Scoped to #site-nav-header so drawer <ul> elements are unaffected. */
    #site-nav-header nav ul.nav-links {
        display: none !important;
    }

    /* Reset desktop nav ul flex properties at mobile.
       Scoped to #site-nav-header so drawer <ul> elements are unaffected. */
    #site-nav-header nav ul {
        gap: 0;
        justify-content: flex-start;
        max-width: 100%;
        padding: 0;
    }

    /* ── Sidebar layout: extra tightening at ≤768px ─────────── */
    /* sidebar-layout.css already stacks at ≤900px; this reduces gap */
    .ar-page-layout {
        gap: 0;
    }


    /* ── Modals: full-width, stacked buttons ────────────────── */
    .modal-content {
        width: 94%;
        max-width: 94%;
        padding: 20px 16px;
        margin: 0 auto;
        border-radius: 8px;
    }

    /* Shared modals pattern */
    .modal-footer,
    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .modal-footer button,
    .modal-actions button {
        width: 100%;
        justify-content: center;
    }


    /* ── Shopping list: sidebar → top strip ─────────────────── */
    .page-shell .layout {
        flex-direction: column;
    }

    .page-shell .layout nav.sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 12px;
        gap: 8px;
        flex-shrink: 0;
    }

    .page-shell .layout .content-panel {
        padding: 16px 12px;
    }


    /* ── Forms: single-column stacking ──────────────────────── */
    .form-group,
    .form-row {
        flex-direction: column;
    }

    /* ── Visibility helpers: flip on mobile ─────────────────── */
    .desktop-only { display: none; }
    .mobile-only  { display: block; }

}   /* end @media ≤768px */


/* =================================================================
   SECTION 3 — ≤480px: Phone only
   ================================================================= */

@media (max-width: 480px) {

    /* Brand: collapse subtitle on very small screens */
    .mn-page-brand__title {
        font-size: 1.1rem;
    }

    .mn-page-brand__subtitle {
        display: none;
    }

    /* Main: minimal side padding */
    main {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Buttons: full width, block-level */
    .main-action-btn,
    .secondary-action-btn {
        display: block;
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    /* Action wrapper: tighter spacing */
    .page-actions-wrapper {
        gap: 10px;
    }

    /* Nav links: ensure minimum 44px tap target */
    nav ul.nav-links .dropdown-menu li a,
    nav ul.nav-links > li:not(.dropdown) > a,
    nav ul.nav-links > li:not(.dropdown) > button.nav-link-btn {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

}   /* end @media ≤480px */


/* =================================================================
   SECTION 4 — Mobile drawer (bottom sheet)
   Rendered by nav.js; always in DOM, only visible on mobile.
   ================================================================= */

/* Body scroll lock while drawer is open */
body.nav-drawer-body-lock {
    overflow: hidden;
}

/* Semi-transparent backdrop */
.nav-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1299;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-drawer-backdrop--visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* The drawer panel — top-down slide */
.nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    background: #fff;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;       /* neutralize nav{flex-wrap:wrap} at ≤768px */
    align-items: stretch;    /* neutralize nav{align-items:center} at ≤768px — keeps children full-width */
    padding: 0;              /* neutralize nav{padding:12px 0} from style.css */
    backdrop-filter: none;             /* neutralize nav{backdrop-filter:blur(8px)} */
    -webkit-backdrop-filter: none;
    overflow: hidden;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

/* Only show the drawer on mobile */
@media (min-width: 769px) {
    .nav-drawer,
    .nav-drawer-backdrop {
        display: none !important;
    }
}

.nav-drawer--open {
    transform: translateY(0);
}

/* ── Drawer header (brand centered between close btn and spacer) ── */
.nav-drawer__header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    border-bottom: 1px solid #e9ecef;
    flex-shrink: 0;
    min-height: 56px;
}

.nav-drawer__brand {
    font-family: 'Merriweather', serif;
    font-size: 1rem;
    font-weight: 700;
    color: #333;
    flex: 1;
    text-align: center;
}

.nav-drawer__header-spacer {
    width: 36px;
    flex-shrink: 0;
}

.nav-drawer__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    color: #555;
    cursor: pointer;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.nav-drawer__close-btn:hover,
.nav-drawer__close-btn:focus {
    background-color: #f0f0f5;
    color: #333;
    outline: none;
}

.nav-drawer__close-btn:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* ── Scrollable accordion area ── */
.nav-drawer__scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* prevent scroll chaining through to the page body on iOS/Android */
}

/* ── Accordion groups ── */
.nav-drawer__groups {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: block; /* override style.css: nav ul { display: flex } */
}

.nav-drawer__group {
    display: block;
}

/* Group trigger button — Lato matching desktop nav */
.nav-drawer__group-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px 14px 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-size: 1.02rem;
    font-weight: 400;
    color: #333;
    text-align: left;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-drawer__group-btn:hover,
.nav-drawer__group-btn:focus {
    background-color: #f4f4f8;
    color: #667eea;
    outline: none;
}

.nav-drawer__group-btn:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: -2px;
}

.nav-drawer__group-label {
    flex: 1;
}

.nav-drawer__group-chevron {
    flex-shrink: 0;
    color: #767676;
    transition: transform 0.25s ease;
}

.nav-drawer__group-btn[aria-expanded="true"] .nav-drawer__group-chevron {
    transform: rotate(180deg);
}

/* Collapsible child link list */
.nav-drawer__group-links {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: #fafafa;
    display: block; /* override style.css: nav ul { display: flex } */
}

.nav-drawer__group-btn[aria-expanded="true"] + .nav-drawer__group-links {
    max-height: 400px;
}

/* Child link — Lato matching desktop nav */
.nav-drawer__group-link {
    display: block;
    padding: 11px 20px 11px 56px;
    font-family: 'Lato', sans-serif;
    font-size: 0.97rem;
    font-weight: 400;
    color: #555;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-drawer__group-link:hover,
.nav-drawer__group-link:focus {
    background-color: #f0f0f8;
    color: #667eea;
    outline: none;
}

.nav-drawer__group-link:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: -2px;
}

/* Suppress the animated underline pseudo-element that style.css injects via
   "nav ul li:not(.dropdown) > a::after" — drawer links aren't in .dropdown
   list items so they inherit it; this rule has higher specificity to override. */
.nav-drawer .nav-drawer__group-link::after {
    display: none;
}

/* ── Shared icon: SVG icons in nav drawer items ── */
.nav-drawer__icon {
    font-size: 1.15rem;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #888;
}

.nav-drawer__label {
    flex: 1;
}

/* ── Sign-out standalone item (below accordion groups) ── */
.nav-drawer__standalone {
    padding: 4px 0;
    border-top: 1px solid #e9ecef;
}

.nav-drawer__standalone .nav-drawer__signout {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    font-family: 'Lato', sans-serif;
    font-size: 1.02rem;
    font-weight: 400;
    color: #333;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-drawer__standalone .nav-drawer__signout:hover,
.nav-drawer__standalone .nav-drawer__signout:focus {
    background-color: #f4f4f8;
    color: #667eea;
    outline: none;
}

/* Pinned footer: user info + settings gear */
.nav-drawer__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #e9ecef;
    background: #fafafa;
    min-height: 72px;
    flex-shrink: 0;
}

/* Avatar as a button (mobile: tapping opens settings panel) */
.nav-drawer__avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.15s ease;
}

.nav-drawer__avatar-btn:hover,
.nav-drawer__avatar-btn:focus {
    opacity: 0.85;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.nav-drawer__user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-drawer__user-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-drawer__user-email {
    font-size: 0.78rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-drawer__settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #555;
    text-decoration: none;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav-drawer__settings-btn:hover,
.nav-drawer__settings-btn:focus {
    background-color: #f0f0f5;
    color: #667eea;
    outline: none;
}

.nav-drawer__settings-btn:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}


/* =================================================================
   SECTION 4b — Mobile drawer: visual overrides (≤768px only)
   All desktop drawer styles live above in SECTION 4.
   These rules override only what differs on mobile.
   ================================================================= */

@media (max-width: 768px) {

    /* Hide SVG icons next to group names */
    .nav-drawer .nav-drawer__icon {
        display: none;
    }

    /* Hide chevrons — blue underline signals expanded state instead */
    .nav-drawer__group-chevron {
        display: none;
    }

    /* Close button: plain black X, no background ever */
    .nav-drawer__close-btn {
        color: #000;
        border-radius: 0;
    }

    .nav-drawer__close-btn:hover,
    .nav-drawer__close-btn:focus {
        background: none;
        color: #000;
    }

    /* Group button: larger, bolder, left-aligned */
    .nav-drawer__group-btn {
        font-size: 1.05rem;
        font-weight: 700;
        color: #222;
        padding: 18px 20px 18px 28px;
        gap: 0;
        position: relative;
    }

    /* Blue animated underline (left → right) on expanded group */
    .nav-drawer__group-btn::after {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 28px;
        width: 0;
        height: 2px;
        background-color: #667eea;
        transition: width 0.3s ease;
    }

    .nav-drawer__group-btn[aria-expanded="true"] {
        color: #667eea;
    }

    .nav-drawer__group-btn[aria-expanded="true"]::after {
        width: calc(100% - 48px);   /* padding l=28px + r=20px = 48px */
    }

    /* Sub-items: gray, indented, bold */
    .nav-drawer__group-link {
        padding: 12px 20px 12px 36px;
        font-size: 0.97rem;
        font-weight: 700;
        color: #888;
    }

    .nav-drawer__group-link:hover,
    .nav-drawer__group-link:focus {
        color: #667eea;
        background-color: transparent;
    }

    /* Remove blue underline on active/tap state */
    .nav-drawer__group-link:active {
        text-decoration: none;
        color: #667eea;
        background-color: transparent;
        outline: none;
    }

    /* Remove gray background from expanded sub-item list */
    .nav-drawer__group-links {
        background: transparent;
    }

    /* Hide standalone Settings / Sign Out rows on mobile
       (Settings accessed via avatar; Sign Out not in drawer on mobile) */
    #drawer-signout-item {
        display: none !important;
    }

    /* Hide footer gear icon on mobile */
    .nav-drawer__settings-btn {
        display: none;
    }

    /* Settings panel: hidden by default, shown when nav-drawer--settings is active */
    .nav-drawer__panel--settings {
        display: none;
    }

    .nav-drawer--settings .nav-drawer__panel--main {
        display: none;
    }

    .nav-drawer--settings .nav-drawer__panel--settings {
        display: block;
    }

    /* Settings panel group header matches main panel style */
    .nav-drawer__panel--settings .nav-drawer__group-btn {
        font-size: 1.05rem;
        font-weight: 700;
        color: #222;
        cursor: default;    /* not a toggle — always open */
    }

    /* Settings sub-links always visible (no accordion collapse) */
    .nav-drawer__group-links--settings-open {
        max-height: 400px !important;
    }

}   /* end @media \u2264768px */


/* =================================================================
   SECTION 5 — Recipe preview sheet: bottom sheet on mobile
   Overrides the desktop right-slide drawer for both recipe pages.
   ================================================================= */

@media (max-width: 768px) {
    .cb-preview-drawer {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: 88vh;
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    }

    .cb-preview-drawer.open {
        transform: translateY(0);
    }
}


/* =================================================================
   SECTION 5c — Generic right-side drawer component (.mn-right-drawer)
   Reusable on any page. Add .mn-right-drawer to the outer element and
   toggle .mn-right-drawer--open via JS to slide it in from the right.
   Use .mn-drawer-backdrop / .mn-drawer-backdrop--visible for the overlay.

   Optional generic inner elements:
     .mn-right-drawer__header  — fixed header bar (title + close button)
     .mn-right-drawer__title   — heading text inside the header
     .mn-right-drawer__close   — close (×) button inside the header
     .mn-right-drawer__body    — scrollable content area

   Per-page overrides go in a page-specific section below.
   ================================================================= */

/* Backdrop — outside @media so it is always in the cascade */
.mn-drawer-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1200;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mn-drawer-backdrop--visible {
    display: block;
    opacity: 1;
}

@media (max-width: 768px) {
    /* Outer drawer panel — off-screen by default, slides in from right.
       display:flex !important overrides display:none on page-specific sidebar classes.
       position:fixed !important overrides position:static from sidebar-layout.css. */
    .mn-right-drawer {
        display: flex !important;
        flex-direction: column;
        position: fixed !important;
        top: 0;
        right: 0;
        height: 100vh;
        left: auto;
        width: 82vw;
        max-width: 340px;
        background: #fff;
        border-radius: 16px 0 0 16px;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        z-index: 1250;
        overflow: hidden;
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Open state — slides into view */
    .mn-right-drawer--open {
        transform: translateX(0);
    }

    /* Header bar — title + close button */
    .mn-right-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px 12px;
        border-bottom: 1px solid #e9ecef;
        flex-shrink: 0;
    }

    /* Heading text */
    .mn-right-drawer__title {
        font-family: 'Lato', sans-serif;
        font-size: 1rem;
        font-weight: 700;
        color: #222;
        margin: 0;
    }

    /* Close (×) button */
    .mn-right-drawer__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: none;
        color: #888;
        cursor: pointer;
        border-radius: 50%;
        transition: background-color 0.15s ease, color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mn-right-drawer__close:hover,
    .mn-right-drawer__close:focus {
        background-color: #f0f0f5;
        color: #333;
        outline: none;
    }

    /* Scrollable content area — min-height:0 prevents flex overflow bug */
    .mn-right-drawer__body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        min-height: 0;
        padding: 8px 16px 24px;
    }
}


/* =================================================================
   SECTION 5b — Filter sidebar overrides for all-recipes.html
   Generic drawer geometry lives in SECTION 5c (.mn-right-drawer).
   ================================================================= */

@media (max-width: 768px) {
    /* Hide sidebar from normal page flow on mobile.
       .mn-right-drawer on the same element provides display:flex !important
       which overrides this once the element is in the DOM. */
    .ar-filter-sidebar {
        display: none;
    }

    /* Neutralize the desktop .sidebar-sticky card styles inside the drawer.
       sidebar-layout.css sets border, border-radius, box-shadow, background,
       gap, position:sticky, and max-height — all wrong inside a fixed drawer.
       This two-class selector (specificity 0,2,0) beats the single-class
       sidebar-layout.css rules (specificity 0,1,0). */
    .mn-right-drawer .sidebar-sticky {
        position: static;
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        gap: 0;
    }

    /* Filters pill button in the recipe toolbar */
    .ar-filters-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 14px;
        border-radius: 20px;
        border: 1.5px solid #d1d5db;
        background: #fff;
        font-family: 'Lato', sans-serif;
        font-size: 0.85rem;
        font-weight: 600;
        color: #555;
        cursor: pointer;
        transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
        white-space: nowrap;
    }

    .ar-filters-btn:hover,
    .ar-filters-btn:focus {
        border-color: #667eea;
        color: #667eea;
        outline: none;
    }

    .ar-filters-btn:focus-visible {
        outline: 2px solid #667eea;
        outline-offset: 2px;
    }

    /* Badge showing active filter count */
    .ar-filters-btn__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: #667eea;
        color: #fff;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
    }

    /* Active state when any filter is applied */
    .ar-filters-btn--active {
        border-color: #667eea;
        color: #667eea;
        background: #f0f0ff;
    }
}


/* =================================================================
   SECTION 6 — Recipe list / grid view toggle
   .results-container--list activates compact row layout.
   Applied by JS; default = list on mobile, grid on desktop.
   ================================================================= */

/* Toolbar: counter + toggle button on the same row */
.recipe-view-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 8px;
    min-height: 28px;
}

/* The toggle button */
.view-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #555;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.view-toggle-btn:hover {
    border-color: #667eea;
    color: #667eea;
}

.view-toggle-btn:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* ── List view: container ── */
.results-container--list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* ── List view: each card becomes a horizontal row ── */
.results-container--list .recipe-card {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 76px !important;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: box-shadow 0.2s ease;
}

.results-container--list .recipe-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: none; /* suppress the card-lift from style.css */
}

/* ── Thumbnail ── */
.results-container--list .recipe-card-header {
    width: 76px !important;
    min-width: 76px !important;
    height: 76px !important;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.results-container--list .recipe-card-image {
    width: 76px !important;
    height: 76px !important;
    object-fit: cover;
}

/* Hide overlay and favorite star in list mode */
.results-container--list .card-overlay,
.results-container--list .favorite-toggle {
    display: none !important;
}

/* ── Content area ── */
.results-container--list .card-content {
    flex: 1;
    padding: 10px 14px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.results-container--list .card-content h2 {
    font-size: 0.95rem !important;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block !important;
    -webkit-line-clamp: unset !important;
}

/* ── Compact meta line ── */
.results-container--list .recipe-times {
    font-size: 0.78rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.results-container--list .recipe-times .time-line {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

/* Show category badge in list mode (hidden by default in grid) */
.results-container--list .recipe-tags {
    display: flex !important;
    gap: 4px;
    flex-wrap: wrap;
}

.results-container--list .recipe-tags .info-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 10px;
    background: #f0f0f7;
    color: #667eea;
}

.results-container--list .metadata-and-button-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


/* =================================================================
   SECTION 7a — Page header: hamburger left, title center (mobile)
   Applies to ALL pages using .mn-page-header — correct behavior
   since the stacking bug affects every page with this class.
   ================================================================= */

@media (max-width: 768px) {

    /* Make the sticky header a horizontal row */
    .mn-page-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        min-height: 52px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }

    /* Nav wrapper: shrink to hamburger width, render before the brand */
    #site-nav-header {
        width: auto;        /* overrides style.css width: 100% */
        flex-shrink: 0;
        order: -1;          /* renders before .mn-page-brand visually */
    }

    /* Nav strip: shrink to content, clear the partial-width shadow */
    #site-nav-header nav {
        width: auto !important;         /* overrides style.css width: 100% !important */
        box-shadow: none !important;    /* overrides style.css box-shadow !important */
        padding: 4px 10px !important;   /* overrides mobile.css SECTION 2 padding !important */
        flex-wrap: nowrap;              /* overrides mobile.css SECTION 2 flex-wrap: wrap */
    }

    /* Brand block: fill remaining row space, center the title */
    .mn-page-brand {
        flex: 1;
        text-align: center;
        padding: 10px 8px;  /* overrides mobile.css SECTION 2 padding: 10px 16px 8px */
    }

    /* Title: absolute so it centers against the full header width, not just
       the space left after the hamburger. pointer-events: none keeps the
       hamburger tappable if they overlap. */
    .mn-page-brand__title {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
        pointer-events: none;
    }

}   /* end SECTION 7a */


/* =================================================================
   SECTION 7b — all-recipes.html: 2-column grid, cards, title, meta
   Grid: scoped to #featured-recipes (all-recipes.html only).
   Card rules: scoped via .recipe-card — also applies correctly to
   all-user-recipes.html which uses identical markup.
   ================================================================= */

@media (max-width: 768px) {

    /* ── Toolbar counter: left-align within toolbar flex row ── */
    #recipes-loaded-counter {
        text-align: left;
        padding-bottom: 0;
    }

    /* ── Grid container: 2 equal columns ──
       justify-items: stretch overrides style.css justify-items: start
       (which would otherwise leave cards narrower than their column). */
    #featured-recipes .results-container:not(.results-container--list) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        justify-items: stretch !important;
    }

    /* ── Cards: remove hard-coded 230px width (set twice in style.css) ── */
    .results-container:not(.results-container--list) .recipe-card {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
    }

    /* ── Thumbnail: proportionally shorter for narrower card width ── */
    .results-container:not(.results-container--list) .recipe-card-image,
    .results-container:not(.results-container--list) .recipe-card img,
    .results-container:not(.results-container--list) .recipe-card .no-image {
        height: 130px;
    }

    /* ── Card content: tighter padding (style.css sets 20px all sides) ── */
    .results-container:not(.results-container--list) .recipe-card .card-content {
        padding: 10px 10px 12px !important;
    }

    /* ── Recipe title: full wrap, no 2-line clamp ──
       Overrides 6 properties from style.css:
         display -webkit-box, -webkit-line-clamp: 2, line-clamp: 2 (standard prop),
         overflow: hidden, text-overflow: ellipsis, min-height: 2.7em. */
    .results-container:not(.results-container--list) .recipe-card .card-content h2 {
        display: block !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        overflow: visible !important;
        text-overflow: unset !important;
        white-space: normal !important;
        -webkit-box-orient: unset !important;
        min-height: unset !important;
        font-size: 0.85rem !important;
        margin-bottom: 6px !important;
    }

    /* ── Times: hide Prep and Cook, show only Total ──
       time-item--total already present in all card HTML.
       When no total exists the server renders "Total: N/A". */
    .results-container:not(.results-container--list) .recipe-card .time-item:not(.time-item--total) {
        display: none !important;
    }

    .results-container:not(.results-container--list) .recipe-card .time-item--total {
        display: block;
        font-size: 0.78rem;
        color: #888;
        margin: 0;
    }

    /* ── Remove bottom gap on time-line when Prep/Cook are hidden ──
       style.css sets margin-bottom: 4px on .time-line. With only
       one item remaining the gap is a dangling orphan space. */
    .results-container:not(.results-container--list) .recipe-card .time-line {
        margin-bottom: 0 !important;
    }

}   /* end SECTION 7b */


/* =================================================================
   SECTION 7c — List view: mobile-only overrides
   SECTION 6 (list view base styles) is outside any media query and
   applies at all widths. These rules correct list-view behaviour on
   mobile only (≤ 768px) without affecting desktop list view.
   ================================================================= */

@media (max-width: 768px) {

    /* ── Cards: fill full width (override style.css max/min-width: 230px) ── */
    .results-container--list .recipe-card {
        max-width: none !important;
        min-width: 0 !important;
        min-height: auto !important;
    }

    /* ── Allow recipe title to wrap instead of truncating ── */
    .results-container--list .card-content h2 {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* ── Hide Prep + Cook; show only Total Time ── */
    .results-container--list .time-item:not(.time-item--total) {
        display: none !important;
    }

    /* ── Hide category/meal-type tags (overrides SECTION 6's display:flex !important) ── */
    .results-container--list .recipe-tags {
        display: none !important;
    }

    /* ── Hide thumbnail: list view shows name + total time only ── */
    .results-container--list .recipe-card-header {
        display: none !important;
    }

    /* ── Tighten card content padding/gap for compact list rows ── */
    .results-container--list .card-content {
        gap: 2px !important;
        padding: 8px 14px !important;
    }

}   /* end SECTION 7c */