/* ============================================================
   New Family Church International— shared stylesheet
   Loaded by includes/header.php on every public page.
   Theme colors (--primary, --secondary, --accent, --hero-bg)
   are injected inline by header.php from data/site-data.json.
   ============================================================ */

:root{
    --ink:#1B1D23;
    --paper:#FBF9F4;
    --radius:14px;
}

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

html{ scroll-behavior:smooth; }

body{
    font-family:'Manrope', sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    padding-top:76px;
}

h1,h2,h3,h4{
    font-family:'Fraunces', serif;
    letter-spacing:-0.01em;
}

a{ text-decoration:none; color:inherit; }

.eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--primary);
}
.eyebrow::before{ content:""; width:20px; height:1px; background:var(--primary); }

/* ---------- Navbar ---------- */
.site-navbar{
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    padding:18px 0;
    box-shadow:0 2px 20px rgba(0,0,0,0.06);
    border-bottom:1px solid rgba(0,0,0,0.05);
    transition:padding .35s ease, background .35s ease, box-shadow .35s ease;
}
.site-navbar.scrolled{
    padding:10px 0;
    background:rgba(255,255,255,0.98);
    box-shadow:0 6px 24px rgba(0,0,0,0.10);
}

.navbar-brand{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces', serif; font-weight:600; font-size:25px; color:var(--ink);
}
.navbar-brand span{ transition:color .3s ease; }
.navbar-brand:hover span{ color:var(--hover-gold); }
.brand-logo{ height:50px; width:auto; border-radius:6px; transition:transform .35s ease; }
.navbar-brand:hover .brand-logo{ transform:rotate(-4deg) scale(1.08); }

