/* =============================================================================
   Adenta Central SDA Church — shared stylesheet
   -----------------------------------------------------------------------------
   This replaces ~5,700 lines of inline CSS that were duplicated across 20 PHP
   files. Change a colour, the header or the footer here and every page follows.

   Contents
     1. Design tokens
     2. Base / reset
     3. Accessibility utilities
     4. Global brand sidebar
     5. Top bar
     6. Site header, primary nav, dropdowns
     7. Mobile drawer
     8. Hero
     9. Layout, cards, sidebar cards
    10. Buttons and links
    11. Footer
    12. Page-specific components (events, gallery, publications, leadership…)
    13. Responsive
   ========================================================================== */

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

:root {
    --navy: #0a2158;
    --blue: #1a4fa0;
    --blue-light: #2e6fd4;
    --gold: #c9a227;
    --gold-light: #f0c84a;
    --cream: #fdf8ef;
    --text: #1c1c2e;
    --text-muted: #5a607a;
    --white: #ffffff;
    --border: rgba(10,33,88,0.1);
    --shadow: 0 4px 24px rgba(10,33,88,0.10);
    --radius: 14px;
}

html { scroll-behavior: smooth; }

/* Only pages that actually render the brand sidebar reserve room for it.
   The sign-in and sign-up screens do not, and previously inherited a blank
   strip that pushed them off-screen on a phone. */
body.has-brand-sidebar { padding-right: 72px; }

body {
    font-family: 'Lato', sans-serif;
    color: var(--text);
    background: #f5f6fa;
    overflow-x: hidden;
    /* padding-right for the brand sidebar is applied via .has-brand-sidebar */
}

/* ======= GC BRAND SIDEBAR ======= */
.gc-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 72px;
    height: 100vh;
    background: linear-gradient(180deg, #1a4fa0 0%, #0a2158 100%);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 18px;
    gap: 0;
}

.gc-sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    padding: 0 8px;
}

.gc-sidebar-logo img {
    width: 48px;
    height: auto;
    display: block;
    transition: transform 0.3s;
}

.gc-sidebar-logo:hover img { transform: scale(1.08); }

.gc-sidebar-wordmark {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    color: rgba(255,255,255,0.55);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    text-decoration: none;
    margin-top: 14px;
    line-height: 1;
}

.gc-sidebar-divider {
    width: 32px;
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: 16px 0;
}

/* ======= TOP BAR ======= */
.top-bar {
    background: var(--navy);
    color: rgba(255,255,255,0.75);
    font-size: 0.8rem;
    padding: 0.45rem 0;
    letter-spacing: 0.03em;
    /* stays within the non-sidebar area via body padding-right */
}
.top-bar .inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.top-bar a {
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
}
.top-bar a:hover { color: var(--gold-light); }
.top-bar .social-links { display: flex; gap: 1.2rem; }
.top-bar .contact-links { display: flex; gap: 1.5rem; }

/* ======= MAIN HEADER ======= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--white);
    box-shadow: 0 2px 20px rgba(10,33,88,0.10);
    transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: 0 4px 30px rgba(10,33,88,0.18); }

.header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    gap: 1.5rem;
}

/* Logo */
.logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    flex-shrink: 0;
}
.logo-badge {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--navy), var(--blue));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px;
    transition: transform 0.3s;
}
.logo-wrap:hover .logo-badge { transform: scale(1.06); }
.logo-badge img { width: 100%; height: 100%; object-fit: contain; }
.logo-text-wrap { line-height: 1.2; }
.logo-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy);
}
.logo-sub {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
}

/* Primary Nav */
.primary-nav { display: flex; align-items: center; gap: 0.25rem; list-style: none; }
.primary-nav > li { position: relative; }
.primary-nav > li > a {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.primary-nav > li > a .chevron { font-size: 0.6rem; opacity: 0.5; transition: transform 0.2s; }
.primary-nav > li:hover > a { background: var(--cream); color: var(--blue); }
.primary-nav > li:hover > a .chevron { transform: rotate(180deg); }

/* Dropdown */
.dropdown-panel {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 185px;
    padding: 10px 0.5rem 0.5rem;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.2s, transform 0.2s;
    z-index: 200;
}
.primary-nav > li:hover .dropdown-panel,
.primary-nav > li:focus-within .dropdown-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.dropdown-panel a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.84rem;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.dropdown-panel a:hover { background: var(--cream); color: var(--blue); }
.dropdown-panel a i { width: 14px; font-size: 0.75rem; color: var(--gold); }

/* CTA Button */
.header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--navy);
    font-size: 0.84rem;
    font-weight: 700;
    padding: 0.55rem 1.25rem;
    border-radius: 50px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 3px 14px rgba(201,162,39,0.35);
    flex-shrink: 0;
}
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(201,162,39,0.45); }

/* Hamburger */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    flex-direction: column;
    gap: 5px;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--navy);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ======= MOBILE DRAWER ======= */
