@import url('https://fonts.googleapis.com/css2?family=Calistoga&family=Lato:wght@400;700;900&display=swap');

:root {
    --navy: #263B6E;
    --navy-secondary: #263B6E;
    --navy-accent: #445F9D;
    --navy-dark: #010811;
    --footer-navy: #051b3a;
    --red: #E74C3C;
    --red-dark: #bf2718;
    --amber: #942f1e;
    --grey: #6c757d;
    --grey-light: #F1F3F7;
    --border: #dee2e6;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Lato", sans-serif;
    color: var(--navy);
    background: #fff;
    line-height: 1.6;
    padding-top: 88px; /* offset for fixed header */
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red); text-decoration: underline; }

.container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-wide { max-width: 1320px; }

/* Header — kept as a dark navy bar with light text/CTA; the only part of the
   site that stays "inverted" relative to the rest of the page. */
.site-header {
    background: #051E40;
    border-bottom: 2px solid #fff;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    gap: 1.5rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: #fff;
}

.brand:hover { color: #fff; text-decoration: none; }

.brand img { height: 70px; width: 70px; }

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-text strong { font-family: "Calistoga", serif; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; color: #fff; }
.brand-text span { font-size: 0.85rem; color: #cdd7e5; }

nav { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 1.5rem; }

nav ul {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

/* "Restore Monmouthshire & Torfaen" is a lot longer than the old name —
   fine above ~1300px, but between the desktop nav's full width and the
   900px hamburger breakpoint it needs a bit less room per element to
   avoid wrapping onto multiple lines. */
@media (max-width: 1300px) {
    .brand-text strong { font-size: 1.15rem; }
    nav { gap: 1rem; }
    nav ul { gap: 1rem; }
}

nav a {
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    white-space: nowrap;
}

nav a:hover, nav a.active { color: var(--amber); text-decoration: none; }

.nav-cta {
    flex-shrink: 0;
    padding: 0.55rem 1.35rem;
    font-size: 0.92rem;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.btn.nav-cta { background: #fff; color: var(--navy); }
.btn.nav-cta:hover { background: var(--grey-light); color: var(--navy); }

/* Hero — full-bleed image with dark overlay, matching their feature-carousel look */
.hero {
    position: relative;
    color: #fff;
    text-align: center;
    padding: 5.5rem 1.5rem;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(5,30,64,0.72), rgba(1,8,17,0.82)), url('../img/hero.jpg');
    background-size: cover;
    background-position: center 30%;
    z-index: 0;
    transform: scale(1);
    will-change: transform;
}

.hero .container { position: relative; z-index: 1; }

.hero h1 {
    font-family: "Calistoga", serif;
    font-size: 2.75rem;
    font-weight: 400;
    margin: 0 0 1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.hero p {
    font-size: 1.2rem;
    color: #e7ecf3;
    max-width: 640px;
    margin: 0 auto 2rem;
}

/* Page banner — slim title band used on interior pages, matching their jumbotron pattern */
.page-banner {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: #fff;
    padding: 2.75rem 1.5rem;
    text-align: center;
}

.page-banner h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 900;
}

/* Rupert Lowe feature — photo left, founding quote right, edge to edge */
.rupert-feature {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    min-height: 680px;
}

.rupert-feature-img { position: relative; overflow: hidden; }

.rupert-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rupert-feature-img img { filter: grayscale(55%) contrast(1.05); }

.rupert-feature-img::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(160deg, rgba(148,47,30,0.65) 0%, rgba(5,30,64,0.55) 60%, rgba(1,8,17,0.75) 100%);
    mix-blend-mode: multiply;
    z-index: 1;
}

.rupert-feature-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to right, transparent 55%, var(--navy) 100%);
    z-index: 2;
}

.rupert-feature-quote {
    background: var(--navy);
    color: #fff;
    display: flex;
    align-items: center;
    padding: 3.5rem 4rem;
}

.rupert-feature-quote blockquote {
    margin: 0;
    max-width: 620px;
}

.rupert-feature-quote blockquote p {
    font-size: 1.1rem;
    line-height: 1.75;
    margin: 0 0 1.1rem;
}

.rupert-feature-quote footer {
    margin-top: 1.5rem;
    font-weight: 700;
    font-style: normal;
    color: var(--amber);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

@media (max-width: 900px) {
    .rupert-feature { grid-template-columns: 1fr; min-height: 0; }
    .rupert-feature-img { height: 320px; }
    .rupert-feature-quote { padding: 2.5rem 1.5rem; }
}

/* Subnav — tab-style links under a page banner, matching their Policies subnav */
.subnav {
    background: var(--grey-light);
    border-bottom: 1px solid var(--border);
}

.subnav .container {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.subnav a {
    font-weight: 700;
    color: var(--navy);
    font-size: 0.95rem;
}

.subnav a:hover { color: var(--red); }

/* Buttons — navy primary CTA, matching their btn-color-1 */
.btn {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    padding: 0.75rem 1.75rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.btn:active { transform: translateY(1px); }

.btn:hover { background: #fff; color: var(--navy); text-decoration: none; box-shadow: inset 0 0 0 2px var(--navy); }

.btn-secondary {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}

.btn-secondary:hover { background: #fff; color: var(--navy); }

/* Sections */
.section { padding: 3.5rem 0; }
.section-alt { background: var(--grey-light); }

.section h2 {
    font-size: 1.9rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 1.5rem;
    color: var(--grey);
    font-size: 1.05rem;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1.5rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover { box-shadow: 0 8px 20px rgba(5,30,64,0.12); transform: translateY(-3px); }

.card h3 { margin-top: 0; color: var(--navy); }

.card-icon { color: var(--amber); margin-bottom: 0.9rem; }
.card-icon svg { width: 32px; height: 32px; }

.stat-card { text-align: center; }

.stat-number, .stat-icon {
    font-family: "Calistoga", serif;
    color: var(--amber);
    line-height: 1;
    margin-bottom: 0.6rem;
}

.stat-number { font-size: 2.5rem; }
.stat-icon { font-size: 1.5rem; letter-spacing: 0.04em; }

.stat-card h3 { font-size: 1.05rem; margin: 0 0 0.5rem; }
.stat-card p { margin: 0; color: var(--grey); font-size: 0.95rem; }

/* Reusable closing call-to-action banner, used across interior pages */
.cta-banner {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: #fff;
    padding: 3.5rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 5rem;
    border-top: 1px solid rgba(255,255,255,0.4);
}

.cta-banner::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -4rem;
    transform: translateY(-50%);
    width: 22rem;
    height: 22rem;
    background: url('../img/logo-watermark.png') no-repeat center / contain;
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
}

.cta-banner .container { position: relative; z-index: 1; }

.cta-banner h2 {
    font-family: "Calistoga", serif;
    font-weight: 400;
    font-size: 1.9rem;
    margin: 0 0 0.75rem;
}

.cta-banner p { max-width: 560px; margin: 0 auto 1.75rem; color: #cdd7e5; }

.cta-banner-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Scroll-reveal utility — sections fade/slide in as they enter the viewport */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.paper-cards { grid-template-columns: repeat(4, 1fr); gap: 2rem; }

.paper-card {
    display: block;
    color: var(--navy);
    text-align: center;
    transition: box-shadow 0.15s, transform 0.15s;
}

.paper-card:hover {
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(5,30,64,0.15);
    transform: translateY(-3px);
}

.paper-thumb {
    width: 100%;
    aspect-ratio: 210 / 297;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    margin-bottom: 1rem;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.paper-card h3 { font-size: 1.1rem; }
.paper-card .post-date { display: block; }

/* News */
.post-list { list-style: none; padding: 0; margin: 2rem 0 0; }

.post-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
}

.post-item h3 { margin: 0 0 0.25rem; }
.post-item .post-date { color: var(--grey); font-size: 0.9rem; }

.post-body { margin-top: 2rem; white-space: pre-line; }

/* Forms */
.form-group { margin-bottom: 1.25rem; }

.form-group label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.form-group input:not([type="radio"]):not([type="checkbox"]),
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    background: #fff;
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
    width: auto;
    flex-shrink: 0;
}

.form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23263B6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 16px;
    cursor: pointer;
}

.form-group select:focus {
    outline: none;
    border-color: var(--navy);
    box-shadow: 0 0 0 3px rgba(38,59,110,0.15);
}

.form-group textarea { min-height: 140px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

/* Branch toggle (contact.php) — a two-way choice presented as clickable
   cards rather than a plain dropdown, since routing the message to the
   right inbox is the first thing a sender should decide. :has() is used
   to style the checked state in pure CSS (no JS needed) — well supported
   in current evergreen browsers. */
.branch-toggle { display: flex; gap: 0.85rem; }

.branch-toggle-option {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1rem;
    border: 2px solid var(--border);
    border-radius: 6px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.branch-toggle-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.branch-toggle-option:hover { border-color: var(--navy-accent); }

.branch-toggle-option:has(input:checked) {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.form-card {
    background: var(--grey-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
    max-width: 560px;
    margin: 2rem auto 0;
}

/* FOI contacts grid */
.foi-contacts-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    margin: 1.5rem 0 2rem;
}

.foi-contact-card {
    display: block;
    transition: box-shadow 0.15s, transform 0.15s;
}

.foi-contact-card:hover {
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    transform: translateY(-3px);
}

.foi-contact-card h3 { font-size: 1.05rem; color: var(--navy); }

.foi-contact-card span {
    display: block;
    color: var(--red);
    font-weight: 700;
    word-break: break-word;
}

.foi-contact-card:hover span { color: var(--red-dark); }

.foi-contacts-name { font-weight: 700; color: var(--navy); }

.alert {
    padding: 1rem 1.25rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.alert-success { background: #e6f4ea; color: #1e7e34; border: 1px solid #b6dfc3; }
.alert-error { background: #fdedec; color: var(--red-dark); border: 1px solid #f5c6c0; }

/* Community feedback — the homepage centrepiece. Photo as a full-bleed
   background with a navy gradient overlay; content sits in a right-hand
   column so the image reads clearly on the left instead of being covered. */
.feedback-hero {
    background-image: linear-gradient(rgba(5,30,64,0.55), rgba(1,8,17,0.72)), url('../img/bigpitnew.png');
    background-size: cover;
    background-position: left top;
    color: #fff;
    padding: 4rem 0;
}

.feedback-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 2rem;
    align-items: start;
}

.feedback-hero-spacer { min-height: 1px; }

.feedback-card {
    background: #fff;
    color: var(--navy);
    border-radius: 10px;
    max-width: 680px;
    margin: 2rem auto 0;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    overflow: hidden;
}

.feedback-card-intro {
    background: rgba(5, 30, 64, 0.9);
    padding: 1.75rem 2.25rem;
}

.feedback-card-intro h2 { margin-top: 0; margin-bottom: 0.85rem; color: #fff; }

.feedback-card-intro p {
    color: #e7ecf3;
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
}

.feedback-card-intro p:last-child { margin-bottom: 0; }

.feedback-card-body { padding: 2.25rem; }

.feedback-card .btn { width: 100%; padding: 0.9rem; font-size: 1.05rem; }
.feedback-note { font-size: 0.85rem; color: var(--grey); margin-top: 0.75rem; text-align: center; }

.form-trust {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--grey);
}

.form-trust span { display: inline-flex; align-items: center; gap: 0.4rem; }
.form-trust svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Follow / social section */
.follow-section {
    background: var(--navy);
    color: #fff;
    text-align: center;
    padding: 4rem 0;
}

.follow-section h2 { margin-bottom: 0.5rem; }

.facebook-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.75rem;
    padding: 0.85rem 2rem;
    background: #fff;
    color: var(--navy);
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.facebook-btn:hover {
    background: var(--grey-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.22);
    color: var(--navy);
    text-decoration: none;
}

.facebook-btn svg { width: 22px; height: 22px; fill: var(--navy); flex-shrink: 0; }

/* Ward map hero — a map of the combined Monmouthshire + Torfaen
   constituency outline (real bounding-box aspect ratio ~0.732 width:height,
   computed from the dissolved union of all 57 wards) paired with an intro +
   postcode-search column. No ward list/grid — postcode search (which
   returns both the ward name and which council area it's in) and clicking
   the map directly are the only ways to find a ward. A soft navy-tinted
   gradient (plus a faint corner glow) replaces the flat grey-light backdrop
   used elsewhere, giving the map card and search panel some depth to sit
   on. */
.ward-hero-section {
    background: linear-gradient(135deg, #eef1f8 0%, #dde5f3 100%);
    padding: 3rem 0;
    position: relative;
    overflow: hidden;
}

.ward-hero-section::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -140px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(38,59,110,0.09) 0%, rgba(38,59,110,0) 70%);
    pointer-events: none;
}

.ward-hero-top {
    display: flex;
    align-items: stretch;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.ward-hero-map { flex: 0 0 auto; }

#ward-leaflet-map {
    height: 560px;
    width: auto;
    aspect-ratio: 0.732;
    z-index: 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(38,59,110,0.12);
    box-shadow: 0 10px 30px rgba(5,30,64,0.15);
}

.leaflet-control-zoom {
    border: none !important;
    box-shadow: 0 6px 16px rgba(5,30,64,0.2) !important;
    overflow: hidden;
}

.leaflet-control-zoom a {
    background: #fff !important;
    color: var(--navy) !important;
    font-weight: 700;
}

.leaflet-control-zoom a:hover {
    background: var(--navy) !important;
    color: #fff !important;
}

.leaflet-control-attribution {
    background: rgba(255,255,255,0.85) !important;
    border-radius: 4px 0 0 0;
}

.ward-leaflet-tooltip {
    background: var(--navy-dark);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    border: none;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

.ward-leaflet-tooltip::before { display: none; }

.ward-hero-intro {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ward-hero-intro h2 {
    font-family: "Calistoga", serif;
    font-weight: 400;
    font-size: 2.75rem;
    line-height: 1.1;
    margin: 0 0 1rem;
}

.ward-hero-intro h2 .ward-hero-highlight {
    color: var(--amber);
}

.ward-hero-intro p {
    color: var(--grey);
    font-size: 1.05rem;
    margin: 0 0 1.5rem;
    max-width: 480px;
}

.ward-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 10px;
    padding: 0.6rem 0.6rem 0.6rem 1.1rem;
    max-width: 460px;
    margin-bottom: 0.85rem;
    box-shadow: 0 8px 24px rgba(38,59,110,0.1);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ward-search:focus-within {
    border-color: var(--navy-accent);
    box-shadow: 0 0 0 3px rgba(38,59,110,0.12);
}

.ward-search svg {
    width: 20px;
    height: 20px;
    color: var(--grey);
    flex-shrink: 0;
}

.ward-search input {
    border: none;
    outline: none;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    width: 100%;
    min-width: 0;
    color: var(--navy);
}

.ward-search-btn {
    flex-shrink: 0;
    background: var(--navy);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.65rem 1.1rem;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ward-search-btn:hover { background: var(--navy-accent); }
.ward-search-btn:disabled { opacity: 0.6; cursor: default; }

.postcode-result { max-width: 460px; margin: 0 0 1rem; }

.postcode-status {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
}

.postcode-status-error { color: var(--red-dark); }
.postcode-status-success { color: var(--navy); font-size: 1.05rem; }

.postcode-highlight-ward {
    font-weight: 900;
    color: var(--amber);
}

.postcode-highlight-area {
    display: inline-block;
    font-weight: 700;
    color: var(--navy);
    background: var(--grey-light);
    padding: 0.1rem 0.6rem;
    border-radius: 999px;
    font-size: 0.9em;
}

.postcode-result .btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
}

.ward-hero-cta {
    font-weight: 700;
    font-size: 0.95rem;
}

@media (max-width: 900px) {
    .ward-hero-section { padding: 1.5rem 0 2rem; }
    .ward-hero-top { flex-direction: column; gap: 1.5rem; }
    /* Intro + postcode search before the map on mobile — the search is the
       fastest path to an answer on a small screen, so it shouldn't require
       scrolling past the map first. */
    .ward-hero-intro { order: 1; }
    .ward-hero-map { order: 2; }
    #ward-leaflet-map { height: auto; width: 100%; }
    .ward-hero-intro h2 { font-size: 2.1rem; }
    .ward-hero-intro p { max-width: none; }
    .ward-search { max-width: none; flex-wrap: wrap; }
    .postcode-result { max-width: none; }
}

/* Footer — matching restorebritain.org.uk's dark navy footer */
.site-footer {
    background: var(--footer-navy);
    color: #cdd7e5;
    padding: 3rem 0 0;
    font-size: 0.9rem;
    text-align: left;
}

.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--amber); }

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2.5rem;
}

.footer-brand-title {
    display: block;
    color: #fff;
    font-family: "Calistoga", serif;
    font-size: 1.15rem;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.footer-col p { margin: 0 0 0.5rem; }

.footer-col h4 {
    color: #fff;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 1rem;
}

.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col ul li { margin-bottom: 0.6rem; }

.footer-social { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }

.footer-bottom { text-align: center; padding-bottom: 2.5rem; }

.footer-ruler {
    width: 5rem;
    margin: 0 auto 1.5rem;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.4);
}

.footer-fineprint { color: #8fa0ba; font-size: 0.8rem; margin: 0; }

@media (max-width: 700px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-social { justify-content: center; }
}

/* Admin — named restoremat-admin-bar (not admin-bar) because WordPress
   itself adds a class literally called "admin-bar" to <body> whenever its
   own toolbar is showing; a bare .admin-bar rule would style the whole
   page body instead of just this banner. */
.restoremat-admin-bar {
    background: var(--amber);
    color: var(--navy-dark);
    text-align: center;
    padding: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
}

table.admin-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
table.admin-table th, table.admin-table td {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
}

@media (max-width: 900px) {
    .nav-toggle { display: flex; }

    nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #051E40;
        border-bottom: 2px solid #fff;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .site-header.nav-open nav { max-height: 70vh; overflow-y: auto; }

    nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 1.5rem;
    }

    nav ul li { border-top: 1px solid rgba(255, 255, 255, 0.12); }
    nav ul li:first-child { border-top: none; }

    nav a { display: block; padding: 0.9rem 0; }

    .nav-cta { display: block; margin: 0.5rem 1.5rem 1.25rem; text-align: center; }

    .paper-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .feedback-hero-grid { grid-template-columns: 1fr; }
    .feedback-hero-spacer { display: none; }
}

@media (max-width: 700px) {
    .hero { padding: 3.5rem 1.25rem; }
    .hero h1 { font-size: 2rem; }
    .form-row { grid-template-columns: 1fr; }
    .feedback-card-intro { padding: 1.5rem; }
    .feedback-card-body { padding: 1.5rem; }
}

@media (max-width: 480px) {
    .paper-cards { grid-template-columns: 1fr; }
}

/* App shell (page-app.php + header-app.php/footer-app.php) — a standalone
   app-like private area with its own minimal header instead of the full
   site nav/footer. On wider screens the whole app sits inside one bounded,
   elevated box on a dark backdrop — the same "contained widget" treatment
   as the ward map's box (#ward-leaflet-map), rather than floating loosely
   on a pale page. On an actual phone it goes full-bleed edge-to-edge, since
   that's how it behaves once added to the home screen as a standalone app. */
body.restoremat-app-shell {
    background: linear-gradient(160deg, #0a1830 0%, #051022 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 3rem 1.5rem;
}

.app-shell {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: linear-gradient(165deg, #111d38 0%, #070c18 60%, #14213f 100%);
    background-size: 200% 200%;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
    animation: rmt-ambient-drift 26s ease-in-out infinite;
    /* Height comes from the two breakpoint-specific rules below (a fixed
       844px "phone screen" box on desktop, the real viewport on mobile) —
       deliberately not set here, so this base rule can't quietly win over
       either and leave the shell growing without bound again. */
}

/* A slow, barely-there light drift across the shell — not meant to be
   consciously noticed, just to keep the dark surface from feeling static. */
@keyframes rmt-ambient-drift {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

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

.app-shell-header {
    height: 56px;
    background: rgba(5,10,20,0.7);
    backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-radius: 28px 28px 0 0;
}

.app-shell-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #fff;
    font-weight: 700;
}

.app-shell-brand:hover { color: #fff; text-decoration: none; }
.app-shell-brand img { width: 28px; height: 28px; border-radius: 6px; }

.app-shell-actions { display: flex; gap: 0.25rem; }

.app-shell-icon-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    transition: background 0.15s ease;
}

.app-shell-icon-btn:hover { background: rgba(255,255,255,0.12); }
.app-shell-icon-btn svg { width: 19px; height: 19px; }

.app-shell-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2.5rem;
}

/* Below the box's own width, drop the "widget on a dark backdrop" framing
   entirely and let the app fill the real screen — a phone viewing this at
   home-screen-app size shouldn't see a card floating inside a smaller card. */
@media (max-width: 500px) {
    /* True app-shell: the whole thing is pinned to exactly one screen and
       never itself scrolls — .app-shell-content below is the only thing
       that does, in its own internal pane between the header and tab bar.
       (100vh first as a fallback, 100dvh after for browsers that support
       it — mobile Safari's address bar show/hide otherwise clips content
       under 100vh, since that's sized to the largest possible viewport.) */
    body.restoremat-app-shell {
        display: block;
        background: #070c18;
        padding: 0;
        overflow: hidden;
        height: 100vh;
        height: 100dvh;
    }

    .app-shell {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    .app-shell-header {
        flex-shrink: 0;
        border-radius: 0;
    }
}

/* Desktop's boxed preview is meant to simulate an actual phone screen, so
   it gets the same treatment as the real mobile view just above: a fixed
   height instead of open-ended growth, with only the panel content
   scrolling inside it — never the box itself growing, never the page
   around it scrolling. The one difference from mobile is that the tab
   switcher sits at the top here (not a fixed bottom bar), so it needs its
   own flex layer to stay in place while just the panel-wrap beneath it
   scrolls. */
@media (min-width: 501px) {
    .app-shell {
        height: 844px;
        display: flex;
        flex-direction: column;
    }

    .app-shell-header { flex-shrink: 0; }

    .app-shell-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        padding: 1.5rem 1.25rem 0;
    }

    .app-tabs { flex-shrink: 0; }

    .app-panel-wrap {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2.5rem;
    }
}

.app-tabs {
    display: flex;
    gap: 0.35rem;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
    padding: 0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.07);
    width: fit-content;
    margin: 0 auto 1.5rem;
}

.app-tab {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.1rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: rgba(231,234,242,0.55);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.app-tab svg { width: 17px; height: 17px; flex-shrink: 0; }
.app-tab:hover { color: #fff; }

.app-tab.active {
    background: linear-gradient(135deg, var(--navy-accent), var(--navy));
    color: #fff;
    box-shadow: 0 4px 14px rgba(68,95,157,0.5);
}

/* flex:1/min-height:0 give this a definite height on both mobile and desktop
   (needed so the Calendar panel's height:100% chain below has something
   real to resolve against) — display:flex is otherwise neutral for
   Events/Social/FOIs, since their panel is the sole visible flex item
   (siblings are [hidden], removed from flex layout entirely) and keeps its
   default flex-basis:auto content sizing, so long lists still just overflow
   past this box and scroll via the nearest ancestor that has overflow-y:auto
   (.app-shell-content on mobile, this element itself on desktop — see the
   two breakpoint blocks above). Only the Calendar panel below opts into
   flex:1 itself to actually stretch-fill and stop scrolling. */
.app-panel-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#app-panel-calendar {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Same specificity trap as .event-form-overlay elsewhere in this file — an
   author rule setting display beats the UA [hidden] rule unless overridden
   explicitly. Without this, switching away from the Calendar tab leaves it
   visibly stacked behind whichever panel is actually meant to show. */
#app-panel-calendar[hidden] { display: none; }

#app-panel-calendar .app-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.app-panel {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.app-panel.entering {
    opacity: 0;
    transform: translateY(8px);
}

.app-card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(14px);
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid rgba(255,255,255,0.08);
}


/* Same breakpoint as the box/full-bleed switch above — the fixed-to-viewport
   bottom bar only makes sense once the app itself has gone full-bleed;
   inside the boxed desktop view it would visually break out of the box. */
@media (max-width: 500px) {
    .app-tabs {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        width: auto;
        margin: 0;
        border-radius: 0;
        justify-content: space-around;
        padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(255,255,255,0.07);
        box-shadow: none;
        z-index: 250;
    }

    .app-tab {
        flex: 1;
        flex-direction: column;
        gap: 0.2rem;
        font-size: 0.7rem;
        padding: 0.4rem 0.5rem;
        border-radius: 10px;
    }

    .app-tab.active {
        background: rgba(255,255,255,0.07);
        color: #fff;
        box-shadow: none;
    }

    .app-tab.active svg { color: #6C93E0; }

    .app-shell-content {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0; /* flex children default to min-height:auto, which
                           refuses to shrink below content size and silently
                           breaks internal scrolling — this is the fix. */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }
}

.app-placeholder {
    text-align: center;
    padding: 4rem 1.5rem;
    color: rgba(231,234,242,0.5);
}

.app-placeholder svg {
    width: 44px;
    height: 44px;
    color: #6C93E0;
    margin-bottom: 1rem;
}

.app-placeholder h3 {
    color: #F3F5FA;
    margin: 0 0 0.5rem;
}

.app-placeholder a { color: #6C93E0; }

.app-placeholder-cta {
    margin-top: 1.25rem;
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
}

.app-placeholder-cta:hover {
    background: #fff;
    color: #3A5BA0;
    box-shadow: inset 0 0 0 2px #3A5BA0;
}

/* Calendar tab (page-app.php) — FullCalendar re-themed dark/glass to match
   the app shell: most of this rides FullCalendar's own CSS custom
   properties (documented, cascade cleanly through the whole grid) rather
   than fighting its internal selectors one by one; the today-ring and
   event-dot glow below are the few things those variables can't reach. */
#branch-calendar {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    font-family: "Lato", sans-serif;
    color: #E7EAF2;

    --fc-border-color: rgba(255,255,255,0.08);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: rgba(255,255,255,0.05);
    --fc-today-bg-color: transparent;
    --fc-event-bg-color: #6C93E0;
    --fc-event-border-color: #6C93E0;
    --fc-event-text-color: #fff;
    --fc-button-text-color: #E7EAF2;
    --fc-button-bg-color: rgba(255,255,255,0.06);
    --fc-button-border-color: rgba(255,255,255,0.14);
    --fc-button-hover-bg-color: rgba(255,255,255,0.12);
    --fc-button-hover-border-color: rgba(255,255,255,0.2);
    --fc-button-active-bg-color: #3A5BA0;
    --fc-button-active-border-color: transparent;
}

#branch-calendar .fc-toolbar-title {
    font-family: "Calistoga", serif;
    font-weight: 400;
    color: #F3F5FA;
}

/* The add-event button lives right next to the month title (grouped into
   the toolbar's center chunk) rather than floating over the grid — it
   keeps the same orange-gradient accent the old FAB used. */
#branch-calendar .fc-addEvent-button {
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 0.65rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(58,91,160,0.5);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#branch-calendar .fc-addEvent-button:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(58,91,160,0.65);
}

#branch-calendar .fc-col-header-cell-cushion {
    color: rgba(231,234,242,0.4);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#branch-calendar .fc-daygrid-day-number {
    color: #E7EAF2;
    padding: 6px;
}

#branch-calendar .fc-day-other .fc-daygrid-day-number {
    color: rgba(231,234,242,0.28);
}

#branch-calendar .fc-button {
    text-transform: capitalize;
    box-shadow: none;
}

#branch-calendar .fc-button-active {
    box-shadow: 0 0 14px rgba(108,147,224,0.5) !important;
}

#branch-calendar .fc-daygrid-day:hover {
    background: rgba(255,255,255,0.04);
    cursor: pointer;
}

/* Today gets a glowing accent ring around just the date number, not a
   whole-cell wash — matches the rest of the app's "glow" language. */
#branch-calendar .fc-day-today .fc-daygrid-day-number {
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 4px;
    box-shadow: 0 0 0 1px rgba(108,147,224,0.4), 0 0 16px rgba(108,147,224,0.55);
}

/* A filled title bar truncates illegibly mid-word in a cell this narrow
   ("Restore Newport Litter Pick" -> "Restore") — a small glowing dot
   instead, same language as the today-ring above; the Events tab is
   already the place to read what a day's event actually is. */
#branch-calendar .fc-daygrid-event {
    display: block;
    width: 6px;
    height: 6px;
    margin: 2px auto 0 !important;
    padding: 0;
    border: none !important;
    border-radius: 50%;
    background: #6C93E0 !important;
    box-shadow: 0 0 8px rgba(108,147,224,0.9);
    overflow: hidden;
}

#branch-calendar .fc-daygrid-event .fc-event-time,
#branch-calendar .fc-daygrid-event .fc-event-title {
    display: none;
}

