/* ============================================================
   Mobile Redesign — foundation
   ----------------------------------------------------------------
   This stylesheet adds shared mobile patterns that get progressively
   used across pages as each one is ported. Page-specific mobile
   styles live alongside each Blade template's @section('styles').

   Design tokens (mobile-only contexts unless noted):
   - Surface:    #12203B (page background)
   - Section A:  #182A4C (lighter section tint)
   - Section B:  #0E1B33 (darker section tint)
   - Buttons:    #284b65 fill, #fff border
   - Body text:  #fff
   - W.H. Ales accent only: #E5A82B (gold). Do not use on Liberty
     Harbor umbrella pages.
   ============================================================ */

:root {
    --lh-mb-surface: #12203B;
    --lh-mb-surface-alt: #182A4C;
    --lh-mb-surface-dark: #0E1B33;
    --lh-mb-btn: #284b65;
    --lh-mb-text: #ffffff;
    --lh-mb-text-dim: rgba(255, 255, 255, 0.7);
    --lh-mb-border: #ffffff;
    --lh-mb-border-soft: rgba(255, 255, 255, 0.25);
    --lh-mb-gold: #E5A82B;
}

/* Make the [hidden] attribute beat display:grid/flex */
[hidden] {
    display: none !important;
}

/* ============================================================
   Slide-in mobile menu
   Triggered by .navbar-toggler in layouts/nav.blade.php
   ============================================================ */

.lh-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1100;
}

.lh-menu-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.lh-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    background: #f8f9fa;
    color: #0F3272;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 18px rgba(0, 0, 0, 0.4);
}

.lh-menu.open {
    transform: translateX(0);
}

.lh-menu__head {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.lh-menu__head-title {
    font-family: 'Big Caslon', 'Times New Roman', serif;
    font-weight: 700;
    font-size: 18px;
}

.lh-menu__close {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 22px;
    color: #0F3272;
    cursor: pointer;
}

.lh-menu__list {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    flex: 1;
    overflow-y: auto;
}

.lh-menu__list li {
    margin: 0;
}

.lh-menu__list a {
    display: block;
    padding: 12px 20px;
    color: #0F3272;
    text-decoration: none;
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.lh-menu__list a:hover {
    background: rgba(15, 50, 114, 0.05);
}

.lh-menu__list a.active {
    font-weight: 700;
    background: rgba(15, 50, 114, 0.08);
}

.lh-menu__list a.subitem {
    padding-left: 36px;
    font-size: 14px;
}

.lh-menu__divider {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 4px;
}

.lh-menu__list a .lh-menu__icon {
    margin-right: 8px;
    opacity: 0.7;
}

.lh-menu__foot {
    padding: 10px 20px 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 11px;
    color: rgba(15, 50, 114, 0.6);
}

/* Body scroll lock when menu (or modal) is open */
body.lh-menu-open {
    overflow: hidden;
}

/* ============================================================
   Shared mobile button pattern — used inside any mobile-only block
   Apply with .lh-mb-btn (and .lh-mb-btn-block for full-width).
   ============================================================ */

.lh-mb-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--lh-mb-btn);
    color: var(--lh-mb-text) !important;
    text-decoration: none;
    text-align: center;
    padding: 14px 14px;
    border: 1px solid var(--lh-mb-border);
    border-radius: 8px;
    font-family: 'Big Caslon', 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    min-height: 48px;
}

.lh-mb-btn:hover {
    color: var(--lh-mb-text);
    text-decoration: none;
    filter: brightness(1.1);
}

.lh-mb-btn i {
    margin-right: 10px;
}

.lh-mb-btn-block {
    width: 100%;
}

.lh-mb-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}