.mobile-drawer {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 100vw);
    background: var(--white);
    box-shadow: -8px 0 40px rgba(10,33,88,0.18);
    z-index: 1000;
    padding: 1.5rem;
    overflow-y: auto;
    transform: translateX(100%);
    /* `visibility: hidden` does two jobs here. A position:fixed element parked
       off-screen is NOT clipped by body{overflow-x:hidden}, so the closed
       drawer was adding a sideways scroll on phones. And while merely
       translated away it stayed in the tab order, so keyboard users tabbed
       through an invisible menu. Hidden visibility fixes both, and is delayed
       until the slide-out finishes so the animation still plays. */
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.35s;
}
.mobile-drawer.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
.drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,33,88,0.35);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.35s;
}
.drawer-overlay.open { opacity: 1; }

.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.drawer-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0.25rem;
}
.drawer-nav { list-style: none; }
.drawer-nav li > a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.2s;
}
.drawer-nav li > a i { color: var(--gold); width: 18px; text-align: center; }
.drawer-nav li > a:hover { background: var(--cream); color: var(--blue); }
.drawer-divider { height: 1px; background: var(--border); margin: 0.5rem 0; }

.drawer-social {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.drawer-social a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--cream);
    display: flex; align-items: center; justify-content: center;
    color: var(--navy);
    text-decoration: none;
    font-size: 0.85rem;
    transition: background 0.2s;
}
.drawer-social a:hover { background: var(--gold); color: var(--navy); }

/* ======= HERO ======= */
.hero {
    position: relative;
    height: 100vh;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background: url('../../pic/ch1.jpg') center/cover no-repeat;
}
.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(10,33,88,0.82) 0%, rgba(26,79,160,0.60) 100%);
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 740px;
    padding: 2rem;
    animation: heroUp 0.9s ease-out;
}
@keyframes heroUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(201,162,39,0.22);
    border: 1px solid rgba(201,162,39,0.5);
    color: var(--gold-light);
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    margin-bottom: 1.4rem;
}
.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.2rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1rem;
}
.hero h1 em { color: var(--gold-light); font-style: normal; }
.hero p {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    opacity: 0.88;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 2rem;
}
.hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--navy);
    font-weight: 700;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 18px rgba(201,162,39,0.4);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(201,162,39,0.5); }
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid rgba(255,255,255,0.5);
    color: var(--white);
    font-weight: 700;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.95rem;
    transition: border-color 0.2s, background 0.2s;
}
.btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); }

/* Schedule strip */
.schedule-strip {
    background: var(--navy);
    color: var(--white);
    padding: 0.9rem 0;
}
.schedule-strip .inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.strip-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
}
.strip-item i { color: var(--gold-light); font-size: 0.9rem; }
.strip-item strong { font-weight: 700; }
.strip-item span { opacity: 0.8; }

/* ======= MAIN CONTENT ======= */
.page-body {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 2rem;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: start;
}

/* Welcome Banner */
.welcome-banner {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.5rem;
    margin-bottom: 2rem;
    border-left: 5px solid var(--gold);
    box-shadow: var(--shadow);
    text-align: center;
}
.welcome-banner h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--navy);
    margin-bottom: 0.75rem;
}
.welcome-banner p { color: var(--text-muted); line-height: 1.8; font-size: 0.97rem; }

/* Cards */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
    transition: transform 0.25s, box-shadow 0.25s;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(10,33,88,0.14); }
.card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
.card-body { padding: 1.5rem; }
.card-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
}
.card-body h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--navy);
    margin-bottom: 0.5rem;
}
.card-body p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin-bottom: 1rem; }
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--blue);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.2s;
}
.link-arrow:hover { gap: 0.6rem; }

/* ======= SIDEBAR ======= */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }

.sidebar-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.sidebar-card-header {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sidebar-card-header.navy { background: var(--navy); }
.sidebar-card-header.gold { background: linear-gradient(135deg, var(--gold), var(--gold-light)); }
.sidebar-card-header.green { background: #1a6640; }
.sidebar-card-header i { font-size: 0.9rem; }
.sidebar-card-header.navy i,
.sidebar-card-header.navy h3 { color: var(--white); }
.sidebar-card-header.gold i,
.sidebar-card-header.gold h3 { color: var(--navy); }
.sidebar-card-header.green i,
.sidebar-card-header.green h3 { color: var(--white); }
.sidebar-card-header h3 { font-size: 0.92rem; font-weight: 700; letter-spacing: 0.04em; }
.sidebar-card-body { padding: 1.25rem; }
.sidebar-card-body p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.7; }

.schedule-list { list-style: none; }
.schedule-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.87rem;
    gap: 0.5rem;
}
.schedule-list li:last-child { border-bottom: none; }
.schedule-list .service-name { font-weight: 700; color: var(--navy); }
.schedule-list .service-time { color: var(--gold); font-weight: 700; font-size: 0.82rem; }

.sidebar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
    color: var(--blue);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}
.sidebar-link:hover { color: var(--navy); }

