/* ==========================================================================
   North Queens Nursing Home - Custom Stylesheet
   Brand Colors:
   - Primary: Earthy Brown (#8B5E3C / #724c30)
   - Secondary: Caring Blue (#1B6B93 / #134e6b)
   - Accent: Warm Gold (#D4A373) / Soft Sage (#588157)
   ========================================================================== */

:root {
    --primary-brown: #8B5E3C;
    --primary-brown-dark: #6F4526;
    --primary-brown-light: #B0825E;
    --secondary-blue: #1B6B93;
    --secondary-blue-dark: #124B68;
    --secondary-blue-light: #EBF4F8;
    --accent-cream: #FAF7F2;
    --accent-gold: #D4A373;
    --text-dark: #2C302E;
    --bg-card: #FFFFFF;
    --border-color: rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.12);
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-bs-theme="dark"] {
    --primary-brown: #A87650;
    --primary-brown-dark: #8B5E3C;
    --primary-brown-light: #C99872;
    --secondary-blue: #3E97C4;
    --secondary-blue-dark: #2B7EA8;
    --secondary-blue-light: #1A2833;
    --accent-cream: #181E24;
    --text-dark: #E4E7EB;
    --bg-card: #212932;
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.5);
}

.fa-arrow-up:before {
    position: relative;
    right: 5px;
}

/* Base Elements */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--text-dark);
    background-color: var(--bs-body-bg);
    overflow-x: hidden;
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

a {
    color: var(--secondary-blue);
    text-decoration: none;
    transition: var(--transition-smooth);
}

a:hover {
    color: var(--primary-brown);
}

/* Top Notification / Contact Bar */
.top-bar {
    background-color: var(--secondary-blue-dark);
    color: #ffffff;
    font-size: 0.88rem;
}

.top-bar a {
    color: #e0f2fe;
}

.top-bar a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Sticky Main Navigation */
.navbar-custom {
    background-color: var(--bg-card);
    border-bottom: 2px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.navbar-brand img {
    height: 52px;
    width: auto;
    object-fit: contain;
}

.nav-link {
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.6rem 0.85rem !important;
    color: var(--text-dark) !important;
    border-radius: 6px;
    transition: var(--transition-smooth);
}

.nav-link:hover, .nav-link:focus, .nav-link.active {
    color: var(--secondary-blue) !important;
    background-color: var(--secondary-blue-light);
}

/* Dropdown Menus */
.dropdown-menu {
    border: none;
    box-shadow: var(--shadow-lg);
    border-radius: 10px;
    padding: 0.75rem;
    background-color: var(--bg-card);
}

.dropdown-header {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-brown);
    padding: 0.4rem 0.8rem 0.2rem;
}

.dropdown-item {
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 6px;
    padding: 0.45rem 0.8rem;
    transition: var(--transition-smooth);
}

.dropdown-item:hover {
    background-color: var(--secondary-blue-light);
    color: var(--secondary-blue);
    transform: translateX(4px);
}

/* Buttons */
.btn-primary-custom {
    background-color: var(--primary-brown);
    border-color: var(--primary-brown);
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.6rem 1.4rem;
    transition: var(--transition-smooth);
}

.btn-primary-custom:hover {
    background-color: var(--primary-brown-dark);
    border-color: var(--primary-brown-dark);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.btn-secondary-custom {
    background-color: var(--secondary-blue);
    border-color: var(--secondary-blue);
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    padding: 0.6rem 1.4rem;
    transition: var(--transition-smooth);
}

.btn-secondary-custom:hover {
    background-color: var(--secondary-blue-dark);
    border-color: var(--secondary-blue-dark);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Hero Section */
.hero-slider {
    position: relative;
    border-bottom: 4px solid var(--primary-brown);
}

.hero-slider .carousel-item {
    height: 520px;
    background-color: #000;
}

.hero-slider .carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    opacity: 0.78;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.65) 100%);
    z-index: 1;
}

.hero-content {
    position: absolute;
    bottom: 12%;
    left: 0;
    right: 0;
    z-index: 2;
    color: #ffffff;
}

.hero-content h1, .hero-content p {
    text-shadow: 1px 1px 0px #000000;
}

.subpage-hero {
    background: linear-gradient(135deg, var(--secondary-blue-dark) 0%, #198758 100%);
    padding: 3.5rem 0;
    color: #ffffff;
    border-bottom: 3px solid var(--accent-gold);
}

/* Quick Action / Feature Cards (Caring.com inspired) */
.feature-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.8rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-brown), var(--secondary-blue));
    opacity: 0;
    transition: var(--transition-smooth);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--secondary-blue);
}