.site-navbar .nav-link{
    position:relative; color:var(--ink); opacity:0.85; font-weight:700; font-size:14.5px;
    padding:8px 2px !important; margin:0 12px; transition:color .3s ease, opacity .3s ease;
}
.site-navbar .nav-link::after{
    content:""; position:absolute; left:0; bottom:2px; width:0; height:2px;
    background:var(--hover-gold); border-radius:2px; transition:width .3s ease;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link.active{
    color:var(--hover-gold); opacity:1;
}
.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after{ width:100%; }

.btn-nav-cta{
    position:relative; overflow:hidden;
    background:var(--ink); color:#fff !important; padding:11px 24px; border-radius:999px;
    font-size:14px; font-weight:800; letter-spacing:.01em;
    box-shadow:0 8px 18px rgba(0,0,0,0.15);
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-nav-cta::before{
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background:linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent);
    transform:skewX(-20deg); transition:left .6s ease;
}
.btn-nav-cta:hover::before{ left:130%; }
.btn-nav-cta:hover{
    background:var(--hover-gold);
    color:var(--ink) !important;
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 14px 26px rgba(0,0,0,0.2);
}
.btn-nav-cta:active{ transform:translateY(0) scale(0.98); }

/* Mobile toggler — dark icon on white bg */
.site-navbar .navbar-toggler{
    border:none; box-shadow:none !important; padding:4px 8px;
}
.site-navbar .navbar-toggler-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(27,29,35,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ================= HERO SLIDER (homepage background) =================
   FIX (photo cropping / darkness):
   - min-height was a flat 100vh, which on tall/narrow viewports forces
     background-size:cover to crop a LOT off the sides of landscape
     photos to fill that height. Switched to a clamp() so the box never
     gets taller than the photo can comfortably cover.
   - background-position changed from implicit "center center" to
     "center 30%" so cover crops from the bottom/top edges first rather
     than the vertical middle, where faces/subjects usually are.
   - Zoom effects (fx-zoomout, fx-zoomin, kenburns) started/ended at
     scale(1.18)/(0.92)/(1.09) — that's 9-18% of the photo cropped away
     purely by the animation, on top of whatever cover already crops.
     Values below are pulled in closer to 1 so far less gets cut off. */
.hero-section{
    position:relative;
    overflow:hidden;
    min-height:clamp(560px, 82vh, 820px);
}
.hero-slides{ position:absolute; inset:0; z-index:0; }
.hero-slide{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center 30%;
    opacity:0; transform:scale(1) translateX(0);
    transition:opacity 1.6s ease, transform 1.9s cubic-bezier(.22,.61,.36,1);
    will-change:opacity, transform;
}
.hero-slide.active{ opacity:1; }
.hero-slide.fx-slideleft{ transform:translateX(6%) scale(1.02); }
.hero-slide.fx-slideleft.active{ transform:translateX(0) scale(1); }
.hero-slide.fx-slideright{ transform:translateX(-6%) scale(1.02); }
.hero-slide.fx-slideright.active{ transform:translateX(0) scale(1); }
.hero-slide.fx-zoomout{ transform:scale(1.06); }
.hero-slide.fx-zoomout.active{ transform:scale(1); }
.hero-slide.fx-zoomin{ transform:scale(0.97); }
.hero-slide.fx-zoomin.active{ transform:scale(1); }
.hero-slide.fx-kenburns.active{ animation:kenburns 9s ease-in-out forwards; }
@keyframes kenburns{
    0%{ transform:scale(1); }
    100%{ transform:scale(1.04); }
}
/* The photo now stays essentially clear/bright (like the reference site) —
   only a faint vignette at the very bottom, just enough to seat the dots.
   Text legibility is handled separately via text-shadow on the hero text
   itself (below), not by darkening the whole image. */
.hero-slides::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(15,17,21,0) 0%, rgba(15,17,21,0.02) 60%, rgba(15,17,21,0.22) 100%);
    z-index:1;
}
.hero-dots{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.hero-dots span{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.35); transition:background .3s, width .3s; }
.hero-dots span.active{ background:#fff; width:22px; border-radius:5px; }

/* Text legibility now comes from a shadow behind the letters, not from
   darkening the photo underneath them — keeps the background photo bright
   and fully visible no matter how light or busy it is. */
.hero-content .eyebrow{ text-shadow:0 2px 10px rgba(0,0,0,0.35); }
.hero-headline{ text-shadow:0 4px 24px rgba(0,0,0,0.45); }
.hero-sub{ text-shadow:0 2px 14px rgba(0,0,0,0.4); }
.hero-meta strong,
.hero-meta .stat-label{ text-shadow:0 2px 10px rgba(0,0,0,0.35); }

/* Hero headline had no explicit font-size — it was inheriting the browser's
   large default h1 size with no responsive scaling, which is what caused
   the headline to overflow past the screen edges on mobile. This clamps it
   like every other heading on the site, and forces long/unbroken words to
   wrap instead of overflowing. */
.hero-headline{
    font-size:clamp(30px, 8vw, 64px);
    line-height:1.08;
    font-weight:600;
    overflow-wrap:break-word;
    word-break:break-word;
    max-width:100%;
}

@media (max-width: 480px){
    .hero-headline{ font-size:clamp(26px, 9vw, 40px); }
}
.hero-content{
    max-width:100%;
    overflow-wrap:break-word;
}
/* Show the full hero photo uncropped on mobile, instead of cropping it to
   fill the screen, and shrink the hero box to match the photo's own
   16:9 shape so there's no leftover dark gap above/below it. */
@media (max-width: 767px){
    .hero-section{
        min-height:auto;
        aspect-ratio: 16 / 9;
    }
    .hero-slide{
        background-size:contain;
        background-repeat:no-repeat;
        background-position:center;
        background-color:var(--ink);
    }
}

/* ---------- CTA buttons (hero + reused across the site) ----------
   These classes were referenced in the markup but never had any CSS behind
   them, so they rendered as bare, unstyled links — no padding, no shape,
   and inheriting the page's near-black body text color, which is nearly
   invisible sitting on a dark hero photo. This gives them a real, beveled
   button look. Colors below are the site-wide defaults; the homepage hero
   can override just the color/background inline (admin/hero.php → Buttons),
   without losing this shape/shadow/hover styling. */
.btn-primary-cta{
    display:inline-flex; align-items:center; justify-content:center;
    padding:15px 30px; border-radius:999px; font-size:14.5px; font-weight:700;
    background:var(--primary); color:var(--ink);
    border:1px solid rgba(255,255,255,0.16);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.45),
        inset 0 -2px 4px rgba(0,0,0,0.12),
        0 10px 24px rgba(0,0,0,0.28),
        0 2px 6px rgba(0,0,0,0.16);
    transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary-cta:hover{
    transform:translateY(-2px);
    filter:brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        inset 0 -2px 4px rgba(0,0,0,0.12),
        0 16px 30px rgba(0,0,0,0.32),
        0 4px 10px rgba(0,0,0,0.2);
}
.btn-primary-cta:active{ transform:translateY(0); filter:brightness(0.98); }

.btn-ghost-cta{
    display:inline-flex; align-items:center; justify-content:center;
    padding:14px 28px; border-radius:999px; font-size:14.5px; font-weight:700;
    background:rgba(255,255,255,0.05);
    color:#fff; border:1.5px solid rgba(255,255,255,0.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
    transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn-ghost-cta:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,0.14);
    border-color:#fff;
}
.btn-ghost-cta:active{ transform:translateY(0); }

