/* Elseweather — the app's own palette, restated for the web.
   Colour names follow UIKit's, so a value here can be checked against the app. */

:root {
    color-scheme: light dark;

    --label:            #000000;
    --label-secondary:  rgba(60, 60, 67, 0.60);
    --label-tertiary:   rgba(60, 60, 67, 0.30);
    --background:       #ffffff;
    --background-2:     #f2f2f7;
    --background-3:     #ffffff;
    --separator:        rgba(60, 60, 67, 0.20);
    --tint:             #007aff;

    --sunny:            #ff9500;
    --partly-cloudy:    #30b0c7;
    --cloudy:           #8e8e93;
    --fog:              #aeaeb2;
    --rain:             #007aff;
    --snow:             #32ade6;
    --storm:            #5856d6;

    --card-shadow:      0 8px 24px rgba(0, 0, 0, 0.10);
    --radius:           16px;
    --measure:          640px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --label:            #ffffff;
        --label-secondary:  rgba(235, 235, 245, 0.60);
        --label-tertiary:   rgba(235, 235, 245, 0.30);
        --background:       #000000;
        --background-2:     #1c1c1e;
        --background-3:     #2c2c2e;
        --separator:        rgba(84, 84, 88, 0.60);
        --tint:             #0a84ff;

        --sunny:            #ff9f0a;
        --partly-cloudy:    #40c8e0;
        --cloudy:           #8e8e93;
        --fog:              #636366;
        --rain:             #0a84ff;
        --snow:             #64d2ff;
        --storm:            #5e5ce6;

        --card-shadow:      0 8px 24px rgba(0, 0, 0, 0.45);
    }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--background);
    color: var(--label);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 24px;
}

/* ---- Header ------------------------------------------------------------ */

.site-header {
    padding: 24px 0;
}

.site-header .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--label);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.wordmark:hover { text-decoration: none; }

.wordmark img {
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

.site-header nav {
    display: flex;
    gap: 20px;
    font-size: 15px;
}

.site-header nav a { color: var(--label-secondary); }

/* ---- Hero -------------------------------------------------------------- */

.hero {
    padding: 32px 0 8px;
    text-align: center;
}

.hero .app-icon {
    width: 108px;
    height: 108px;
    margin: 0 auto 24px;
    border-radius: 24px;
    box-shadow: var(--card-shadow);
}

h1 {
    font-size: 40px;
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.022em;
    margin: 0 0 16px;
}

.hero p {
    font-size: 19px;
    color: var(--label-secondary);
    margin: 0 auto;
    max-width: 30em;
}

/* Apple's badges, at their designed 40pt height. Width is left to the aspect ratio —
   the two badges are different widths by design and must not be squared up. */
.store-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 32px;
}

.store-badges .badge {
    display: block;
    /* The clear space Apple's guidelines ask for: at least a tenth of the badge height. */
    padding: 4px;
}

.store-badges .badge:hover { text-decoration: none; }

.store-badges img {
    height: 44px;
    width: auto;
}

.hero .status {
    margin-top: 14px;
    font-size: 14px;
    color: var(--label-tertiary);
}

/* ---- The map picture, with two annotation cards over it ---------------- */

.showcase {
    position: relative;
    margin: 48px auto 0;
    max-width: 420px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    background: var(--background-2);
}

.showcase > img {
    width: 100%;
    aspect-ratio: 704 / 900;
    object-fit: cover;
    object-position: 50% 62%;
}

/* The map annotation, as the app draws it: a dark blur at 10pt radius carrying a
   temperature, a condition symbol and a trend line. */
.pin {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border-radius: 10px;
    background: rgba(28, 28, 30, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.pin svg { display: block; }
.pin .temp { font-variant-numeric: tabular-nums; }

.pin-a { top: 16%;   left: 8%; }
.pin-b { top: 34%;   right: 7%; }
.pin-c { top: 55%;   left: 16%; }
.pin-d { bottom: 20%; right: 12%; }

/* ---- Sections ---------------------------------------------------------- */

section { padding: 56px 0; }

h2 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
}

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 19px; color: var(--label-secondary); }

.features {
    display: grid;
    gap: 28px;
    margin-top: 40px;
}

.feature p {
    color: var(--label-secondary);
    font-size: 16px;
}

.feature .glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    margin-bottom: 12px;
    background: var(--background-2);
    color: var(--tint);
}

/* The filter chips, wearing ConditionGroup.tint the way the app's do. */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    background: var(--background-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--label);
}

.chip svg { color: var(--chip-tint); }

/* Selected chips are solid in their own colour with white content — the state and the
   colour are carried by different properties, exactly as in the app. */
.chip[data-selected] {
    background: var(--chip-tint);
    color: #ffffff;
}

