/* Morrison Sites. */
/*
Theme Name: Moby Dick Restaurant
Theme URI: https://www.morrisonsites.com
Author: Morrison Sites
Author URI: https://www.morrisonsites.com
Description: Moby Dick Restaurant, White Rock BC, on the Morrison Sites boilerplate. Classic theme, block-editor content, cream and navy with gold fills, square corners, no shadows, a full-screen overlay menu and a phone action bar.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mobydick
*/

:root {
    /* Core palette, sampled from the wireframe. Mirrored in theme.json; nothing else carries a raw colour. */
    --md-bg: #f6efe9;
    --md-panel: #ece2d8;
    --md-line: #d2c7b9;
    /* 6.2:1 on cream and 5.5:1 on panel. Small secondary text must stay at or above 4.5:1. */
    --md-muted: #4a5783;
    --md-text: #0b1e59;
    --md-accent: #0b1e59;
    --md-accent-hover: #0b1e59;
    /* Gold is a fill and rule colour only: 1.4:1 on cream, so never text on it. Navy on gold is 9.8:1. */
    --md-gold: #ffc26e;
    /* The one gold that may be text on cream, at 5.1:1, for a kicker that must be gold. */
    --md-gold-deep: #8f5a0c;
    /* The storefront's blue, deepened, always with white on it (7.9:1), kept for blue fills. */
    --md-blue: #1d4f9c;
    /* The patio awning's colours, the valance (white on it is 4.8:1) and the slope above its white stripe, for the awning banner only. */
    --md-awning: #3571c8;
    --md-awning-deep: #17378e;
    --md-white: #ffffff;
    /* Highlighter yellow for notes awaiting the client's answer only; navy on it is 15:1. */
    --md-todo: #ffe600;

    /* The brandmark's header height and the bar it makes (about 71px), which the hero, overlay and anchor offsets all read. */
    --md-header-logo: 3.45rem;
    --md-header-h: calc(var(--md-header-logo) + 1rem);

    /* Semantic aliases: components reference these, never the raw values above. */
    --md-bg-color: var(--md-bg);
    --md-panel-color: var(--md-panel);
    --md-line-color: var(--md-line);
    --md-muted-color: var(--md-muted);
    --md-text-color: var(--md-text);
    --md-accent-color: var(--md-accent);
    --md-gold-color: var(--md-gold);
    --md-gold-deep-color: var(--md-gold-deep);
    --md-blue-color: var(--md-blue);
    --md-awning-color: var(--md-awning);
    --md-awning-deep-color: var(--md-awning-deep);
    --md-white-color: var(--md-white);

    /* Body copy: system UI stack, so no webfont is fetched for it. */
    --md-font-body:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

    /* Headings, buttons, labels and navigation: Gotham. */
    --md-font-heading:
        "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;

    /* Layout. Mirrored by contentSize and wideSize in theme.json. */
    --md-content: 1000px;
    --md-wide: 1500px;
    --md-gutter: 1.5rem;
}