#branch-calendar .fc-toolbar {
    flex-wrap: wrap;
    gap: 0.6rem;
}

@media (max-width: 480px) {
    #branch-calendar .fc-toolbar-title { font-size: 1.1rem; }
    .app-card { padding: 1rem; overflow-x: auto; }
}

.event-form-overlay {
    position: fixed;
    inset: 0;
    background: rgba(1, 8, 17, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 1.5rem;
}

/* The [hidden] attribute and this rule have equal specificity, and author
   CSS wins ties over the UA stylesheet — without this, the overlay would
   render open by default instead of only after a date click. */
.event-form-overlay[hidden] {
    display: none;
}

.event-form-card {
    background: #16213d;
    border-radius: 16px;
    padding: 2rem;
    max-width: 420px;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    color: #E7EAF2;
}

.event-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.event-form-card h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #F3F5FA;
}

.event-form-card h3 svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #6C93E0;
}

/* Delete lives beside the heading instead of racing Save for attention in
   the button row — it's still one click away, just no longer the same
   visual weight as the primary action. */
.event-form-delete-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(231,76,60,0.14);
    border: 1px solid rgba(231,76,60,0.3);
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.event-form-delete-icon svg { width: 15px; height: 15px; }
.event-form-delete-icon:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.event-form-delete-icon:disabled { opacity: 0.5; cursor: not-allowed; }

