/* ==========================================================================
   Maeva Liebling — site styles
   Warm gray neutrals + warm pink accent. Single accent color set per page via --accent.
   ========================================================================== */

/* Design tokens
   ----------------------------------------------------------------------- */
:root {
    --bg:           #F1EEEB;       /* warm light gray */
    --bg-alt:       #E5E1DC;       /* slightly deeper warm gray */
    --ink:          #2A2522;       /* dark warm gray */
    --ink-soft:     #6B6360;       /* warm medium gray */
    --rule:         #D9D2CC;       /* hairline rules, warm gray */
    --accent:       #D93B58;       /* warm pink — overridden per page */
    --accent-soft:  color-mix(in srgb, var(--accent) 12%, transparent);

    --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Raleway", "Helvetica Neue", Arial, sans-serif;

    --wrap:         min(72rem, 92vw);
    --radius:       14px;
    --radius-sm:    8px;

    --shadow-sm:    0 1px 2px rgba(42, 37, 32, 0.04), 0 2px 8px rgba(42, 37, 32, 0.04);
    --shadow-md:    0 8px 24px rgba(42, 37, 32, 0.08), 0 2px 6px rgba(42, 37, 32, 0.04);
}

/* Reset / base
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 5vw + 1rem, 4rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 2.2vw + 1rem, 2.25rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 0.8vw + 1rem, 1.4rem); font-weight: 600; }

p { margin: 0 0 1em; color: var(--ink-soft); }

/* Accessibility
   ----------------------------------------------------------------------- */
.skip-link {
    position: absolute; top: -100px; left: 0;
    background: var(--ink); color: var(--bg);
    padding: 0.75rem 1rem; z-index: 100;
}
.skip-link:focus { top: 0; }
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Layout helpers
   ----------------------------------------------------------------------- */
.wrap { width: var(--wrap); margin-inline: auto; }

/* Header
   ----------------------------------------------------------------------- */
.site-header {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(8px);
}
.site-header .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}
.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: -0.01em;
    text-decoration: none;
}
.logo .logo-mark {
    width: 28px;
    height: auto;
    display: block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}
.logo:hover { text-decoration: none; color: var(--accent); }
.logo:hover .logo-mark { transform: rotate(-6deg); }
.site-header nav {
    display: flex;
    gap: 1.75rem;
    font-size: 0.95rem;
}
.site-header nav a { color: var(--ink-soft); }
.site-header nav a:hover { color: var(--accent); text-decoration: none; }
.site-header nav a.lang-toggle {
    margin-left: 0.25rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--ink-soft);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.2;
    color: var(--ink-soft);
}
.site-header nav a.lang-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* Hero
   ----------------------------------------------------------------------- */
.hero {
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
    text-align: center;
}
.hero .eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-weight: 500;
}
.hero h1 { max-width: 18ch; margin-inline: auto; }
.hero .lede {
    max-width: 38ch;
    margin: 1.5rem auto 2.5rem;
    font-size: 1.15rem;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Buttons
   ----------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.85rem 1.6rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    background: var(--accent);
    color: #fff;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    filter: brightness(1.05);
    text-decoration: none;
    color: #fff;
}
.btn-ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--rule);
}
.btn-ghost:hover { background: var(--bg-alt); color: var(--ink); }

/* Apple App Store badge — used in place of the pill `.btn` on live app pages.
   Apple's Marketing Identity Guidelines require the official badge artwork,
   so this is just a sized image link, not a styled button. */
.btn-appstore {
    display: inline-block;
    line-height: 0;
    border-radius: 8px;
    transition: transform 0.15s ease, filter 0.15s ease;
}
.btn-appstore img {
    height: 56px;
    width: auto;
    display: block;
}
.btn-appstore:hover {
    transform: translateY(-1px);
    filter: brightness(1.1);
    text-decoration: none;
}
@media (max-width: 480px) {
    .btn-appstore img { height: 48px; }
}