/* Fonts. Licensed webfont: confirm the licence covers each new domain before shipping. */
@font-face {
    font-family: "Gotham";
    src: url("./fonts/book.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("./fonts/medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("./fonts/bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Gotham";
    src: url("./fonts/black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* The awning banner's lettering, blocks/banner.php; fetched only where the banner is. */
@font-face {
    font-family: "Arvo";
    src: url("./fonts/arvo-bold-italic.woff2") format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The "Best" in blocks/closing.php, a heavy slab like the storefront's "Moby Dick" lettering; fetched only where it appears. */
@font-face {
    font-family: "Alfa Slab One";
    src: url("./fonts/alfa-slab-one.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Elements. */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--md-font-heading);
    font-weight: 700;
    margin: 0;
}

p {
    margin: 0 0 1.5rem 0;
}

img,
video {
    max-width: 100%;
    height: auto;
}

/* Content links. */
a {
    color: var(--md-text-color);
    text-decoration-color: rgba(11, 30, 89, 0.35);
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 200ms ease;
}

a:hover,
a:focus-visible {
    text-decoration-color: currentColor;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--md-accent-color);
    outline-offset: 2px;
}

/* WordPress core emits this on structural headings, which render as visible text unstyled. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
}

/* Reachable only by keyboard, first thing in the tab order. */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0.5rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    background-color: var(--md-bg-color);
    color: var(--md-text-color);
    border: 3px solid var(--md-accent-color);
    font-family: var(--md-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.skip-link:focus {
    top: 0.5rem;
}

/* Scroll-reveal, scoped to .js so a blocked script can never leave content invisible. */
.js .fade-up {
    opacity: 0;
    transform: translateY(0.75rem);
    transition:
        opacity 250ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .fade-up.visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.hidden {
    display: none !important;
}

/* Buttons are outlined navy by default and gold for .btn-gold and core Buttons, and hover swaps fill and label at once to avoid a flicker. */
button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--md-bg-color);
    color: var(--md-text-color);
    border: 3px solid var(--md-accent-color);
    border-radius: 0;
    padding: 0.875rem 2rem;
    min-height: 50px;
    /* Buttons are border-box by default; the link version must say so, or min-height adds to the padding. */
    box-sizing: border-box;
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    cursor: pointer;
    transition: none;
}

button:hover,
button:focus,
button:active,
.btn:hover,
.btn:focus,
.btn:active {
    background-color: var(--md-accent-color);
    color: var(--md-bg-color);
}

/* Primary: gold fill with a navy label (9.8:1). Hover inverts to navy with a cream label. */
.btn-gold,
.btn-solid {
    background-color: var(--md-gold-color);
    color: var(--md-text-color);
    border-color: var(--md-gold-color);
}

.btn-gold:hover,
.btn-gold:focus,
.btn-gold:active,
.btn-solid:hover,
.btn-solid:focus,
.btn-solid:active {
    background-color: var(--md-accent-color);
    color: var(--md-bg-color);
    border-color: var(--md-accent-color);
}

/* Gutenberg core Button block: the gold primary, and its Outline style is the outlined .btn. */
.wp-block-button__link {
    background-color: var(--md-gold-color);
    color: var(--md-text-color);
    border: 3px solid var(--md-gold-color);
    border-radius: 0;
    padding: 0.875rem 2rem;
    min-height: 50px;
    box-sizing: border-box;
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: none;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
.wp-block-button__link:active {
    background-color: var(--md-accent-color);
    color: var(--md-bg-color);
    border-color: var(--md-accent-color);
}

/* Border and padding restated, since WordPress's later outline rule would make the outlined button thinner than the primary. */
.is-style-outline > .wp-block-button__link {
    background-color: transparent;
    color: var(--md-text-color);
    border: 3px solid var(--md-accent-color);
    padding: 0.875rem 2rem;
}

.is-style-outline > .wp-block-button__link:hover,
.is-style-outline > .wp-block-button__link:focus,
.is-style-outline > .wp-block-button__link:active {
    background-color: var(--md-accent-color);
    color: var(--md-bg-color);
}

/* Buttons wrap below a 407px viewport, so they go full width once stacked. */
/* Grouped buttons share the width equally, capped at 28rem, so side-by-side or stacked buttons always match; a lone button keeps its size. */
.wp-block-buttons:has(> .wp-block-button + .wp-block-button),
.closing-actions:has(> .btn + .btn),
.visit-actions:has(> .btn + .btn) {
    width: 100%;
    max-width: 28rem;
    box-sizing: border-box;
}

.wp-block-buttons.is-content-justification-center:has(> .wp-block-button + .wp-block-button),
.closing-actions,
.visit-actions {
    margin-inline: auto;
}

.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button,
.closing-actions:has(> .btn + .btn) > .btn,
.visit-actions:has(> .btn + .btn) > .btn {
    flex: 1 1 11rem;
}

/* Buttons in page text keep a paragraph's distance from what follows, rather than touching it. */
.page-content .wp-block-buttons {
    margin-block: 1.5rem;
}

/* Same height in a row too: the groups stretch their buttons, and each link fills its button. */
.wp-block-buttons:has(> .wp-block-button + .wp-block-button),
.closing-actions,
.visit-actions {
    align-items: stretch;
}

.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button {
    display: flex;
}

.wp-block-buttons:has(> .wp-block-button + .wp-block-button) > .wp-block-button > .wp-block-button__link {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

/* Core Accordion block: size pinned, so the heading level can change without the FAQ resizing. */
.wp-block-accordion-heading,
.page-content .wp-block-accordion-heading {
    margin: 0 !important;
    font-size: 1.15rem;
}

.wp-block-accordion-heading__toggle:hover,
.wp-block-accordion-heading__toggle:focus,
.wp-block-accordion-heading__toggle:active {
    background: none;
    color: inherit;
}

/* Form fields: the same 3px frame as a button, square. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    box-sizing: border-box;
    font: inherit;
    color: var(--md-text-color);
    background-color: var(--md-bg-color);
    border: 3px solid var(--md-accent-color);
    border-radius: 0;
}

/* clip, not hidden: hidden would make the root a scroll container and break the sticky header. */
html {
    overflow-x: clip;
}

/* The overlay's and the photo lightbox's scroll lock, with the width of the scrollbar it removes spent so the page can't jump. */
html.md-menu-open,
html.md-lightbox-open {
    overflow: hidden;
    padding-right: var(--md-scrollbar-w, 0px);
}

body {
    font-family: var(--md-font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    color: var(--md-text-color);
    background-color: var(--md-bg-color);
}

/* Containers. */
.page-l {
    width: 100%;
    max-width: var(--md-content);
    margin: auto;
    padding-inline: var(--md-gutter);
    box-sizing: border-box;
}

.page-xl {
    width: 100%;
    max-width: var(--md-wide);
    margin: auto;
    padding-inline: var(--md-gutter);
    box-sizing: border-box;
}

/* Default WordPress templates. */
.page-main {
    padding-top: clamp(3rem, 6vw, 5.5rem);
    padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

/* The Canvas template gets .page-main's breathing room, except where the hero or a padded section meets the header or footer. */
.canvas {
    padding-block: clamp(3rem, 6vw, 5.5rem);
}

.canvas:has(> :first-child:is(.hero-section, .full-bleed, .alignfull)) {
    padding-top: 0;
}

.canvas:has(> :last-child:is(.closing, .cta, .visit, .feature, .menu-teaser, .full-bleed, .alignfull)) {
    padding-bottom: 0;
}

.page-content {
    width: 100%;
    max-width: var(--md-content);
    margin: 0 auto;
    padding-inline: var(--md-gutter);
    box-sizing: border-box;
}

.page-content > h1 {
    text-align: center;
    font-size: clamp(2rem, 4vw, 2.75rem);
    line-height: 1.15;
    margin-bottom: 2.5rem;
}

.page-content p,
.page-content li {
    line-height: 1.7;
}

.page-content h2 {
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
}

.page-content h3 {
    font-size: 1.15rem;
    margin: 2rem 0 0.75rem;
}

.page-content ul,
.page-content ol {
    margin: 0 0 1.5rem 0;
    padding-left: 1.5rem;
}

.page-content li {
    margin-bottom: 0.5rem;
}

.page-content blockquote {
    margin: 2rem 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--md-line-color);
    font-style: italic;
}

.page-content hr {
    border: none;
    border-top: 1px solid var(--md-line-color);
    margin: 2.5rem 0;
}

/* Header. */
header {
    /* Drives the lockup: the logo's rendered height. */
    --md-logo-h: 1.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
    color: var(--md-text-color);
}

/* Open, the header sits on the cream overlay in the same navy as when closed, so nothing changes colour. */

/* Anchor targets (menu sections, #dine-in, #contact-form) land below the sticky header, not under it. */
[id] {
    scroll-margin-top: calc(var(--md-header-h) + 1rem);
}

header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    -webkit-user-select: none;
    user-select: none;
}

.header-logo {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-left: 0.25rem;
}

.header-logo .site-logo-img {
    height: var(--md-logo-h);
    width: auto;
}

/* The brandmark in the text colour, filling the header bar inside its padding. */
.brand-logo {
    display: block;
    width: auto;
    fill: currentColor;
    overflow: visible;
}

.header-logo .brand-logo {
    height: var(--md-header-logo);
}

/* The ship's wheel in the "o" spins forward about its hub on each hover or focus, easing out like a helm let go. */
.logo-wheel {
    /* Pinned to the hub's own point in the logo's coordinates (446.23, 99), not the group's box, which sits a hair off. */
    transform-box: view-box;
    transform-origin: 446.23px 99px;
    /* A long 3.2s ease-out so the wheel coasts slowly to a stop. */
    transition: transform 3.2s cubic-bezier(0.12, 0.8, 0.24, 1);
}

@media (prefers-reduced-motion: reduce) {
    .logo-wheel {
        transition: none;
    }
}

/* Fallback when no logo is uploaded: the site name set in the heading face. */
.site-logo-text {
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: calc(var(--md-logo-h) * 0.8);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: inherit;
    white-space: nowrap;
}

.header-nav-right {
    display: flex;
    align-items: center;
}

#header-nav {
    display: none;
    margin: 0 1rem;
    padding: 0;
}

#header-nav li {
    display: flex;
    margin: 0 0.6rem;
}

/* Hotlinks a quarter smaller than body text, each a 44px box centred on the bar so the smaller text doesn't sit low. */
#header-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    /* Sized to sit comfortably beside the logo. */
    font-size: 0.875em;
    line-height: 1;
    font-weight: 700;
}

/* The overlay carries the same links, so the inline nav steps aside rather than sitting under the blur. */
body.md-menu-open #header-nav {
    display: none;
}

/* 44px square: the theme's minimum target. The icon inside stays 20px. */
header .navbar-toggler {
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
}

/* The button base inverts on hover; on the bar the toggle stays as it is. */
header .navbar-toggler:hover,
header .navbar-toggler:focus,
header .navbar-toggler:active {
    background: transparent;
    color: inherit;
}

/* Menu icon: two bars converge on centre and rotate to +/-45 degrees. */
.menu-icon {
    --icon: 20px;
    position: relative;
    display: block;
    width: var(--icon);
    height: var(--icon);
    overflow: hidden; /* The bars run past the box once rotated. */
}

.menu-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(var(--icon) * 0.221);
    background-color: currentColor;
    transition: transform 133ms cubic-bezier(0.167, 0.167, 0.833, 0.833);
}

.menu-bar:nth-child(1) {
    top: calc(var(--icon) * 0.1903);
}

.menu-bar:nth-child(2) {
    top: calc(var(--icon) * 0.5887);
}

.navbar-toggler[aria-expanded="true"] .menu-bar:nth-child(1) {
    transform: translateY(calc(var(--icon) * 0.1992)) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .menu-bar:nth-child(2) {
    transform: translateY(calc(var(--icon) * -0.1992)) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
    .menu-bar {
        transition: none;
    }
}

/* A solid cream bar, no blur. It steps aside while the overlay is open, so the header shares the overlay's blur. */
header .backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--md-bg-color);
    /* The same 250ms as the overlay's fade, so the bar hands over to the overlay's field instead of vanishing under it. */
    transition: opacity 250ms ease;
}

/* The overlay's own field runs continuously behind the header, so the bar fades its own out as the overlay fades in. */
body.md-menu-open header .backdrop {
    opacity: 0;
}

header a {
    position: relative;
    text-decoration: none;
    color: inherit;
}

/* No underline on hover; keyboard focus keeps its ring. */
#header-nav a:hover {
    text-decoration: none;
}

