/* The landing page: a parallax lagoon, the FAQ that sits on the water below
   it, and the footer. Needs fonts-hand.css. */

body {
    position: relative;
}

#parallax {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    background-color: #1b7fc4;
}

.parallax-layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    transform: scale(calc(-1 * var(--scale)), var(--scale));
    will-change: transform;
}

#layer-background {
    --scale: 1.06;
    background-image: url("../assets/img/landing/background.118a6f84ab1d.png");
}

#layer-middleground {
    --scale: 1.10;
    background-image: url("../assets/img/landing/middleground.b4b207821a06.png");
}

#layer-foreground {
    --scale: 1.20;
    background-image: url("../assets/img/landing/foreground.8a08b7edefb0.png");
    z-index: 2;
}

.landing {
    text-align: left;
    box-sizing: border-box;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    padding-top: clamp(32px, 15vh, 135px);
    padding-left: clamp(22px, 11.1vw, 160px);
    padding-right: clamp(22px, 6vw, 80px);
    padding-bottom: clamp(24px, 6vh, 60px);
}

.landing-copy {
    position: relative;
    z-index: 3;
}

.content {
    padding: 0;
}

#landing-title {
    font-family: "Waterlily";
    font-size: clamp(52px, min(12.2vw, 19.5vh), 175px) !important;
    font-weight: 300;
    color: #E5F2FC;
    margin: 0;
    line-height: 1.1;
}

#landing-text {
    font-family: "Atlantis Hand";
    color: #E5F2FC;
    font-size: clamp(19px, min(3.15vw, 5vh), 45px);
    line-height: 1.25;
    margin: 0;
    margin-bottom: clamp(14px, 3.3vh, 30px);
}

#login-button {
    --border-thin: 0.1em;
    --border-thick: 0.28em;

    display: inline-block;
    box-sizing: border-box;
    font-family: "Atlantis Hand";
    font-size: clamp(23px, min(3.5vw, 5.6vh), 50px);
    color: #00528c;
    text-decoration: none;

    padding: 0.2em 1.2em;
    border-radius: 1em;
    background-color: #E5F2FC;

    border: var(--border-thin) solid #00528c;
    border-bottom-width: var(--border-thick);
    transition: border-bottom-width 0.03s ease-out, transform 0.03s ease-out;
}

#login-button:active {
    border-bottom-width: var(--border-thin);
    transform: translateY(calc(var(--border-thick) - var(--border-thin)));
}

#landing-sponsor {
    position: absolute;
    right: clamp(16px, 4vw, 48px);
    bottom: clamp(14px, 3vh, 28px);
    z-index: 3;
    margin: 0;
    font-family: "Atlantis Hand";
    font-size: clamp(12px, 1.3vw, 20px);
    color: rgba(229, 242, 252, 0.22);
    pointer-events: none;
}

/* ---------- the sand-and-starfish band ---------- */

/* Drawn on the same 2500x1827 canvas as the lagoon but only rows 128–995 of
   it are painted. The band is sized to those 868 rows alone: the image is
   laid in at full width and pulled up by the 128 empty rows above it
   (percentage margins resolve against the width, so -5.12% is exactly those
   128 of 2500 at any size), and the wrapper's overflow takes the rest. */
#faq-transition {
    aspect-ratio: 2500 / 868;
    overflow: hidden;
    line-height: 0;
}

#faq-transition img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -5.12%;
}

/* ---------- the FAQ, on the water ---------- */

/* The lagoon art is 2500x1827 laid in at the window's full width, so its
   height — and every offset measured off it — is a fraction of the viewport
   width. The copy is sized off vw for the same reason, so the questions keep
   their place on the water as the window changes shape. */
#faq {
    position: relative;
    box-sizing: border-box;

    font-size: clamp(13px, 1.5vw, 38px);

    background-color: #036890;
    background-image: url("../assets/img/landing/background_faq.4813875061a5.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;

    /* Not the art's full 73.08vw: from 58.1vw down the illustration is a flat
       #036890 band, the same colour the footer stands on. Ending inside that
       band hands the last stretch of it to the footer instead of leaving bare
       water, and the join is invisible however many questions are open. */
    min-height: 59.5vw;

    padding: 12.9% clamp(22px, 6vw, 80px) 0;

    overflow: hidden;

    display: flex;
    flex-direction: column;
}

