/*
Theme Name: Local Community Miners SL
Theme URI: https://localcommunityminerssl.com
Author: Local Community Miners (SL) Limited
Author URI: https://localcommunityminerssl.com
Description: A professional WordPress theme for Local Community Miners (SL) Limited, a registered gold artisanal mining company. Bold navy-and-gold palette, geometric type, and a diamond-facet signature motif drawn from the company mark.
Version: 1.7.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: local-community-miners
*/

/* ==========================================================================
   DESIGN TOKENS
   Palette
   --navy        #0B2D5C  primary brand blue — headers, footer, dark sections
   --navy-deep   #071D3D  deepest navy, gradients
   --gold        #D4A017  primary gold accent — buttons, highlights
   --gold-soft   #F0C94A  lighter gold, hovers
   --yellow      #FFC72C  bright company yellow — secondary accent
   --cream       #FFFDF5  light background
   --ink         #101826  body text on light
   ========================================================================== */

:root{
  --navy:#0B2D5C;
  --navy-deep:#071D3D;
  --navy-soft:#123B78;
  --gold:#D4A017;
  --gold-soft:#F0C94A;
  --yellow:#FFC72C;
  --yellow-soft:#FFDA6B;
  --cream:#FFFDF5;
  --cream-dim:#FBF3D8;
  --ink:#101826;
  --white:#FFFFFF;
  --line:rgba(255,255,255,0.16);
  --line-dark:rgba(11,45,92,0.14);

  --font-display: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --container: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 6px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:700; letter-spacing:-0.01em; }
p{ margin:0 0 1.1em; }
button, input, textarea, select{ font-family:inherit; font-size:inherit; }

:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

.container{ max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex; align-items:center; gap:0.6rem;
}
.eyebrow::before{ content:""; width:24px; height:2px; background:var(--gold); display:inline-block; }

/* ==========================================================================
   SITE HEADER
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--navy);
  color:var(--white);
  border-bottom:3px solid var(--gold);
}
.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.85rem var(--gutter);
  max-width:var(--container); margin:0 auto;
}
.site-branding{ display:flex; align-items:center; gap:0.85rem; }
.site-branding img.custom-logo,
.site-branding .default-logo{
  width:52px; height:52px; max-width:52px; max-height:52px;
  object-fit:contain; border-radius:4px; flex:none;
}
.site-branding .name-block{ line-height:1.2; }
.site-title{
  font-family:var(--font-display);
  font-size:1.02rem;
  font-weight:700;
  color:var(--white);
  letter-spacing:0.01em;
  text-transform:uppercase;
  display:block;
}
.site-tagline{
  display:block;
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gold-soft);
  margin-top:2px;
}
.main-navigation ul{ display:flex; gap:2rem; align-items:center; }
.main-navigation a{
  font-family:var(--font-display);
  font-size:0.85rem;
  font-weight:600;
  letter-spacing:0.02em;
  color:rgba(255,255,255,0.85);
  padding:0.4rem 0.1rem;
  border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.main-navigation a:hover,
.main-navigation .current-menu-item a{
  color:var(--gold-soft);
  border-bottom-color:var(--gold);
}
.menu-toggle{ display:none; }

@media (max-width:760px){
  .main-navigation ul{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background:var(--navy);
    border-top:1px solid var(--line);
  }
  .main-navigation ul.is-open{ display:flex; }
  .main-navigation li{ border-bottom:1px solid var(--line); }
  .main-navigation a{ display:block; padding:1rem var(--gutter); }
  .menu-toggle{
    display:inline-flex; align-items:center; gap:0.5rem;
    background:var(--gold); border:none; color:var(--navy-deep);
    padding:0.55rem 0.9rem; border-radius:var(--radius);
    font-family:var(--font-display); font-weight:700; font-size:0.78rem;
    text-transform:uppercase; letter-spacing:0.06em; cursor:pointer;
  }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; gap:0.55rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.02em;
  padding:0.95rem 1.7rem;
  border-radius:var(--radius);
  border:2px solid transparent;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-solid{ background:var(--gold); color:var(--navy-deep); }
.btn-solid:hover{ background:var(--gold-soft); transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.5); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-soft); transform:translateY(-2px); }
.btn-navy{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-navy:hover{ background:var(--navy); color:var(--white); }

/* ==========================================================================
   HOME — HERO with rotating photo slider (5 slides / 4s)
   ========================================================================== */