/* Same specificity trap as .event-form-overlay above — an explicit
   [hidden] override is needed since .event-form-delete-icon sets its own
   display. */
.event-form-delete-icon[hidden] { display: none; }

/* The Date/Branch/Event/Time fields each get a leading icon inside the
   same bordered box the plain inputs used to have — the box styling moves
   here from the input itself (see the reset below) so the icon and the
   text sit on one shared background rather than the icon floating outside
   a separately-bordered field. */
.event-form-field {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background-color: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    padding: 0.65rem 0.85rem;
}

.event-form-field svg { width: 16px; height: 16px; flex-shrink: 0; color: #6C93E0; }

/* Matches the base .form-group input rule's specificity (one ancestor
   class + type + two attribute :not()s = three class-level selectors)
   so this wins the tie on source order instead of the base rule's white
   background/border/padding silently surviving underneath the icon. */
.event-form-card .form-group .event-form-field input {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #E7EAF2;
}

.event-form-card .form-group .event-form-field input::placeholder { color: rgba(231,234,242,0.35); }
.event-form-card .form-group .event-form-field input:focus { outline: none; }

/* The native date-picker glyph renders dark by default — invisible logic
   next to the app's own light calendar icon otherwise, so it's flipped to
   match instead of standing out as an unstyled leftover. */
.event-form-card .form-group .event-form-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.7) brightness(1.6);
}

