/* The landing page: sign-up step 1 of 3, drawn as the main page's three cards. These rules are
   copies of the main page's (same Canva numbers), plus Google's button and the light bars. */

body {
    background-color: #e8e8e8;
    margin: 0;
    display: flex;
    justify-content: center;
}

:root {
    --purple: #6f5184;
    --darker_blue: #a7b6cb;
    --lighter_blue: #c8d1d9;
    /* How much wider than 1920 the page gets on a window wider than 16:9 (0 otherwise), in Canva pixels */
    --wide: max(0px, 1080px * 100vw / 100vh - 1920px);
}

/* The whole Canva page, 1920 x 1080, zoomed to fit the window (same as style.css). On a window wider
   than 16:9 it gets wider instead, so the logo and TOS stay at the window's edges */
.page {
    width: calc(1920px + var(--wide));
    height: max(1080px, 1920px * 100vh / 100vw);
    zoom: min(100vw / 1920px, 100vh / 1080px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.top {
    display: flex;
}

/* ---------- logo ---------- */

/* Plus half of --wide, so the cards stay in the middle */
.logo-area {
    width: calc(445.6px + var(--wide) / 2);
}

.logo {
    width: 208px;
    height: 122px;
    margin-left: 61px;
    margin-top: 68.2px;
}

/* ---------- the three cards ---------- */

.cards {
    width: 1042.8px;
    margin-top: 190.4px;
}

.card {
    display: flex;
    height: 235px;
    background: var(--darker_blue);
}

.must {
    background: var(--purple);
}

.square {
    width: 162px;
    height: 162px;
    margin-left: 65.2px;
    margin-top: 36.5px;
    background: var(--purple);
}

.light {
    background: var(--lighter_blue);
}

/* Card 1's title and button. The 65px gap puts the button's bottom on the square's bottom:
   36.5 + 37 (the title) + 65 + 60 (the button) = 198.5 = 36.5 + 162 */
.words {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 65px;
    margin-left: 32.8px;
    margin-top: 36.5px;
    font-family: Arial, sans-serif;
}

.title {
    margin: 0;
    font-size: 24pt;
    color: white;
}

/* Google's button picture (their 180 x 40 button, scaled 1.5x; Google allows scaling as long as
   the shape stays the same) */
.google img {
    display: block;
    width: 270px;
    height: 60px;
}

/* Cards 2 and 3: light bars where the title, company and days lines sit on the main page */
.bars {
    gap: 29px;
    margin-top: 40.5px;      /* the middle of the title line, 36.5 + 15, minus half a bar */
}

.bar {
    width: 360px;
    height: 22px;
    background: var(--lighter_blue);
}

.long {
    width: 520px;
}

.short {
    width: 150px;
    height: 16px;
    margin-top: 36.5px;      /* down to the days line */
}

/* Holds the line and card 3, like the main page */
.with-line {
    display: flex;
    flex-direction: column;
}

.line {
    height: 1px;
    margin-top: 1.5px;
    margin-bottom: -2.5px;
    background: grey;
    opacity: 0.6;
}

/* ---------- cards fade in one by one, same as the main page ---------- */

@keyframes fade-in {
    from {
        opacity: 0;
        translate: 0 -20px;
    }
}

.fade {
    animation: fade-in 0.4s ease-out backwards;
}

.fade-2 {
    animation-delay: 0.15s;
}

.fade-3 {
    animation-delay: 0.3s;
}

/* welcome.js adds this when Google's button is clicked: the words and bars fade away and the three
   empty cards are left, which is exactly how the next page (/start/) begins */
.leaving .words {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

/* ---------- bottom row ---------- */

button {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.bottom {
    display: flex;
    align-items: flex-start;
    height: 184.6px;
}

/* No circle or document icon on this page: 38 + 75 + 51.7 + 49.5 + 1458.7 = where TOS sits on the main page.
   Plus --wide, so it stays the same distance from the window's right edge */
.footer {
    margin-left: calc(1672.9px + var(--wide));
    margin-top: 146px;
    font-family: "JetBrains Mono", monospace;
    font-size: 14pt;
    color: black;
}

.footer:hover {
    text-decoration: underline;
}

/* ---------- phones ---------- */

/* Everything in here only applies to a phone held upright: a window under 700px wide on a touch
   screen (pointer: coarse). A narrow window on a computer keeps the Canva page. On a phone the
   1920 page would shrink to a fifth of its size, too small to read. So instead the page is the
   window's own width with 16px at each side, and the cards are sized for a phone:
   140 tall, with a 92 square 24 in from the top and left (so it sits in the middle) */
@media (max-width: 700px) and (pointer: coarse) {
    .page {
        width: 100%;
        height: auto;
        min-height: 100dvh;      /* the window's height, minus the phone browser's address bar */
        zoom: 1;
        padding: 0 16px;
        box-sizing: border-box;  /* the 100% includes the 16s */
    }

    .top {
        flex-direction: column;
    }

    .logo-area {
        width: auto;
    }

    /* Half size, lined up with the cards' left edge */
    .logo {
        width: 104px;
        height: 61px;
        margin-left: 0;
        margin-top: 24px;
    }

    .cards {
        width: auto;
        margin-top: 32px;
    }

    .card {
        height: 140px;
    }

    .square {
        flex-shrink: 0;
        width: 92px;
        height: 92px;
        margin-left: 24px;
        margin-top: 24px;
    }

    /* The button's bottom on the square's bottom again: 24 + 24.5 (the title) + 27.5 + 40 = 116 = 24 + 92 */
    .words {
        gap: 27.5px;
        min-width: 0;
        margin-left: 18px;
        margin-top: 24px;
    }

    .title {
        font-size: 16pt;
    }

    /* Google's own size, 180 x 40. On a very narrow phone it shrinks to fit the card instead
       (height auto keeps its shape) */
    .google img {
        width: 180px;
        max-width: 100%;
        height: auto;
    }

    /* Each bar sits on the middle of the line it stands for on the main page's phone card:
       the title's is 33 down from the card's top, the company's 57, the days' 109 */
    .bars {
        gap: 12px;               /* 57 - 6 - (33 + 6) */
        margin-top: 27px;        /* 33 minus half a bar */
    }

    .bar {
        width: 104px;
        height: 12px;
    }

    .long {
        width: 150px;
    }

    .short {
        width: 44px;
        height: 9px;
        margin-top: 29.5px;      /* 109 - 4.5 - (57 + 6) - the 12 gap */
    }

    .bottom {
        height: auto;
    }

    .footer {
        margin: 32px 0 20px auto;   /* auto on the left pushes TOS to the right edge */
        font-size: 11pt;
    }
}