.hero{
  position:relative;
  background:var(--navy-deep);
  color:var(--white);
  overflow:hidden;
  padding:clamp(4.5rem,11vw,7.5rem) 0 clamp(3.5rem,8vw,5.5rem);
}
.hero-slider{ position:absolute; inset:0; z-index:0; }
.hero-slider::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  /* Lighter than before — lets the photo read brightly, with just enough
     tint at the bottom for the headline and buttons to stay legible. */
  background:linear-gradient(180deg, rgba(7,29,61,0.28) 0%, rgba(7,29,61,0.6) 100%);
}
.hero-slider .slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.1s ease;
}
.hero-slider .slide.is-active{ opacity:1; }
/* The first slide shows immediately from pure CSS, before the rotation
   script has even run — a photo never depends on JavaScript to appear. */
.hero-slider .slide:first-child{ opacity:1; }

.slide-placeholder{
  display:flex; align-items:center; justify-content:center; text-align:center;
  background:repeating-linear-gradient(135deg, var(--navy-soft) 0 16px, var(--navy) 16px 32px);
}
.slide-placeholder span{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; color:rgba(255,255,255,0.75);
  padding:1rem 1.4rem; line-height:1.8;
}
.slide-placeholder em{ font-style:normal; color:var(--gold-soft); }


.hero-grid{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr 0.85fr; gap:3rem; align-items:end; }
.hero h1{
  font-size:clamp(2.5rem,5.2vw,4.1rem);
  line-height:1.05;
  color:var(--white);
  max-width:15ch;
  margin-top:1.1rem;
  text-shadow:0 2px 14px rgba(7,29,61,0.55);
}
.hero h1 em{ font-style:normal; color:var(--gold-soft); }
.hero-lede{ font-size:1.08rem; color:rgba(255,255,255,0.92); max-width:46ch; margin-top:1.3rem; text-shadow:0 1px 10px rgba(7,29,61,0.5); }
.hero-actions{ display:flex; gap:1rem; margin-top:2.2rem; flex-wrap:wrap; }

.hero-panel{
  background:rgba(255,255,255,0.06);
  border:1px solid var(--line);
  border-left:4px solid var(--gold);
  border-radius:var(--radius);
  padding:1.6rem 1.8rem;
}
.hero-panel .hero-panel-row{ display:flex; justify-content:space-between; padding:0.6rem 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
.hero-panel .hero-panel-row:last-child{ border-bottom:none; }
.hero-panel .hp-label{ font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-soft); }
.hero-panel .hp-value{ font-weight:600; text-align:right; }

/* Stat strip */
.stat-strip{ background:var(--gold); color:var(--navy-deep); }
.stat-strip .container{ display:grid; grid-template-columns:repeat(4,1fr); padding:2.1rem var(--gutter); }
.stat-strip .stat{ border-left:1px solid rgba(11,29,61,0.2); padding:0 1.4rem; }
.stat-strip .stat:first-child{ border-left:none; padding-left:0; }
.stat-num{ font-family:var(--font-display); font-size:2.2rem; font-weight:800; }
.stat-label{ font-family:var(--font-mono); font-size:0.66rem; text-transform:uppercase; letter-spacing:0.1em; opacity:0.8; margin-top:0.3rem; }
@media (max-width:760px){
  .stat-strip .container{ grid-template-columns:repeat(2,1fr); gap:1.6rem 0; }
  .stat-strip .stat{ border-left:none; padding-left:0; }
}

/* Section shell */
.section{ padding:clamp(3.5rem,8vw,6.5rem) 0; }
.section-navy{ background:var(--navy); color:var(--white); }
.section-yellow{ background:var(--yellow); color:var(--navy-deep); }
.section-head{ max-width:640px; margin-bottom:3rem; }
.section-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:0.7rem; }
.section-head p{ color:inherit; opacity:0.85; margin-top:0.9rem; }

