/*
 * Styles for the rich marketing landing (hero, description, features, quotes, FAQ,
 * header, footer). Builds on the base palette/fonts from style.css:
 *   colours are the var(--color-*) custom properties defined on :root in style.css
 *   (pink · yellow · green · cyan · teal · purple · blue · ink · white)
 *   fonts: Luckiest Guy (Hippa! wordmark only), Barriecito (labels/headings), Special Elite (prose)
 *
 * The page is a stack of full-bleed coloured bands. Between each band a <SectionDivider>
 * draws a diagonal patterned transition (triangles / waves / dashes, alternating).
 */

/* The base style.css centers a narrow column; the landing is full-width bands. */
body:has(.landing-page) {
    justify-content: flex-start;
}

.landing-page {
    width: 100%;
    max-width: none;
    padding: 0;
    gap: 0;
}

/* ---------- Bands ---------- */
.band {
    width: 100%;
    padding: 3.5em 0;
}

/* Content inside a band is centred to a readable column. */
.band > section,
.band > .site-footer {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.25em;
    box-sizing: border-box;
}

.band--pink {
    background: var(--color-pink);
}
.band--yellow {
    background: var(--color-yellow);
}
.band--green {
    background: var(--color-green);
}
.band--cyan {
    background: var(--color-cyan);
}

/* Links are yellow by default, but a yellow band would swallow that — flip
   those to pink. Buttons keep their own styling and are exempt. */
.band--yellow a:not(.button):not(.store-button) {
    color: var(--color-pink);
}

/* ---------- Dividers ---------- */
.divider {
    width: 100%;
    line-height: 0;
}

.divider__svg {
    display: block;
    width: 100%;
}

/* ---------- Header / language switcher ---------- */
.site-header {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 1em 1.25em;
    box-sizing: border-box;
    background: var(--color-pink);
}

.site-header__nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: "Special Elite", system-ui;
}

.lang-link {
    color: var(--color-ink);
    text-decoration: none;
    padding: 0.15em 0.35em;
}

.lang-link--active {
    color: var(--color-ink);
    font-weight: bold;
    text-decoration: underline;
}

.lang-separator {
    color: var(--color-ink);
}

/* ---------- Hero ---------- */
.band--pink:has(.hero) {
    padding-top: 1.5em;
}

.hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
    flex-wrap: wrap;
}

.hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
    flex: 1 1 340px;
}

.hero__title {
    font-family: "Luckiest Guy", sans-serif;
    font-size: clamp(4em, 11vw, 7em);
    color: var(--color-ink);
    margin: 0;
    line-height: 0.95;
    letter-spacing: 0.01em;
}

.hero__tagline {
    font-family: "Barriecito", sans-serif;
    font-size: 2em;
    color: var(--color-ink);
    margin: 0.1em 0 0;
}

.hero__subtagline {
    font-family: "Special Elite", system-ui;
    margin: 0.2em 0 0.5em;
    color: var(--color-ink);
}

.hero__text .buttons {
    justify-content: flex-start;
    margin-top: 1em;
}

/* ---------- Store buttons (skewed, Barriecito — the in-app button style) ---------- */
/* A button is recognised by its skew + solid drop shadow. The skewed box lives in
   a ::before so only the box tilts — the label + icon stay perfectly straight.
   `isolation: isolate` keeps the z-index:-1 box within the button (never behind a band).
   Each button gets its own small, slightly different skew for a hand-made feel. */
.store-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 1em 1.5em;
    font-family: "Barriecito", sans-serif;
    font-size: 1.35em;
    line-height: 1;
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: transform 80ms ease-in-out;
}

.store-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--sb-bg);
    box-shadow: 8px 8px 0 0 var(--color-ink);
    transform: var(--sb-skew);
    transition: box-shadow 80ms ease-in-out;
}

.store-button:hover {
    text-decoration: none;
}

/* Press: the button sinks toward its shadow — moves down-right by the shadow
   offset while the shadow shrinks to ~2px, so the far corner stays put. */
.store-button:active {
    transform: translate(6px, 6px);
}

.store-button:active::before {
    box-shadow: 2px 2px 0 0 var(--color-ink);
}

.store-button img {
    display: block;
}

.store-button--appstore {
    --sb-bg: var(--color-cyan);
    --sb-skew: skewX(-3deg) skewY(2deg);
}

.store-button--googleplay {
    --sb-bg: var(--color-green);
    --sb-skew: skewX(4deg) skewY(-2deg);
}

