/*
Theme Name: The Unmarked Group
Author: Vitaly Vinnikov
Description: Custom one-page theme for The Unmarked Group. ACF PRO flexible content (Page panels). Design styles live in assets/css/site.css (designer handover); WordPress-specific additions go here.
Version: 1.0
Requires PHP: 8.0
Text Domain: umg
*/

/* contact form states */
.contact form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact form.busy .send{opacity:.6;pointer-events:none}
.contact form .err{grid-column:1/-1;margin:0;font-size:14px;color:#d92d20}

/* two sides: the hovered panel widens (site.css); lay text out at the narrow width (1fr of 2.22fr)
   so the other panel never re-wraps and the block height doesn't jump */
@media(min-width:821px){
    [data-skin="mesh"] .sgrid{container-type:inline-size}
    [data-skin="mesh"] .sgrid .side>*{width:calc(100cqw / 2.22 - 2 * clamp(36px,4.2vw,64px));flex-shrink:0}
}

/* hero on phones: site.js keeps each phrase on one line, which shrinks the title to ~22px.
   Let it wrap as one balanced paragraph at a fixed size instead (sized to the longest word), bigger tagline */
@media(max-width:600px){
    [data-skin="mesh"] .hero h1{font-size:min(40px,calc((100vw - 34px) / 7.6))!important;line-height:1.1;text-wrap:balance}
    [data-skin="mesh"] .hero h1 .hl,[data-skin="mesh"] .hero h1 .cx{display:inline;white-space:normal}
    [data-skin="mesh"] .hero h1 .pair{white-space:normal}
    [data-skin="mesh"] .hero .tag{font-size:19px;line-height:1.45}
    /* taller title: keep the button clear of the scroll cue pinned to the hero's bottom */
    [data-skin="mesh"] .hero{padding-top:11vh;padding-bottom:84px}
}

/* two sides switch (phones/tablets): selected tab sits on the blue pill */
.sswitch button[aria-selected="true"]{color:#fff}

/* mobile menu: site.css locks scrolling with body{overflow:hidden}, but with html{overflow-x:clip} that makes
   <body> the scroll box and the sticky nav (logo + close button) snaps to the top of the page. Lock the root instead. */
html:has(> body.menu-open){overflow:hidden}
body.menu-open{overflow:visible;overflow-x:clip}

/* brand panel (site.js moves #drawer to <body>): lock the page behind it, keep scrolling inside the panel */
html:has(> body > .drawer:not([hidden])){overflow:hidden}
html{scrollbar-gutter:stable} /* no sideways jump on desktops with permanent scrollbars when the page is locked */
.dpanel{overscroll-behavior:contain}
.dback{touch-action:none}

/* plain content pages (Terms, Privacy) */
.page-content{padding:160px 0 96px}
.page-content .wrap{max-width:820px}
.page-content h1{font-size:clamp(32px,4vw,52px);line-height:1.1;margin:0 0 32px;color:var(--blue)}
.page-content h2{font-size:24px;margin:40px 0 12px}
.page-content a{color:var(--blue)}

/* brand panel photo: Safari shrinks an aspect-ratio + overflow:hidden grid item when the panel is shorter than its
   content (phones), so the text below slid up over the photo. Padding-based square instead; WebKit keeps that size. */
.dpic{aspect-ratio:auto;height:0;padding-bottom:100%;position:relative}
.dpic img{position:absolute;inset:0}