/* Mobile-first adjustments layered on top of main.css */

@media (max-width: 720px) {
    .main-nav { display: none; }
    .site-header-book { display: none; }

    .site-header .container { padding-top: 12px; padding-bottom: 12px; }

    .hero { padding: 44px 0 52px; }
    .hero h1 { font-size: 28px; }

    section { padding: 40px 0; }

    .section-title { font-size: 22px; }

    .barber-card img { width: 110px; height: 110px; }

    .auth-card { padding: 28px 22px; }

    /* App-style bottom tab bar replaces the hidden .main-nav here. */
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
    .bottom-tab-bar { display: flex; }
}

@media (max-width: 480px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .plain-item { flex-direction: column; align-items: flex-start; gap: 4px; }
    .btn { width: 100%; }
}

/* ---------- Public site: hamburger menu + standalone (installed app) fixes ---------- */
.nav-toggle { display: none; }
.site-header { position: relative; }

/* Installed app (iOS "black-translucent" status bar / notched phones):
   keep the header out from under the status bar. */
.site-header { padding-top: env(safe-area-inset-top, 0px); }

@media (max-width: 720px) {
    .nav-toggle {
        width: 40px; height: 40px;
        display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
        flex-shrink: 0;
        background: transparent;
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;
        cursor: pointer;
        padding: 0;
    }
    .nav-toggle span {
        display: block; width: 20px; height: 2px; background: var(--color-gold-light);
        border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* The header links drop down as a panel instead of being hidden. */
    body.nav-open .site-header .main-nav {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch;
        position: absolute;
        top: 100%; left: 0; right: 0;
        z-index: 960;
        order: 0 !important;
        gap: 0 !important;
        padding: 6px 20px 14px;
        background: var(--color-charcoal);
        border-bottom: 1px solid #000;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
        max-height: calc(100vh - 120px);
        max-height: calc(100dvh - 120px);
        overflow-y: auto;
    }
    body.nav-open .site-header .main-nav a {
        padding: 13px 4px;
        font-size: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        white-space: normal;
    }
    body.nav-open .site-header .main-nav .pwa-install-btn { margin-top: 12px; width: 100%; }
    body.nav-open .site-header .main-nav .pwa-ios-hint { margin-top: 10px; }
}

@media (max-width: 720px) {
    /* Keep logo + title + header buttons on screen on narrow phones. */
    .site-header .container { gap: 8px; }
    .site-header-brand { flex-shrink: 1; min-width: 0; overflow: hidden; }
    .site-header-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- No sideways movement on phones ----------
   Nothing may be wider than the screen, so the page can never be dragged
   left/right. Long emails/links wrap, rows of buttons wrap, media shrinks,
   and wide data tables scroll inside their own box (.table-scroll) only. */
html { overflow-x: hidden; max-width: 100%; overscroll-behavior-x: none; }
body { max-width: 100%; }
@supports (overflow-x: clip) {
    html { overflow-x: clip; }
    body { overflow-x: clip; }
}

img, video, svg, canvas, iframe, embed, object { max-width: 100%; }
img, video { height: auto; }
.admin-shell, .admin-main, .container, .panel, .auth-card { min-width: 0; max-width: 100%; }
.admin-main, .container, .panel, .auth-card, .alert,
td, th, p, li, label, h1, h2, h3, h4, a, span, div { overflow-wrap: break-word; word-wrap: break-word; }
input, select, textarea, button, .form-control { max-width: 100%; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.table-scroll { max-width: 100%; }

@media (max-width: 900px) {
    /* Inline flex rows written in the pages (buttons, fields, filters) wrap instead of overflowing */
    .admin-main [style*="display:flex"], .admin-main [style*="display: flex"] { flex-wrap: wrap; }
    .admin-main [style*="display:flex"] > .form-group[style*="flex:1"] { flex: 1 1 100% !important; min-width: 0; }
    .admin-main [style*="display:grid"], .admin-main [style*="display: grid"] { grid-template-columns: minmax(0, 1fr) !important; }
    .admin-main .stat-grid { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
    .admin-main .filter-bar { max-width: 100%; }
    .admin-main .filter-bar .form-control { width: 100%; }
    .admin-main input[type="date"], .admin-main input[type="time"], .admin-main input[type="file"] { width: 100%; max-width: 100% !important; }
    .admin-main .panel, .admin-main form { max-width: 100% !important; }
    .admin-main .row-actions, .admin-main .btn-group { flex-wrap: wrap; }
}

@media (max-width: 720px) {
    .site-header .container { flex-wrap: nowrap; }
    .hero, section, .site-footer, .info-strip { max-width: 100%; overflow-x: clip; }
    .btn { max-width: 100%; white-space: normal; }
    .pwa-install-bar:not([hidden]) { max-width: calc(100% - 20px); box-sizing: border-box; }
}

/* ---------- White + gold theme: mobile header menu & install bar ---------- */
@media (max-width: 720px) {
    .nav-toggle { border-color: #e3d4a3; }
    .nav-toggle span { background: #b8912a; }
    body.nav-open .site-header .main-nav {
        background: #ffffff;
        border-bottom: 1px solid #eadfc0;
        box-shadow: 0 12px 24px rgba(150, 120, 30, 0.15);
    }
    body.nav-open .site-header .main-nav a { border-bottom: 1px solid #f0e6c8; color: #4a4130; }
    .pwa-install-bar:not([hidden]) {
        background: #ffffff; color: #1f1a0e;
        border: 1px solid #eadfc0;
        box-shadow: 0 6px 20px rgba(150, 120, 30, 0.2);
    }
    .pwa-install-bar-text span { color: #6f6650; }
    .pwa-install-dismiss { color: #6f6650; }
}
@media (max-width: 720px) {
    [data-theme="dark"] .nav-toggle { border-color: rgba(255, 255, 255, 0.18); }
    [data-theme="dark"] .nav-toggle span { background: #dfb554; }
    [data-theme="dark"] body.nav-open .site-header .main-nav { background: #121212; border-bottom-color: #2a2a2a; box-shadow: 0 12px 24px rgba(0,0,0,.35); }
    [data-theme="dark"] body.nav-open .site-header .main-nav a { border-bottom-color: rgba(255, 255, 255, 0.08); color: #d9d9d9; }
    [data-theme="dark"] .pwa-install-bar:not([hidden]) { background: #121212; color: #fff; border-color: #2a2a2a; }
    [data-theme="dark"] .pwa-install-bar-text span, [data-theme="dark"] .pwa-install-dismiss { color: #a79f8a; }
}