/**
 * Foldables + mid-width viewports (Galaxy Z Fold inner, landscape phones, small tablets).
 *
 * Unfolded Z Fold 4 inner is ~690×830 CSS px (portrait) / ~830×690 (landscape).
 * That sits between Tailwind sm (640) and lg (1024), so the 72px logo, desktop
 * CTAs, and phone map chrome all show at once and the layout overflows.
 */

:root {
    --moppsy-header-h: 4.75rem;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html, body {
    max-width: 100%;
    overflow-x: clip;
}

@supports not (overflow: clip) {
    html, body {
        overflow-x: hidden;
    }
}

img:not(.cp-avatar):not(.moppsy-brand-logo),
svg, video, canvas {
    max-width: 100%;
}

.cp-avatar,
.moppsy-brand-logo {
    max-width: none;
}

.moppsy-site-header,
.moppsy-header-row,
.site-main-wrapper,
.moppsy-map-page {
    min-width: 0;
}

.moppsy-header-row {
    flex-wrap: nowrap;
}

.moppsy-header-brand {
    min-width: 0;
}

.moppsy-header-wordmark {
    min-width: 0;
}

/* Keep the sticky header on one row from cover-phone through small-tablet. */
@media (max-width: 1279px) {
    .moppsy-site-header {
        top: max(4px, env(safe-area-inset-top, 0px));
        margin-left: 0.65rem;
        margin-right: 0.65rem;
        border-radius: 1.1rem;
    }

    .moppsy-header-row {
        padding: 0.4rem 0.7rem;
        gap: 0.45rem;
    }

    .moppsy-site-header .moppsy-brand-logo {
        width: 44px !important;
        height: 44px !important;
    }

    .moppsy-header-wordmark {
        font-size: 1.15rem !important;
        line-height: 1.15;
    }

    .moppsy-header-desktop-nav {
        display: none !important;
    }

    .moppsy-header-wide-only {
        display: none !important;
    }

    .moppsy-header-hamburger {
        display: inline-flex !important;
        pointer-events: auto;
        position: relative;
        z-index: 2;
    }

    /* Theme toggle stays reachable when desktop CTAs are hidden. */
    .moppsy-header-narrow-only.sm\:hidden {
        display: inline-flex !important;
    }

    /*
     * Alpine x-show clears inline display when opening; Tailwind md:hidden then
     * sets display:none from 768px up — so the hamburger toggled state with no
     * visible drawer. Force the open drawer until xl.
     */
    .moppsy-mobile-menu-backdrop.is-open {
        display: block !important;
    }
    .moppsy-mobile-menu-panel.is-open {
        display: flex !important;
    }
}

/* Tailwind md:hidden hides the drawer at 768px — keep it usable until xl. */
@media (min-width: 768px) and (max-width: 1279px) {
    .moppsy-mobile-menu-panel {
        width: min(24rem, 72vw) !important;
    }
}

@media (min-width: 1280px) {
    .moppsy-header-hamburger {
        display: none !important;
    }

    .moppsy-header-narrow-only {
        display: none !important;
    }

    .moppsy-mobile-menu-backdrop,
    .moppsy-mobile-menu-panel {
        display: none !important;
    }
}

/* True phones (cover screen / normal handset): restore compact phone login. */
@media (max-width: 639px) {
    .moppsy-header-narrow-only {
        display: inline-flex !important;
    }

    .moppsy-site-header .moppsy-brand-logo {
        width: 40px !important;
        height: 40px !important;
    }

    .moppsy-header-wordmark {
        font-size: 1.05rem !important;
    }
}

/*
 * Unfolded fold / landscape phone / small tablet: use the extra width.
 * Cover displays stay below 600px and keep a single column.
 */
@media (min-width: 640px) and (max-width: 1023px) {
    .landing-hero-wrap--layout-split .landing-hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 1.5rem;
        align-items: center;
        padding-top: 2rem;
        padding-bottom: 1.75rem;
    }

    .landing-hero-copy h1 {
        font-size: clamp(2.05rem, 4.6vw, 3.15rem) !important;
        overflow-wrap: anywhere;
    }

    .landing-hero-copy > p {
        max-width: none;
        font-size: 1rem;
    }

    .page-photo-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 1.5rem;
    }

    .page-photo-split--flip {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }

    .page-photo-split--flip .page-hero-photo {
        order: -1;
    }

    .site-main-wrapper {
        min-height: calc(100dvh - var(--moppsy-header-h, 4.75rem));
    }
}

/* Near-square inner fold (tabletop / unfolded portrait): don't waste vertical space. */
@media (min-width: 600px) and (max-width: 1100px) and (max-aspect-ratio: 6/5) {
    .landing-hero-wrap--layout-search .landing-hero-inner,
    .landing-hero-wrap--layout-minimal .landing-hero-inner,
    .landing-hero-inner {
        padding-top: 1.75rem;
        padding-bottom: 1.5rem;
    }

    .landing-hero-apps {
        margin-top: 1.25rem;
    }
}

/* Dual-screen / Flex Mode (hinge): keep content out of the crease. */
@media (horizontal-viewport-segments: 2) {
    .moppsy-site-header {
        margin-left: env(viewport-segment-left 0 0, 0.75rem);
        margin-right: calc(100vw - env(viewport-segment-right 1 0, 100vw) + 0.75rem);
    }

    .moppsy-map-shell {
        grid-template-columns: env(viewport-segment-width 0 0, 38%) minmax(0, 1fr);
    }
}

/* Map height follows the measured header (see foldable-viewport.js). */
.moppsy-map-page {
    height: calc(100dvh - var(--moppsy-header-h, 4.75rem)) !important;
    max-height: calc(100dvh - var(--moppsy-header-h, 4.75rem));
}

body:has(.moppsy-map-page) {
    overflow: hidden;
}

body:has(.moppsy-map-page) .site-footer-outer,
body:has(.moppsy-map-page) .site-footer-parallax-spacer {
    display: none !important;
}

body:has(.moppsy-map-page) .site-main-wrapper {
    min-height: 0;
    border-radius: 0;
}

/* Messenger: same viewport lock as map — footer must not appear above the soft keyboard. */
body:has(.moppsy-messenger-page) {
    overflow: hidden;
}

body:has(.moppsy-messenger-page) .site-footer-outer,
body:has(.moppsy-messenger-page) .site-footer-parallax-spacer {
    display: none !important;
}

body:has(.moppsy-messenger-page) .site-main-wrapper {
    min-height: 0;
    border-radius: 0;
}