header ul {
    list-style: none;
}

/* Expanded menu: a fixed cream field over a blur below the header, with navy type at 6.5:1 or better, so the toggle doubles as close. */
.site-menu-overlay {
    position: fixed;
    inset: 0;
    /* Above everything stuck in the page (the menu's section links sit at 5), below the header's 10. */
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* safe: a list taller than a short viewport starts at the top and scrolls, instead of losing its first links. */
    justify-content: safe center;
    gap: 2.5rem;
    /* Top padding clears the header, so the first link never sits under the toggle when the list scrolls. */
    padding: calc(var(--md-header-h) + 0.5rem) 2rem 2rem;
    box-sizing: border-box;
    overflow-y: auto;
    /* The watermark whale hangs past the right edge on purpose; clipped here so the overlay never scrolls sideways. */
    overflow-x: hidden;
    /* A scroll inside a tall list stops at its ends instead of carrying on into the page behind. */
    overscroll-behavior: contain;
    color: var(--md-text-color);
    background-color: color-mix(in srgb, var(--md-bg-color) 70%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* Never display:none, which drops the links from the tab order but cannot transition. */
    opacity: 0;
    visibility: hidden;
    /* visibility waits for the fade on close, so the menu fades out instead of snapping shut. */
    transition:
        opacity 250ms ease,
        visibility 0s linear 250ms;
}

/* A faint navy whale low in the cream field, at 6% so the links' contrast is untouched. */
.site-menu-overlay::before {
    content: "";
    position: absolute;
    right: -4vw;
    bottom: -3vh;
    width: min(70vw, 44rem);
    aspect-ratio: 433.74 / 296.3;
    background-color: var(--md-text-color);
    opacity: 0.06;
    -webkit-mask: var(--md-mask-whale, url("./images/whale.svg")) center / contain no-repeat;
    mask: var(--md-mask-whale, url("./images/whale.svg")) center / contain no-repeat;
    transform: scaleX(-1);
    pointer-events: none;
}

/* Phones: the whale sits wholly inside the screen, since iOS Safari can pan to content an overflow clip should hide. */
@media (max-width: 47.9375rem) {
    .site-menu-overlay::before {
        right: 0;
        bottom: 0;
        width: 80vw;
    }
    /* Behind the links: the overlay is its own stacking context, so -1 stays inside its field. */
    z-index: -1;
}

.site-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* Without the blur the page behind stays legible, so the field has to carry it alone. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-menu-overlay {
        background-color: var(--md-bg-color);
    }
}

