/* =============================================
   LEAFLET MAP (local, no CDN)
   ============================================= */
@import url('leaflet.min.css');

/* =============================================
   FONTS - Local WOFF2 (no external CDN)
   ============================================= */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:optional;src:url('../fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:optional;src:url('../fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500 600;font-display:optional;src:url('../fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500 600;font-display:optional;src:url('../fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:400 700;font-display:optional;src:url('../fonts/merriweather-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Merriweather';font-style:normal;font-weight:400 700;font-display:optional;src:url('../fonts/merriweather-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* =============================================
   CSS VARIABLES
   ============================================= */
:root{
  --c-cream:#F3EFE0;
  --c-maroon:#7D3C4A;
  --c-maroon-h:#5e2d38;
  --c-gray:#4B5563;
  --c-gray-l:#9CA3AF;
  --c-dark:#111827;
  --c-white:#ffffff;
  --ff-serif:'Merriweather',Georgia,'Times New Roman',serif;
  --ff-sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --max-w:1280px;
  --header-h:80px;
  --radius-card:.75rem;
  --shadow-card:0 1px 3px rgba(0,0,0,.08);
  --shadow-card-h:0 8px 24px rgba(0,0,0,.13);
  --trans:.15s ease;
}

/* =============================================
   RESET
   ============================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background-color:var(--c-cream);font-family:var(--ff-sans);color:var(--c-dark);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5;min-height:100vh}
img,svg{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit}
input,select,textarea{font-family:inherit;font-size:inherit}
ul,ol{list-style:none}
::selection{background-color:var(--c-maroon);color:var(--c-white)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#f1f1f1}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#b3b3b3}

/* =============================================
   UTILITIES
   ============================================= */
.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}
.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:1rem}
@media(min-width:640px){.container{padding-inline:1.5rem}}
@media(min-width:1024px){.container{padding-inline:2rem}}

/* =============================================
   HEADER & NAVIGATION
   ============================================= */
.site-header{
  background-color:rgba(243,239,224,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid #e7e5e4;
  height:var(--header-h);
  min-height:var(--header-h);
  contain:layout style;
}
.header-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:var(--header-h);
  gap:1rem;
}
/* Logo */
.logo-area{display:flex;align-items:center;gap:.75rem;flex-shrink:0;min-width:0}
.logo-area picture{flex-shrink:0;width:40px;height:40px}
.logo-img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.logo-text{
  font-family:var(--ff-serif);
  font-weight:700;
  font-size:1.1875rem;
  color:var(--c-maroon);
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Desktop Nav */
.site-nav{display:none;align-items:center;gap:2rem}
@media(min-width:768px){.site-nav{display:flex}}
.site-nav a{
  color:#374151;
  font-weight:500;
  font-size:.9375rem;
  transition:color var(--trans);
  white-space:nowrap;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--c-maroon)}
/* CTA Button */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  background-color:var(--c-maroon);
  color:var(--c-white);
  padding:.625rem 1.5rem;
  border-radius:9999px;
  font-weight:500;
  font-size:.9375rem;
  box-shadow:0 2px 6px rgba(125,60,74,.25);
  transition:background-color var(--trans),transform var(--trans);
  white-space:nowrap;
  flex-shrink:0;
}
.btn-primary:hover{background-color:var(--c-maroon-h);transform:scale(1.03)}
/* Hamburger */
.nav-toggle{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:none;border:none;cursor:pointer;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
}
@media(min-width:768px){.nav-toggle{display:none}}
.nav-toggle svg{width:24px;height:24px;color:#374151}
/* Mobile Menu - overlay, zero CLS */
.mobile-menu{
  display:none;
  position:fixed;
  top:var(--header-h);
  left:0;right:0;
  background-color:rgba(243,239,224,.98);
  border-bottom:1px solid #e7e5e4;
  z-index:99;
  padding:.5rem 0 1rem;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.mobile-menu.is-open{display:block}
.mobile-menu a{
  display:block;
  padding:.75rem 1.5rem;
  color:#374151;
  font-weight:500;
  font-size:1rem;
  border-bottom:1px solid rgba(231,229,228,.5);
  transition:background-color var(--trans),color var(--trans);
}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:hover{background-color:rgba(125,60,74,.06);color:var(--c-maroon)}

/* =============================================
   HERO SECTION
   ============================================= */
.hero{
  position:relative;
  padding-top:5rem;
  padding-bottom:3rem;
  overflow:hidden;
  min-height:420px;
  background-color:var(--c-cream);
  contain:layout;
}
@media(min-width:1024px){.hero{padding-top:7rem;padding-bottom:5rem;min-height:520px}}
/* Hero BG Image */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
}
.hero-bg img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(243,239,224,.92) 0%,rgba(243,239,224,.88) 55%,rgba(243,239,224,.6) 100%);
}
.hero-content{position:relative;z-index:2;max-width:50rem}
.hero h1{
  font-family:var(--ff-serif);
  font-weight:700;
  font-size:clamp(1.875rem,5.5vw,4rem);
  color:var(--c-dark);
  line-height:1.15;
  margin-bottom:1.5rem;
  letter-spacing:-.02em;
}
.hero h1 span{color:var(--c-maroon)}
.hero p{
  font-size:clamp(.9375rem,2vw,1.125rem);
  color:#4b5563;
  margin-bottom:2.5rem;
  line-height:1.75;
  max-width:42rem;
}
/* Search Bar */
.search-bar{
  background:var(--c-white);
  padding:.375rem;
  border-radius:9999px;
  box-shadow:0 4px 20px rgba(0,0,0,.1);
  max-width:540px;
  display:flex;
  align-items:center;
  border:1px solid #f5f5f4;
  min-height:56px;
  contain:layout;
}
.search-bar svg{width:1.5rem;height:1.5rem;color:#9ca3af;margin-left:1rem;flex-shrink:0}
.search-bar input{
  flex:1;background:transparent;border:none;outline:none;
  color:#374151;font-size:.9375rem;padding:.5rem 1rem;min-width:0;
}
.search-bar input::placeholder{color:#9ca3af}
.search-btn{
  background-color:var(--c-maroon);
  color:var(--c-white);
  padding:.75rem 2rem;
  border-radius:9999px;
  font-weight:500;
  font-size:.9375rem;
  transition:background-color var(--trans);
  white-space:nowrap;
  flex-shrink:0;
}
.search-btn:hover{background-color:var(--c-maroon-h)}
@media(max-width:479px){.search-btn{padding:.75rem 1.25rem;font-size:.875rem}}

/* =============================================
   MAIN LAYOUT
   ============================================= */
.main-content{padding-top:3rem;padding-bottom:3rem}
.content-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:1024px){.content-grid{grid-template-columns:260px 1fr;gap:2rem}}

/* =============================================
   SIDEBAR FILTERS
   ============================================= */
.sidebar{display:none}
@media(min-width:1024px){.sidebar{display:block;padding-right:1rem}}
.filter-group{margin-bottom:2rem}
.filter-group h3{
  font-family:var(--ff-serif);
  font-weight:700;
  font-size:1.0625rem;
  color:var(--c-dark);
  margin-bottom:1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid rgba(125,60,74,.2);
}
.filter-label{
  display:flex;align-items:center;
  cursor:pointer;
  margin-bottom:.75rem;
}
.filter-label:last-of-type{margin-bottom:0}
.filter-label input[type="checkbox"]{
  width:1.125rem;height:1.125rem;
  border-radius:.25rem;
  border:1.5px solid #d1d5db;
  cursor:pointer;
  accent-color:var(--c-maroon);
  flex-shrink:0;
}
.filter-label span{
  margin-left:.75rem;color:#374151;
  font-size:.9375rem;line-height:1.4;
  transition:color var(--trans);
}
.filter-label:hover span{color:var(--c-maroon)}
.show-more-btn{
  color:var(--c-maroon);font-size:.875rem;font-weight:600;
  margin-top:.5rem;padding:0;background:none;border:none;cursor:pointer;
  display:block;
}
.show-more-btn:hover{text-decoration:underline}

/* =============================================
   RESULTS AREA
   ============================================= */
.results-header{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
@media(min-width:640px){.results-header{flex-direction:row;justify-content:space-between;align-items:flex-start}}
.results-title{font-family:var(--ff-serif);font-weight:700;font-size:1.375rem;color:var(--c-dark)}
.results-count{color:#6b7280;font-size:.875rem;margin-top:.25rem}
.sort-wrap{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.sort-wrap label{font-size:.875rem;color:#4b5563;white-space:nowrap}
.sort-select{
  padding:.5rem .75rem;
  border:1px solid #d1d5db;
  border-radius:.5rem;
  font-size:.875rem;color:#374151;
  background:var(--c-white);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  outline:none;cursor:pointer;
  min-width:140px;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  padding-right:2.25rem;
}
.sort-select:focus{border-color:var(--c-maroon);box-shadow:0 0 0 3px rgba(125,60,74,.1)}

/* =============================================
   CHURCH CARDS GRID
   ============================================= */
.cards-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:580px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.cards-grid{grid-template-columns:repeat(3,1fr)}}

/* Church Card */
.church-card{
  background:var(--c-white);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  border:1px solid #f5f5f4;
  overflow:hidden;
  display:flex;flex-direction:column;
  height:100%;
  transition:box-shadow .25s ease;
  contain:layout;
}
.church-card:hover{box-shadow:var(--shadow-card-h)}
/* Card Image */
.card-img-wrap{
  position:relative;
  width:100%;
  height:0;
  padding-bottom:56.25%; /* 16:9 aspect ratio */
  overflow:hidden;
  background-color:#e7e5e4;
  flex-shrink:0;
}
.card-img-wrap img{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
  aspect-ratio:16/9;
}
img[width][height]{aspect-ratio:attr(width)/attr(height)}
.church-card:hover .card-img-wrap img{transform:scale(1.05)}
.card-badge{
  position:absolute;top:.75rem;right:.75rem;
  background:rgba(255,255,255,.92);
  color:var(--c-maroon);
  font-size:.6875rem;font-weight:700;
  padding:.25rem .75rem;border-radius:9999px;
  box-shadow:0 1px 4px rgba(0,0,0,.1);
  text-transform:uppercase;letter-spacing:.05em;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:1;
}
/* Card Body */
.card-body{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.card-title{
  font-family:var(--ff-serif);font-weight:700;
  font-size:1rem;color:var(--c-dark);
  margin-bottom:.5rem;line-height:1.35;
}
.card-location{
  display:flex;align-items:flex-start;gap:.25rem;
  color:#6b7280;font-size:.875rem;margin-bottom:1rem;
}
.card-location svg{width:1rem;height:1rem;flex-shrink:0;margin-top:.1875rem;color:var(--c-maroon)}
.card-tags{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:1.5rem}
.tag{
  padding:.25rem .75rem;border-radius:9999px;
  font-size:.6875rem;font-weight:600;
  background:#EAE5D6;color:#4A3B32;
  white-space:nowrap;
}
.card-footer{margin-top:auto;padding-top:1rem;border-top:1px solid #f3f4f6}
.card-link{
  display:inline-flex;align-items:center;gap:.25rem;
  color:var(--c-maroon);font-weight:600;font-size:.875rem;
  transition:color var(--trans),gap var(--trans);
}
.card-link svg{width:1rem;height:1rem;flex-shrink:0;transition:transform var(--trans)}
.card-link:hover{color:var(--c-maroon-h)}
.card-link:hover svg{transform:translateX(3px)}

/* =============================================
   PAGINATION
   ============================================= */
.pagination{display:flex;justify-content:center;margin-top:3rem}
.pag-list{display:inline-flex;border-radius:.375rem;box-shadow:0 1px 4px rgba(0,0,0,.09);overflow:hidden}
.pag-list a,.pag-list span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.5rem .875rem;
  border:1px solid #d1d5db;
  font-size:.875rem;font-weight:500;
  color:#6b7280;background:var(--c-white);
  margin-left:-1px;
  min-width:40px;min-height:40px;
  transition:background-color var(--trans),color var(--trans);
}
.pag-list>:first-child{border-radius:.375rem 0 0 .375rem}
.pag-list>:last-child{border-radius:0 .375rem .375rem 0}
.pag-list a:hover{background:#f9fafb;color:#374151}
.pag-list .pag-active{background:var(--c-maroon);border-color:var(--c-maroon);color:var(--c-white);z-index:1}
.pag-list .pag-dots{color:#374151;background:var(--c-white);cursor:default}
.pag-md{display:none}
@media(min-width:640px){.pag-md{display:inline-flex}}

/* =============================================
   FOOTER
   ============================================= */
.site-footer{
  background:var(--c-white);
  border-top:1px solid #e7e5e4;
  margin-top:4rem;
  padding-top:4rem;
  padding-bottom:2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:2.5rem;
  margin-bottom:3rem;
}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1.5fr}}
/* Footer Brand */
.footer-brand-row{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.footer-brand-img{width:32px;height:32px;border-radius:50%;filter:grayscale(1);opacity:.7;flex-shrink:0}
.footer-brand-name{font-family:var(--ff-serif);font-weight:700;font-size:1.0625rem;color:var(--c-dark)}
.footer-desc{color:#6b7280;font-size:.875rem;line-height:1.75}
/* Footer Columns */
.footer-col h4{font-weight:700;color:var(--c-dark);margin-bottom:1rem;font-size:.9375rem}
.footer-col ul li{margin-bottom:.625rem}
.footer-col ul li a{color:#6b7280;font-size:.875rem;transition:color var(--trans)}
.footer-col ul li a:hover{color:var(--c-maroon)}
/* Newsletter */
.footer-newsletter p{color:#6b7280;font-size:.875rem;margin-bottom:1rem;line-height:1.65}
.footer-form{display:flex;flex-direction:column;gap:.5rem}
.footer-form input{
  padding:.625rem 1rem;
  border:1px solid #e5e7eb;border-radius:.5rem;
  font-size:.875rem;color:#374151;background:#f9fafb;
  outline:none;transition:border-color var(--trans),box-shadow var(--trans);
}
.footer-form input:focus{border-color:var(--c-maroon);box-shadow:0 0 0 3px rgba(125,60,74,.08)}
.footer-form button{
  background:var(--c-maroon);color:var(--c-white);
  padding:.625rem 1rem;border-radius:.5rem;
  font-size:.875rem;font-weight:500;
  transition:background-color var(--trans);
}
.footer-form button:hover{background:var(--c-maroon-h)}
/* Footer Bottom */
.footer-bottom{
  border-top:1px solid #f3f4f6;
  padding-top:2rem;
  display:flex;flex-direction:column;gap:.75rem;
}
@media(min-width:640px){.footer-bottom{flex-direction:row;justify-content:space-between;align-items:center}}
.footer-copy{font-size:.875rem;color:#9ca3af}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-links a{font-size:.875rem;color:#9ca3af;transition:color var(--trans)}
.footer-links a:hover{color:var(--c-maroon)}

/* =============================================
   RESPONSIVE HELPERS
   ============================================= */
@media(max-width:767px){
  .hide-mobile{display:none!important}
  .logo-text{font-size:1.0625rem}
}
@media(min-width:768px){
  .hide-desktop{display:none!important}
}