.feature-card:hover::before {
    opacity: 1;
}

.feature-icon-wrapper {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    background-color: var(--secondary-blue-light);
    color: var(--secondary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    transition: var(--transition-smooth);
}

.feature-card:hover .feature-icon-wrapper {
    background-color: var(--primary-brown);
    color: #ffffff;
}

/* Interactive Photo Mosaic / Gallery */
.gallery-img-container {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.gallery-img-container img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.gallery-img-container:hover img {
    transform: scale(1.05);
}

/* Floating Scroll Animation */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Modern Footer */
.footer-custom {
    background-color: #1a2228;
    color: #cfd8dc;
    font-size: 0.92rem;
    border-top: 4px solid var(--primary-brown);
}

.footer-custom h5 {
    color: #ffffff;
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
    position: relative;
    padding-bottom: 0.5rem;
}

.footer-custom h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background-color: var(--accent-gold);
}

.footer-links a {
    color: #b0bec5;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.footer-links a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.social-pill {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    transition: var(--transition-smooth);
}

.social-pill:hover {
    background-color: #1877F2; /* Facebook brand color */
    color: #ffffff;
    transform: translateY(-3px);
}

/* Back to Top Floating Button */
#btn-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: none;
    z-index: 99;
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

/* ==========================================================================
   MOBILE HORIZONTAL-OVERFLOW FIX
   --------------------------------------------------------------------------
   Symptom: a small (12px) horizontal scroll on phones.

   Cause: Bootstrap's `.row.g-5` sets `--bs-gutter-x: 3rem`, which gives the
   row -24px side margins, while `.container` only carries 12px of side
   padding (its own `--bs-gutter-x: 1.5rem` halved). Below 576px the
   container is full-bleed, so every `g-5` row hangs 12px past the viewport
   on each side and the right-hand overhang becomes scrollable width.

   `body { overflow-x: hidden }` alone does NOT solve this: `hidden` still
   makes the viewport a scroll container, so the page can be panned by touch
   even though the scrollbar is invisible. (The 404 page is unaffected
   because it uses `overflow-x: clip` and has no `.row.g-5`.)
   ========================================================================== */

@media (max-width: 575.98px) {
    /* Cap only the HORIZONTAL gutter so the row's negative margins can never
       exceed the container's padding. `--bs-gutter-y` is deliberately left
       alone, so the vertical spacing between stacked columns is unchanged.
       `.row.g-5` (0,2,0) outranks Bootstrap's `.g-5` (0,1,0). */
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* Belt-and-braces guard. Unlike `hidden`, `clip` does not create a scroll
   container, so there is nothing left to pan horizontally - and it does not
   break `position: sticky` on descendants the way `overflow: hidden` does.
   The `hidden` line above it is the fallback for Safari < 16. */
html,
body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100%;
}

/* ==========================================================================
   V1 SUBPAGES (About, Services, Quality Care, Events, Volunteer, etc.)
   --------------------------------------------------------------------------
   Shared by every page built on includes/page-start.php + page-end.php.
   ========================================================================== */

/* Utility referenced by contact.php + sidebar card headers */
.bg-secondary-blue { background-color: var(--secondary-blue) !important; }
.text-secondary-blue { color: var(--secondary-blue) !important; }
.text-brown { color: var(--primary-brown) !important; }

/* Banner with an optional photo behind the brand gradient */
.subpage-hero.has-image {
    background:
        linear-gradient(135deg, rgba(18, 75, 104, 0.93) 0%, rgba(25, 135, 88, 0.80) 100%),
        var(--hero-img) center / cover no-repeat;
    padding: 4.5rem 0;
}
.subpage-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.5); }

/* Body copy */
.page-content { font-size: 1.05rem; line-height: 1.75; }
.page-content > p,
.page-content .content-block > p { color: var(--bs-secondary-color); }
.page-content h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; }
.page-content h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.75rem; }
.page-content .lead { color: var(--bs-body-color); font-weight: 500; }

.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--secondary-blue);
    margin-bottom: 0.4rem;
}

.content-block {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 1.75rem;
}
@media (max-width: 575.98px) { .content-block { padding: 1.4rem; } }

.content-figure {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.75rem;
}
.content-figure img { width: 100%; height: 340px; object-fit: cover; display: block; }
.content-figure figcaption {
    background-color: var(--bg-card);
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    padding: 0.6rem 1rem;
}

