/* ============================================================
   SWLW Navbar — Centered Logo Layout
   ------------------------------------------------------------
   All surface colours come from the active theme's CSS custom
   properties (defined in wwwroot/css/themes/theme-*.css). Do
   not hardcode hex values here — switching the admin theme
   should immediately restyle every navbar surface below.

   Token map (defaults shown for Classic Cream):
   ┌─────────────────────────────┬──────────────────────────┐
   │ Surface                     │ Token(s)                 │
   ├─────────────────────────────┼──────────────────────────┤
   │ Main navbar bar             │ --swlw-navbar-bg         │
   │ Nav link text               │ --swlw-navbar-text       │
   │ Nav link hover/active       │ --swlw-navbar-hover      │
   │ Bottom hairline border      │ --swlw-navbar-border     │
   │ Utility strip + ticker      │ --swlw-footer-bg /       │
   │   (always dark, theme-     │   --swlw-footer-text     │
   │    agnostic editorial frame)│                          │
   │ Dropdown menu surface       │ --swlw-background        │
   │ Dropdown text + border      │ --swlw-text / --border   │
   │ Dropdown hover row          │ --swlw-section-background│
   │                             │   + --swlw-primary       │
   │ "Book a Class" CTA          │ --swlw-button-bg /       │
   │                             │   --swlw-button-hover /  │
   │                             │   --swlw-button-text     │
   │ WhatsApp icon (resting)     │ derived from             │
   │                             │   --swlw-navbar-text     │
   │ WhatsApp icon (hover)       │ #25D366 (brand colour)   │
   │ Mobile offcanvas            │ --swlw-background        │
   │ Hamburger icon              │ --swlw-navbar-text via   │
   │                             │   CSS mask               │
   └─────────────────────────────┴──────────────────────────┘
   ============================================================ */

/* ── Utility bar above main navbar ─────────────────────────── */
.utility-bar {
    background: var(--swlw-footer-bg);
    color: var(--swlw-footer-text);
    padding: 4px 0;
    font-size: 11px;
    border-bottom: 1px solid var(--swlw-navbar-border);
}
.utility-bar a {
    color: color-mix(in srgb, var(--swlw-footer-text) 92%, transparent);
    text-decoration: none;
    padding: 2px 10px;
    transition: color 0.2s;
}
.utility-bar a:hover {
    color: var(--swlw-footer-bright);
}
.utility-bar .divider {
    color: color-mix(in srgb, var(--swlw-footer-text) 35%, transparent);
}

/* ── Main navbar ───────────────────────────────────────────── */
.navbar-swlw {
    background: var(--swlw-navbar-bg);
    padding: 0;
    min-height: 92px;
    border-bottom: 1px solid var(--swlw-navbar-border);
}

/* 3-column grid: left nav | center logo | right nav */
    .navbar-swlw .navbar-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        width: 100%;
        padding: 0 20px;
        min-height: 92px;
    }

/* ── Left / Right nav groups ───────────────────────────────── */
.nav-left {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

/* ── Shared nav link styles ────────────────────────────────── */
.navbar-swlw .nav-link {
    color: var(--swlw-navbar-text) !important;
    font-size: 13px;
    padding: 6px 10px !important;
    border-radius: 4px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.navbar-swlw .nav-link:hover,
.navbar-swlw .nav-link:focus {
    background: color-mix(in srgb, var(--swlw-navbar-text) 12%, transparent);
    color: var(--swlw-navbar-hover) !important;
}
.navbar-swlw .nav-link.active {
    color: var(--swlw-navbar-hover) !important;
    font-weight: 600;
}

/* ── Dropdown menus ────────────────────────────────────────── */
.navbar-swlw .dropdown-menu {
    background: var(--swlw-background);
    border: 1px solid var(--swlw-border);
    border-radius: 8px;
    padding: 6px 0;
    margin-top: 4px;
    min-width: 180px;
    box-shadow: var(--swlw-card-shadow);
}
.navbar-swlw .dropdown-item {
    color: var(--swlw-text);
    font-size: 13px;
    padding: 8px 16px;
    transition: background 0.15s, color 0.15s;
}
.navbar-swlw .dropdown-item:hover,
.navbar-swlw .dropdown-item:focus {
    background: var(--swlw-section-background);
    color: var(--swlw-primary);
}
.navbar-swlw .dropdown-divider {
    border-top-color: var(--swlw-border);
}

/* ── Center logo + brand text ──────────────────────────────── */
.navbar-brand-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    padding: 6px 20px;
    transition: opacity 0.2s;
}
.navbar-brand-center:hover {
    opacity: 0.9;
}
.navbar-logo-img {
    width: clamp(210px, 18vw, 300px);
    height: auto;
    max-height: 77px;
    border-radius: 20%;
    border: 2px solid color-mix(in srgb, var(--swlw-navbar-text) 30%, transparent);
    object-fit: cover;
    display: block;
    background: transparent;
}


.navbar-brand-name {
    color: var(--swlw-navbar-text);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    margin-top: 3px;
    line-height: 1.2;
    letter-spacing: 0.02em;
}
.navbar-brand-name small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
    letter-spacing: 0.05em;
}