.chip[data-selected] svg { color: #ffffff; }

.chip-sunny         { --chip-tint: var(--sunny); }
.chip-partly-cloudy { --chip-tint: var(--partly-cloudy); }
.chip-cloudy        { --chip-tint: var(--cloudy); }
.chip-fog           { --chip-tint: var(--fog); }
.chip-rain          { --chip-tint: var(--rain); }
.chip-snow          { --chip-tint: var(--snow); }
.chip-storm         { --chip-tint: var(--storm); }

/* ---- Plus -------------------------------------------------------------- */

.plus {
    background: var(--background-2);
    padding: 0 0 56px;
    margin: 24px 0 0;
}

.plus-hero {
    width: 100%;
    aspect-ratio: 1584 / 672;
    object-fit: cover;
}

.plus .wrap { padding-top: 40px; }

.eyebrow {
    font-size: 13px;
    font-weight: 600;
    color: var(--tint);
    margin: 0 0 4px;
}

.plus ul {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.plus li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 16px;
}

.plus li svg {
    flex: none;
    margin-top: 3px;
    color: var(--tint);
}

.note {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--separator);
}

.note h3 { font-size: 13px; font-weight: 600; }

.note p { font-size: 14px; color: var(--label-secondary); }

/* ---- Questions --------------------------------------------------------- */

/* Deliberately plain markup — headings and paragraphs, no <details>, no script. The
   answers have to be in the page for a reader who never clicks anything and for a
   crawler that never clicks at all, and a question worth collapsing is a question not
   worth having. The rules between pairs do the separating instead. */
.faq .qa {
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid var(--separator);
}

.faq .qa:first-of-type {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 0;
}

.faq h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    /* A question runs longer than the feature headings above and wraps at this size, so
       it takes the body line height rather than a display one. */
    line-height: 1.35;
}

.faq p {
    font-size: 16px;
    color: var(--label-secondary);
    max-width: var(--measure);
}

/* ---- Legal pages ------------------------------------------------------- */

.page {
    padding: 8px 0 56px;
    /* Shorter measure than the landing page: this is text to be read straight through,
       and 90-character lines are where that stops being comfortable. */
    max-width: 620px;
}

.page h1 { font-size: 32px; margin-bottom: 20px; }

.page .intro { font-size: 19px; margin-bottom: 32px; }

.page section {
    padding: 0;
    margin-bottom: 28px;
}

.page section h2 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: 6px;
}

.page section p { color: var(--label-secondary); }

.footnote {
    margin-top: 40px;
    font-size: 13px;
    color: var(--label-tertiary);
}

/* ---- Contact form ------------------------------------------------------ */

/* The note that stands in for a working endpoint, and the line the button leaves
   behind. Both are ordinary text rather than a coloured banner: the page is telling
   you something, not reporting an incident. */
.form-status {
    font-size: 15px;
    color: var(--label-secondary);
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--background-2);
}

.contact-form {
    display: grid;
    gap: 20px;
    margin-top: 24px;
}

.field {
    display: grid;
    gap: 6px;
}

.field label {
    font-size: 15px;
    font-weight: 600;
}

/* iOS zooms a focused field whose text is under 16px, so these stay at 17 like the
   body. The fill is the app's own secondary background, and the ring on focus is the
   tint, which is the one place on these pages the accent colour appears. */
.contact-form input,
.contact-form select,
.contact-form textarea {
    font: inherit;
    color: var(--label);
    background: var(--background-2);
    border: 1px solid var(--separator);
    border-radius: 10px;
    padding: 11px 13px;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.contact-form textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.5;
}

.contact-form ::placeholder { color: var(--label-tertiary); }

.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
    outline: 2px solid var(--tint);
    outline-offset: 1px;
    border-color: transparent;
}

.contact-form button {
    font: inherit;
    font-weight: 600;
    color: #ffffff;
    background: var(--tint);
    border: 0;
    border-radius: 12px;
    padding: 13px 22px;
    justify-self: start;
    cursor: pointer;
}

.contact-form button:hover { opacity: 0.9; }

.form-result {
    margin: 0;
    font-size: 15px;
    color: var(--label-secondary);
}

/* ---- Footer ------------------------------------------------------------ */

.site-footer {
    border-top: 1px solid var(--separator);
    padding: 32px 0 48px;
    font-size: 14px;
    color: var(--label-secondary);
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 16px;
}

.site-footer p { margin: 0 0 6px; }

/* ---- Wider screens ----------------------------------------------------- */

@media (min-width: 720px) {
    :root { --measure: 720px; }

    h1 { font-size: 52px; }

    .hero { padding-top: 48px; }

    .features {
        grid-template-columns: 1fr 1fr;
        gap: 36px 32px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}