/* Icon check list */
.check-list { list-style: none; padding-left: 0; margin-bottom: 0; }
.check-list li {
    position: relative;
    padding: 0.4rem 0 0.4rem 2rem;
    color: var(--bs-body-color);
}
.check-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: var(--secondary-blue-light);
    color: var(--secondary-blue);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) { .check-list.two-col { columns: 2; column-gap: 2rem; } .check-list.two-col li { break-inside: avoid; } }

/* Small icon tiles used for values / services grids */
.icon-tile {
    height: 100%;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.4rem;
    transition: var(--transition-smooth);
}
.icon-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tile-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-color: var(--secondary-blue-light);
    color: var(--secondary-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 0.9rem;
}
.icon-tile h3, .icon-tile h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.4rem; }
.icon-tile p { font-size: 0.92rem; color: var(--bs-secondary-color); margin-bottom: 0; }
a.icon-tile { display: block; color: inherit; text-decoration: none; }
a.icon-tile:hover h3, a.icon-tile:hover h4 { color: var(--secondary-blue); }

/* Key facts */
.fact-tile {
    background-color: var(--secondary-blue-light);
    border-radius: 14px;
    padding: 1.2rem;
    text-align: center;
    height: 100%;
}
.fact-tile .fact-num { display: block; font-size: 2rem; font-weight: 800; color: var(--secondary-blue); line-height: 1.1; }
.fact-tile .fact-label { font-size: 0.85rem; color: var(--bs-secondary-color); font-weight: 600; }

/* Call-out box */
.callout {
    border-left: 5px solid var(--accent-gold);
    background-color: var(--accent-cream);
    border-radius: 0 14px 14px 0;
    padding: 1.3rem 1.5rem;
    margin-bottom: 1.75rem;
}
.callout.callout-blue { border-left-color: var(--secondary-blue); background-color: var(--secondary-blue-light); }
.callout h3, .callout h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.4rem; }
.callout p:last-child { margin-bottom: 0; }

/* Numbered steps */
.step-list { list-style: none; padding: 0; counter-reset: step; margin: 0; }
.step-list li {
    counter-increment: step;
    position: relative;
    padding: 0 0 1.4rem 3.4rem;
}
.step-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: var(--primary-brown);
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-list li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 1.18rem;
    top: 2.6rem;
    bottom: 0.2rem;
    width: 2px;
    background-color: var(--border-color);
}
.step-list h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.25rem; }
.step-list p { color: var(--bs-secondary-color); margin-bottom: 0; }

/* Download / document rows */
.doc-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background-color: var(--bg-card);
    color: var(--bs-body-color);
    text-decoration: none;
    transition: var(--transition-smooth);
}
.doc-link:hover { border-color: var(--secondary-blue); color: var(--secondary-blue); transform: translateX(4px); }
.doc-link .doc-icon { font-size: 1.5rem; color: var(--primary-brown); width: 1.8rem; text-align: center; }
.doc-link .doc-meta { display: block; font-size: 0.8rem; color: var(--bs-secondary-color); }
.doc-link .fa-arrow-right, .doc-link .fa-arrow-up-right-from-square { margin-left: auto; opacity: 0.6; }

/* Sidebar */
@media (min-width: 992px) {
    .subpage-sidebar { position: sticky; top: 110px; }
}
.sidebar-nav .list-group-item {
    border-color: var(--border-color);
    padding: 0.75rem 1.1rem;
    font-weight: 500;
    font-size: 0.95rem;
    background-color: var(--bg-card);
    color: var(--bs-body-color);
}
.sidebar-nav .list-group-item i { color: var(--secondary-blue); }
.sidebar-nav .list-group-item:hover { background-color: var(--secondary-blue-light); color: var(--secondary-blue); }
.sidebar-nav .list-group-item.active {
    background-color: var(--secondary-blue-light);
    color: var(--secondary-blue);
    font-weight: 700;
    border-left: 4px solid var(--secondary-blue);
}
.sidebar-contact {
    background: linear-gradient(135deg, var(--primary-brown-dark) 0%, var(--primary-brown) 100%);
    color: #fff;
}

/* Main menu current-page state */
.navbar-custom .nav-link.active { color: var(--secondary-blue) !important; }
.dropdown-item.active,
.dropdown-item:active { background-color: var(--secondary-blue); color: #fff; }
.dropdown-item.active i { color: #fff !important; }

/* Clothing list cards (What to Bring) */
.pack-list { list-style: none; padding: 0; margin: 0; }
.pack-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--border-color);
}
.pack-list li:last-child { border-bottom: 0; }
.pack-list .qty {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--primary-brown);
    min-width: 2.2rem;
    text-align: right;
}