.event-form-field:focus-within {
    border-color: #6C93E0;
    box-shadow: 0 0 0 3px rgba(108,147,224,0.2);
}

.event-branch-row { margin-bottom: 0.5rem; }

.event-branch-remove {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(231,234,242,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.event-branch-remove svg { width: 11px; height: 11px; color: inherit; }
.event-branch-remove:hover { background: rgba(224,85,79,0.25); color: #fff; }

.event-branch-add-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    font-family: inherit;
    font-weight: 900;
    font-size: 0.8rem;
    color: #6C93E0;
    cursor: pointer;
    padding: 0.3rem 0;
}

.event-branch-add-link svg { width: 13px; height: 13px; }
.event-branch-add-link:hover { color: #fff; }

.event-form-card .form-group textarea {
    background-color: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
    color: #E7EAF2;
}

.event-form-card .form-group textarea::placeholder {
    color: rgba(231,234,242,0.35);
}

.event-form-card .form-group textarea:focus {
    outline: none;
    border-color: #6C93E0;
    box-shadow: 0 0 0 3px rgba(108,147,224,0.2);
}

.event-form-card .btn:not(.btn-secondary):not(.btn-danger) {
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
    width: 100%;
}

.event-form-card .btn:not(.btn-secondary):not(.btn-danger):hover {
    background: #fff;
    color: #3A5BA0;
    box-shadow: inset 0 0 0 2px #3A5BA0;
}

.event-form-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.event-form-cancel-link {
    background: none;
    border: none;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    color: rgba(231,234,242,0.55);
    text-decoration: underline;
    cursor: pointer;
    padding: 0.4rem;
}

.event-form-cancel-link:hover { color: #fff; }

/* Sticks to the top of whichever ancestor is actually scrolling
   (.app-panel-wrap on desktop, .app-shell-content on mobile — .app-card
   itself never scrolls independently, so this reaches past it to the real
   scroll container). Needs something behind it so event cards scrolling
   underneath don't show through the gap between chips — a flat opaque
   color read as a mismatched "block" against the card's own translucent
   glass look, so this blurs whatever's actually behind it instead (same
   technique as .app-card itself), which blends with the gradient wherever
   it's sitting rather than needing to match its color exactly. */
.events-filter-chips {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 640px;
    margin: 0 auto 1rem;
    padding: 0.75rem 0;
    background: rgba(17,29,56,0.55);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.event-type-chip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 0.4rem 0.75rem;
    font-family: inherit;
    font-weight: 900;
    font-size: 0.75rem;
    color: rgba(231,234,242,0.55);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.event-type-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(231,234,242,0.4);
    flex-shrink: 0;
    transition: background 0.15s ease;
}

/* stroke="currentColor" on the icon inherits the chip's own text color, so
   this stays in sync with the .on state below without a separate rule. */
.event-type-chip svg { width: 14px; height: 14px; flex-shrink: 0; }

.event-type-chip.on {
    background: rgba(108,147,224,0.18);
    border-color: #6C93E0;
    color: #6C93E0;
}

.event-type-chip.on .event-type-chip-dot { background: #6C93E0; }

.event-list { list-style: none; padding: 0; margin: 0; max-width: 640px; }

/* Same specificity trap as .event-form-overlay elsewhere in this file — an
   author rule setting display beats the UA [hidden] rule unless overridden
   explicitly. */
.event-list-item[hidden] { display: none; }

.event-list-item {
    position: relative;
    display: flex;
    gap: 0.9rem;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
}

.event-edit-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.1);
    color: #F3F5FA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.event-edit-btn svg { width: 15px; height: 15px; }
.event-edit-btn:hover { background: rgba(108,147,224,0.22); border-color: rgba(108,147,224,0.4); color: #6C93E0; }

/* Plays once on the card (or the Up Next strip) that a save/edit/delete
   just touched, right after renderEventsList()/renderUpNext() rebuild the
   DOM — confirms the change landed without relying on the user noticing
   the text itself changed. */
@keyframes rmt-saved-flash {
    0% {
        box-shadow: 0 0 0 2px rgba(108,147,224,0.55), 0 0 28px rgba(108,147,224,0.3);
        background-color: rgba(108,147,224,0.1);
        transform: scale(1.015);
    }
    100% {
        box-shadow: none;
        background-color: rgba(255,255,255,0.04);
        transform: scale(1);
    }
}

.just-saved { animation: rmt-saved-flash 1.6s ease-out; }

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

/* Colored by restoremat_branch_color_map() — every distinct branch in use,
   sorted and spread across the palette, so any branch (not just today's
   two) gets a consistent, always-distinguishable color. */
.event-branch-stripe {
    width: 4px;
    border-radius: 3px;
    flex-shrink: 0;
}

.event-list-body { flex: 1; min-width: 0; }

.event-list-item strong { color: #F3F5FA; font-size: 1.1rem; }

.event-list-date-badge {
    display: inline-block;
    background: linear-gradient(135deg, #445F9D, #263B6E);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.event-list-heading {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.event-list-time {
    color: #6C93E0;
    font-weight: 700;
    font-size: 0.9rem;
}

.event-list-branch {
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 2px;
}

.event-list-item p { margin: 0.5rem 0 0; color: rgba(231,234,242,0.55); }

/* Social tab — a single continuous, newest-first feed merging every
   configured Facebook Page's posts (fetched server-side via the Graph API,
   so this is plain rendered HTML, not a client-side embed). */
.fb-feed {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 560px;
    margin: 0 auto;
}

.fb-feed-post {
    position: relative;
    display: block;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 1rem;
    color: #E7EAF2;
    text-decoration: none;
}

/* Same specificity trap as .event-form-overlay elsewhere in this file — an
   author rule setting display beats the UA [hidden] rule unless overridden
   explicitly. */
.fb-feed-post[hidden] { display: none; }

/* Sits absolute in the card's top-right corner, clear of the header's
   name/time so a long branch name never runs into it. */
.social-plat-pill {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.social-plat-pill-facebook { background: rgba(24,119,242,0.22); color: #8FB8FF; }
.social-plat-pill-x { background: rgba(255,255,255,0.14); color: #E7EAF2; }

.social-filter-tabs {
    display: flex;
    gap: 0.3rem;
    background: rgba(255,255,255,0.05);
    border-radius: 999px;
    padding: 0.3rem;
    max-width: 560px;
    margin: 0 auto 1.25rem;
}

.social-filter-tab {
    flex: 1;
    background: none;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 0;
    font-family: inherit;
    font-weight: 900;
    font-size: 0.8rem;
    color: rgba(231,234,242,0.55);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.social-filter-tab.active {
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
    color: #fff;
}

.fb-feed-post-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Clears the absolutely-positioned .social-plat-pill in the corner —
       without this a long branch name (e.g. "Restore Merthyr Tydfil") runs
       straight under it, since absolute positioning takes the pill out of
       flow and won't push flex siblings out of the way on its own. */
    padding-right: 80px;
    margin-bottom: 0.75rem;
}

.fb-feed-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Wraps the avatar so the platform badge below can sit pinned to its
   bottom-right corner regardless of whether the avatar is a real photo or
   the letter fallback. */
.social-avatar-wrap { position: relative; flex-shrink: 0; }

.social-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 1rem;
}

.social-platform-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 900;
    color: #fff;
    border: 2px solid #0d1730;
}

.social-platform-facebook { background: #1877F2; font-family: Georgia, serif; }
.social-platform-x { background: #000; }

.fb-feed-time {
    display: block;
    color: rgba(231,234,242,0.5);
    font-size: 0.85rem;
}

.fb-feed-message {
    margin: 0 0 0.75rem;
    white-space: pre-wrap;
}

.fb-feed-image {
    width: 100%;
    border-radius: 6px;
    display: block;
}

.fb-feed-stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.fb-feed-stats span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(231,234,242,0.6);
}

.fb-feed-stats svg { width: 14px; height: 14px; }

.event-directions-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #6C93E0;
}

.event-directions-link svg { width: 14px; height: 14px; }
.event-directions-link:hover { color: #fff; text-decoration: none; }

/* FOIs tab — a drop zone above a document portal grouped by category. */
.foi-upload-zone {
    border: 2px dashed rgba(255,255,255,0.14);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    color: rgba(231,234,242,0.6);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.foi-upload-zone svg { width: 30px; height: 30px; margin-bottom: 0.75rem; color: #6C93E0; }

.foi-upload-zone.drag-over {
    border-color: #6C93E0;
    background: rgba(108,147,224,0.06);
}

.foi-upload-prompt { margin: 0; font-size: 0.95rem; }
.foi-upload-browse { color: #6C93E0; font-weight: 700; text-decoration: underline; }

.foi-selected-filename {
    margin: 0.75rem 0 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #F3F5FA;
}

.foi-upload-fields {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    cursor: default;
    text-align: left;
}

/* Same specificity trap as .event-form-overlay elsewhere in this file — an
   author rule setting display beats the UA [hidden] rule unless overridden
   explicitly. */
.foi-upload-fields[hidden] { display: none; }

.foi-upload-fields input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    background-color: rgba(255,255,255,0.06);
    color: #E7EAF2;
}

.foi-upload-fields input::placeholder { color: rgba(231,234,242,0.35); }

.foi-upload-fields input:focus {
    outline: none;
    border-color: #6C93E0;
    box-shadow: 0 0 0 3px rgba(108,147,224,0.2);
}

.foi-upload-fields .btn {
    background: linear-gradient(135deg, #6C93E0, #3A5BA0);
    align-self: flex-start;
}

.foi-upload-fields .btn:hover {
    background: #fff;
    color: #3A5BA0;
    box-shadow: inset 0 0 0 2px #3A5BA0;
}

.foi-category-group { margin-top: 1rem; }

.foi-category-heading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: "Calistoga", serif;
    font-weight: 400;
    font-size: 1.15rem;
    color: #F3F5FA;
    margin: 0 0 1rem;
}

.foi-category-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.foi-category-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.foi-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
}

.foi-doc-card {
    position: relative;
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1rem 0.75rem;
}

.foi-doc-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: inherit;
    text-decoration: none;
    gap: 0.35rem;
}

.foi-doc-link:hover { color: inherit; text-decoration: none; }
.foi-doc-link:hover .foi-doc-title { color: #6C93E0; }

.foi-doc-icon { width: 30px; height: 30px; color: #6C93E0; flex-shrink: 0; }

.foi-doc-title {
    color: #F3F5FA;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.foi-doc-date { color: rgba(231,234,242,0.5); font-size: 0.72rem; }

.foi-delete-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.1);
    color: #F3F5FA;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
}

.foi-delete-btn svg { width: 12px; height: 12px; }
.foi-delete-btn:hover { background: rgba(58,91,160,0.3); border-color: rgba(58,91,160,0.5); color: #fff; }