/* Buttons */
.hero-ctas{
    margin-top:34px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.hero-align-left .hero-ctas{
    justify-content:flex-start;
}

.hero-align-center .hero-ctas{
    justify-content:center;
}

.hero-align-right .hero-ctas{
    justify-content:flex-end;
}

/* Stats */
.hero-meta{
    margin-top:56px;
    display:flex;
    gap:36px;
    flex-wrap:wrap;
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:22px;
    color:#fff;
}
.hero-meta strong{ display:block; font-size:22px; font-weight:700; line-height:1.2; }
.hero-meta .stat-label{ font-size:13px; color:rgba(255,255,255,0.72); }

.hero-align-left .hero-meta{
    justify-content:flex-start;
}

.hero-align-center .hero-meta{
    justify-content:center;
}

.hero-align-right .hero-meta{
    justify-content:flex-end;
}

/* ---------- Section basics ---------- */
.section{ padding:48px 0; }
.section-head{ max-width:640px; margin-bottom:28px; }
.section-head h2{ font-size:clamp(28px,4vw,42px); margin-top:14px; font-weight:600; }
.section-head p{ margin-top:16px; font-size:17px; color:#5c5c58; }
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ---------- About ---------- */
.about-card{
    background:#fff; border-radius:var(--radius); padding:32px; border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 20px 45px rgba(0,0,0,0.05);
}
.about-card .stat strong{ display:block; font-family:'Fraunces', serif; font-size:30px; color:var(--secondary); }
.about-card .stat span{ font-size:13px; color:#7a7a75; }

/* Vision / Mission accordion under the About intro text (homepage).
   Overrides Bootstrap's default chevron with a +/- indicator. */
.vm-accordion{ margin-top:28px; max-width:520px; }
.vm-accordion .accordion-item{
    border:none; margin-bottom:14px; border-radius:var(--radius); overflow:hidden;
    box-shadow:0 14px 30px rgba(0,0,0,0.05);
}
.vm-accordion .accordion-button{
    background:#fff; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    color:var(--ink); padding:20px 24px;
}
.vm-accordion .accordion-button:not(.collapsed){
    background:#fff; color:var(--ink); box-shadow:none;
}
.vm-accordion .accordion-button:focus{ box-shadow:none; }
.vm-accordion .accordion-button::after{
    background-image:none; content:"+"; font-size:22px; font-weight:400; line-height:1;
    width:auto; height:auto; color:var(--primary); transition:transform .2s ease;
}
.vm-accordion .accordion-button:not(.collapsed)::after{ content:"−"; }
.vm-accordion .accordion-body{
    font-size:15px; color:#5c5c58; line-height:1.7; padding:0 24px 22px;
}

/* Standalone Vision / Mission cards (about.php) */
.vm-card{
    background:#fff; border-radius:var(--radius); padding:32px; height:100%;
    box-shadow:0 20px 45px rgba(0,0,0,0.05);
}
.vm-card h6{
    font-size:12.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
    color:var(--primary,#D98E2B); margin-bottom:12px;
}
.vm-card p{ font-size:15.5px; color:#5c5c58; line-height:1.7; }

/* About photo (shown instead of the stats grid when an about image is set) */
.about-photo-wrap{ position:relative; }
.about-photo-wrap img{
    border-radius:16px; width:100%; object-fit:cover; aspect-ratio:4/5;
    box-shadow:0 30px 60px rgba(0,0,0,0.12); position:relative; z-index:1;
}
.about-photo-wrap::before{
    content:""; position:absolute; top:-22px; right:-22px; width:82%; height:82%;
    background:var(--secondary,#1F5C56); opacity:0.16;
    border-radius:62% 38% 55% 45% / 48% 42% 58% 52%;
    z-index:0;
}
@media(max-width:900px){
    .about-photo-wrap{ margin-top:40px; }
    .about-photo-wrap::before{ display:none; }
}

/* ---------- Ministries ---------- */
.m-card{
    background:var(--paper); border-radius:var(--radius); padding:32px 26px; height:100%;
    border:1px solid rgba(0,0,0,0.05); transition:transform .3s ease, box-shadow .3s ease;
}
.m-card:hover{ transform:translateY(-6px); box-shadow:0 24px 40px rgba(0,0,0,0.08); }
.m-icon{
    width:50px; height:50px; border-radius:14px; background:color-mix(in srgb, var(--primary) 16%, transparent);
    display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--primary);
}
.m-card h3{ font-size:19px; font-weight:600; margin-bottom:10px; }
.m-card p{ font-size:14.5px; color:#66665f; }

/* ---------- Ministry cards (modernized — shared by index.php & ministries.php) ---------- */
.min-card{
    background:var(--paper,#FBF9F4); border-radius:16px; overflow:hidden; height:100%;
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 16px 34px rgba(0,0,0,0.05);
    transition:transform .35s ease, box-shadow .35s ease;
    display:flex; flex-direction:column;
}
.min-card:hover{ transform:translateY(-8px); box-shadow:0 26px 46px rgba(0,0,0,0.1); }
.min-card-media{
    aspect-ratio:16/10; position:relative; overflow:hidden;
    background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 20%, transparent), color-mix(in srgb, var(--secondary) 24%, transparent));
    display:flex; align-items:center; justify-content:center;
}
.min-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.min-card:hover .min-card-media img{ transform:scale(1.07); }
.min-card-media .min-icon-badge{
    width:56px; height:56px; border-radius:14px; background:#fff; color:var(--primary);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,0.12);
}
.min-card-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.min-card-body h3{ font-size:19px; font-weight:600; margin:0 0 8px; }
.min-card-body p.desc{ font-size:14.5px; color:#66665f; margin-bottom:16px; }
.min-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.min-meta .badge{
    font-weight:600; font-size:12px; padding:6px 11px; border-radius:999px;
    background:color-mix(in srgb, var(--secondary) 12%, transparent);
    color:var(--secondary); display:inline-flex; align-items:center; gap:5px;
}
.min-card-body .min-cta{
    margin-top:auto;
    display:inline-flex; align-items:center; gap:6px;
    font-size:14px; font-weight:700; color:var(--primary);
    transition:gap .2s ease;
}
.min-card-body .min-cta:hover{ gap:10px; }

/* Staggers the reveal of each card using the --i custom property set
   inline per card (style="--i:0", "--i:1", ...), so cards in a grid
   fade up left-to-right instead of all at once. */
.min-grid .reveal{ transition-delay:calc(var(--i, 0) * 80ms); }

/* ---------- Events strip ---------- */
.events-section{ background:#F6F4EE; }
.event-card{
    border-radius:14px; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,0.06);
    transition:transform .3s ease, box-shadow .3s ease; height:100%;
}
.event-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px rgba(0,0,0,0.1); }
.event-card .event-img{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.event-card .event-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.event-card:hover .event-img img{ transform:scale(1.08); }
.event-date-badge{
    position:absolute; top:12px; left:12px; background:rgba(255,255,255,0.94); color:#1B1D23;
    font-size:11.5px; font-weight:800; padding:5px 10px; border-radius:999px; letter-spacing:.02em;
}
.event-card .event-body{ padding:18px 18px 22px; }
.event-card h4{ font-size:16px; font-weight:700; margin:0; }
/* ---------- Tagline banner ---------- */
.tagline-banner{
    position:relative; background:var(--ink,#1B1D23); color:#fff; padding:50px 0;
    text-align:center; overflow:hidden; background-size:cover; background-position:center;
}
.tagline-banner::before{ content:""; position:absolute; inset:0; background:rgba(15,17,21,0.72); }
.tagline-banner h2{
    position:relative; z-index:1; font-size:clamp(26px,4.4vw,46px); font-weight:600;
    max-width:18ch; margin:0 auto; line-height:1.2;
}

/* ---------- Missions ---------- */
.missions-section{ background:var(--secondary); color:#fff; }
.missions-section .section-head p{ color:rgba(255,255,255,0.75); }
.missions-section .eyebrow{ color:#BFE3D9; }
.missions-section .eyebrow::before{ background:#BFE3D9; }
.p-card{
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
    border-radius:var(--radius); padding:26px; height:100%; transition:background .3s;
}
.p-card:hover{ background:rgba(255,255,255,0.11); }
.p-card .num{ font-family:'Fraunces', serif; font-size:14px; color:#BFE3D9; margin-bottom:10px; display:block; }
.p-card h3{ font-size:18px; font-weight:600; margin-bottom:10px; }
.p-card p{ font-size:14.5px; color:rgba(255,255,255,0.72); }

/* ---------- Connect / give band ---------- */
.connect-section{ background:var(--secondary,#1F5C56); color:#fff; padding:48px 0; }
.connect-section h2{ font-size:clamp(26px,3.6vw,38px); font-weight:600; }
.connect-section p{ color:rgba(255,255,255,0.78); font-size:16px; margin-top:12px; max-width:52ch; }
.connect-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top:28px; }

/* ---------- Media ---------- */
.photo-tile{
    aspect-ratio:1/1; border-radius:10px; overflow:hidden;
    background:linear-gradient(135deg,#e8e4d8,#d8d2c2);
    display:flex; align-items:center; justify-content:center; color:#9b9686; font-size:13px; cursor:pointer;
}
.photo-tile img{ width:100%; height:100%; object-fit:cover; }
.video-thumb{
    aspect-ratio:16/9; border-radius:12px; background:var(--ink); position:relative; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
}
.play-btn{
    width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,0.92);
    display:flex; align-items:center; justify-content:center; position:relative; z-index:2; transition:transform .2s;
}
.video-card:hover .play-btn{ transform:scale(1.08); }
.video-card h4{ margin-top:12px; font-size:15px; font-weight:600; }
.video-embed-wrap{ aspect-ratio:16/9; border-radius:10px; overflow:hidden; background:#000; }
.video-embed-wrap iframe,.video-embed-wrap video{ width:100%; height:100%; }

/* ---------- Visit ---------- */
.visit-item{ display:flex; gap:16px; margin-bottom:24px; }
.visit-ic{
    width:40px; height:40px; border-radius:10px; background:color-mix(in srgb, var(--primary) 16%, transparent);
    color:var(--primary); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:18px;
}
.visit-item strong{ display:block; font-size:15px; margin-bottom:2px; }
.visit-item span{ font-size:14.5px; color:#66665f; }
.map-block{
    background:var(--paper); border-radius:var(--radius); min-height:280px;
    display:flex; align-items:center; justify-content:center; color:#9b9686; border:1px solid rgba(0,0,0,0.06);
    overflow:hidden;
}
.map-block iframe{ width:100%; height:100%; min-height:280px; border:0; }

/* ---------- Footer ---------- */
.site-footer{
    position:relative;
    background:linear-gradient(180deg, var(--ink) 0%, #101217 100%);
    color:rgba(255,255,255,0.7);
    padding:64px 0 26px;
    margin-top:0;
    overflow:hidden;
}
.site-footer::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--primary), var(--hover-gold), var(--primary));
    background-size:200% 100%;
    animation:footerShine 6s linear infinite;
}
@keyframes footerShine{
    0%{ background-position:0% 0; }
    100%{ background-position:200% 0; }
}

.footer-cols h4{ color:#fff; font-size:14px; font-weight:700; margin-bottom:16px; letter-spacing:.03em; }
.footer-cols a,.footer-cols p{ display:block; font-size:14px; line-height:2; color:rgba(255,255,255,0.6); }
.footer-cols a{
    position:relative; width:fit-content;
    transition:color .25s ease, transform .25s ease;
}
.footer-cols a:hover{
    color:var(--hover-gold);
    transform:translateX(5px);
}

.footer-brand{ display:flex; align-items:center; gap:10px; font-family:'Fraunces', serif; font-size:20px; color:#fff; margin-bottom:12px; font-weight:600; }
.footer-brand img{ height:28px; border-radius:6px; transition:transform .35s ease; }
.footer-brand:hover img{ transform:rotate(-4deg) scale(1.08); }
.footer-tagline{ font-size:14px; color:rgba(255,255,255,0.6); margin-bottom:16px; }

.footer-socials{ display:flex; gap:10px; }
.footer-socials a{
    width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,0.2);
    display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
    color:#fff; transition:all .3s ease;
}
.footer-socials a:hover{
    background:var(--hover-gold);
    border-color:var(--hover-gold);
    color:var(--ink);
    transform:translateY(-4px) rotate(8deg);
    box-shadow:0 10px 20px rgba(255,213,74,0.35);
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.12); margin-top:44px; padding-top:22px; font-size:13px;
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
    color:rgba(255,255,255,0.5);
}

/* ---------- Footer mobile stacking ---------- */
@media (max-width: 767px){
    .footer-cols > [class*="col-"]{
        flex:0 0 100%;
        max-width:100%;
    }
    .footer-brand{
        justify-content:flex-start;
    }
    .footer-socials{
        margin-bottom:8px;
    }
    .footer-bottom{
        flex-direction:column;
        text-align:center;
        gap:6px;
    }
}


/* ---------- Page hero (inner pages) ---------- */
.page-hero{ background:var(--ink); color:#fff; padding:48px 0 36px; }
.page-hero h1{ font-size:clamp(32px,5vw,52px); margin-top:14px; font-weight:600; }
.page-hero p{ margin-top:16px; color:rgba(255,255,255,0.72); max-width:60ch; font-size:16.5px; }

/* ---------- Lightbox (media.php) ---------- */
#lightbox{
    position:fixed; inset:0; background:rgba(0,0,0,0.9); z-index:1050;
    display:none; align-items:center; justify-content:center; padding:30px;
}
#lightbox.show{ display:flex; }
#lightbox-inner{ max-width:900px; width:100%; }
#lightbox-inner img,#lightbox-inner iframe,#lightbox-inner video{ width:100%; border-radius:10px; max-height:80vh; }
#lightbox-close{ position:absolute; top:22px; right:30px; color:#fff; font-size:30px; background:none; border:none; }

@media(max-width:991px){
    .hero-content{ padding:40px 0; }
    .section{ padding:36px 0; }
}

/* ---------- Homepage media teaser (4 photos + 4 videos) ---------- */
.hm-section{ background:#F6F4EE; }
.hm-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-template-rows:repeat(2,220px);
    gap:14px;
}
.hm-tile{
    position:relative; display:block; border-radius:14px; overflow:hidden;
    background:#111; box-shadow:0 12px 28px rgba(0,0,0,0.08);
}
.hm-tile img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .5s ease;
}
.hm-tile:hover img{ transform:scale(1.08); }
.hm-video-fallback{
    display:block; width:100%; height:100%;
    background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 22%, var(--ink)), var(--ink));
}
.hm-tile-overlay{
    position:absolute; inset:auto 0 0 0; z-index:2;
    padding:14px; font-size:13px; font-weight:600; color:#fff;
    background:linear-gradient(180deg, transparent, rgba(0,0,0,0.78));
    opacity:0; transform:translateY(6px);
    transition:opacity .3s ease, transform .3s ease;
}
.hm-tile:hover .hm-tile-overlay{ opacity:1; transform:translateY(0); }
.hm-play-btn{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
    width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.92);
    display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink);
    transition:transform .2s ease;
}
.hm-video:hover .hm-play-btn{ transform:translate(-50%,-50%) scale(1.1); }

@media(max-width:991px){
    .hm-grid{ grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(4,200px); }
}
@media(max-width:520px){
    .hm-grid{ grid-template-columns:1fr; grid-template-rows:repeat(8,220px); }
    
    
    /* ---------- Mobile navbar fix (prevents fixed navbar overlapping hero) ---------- */
@media (max-width: 991px){
    /* Keep the navbar compact and single-line on phones */
    .site-navbar{ padding:10px 0; }
    .brand-logo{ height:36px; }
    .navbar-brand{
        font-size:17px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:70vw; /* leaves room for the toggler button, prevents wrap */
    }
    .navbar-brand span{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        display:inline-block;
        max-width:100%;
    }

    /* Match body's fixed-nav offset to the smaller mobile navbar height,
       and add extra breathing room so hero content never tucks under it. */
    body{ padding-top:64px; }
    .hero-content{ padding-top:56px; }
}

@media (max-width: 480px){
    .navbar-brand{ max-width:60vw; font-size:16px; }
    .brand-logo{ height:32px; }
}
}