/* Feature blocks (alternating image/text rows)
   ----------------------------------------------------------------------- */
.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-top: 1px solid var(--rule);
}
.feature:nth-child(even) .feature-text { order: 2; }
.feature-text h2 { margin-bottom: 1rem; }
.feature-image {
    background: var(--bg-alt);
    border-radius: var(--radius);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: grid;
    place-items: center;
    color: var(--ink-soft);
    font-style: italic;
    font-family: var(--font-display);
}
.feature-image img {
    width: 100%; height: 100%; object-fit: cover;
}

@media (max-width: 720px) {
    .feature { grid-template-columns: 1fr; }
    .feature:nth-child(even) .feature-text { order: 0; }
    .feature-image { aspect-ratio: 4 / 3; max-width: 26rem; margin-inline: auto; }
}

/* Three-up illustrated cards (landing pages — "At a glance" rows)
   Layout: illustration on top → heading → paragraph.
   Uses CSS subgrid so all three cards line up the heading row and the
   paragraph row across columns, regardless of text length. Falls back
   gracefully on browsers without subgrid (Safari 15 and older).
   ----------------------------------------------------------------------- */
.three-up {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    grid-template-rows: auto auto 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.three-up .card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    text-align: center;
    gap: 1rem;
}
/* Fallback for browsers without subgrid: cards still stack vertically,
   they just won't line up across columns. */
@supports not (grid-template-rows: subgrid) {
    .three-up { grid-template-rows: auto; }
    .three-up .card {
        display: flex;
        flex-direction: column;
        grid-row: auto;
    }
}
.three-up h3 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 1vw + 1rem, 1.6rem);
    margin: 0;
    align-self: end;
}
.three-up p {
    font-size: 1rem;
    color: var(--ink-soft);
    margin: 0 auto;
    max-width: 32ch;
    align-self: start;
}
/* Source PNGs are 512×512 with a baked-in white circle on a transparent
   canvas, so no background/border-radius/clipping is needed in CSS.
   The drop-shadow follows the visible circle (not the square box). */
.three-up .illus {
    width: 140px;
    height: 140px;
    margin: 0 auto;
}
.three-up .illus img {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 8px rgba(42, 37, 32, 0.06));
}

/* Screenshot gallery (responsive grid for app screenshots)
   ----------------------------------------------------------------------- */
.shot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-top: 1px solid var(--rule);
}
.shot-grid img {
    width: 100%;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    background: var(--bg-alt);
}
.shot-grid figure { margin: 0; }

/* Two-shot pair — for clean Simulator screenshots (no device frame).
   Centered side-by-side on desktop, stacked on mobile. Matches the
   phone-style rounded corners used on the Trakabo feature blocks. */
.shot-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 240px));
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
    border-top: 1px solid var(--rule);
}
.shot-pair figure { margin: 0; }
.shot-pair img,
.shot-pair video {
    width: 100%;
    height: auto;
    border-radius: 28px;
    box-shadow: 0 12px 32px rgba(42, 37, 32, 0.10), 0 2px 6px rgba(42, 37, 32, 0.06);
    background: #fff;
    display: block;
}
@media (max-width: 540px) {
    .shot-pair { grid-template-columns: minmax(0, 240px); }
}

/* Feature image variant: contain instead of cover (for tall phone screenshots)
   ----------------------------------------------------------------------- */
.feature-image.contain {
    aspect-ratio: 9 / 16;
    background: var(--bg-alt);
    padding: 1.25rem;
}
.feature-image.contain img {
    object-fit: contain;
}

/* Landscape variant — for iPad / landscape-only games like Squirmy Puzzle */
.feature-image.landscape {
    aspect-ratio: 16 / 11;
    background: var(--bg-alt);
    padding: 1rem;
}
.feature-image.landscape img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