.site-menu-overlay-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

/* The clamp is the whole "large and occupies the screen" effect: ~32px on a phone, 72px wide. */
.site-menu-overlay-menu a {
    /* inline-block, or transform has nothing to scale. */
    display: inline-block;
    font-family: var(--md-font-heading);
    font-weight: 900;
    font-size: clamp(2rem, 6vw, 4.5rem);
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--md-text-color);
    transition: transform 200ms ease;
}

.site-menu-overlay-menu a:hover,
.site-menu-overlay-menu a:focus-visible {
    transform: translateY(-2px) scale(1.04);
}

.site-menu-overlay-menu a:focus-visible {
    outline: 3px solid var(--md-accent-color);
    outline-offset: 6px;
}

/* Hidden below 768px, where the menu links already fill the panel on their own. */
.site-menu-overlay-contact {
    display: none;
}

@media (min-width: 768px) {
    .site-menu-overlay-contact {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.6rem 1.75rem;
        font-family: var(--md-font-heading);
        font-weight: 700;
        font-size: 0.8rem;
        font-style: normal;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .site-menu-overlay-contact a {
        color: var(--md-text-color);
        text-decoration: none;
    }
}

/* After the rules above, or the plain declarations win on source order. */
@media (prefers-reduced-motion: reduce) {
    .site-menu-overlay,
    .site-menu-overlay-menu a,
    header .backdrop {
        transition: none;
    }

    .site-menu-overlay-menu a:hover,
    .site-menu-overlay-menu a:focus-visible {
        transform: none;
    }
}

/* Footer. */
footer {
    text-align: center;
    font-size: 0.8rem;
    background-color: var(--md-panel-color);
    width: 100%;
    padding: 3rem var(--md-gutter);
    box-sizing: border-box;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    max-width: var(--md-wide);
    margin: 0 auto;
}

/* Capped so the copyright line never wraps the third footer column onto its own row, and placed last on phones. */
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 26rem;
}

