/**
 * Shared UX layer — loaded by every landing page.
 *
 * The four pages were built at different times and duplicate their own tokens
 * and components. Rather than fix the same thing four times, cross-cutting
 * corrections live here. Uses !important only where it has to beat an inline
 * style on the older pages (/try-on and /brands).
 */

/* ── Skip link ──────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .85rem 1.5rem;
    background: #8B2E55;
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 0 0 12px 0;
}
.skip-link:focus {
    left: 0;
}

/* ── Touch targets ──────────────────────────────────────────────────────────
   Audit found 10-14 controls per page under the 44x44 minimum. Primary hero
   buttons were fine; secondary and utility controls were mouse-sized. */

/* Pill buttons and CTA links: keep the visual proportions, guarantee the height. */
a[href][style*="border-radius:99px"],
a[href][style*="border-radius: 99px"],
.btn {
    min-height: 44px;
}

/* Icon-only social links keep their 28px circle but gain a 44x44 hit area. */
.social,
a[title="Facebook"],
a[title="Instagram"] {
    position: relative;
}
.social::after,
a[title="Facebook"]::after,
a[title="Instagram"]::after {
    content: '';
    position: absolute;
    inset: -11px;
}

/* The logo is the "go home" control on every page; at 28x35 (mobile) and
   156x35 (desktop) it was under the minimum in both. */
nav a[aria-label="Aaina Dekho home"] {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
}

/* Form controls on /studio's waitlist. */
.field input,
.field select,
.field button {
    min-height: 44px;
}

/* Footer and legal links were 13px tall. */
.foot-link,
.foot-legal a,
footer a[href^="/"],
footer a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* ── Ghost buttons ──────────────────────────────────────────────────────────
   A 1px #E4D9D0 border on cream is ~1.2:1 — "I Sell Clothes" read as plain
   text, so only one of the hub's two audience doors looked clickable. */
.btn-ghost {
    border-color: rgba(107, 91, 82, .38);
    background: rgba(255, 255, 255, .5);
}
.btn-ghost:hover {
    background: var(--color-warm, #F5EEE6);
    border-color: rgba(107, 91, 82, .6);
}

/* ── Mobile navigation ──────────────────────────────────────────────────────
   Below 780px every nav link was display:none with no replacement, so on a
   phone there was no way to move between the four products. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #E4D9D0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .6);
    color: #3D2E26;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle:focus-visible {
    outline: 2px solid #8B2E55;
    outline-offset: 3px;
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    padding: 5rem 1.5rem 2rem;
    background: #FAF7F2;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s cubic-bezier(.4, 0, .2, 1),
                transform .25s cubic-bezier(.4, 0, .2, 1),
                visibility .25s;
}
.mobile-menu[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: .5rem 0;
    border-bottom: 1px solid #E4D9D0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    color: #3D2E26;
}
.mobile-menu a[aria-current="page"] {
    color: #8B2E55;
}
.mobile-menu a[aria-current="page"]::after {
    content: 'You are here';
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7E5F1B;
}
.mobile-menu .menu-note {
    margin-top: auto;
    padding-top: 2rem;
    font-size: .8125rem;
    color: #6B5B52;
}
.mobile-menu .menu-note a {
    display: inline;
    min-height: 0;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    color: #8B2E55;
    text-decoration: underline;
}

@media (max-width: 780px) {
    .nav-toggle { display: inline-flex; }

    /* Logo, CTA and menu button together overflow a 390px viewport. Drop the
       wordmark to its mark, as most mobile navs do, so all three fit. */
    nav a[aria-label="Aaina Dekho home"] > span,
    nav a[aria-label="Aaina Dekho home"] > div {
        display: none !important;  /* beats the inline display:flex */
    }
    .nav-links,
    nav .nav-inner > div:last-child {
        gap: .5rem !important;
    }
    /* Long CTA labels ("Upload Your Photo — Free") need reining in. */
    .nav-links > a.btn,
    nav a[href][style*="border-radius:99px"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 46vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-flex;
    }
}
body[data-menu-open="true"] {
    overflow: hidden;
}
/* The panel covers the page at z-index 60, which would bury the nav (50) and
   with it the close button — leaving Escape as the only way out on a phone. */
body[data-menu-open="true"] #nav {
    z-index: 70;
}

/* ── Mobile density ─────────────────────────────────────────────────────────
   Every desktop grid collapsed to a single column, so /studio ran to 12,400px
   on a phone (~32 screens). These tiles are 3:4 and two fit at 390px. */
@media (max-width: 480px) {
    .grid-looks,
    .grid-ways {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .bento {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .bento .card {
        padding: 1.1rem !important;
    }
    .bento .wide {
        grid-column: span 2 !important;
    }
    .bento h3 {
        font-size: 1.15rem !important;
    }
    .moat {
        grid-template-columns: 1fr 1fr !important;
    }
    .rail > * {
        flex-basis: 150px !important;
    }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mobile-menu {
        transition-duration: .001ms;
    }
}