/* The page frame: the full-height column, the header and nav (with its search), the footer and the grid. */

@layer reset, tokens, base, layout, components, pages, utilities;

@layer layout {
    /* Force page to be full height */
    html,
    body {
        height: 100%;
    }

    /* Set content to be a flex column */
    body {
        display: flex;
        flex-direction: column;
    }

    /* Force the main to take up as much space as possible */
    main {
        margin: var(--space-4);
        margin-top: var(--space-6);
        flex: 1 0 auto;
    }

    /* The homepage's sky background (Layout::$skyBackground). */
    body.site--sky {
        background-color: var(--color-sky);
        /* Navy on the sky is 4.9:1; white was 2.9:1. */
        color: var(--color-on-sky);
    }

    /* The first stop for the Tab key: straight to <main id="main">. Hidden until focused (utilities.css). */
    .skip-link:focus {
        --focus-ring: var(--color-focus-on-dark);
        position: absolute;
        top: .5rem;
        left: .5rem;
        z-index: var(--z-skip-link); /* above .logo-wrapper */
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-sm);
        background-color: var(--color-white);
        color: var(--navy-900);
        font-weight: bold;
    }

    /* Disallow footer shrinking */
    footer {
        flex-shrink: 0;
    }

    /* The logo, the nav bar and the header photo are dark: a white ring. */
    .logo-wrapper,
    .navbar,
    .header-content {
        --focus-ring: var(--color-focus-on-dark);
    }

    .logo-wrapper {
        left: .5rem;
        top: .5rem;
        z-index: var(--z-logo);
        position: absolute;
    }

    .logo-wrapper>img {
        max-width: min(250px, 35vw);
    }

    /*
     * The SPECIALS trigger, a <button> (it was an <a> with no href, which a
     * keyboard cannot reach), with no button chrome, so it looks exactly as
     * the link did.
     */
    .specials-button {
        position: absolute;
        top: 100px;
        right: 1rem;
        padding: var(--space-1);
        appearance: none;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
        text-align: inherit;
    }

    /* width: auto, so max-height scales the badge instead of its width attribute holding. */
    .specials-button>img {
        width: auto;
        max-height: 80px;
    }

    .supporting-info {
        position: absolute;
        top: 1rem;
        right: 2rem;
        line-height: 1.2;
        text-align: left;
        font-size: var(--text-md);
    }

    .header-content {
        background-image: url('/assets/images/site/header-pilothouse.jpg');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        height: 150px;
        /* The box .supporting-info and .specials-button are placed in
           (it was a sticky with no offset, which never stuck). */
        position: relative;
    }

    .navbar {
        min-height: var(--size-header-height);
        background-color: var(--color-primary);
        /* Vertical padding only */
        padding: var(--space-3) 0;
        /* Not sticky (plan D18): inside a <header> 150px taller than it,
           it only ever stuck for that first 150px of scroll. Positioned
           still, so its menu stays above the page as before. */
        position: relative;
        z-index: var(--z-nav);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
    }

    .nav-container {
        /* Horizontal padding inside container */
        padding: 0 var(--space-4);
        display: flex;
        /* Push brand and links apart */
        justify-content: space-between;

        /* Vertically center items */
        align-items: center;
    }

    /*
     * Mobile first: below 1024px the search and the links are a menu the
     * toggle opens, hanging under the nav bar (.navbar is its containing
     * block, so .nav-container must not be positioned); from 1024px they sit in the
     * bar. (At 768-1023px the bar cannot hold them beside the logo, which
     * used to cover the search from 801px up.)
     */
    .nav-container {
        flex-wrap: wrap;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        background-color: var(--gray-7);
        /* Out of the flow, under the nav bar (which no longer sticks, so
           it cannot be fixed to the viewport) */
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: var(--z-dropdown);
        overflow: hidden;
    }

    /* overflow clips a ring drawn outside a link or the field: inside it
       (from 1024px the menu clips nothing). */
    @media (width < 1024px) {
        .nav-menu :focus-visible {
            outline-offset: -3px;
        }
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        padding-left: 0;
        text-align: center;
    }

    .nav-links li {
        flex: 1 1 auto;
    }

    .nav-links a {
        display: block;
        padding: var(--space-2) var(--space-4);
        text-decoration: none;
        transition: color var(--duration-slow) ease;

        color: inherit;
    }

    /* 6.9:1 on the bar and on the menu (#aaa was 4.3:1 on the bar). */
    .nav-links a:hover {
        color: var(--gray-3);
    }

    .menu-toggle {
        display: block;
        order: 1;
        background: none;
        border: none;
        color: var(--color-white);
        cursor: pointer;
        padding: 0.2rem;
    }

    .menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: var(--color-white);
        margin: 5px auto;
        transition: all var(--duration-slow) ease-in-out;
    }

    /* The toggle's bars turn into an X while the menu is open */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    @media (width >= 1024px) {
        .nav-container {
            flex-wrap: nowrap;
        }

        .menu-toggle {
            display: none;
        }

        .nav-menu {
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: transparent;
            position: static;
            z-index: auto;
            overflow: visible;
        }

        .nav-links {
            flex-direction: row;
            column-gap: var(--space-5);
            /* A list's own indent, as the bar always had */
            padding-left: 40px;
            text-align: start;
        }

        .nav-links li {
            flex: 0 1 auto;
        }

        .nav-links a {
            display: inline;
            padding: var(--space-2) 0;
        }
    }

    .footer-content {
        position: relative;
        justify-content: space-around;
    }

    .footer-content:not(.full-height) {
        background-image: url('/assets/images/site/footer-waves.jpg');
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
    }

    .footer-content.full-height::before {
        content: "";
        position: absolute;
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
        background-image: url('/assets/images/site/footer-waves.jpg');
        top: max(-70vh, -800px);
        left: 0;
        right: 0;
        bottom: 0;

        z-index: var(--z-below);
    }

    .footer-content>p {
        text-align: center;
        padding: var(--space-2);
        font-weight: bold;
    }

    .grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: max-content;
        gap: var(--space-2);
        max-width: 1000px;
    }

    /*
     * The margin .grid always had, which .mx-auto (margin: 0 auto) used to
     * override on every template grid. Kept for a .grid without it, such
     * as one in database markdown.
     */
    .grid:not(.mx-auto) {
        margin: var(--space-4);
    }

    @media (width >= 768px) {
        .grid {
            grid-template-columns: repeat(12, 1fr);
            gap: var(--space-4);
        }

        .col-2 {
            grid-column: auto/span 2;
        }

        .col-3 {
            grid-column: auto/span 3;
        }

        .col-4 {
            grid-column: auto/span 4;
        }

        .col-6 {
            grid-column: auto/span 6;
        }

        .col-8 {
            grid-column: auto/span 8;
        }

        .col-12 {
            grid-column: auto/span 12;
        }
    }
}