/* Fonts – Roboto variable fonts (weights 100–900, widths 75–100%) */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 75% 100%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Italic-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-stretch: 75% 100%;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Colors */
    --tu-white: 255 255 255;
    --tu-blue: 179 209 220;
    --tu-blue-light: 191 216 223;
    --tu-green: 47 76 72;
    --tu-black: 34 34 34;
    --tu-yellow: 254 204 11;
    --tu-sand: 248 247 243;
    --tu-grey: 141 171 181;
    --tu-dark: 90 90 90;

    --tu-body-bg: var(--tu-sand);
    --tu-body-color: var(--tu-black);

    /* Spacing */
    --tu-spacer-xs: 0.25rem;
    --tu-spacer-sm: 0.5rem;
    --tu-spacer: 1rem;
    --tu-spacer-lg: 2rem;
    --tu-spacer-xl: 3rem;

    /* Font */
    --tu-font-family-base: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --tu-font-family-headline: Georgia, 'Times New Roman', Times, serif;
    /* rem, so the scale follows the reader's browser font-size setting.
       Comments show the rendered size at the 16px default. */
    --tu-font-size-base: 1rem;        /* 16px */
    --tu-font-size-lg: 1.25rem;       /* 20px */
    --tu-font-size-sm: 0.875rem;      /* 14px */
    --tu-line-height-base: 1.6;

    --tu-font-size-h1: 2.375rem;      /* 38px */
    --tu-font-size-h1-sm: 1.875rem;   /* 30px */

    /* Focus */
    --tu-focus-width: 2px;
    --tu-focus-offset: 2px;
    --tu-transition: 200ms ease-out;

    /* Island.
       --img-w/--img-h on each island are unitless numbers; this length turns
       them into a size, so the whole map scales from one value. From 992px up
       .map overrides it to follow its own box — see the .map rules. */
    --tu-island-unit: 0.8px;

    --tu-header-height: 70px;
}

/* General Styles */

:focus-visible {
    outline: var(--tu-focus-width) solid rgb(var(--tu-green));
    outline-offset: var(--tu-focus-offset);
}

html, body {
    background: rgb(var(--tu-body-bg));
    font-family: var(--tu-font-family-base);
    font-size: var(--tu-font-size-base);
    color: rgb(var(--tu-body-color));
}

body {
    position: relative;
}

p {
    line-height: var(--tu-line-height-base);
    margin-bottom: var(--tu-spacer);
    margin-top: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tu-font-family-headline);
    margin-bottom: var(--tu-spacer);
    margin-top: 0;
}

h1 {
    font-size: clamp(var(--tu-font-size-h1-sm), 5vw, var(--tu-font-size-h1));

    @media screen and (min-width: 992px) {
        font-size: var(--tu-font-size-h1-sm);
    }

    @media screen and (min-width: 1200px) {
        font-size: var(--tu-font-size-h1);
    }
}

a {
   color: rgb(var(--tu-green)); 
}

.button {
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    background-color: rgb(var(--tu-yellow));
    color: rgb(var(--tu-green));
    padding: 0.75em;

    &:hover {
        background-color: rgb(var(--tu-yellow) / 80%);
    }
}

/* Layout */

.header {
    display: flex;
    justify-content: end;
    align-items: center;    
    background: rgb(var(--tu-blue-light));
    padding: var(--tu-spacer);
    border-bottom: 1px solid rgb(var(--tu-grey));
    height: var(--tu-header-height);
    gap: var(--tu-spacer-xl);

    ul {
        display: flex;
        gap: var(--tu-spacer-sm);
        text-transform: uppercase;       
    }
    
    .language-switch {
        li:not(:last-child) {
            border-right: 1px solid currentColor;
            padding-right: var(--tu-spacer-sm);
        }
    
        span {
            color: rgb(var(--tu-green)); 
            font-weight: bold;
        }
    }
    
    .nav {
        gap: var(--tu-spacer-lg);
        
        a {
            font-weight: bold;

            &:hover,
            &:focus-visible {
                text-decoration: underline;
                text-decoration-thickness: 1px;
                text-underline-offset: 4px;

            }
        }         
    }
}