/* ── WhatsApp icon button ──────────────────────────────────── */
.btn-whatsapp {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--swlw-navbar-text) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--swlw-navbar-text) 24%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swlw-navbar-text);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
}
.btn-whatsapp svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    display: block;
}
.btn-whatsapp:hover {
    /* WhatsApp brand green — intentionally NOT themed. */
    background: #25D366;
    border-color: #25D366;
    color: #fff;
}

/* ── "Book a Class" CTA ────────────────────────────────────── */
.btn-book-class {
    background: var(--swlw-button-bg);
    color: var(--swlw-button-text) !important;
    border-radius: 20px;
    font-size: 12.5px;
    padding: 7px 18px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition: background 0.2s, transform 0.1s;
    border: 1px solid transparent;
}
.btn-book-class:hover {
    background: var(--swlw-button-hover);
    color: var(--swlw-button-text) !important;
    transform: translateY(-1px);
}

/* ── Ticker strip ──────────────────────────────────────────── */
.ticker-wrap {
    background: var(--swlw-footer-bg);
    overflow: hidden;
    height: 28px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--swlw-navbar-border);
}
.ticker-track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: ticker-scroll 35s linear infinite;
}
.ticker-track:hover {
    animation-play-state: paused;
}
.ticker-item {
    color: color-mix(in srgb, var(--swlw-footer-text) 88%, transparent);
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ticker-dot {
    width: 4px;
    height: 4px;
    background: var(--swlw-accent);
    border-radius: 50%;
    flex-shrink: 0;
}
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; }
}

/* ── Mobile toggler — paint icon with navbar text colour
   via CSS mask. This wins over the per-theme overrides in
   theme-classic-cream.css / theme-soft-lavender.css because
   the selector is more specific (.navbar-swlw scope). ────── */
.navbar-swlw .navbar-toggler {
    border: 1px solid color-mix(in srgb, var(--swlw-navbar-text) 30%, transparent);
    padding: 4px 8px;
}
.navbar-swlw .navbar-toggler-icon {
    background-image: none;
    background-color: var(--swlw-navbar-text);
    -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center / 1.5em no-repeat;
            mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center / 1.5em no-repeat;
}

/* ── Mobile Offcanvas ──────────────────────────────────────── */
.offcanvas-swlw {
    background: var(--swlw-background);
    color: var(--swlw-text);
    max-width: 300px;
}
.offcanvas-swlw .offcanvas-header {
    border-bottom: 1px solid var(--swlw-border);
    padding: 16px 20px;
}
.offcanvas-swlw .offcanvas-title {
    color: var(--swlw-heading);
    font-size: 15px;
    font-weight: 600;
}
.offcanvas-swlw .btn-close {
    /* Bootstrap's .btn-close uses a dark SVG by default.
       For dark page-backgrounds we'd want filter: invert(1),
       but every theme in this project has a light --swlw-background
       so the default close icon stays readable. */
}
.offcanvas-swlw .nav-link {
    color: var(--swlw-text) !important;
    font-size: 14px;
    padding: 10px 20px !important;
    border-radius: 0;
    border-bottom: 1px solid var(--swlw-border);
}
.offcanvas-swlw .nav-link:hover,
.offcanvas-swlw .nav-link:focus {
    background: var(--swlw-section-background);
    color: var(--swlw-primary) !important;
}
.offcanvas-swlw .nav-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--swlw-muted);
    padding: 14px 20px 4px;
    text-transform: uppercase;
}
.offcanvas-swlw .btn-book-class-mobile {
    display: block;
    margin: 16px 20px;
    background: var(--swlw-button-bg);
    color: var(--swlw-button-text);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
}
.offcanvas-swlw .btn-book-class-mobile:hover {
    background: var(--swlw-button-hover);
    color: var(--swlw-button-text);
}
.offcanvas-swlw .offcanvas-body .icon-inline {
    width: 16px;
    height: 16px;
    fill: currentColor;
    vertical-align: -3px;
    margin-right: 8px;
}

/* ── Responsive: hide left/right nav on mobile, show toggler ─ */
@media (max-width: 991.98px) {
    .navbar-swlw .navbar-inner {
        grid-template-columns: auto 1fr auto;
        padding: 0 12px;
    }
    .nav-left,
    .nav-right {
        display: none !important;
    }
    .navbar-brand-center {
        grid-column: 2;
        padding: 4px 8px;
    }
    .navbar-logo-img {
        width: clamp(150px, 45vw, 220px);
        height: auto;
        max-height: 77px;
        border-radius: 20%;
        border: 2px solid color-mix(in srgb, var(--swlw-navbar-text) 30%, transparent);
        object-fit: cover;
        display: block;
        background: transparent;
    }
    .navbar-brand-name {
        font-size: 11px;
    }
    .mobile-toggler-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }
    .mobile-cart-icon {
        color: color-mix(in srgb, var(--swlw-navbar-text) 88%, transparent);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
    }
    .mobile-cart-icon svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }
    .mobile-cart-icon:hover {
        color: var(--swlw-navbar-hover);
    }
}
@media (min-width: 992px) {
    .mobile-toggler-wrap { display: none !important; }
}