/* ============================================================
   The Cafe — Shared Inner-Page Styles
   Used by: about.html, team.html, gallery.html, contact.html
   ============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Palette and layout tokens now live in tokens.css, which base.njk links
   immediately before this file. They moved so the /studio/ print and social
   pieces can share one definition instead of keeping a second copy that
   drifts. Do not redeclare them here. */

/* ── Base ─────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    background: var(--cream);
    color: var(--text-dark);
    line-height: 1.7;
}

img {
    display: block;
    max-width: 100%;
}

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

a:hover {
    color: var(--accent-dark);
}

/* ── Typography ───────────────────────────────────────────── */

h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    color: var(--text-dark);
    line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.5rem); }

p { max-width: 65ch; }

/* ── Layout helpers ───────────────────────────────────────── */

/* Present to assistive technology, absent from the page. Used where a
   heading is needed for document structure but would be noise on screen.
   Not `display: none`, which removes it from the accessibility tree too. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.section {
    padding-block: var(--section-pad);
}

.section--alt {
    background: var(--cream-alt);
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.85rem 2.2rem;
    border-radius: 2px;
    border: 2px solid transparent;
    display: inline-block;
    cursor: pointer;
    color: var(--cream);
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
}

.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.btn-primary {
    background: var(--accent);
    color: var(--cream);
    border-color: var(--accent);
}
.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: var(--cream);
}

/* Transparent fill, so the button takes the colour of whatever it sits on.
   Every .section--alt ground on this site is --cream-alt, and the label was
   --cream: near-white text on a near-white panel, legible only by its red
   border. --accent-dark instead, which is 6.3:1 on that ground; plain
   --accent would clear AA at 4.8:1 but this label is uppercase 14px with
   letterspacing, and small type is where a borderline ratio actually fails
   somebody. Hover fills with --accent and flips the label back to cream. */
.btn-outline {
    background: transparent;
    color: var(--accent-dark);
    border-color: var(--accent);
}
.btn-outline:hover {
    background: var(--accent);
    color: var(--cream);
}

.nav .btn {
    color: var(--cream);
}

/* ── Nav ──────────────────────────────────────────────────── */

.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: var(--cream);
    border-bottom: 1px solid rgba(var(--text-dark-rgb), 0.1);
    z-index: 100;
    display: flex;
    align-items: center;
}

.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.nav__brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-dark);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.nav__links {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
}

.nav__links a {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dark);
    transition: color 0.2s;
}

.nav__links a:hover {
    color: var(--accent);
}

.nav__links .btn {
    padding: 0.5rem 1.4rem;
    font-size: 0.8rem;
}

/* Hamburger (mobile) */
.nav__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    flex-direction: column;
    gap: 5px;
}

.nav__toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-dark);
    transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 700px) {
    .nav__toggle { display: flex; }

    .nav__links {
        display: none;
        position: absolute;
        top: var(--nav-height);
        left: 0; right: 0;
        background: var(--cream);
        flex-direction: column;
        gap: 0;
        border-bottom: 1px solid rgba(var(--text-dark-rgb), 0.1);
        padding-block: 0.5rem;
    }

    .nav__links.open { display: flex; }

    .nav__links li { width: 100%; }

    .nav__links a {
        display: block;
        padding: 0.85rem 1.5rem;
    }

    .nav__links .btn {
        margin: 0.5rem 1.5rem 0.5rem;
        display: inline-block;
        width: auto;
    }
}

/* ── Page top offset (for fixed nav) ─────────────────────── */

.page-body {
    padding-top: var(--nav-height);
    /* fill the viewport so the footer never floats mid-screen on short pages */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-body main {
    flex: 1 0 auto;
}

/* ── Under-construction notice ────────────────────────────── */

.construction-banner {
    background: var(--accent);
    color: var(--cream);
    text-align: center;
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    padding: 0.55rem 1.5rem;
}

/* ── Footer ───────────────────────────────────────────────── */

.footer {
    background: var(--teal-dark);
    color: var(--cream);
    padding-block: 2.5rem;
    text-align: center;
}

.footer__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer__brand {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--cream);
}

/* Hours, phone, address. Full cream, full size — this is the part of the
   footer people actually come looking for, so it is not dimmed like the
   link list below it. Labels in mint (6.5:1 on teal-dark); never the red
   accent, which is 1.3:1 on this ground.

   Three EQUAL columns rather than a wrapping flex row: the three facts are
   different widths, and in a flex row that pushes the middle one ("Call")
   off the centre line the brand name sits on. Equal columns pin it there.
   Stacked on phones, where there is no row to align. */
.footer__contact {
    font-style: normal;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 48rem) {
    .footer__contact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2rem;
        max-width: 60rem;
    }
}

.footer__fact {
    margin: 0;
    color: var(--cream);
}

.footer__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mint);
}

.footer__fact a {
    color: var(--cream);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.footer__fact a:hover {
    color: var(--mint);
}

.footer__fact a:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 3px;
}

.footer__links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}

.footer__links a {
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(250, 247, 242, 0.65);
    transition: color 0.2s;
}

.footer__links a:hover {
    color: var(--cream);
}

.footer__copy {
    font-size: 0.75rem;
    color: rgba(250, 247, 242, 0.4);
    margin-top: 0.5rem;
}

/* ── Section divider / chevron scroll indicator ───────────── */

.chevron-down {
    display: flex;
    justify-content: center;
    padding-top: 1.5rem;
}

.chevron-down svg {
    width: 28px;
    height: 28px;
    opacity: 0.4;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
}

/* ── Form status messages (Formspree submit feedback) ─────── */

.form-status {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    font-size: 1.05rem;
    color: var(--text-dark);
    background: rgba(var(--accent-rgb), 0.10);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
}

.form-status:focus {
    outline: none;
}

.form-status--error {
    font-weight: 400;
    color: var(--accent-dark);
    background: rgba(var(--accent-rgb), 0.16);
}

/* ── Accessibility ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .nav__links a { transition: none; }
    .chevron-down svg { animation: none; }
    .nav { animation: none; }
    .footer { transform: none; opacity: 1; transition: none; }
}


@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation-duration: 1s;
}