.announcement-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.86rem;
}
.announcement-item:last-child { border-bottom: none; }
.announcement-item .ann-date {
    font-size: 0.72rem;
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.2rem;
}
.announcement-item p { color: var(--text-muted); line-height: 1.5; }

/* ======= FOOTER ======= */
.site-footer {
    background: var(--navy);
    color: rgba(255,255,255,0.85);
    margin-top: 3rem;
}
.footer-main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 3rem 2rem;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
}
.footer-brand .logo-badge { margin-bottom: 1rem; }
.footer-brand p { font-size: 0.87rem; line-height: 1.7; opacity: 0.8; margin-bottom: 1rem; }
.footer-social { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.footer-social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.75);
    font-size: 0.82rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.footer-social a:hover { background: var(--gold); color: var(--navy); }
.footer-col h4 {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 1rem;
    font-weight: 700;
}
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.6rem; }
.footer-col ul li a {
    color: rgba(255,255,255,0.72);
    font-size: 0.87rem;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-col ul li a:hover { color: var(--gold-light); }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
    padding: 1.2rem 2rem;
    font-size: 0.8rem;
    opacity: 0.65;
}

/* ======= RESPONSIVE ======= */
@media (max-width: 960px) {
    .page-body { grid-template-columns: 1fr; }
    .sidebar { order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .footer-main { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
    body.has-brand-sidebar { padding-right: 56px; }
    .gc-sidebar { width: 56px; }
    .gc-sidebar-logo img { width: 36px; }
    .gc-sidebar-wordmark { display: none; }
    .primary-nav, .header-cta { display: none; }
    .hamburger { display: flex; }
    .mobile-drawer { display: block; }
    .drawer-overlay { display: block; }
    .top-bar .contact-links { display: none; }
    .footer-main { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 480px) {
    body.has-brand-sidebar { padding-right: 48px; }
    .gc-sidebar { width: 48px; }
    .gc-sidebar-logo img { width: 28px; }
    .hero h1 { font-size: 2rem; }
    .header-inner { padding: 0 1rem; }
    .page-body { padding: 2rem 1rem; }
    .schedule-strip .inner { gap: 1rem; flex-direction: column; align-items: flex-start; }
}


/* =============================================================================
   ACCESSIBILITY AND POLISH
   Added on top of the original design — these were missing site-wide.
   ========================================================================== */

/* --- Skip link: lets keyboard users jump past the nav ---------------------- */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 2000;
    background: var(--navy);
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 var(--radius) var(--radius);
    font-weight: 700;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* --- Visible focus on every interactive element ---------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Inside the dark header/footer the gold outline needs a lighter partner. */
.top-bar a:focus-visible,
.site-footer a:focus-visible,
.gc-sidebar a:focus-visible,
.hero a:focus-visible {
    outline-color: var(--gold-light);
}

/* --- Screen-reader-only text ------------------------------------------------ */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Keyboard-operable dropdowns -------------------------------------------
   The nav dropdowns were hover-only, so keyboard and touch users could not
   reach Leadership, Sermons, Bible Studies, Communication or the Gallery.
   They now open on focus and on click (JS sets aria-expanded).            */
.primary-nav > li > a[aria-expanded="true"] {
    background: var(--cream);
    color: var(--blue);
}
.primary-nav > li > a[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.primary-nav > li > a[aria-expanded="true"] + .dropdown-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* --- Respect reduced-motion preferences ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- The hidden attribute must always win -----------------------------------
   `.drawer-overlay { display: block }` in the mobile media query overrode the
   browser's default styling for [hidden], leaving an invisible full-screen
   overlay swallowing every tap on a phone. An author-level rule is needed to
   beat an author-level rule.                                                */
[hidden] { display: none !important; }

/* --- Images never overflow their container ---------------------------------- */
img { max-width: 100%; height: auto; }

/* --- Consistent empty states ------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: var(--white);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
}
.empty-state i {
    font-size: 2.25rem;
    color: var(--gold);
    opacity: 0.55;
    margin-bottom: 1rem;
    display: block;
}
.empty-state h3 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--navy);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}
.empty-state p { font-size: 0.93rem; line-height: 1.7; max-width: 30rem; margin: 0 auto; }

/* --- Flash / alert messages ---------------------------------------------------- */
.site-alert {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.9rem 1.15rem;
    border-radius: var(--radius);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}
.site-alert i { margin-top: 0.15rem; flex-shrink: 0; }
.site-alert.success { background: #e7f4ea; color: #146c2e; border-color: #bfe0c8; }
.site-alert.error   { background: #fdecea; color: #b3261e; border-color: #f5c6c2; }
.site-alert.info    { background: #e8f0fe; color: #174ea6; border-color: #c3d6f7; }

/* --- Lazy-loaded images fade in --------------------------------------------- */
img[loading="lazy"] { background: #eef0f6; }

/* --- Print ------------------------------------------------------------------ */
@media print {
    .gc-sidebar, .top-bar, .site-header, .mobile-drawer,
    .drawer-overlay, .site-footer, .hamburger, .skip-link { display: none !important; }
    body { padding-right: 0; background: #fff; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}