/* 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;
        gap: 0.55rem;
        padding: 0.6rem 0.85rem;
    }
    .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;
}
.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;
}
.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;
}

/* 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; }

.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 */
.cookie-consent {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1200;
    max-width: 40rem;
    margin: 0 auto;
    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; }
}