/* Ciao!
 *
 * The look lives on the design canvas, inside the artboards: every colour,
 * size and animation is written on the element it belongs to, and build.py
 * copies it over untouched. So this file holds only the things an artboard
 * cannot say, because an artboard is one fixed rectangle and a web page is
 * not:
 *
 *   1. what a page does on a screen that is not 1280 wide,
 *   2. the few browser basics (focus rings, the skip link, a table that
 *      can be scrolled sideways on a phone).
 *
 * Colours are the app's own, from Shared/Theme.swift:
 *   ivory #FAF5EC  card #FFFDF7  ink #3A2E26  soft ink #554338
 *   orange #E8923A  deep orange #B05E1A  sand #F9E2C0  line #EDE4D6
 */

/* ------------------------------------------------------------ basics */

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

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 99;
    padding: 12px 18px;
    border-radius: 0 0 14px 0;
    background: #3A2E26;
    color: #FFFDF7;
    font-family: Figtree, "Helvetica Neue", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.skip:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 3px solid #B05E1A;
    outline-offset: 3px;
    border-radius: 6px;
}

/* Nothing may stick out sideways and give the page a horizontal scrollbar. */
.page * { max-width: 100%; }

.page img { height: auto; }

/* An email address has no spaces in it, so it must be allowed to break
 * or it makes the card around it wider than the phone. */
.page a[href^="mailto:"] { overflow-wrap: anywhere; }

/* A comparison table is wider than a phone. Let that one thing scroll. */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ------------------------------------------------------- the header
 *
 * The same header on every page: four links and the button on a wide
 * screen, the button and a menu on a narrow one. The menu is a <details>
 * element, so it opens without JavaScript.
 */

.page > header { position: relative; z-index: 30; }

.nav-narrow { display: none; }

.nav-menu summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    box-sizing: border-box;
    border-radius: 14px;
    background: #FFFDF7;
    border: 1px solid #EDE4D6;
    cursor: pointer;
    list-style: none;
}

.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary::marker { content: ""; }

