/* King's Park Stirling — royal purple, antique gold and cream, echoing the
   original "Medieval to Modern Times" leaflet fit for a former Royal Park.
   Mobile-first: QR scans are phones on a path in the rain. */

@font-face {
    font-family: "Cinzel";
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Cinzel-600.7a5ca9201524.woff2") format("woff2");
}
@font-face {
    font-family: "Cinzel";
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Cinzel-700.7a5ca9201524.woff2") format("woff2");
}
@font-face {
    font-family: "EB Garamond";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/EBGaramond-400.1a4b137019bd.woff2") format("woff2");
}
@font-face {
    font-family: "EB Garamond";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url("../fonts/EBGaramond-400i.9f79ebd15d75.woff2") format("woff2");
}
@font-face {
    font-family: "EB Garamond";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/EBGaramond-600.1a4b137019bd.woff2") format("woff2");
}

:root {
    /* Royal Park palette */
    --royal: #4b3d78;
    --royal-dark: #342a56;
    --royal-deep: #281f45;
    --gold: #a9862b;
    --gold-bright: #e0b83a;
    --gold-soft: #c6a94e;
    --gold-pale: #e7d9a6;
    --cream: #f6f1e5;
    --panel: #fffdf6;
    --ink: #2b2540;
    --muted: #5b5573;
    --white: #ffffff;
    --grey: #ede6d5;
    --trail-green: #2e7d3a;
    --trail-blue: #2b5ea8;
    --trail-orange: #c06a15;

    /* legacy aliases so existing rules pick up the new palette */
    --black: var(--royal-dark);
    --text: var(--ink);
    --teal: var(--royal);
    --teal-dark: var(--royal-deep);

    --font-display: "Cinzel", Georgia, "Times New Roman", serif;
    --font-head: "EB Garamond", Georgia, "Times New Roman", serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--cream);
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; color: var(--royal); }
h2 { border-bottom: 2px solid var(--gold-pale); padding-bottom: 0.2rem; }

.skip-link {
    position: absolute;
    left: -9999px;
    background: var(--teal);
    color: var(--white);
    padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0; top: 0; z-index: 100; }

/* Header */
.site-header {
    background: var(--royal-dark);
    color: var(--white);
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-bottom: 3px solid var(--gold);
}
.brand {
    color: var(--white);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.brand { display: flex; align-items: center; gap: 0.6rem; }
.brand-logo {
    height: 38px;
    width: auto;
    background: #fff;
    border-radius: 5px;
    padding: 3px 5px;
    display: block;
}
.brand, .brand:hover, .brand:focus { color: var(--white); }
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-title span { color: var(--gold-soft); font-weight: 600; }
.brand-strap {
    font-family: var(--font-body);
    font-style: normal;
    font-weight: 500;
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    color: #f3ead2;
    margin-top: 4px;
}
.site-header nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
}
.site-header nav a {
    color: var(--white);
    text-decoration: none;
    padding: 0.25rem 0;
}
.site-header nav a:hover,
.site-header nav a:focus { text-decoration: underline; }

.trail-link {
    padding: 0.15rem 0.6rem !important;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
}
.trail-green { background: var(--trail-green); }
.trail-blue { background: var(--trail-blue); }
.trail-orange { background: var(--trail-orange); }

/* Mobile header: stack the brand above a single tidy row of trail pills */
@media (max-width: 40rem) {
    .site-header {
        flex-direction: column;
        align-items: stretch;
        /* A wrapping column sizes each line to its widest item's content, not
           to the screen, so the scrolling pill row pushed the whole header
           past 320 px and clipped the strap. One line, and let items shrink. */
        flex-wrap: nowrap;
        gap: 0.55rem;
        padding: 0.6rem 0.85rem;
    }
    .site-header > *, .brand-text { min-width: 0; }
    .brand { align-items: center; }
    .brand-logo { height: 34px; }
    .brand-title { font-size: 1.1rem; }
    .brand-strap { font-size: 0.78rem; }
    .nav-trails-label { display: none; }
    .site-header nav ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0.4rem;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .site-header nav ul::-webkit-scrollbar { display: none; }
    .site-header nav li { flex: 0 0 auto; }
}