.main {
    /* Declared here, not on :root: --tu-grid-lines-color is only ever
       overridden on .main (see the 480px query below), and a custom
       property's var() references are substituted once, using the cascade
       of the element where it's declared — not re-resolved again wherever
       it's later used through inheritance. Keeping the declaration and the
       override on the same element is what makes the override take effect. */
    --tu-grid-lines:
        linear-gradient(var(--tu-grid-lines-color, rgb(var(--tu-grey))) .1em, transparent .1em),
        linear-gradient(90deg, var(--tu-grid-lines-color, rgb(var(--tu-grey))) .1em, transparent .1em);

    padding: var(--tu-spacer);
    background-color: rgb(var(--tu-blue));
    background-image: var(--tu-grid-lines);
    background-size: 70% 12vh;
    background-position: 66% 3%;

    /* TODO: optimize media queries */
    @media screen and (max-width: 779px) {
        --tu-grid-lines-color: rgb(var(--tu-grey) / 40%);
        background-size: 20% 7vh;
        background-position: 50% -6%;
    }

    /* table */
    @media screen and (min-width: 690px) {
        padding: var(--tu-spacer-lg);
        background-size: 33% 20vh;
        background-position: 10% 10%;
    }

    /* medium screen */
    @media screen and (min-width: 992px) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Explicit row so the children get a *definite* height —
           required for container-type: size on .content. */
        grid-template-rows: minmax(0, 1fr);
        gap: var(--tu-spacer);
        height: calc(99dvh - var(--tu-header-height));
        background-size: 13em 15em;
        background-position: 10em -5em;
    }

    /* large screen */
    @media screen and (min-width: 1200px) {
        grid-template-columns: 650px 1fr;
    }
    
    /* very large screen */
    @media screen and (min-width: 1800px) {
        grid-template-columns: 720px 1fr;
    }    
}

.content {
    display: flex;
    flex-direction: column;
    align-items: start;
    background-color: rgb(var(--tu-white));
    padding: var(--tu-spacer-lg);
    box-shadow: 2px 6px 5px 2px rgb(var(--tu-black) / 20%);    

    > * {
        flex: 0 0 auto;
    }

    .intro {
        flex: 0 1 30%;
        margin-bottom: var(--tu-spacer-lg);

        h1 {
            margin-top: var(--tu-spacer-sm);
        }
    }

    @media screen and (min-width: 992px) {
        min-height: 0;
        overflow-x: hidden;
        /* background-image: url(../img/woven-pattern-tile.png); */
        /* background-image: url(../img/woven-pattern-tile-full-opacity.png); */
        /* background-image: url(../img/woven-pattern-tile-crisp.png); */
        /* background-image: url(../img/woven-pattern-tile-soft.png); */
        background-image: url(../img/woven-pattern-tile-warm.png);
        /* background-image: url(../img/woven-pattern-tile-warm-subtle.png); */
        /* background-image: url(../img/woven-pattern-tile-shaded.png); */
        background-repeat: repeat-y;
        background-size: var(--tu-spacer-lg) auto;
        background-position: -2px 0;
        padding: var(--tu-spacer-lg) var(--tu-spacer-xl) var(--tu-spacer-lg) calc(var(--tu-spacer-xl) + var(--tu-spacer-lg));

        /* The height is fixed by .main's grid row, so 1cqh = 1% of the space
           actually available here. Everything below scales with it, bounded by
           rem floors/ceilings so it never gets unreadable or larger than designed. */

        /* This is height-aware, not content-aware. CSS can't measure
           whether text actually overflows, so the ratios are tuned for
           current copy at the 530px column. If the paragraphs get longer,
           nudge the cqh multipliers down.
           If we want true fit-to-content regardless of copy length,
           that needs JS. */
        container-type: size;

        /* .search and .gallery keep their natural height and stay fully
           visible; .intro absorbs the remaining space and, since it can't
           grow any further, hands its own overflow to .text below instead
           of scrolling the whole .content box. */
        .intro {
            flex: 0 1 auto;
            display: flex;
            flex-direction: column;
            align-items: start;
            min-height: 0;
            overflow: hidden;
        }

        .text {
            flex: 0 1 auto;
            min-height: 0;
            overflow-y: auto;

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

        img {
            height: clamp(4rem, 15cqh, 8rem);
            width: auto;
        }

        h1 {
            font-size: clamp(1.5rem, 4.6cqh, var(--tu-font-size-h1));
            max-width: 10em;
        }

        p {
            font-size: clamp(0.8125rem, 1.9cqh, var(--tu-font-size-base));
        }

        .button {
            font-size: clamp(0.75rem, 1.7cqh, var(--tu-font-size-base));
        }
    }
}

.gallery {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    margin-bottom: var(--tu-spacer-lg);
    background-color: rgb(var(--tu-grey) / 30%);

    .gallery-slides {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 100%;
        gap: var(--tu-spacer-xs);
        /* 2.5 slides visible per viewport width, so each step reveals exactly
           one more slide. Percentages here are relative to this track's own
           box, which stays at the gallery's width even though the slides
           (flex-shrink: 0) overflow it. */
        transform: translateX(calc(var(--gallery-index, 0) * -40%));
        transition: transform var(--tu-transition);
    }

    .gallery-slide {
        flex: 0 0 40%;
        height: 100%;

        img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .gallery-control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border: 0;
        border-radius: 50%;
        background-color: rgb(var(--tu-green) / 70%);
        color: rgb(var(--tu-sand));
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--tu-transition), background-color var(--tu-transition);

        &:hover {
            background-color: rgb(var(--tu-green));
        }

        &.gallery-control--prev {
            left: var(--tu-spacer-sm);
        }

        &.gallery-control--next {
            right: var(--tu-spacer-sm);
        }
    }

    &:hover,
    &:focus-within {
        .gallery-control {
            opacity: 1;
            pointer-events: auto;
        }
    }
}