.faq-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 25em;
    min-height: 45.2vw;
    margin: 0 auto;
}

#faq-title {
    font-family: "Atlantis Hand";
    font-size: 2.9em;
    font-weight: 300;
    line-height: 1.1;
    color: #00528c;
    text-align: center;
    margin: 0 0 0.34em;
}

.faq-item {
    box-sizing: border-box;
    background-color: #BDEAFF;
    border: 0.25em solid #00528c;
    border-radius: 0.75em;
    margin-bottom: 0.45em;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-item summary {
    display: flex;
    align-items: center;
    gap: 0.6em;
    padding: 0.62em 0.9em;
    cursor: pointer;
    list-style: none;
    font-family: "Atlantis Hand";
    font-size: 1.0em;
    line-height: 1.2;
    color: #00528c;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "";
    flex: none;
    margin-left: auto;
    width: 0.4em;
    height: 0.4em;
    border-right: 0.1em solid currentColor;
    border-bottom: 0.1em solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.faq-item[open] summary::after {
    transform: translateY(0.06em) rotate(-135deg);
}

.faq-item > :not(summary) {
    margin: 0 0 0.9em;
    padding: 0 1.25em;
    color: #063f66;
    font-size: 0.6em;
    line-height: 1.55;
}

.faq-item > :not(summary) a {
    color: #00528c;
}

/* ---------- the footer ---------- */

/* A sibling of #faq rather than a child of it: with the footer inside, the
   section the illustration fills had to cover the footer too, which on a
   narrow window put pale lagoon behind pale footer text. Out here the footer
   carries the deep blue the art's own bottom edge fades into. */
.faq-footer {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    font-size: clamp(12px, 0.95vw, 19px);
    padding: 2.2em clamp(22px, 6vw, 80px) 1.6em;
    background-color: #036890;
    color: #cfe8f5;
}

.faq-footer a {
    color: #cfe8f5;
    text-decoration: none;
}

.faq-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5em 4em;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
}

.footer-col h3 {
    margin: 0 0 0.35em;
    font-family: "Atlantis Hand";
    font-size: 1.6em;
    font-weight: 300;
    line-height: 1;
    color: #E5F2FC;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9em;
    margin-left: auto;
}

.footer-flag img {
    display: block;
    width: 11em;
    max-width: 100%;
    height: auto;
}

.footer-social {
    display: flex;
    gap: 0.35em;
    margin-left: -0.35em;
}

.footer-social a {
    display: flex;
    padding: 0.15em;
}

.footer-social svg {
    display: block;
    width: 1.9em;
    height: 1.9em;
    fill: currentColor;
}

/* Holds the <symbol> definitions the icons above draw from. */
.footer-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.footer-line {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.footer-line svg {
    display: block;
    flex: none;
    width: 1.25em;
    height: 1.25em;
    fill: currentColor;
}

.footer-line span {
    color: #9dc4d6;
}

.footer-legal {
    margin: 0;
    font-size: 0.85em;
    color: #9dc4d6;
}

/* ---------- narrow screens ----------
   The questions sit on the open water between the art's top edge and its
   shoreline, a slot 0.49 of the window's width, while the copy stops
   shrinking at 13px and needs a flat ~310px. The two cross at about 820px,
   and below it the questions run over the beach and off the artwork. Rather
   than blow the art up until the water is deep enough, stop seating them on
   it: the illustration becomes a band at its natural height and the questions
   move below it, onto the flat #036890 the footer continues. */
@media (max-width: 820px) {
    #faq {
        min-height: 0;
        /* clears the art, which is its own 73.08vw height */
        padding-top: calc(73.08vw + 1.6em);
        padding-bottom: 2.4em;
    }

    /* was ink-on-water; out here it is on the deep blue */
    #faq-title {
        color: #E5F2FC;
    }

    .faq-inner {
        min-height: 0;
    }
}

@media (max-width: 700px) {
    .footer-contact {
        margin-left: 0;
    }
}