.footer-logo-link {
    display: inline-flex;
    padding: 0.25rem 0.25rem 0.25rem 0;
    margin-bottom: 0.5rem;
    text-decoration: none;
}

.footer-logo-link .site-logo-img {
    height: 1rem;
    width: auto;
}

.footer-logo-link .brand-logo {
    height: 3.5rem;
}

.footer-logo-link .site-logo-text {
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding-bottom: 1.5rem;
}

footer .section {
    min-width: 9rem;
}

footer p {
    text-align: left;
}

footer h2 {
    text-align: left;
    font-weight: bold;
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}

footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

footer li {
    text-align: left;
}

footer a {
    text-decoration: none;
    color: var(--md-text-color);
}

/* Room between the list links, and a taller target than the 0.8rem text alone would give. */
footer ul a {
    display: inline-block;
    padding: 0.3rem 0;
}

/* Links inside footer copy need to look like links; the nav lists don't. */
.footer-brand p a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

/* The studio credit: the Morrison Sites wordmark at 15px, as morrisonsites.com sets its own. */
.footer-credit {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--md-text-color);
}

/* Inline, so the wordmark takes the token colour; 15px tall at the mark's 1448:124 proportions. */
.footer-credit-logo {
    display: block;
    height: 15px;
    width: calc(15px * 1448 / 124);
    fill: currentColor;
}