.nav-menu[open] summary { background: #F5EDE0; }

.nav-panel {
    position: absolute;
    top: calc(100% - 6px);
    right: 0;
    min-width: 232px;
    padding: 10px;
    box-sizing: border-box;
    border-radius: 22px;
    background: #FFFDF7;
    border: 1px solid #EDE4D6;
    box-shadow: 0 20px 44px rgba(58, 46, 38, 0.18);
}

.nav-panel a {
    display: block;
    padding: 13px 16px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 600;
    color: #3A2E26;
    text-decoration: none;
}

.nav-panel a[aria-current="page"] { color: #B05E1A; background: #F9F3E8; }
.nav-panel a:hover { background: #F5EDE0; color: #3A2E26; }

.nav-get {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    background: #E8923A;
    color: #FFFDF7;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 3px 0 #B05E1A;
}

.nav-get:hover { color: #FFFDF7; }

/* The narrow drawing of home is 390 wide whatever the window is, so its
 * header is always the narrow one. */
.page.phone .nav-wide { display: none; }
.page.phone .nav-narrow { display: flex; align-items: center; gap: 12px; }

@media (max-width: 900px) {
    .page .nav-wide { display: none !important; }
    .page .nav-narrow { display: flex; align-items: center; gap: 12px; }
}

/* --------------------------------------------------- the page itself
 *
 * The artboard is a 1280 box. Here it becomes a page: the coloured bands
 * run the full width of the window, and the words stay in a column of the
 * width they were drawn at, in the middle.
 */

.page { width: 100%; }

/* A title that runs the full 1088 can slide under the drawing pinned in
 * the top right corner of a hero. Give it a place to wrap instead. */
.page.desk main > section > h1 { max-width: 860px; }

.page.desk main > section,
.page.desk > header,
.page.desk > footer {
    padding-inline: calc(96px + (100% - min(100%, 1280px)) / 2) !important;
}

/* Home is drawn twice on the canvas, wide and narrow. Show the one that
 * fits. Both are in the page, so every link is still there to follow. */
.narrow-only { display: none; }

@media (max-width: 760px) {
    .wide-only { display: none; }
    .narrow-only { display: block; }
}

/* The narrow drawing is 390 wide. Let it breathe on a bigger phone. */
.page.phone { max-width: 460px; margin: 0 auto; }

/* ------------------------------------------- laptops under 1280 wide
 *
 * The columns were drawn at fixed widths that add up to 1088. Below that
 * they share what there is, and wrap onto a second line when they cannot.
 */

@media (min-width: 901px) and (max-width: 1279px) {
    .page.desk main > section { flex-wrap: wrap !important; }

    /* the type was drawn at 1280, so it comes down one step */
    .page.desk [style*="font-size: 74px"] { font-size: 58px !important; }
    .page.desk [style*="font-size: 64px"] { font-size: 52px !important; }
    .page.desk [style*="font-size: 62px"] { font-size: 50px !important; }
    .page.desk [style*="font-size: 60px"] { font-size: 49px !important; }
    .page.desk [style*="font-size: 58px"] { font-size: 48px !important; }
    .page.desk [style*="font-size: 54px"] { font-size: 45px !important; }

    /* the phone in the hero is pinned 96px into a box that is no longer
     * wide enough to hold it, so it takes a line of its own and stands in
     * the middle of it */
    .page.desk #top > div[style*="height: 700px"] {
        flex-basis: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .page.desk #top .sway { position: static !important; }

    /* keep the drawn proportions and let both columns give a little */
    .page.desk main > section > div[style^="width:"],
    .page.desk main > section > div[style*="; width:"] {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
}

@media (max-width: 1100px) {
    .page.desk main > section,
    .page.desk > header,
    .page.desk > footer { padding-inline: 44px !important; }

    .page.desk [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page.desk [style*="grid-template-columns: repeat(6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* -------------------------------------------------------- phones
 *
 * One column, no fixed heights, and the drawings that were decoration in
 * the corners of a wide screen step out of the way.
 */

@media (max-width: 900px) {

    .page.desk main > section {
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 26px !important;
        padding-inline: 22px !important;
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }

    /* the bands that are their own colour keep their waves and their air */
    .page.desk main > section[style*="background: #3A2E26"],
    .page.desk main > section[style*="background: #F9E2C0"] {
        align-items: center !important;
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }

    .page.desk > header {
        min-height: 0 !important;
        height: auto !important;
        gap: 12px !important;
        padding: 14px 22px !important;
    }

    .page.desk > footer {
        min-height: 0 !important;
        height: auto !important;
        flex-wrap: wrap !important;
        gap: 14px !important;
        padding: 18px 22px !important;
    }

    .page.desk > header nav,
    .page.desk > footer nav {
        flex-wrap: wrap !important;
        gap: 8px 18px !important;
    }

    .page.desk > footer nav span { width: 100%; }

    /* a column that was 620px wide is now simply the page */
    .page.desk main > section > *,
    .page.desk main > section > div > div[style^="width:"] {
        width: auto !important;
        flex-basis: auto !important;
    }

    /* the glows and the animals in the corners are decoration */
    .page.desk main > section > div[style*="position: absolute"],
    .page.desk main > section > img[style*="position: absolute"] {
        display: none !important;
    }

    /* every grid becomes one column, except the wall of faces */
    .page.desk [style*="grid-template-columns: repeat(2"],
    .page.desk [style*="grid-template-columns: repeat(3"],
    .page.desk [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .page.desk [style*="grid-template-columns: repeat(6"] {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    /* the comparison table is three columns, so it shares the width */
    .page.desk table { width: 100% !important; table-layout: fixed; }

    .page.desk th,
    .page.desk td {
        padding: 14px 12px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    .page.desk th[style*="width: 230px"] { width: 34% !important; }

    /* the two app names sit under their marks instead of beside them */
    .page.desk thead th > span {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* the phone mockups are 316 and 328 wide: keep them whole */
    .page.desk .sway {
        margin: 0 auto !important;
        max-width: 100% !important;
    }

    .page.desk .sway,
    .page.desk .card { animation: none !important; }

    /* the type was drawn for a wide screen, so it comes down a step */
    .page.desk [style*="font-size: 74px"] { font-size: 38px !important; }
    .page.desk [style*="font-size: 64px"] { font-size: 35px !important; }
    .page.desk [style*="font-size: 62px"] { font-size: 34px !important; }
    .page.desk [style*="font-size: 60px"] { font-size: 34px !important; }
    .page.desk [style*="font-size: 58px"] { font-size: 33px !important; }
    .page.desk [style*="font-size: 54px"] { font-size: 31px !important; }
    .page.desk [style*="font-size: 52px"] { font-size: 30px !important; }
    .page.desk [style*="font-size: 48px"] { font-size: 29px !important; }
    .page.desk [style*="font-size: 46px"] { font-size: 28px !important; }
    .page.desk [style*="font-size: 44px"] { font-size: 27px !important; }
    .page.desk [style*="font-size: 42px"] { font-size: 26px !important; }
    .page.desk [style*="font-size: 40px"] { font-size: 26px !important; }
    .page.desk [style*="font-size: 38px"] { font-size: 25px !important; }
    .page.desk [style*="font-size: 36px"] { font-size: 24px !important; }
    .page.desk [style*="font-size: 34px"] { font-size: 24px !important; }
    .page.desk [style*="font-size: 32px"] { font-size: 23px !important; }
    .page.desk [style*="font-size: 31px"] { font-size: 23px !important; }
    .page.desk [style*="font-size: 30px"] { font-size: 22px !important; }
    .page.desk [style*="font-size: 28px"] { font-size: 21px !important; }
    .page.desk [style*="font-size: 26px"] { font-size: 20px !important; }
    .page.desk [style*="font-size: 24px"] { font-size: 19px !important; }
    .page.desk [style*="font-size: 22px"] { font-size: 18px !important; }
    .page.desk [style*="font-size: 21px"] { font-size: 17px !important; }
    .page.desk [style*="font-size: 20px"] { font-size: 17px !important; }
    .page.desk [style*="font-size: 19px"] { font-size: 17px !important; }

    /* the big faces beside a heading come down with it */
    .page.desk main > section > img[style*="width: 170px"] {
        width: 110px !important;
        height: 110px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 420px) {
    .page.desk main > section { padding-inline: 18px !important; }
    .page.desk .sway { transform: scale(0.92); transform-origin: top center; }
}