/* Process — numbered sequence */
.process-list{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:2px solid var(--line-dark); }
.process-item{ counter-increment:step; padding:2.2rem 1.6rem 2.2rem 0; border-right:1px solid var(--line-dark); position:relative; }
.process-item:last-child{ border-right:none; }
.process-item::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--gold);
  display:block; margin-bottom:0.8rem;
}
.process-item h3{ font-size:1.15rem; margin-bottom:0.5rem; }
.process-item p{ font-size:0.94rem; opacity:0.75; margin-bottom:0; }
@media (max-width:900px){
  .process-list{ grid-template-columns:1fr 1fr; }
  .process-item{ border-right:none; border-bottom:1px solid var(--line-dark); padding-right:0; }
}
@media (max-width:560px){ .process-list{ grid-template-columns:1fr; } }

/* Grade / product panel */
.grade-panel{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:3.5rem; align-items:center; }
.grade-list{ border-top:1px solid var(--line); }
.grade-row{ display:flex; justify-content:space-between; padding:1.1rem 0; border-bottom:1px solid var(--line); }
.grade-row .g-name{ font-weight:700; }
.grade-row .g-meta{ font-family:var(--font-mono); font-size:0.78rem; color:var(--gold-soft); }
@media (max-width:820px){ .grade-panel{ grid-template-columns:1fr; } }

/* Values / cards */
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.value-card{
  background:var(--white); border:1px solid var(--line-dark); padding:2rem;
  border-top:4px solid var(--gold); border-radius:var(--radius);
  box-shadow:0 4px 18px rgba(11,45,92,0.06);
}
.value-card h3{ font-size:1.15rem; margin-bottom:0.6rem; color:var(--navy); }
.value-card p{ font-size:0.94rem; opacity:0.78; margin-bottom:0; }
@media (max-width:820px){ .value-grid{ grid-template-columns:1fr; } }

/* CTA band */
.cta-band{ background:linear-gradient(120deg, var(--navy) 0%, var(--navy-deep) 100%); color:var(--white); padding:clamp(2.8rem,6vw,4.2rem) 0; position:relative; overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  background:var(--gold); opacity:0.15; transform:rotate(45deg);
}
.cta-band .container{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band h2{ font-size:clamp(1.6rem,2.8vw,2.1rem); max-width:22ch; }

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-hero{
  position:relative; overflow:hidden;
  color:var(--white);
  background:var(--navy-deep);
  min-height:clamp(360px,50vw,560px);
  display:flex; align-items:center;
  padding:clamp(3rem,7vw,5rem) 0;
}
/* Full-size photo slider filling the whole hero, exactly like the Home
   page hero — the text sits on top of it, not beside it in a box. */
.about-slider{ position:absolute; inset:0; z-index:0; }
.about-slider::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,29,61,0.35) 0%, rgba(7,29,61,0.72) 100%);
}
.about-slider .slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.1s ease;
}
.about-slider .slide.is-active{ opacity:1; }
/* The first slide shows immediately from pure CSS, before the rotation
   script has even run — a photo never depends on JavaScript to appear. */
.about-slider .slide:first-child{ opacity:1; }
.about-slider .slide-placeholder{
  background:repeating-linear-gradient(135deg, var(--navy-soft) 0 16px, var(--navy) 16px 32px);
}
.about-hero .container{ position:relative; z-index:2; }
.about-hero h1{ font-size:clamp(2.2rem,4.4vw,3.4rem); margin-top:0.8rem; max-width:20ch; color:var(--white); text-shadow:0 2px 14px rgba(7,29,61,0.55); }

/* Activity cards — We Mine / We Buy / We Partner */
.activity-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.activity-card{
  background:var(--white); border:1px solid var(--line-dark);
  overflow:hidden; display:flex; flex-direction:column; border-radius:var(--radius);
  box-shadow:0 4px 18px rgba(11,45,92,0.07);
}
.activity-image{ aspect-ratio:4/3; background-size:cover; background-position:center; }
.activity-image.is-placeholder{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--navy), var(--gold));
}
.activity-placeholder-text{
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--white); text-align:center;
  padding:1rem 1.2rem; line-height:1.8;
}
.activity-placeholder-text em{ font-style:normal; color:var(--navy-deep); background:var(--gold-soft); padding:0 0.3rem; border-radius:3px; }
.activity-body{ padding:1.6rem; }
.activity-body .eyebrow{ color:var(--gold); }
.activity-body h3{ font-size:1.15rem; margin-top:0.5rem; color:var(--navy); }
.activity-body p{ font-size:0.94rem; opacity:0.8; margin-top:0.6rem; margin-bottom:0; }
@media (max-width:820px){ .activity-grid{ grid-template-columns:1fr; } }