/* Browsers italicise <address>; the rest of the footer lists are upright. */
.footer-contact {
    display: flex;
    flex-direction: column;
    font-style: normal;
    text-align: left;
}

.footer-hours {
    margin: 0.75rem 0 0;
    color: var(--md-muted-color);
}

/* A long site name pushes the menu button off a 360px screen, so the whole lockup scales down. */
@media (max-width: 23.375rem) {
    header {
        --md-logo-h: 1.2rem;
    }
}

@media (min-width: 768px) {
    body {
        font-size: 18px;
    }

    /* The gap keeps the copyright line off the Explore column where the two meet, 768 to 1024px. */
    .footer-inner {
        flex-direction: row;
        gap: 2.5rem;
    }

    /* The brand column returns to the left beside the links. */
    .footer-brand {
        order: -1;
    }

    #header-nav {
        display: flex;
    }
}

/* Search form: used by search.php and the core Search block fallback. */
.search-form {
    width: 100%;
}

.search-form-label {
    display: block;
    font-family: var(--md-font-heading);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.search-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    max-width: 34rem;
}

.search-form-input {
    flex: 1 1 12rem;
    min-width: 0;
}

.search-form-submit {
    flex: 0 0 auto;
}

/* 404. */
.error-404 {
    text-align: center;
}

.error-404-code {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.06em;
    font-family: var(--md-font-heading);
    font-weight: 900;
    font-size: clamp(4rem, 16vw, 9rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--md-line-color);
    margin: 0 0 1rem;
}

/* The whale, in the awning's blue, facing the way it swims, bobbing over the number. */
.error-404-whale {
    display: block;
    width: clamp(7rem, 22vw, 11rem);
    height: auto;
    margin: 0 auto -0.5rem;
    fill: var(--md-awning-color);
    transform: scaleX(-1);
    animation: md-404-bob 3.4s ease-in-out infinite;
}

/* The zero is the ship's wheel (images/wheel.svg), navy, turning a slow turn every twelve seconds. */
.error-404-wheel {
    display: inline-block;
    width: 0.86em;
    height: 0.86em;
    background-color: var(--md-accent-color);
    -webkit-mask: var(--md-mask-wheel, url("./images/wheel.svg")) center / contain no-repeat;
    mask: var(--md-mask-wheel, url("./images/wheel.svg")) center / contain no-repeat;
    animation: md-404-turn 12s linear infinite;
}

@keyframes md-404-bob {
    0%, 100% { translate: 0 0.3rem; rotate: -3deg; }
    50% { translate: 0 -0.3rem; rotate: 3deg; }
}

@keyframes md-404-turn {
    to { rotate: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
    .error-404-whale,
    .error-404-wheel {
        animation: none;
    }
}

.error-404-lede {
    max-width: 42ch;
    margin: 0 auto 2.5rem;
    color: var(--md-muted-color);
}

.error-404-links {
    border-top: 1px solid var(--md-line-color);
    padding-top: 2rem;
}

.error-404-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
}

.error-404-links a {
    font-family: var(--md-font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.8rem;
}

.error-404-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.error-404-search {
    margin: 0 auto 2.5rem;
}

.error-404 .search-form-row {
    margin: 0 auto;
}

/* Nothing but the page prints: no header, footer, overlay or action bar. */
@media print {
    header,
    footer,
    .site-menu-overlay,
    .skip-link {
        display: none !important;
    }

    body {
        padding: 0;
        color: #000;
        background: #fff;
    }
}

/* The main landmark takes focus from the skip link and Back to top (tabindex -1); it needs no ring of its own. */
#md-content:focus {
    outline: none;
}

/* Unmissable notes awaiting the client: highlighter yellow with a navy bar, so none reach launch unanswered. */
.md-todo {
    padding: 0.85rem 1rem 0.85rem 1.1rem;
    background-color: var(--md-todo);
    border-left: 8px solid var(--md-text-color);
    outline: 3px dashed var(--md-text-color);
    outline-offset: -3px;
    color: var(--md-text-color);
    font-weight: 600;
}