/* Sitemap */
.sitemap-group h2 { font-size: 1.2rem; font-weight: 700; }
.sitemap-group ul { list-style: none; padding: 0; margin: 0; }
.sitemap-group li a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0;
    color: var(--bs-body-color);
    text-decoration: none;
}
.sitemap-group li a:hover { color: var(--secondary-blue); }
.sitemap-group li i { color: var(--secondary-blue); width: 1.2rem; text-align: center; }

/* Events calendar */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.cal-toolbar h2 { margin: 0; font-size: 1.6rem; font-weight: 700; }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--bg-card);
}
.cal-grid .cal-dow {
    background-color: var(--secondary-blue);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    text-align: center;
    padding: 0.6rem 0.25rem;
}
.cal-grid .cal-day {
    min-height: 118px;
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    padding: 0.4rem;
}
.cal-grid .cal-day:nth-child(7n + 1) { border-left: 0; }
.cal-grid .cal-day.is-empty { background-color: var(--bs-tertiary-bg); }
.cal-grid .cal-day.is-today { background-color: var(--secondary-blue-light); box-shadow: inset 0 0 0 2px var(--secondary-blue); }
.cal-day .cal-num { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.2rem; display: block; }
.cal-event {
    display: block;
    font-size: 0.75rem;
    line-height: 1.25;
    padding: 0.2rem 0.35rem;
    border-radius: 6px;
    margin-bottom: 0.2rem;
    background-color: rgba(139, 94, 60, 0.12);
    border-left: 3px solid var(--primary-brown);
}
.cal-event.cat-music   { background-color: rgba(27, 107, 147, 0.12); border-left-color: var(--secondary-blue); }
.cal-event.cat-outing  { background-color: rgba(25, 135, 84, 0.13);  border-left-color: #198754; }
.cal-event.cat-worship { background-color: rgba(212, 163, 115, 0.22); border-left-color: var(--accent-gold); }
.cal-event.cat-special { background-color: rgba(220, 53, 69, 0.10);  border-left-color: #dc3545; }
.cal-event time { font-weight: 700; display: block; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.85rem; margin-top: 1rem; }
.cal-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.cal-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
/* Phones: the grid becomes an agenda list */
.cal-agenda { display: none; }
@media (max-width: 767.98px) {
    .cal-grid { display: none; }
    .cal-agenda { display: block; }
}
.cal-agenda .agenda-day {
    display: flex;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-color);
}
.cal-agenda .agenda-date {
    flex-shrink: 0;
    width: 3.5rem;
    text-align: center;
    border-radius: 10px;
    background-color: var(--secondary-blue-light);
    color: var(--secondary-blue);
    padding: 0.35rem 0;
    line-height: 1.1;
    height: fit-content;
}
.cal-agenda .agenda-date b { display: block; font-size: 1.35rem; }
.cal-agenda .agenda-date small { font-size: 0.7rem; text-transform: uppercase; font-weight: 700; }
.cal-agenda .agenda-day.is-today .agenda-date { background-color: var(--secondary-blue); color: #fff; }

.activity-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background-color: var(--bg-card);
}

/* Printing a subpage (e.g. the clothing list): content only */
@media print {
    .top-bar, .navbar-custom, .footer-custom, #btn-back-to-top,
    .subpage-sidebar, .subpage-hero .breadcrumb, .btn { display: none !important; }
    .subpage-hero { background: none !important; color: #000 !important; padding: 1rem 0 !important; border: 0; }
    .subpage-hero h1, .subpage-hero p { color: #000 !important; }
    .subpage-body .col-lg-8 { width: 100% !important; }
    .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
    .content-block { box-shadow: none; }
}

/* Stronger intro text on photo banners */
.subpage-hero .lead { color: rgba(255, 255, 255, 0.9) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }

/* ==========================================================================
   MAP EMBED FIX - footer links not clickable on wide screens
   --------------------------------------------------------------------------
   Bootstrap's .ratio sizes itself with an invisible ::before spacer
   (padding-top: 42.86% of the width for .ratio-21x9). The home-page and
   contact-page maps cap the box with an inline max-height (380px / 420px),
   but the spacer still grows with the screen width - about 860px tall on a
   2000px screen - and hangs invisibly below the map, on top of the footer
   (the map section's reveal animation uses transform, which lifts it above
   the footer). Clipping the box and making the spacer click-through keeps
   the map exactly as it looks now and frees the footer links underneath.
   ========================================================================== */
.ratio { overflow: hidden; }
.ratio::before { pointer-events: none; }