/* Shared mobile controls. The approved desktop layout and home sections stay intact. */
.mobile-quick-nav { display: none; }
.mobile-menu-services { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid #cfddc8; border-radius: 14px; background: #eaf1e5; color: #2f513a; font-size: 15px; font-weight: 700; }
.mobile-menu-services svg { width: 22px; height: 22px; flex: none; }
.mobile-menu-services small { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; }
.mobile-menu-services > span:last-child { margin-left: auto; }

@media (max-width: 1023px) {
    #mobile-site-menu { top: 0; z-index: 110; height: 100vh; height: 100dvh; }
    #mobile-menu-panel {
        inset-inline: auto 0;
        width: min(92vw, 400px);
        overflow: hidden;
        border-left: 1px solid #e8e0d4;
        border-right: 0;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .mobile-menu-heading { flex: none; background: #fffcf7; }
    #mobile-menu-panel .mobile-menu-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-block: 16px 24px; }
    #mobile-menu-panel .mobile-menu-content > * + * { margin-top: 24px; }
    #mobile-menu-panel .mobile-menu-content h3 { font-size: 12px; letter-spacing: .04em; color: #7b6541; }
    .mobile-menu-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .mobile-menu-shortcuts a { display: flex; min-height: 54px; align-items: center; justify-content: center; gap: 8px; border: 1px solid #d8e1d8; border-radius: 12px; background: #edf2eb; color: #345541; font-size: 13px; font-weight: 700; }
    .mobile-menu-shortcuts svg { width: 18px; height: 18px; flex: none; }
    #mobile-menu-panel a[aria-current="page"] { background: #e7eee4; border-color: #a3b99e; color: #2b4c36; }
    #mobile-menu-panel :is(a, button):focus-visible { outline: 3px solid #94733e; outline-offset: 2px; }
    .mobile-menu-account { flex: none; }
}

@media (max-width: 767px) {
    :root { --mobile-nav-height: calc(68px + env(safe-area-inset-bottom, 0px)); --mobile-header-height: calc(68px + env(safe-area-inset-top, 0px)); }
    html { scroll-padding-top: calc(var(--mobile-header-height) + 20px); scroll-padding-bottom: calc(var(--mobile-nav-height) + 16px); }
    body:has(.mobile-quick-nav) { padding-bottom: var(--mobile-nav-height); }
    body:has(.mobile-quick-nav) .site-navbar { height: var(--mobile-header-height); padding-top: env(safe-area-inset-top, 0px); padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
    body:has(.mobile-quick-nav) #main-content { padding-top: var(--mobile-header-height); }
    .site-navbar .site-brand { width: clamp(146px, 43vw, 174px); height: 48px; }
    .site-navbar .site-auth-login { min-width: 44px; min-height: 44px; }
    .site-navbar #auth-logout-btn { min-height: 36px; }
    .site-navbar #auth-user-chip { padding-block: 2px; }
    .mobile-quick-nav {
        position: fixed;
        z-index: 45;
        inset: auto 0 0;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 2px;
        padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
        border-top: 1px solid #e2e5db;
        background: #fffdf9;
        box-shadow: 0 -4px 24px #263d350a;
    }
    .mobile-quick-nav > :is(a, button) {
        display: flex;
        min-width: 0;
        min-height: 56px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 4px 0;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #5c675c;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: -.04em;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-quick-nav svg { width: 21px; height: 21px; stroke-width: 1.7; }
    .mobile-quick-nav > [aria-current="page"] { color: #2f533e; background: #eaf0e5; font-weight: 800; }
    .mobile-quick-nav > .mobile-quick-nav__create { color: #fffdf8; background: #345541; }
    .mobile-quick-nav > :is(a, button):active { background: #dce6d6; color: #294532; }
    .mobile-quick-nav > :is(a, button):focus-visible { outline: 3px solid #94733e; outline-offset: -3px; }
    .mobile-is-editing .mobile-quick-nav { display: none; }
    .memory-box-toast { bottom: calc(var(--mobile-nav-height) + 12px); }

    /* Readable inputs avoid automatic text-field zoom on phones. */
    :is(#main-content, #auth-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea) {
        min-width: 0;
        max-width: 100%;
        font-size: 16px;
        scroll-margin-block: 100px;
    }
    :is(#main-content, #auth-modal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]), select) { min-height: 48px; }
    :is(#main-content, #auth-modal) textarea { line-height: 1.7; }
    /* The builder has a legacy 15px !important rule of its own. */
    #main-content #memorial-create-wizard :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), textarea, select) { font-size: 16px !important; }
    #auth-modal { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
    #auth-modal-panel { padding: 22px; max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
    #auth-modal-close-btn { min-height: 44px; min-width: 44px; flex: none; }
    .intro-hero-actions { gap: 10px; }
    .intro-hero-actions .intro-hero-action { flex: 1 1 140px; min-height: 48px; font-size: 14px; }
    .memory-page:has(> .iv-nav) { overflow: clip; }
    .iv-nav { position: sticky; top: var(--mobile-header-height); z-index: 30; padding-block: 8px; }
    .iv-nav .iv-wrap { display: flex; width: 100%; gap: 8px; overflow-x: auto; justify-content: flex-start; padding: 2px 20px; scroll-padding-inline: 20px; scrollbar-width: thin; }
    .iv-nav .iv-wrap a { flex: none; min-height: 44px; padding: 10px 14px; border: 1px solid #e4d9cb; border-radius: 24px; background: #fffdf9; font-size: 13px; white-space: nowrap; }
    .iv-section { scroll-margin-top: 64px; }
    #moriam-page .moriam-section-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
    .memory-search-page .memory-search-hero { padding-block: 32px; }
    .memory-search-page .memory-search-lede { font-size: 15px; }
    .moriam-section-nav { top: var(--mobile-header-height); }
    .site-footer { padding-top: 28px; }
    .site-footer .site-footer__company { font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
    .site-footer .site-footer__intro { font-size: 13px; }
    .site-footer .site-footer__nav-list { font-size: 13px; gap: 0; }
    .site-footer__nav-list a, .site-footer__legal a { display: inline-flex; min-height: 44px; align-items: center; }
    .site-footer .site-footer__legal { gap: 0 16px; }
    .site-footer .site-footer__company-line > * + *::before { display: none; }
}

@media print {
    .mobile-quick-nav, #mobile-site-menu { display: none !important; }
    body:has(.mobile-quick-nav) { padding-bottom: 0; }
}