/* Layout */
main {
    max-width: 44rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

h1 { font-size: 1.9rem; line-height: 1.2; margin: 0.5rem 0 1rem; }
h2 { font-size: 1.4rem; line-height: 1.3; margin: 2rem 0 0.5rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }

a { color: var(--teal); }
a:hover, a:focus { color: var(--teal-dark); }

/* Images */
figure { margin: 1.5rem 0; }
figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}
figcaption {
    font-size: 0.95rem;
    color: #444;
    margin-top: 0.4rem;
}
figcaption .credit {
    display: block;
    font-size: 0.85rem;
    color: #666;
}

/* Map */
#walk-map {
    height: 60vh;
    min-height: 320px;
    max-height: 520px;
    margin: 1.5rem 0 0.5rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #e8ecec;
}

/* On a wide screen the map breaks out of the 44rem text column. Prose stays at
   its measure — around 75 characters is what makes it readable, and widening it
   to fill a 2000px display would make it worse, not better. The map is a tool
   rather than text: it earns the space, and fitting the same park into a bigger
   box means more zoom and better-separated pins without losing any of it.

   Centred with a negative inline margin rather than a transform: a transform on
   the container creates a containing block, which Leaflet's absolutely
   positioned panes and popups are sensitive to. */
@media (min-width: 72rem) {
    #walk-map {
        --map-w: min(1200px, calc(100vw - 6rem));
        width: var(--map-w);
        margin-inline: calc((100% - var(--map-w)) / 2);
        height: 70vh;
        max-height: 800px;
    }
}
.map-note { font-size: 0.95rem; color: #555; margin: 0 0 1rem; }
.trail-extend {
    background: var(--panel);
    border-left: 5px solid var(--gold);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 0 0 1rem;
}

/* Route hazards and access. The warning has to out-shout the neutral access
   note without importing a colour from outside the palette — so it borrows the
   orange trail's own hue, which is the trail the warning is about. */
.trail-warning {
    background: #fdf4e8;
    border-left: 5px solid var(--trail-orange);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 0 0 0.75rem;
}
.trail-warning strong {
    display: block;
    color: #8a4d0e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}
.trail-access {
    background: var(--panel);
    border-left: 5px solid var(--royal);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    margin: 0 0 1rem;
}
.trail-access strong {
    display: block;
    color: var(--royal-deep);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

/* Golf course safety (walk/safety.py). Amber and near-black, the colours of
   the club's own signs, so the notice on the phone looks like the sign on the
   post — but a pale ground for the text, which stays dark ink for contrast. */
.safety-notice {
    background: #fff6dc;
    border: 2px solid #1d1a14;
    border-left: 10px solid #f2b01e;
    border-radius: 6px;
    padding: 1rem 1.1rem;
    margin: 1rem 0 1.25rem;
    color: var(--ink);
    display: grid;
    gap: 1rem;
    scroll-margin-top: 1rem;
}
.safety-notice h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    color: #1d1a14;
    border: 0;
    padding: 0;
}
.safety-notice p { margin: 0 0 0.5rem; }
.safety-notice ul { margin: 0; padding-left: 1.2rem; }
.safety-notice li { margin: 0.2rem 0; }
.safety-notice-figure { margin: 0; }
.safety-notice-figure img { width: 100%; max-width: 20rem; }
.safety-icon { flex: none; }
@media (min-width: 40rem) {
    .safety-notice--with-figure { grid-template-columns: 1fr 14rem; align-items: start; }
    .safety-notice-figure img { max-width: 100%; }
}
.safety-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: #fff6dc;
    border-left: 6px solid #f2b01e;
    border-radius: 4px;
    padding: 0.65rem 1rem;
    margin: 0 0 1.25rem;
    color: var(--ink);
}
.safety-alert .safety-icon { margin-top: 0.1rem; }
.safety-alert a { white-space: nowrap; font-weight: 600; }

/* Wayfinding, kept visually separate from the heritage prose below it. */
.stop-directions {
    background: var(--cream);
    border-left: 5px solid var(--royal);
    padding: 0.7rem 1rem;
    border-radius: 4px;
    margin: 0 0 1.25rem;
    color: var(--ink);
}
.stop-directions-label {
    display: block;
    color: var(--royal-deep);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.map-pin {
    background: #4b3d78;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    line-height: 24px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.map-pin--pavilion {
    background: var(--gold-bright);
    color: #3a2e12;
    width: 44px;
    height: 44px;
    line-height: 40px;
    font-size: 22px;
    border-width: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.pav-label {
    position: absolute;
    top: 46px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--royal-dark);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 4px;
}
.stop-popup .pav-note {
    background: #fbf3d9;
    border-left: 4px solid var(--gold);
    color: #4a3a12;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    margin: 0 0 0.5rem;
}
.stop-popup h4 { margin: 0 0 0.4rem; color: #4b3d78; font-size: 1rem; }
.stop-popup img {
    width: 100%;
    /* reserve the height before the image loads so the popup opens at its
       full size and does not grow upward off the top of the map */
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.4rem;
    display: block;
}
.stop-popup p { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.4; }
.stop-popup a { color: #2563a8; font-weight: 600; }
.trail-legend .chip, .leaflet-control-layers .chip {
    display: inline-block;
    width: 22px;
    height: 5px;
    border-radius: 3px;
    margin-right: 7px;
    vertical-align: middle;
}
.locate-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 2px solid rgba(0, 0, 0, .25);
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}

/* Live "you are here" watch. The button is a toggle, so it has to look pressed
   while the GPS is running — an idle-looking control is how a phone ends up
   tracking in someone's pocket for an hour. */
.locate-btn--on {
    background: #2563a8;
    border-color: #2563a8;
    color: #fff;
}

.locate-status {
    margin: 4px 0 0;
    max-width: 15em;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .92);
    color: #333;
    font-size: 12px;
    line-height: 1.3;
}

/* Empty until there is something to say, and never a stray white box. */
.locate-status:empty { display: none; }

/* The dot pulses so a live position reads as live rather than as one more pin.
   The accuracy halo does not move under prefers-reduced-motion. */
.locate-dot {
    animation: locate-pulse 2s ease-in-out infinite;
}

@keyframes locate-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
    .locate-dot { animation: none; }
}

/* The sheet: priming before the permission prompt, and the recovery steps
   afterwards. It sits inside the map rather than being an alert() so it can
   hold three ordered steps and a Try again button — the iOS route back from a
   denial is genuinely three settings screens, and that does not fit in a
   dialog with one OK button. */
.map-sheet {
    position: absolute;
    inset: 0;
    z-index: 1200;              /* above Leaflet's controls (400-1000) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(40, 31, 69, .45);
}

.map-sheet-card {
    background: var(--panel);
    color: var(--ink);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
    padding: 1rem 1.1rem;
    max-width: 27rem;
    max-height: 100%;
    overflow-y: auto;           /* three steps on a short phone in landscape */
    font-size: .93rem;
    line-height: 1.45;
}

.map-sheet-card h3 {
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}

.map-sheet-card p { margin: 0 0 .6rem; }
.map-sheet-card ol { margin: 0 0 .6rem; padding-left: 1.2rem; }
.map-sheet-card li { margin-bottom: .4rem; }
.map-sheet-note { color: var(--muted); font-size: .86rem; }

.map-sheet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .8rem 0 0;
}