/* Timeline */
.timeline{ position:relative; padding-left:2.4rem; border-left:2px solid var(--line-dark); }
.timeline-item{ position:relative; padding-bottom:2.6rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-2.58rem; top:0.3rem;
  width:12px; height:12px; border-radius:50%; background:var(--gold); border:2px solid var(--navy);
}
.timeline-year{ font-family:var(--font-mono); font-size:0.8rem; color:var(--navy); font-weight:700; letter-spacing:0.05em; }
.timeline-item h3{ font-size:1.2rem; margin:0.35rem 0 0.5rem; color:var(--navy); }
.timeline-item p{ opacity:0.78; margin-bottom:0; max-width:60ch; }

/* Leadership */
.people-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; }
.person-card{ background:var(--navy); color:var(--white); padding:1.8rem; border-radius:var(--radius); border-bottom:4px solid var(--gold); }
.person-role{ font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold-soft); margin-bottom:0.3rem; }
.person-name{ font-family:var(--font-display); font-size:1.2rem; font-weight:700; margin-bottom:0.6rem; }
.person-bio{ font-size:0.92rem; opacity:0.82; margin-bottom:0; }
@media (max-width:820px){ .people-grid{ grid-template-columns:1fr; } }

/* Registration strip */
.cert-strip{ display:flex; gap:2.5rem; flex-wrap:wrap; align-items:center; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:1.8rem 0; }
.cert-item{ font-family:var(--font-display); font-weight:600; font-size:0.85rem; color:var(--navy); display:flex; align-items:center; gap:0.6rem; }
.cert-item .dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block; flex:none; }
/* Light variant — used on navy section backgrounds (e.g. Community commitments) */
.cert-strip-light{ border-top-color:var(--line); border-bottom-color:var(--line); }
.cert-strip-light .cert-item{ color:var(--white); }

/* Six-up variant of the value-card grid (Compliance pillars, Community focus areas) */
@media (max-width:1100px) and (min-width:821px){
  .value-grid-6{ grid-template-columns:repeat(2,1fr); }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-hero{
  position:relative; overflow:hidden;
  color:var(--white);
  background:var(--navy-deep);
  min-height:clamp(360px,50vw,560px);
  display:flex; align-items:center;
  padding:clamp(3rem,7vw,5rem) 0;
}
/* Full-size photo slider filling the whole hero, exactly like the Home
   page hero — the text sits on top of it, not beside it in a box. */
.contact-slider{ position:absolute; inset:0; z-index:0; }
.contact-slider::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,29,61,0.3) 0%, rgba(7,29,61,0.68) 100%);
}
.contact-slider .slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.1s ease;
}
.contact-slider .slide.is-active{ opacity:1; }
/* Same pure-CSS fallback as the other sliders: the first photo shows
   immediately, without waiting on JavaScript. */
.contact-slider .slide:first-child{ opacity:1; }
.contact-slider .slide-placeholder{
  background:repeating-linear-gradient(135deg, var(--navy) 0 16px, var(--navy-deep) 16px 32px);
}
.contact-hero .container{ position:relative; z-index:2; }
.contact-hero h1{ font-size:clamp(1.7rem,3vw,2.4rem); line-height:1.2; margin-top:0.8rem; max-width:24ch; color:var(--white); text-shadow:0 2px 14px rgba(7,29,61,0.55); }

.contact-layout{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:3.5rem; align-items:start; }
.contact-info-block{ border-top:1px solid var(--line-dark); padding-top:1.6rem; margin-top:1.8rem; }
.contact-info-block:first-child{ border-top:none; padding-top:0; margin-top:0; }
.contact-info-block .label{ font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--gold); margin-bottom:0.4rem; }
.contact-info-block .value{ font-size:1.02rem; color:var(--navy-deep); font-weight:600; }
.contact-info-block a.value:hover{ color:var(--navy); }