.hero__phones {
    flex: 1 1 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.hero__phone {
    width: 50%;
    max-width: 240px;
    height: auto;
}

.hero__phone--left {
    transform: rotate(-5deg) translateY(-10px);
    z-index: 2;
}

.hero__phone--right {
    margin-left: -16%;
    transform: rotate(8deg) translateY(24px);
    z-index: 1;
}

/* ---------- Generic section ---------- */
.section {
    width: 100%;
}

.section__title {
    font-family: "Barriecito", sans-serif;
    font-weight: 400;
    font-size: 2.2em;
    text-align: center;
    margin: 0 0 0.8em;
}

/* Two columns: a short intro on the left, the mission note on the right. */
.section--description {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5em;
}

.description__text {
    flex: 1 1 auto;
    font-family: "Special Elite", system-ui;
    line-height: 1.6;
    color: var(--color-ink);
}

.section--description .section__title {
    text-align: left;
    white-space: pre-line; /* honour the "\n" split into two lines */
}

.body-text {
    margin: 0 0 0.8em;
}

/* ---------- Mission note (in-app briefing, rotated portrait card) ---------- */
.mission-note {
    flex: 0 0 auto;
    width: 260px;
    box-sizing: border-box;
    background: var(--color-white);
    padding: 1.75em;
    transform: rotate(-3deg);
    font-family: "Special Elite", system-ui;
    color: var(--color-ink);
    line-height: 1.5;
    text-align: left;
}

.mission-note__greeting {
    margin: 0 0 1.1em;
}

.mission-note__line {
    margin: 0 0 0.9em;
}

.mission-note__line:last-child {
    margin-bottom: 0;
}

/* ---------- Features ---------- */
.section--features {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3em;
}

/* Decorative hunt-route behind the feature rows. */
.feature-route {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.feature-route__svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Hollow ring waypoint — an SVG <circle> in its own square box, so it stays round. */
.feature-route__dot {
    position: absolute;
    width: clamp(44px, 7vw, 68px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    overflow: visible;
}

.feature-block {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2em;
}

.feature-block--reverse {
    flex-direction: row-reverse;
}

.feature-block__content {
    flex: 1 1 auto;
}

.feature-block__label {
    display: inline-block;
    font-family: "Barriecito", sans-serif;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink);
    margin-bottom: 0.4em;
}

.feature-block__title {
    font-family: "Barriecito", sans-serif;
    font-weight: 400;
    font-size: 1.6em;
    margin: 0 0 0.4em;
}

.feature-block__body {
    font-family: "Special Elite", system-ui;
    line-height: 1.6;
    max-width: 300px;
    margin: 0;
    color: var(--color-ink);
}

.feature-block__image {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* In-app screens shown as tilted product renders, alternating tilt per row.
   Tilted outwards (away from the centre text) and capped fairly small so the
   phones stay proportionate on wide screens. */
.feature-block__phone {
    width: 100%;
    max-width: 180px;
    height: auto;
    transform: rotate(3deg);
}

.feature-block--reverse .feature-block__phone {
    transform: rotate(-3deg);
}

/* ---------- Quotes ---------- */
.quotes {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5em;
    justify-content: center;
}

.quote-card {
    flex: 1 1 240px;
    max-width: 300px;
    margin: 0;
    background: var(--color-white);
    padding: 1.5em;
    transform: rotate(-1deg);
}

.quote-card:nth-child(even) {
    transform: rotate(1deg);
}

.quote-card__text {
    font-family: "Special Elite", system-ui;
    font-size: 1em;
    line-height: 1.5;
    margin: 0 0 0.8em;
    color: var(--color-ink);
}

.quote-card__attribution {
    font-family: "Special Elite", system-ui;
    font-size: 1em;
    color: var(--color-ink);
}

/* ---------- FAQ ---------- */
.faq {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
}

.faq__item {
    background: var(--color-white);
    padding: 1em 1.25em;
}

.faq__question {
    font-family: "Special Elite", system-ui;
    font-size: 1.2em;
    cursor: pointer;
    color: var(--color-ink);
}

.faq__answer {
    font-family: "Special Elite", system-ui;
    line-height: 1.6;
    color: var(--color-ink);
    margin: 0.75em 0 0;
}

/* ---------- Footer ---------- */
.site-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    font-family: "Special Elite", system-ui;
}

.site-footer__links {
    display: flex;
    gap: 1.5em;
}

.site-footer__support {
    display: flex;
    gap: 0.5em;
    color: var(--color-ink);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .hero {
        flex-direction: column;
        text-align: center;
    }

    .hero__text {
        align-items: center;
    }

    /* Side-by-side store buttons overflow a phone's width — stack them and let
       each fill the column so both labels stay on one line. */
    .hero__text .buttons {
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 1em;
        width: 100%;
    }

    .hero__text .store-button {
        justify-content: center;
    }

    .hero__phones {
        margin-top: 1em;
    }

    /* The hunt-route is far more prominent on a narrow column — drop it back to a
       faint white inlay so it reads as texture, not a bold yellow band. */
    .feature-route {
        --feature-route-color: rgba(255, 255, 255, 0.4);
    }

    .feature-block,
    .feature-block--reverse {
        flex-direction: column;
        text-align: center;
    }

    .section--description {
        flex-direction: column;
        text-align: center;
    }

    .section--description .section__title {
        text-align: center;
    }

    .mission-note {
        margin-top: 0.5em;
    }
}