/*
 * The page's frame (knowledge/brand.md "Layout and components"): the layout width and gutters,
 * the skip link, the header with the main menu, and the footer. No ad space (K2).
 *
 * Header widths: phones get the Menu button (once site_header_controller.js runs; without it
 * the menu shows as a wrapped row); tablets put the menu on its own row under the logo;
 * desktops fit everything on one row.
 */

@layer layout {
    /* One centred column, gutters included in the width. */
    .wrap {
        width: 100%;
        max-width: calc(var(--layout-max) + 2 * var(--layout-gutter));
        margin-inline: auto;
        padding-inline: var(--layout-gutter);
    }

    .wrap.reading {
        max-width: calc(var(--measure) + 2 * var(--layout-gutter));
    }

    main {
        padding-block: var(--space-6) var(--space-8);
        /* Pictures, prompt text and long unbroken words fit a phone screen. */
        overflow-wrap: anywhere;
    }

    @media (min-width: 48rem) {
        main {
            padding-block-start: var(--space-7);
        }
    }

    /* Skip link: off screen until a keyboard user reaches it. */
    .skip-link {
        position: absolute;
        top: var(--space-2);
        left: var(--space-2);
        z-index: 100;
        padding: var(--space-2) var(--space-4);
        border: 2px solid var(--color-ink);
        border-radius: var(--radius-pill);
        background: var(--color-acid);
        color: var(--color-ink);
        font-family: var(--font-display);
        font-weight: 800;
        text-decoration: none;
        text-transform: uppercase;
        transform: translateY(-200%);

        &:focus {
            transform: none;
        }
    }

    /* The logo: its link has no underline, and the clear space is half its height. */
    .site-logo {
        display: block;
        flex: none;
        color: var(--color-purple);
        line-height: 0;

        & .wordmark {
            width: auto;
            height: var(--text-logo-height);
        }
    }

    /* Header */
    .site-header {
        border-bottom: var(--rule-heavy);
        background: var(--color-bg);
    }

    .site-header-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        /* Clear space: half the logo's height on every side, the row below included. */
        gap: calc(var(--text-logo-height) / 2) var(--space-6);
        padding-block: calc(var(--text-logo-height) / 2);
    }

    .site-menu {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3) var(--space-5);
    }

    .site-menu-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1) var(--space-5);
        margin: 0;
        padding: 0;
        list-style: none;

        & > li {
            margin: 0;
        }
    }

    /* The section links and the Topics button look alike: condensed capitals in ink. */
    .site-menu-list > li > a,
    .site-topics > summary {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        color: var(--color-ink);
        font-family: var(--font-display);
        font-size: var(--text-button-size);
        font-weight: 700;
        letter-spacing: 0.04em;
        text-decoration: none;
        text-transform: uppercase;
    }

    .site-menu-list > li > a:hover,
    .site-topics > summary:hover {
        text-decoration-line: underline;
        text-decoration-color: var(--color-acid);
        text-decoration-thickness: 3px;
        text-underline-offset: 0.2em;
    }

    .site-topics {
        position: relative;

        & > summary {
            gap: var(--space-1);
            cursor: pointer;
            list-style: none;

            &::-webkit-details-marker {
                display: none;
            }
        }

        &[open] > summary span {
            display: inline-block;
            transform: rotate(180deg);
        }

        & ul {
            margin: 0;
            padding: var(--space-2) 0;
            list-style: none;
        }

        & li {
            margin: 0;
        }

        & li a {
            display: block;
            padding: var(--space-2) var(--space-4);
            color: var(--color-ink);
            text-decoration: none;

            &:hover {
                background: var(--color-lavender);
            }
        }

        /* "Browse by AI tool →" sits under a hairline, apart from the topics. */
        & li:last-child {
            margin-top: var(--space-1);
            border-top: var(--rule-hairline);
            padding-top: var(--space-1);

            & a {
                color: var(--color-purple);
                font-weight: 600;
            }
        }
    }

    .start-here {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: var(--space-1) var(--space-4);
        border: 2px solid var(--color-ink);
        border-radius: var(--radius-pill);
        background: var(--color-acid);
        color: var(--color-ink);
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 800;
        letter-spacing: 0.02em;
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;

        &:hover {
            background: var(--color-tip);
        }
    }

    .menu-button {
        min-height: 44px;
        padding: var(--space-1) var(--space-5);
        border: 2px solid var(--color-ink);
        border-radius: var(--radius-pill);
        background: var(--color-bg);
        color: var(--color-ink);
        font-family: var(--font-display);
        font-size: var(--text-button-size);
        font-weight: 800;
        text-transform: uppercase;
        cursor: pointer;

        &[hidden] {
            display: none;
        }
    }

    /* Phones: the menu folds behind the button and opens as a list. Pages whose JavaScript will
       run start folded (.js, base.html.twig), so nothing moves when the controller connects. */
    @media (max-width: 47.99rem) {
        .js .site-header:not(.is-open) .site-menu {
            display: none;
        }

        .js .menu-button[hidden] {
            display: block;
        }

        .site-header.is-open .site-menu {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            flex-basis: 100%;
            gap: var(--space-4);
            padding-bottom: var(--space-2);
        }

        .site-header.is-open .site-menu-list {
            flex-direction: column;
            align-items: stretch;
            gap: 0;

            & > li + li {
                border-top: var(--rule-hairline);
            }

            & > li > a,
            & .site-topics > summary {
                display: flex;
                min-height: 48px;
            }
        }

        .site-header.is-open .site-topics ul {
            padding: 0 0 var(--space-2) var(--space-3);
        }

        .site-header.is-open .start-here {
            justify-content: center;
        }
    }

    /* Tablets and up: no Menu button; Topics opens as a panel under its name. */
    @media (min-width: 48rem) {
        .menu-button,
        .menu-button:not([hidden]) {
            display: none;
        }

        .site-menu {
            flex: 1 1 auto;
            justify-content: space-between;
        }

        .site-topics > ul {
            position: absolute;
            top: calc(100% + var(--space-1));
            left: calc(-1 * var(--space-4));
            z-index: 10;
            min-width: 16rem;
            border: 2px solid var(--color-ink);
            border-radius: var(--radius-panel);
            background: var(--color-bg);
        }
    }

    /* Desktops: the logo and the whole menu on one row. */
    @media (min-width: 64rem) {
        .site-menu {
            flex: 0 1 auto;
            gap: var(--space-6);
        }
    }

    /* Footer: white under a 4 px purple rule (phase5_plan.md 5.3). */
    .site-footer {
        margin-top: var(--space-8);
        border-top: var(--rule-heavy);
        background: var(--color-bg);
        font-size: var(--text-small-size);

        & h2 {
            margin: 0 0 var(--space-2);
            font-family: var(--font-display);
            font-size: 16px;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        & ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        & li {
            margin: 0;
        }

        & li a {
            display: inline-block;
            padding-block: var(--space-1);
            font-size: var(--text-body-size);
        }
    }

    .site-footer-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6) var(--space-5);
        padding-block: var(--space-7);
    }

    .site-footer-brand {
        grid-column: 1 / -1;

        & .site-logo {
            --text-logo-height: 32px;

            display: inline-block;
        }

        & .tagline {
            margin: var(--space-3) 0 0;
            font-size: var(--text-body-size);
        }
    }

    .site-footer-line {
        grid-column: 1 / -1;
        margin: 0;
        padding-top: var(--space-5);
        border-top: var(--rule-hairline);
        color: var(--color-ink-muted);
    }

    @media (min-width: 48rem) {
        .site-footer-inner {
            grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
        }

        .site-footer-brand {
            grid-column: auto;
        }
    }

    /* The footer line alone (a gated 404, the other errors, sign-in): no groups above it. */
    .site-footer-bare {
        & .site-footer-inner {
            padding-block: var(--space-5);
        }

        & .site-footer-line {
            padding-top: 0;
            border-top: 0;
        }
    }
}