.contact-form{ background:var(--navy); color:var(--white); padding:clamp(1.8rem,4vw,2.8rem); border-radius:var(--radius); border-top:4px solid var(--gold); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-family:var(--font-mono); font-size:0.7rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-soft); margin-bottom:0.5rem; }
.field input, .field select, .field textarea{
  width:100%; background:rgba(255,255,255,0.07); border:1px solid var(--line); color:var(--white);
  padding:0.85rem 1rem; border-radius:var(--radius);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
.form-note{ font-size:0.82rem; opacity:0.65; margin-top:1rem; }
@media (max-width:900px){ .contact-layout{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

.map-frame{ border:3px solid var(--navy-deep); border-radius:var(--radius); width:100%; height:340px; }

/* ==========================================================================
   MINING COMPLIANCE PAGE
   ========================================================================== */
.compliance-hero{
  position:relative; overflow:hidden;
  color:var(--white);
  background:var(--navy-deep);
  min-height:clamp(360px,50vw,560px);
  display:flex; align-items:center;
  padding:clamp(3rem,7vw,5rem) 0;
}
/* Single full-bleed hero photo — built on the same slider markup/JS as the
   other heroes, so a lone slide behaves exactly like the tested "single
   photo" case already relied on elsewhere in this theme. */
.compliance-slider{ position:absolute; inset:0; z-index:0; }
.compliance-slider::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,29,61,0.35) 0%, rgba(7,29,61,0.72) 100%);
}
.compliance-slider .slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.1s ease;
}
.compliance-slider .slide.is-active{ opacity:1; }
.compliance-slider .slide:first-child{ opacity:1; }
.compliance-slider .slide-placeholder{
  background:repeating-linear-gradient(135deg, var(--navy-soft) 0 16px, var(--navy) 16px 32px);
}
.compliance-hero .container{ position:relative; z-index:2; }
.compliance-hero h1{ font-size:clamp(2rem,4vw,3.1rem); margin-top:0.8rem; max-width:22ch; color:var(--white); text-shadow:0 2px 14px rgba(7,29,61,0.55); }

/* Investor Opportunity — reuses the Home "Company Snapshot" grade-panel look */
.investor-panel .grade-row .g-name{ font-weight:700; }

/* ==========================================================================
   COMMUNITY PAGE
   ========================================================================== */
.community-hero{
  position:relative; overflow:hidden;
  color:var(--white);
  background:var(--navy-deep);
  min-height:clamp(360px,50vw,560px);
  display:flex; align-items:center;
  padding:clamp(3rem,7vw,5rem) 0;
}
/* Full-size 3-slide photo slider filling the whole hero, matching the
   Home/About/Contact treatment — rotates every 4 seconds via main.js. */
.community-slider{ position:absolute; inset:0; z-index:0; }
.community-slider::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,29,61,0.32) 0%, rgba(7,29,61,0.68) 100%);
}
.community-slider .slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.1s ease;
}
.community-slider .slide.is-active{ opacity:1; }
.community-slider .slide:first-child{ opacity:1; }
.community-slider .slide-placeholder{
  background:repeating-linear-gradient(135deg, var(--navy-soft) 0 16px, var(--navy) 16px 32px);
}
.community-hero .container{ position:relative; z-index:2; }
.community-hero h1{ font-size:clamp(2rem,4vw,3.1rem); margin-top:0.8rem; max-width:22ch; color:var(--white); text-shadow:0 2px 14px rgba(7,29,61,0.55); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ background:var(--navy-deep); color:rgba(255,255,255,0.82); padding:3.5rem 0 1.6rem; border-top:4px solid var(--gold); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid var(--line); }
.footer-col h4{ font-family:var(--font-display); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold-soft); margin-bottom:1rem; font-weight:700; }
.footer-col p, .footer-col li{ font-size:0.9rem; margin-bottom:0.6rem; opacity:0.85; }
.footer-col a:hover{ color:var(--gold-soft); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem; padding-top:1.4rem; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.03em; opacity:0.6; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }

/* Generic page (fallback) */
.page-content{ padding:4rem 0; }
.page-content .container{ max-width:800px; }