.sheet-btn {
    padding: .5rem .9rem;
    border-radius: 6px;
    border: 1px solid var(--royal);
    background: var(--white);
    color: var(--royal);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.sheet-btn--primary {
    background: var(--royal);
    color: var(--white);
}

/* The stop whose sign was scanned — gold ring, to match the waymarking, and
   distinct from the blue GPS dot because it means something different: this is
   surveyed, not estimated. */
.map-pin--here {
    box-shadow: 0 0 0 4px var(--gold-bright), 0 1px 4px rgba(0, 0, 0, .5);
}

.stop-popup .here-note {
    background: #fbf3d9;
    border-left: 4px solid var(--gold);
    color: #4a3a12;
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    margin: 0 0 0.5rem;
}

/* "You scanned the sign here" on the stop page itself. */
.scanned-banner {
    background: #fbf3d9;
    border-left: 4px solid var(--gold);
    border-radius: 4px;
    padding: .6rem .8rem;
    margin: 0 0 1rem;
    font-weight: 600;
    color: #4a3a12;
}

.scanned-banner-icon { margin-right: .35rem; }
.scanned-banner a { margin-left: .35rem; }

/* Gallery */
.gallery-cta { margin: 1.5rem 0; font-weight: 600; }
.gallery-grid {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1rem;
}
.gallery-item { margin: 0; }
.gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    background: var(--grey);
}
.gallery-caption { font-size: 0.9rem; color: #444; margin-top: 0.35rem; }
.gallery-caption .credit { display: block; font-size: 0.8rem; color: #777; }

/* About-section image */
.about-figure { margin: 0 0 1rem; }
.about-figure img { width: 100%; height: auto; border-radius: 6px; display: block; }
.about-figure figcaption { font-size: 0.85rem; color: #555; margin-top: 0.35rem; }
.about-figure figcaption .credit { color: #777; }
@media (min-width: 40rem) {
    .about-figure {
        float: right;
        width: 46%;
        margin: 0.3rem 0 1rem 1.5rem;
    }
}

/* Stop list */
.stop-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.stop-list-text { display: flex; flex-direction: column; }
.stop-list-title { font-weight: 600; }
.stop-list-summary { font-size: 0.95rem; color: #555; font-weight: 400; line-height: 1.35; }
.stop-list li { margin: 0; border-bottom: 1px solid #ddd; }
.stop-list a {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    padding: 0.9rem 0.25rem;
    text-decoration: none;
    color: var(--text);
    font-size: 1.15rem;
}
.stop-list a:hover, .stop-list a:focus { background: var(--grey); }
.stop-number {
    flex: 0 0 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--teal);
    color: var(--white);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}

/* Stop page */
.stop-header .stop-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.9rem;
    color: var(--teal-dark);
    font-weight: 700;
    margin: 0;
}
.trail-badges { display: flex; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.trail-badge {
    display: inline-block;
    color: var(--white);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    text-decoration: none;
}
a.trail-badge:hover, a.trail-badge:focus { text-decoration: underline; }
.trail-badge.trail-gold { color: #3a2e12; }

/* "Close by" — the geographically nearest stops, above the prev/next pager. */
.stop-nearby {
    margin-top: 2.5rem;
    padding: 1rem 1.25rem;
    background: var(--cream);
    border-radius: 4px;
}
.stop-nearby h2 {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    color: var(--royal-deep);
}
.stop-nearby ul { list-style: none; margin: 0; padding: 0; }
.stop-nearby li { padding: 0.45rem 0; border-bottom: 1px solid #ddd; }
.stop-nearby li:last-child { border-bottom: 0; }
.stop-nearby a { font-weight: 600; text-decoration: none; }
.stop-nearby a:hover, .stop-nearby a:focus { text-decoration: underline; }
.stop-nearby-number {
    color: var(--royal-deep);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-left: 0.5rem;
}
.stop-nearby-summary {
    display: block;
    font-size: 0.95rem;
    color: #555;
    line-height: 1.35;
}

.stop-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    border-top: 2px solid var(--black);
    padding-top: 1rem;
}
.stop-pager a { text-decoration: none; font-weight: 600; }

/* Photo heroes (home hero + page/trail headers) */
.hero, .photo-header {
    position: relative;
    background-color: var(--black);
    background-size: cover;
    background-position: center;
    color: var(--white);
    text-align: center;
    overflow: hidden;
}
.hero::before, .photo-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(40, 31, 69, .40), rgba(40, 31, 69, .78));
}
.hero > *, .photo-header > * { position: relative; z-index: 1; }

.hero {
    margin: -1.25rem -1rem 1.5rem;
    padding: 4rem 1rem;
    border-bottom: 4px solid var(--gold);
}
.hero h1 {
    font-family: var(--font-display);
    color: var(--white);
    font-size: 2.1rem;
    letter-spacing: 0.03em;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.hero .strapline { color: var(--gold-pale); font-size: 1.2rem; margin: 0.6rem 0 0; }

.photo-header {
    margin: -1.25rem -1rem 1.25rem;
    padding: 2.5rem 1rem;
    border-bottom: 4px solid var(--gold);
}
.photo-header h1 {
    font-family: var(--font-display);
    color: var(--white);
    letter-spacing: 0.03em;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}
.photo-header .photo-header-meta { margin: 0.5rem 0 0; font-size: 1.05rem; color: var(--gold-pale); }

/* Hero background images. Whitenoise rewrites these url()s to hashed paths. */
.bg-castle-autumn { background-image: url("../images/heroes/castle-autumn.f66c29a843b8.jpg"); }
.bg-autumn-colours { background-image: url("../images/heroes/autumn-colours.c830438c50f9.jpg"); }
.bg-castle-view-orange { background-image: url("../images/heroes/castle-view-orange.ce59fe8c6604.jpg"); }
.bg-haining-green { background-image: url("../images/heroes/haining-green.9d2dabfe6324.jpg"); }
@media (max-width: 600px) {
    .bg-castle-autumn { background-image: url("../images/heroes/castle-autumn-sm.8b1006541e88.jpg"); }
    .bg-autumn-colours { background-image: url("../images/heroes/autumn-colours-sm.0cb1ba50fe70.jpg"); }
    .bg-castle-view-orange { background-image: url("../images/heroes/castle-view-orange-sm.3aece3fde345.jpg"); }
    .bg-haining-green { background-image: url("../images/heroes/haining-green-sm.0b231bd1a2be.jpg"); }
}

.card-links { display: grid; gap: 1rem; padding: 0; margin: 1.5rem 0; list-style: none; }
.card-links a {
    display: block;
    background: var(--grey);
    border-left: 6px solid var(--teal);
    padding: 1rem;
    text-decoration: none;
    color: var(--text);
    font-weight: 600;
    font-size: 1.15rem;
    border-radius: 4px;
}
.card-links a:hover, .card-links a:focus { background: #e8dfc9; }
.card-links .card-sub { display: block; font-weight: 400; font-size: 1rem; color: #444; }

/* Route cards with a photo thumbnail */
.card-links .card-trail {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
.card-thumb {
    flex: 0 0 34%;
    max-width: 150px;
    object-fit: cover;
    align-self: stretch;
    min-height: 84px;
}
.card-content { padding: 0.85rem 1rem; align-self: center; }
.card-title { display: block; }
.card-teaser {
    display: block;
    font-weight: 400;
    font-size: 0.95rem;
    color: #555;
    margin-top: 0.35rem;
    line-height: 1.4;
}

/* Trail cards on the landing page — subtly coloured to match each trail */
.card-trail--blue { border-left-color: var(--trail-blue); }
.card-trail--green { border-left-color: var(--trail-green); }
.card-trail--orange { border-left-color: var(--trail-orange); }
.card-trail--blue:hover, .card-trail--blue:focus { background: #eaf1f9; }
.card-trail--green:hover, .card-trail--green:focus { background: #e9f3ec; }
.card-trail--orange:hover, .card-trail--orange:focus { background: #f8efe4; }
.trail-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Full walk — its own bright-gold identity, distinct from the trail colours */
.trail-gold { background: var(--gold-bright); }
a.trail-link.trail-gold { color: #3a2e12; font-weight: 700; }
.card-trail--gold { border-left-color: var(--gold-bright); }
.card-trail--gold:hover, .card-trail--gold:focus { background: #f8efd2; }
.full-walk-badge {
    display: inline-block;
    background: var(--gold-bright);
    color: #3a2e12;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.2rem 0.85rem;
    border-radius: 999px;
}

/* Footer */
.site-footer {
    background: var(--royal-dark);
    color: var(--white);
    padding: 1.5rem 1rem 2rem;
    text-align: center;
    font-size: 1rem;
    border-top: 3px solid var(--gold);
}
.site-footer a { color: var(--gold-soft); }
.footer-links { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }

/* Supporter logos */
.supporters-heading {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    color: var(--gold-pale);
    margin: 0.5rem 0 0.75rem;
}
.supporters-heading--light { color: var(--muted); text-align: center; margin-top: 2rem; }
.logo-strip {
    list-style: none;
    padding: 0;
    margin: 0 auto 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
}
.logo-strip a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 6px;
    padding: 8px 12px;
    height: 54px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.logo-strip img { height: 38px; width: auto; display: block; }

/* Cookie consent banner. In normal document flow (not a fixed overlay) so it
   can never float on top of and obscure page content, wherever that content
   happens to sit — it pushes the page down while shown, and the page
   reflows up the instant it's dismissed. */
.cookie-consent {
    width: calc(100% - 2rem);
    max-width: 40rem;
    margin: 1rem auto 0;
    background: var(--royal-dark);
    color: var(--white);
    border: 1px solid var(--gold);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
/* the attribute selector must beat `.cookie-consent { display:flex }`, otherwise
   the JS setting `hidden` cannot dismiss the banner */
.cookie-consent[hidden] { display: none; }
.cookie-consent p { margin: 0; flex: 1 1 16rem; font-size: 0.95rem; }
.cookie-consent a { color: var(--gold-soft); }
.cookie-consent-actions { display: flex; gap: 0.5rem; }
.cookie-btn {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--gold-soft);
    background: transparent;
    color: var(--white);
    cursor: pointer;
}
.cookie-btn--accept { background: var(--gold-bright); color: #3a2e12; border-color: var(--gold-bright); }

/* Contact / feedback form */
.kp-form { max-width: 34rem; margin: 1.5rem 0; }
.kp-form p { margin: 0 0 1rem; }
.kp-form label { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.kp-form input[type="text"],
.kp-form input[type="email"],
.kp-form input[type="url"],
.kp-form input[type="number"],
.kp-form textarea,
.kp-form select {
    width: 100%;
    font-size: 1.05rem;
    font-family: inherit;
    padding: 0.55rem;
    border: 2px solid var(--royal);
    border-radius: 4px;
    background: var(--panel);
}
.kp-form textarea { min-height: 8rem; }
.kp-form .helptext { font-size: 0.9rem; color: #666; }
.kp-form button { font-size: 1.1rem; padding: 0.5rem 1.4rem; }

/* Search */
.search-form { display: flex; gap: 0.5rem; margin: 1rem 0 2rem; }
.search-form input[type="text"] {
    flex: 1;
    font-size: 1.1rem;
    padding: 0.6rem;
    border: 2px solid var(--black);
    border-radius: 4px;
}
.search-form button {
    font-size: 1.1rem;
    padding: 0.6rem 1.2rem;
    background: var(--teal);
    color: var(--white);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

@media (min-width: 40rem) {
    body { font-size: 1.1875rem; }
    h1 { font-size: 2.3rem; }
    .hero h1 { font-size: 2.8rem; }
}

/* --- Park facilities: the everyday things, not heritage stops -------------- */
.facilities {
    background: var(--panel);
    border-left: 5px solid var(--royal);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
}
.facilities h2 { margin-top: 0; }
.facilities-intro { font-size: 0.95rem; margin: 0 0 0.75rem; }
.facility-list { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.facility-list li {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--grey);
}
.facility-list li:last-child { border-bottom: 0; }
.facility-icon { flex: 0 0 1.4rem; font-size: 1.05rem; line-height: 1; }
.facility-text { font-size: 0.95rem; }
.facility-text em { color: var(--muted); font-size: 0.9em; }
.facilities-access {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--grey);
}
/* Map pin: paler and smaller than a numbered stop, so heritage still leads. */
.facility-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--royal);
    font-size: 0.8rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Park entrances: the gates with a map poster. Gold on royal, the flag the
   poster itself uses for "you are here", so the two read as the same thing. */
.entrance-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: var(--royal);
    border: 2px solid var(--gold-bright);
    color: var(--gold-bright);
    font-size: 0.85rem;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Archaeology pins: quieter again than a facility. These are ~75 m indicative
   positions for things that are no longer there, so they must not compete with
   a numbered stop a visitor is standing at. Dashed border says "approximate"
   before the popup has to. */
.arch-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cream);
    border: 1px dashed var(--royal);
    font-size: 0.72rem;
    line-height: 1;
    opacity: 0.85;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.arch-popup .arch-period {
    display: block;
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.1rem;
}
.arch-popup .arch-accuracy {
    font-size: 0.78rem;
    color: #666;
    font-style: italic;
    margin: 0.35rem 0 0;
}

/* The facilities map: its own frame, shorter than the walk map because the
   cluster it shows is only a couple of hundred metres across. */
#facilities-map {
    height: 42vh;
    min-height: 260px;
    max-height: 420px;
    margin: 0 0 1rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #e8ecec;
}
.facility-pin--large { width: 32px; height: 32px; font-size: 1.05rem; }

.facilities-pointer {
    background: var(--panel);
    border-left: 5px solid var(--royal);
    border-radius: 4px;
    padding: 0.7rem 1rem;
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}
.trail-cards { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.trail-cards li { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.35rem 0; }
.trail-card-meta { font-size: 0.9rem; color: var(--muted); }
.lede { font-size: 1.05rem; }

/* Trail pills carry their name, not just a duration. Two trails share the same
   70 minutes, so labelling by time alone left them distinguishable only by
   colour — which fails WCAG 1.4.1, and green-vs-orange is the worst pair to
   rely on for anyone with a colour vision deficiency. The name does the work
   and the colour reinforces it. */
.trail-link .trail-time {
    opacity: 0.82;
    font-weight: 500;
    font-size: 0.88em;
    margin-left: 0.15rem;
}
.nav-trails-label span { opacity: 0.9; }
/* Visiting is not a trail — set it apart from the walk group. It leads the
   menu (Kenny, 15 Sep 2026), so the rule sits on its right. */
.nav-divider {
    margin-right: 0.4rem;
    padding-right: 0.85rem;
    border-right: 1px solid rgba(255, 255, 255, 0.28);
}
@media (max-width: 40rem) {
    .nav-divider { margin-right: 0.2rem; padding-right: 0.5rem; }
}

/* The visiting card is not a trail, so it takes the royal purple rather than a
   trail colour — it should not read as a fourth route. */
.card-trail--visiting { border-left-color: var(--royal); }
.card-trail--visiting .card-title { color: var(--royal); }

/* Temporary "work in progress" notice on the home page. Informational rather
   than a hazard, so it takes the gold accent rather than the orange used for
   route warnings — it should be noticed, not alarming. */
.site-notice {
    background: var(--panel);
    border: 1px solid var(--gold-pale);
    border-left: 5px solid var(--gold);
    border-radius: 4px;
    padding: 0.85rem 1.15rem;
    margin: 1.25rem 0 1.5rem;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.7rem;
}
.site-notice-icon { grid-row: 1 / span 3; padding-top: 0.15rem; }
.site-notice-icon svg { display: block; }
@media (max-width: 30rem) {
    .site-notice { grid-template-columns: 1fr; }
    .site-notice-icon { grid-row: auto; }
}
.site-notice > strong {   /* direct child only — a strong inside the paragraph
                             is also a :first-child and was picking this up,
                             breaking "not yet in the park" onto its own line */
    display: block;
    font-family: var(--font-head);
    font-size: 1.05rem;
    color: var(--royal);
    margin-bottom: 0.2rem;
}
.site-notice p { margin: 0; font-size: 0.95rem; line-height: 1.5; }
.site-notice p.site-notice-ask { margin-top: 0.55rem; }
.site-notice-ask a { font-weight: 600; white-space: nowrap; }

/* A nudge towards the contact form, where a visitor has just read something. */
.feedback-prompt {
    border-top: 1px solid var(--gold-pale);
    padding-top: 0.75rem;
    margin: 1.5rem 0 1rem;
    color: var(--muted);
}
.feedback-prompt a { font-weight: 600; white-space: nowrap; }

/* Practical questions on the visiting page. */
.practical { margin: 0 0 1.5rem; }
.practical dt {
    font-weight: 600;
    font-family: var(--font-head);
    color: var(--royal);
    margin-top: 0.9rem;
}
.practical dd { margin: 0.15rem 0 0; }

/* Contact form: the optional photograph, grouped so it reads as one choice. */
.kp-photo {
    border: 1px solid var(--gold-pale);
    border-radius: 6px;
    padding: 0.75rem 1rem 0.25rem;
    margin: 1rem 0;
}
.kp-photo legend {
    font-family: var(--font-head);
    font-size: 1.1rem;
    color: var(--royal);
    padding: 0 0.35rem;
}
.kp-photo input[type="file"] { display: block; max-width: 100%; margin: 0.3rem 0; }
.kp-check { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; align-items: start; }
.kp-check input { margin-top: 0.3rem; width: 1.1rem; height: 1.1rem; }
.kp-check .errorlist { grid-column: 1 / -1; }
.kp-form .kp-check label { font-weight: 400; margin: 0; }