.search {
    display: flex;
    align-items: center;
    height: 42px;
    width: 100%;
    border: 1px solid rgb(var(--tu-black) / 30%);
    margin: 0 auto;
    order: 10;

    &:focus-within {
        outline: var(--tu-focus-width) solid rgb(var(--tu-green));
        outline-offset: var(--tu-focus-offset);
    }

    .search-input {
        position: relative;
        height: 100%;
        width: 100%;

        svg {
            position: absolute;
            top: 50%;
            left: var(--tu-spacer-sm);
            transform: translateY(-50%);
        }
        
        input[type="search"] {
            appearance: none;
            width: 100%;
            height: 100%;
            padding: 0 var(--tu-spacer-sm) 0 2.5rem;
            border: 0;
            outline: 0;
            
            &:focus-visible {
                outline: 0;
            }

            &::-webkit-search-cancel-button {
                appearance: none;
                width: 10px;
                height: 10px;
                cursor: pointer;
                background-color: rgb(var(--tu-black) / 60%);
                -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;

                &:hover {
                    background-color: rgb(var(--tu-black));
                }
            }
        }
    }
    
    .button {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        aspect-ratio: 1;
        padding: 0;
    }
}

.map {
    position: relative;

    @media screen and (min-width: 992px) {
        container-type: size;

        /* The islands sit at percentage coordinates, so they have to scale with
           the box they sit in or they run into each other. cqmin = 1% of the
           map's shorter side, which catches both failure cases: a narrow column
           (1024x768) and a short viewport (1440x700). The factor lands the
           images on their native pixel size around 1400x900. */
        --tu-island-unit: clamp(0.55px, 0.127cqmin, 1px);
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr;
        padding: var(--tu-spacer) 0;
        gap: var(--tu-spacer);

        @media screen and (min-width: 550px) {
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: minmax(max-content, 1fr);
            padding-left: var(--tu-spacer);
            padding-right: var(--tu-spacer);
        }

        @media screen and (min-width: 780px) {
            grid-template-columns: repeat(3, 1fr);
        }

        @media screen and (min-width: 992px) {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0;
        }

        .island {
            display: flex;
            justify-content: center;

            /* Map coordinates. --x/--y and --name-* only take effect from 992px up,
               where the islands are absolutely positioned. --img-w/--img-h are
               the images' native pixel dimensions, unitless so --tu-island-unit
               can scale them. */
             
            &.island--nanumea { --x:  6%; --y:  8%; --name-t: 28%; --name-l: 89%; --img-w: 134; --img-h: 113; order: 2; }
            &.island--niutao { --x: 35%; --y: 17%; --name-t: 28%; --name-l: 89%; --img-w: 96; --img-h: 73; order: 4; }
            &.island--nanumaga { --x: 12%; --y: 19%; --name-t: 42%; --name-l: 95%; --img-w: 82.25; --img-h: 134; order: 3; }
            &.island--vaitupu { --x: 60%; --y: 28%; --name-t: 28%; --name-l: 89%; --img-w: 99.75; --img-h: 110; order: 8; }
            &.island--nui { --x: 27%; --y: 35%; --name-t: 48%; --name-l: 86%; --img-w: 76; --img-h: 137; order: 5; }
            &.island--nukufetau { --x: 47%; --y: 45%; --name-t: 58%; --name-l: 68%; --img-w: 188; --img-h: 198; order: 6; }
            &.island--funafuti { --x: 73%; --y: 60%; --name-t: 65%; --name-l: 60%; --img-w: 212.25; --img-h: 264; order: 1; }
            &.island--nukulaelae { --x: 94%; --y: 79%; --name-t: 48%; --name-r: 70%; --img-w: 134.75; --img-h: 169; order: 7; }
            &.island--niulakita { --x: 90%; --y: 91%; --name-t: 55%; --name-r: 80%; --img-w: 99; --img-h: 73.25; order: 9; display: none; }

            @media screen and (min-width: 992px) {
                position: absolute;
                translate: -50% -50%;
                left: var(--x);
                top: var(--y);

                &.island--niulakita {
                    display: block;
                }
            }

            img {
                max-width: none;
                width: calc(var(--img-w) * var(--tu-island-unit));
                height: calc(var(--img-h) * var(--tu-island-unit));
                transition: transform var(--tu-transition);
            }

            .name {
                font-family: var(--tu-font-family-headline);
                color: rgb(var(--tu-green));
                text-decoration: underline;
                text-underline-offset: 5px;
                text-decoration-thickness: 1px;
                font-size: var(--tu-font-size-lg);
                padding: var(--tu-spacer-xs);
                background-color: rgb(var(--tu-green) / 0%);
                transition: all var(--tu-transition);

                &:has(.small) {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: var(--tu-spacer-xs);
                    text-decoration: none;
                    
                    > span:first-child {
                        text-decoration: underline;
                        text-underline-offset: 5px;
                        text-decoration-thickness: 1px;
                    }
                }
                
                .small {
                   font-size: var(--tu-font-size-sm); 
                }

                @media screen and (min-width: 992px) {
                    position: absolute;
                    top: var(--name-t, auto);
                    left: var(--name-l, auto);
                    right: var(--name-r, auto);

                    /* Labels shrink with the islands, or they start colliding
                       once the images have made room. */
                    font-size: clamp(0.875rem, 2.6cqmin, var(--tu-font-size-lg));
                }
            }

            a {
                display: flex;
                align-items: center;

                &:hover,
                &:focus-visible { 
                    .name {
                        text-decoration: none;
                        background-color: rgb(var(--tu-green));
                        color: rgb(var(--tu-sand));
                    }
                }
                
                &:hover {                    
                    img {                        
                        transform: scale(1.1);                    
                    }
                }
            }

            /* Tweak island positions if necessary */
            &.island--niutao {
                @media screen and (max-width: 1200px) {
                    --y: 15%;
                }
            }

            &.island--nukufetau {
                @media screen and (max-width: 992px) {
                    .name {
                        /* use margin so the outer container stays in flow and gets smaller */
                        margin-left: -30px; 
                        margin-top: 10px;
                    }
                }
            }

            /* mobile: center the islands and names */
            @media screen and (max-width: 550px) {
                > a {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    width: 100%;

                    img {
                        justify-self: end;
                    }

                    .name {
                        justify-self: start;
                        margin: 0 !important;
                    }
                }
            }            
        }
    }

    .legend {
        display: flex;
        align-items: center;
        background: rgb(var(--tu-white) / 50%);
        border: 1px solid rgb(var(--tu-grey) / 90%);
        font-size: var(--tu-font-size-sm);
        max-width: var(--tu-legend-width, none);
        margin-top: var(--tu-spacer-lg);

        p {
            margin: 0;
            padding: var(--tu-spacer-sm) 0 var(--tu-spacer-sm) var(--tu-spacer);
            max-width: var(--tu-legend-text-width, none);
        }

        @media screen and (min-width: 992px) {
            position: absolute;
            left: var(--tu-spacer);
            bottom: var(--tu-spacer-lg);
            margin-top: 0;

            --tu-legend-width: 60%;
            --tu-legend-text-width: 35em;
        }

        @media screen and (min-width: 1200px) {
            --tu-legend-width: 65%;
            --tu-legend-text-width: 39em;
        }

        @media screen and (min-width: 1400px) {
            --tu-legend-width: 70%;

            left: var(--tu-spacer-lg);
        }
    }
}

/* TODO: responsive logos */
.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--tu-spacer-xl);
    font-size: var(--tu-font-size-sm);
    color: rgb(var(--tu-dark));

    p {
        margin-bottom: 0;
        text-align: center;
    }

    a {
        color: rgb(var(--tu-dark));
        text-decoration: none;
        text-underline-offset: 3px;

        &:hover,
        &:focus-visible {
            text-decoration: underline;
        }
    }    

    ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--tu-spacer);
    }

    .partner {
        position: relative;
        gap: var(--tu-spacer-xl);
        margin: var(--tu-spacer-lg) 0 calc(2 * var(--tu-spacer-lg));

        img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 60px;
        }

        &::after {
            content: '';
            position: absolute;
            bottom: calc(-1 * var(--tu-spacer-lg));
            left: 50%;
            right: 0;
            width: 75%;
            transform: translateX(-50%);
            height: 1px;
            background-color: rgb(var(--tu-grey) / 40%);
        }
    }

    .imprint {
        flex-wrap: wrap;
        gap: var(--tu-spacer) var(--tu-spacer-lg);
    }

    @media screen and (max-width: 600px) {
        padding-left: var(--tu-spacer);
        padding-right: var(--tu-spacer);

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