/* Phone variant — for raw iPhone screenshots (no device frame).
   Smaller display size with rounded corners that mimic the iPhone display,
   sitting on the page background without a fake card around it. */
.feature-image.phone {
    background: transparent;
    box-shadow: none;
    aspect-ratio: auto;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}
.feature-image.phone img {
    width: 100%;
    max-width: 280px;
    height: auto;
    border-radius: 28px;
    box-shadow: 0 12px 32px rgba(42, 37, 32, 0.10), 0 2px 6px rgba(42, 37, 32, 0.06);
    background: #fff;
}
@media (max-width: 720px) {
    .feature-image.phone img { max-width: 240px; }
}

/* FAQ accordion (per-app landing page)
   ----------------------------------------------------------------------- */
.faq-list {
    max-width: 60ch;
    margin: 1.5rem 0 0;
}
.faq-item {
    border-top: 1px solid var(--rule);
    padding: 1.1rem 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--accent);
    line-height: 1;
    transition: transform 0.2s ease;
}
.faq-item[open] summary::after {
    content: "−";
    transform: none;
}
.faq-item summary:hover { color: var(--accent); }
.faq-answer {
    padding-top: 0.6rem;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.6;
    max-width: 60ch;
}

/* Language switch link below hero
   ----------------------------------------------------------------------- */
.lang-switch {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--ink-soft);
}

/* Info strip (How it works / Privacy / Send feedback)
   ----------------------------------------------------------------------- */
.info-strip {
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-top: 1px solid var(--rule);
}
.info-strip h2 {
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 1rem;
}
.info-strip .body {
    max-width: 60ch;
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--ink);
}

/* App grid (homepage portfolio)
   ----------------------------------------------------------------------- */
.app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2×2 on large screens (4 apps) */
    gap: 2rem;
    padding: 3rem 0;
}
@media (max-width: 720px) {
    .app-grid { grid-template-columns: 1fr; }
}
.app-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 2rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    color: inherit;
}
.app-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
    text-decoration: none;
}
.app-card .swatch {
    width: 56px; height: 56px;
    border-radius: 14px;
    background: var(--card-color, var(--accent));
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.app-card h3 { font-family: var(--font-display); margin-bottom: 0.25rem; }
.app-card .tagline {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}
.app-card .arrow {
    color: var(--card-color, var(--accent));
    font-weight: 500;
    font-size: 0.95rem;
    align-self: flex-start;
}

/* Contact form
   ----------------------------------------------------------------------- */
.contact {
    padding: clamp(3rem, 6vw, 5rem) 0;
    border-top: 1px solid var(--rule);
    background: var(--bg-alt);
}
.contact h2 {
    font-family: var(--font-body);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.contact .lede {
    color: var(--ink-soft);
    margin-bottom: 2.5rem;
    max-width: 50ch;
}
.form-grid {
    display: grid;
    gap: 1.25rem;
    max-width: 38rem;
}
.form-row { display: grid; gap: 0.4rem; }
.form-row label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0.02em;
}
.form-row input,
.form-row textarea {
    font: inherit;
    padding: 0.75rem 0.9rem;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    color: var(--ink);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-row input:focus,
.form-row textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-row textarea { min-height: 8rem; resize: vertical; }
/* Honeypot — hidden from humans, bots see it */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important; height: 1px !important;
    overflow: hidden;
}
.form-status {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    margin-bottom: 1rem;
}
.form-status.success { background: #E8F0E2; color: #3A5824; }
.form-status.error   { background: #F5DCD2; color: #7A2E15; }

/* Footer
   ----------------------------------------------------------------------- */
.site-footer {
    padding: 2.5rem 0;
    border-top: 1px solid var(--rule);
    font-size: 0.9rem;
}
.site-footer .wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.site-footer .copy { color: var(--ink-soft); margin: 0; }
.site-footer nav { display: flex; gap: 1.5rem; }
.site-footer nav a { color: var(--ink-soft); }

/* Reduced motion
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}