:root{
  --bg: #fbfaf6;
  --paper: #ffffff;
  --ink: #111827;
  --muted: #4b5563;
  --green: #256e4f;
  --green-dark: #1f5b40;
  --gold: #c08a2a;
  --radius: 18px;
  --max: 1180px;
  --shadow-soft: 0 10px 22px rgba(15,23,42,.12);
  /* Paw cursor (48x48) */
  --paw-cursor: url(https://assets.codepen.io/14924810/Dog+Paw+for+cursor.64x64.no+background.png) 32 32, auto;
}

html, body{
  margin: 0;
  padding: 0;
}
/* --- GLOBAL IMAGE SAFETY (prevents runaway full-width images) --- */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Default cursor everywhere */
html, body, *{
  cursor: var(--paw-cursor);
}

/* When user switches to pointer */
body.cursor-pointer,
body.cursor-pointer *{
  cursor: auto !important;
}

body{
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  line-height: 1.5;
  background: var(--bg);
  min-height: 100vh;
  position: relative;
}

/* Clayton Lake meta + CTAs */
.lake-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.meta-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow-soft);
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
}

.meta-pill:hover{
  background: #fff;
  transform: translateY(-1px);
}

.lake-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Buttons (lightweight, consistent) */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border: 1px solid rgba(229,231,235,.9);
  box-shadow: var(--shadow-soft);
  transition: transform .15s ease, background .15s ease;
}

.btn:hover{
  transform: translateY(-1px);
}

.btn-primary{
  background: rgba(37,110,79,.96); /* matches your green theme */
  color: #fff;
  border-color: rgba(37,110,79,.96);
}

.btn-primary:hover{
  background: rgba(31,91,64,.98);
}

.btn-ghost{
  background: rgba(255,255,255,.85);
  color: var(--ink);
}

.btn-ghost:hover{
  background: #fff;
}
/* =========================
   Red accent border (Nav pills + Community Snapshot)
   ========================= */

/* NAV pills — use whichever selector matches your HTML */
.nav-link,
.nav-pill,
.nav a.nav-pill,
.nav .pill,
.nav a.pill,
.nav a[href^="#"]{
  border: 1px solid rgba(220, 38, 38, .9) !important; /* red */
}

/* If your pills are the "meta-pill" style anywhere (you used meta-pill already) */
.meta-pill{
  border: 1px solid rgba(220, 38, 38, .9);
}

/* Community Snapshot container — use whichever exists in your CSS/HTML */
.community-snapshot,
.snapshot,
#community-snapshot,
.stats,
.stats-card{
  border: 1px solid rgba(220, 38, 38, .9);
  border-radius: 16px; /* match your card rounding; adjust if needed */
}
/* =========================
   Community Snapshot accent (hero card)
   ========================= */

.hero-card{
  border: 1.9px solid #b91c1c;          /* same red accent */
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15,23,42,.35);
  background: rgba(255,255,255,.95);
  transition: transform .18s ease, box-shadow .18s ease;
}

.hero-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(15,23,42,.45);
}

/* optional: subtle hover polish */
.nav-pill:hover,
.meta-pill:hover{
  box-shadow: 0 6px 18px rgba(220, 38, 38, .12);
}
.nav-link:hover{
  box-shadow: 0 0 0 2px rgba(185,28,28,.15), 0 6px 14px rgba(15,23,42,.35);
}
/* ===== Shop flyout submenu ===== */
.dropdown--flyout { min-width: 240px; }

.dd-group{
  position: relative; /* anchor submenu */
}

.dd-label{
  display: block;
  padding: 7px 14px;
  font-size: 13px;
  text-decoration: none;
  color: #111827;
  white-space: nowrap;
}

.dd-label:hover{ background:#f3f4f6; }

/* right arrow indicator */
.dd-group.has-sub > .dd-label::after{
  content: "›";
  float: right;
  opacity: .7;
}

/* submenu panel */
.submenu{
  position: absolute;
  top: 0;
  left: calc(100% - 2px);
  min-width: 240px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(15,23,42,.35);
  border: 1px solid rgba(209,213,219,.9);
  padding: 6px 0;
  display: none;
  z-index: 1100;
}
/* invisible bridge so cursor can travel from label -> submenu without closing */
.submenu::before{
  content: "";
  position: absolute;
  left: -12px;   /* bridge width */
  top: 0;
  width: 12px;
  height: 100%;
}

/* show submenu on hover/focus */
.dd-group.has-sub:hover .submenu,
.dd-group.has-sub:focus-within .submenu{
  display: block;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown,
.nav-item.open .dropdown{
  display: block;
}

/* submenu links match your dropdown links */
.submenu a{
  display:block;
  padding: 7px 14px;
  font-size: 13px;
  text-decoration:none;
  color:#111827;
  white-space:nowrap;
}
.submenu a:hover{ background:#f3f4f6; }

/* ===== Nav pills right-aligned ===== */
.nav{ display:block; } /* keep nav as wrapper */

.nav-pills{
  width: 100%;
  display: grid;
  gap: 10px;
}

/* Make each row right-aligned with consistent spacing */
.nav-row{
  display: flex;
  justify-content: flex-end; /* pushes pills to the right */
  gap: 10px;                /* equal spacing between pills */
  align-items: center;
  flex-wrap: nowrap;
}

/* Responsive: allow wrapping so pills don’t overflow */
@media (max-width: 980px){
  .nav-row{ flex-wrap: wrap; }
}




/* mobile/touch support via JS "open" class */
.dd-group.open .submenu{ display:block; }

/* Facebook button */
.btn-facebook{
  background: #1877F2;           /* Facebook blue */
  border-color: #1877F2;
  color: #fff;
}

.btn-facebook:hover{
  filter: brightness(.95);
}

/* Top line (restaurant name) */
.btn-facebook .fb-name{
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Bottom line (Facebook) */
.btn-facebook .fb-label{
  display: block;
  font-size: 10px;
  font-weight: 500;
  opacity: .9;
}

/* Facebook button should be a compact 2-line badge, not a single-row pill */
.btn.btn-facebook{
  display: inline-flex;         /* keep same layout as other .btn */
  flex-direction: column;       /* <-- THIS is the key */
  align-items: center;
  justify-content: center;
  gap: 2px;                     /* smaller vertical spacing */
  padding: 8px 10px;            /* compact */
  min-width: 108px;
  line-height: 1.1;
}


/* Icon inside buttons */
.btn .icon{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
}

/* Green icons for Call + Directions (only icons, not the button) */
.btn .icon-green{
  color: var(--green);
}
/* --- Small badges (e.g., Annual Event) --- */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.85);
  color: var(--ink);
}

.badge-annual{
  background: rgba(192,138,42,.14);
  border-color: rgba(192,138,42,.35);
  color: #7a4b00;
}

/* Title row with badge */
.card-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* --- EMS mini badges (colored) --- */
.ems-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 10px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.70);
}

.ems-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}

.ems-dot{
  width: 18px;
  height: 18px;
  border-radius: 6px;
  display:inline-block;
  border: 1px solid rgba(17,24,39,.15);
  box-shadow: 0 6px 14px rgba(15,23,42,.12);
  position: relative;
}
.ems-dot::after{
  content: "EMS";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-size: 8px;
  font-weight: 900;
  color:#fff;
  letter-spacing: .2px;
}

.ems-red{ background:#dc2626; }
.ems-orange{ background:#f97316; }
.ems-blue{ background:#2563eb; }
.ems-green{ background:#16a34a; }

.ems-name{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make the "Contact" button slightly smaller on EMS rows */
.ems-row .btn{
  padding: 8px 12px;
  font-size: 12px;
}

/* 4-card image grid */
.card-grid.cards-4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 1050px){
  .card-grid.cards-4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px){
  .card-grid.cards-4{
    grid-template-columns: 1fr;
  }
}

/* Card styling (safe if you already have .card styles; these will enhance) */
.card{
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}


/* ✅ Card media is always a frame; image must live inside it */
.card-media{
  overflow: hidden;
}

/* Default MAIN image behavior (not thumbs) */
.card-media .gallery-main,
.card-media > img{
  width: 100%;
  height: 180px;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ✅ Use this when you DON'T want cropping (logos, badges, signs) */
.card-media.fit-contain > img, g img{
  object-fit: contain;
  background: #f3f4f6;
  padding: 10px;
}


.card-body{
  padding: 12px 12px 14px;
}

.card-body h4{
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
/* Eat grid layout */
.eat-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 1050px){
  .eat-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px){
  .eat-grid{ grid-template-columns: 1fr; }
}

.card-meta{
  margin: 8px 0 12px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Card actions ---------- */
.card-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}


.card-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: var(--green);
  color: #fff;
  box-shadow: 0 6px 14px rgba(15,23,42,.18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.card-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15,23,42,.28);
  background: var(--green-dark);
}

.card-btn.secondary{
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(17,24,39,.15);
}

.card-btn.secondary:hover{
  background: #f9fafb;
}
/* Two-line button layout inside card-actions */
.card-actions{
  flex-direction: column; /* makes rows stack */
  align-items: flex-start;
}

.action-row{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Active thumb */
.card-media.gallery .thumb.is-active{
  border-color: rgba(37,110,79,.95);
  box-shadow: 0 8px 18px rgba(15,23,42,.18);
}


/* ---------- Modals (Menu + Photos Lightbox) ---------- */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.65);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 9999;
}

.modal-overlay.is-open{ display: flex; }

.modal{
  width: min(980px, 96vw);
  max-height: 86vh;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

.modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(17,24,39,.12);
  background: #fff;
}

.modal-title{
  font-weight: 800;
  font-size: 16px;
}

.modal-close{
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 10px;
}

.modal-close:hover{
  background: rgba(17,24,39,.06);
}

.modal-body{
  padding: 14px;
  overflow: auto;
}

/* Menu modal content */
.menu-frame{
  width: 100%;
  height: 70vh;
  border: 0;
  border-radius: 14px;
  background: #f3f4f6;
}
.modal.modal-compact{
  width: min(560px, 92vw);
}

/* Photos lightbox gallery grid */
.lightbox-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

/* Lightbox tiles as BUTTONS */
#photosGrid .lightbox-item{
  appearance:none;
  border:1px solid rgba(17,24,39,.12);
  background:transparent;
  padding:0;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  display:block;
  width:100%;
}

#photosGrid .lightbox-item img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  transition:transform .2s ease;
}

#photosGrid .lightbox-item:hover img{
  transform:scale(1.04);
}


@media (max-width: 520px){
  .lightbox-grid{ grid-template-columns: 1fr; }
  .lightbox-grid .lightbox-item img{ height: 200px; }
}

/* Fullscreen photo viewer inside photos modal */
.viewer{
  display: none;
  margin-top: 14px;
  border-top: 1px solid rgba(17,24,39,.12);
  padding-top: 14px;
}

.viewer.is-open{ display: block; }

.viewer img{
  width: 100%;
  max-height: 62vh;
  object-fit: contain;
  border-radius: 14px;
  background: #0b1220;
}


/* =========================
   EAT CARD GALLERY LAYOUT
   ========================= */

.card-media{
  position: relative;
}

/* Thumbs row */
.card-media.gallery .gallery-thumbs{
  display: flex;
  gap: 10px;
  padding: 10px 12px 12px;
  align-items: center;
  justify-content: flex-start;
}

/* Thumb buttons (BIGGER) */
.card-media.gallery .thumb{
  width: 92px;            /* <-- bigger thumbs */
  height: 66px;           /* <-- bigger thumbs */
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  pointer-events: auto;
}

/* Thumb images */
.card-media.gallery .thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Active thumb */
.card-media.gallery .thumb.is-active{
  border-color: rgba(37,110,79,.95);
  box-shadow: 0 8px 18px rgba(15,23,42,.18);
}
/* Sub-sections inside a single Services card */
.service-sub{
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.70);
}

.service-sub-title{
  font-weight: 800;
  font-size: 14px;
  margin: 0 0 6px;
}

.service-sub-meta{
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.35;
}

.service-sub-divider{
  height: 10px;
}
.service-sub-media img{
  width: 100%;
  height: 160px;
  object-fit: contain;
  background: #f3f4f6;
  border-radius: 12px;
}
/* Section titles: black fill with thick red outline */
.section-title{
  font-weight: 900;
  font-size: clamp(2.2rem, 4vw, 3rem);
  letter-spacing: .5px;
  color: #000;

  -webkit-text-stroke: 0.6px #c1121f;

  text-shadow: 0 0 1px #c1121f;
}
.card-media.usps-logo .gallery-main{
  object-position: center left;   /* shifts content away from right edge */
  padding-right: 18px;            /* extra breathing room */
}

/* Let thumbs show; clip only the main image wrapper */
.card .card-media{ overflow: visible; }
.card .card-media .gallery-mainwrap{ overflow: hidden; border-radius: 14px; }

/* Default MAIN images only (not thumbnails) */
.card .card-media .gallery-main,
.card .card-media > img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0;
}

/* Gallery main taller */
.card .card-media.gallery .gallery-main{
  height: 220px;
  object-fit: cover;
  object-position: center;
  padding: 0;
  margin: 0;
  background: transparent;
}

/* Fit-contain: logos/signs */
.card .card-media.fit-contain img{
  object-fit: contain;
  object-position: center;
  background: #f3f4f6;
  padding: 10px;
}

/* Gallery + fit-contain: USPS-style cards */
.card .card-media.gallery.fit-contain .gallery-main{
  object-fit: contain;
  object-position: center;
  background: #f3f4f6;
  padding: 10px;
}

/* ✅ IMPORTANT: thumbs should NEVER inherit the 180/220 heights */
.card .card-media.gallery .thumb img{
  height: 100% !important;
  object-fit: cover;
  padding: 0 !important;
  background: transparent !important;
}
/* ===== 4-column sections: hide thumbs under main image ===== */
.thumbs-hidden .card-media.gallery .gallery-thumbs{
  display: none !important;
}

/* Keep gallery frame height consistent even without thumbs */
.thumbs-hidden .card-media.gallery{
  grid-template-rows: 220px; /* only main image row */
}
.btn-more-photos{
  background: rgba(255,255,255,.95);
  border: 2px solid #b91c1c;
  color: #111827;
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 999px;
}

.btn-more-photos:hover{
  background: #fff;
  transform: translateY(-1px);
}
/* Tighten space between thumbs and card title */
.card-media.gallery .gallery-thumbs{
  padding-bottom: 4px;   /* was ~12px */
}

.card-body{
  padding-top: 8px;      /* was ~12px */
}

/* =========================
   COMPACT BUTTON REFINEMENT
   ========================= */

.card-actions .btn{
  min-height: unset;
  padding: 4px 10px;        /* ↓ main height control */
  font-size: 12.5px;        /* slightly smaller text */
  line-height: 1.25;
  border-radius: 999px;     /* keep pill feel */
  box-shadow: 0 3px 8px rgba(15,23,42,.15);
}

/* Facebook / branded buttons */
.card-actions .btn-facebook{
  padding: 5px 11px;
  font-size: 12.5px;
}

/* Red-outline “More Photos” button */
.card-actions .btn-more-photos{
  padding: 4px 12px;
  font-size: 12.5px;
  border-width: 2px;
}

/* Hover refinement */
.card-actions .btn:hover{
  transform: translateY(-0.5px);
  box-shadow: 0 5px 12px rgba(15,23,42,.22);
}
.card-actions .btn{
  letter-spacing: .2px;
}
/* =========================
   UNIFIED COMPACT BUTTON SYSTEM
   ========================= */

.card-actions .btn{
  min-height: unset;
  padding: 4px 10px;
  font-size: 12.5px;
  line-height: 1.25;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(15,23,42,.15);
  font-weight: 600;
}

/* Facebook badge button */
.card-actions .btn-facebook{
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.15;
  box-shadow: 0 3px 8px rgba(24,119,242,.25);
}

/* Facebook two-line text tighter */
.card-actions .btn-facebook .fb-name{
  font-size: 11px;
}
.card-actions .btn-facebook .fb-label{
  font-size: 10px;
}

/* “More Photos” special button */
.card-actions .js-open-photos{
  padding: 4px 12px;
  font-weight: 700;
  border-width: 2px;
}

/* Hover refinement for all */
.card-actions .btn:hover{
  transform: translateY(-0.5px);
  box-shadow: 0 5px 12px rgba(15,23,42,.22);
}
.card-actions .js-open-photos{
  background: #fff;
  color: #b91c1c;
  border: 2px solid #b91c1c;
  box-shadow: 0 3px 8px rgba(185,28,28,.18);
}

.card-actions .js-open-photos:hover{
  background: #b91c1c;
  color: #fff;
}
/* More Photos button (works whether it's under the title OR inside .card-actions) */
.card .btn-more-photos,
.card .js-open-photos{
  padding: 4px 12px;
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 700;
  border-radius: 999px;
  border: 2px solid #b91c1c;   /* red border */
  background: #fff;            /* white fill */
  color: #b91c1c;
  box-shadow: 0 3px 8px rgba(185,28,28,.18);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 8px;           /* nice spacing under the title */
}

.card .btn-more-photos:hover,
.card .js-open-photos:hover{
  background: #b91c1c;
  color: #fff;
  transform: translateY(-0.5px);
}
.ems-details{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(17,24,39,.12);
  display: grid;
  gap: 10px;
}

.ems-details-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}

.ems-details-title{
  font-weight: 900;
  font-size: 14px;
}
/* Facebook compact pill (icon left + centered label) */
.btn-facebook-compact{
  background: #2f5fa8;          /* your darker blue */
  border-color: #2f5fa8;
  color: #fff;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 6px 12px;            /* lower height */
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  min-height: 30px;             /* keeps it “button-like” */
}

/* round Facebook icon on left */
.btn-facebook-compact .fb-icon{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  flex: 0 0 20px;

  /* Facebook blue circle */
  background: #1877F2;

  /* white "f" using inline SVG mask */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.2V288z'/%3E%3C/svg%3E") center / 58% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.2V288z'/%3E%3C/svg%3E") center / 58% no-repeat;

  background-color: #1877F2; /* base circle color */
  position: relative;
}

/* overlay the white "f" */
.btn-facebook-compact .fb-icon::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  -webkit-mask: inherit;
          mask: inherit;
}

/* label */
.btn-facebook-compact .fb-text{
  white-space: nowrap;
}
/* Feature card: style ONLY the main image */
.feature-card .card-media .gallery-main{
  height: 200px;       /* or 220px if you prefer */
  width: 100%;
  object-fit: cover;
  display: block;
}
/* Clayton Lake main image framing tweak */
.clayton-lake-card img.gallery-main{
  object-position: center 99% !important;
}

/* ===== Clayton Lake gallery: main + 3 thumbs ===== */
.clayton-lake-card .lake-gallery{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.clayton-lake-card .lake-main{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.clayton-lake-card .lake-main img{
  width: 100%;
  height: 220px;          /* adjust if you want taller */
  display: block;
  object-fit: cover;      /* prevents ugly stretching */
  object-position: center;/* prevents “bottom cut off” bias */
}

.clayton-lake-card .lake-more-photos{
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: rgba(17,24,39,.92);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}



.clayton-lake-card .lake-anchor-row{ height: 0; }
.clayton-lake-card .lake-anchor{
  display:block;
  height: 0;
}

/* Mini grid inside the card */
.lake-mini-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.lake-mini-grid figure{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(255,255,255,.65);
}

.lake-mini-grid img{
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.lake-mini-grid figcaption{
  font-size: 12px;
  color: var(--muted);
  padding: 8px 10px;
  line-height: 1.25;
}


/* 3-col grid helper: let a card span 2 columns */
.eat-grid .span-2{
  grid-column: span 2;
}

/* On tablets/phones, go back to normal width */
@media (max-width: 1050px){
  .eat-grid .span-2{ grid-column: auto; }
}
/* =========================
   SARDIS "HELPFUL LINKS" ROWS
   ========================= */

.helper-links{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(17,24,39,.10);
  display: grid;
  gap: 10px;
}

.helper-title{
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.25;
}

.helper-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.70);
}

.helper-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.helper-logo{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 28px;
  border: 1px solid rgba(17,24,39,.12);
  background: #fff;
}

.helper-name{
  font-weight: 800;
  font-size: 12px;
  line-height: 1.15;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.helper-actions{
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* Smaller “Website” pill inside helper rows */
.btn.btn-mini{
  padding: 6px 10px;
  font-size: 12px;
}

/* =========================
   COMPACT FACEBOOK BUTTON (ICON + NAME)
   ========================= */

.btn.btn-facebook.fb-compact{
  flex-direction: row;
  gap: 8px;
  padding: 6px 10px;
  min-width: 0;
  line-height: 1;
}

/* Simple round FB icon without needing an image file */
.btn.btn-facebook.fb-compact .fb-icon{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  position: relative;
  flex: 0 0 18px;
}

.btn.btn-facebook.fb-compact .fb-icon::after{
  content: "f";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 13px;
  color: #1877F2;
  font-family: Arial, sans-serif;
  transform: translateY(-.5px);
}

.btn.btn-facebook.fb-compact .fb-text{
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.lightbox-item{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
}
.lightbox-item img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  transition: transform .2s ease;
}
.lightbox-item:hover img{
  transform: scale(1.04);
}
/* FIX: don't pad card images (this is what creates the "starts lower" issue) */
.card .card-media img{
  padding: 0 !important;
  margin: 0 !important;
  display: block;
}
.lightbox-grid .lightbox-item{
  appearance:none;
  border:1px solid rgba(17,24,39,.12);
  background:transparent;
  padding:0;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  display:block;
  width:100%;
}
.lightbox-grid .lightbox-item img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  transition:transform .2s ease;
}
.lightbox-grid .lightbox-item:hover img{
  transform:scale(1.04);
}
/* ===== Card red accent border ===== */

.card{
  border: 1px solid #b91c1c !important;
}
/* Slight lift on hover (optional but looks great) */
.card:hover{
  box-shadow: 0 10px 28px rgba(185,28,28,.18);
  transform: translateY(-2px);
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover{
  box-shadow: 0 10px 28px rgba(185,28,28,.25);
}
.nav-link{
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-item:hover .nav-link,
.nav-item:focus-within .nav-link{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.15);
}

.back-to-top{
  position: fixed;
  right: 20px;
  bottom: 74px; /* sits above your Settings button (bottom:20px) */
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  z-index: 2000;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  background: rgba(17,24,39,.92);
  color: #fff;
  font-size: 14px;

  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.back-to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
/* Mini-badges row (Food Bank + other cards that need it) */
.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
  align-items:center;
}

.badge-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 12px;
  padding: 6px 10px;
  background: rgba(255,255,255,.65);
  transition: transform .12s ease, box-shadow .12s ease;
}

.badge-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

.badge-link img{
  height: 26px;
  width: auto;
  display:block;
}
.btn-911{
  background: linear-gradient(90deg, #d90429, #f6aa1c);
  color: #111;
  font-weight: 800;
  border: 1px solid rgba(17,24,39,.18);
}
.btn-911:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}
.badge-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

@media (max-width: 620px){
  .badge-grid{ grid-template-columns: 1fr; }
}

.badge-card{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.8);
  text-decoration: none;
  color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}

.badge-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

.badge-card img{
  height: 34px;
  width: 34px;
  object-fit: contain;
  border-radius: 10px;
  flex: 0 0 auto;
}

.badge-card span{
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
}
:root{
  scroll-padding-top: 100px;
}
.card-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 12px; /* ✅ add this */
}
/* =========================
   MODAL POLISH: Helpful Links + More Photos
   ========================= */

/* Use the same red border look as your cards (adjust var if needed) */
:root{
  --accent-red: #c1121f; /* tweak if your card border uses a different red */
}

/* Red border around the modal window (Helpful Links + Photos) */
.modal-overlay .modal{
  border: 2px solid var(--accent-red);
  border-radius: 16px;
}

/* Square padded X button */
.modal-close{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid var(--accent-red);
  background: rgba(255,255,255,.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.modal-close:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

/* Helpful Links: force single-column list */
.badge-grid{
  display: grid;
  grid-template-columns: 1fr !important; /* one link per row */
  gap: 12px;
  margin-top: 12px;
}

/* Red border around each link item */
.badge-card{
  border: 2px solid var(--accent-red);
  border-radius: 14px;
  background: rgba(255,255,255,.85);
}

/* Text block to the right of badge:
   title + description stacked, left-aligned */
.badge-text{
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
}

.badge-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.15;
}

.badge-desc{
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
}
.modal-overlay{
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.modal-overlay.is-open{
  opacity: 1;
  visibility: visible;
}

.modal{
  transform: translateY(12px);
  transition: transform .25s ease;
}

.modal-overlay.is-open .modal{
  transform: translateY(0);
}
.modal{
  width: min(520px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
}
/* =========================
   PHOTOS MODAL: pinned viewer + scrollable thumbs
   ========================= */

#photosModalBody{
  display: grid;
  grid-template-rows: auto 1fr; /* viewer first, thumbs second */
  gap: 12px;
}

/* Put viewer ABOVE the grid */
#photoViewer{
  order: 0;
  display: none;                 /* hidden until a thumb is hovered/clicked */
  border: 2px solid var(--accent-red, #c1121f);
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  overflow: hidden;
  height: 340px;                 /* adjust to taste */
}

#photoViewer.is-open{
  display: block;
}

#viewerImg{
  width: 100%;
  height: 100%;
  object-fit: contain;           /* show whole image */
  display: block;
}

/* Thumbs grid UNDER viewer; make it scroll if many thumbs */
#photosGrid{
  order: 1;
  overflow: auto;
  max-height: 46vh;              /* keeps viewer visible even with lots of thumbs */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding-right: 6px;            /* room for scrollbar */
}

/* Responsive thumbs */
@media (max-width: 820px){
  #photosGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  #photosGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* If your thumbs are buttons/anchors inside #photosGrid, style them */
#photosGrid .thumb,
#photosGrid button,
#photosGrid a{
  border: 2px solid var(--accent-red, #c1121f);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,.8);
  padding: 0;
  cursor: pointer;
}

/* Hover "expand" (zoom) effect */
#photosGrid img{
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
  transition: transform .14s ease;
}

#photosGrid :is(.thumb,button,a):hover img{
  transform: scale(1.08);
}
/* =========================
   PHOTOS MODAL LAYOUT FIX
   ========================= */

#photosModalBody{
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 12px;
}

/* Force viewer to appear ABOVE grid */
#photoViewer{
  order: -1;                  /* pushes it above grid */
  display: none;
  border: 2px solid var(--accent-red, #c1121f);
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  overflow: hidden;
  height: 340px;
}

#photoViewer.is-open{
  display: block;
}

#viewerImg{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Make grid scroll if many thumbnails */
#photosGrid{
  overflow: auto;
  max-height: 45vh;
}
#photosGrid .lightbox-item img{
  transition: transform .14s ease;
}

#photosGrid .lightbox-item:hover img{
  transform: scale(1.08);
}
/* Ensure gallery thumbs always show images (prevents "empty frames") */
.card .card-media.gallery .thumb{
  position: relative;
  overflow: hidden;
}

.card .card-media.gallery .thumb img{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* Uniform tiles in the Photos modal grid */
#photosGrid .lightbox-item{
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
}

#photosGrid .lightbox-item img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}


/* =========================
   PHOTOS MODAL: lock layout so thumbs never overlap when viewer opens
   ========================= */

#photosModalBody{
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;              /* important for flex + overflow */
}

/* Viewer: fixed area at top */
#photoViewer{
  display: none;
  height: 340px;              /* tweak if you want taller/shorter */
  border: 2px solid var(--accent-red, #c1121f);
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  overflow: hidden;
}

#photoViewer.is-open{
  display: block;
}

#viewerImg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Thumbs grid: scrolls beneath viewer */
#photosGrid{
  flex: 1 1 auto;             /* take remaining space */
  min-height: 0;              /* allows scrolling */
  overflow: auto;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  padding-right: 6px;         /* scrollbar space */
}

@media (max-width: 820px){
  #photosGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  #photosGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Make each tile truly square and stable */
#photosGrid .lightbox-item{
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--accent-red, #c1121f);
  background: rgba(255,255,255,.8);
  padding: 0;
}

#photosGrid .lightbox-item img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}
/* Give the thumbs more room once the viewer opens */
#photosModalOverlay .modal{
  max-height: 92vh;   /* was likely ~85vh; gives the whole modal more vertical space */
}

#photosModalOverlay #photosModalBody{
  max-height: 86vh;   /* ensures modal body can use the added height */
}
/* Reserve a stable scroll area for thumbs */
#photosGrid{
  max-height: 52vh;   /* increase/decrease this to taste */
}
/* ---- Photos modal: stable layout ---- */
#photosModalBody{
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 86vh;     /* ✅ DIAL #1: increase/decrease overall room */
  min-height: 0;
}

/* Keep the thumbs area scrollable */
#photosGrid{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 6px;
}
/* ---- Photos modal: stable layout ---- */
#photosModalBody{
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 86vh;     /* ✅ DIAL #1: increase/decrease overall room */
  min-height: 0;
}

/* Keep the thumbs area scrollable */
#photosGrid{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 6px;
}
/* Make each tile square + stable (prevents compression artifacts) */
#photosGrid .lightbox-item{
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  width: 100%;
}

#photosGrid .lightbox-item img{
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}
/* Viewer gets a nice size but doesn’t starve the grid */
#photoViewer{
  margin-top: 0;      /* optional: remove extra pushing */
  padding-top: 0;     /* optional */
  border-top: 0;      /* optional */
}

#photoViewer.is-open{
  display: block;
}

#viewerImg{
  max-height: 42vh;   /* ✅ DIAL #2: viewer size (try 38–48vh) */
}
/* About Clayton: history preview grid */
.about-history-trigger{
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  margin: 8px 0 14px;
}

.history-preview{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px){
  .history-preview{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.history-fig{
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(255,255,255,.7);
}

.history-fig img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

.history-fig figcaption{
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
}
/* =========================
   About Clayton: Photo History Intro (Reveal the Story)
   ========================= */

/* Subtle reveal motion */
.reveal{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.about-history-intro{
  margin-top: 12px;
}

.about-history-hero{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--accent-red, #c1121f); /* matches your red border theme */
  background: rgba(255,255,255,.75);
}

.about-history-banner{
  width: 100%;
  display: block;
  object-fit: cover;
}

.about-history-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px 14px;
  background: linear-gradient(to top, rgba(11,18,32,.62), rgba(11,18,32,0));
  color: #fff;
}

.about-history-kicker{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 15px;
  line-height: 1.1;
}

.about-history-sub{
  font-weight: 700;
  font-size: 12px;
  opacity: .92;
}

.about-history-cta-text{
  margin: 12px 0 8px;
}

.about-history-cta{
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.about-history-cta img{
  height: 44px;
  width: auto;
  display: block;
}
/* About Clayton: banner + caption left + mini thumbs right */
.about-history-intro{
  margin-top: 12px;
}

.about-history-hero{
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid var(--accent-red, #c1121f);
  background: rgba(255,255,255,.75);
}

.about-history-banner{
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Row beneath banner */
.about-history-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

/* Left caption */
.about-history-caption{
  flex: 0 0 auto;
  text-align: left;
}

.about-history-kicker{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 15px;
  line-height: 1.15;
}

.about-history-sub{
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
  margin-top: 2px;
}

/* Right thumbs: smaller than Eat-card thumbs */
.about-history-thumbs{
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Smaller square thumbs (tweak size here) */
.about-history-thumb{
  width: 54px;             /* ✅ DIAL: change to 48–62 */
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(17,24,39,.14);
  background: rgba(255,255,255,.8);
  padding: 0;
  cursor: pointer;
}

.about-history-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .14s ease;
}

.about-history-thumb:hover img{
  transform: scale(1.06);
}
/* History thumbs: glow + lift */
.about-history-thumb{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.about-history-thumb:hover{
  transform: translateY(-3px);
  border-color: var(--accent-red, #c1121f);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
/* Responsive: wrap thumbs under caption on narrow screens */
@media (max-width: 700px){
  .about-history-row{
    flex-direction: column;
    align-items: flex-start;
  }
  .about-history-thumbs{
    margin-left: 0;
    flex-wrap: wrap;
  }
}

/* Banner preview fade effect */
.about-history-banner{
  transition: opacity .18s ease;
}

.about-history-banner.is-fading{
  opacity: 0;
}
/* Prevent hover-preview "shaking": lock banner size so image swaps don't reflow layout */
/* About Clayton history banner background for contained previews */
.about-history-hero{
  aspect-ratio: 3 / 1;
  width: 100%;
  overflow: hidden;

  /* NEW newspaper-style backdrop */
  background: 
    url("https://assets.codepen.io/14924810/About+Clayton.Gallery+Intro+Banner.background.newspaper+styling.PNG")
    center / cover no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Banner image behavior */
.about-history-banner{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* default hero banner */
  object-position: center;
  display: block;
  transition: opacity .18s ease;
}

/* Hover preview = show full photo without crop */
.about-history-banner.is-preview{
  object-fit: contain;
}
/* =========================
   Helpful Links Modals: single-column badge rows (Courthouse, etc.)
   ========================= */

/* Red border around the modal itself */
.modal-overlay .modal{
  border: 2px solid var(--accent-red, #c1121f);
  border-radius: 16px;
}

/* Single-column list */
.badge-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

/* Each link row = "button" card with red border */
.badge-row{
  display: grid;
  grid-template-columns: 56px 1fr; /* badge + text */
  gap: 12px;
  align-items: center;

  border: 2px solid var(--accent-red, #c1121f);
  border-radius: 14px;
  padding: 10px 12px;

  background: rgba(255,255,255,.78);
  text-decoration: none;
  color: inherit;
}

/* Keep badges/logos the same size */
.badge-row img{
  width: 56px;
  height: 56px;
  object-fit: contain; /* preserves logo */
  border-radius: 12px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(17,24,39,.10);
  display: block;
}

/* Title + description stacked, left-aligned */
.badge-text{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.badge-text strong{
  font-size: 14px;
  line-height: 1.2;
}

.badge-text span{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
}

/* Hover polish */
.badge-row:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}
/* Soft museum-style floating shadow under preview image */
.about-history-banner.is-preview{
  object-fit: contain;
  padding: 10px; /* gives space for shadow breathing room */
  box-sizing: border-box;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}
/* =========================
   Section ribbon divider (scroll transition effect)
   ========================= */

.section-ribbon{
  background: #c1121f;
  padding: 18px 22px;
  margin: 60px 0 28px;   /* space between sections */
  position: relative;
}

.section-ribbon-title{
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 900;
  letter-spacing: .6px;
  color: #000;

  /* subtle white lift so black pops on red */
  text-shadow:
    0 1px 0 rgba(255,255,255,.75),
    0 2px 2px rgba(0,0,0,.15);
}
/* =========================
   Section ribbon (integrated into section card)
   ========================= */

/* If your section container already has a class, use it here.
   Otherwise you can add class="section-card" to the container. */
.section-card{
  border-radius: 18px;           /* match your card radius */
  overflow: hidden;              /* IMPORTANT: ribbon flush + rounded corners */
}

/* Ribbon sits flush at top + sides */
.section-ribbon{
  margin: 0;                     /* no floating gap */
  padding: 10px 16px;            /* ~1/3 shorter than before */
  border-radius: 18px 18px 0 0;  /* ONLY top corners rounded */
  
  /* red → white gradient */
  background: linear-gradient(180deg,
    rgba(193,18,31,1) 0%,
    rgba(193,18,31,.75) 35%,
    rgba(255,255,255,.88) 100%
  );

  /* optional subtle definition */
  border-bottom: 1px solid rgba(17,24,39,.10);
}

/* Smaller title to match reduced ribbon height */
.section-ribbon-title{
  display: inline-block;
  font-size: clamp(1.25rem, 2.2vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .5px;
  color: #000;

  /* slight white shadowing as requested */
  text-shadow:
    0 1px 0 rgba(255,255,255,.75),
    0 2px 2px rgba(0,0,0,.12);
}
/* Main gallery image smooth swap */
.card-media.gallery .gallery-main{
  transition: opacity .15s ease;
}

.card-media.gallery .gallery-main.is-fading{
  opacity: 0;
}
.section-ribbon-title{
  font-family: 'Playfair Display', serif;
}
.helpful-single{
  margin-top: 12px;
}

.helpful-single .badge-card{
  display:flex;
  align-items:center;
  gap:14px;
  border:2px solid #c1121f;
  border-radius:14px;
  padding:12px 14px;
  text-decoration:none;
  transition:.2s ease;
}

.helpful-single .badge-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(0,0,0,.15);
}

.helpful-single img{
  width:60px;
  height:60px;
  object-fit:contain;
  flex-shrink:0;
}

.helpful-single .badge-title{
  font-weight:700;
  display:block;
}

.helpful-single .badge-desc{
  font-size:13px;
  color:var(--muted);
}
.btn i{
  margin-right: 8px;
  font-size: 1em;
  line-height: 1;
}
.nav-link i{
  margin-right: 8px;     /* space between icon + text */
  font-size: 1em;
  vertical-align: middle;
}
.nav-link:hover i{
  color: #c1121f;
  transform: translateY(-1px);
  transition: .15s ease;
}
/* Top Pill Icon */
.nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-icon {
  font-size: 18px;
  color: #000000; /* professional red */
}

/* Dropdown Layout */
.dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dd-icon {
  width: 18px;
  text-align: center;
  font-size: 15px;
  color: #555;
}

/* Helpful Links Button */
.btn-ghost {
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-icon {
  font-size: 18px;
  color: #c62828;
}
/* ===== NAV ICON SYSTEM (Reusable) ===== */

/* Nav link layout (pill) */
.nav-link{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Top-level pill icon */
.nav-icon{
  font-size:18px;
}

/* Dropdown layout */
.dropdown a{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Dropdown icon (subtle + aligned) */
.dd-icon{
  width:18px;
  text-align:center;
  font-size:15px;
  color:#555;
}

/* Helpful Links button layout */
.btn-ghost{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Helpful Links icon matches category */
.help-icon{
  font-size:18px;
}

/* Optional polish: color on hover */
.dropdown a:hover .dd-icon{
  opacity:.9;
}

/* ===== CATEGORY COLORS (set per nav-item) ===== */
.nav-item[data-theme="city"] .nav-icon,
.nav-item[data-theme="city"] .help-icon{
  color:#c000000;
}
.nav-item[data-theme="honeydo"] .nav-icon,
.nav-item[data-theme="honeydo"] .help-icon{
  color:#6d4c41;
}
.nav-item[data-theme="health"] .nav-icon,
.nav-item[data-theme="health"] .help-icon{
  color:#2e7d32;
}
.nav-item[data-theme="emergency"] .nav-icon,
.nav-item[data-theme="emergency"] .help-icon{
  color:#b71c1c;
}
.nav-item[data-theme="housing"] .nav-icon,
.nav-item[data-theme="housing"] .help-icon{
  color:#1565c0;
}
.nav-item[data-theme="utilities"] .nav-icon,
.nav-item[data-theme="utilities"] .help-icon{
  color:#f9a825;
}
.nav-item[data-theme="cell"] .nav-icon,
.nav-item[data-theme="cell"] .help-icon{
  color:#00796b;
}
.nav-item[data-theme="foodbank"] .nav-icon,
.nav-item[data-theme="foodbank"] .help-icon{
  color:#ef6c00;
}
.nav-item[data-theme="shopping"] .nav-icon,
.nav-item[data-theme="shopping"] .help-icon{
  color:#6a1b9a;
}
.nav-item[data-theme="restaurants"] .nav-icon,
.nav-item[data-theme="restaurants"] .help-icon{
  color:#d84315;
}
.nav-item[data-theme="todo"] .nav-icon,
.nav-item[data-theme="todo"] .help-icon{
  color:#2e7d32;
}
.nav-item[data-theme="school"] .nav-icon,
.nav-item[data-theme="school"] .help-icon{
  color:#c62828;
}
.nav-item[data-theme="lodging"] .nav-icon,
.nav-item[data-theme="lodging"] .help-icon{
  color:#00838f;
}
.nav-item[data-theme="church"] .nav-icon,
.nav-item[data-theme="church"] .help-icon{
  color:#5d4037;
}
.nav-item[data-theme="news"] .nav-icon,
.nav-item[data-theme="news"] .help-icon{
  color:#37474f;
}
/* Add spacing between icon and text for ALL pills */
.nav-item .nav-link {
  gap: 4px;
}

/* Keep City Services exactly as-is (override if needed) */
.nav-item[data-theme="city"] .nav-link {
  gap: 8px; /* already perfect — keep same or tweak */
}
.nav-icon {
  line-height: 1;
}
/* Dropdown items: consistent icon + text spacing */
.dropdown a,
.submenu a,
.dd-label {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}

.dropdown a > .dd-icon,
.submenu a > .dd-icon,
.dd-label > .dd-icon {
  margin-right: 4px !important; /* your preferred tight spacing */
  flex-shrink: 0;
}

.dd-icon{
  width: 18px;
  text-align: center;
}
/* Make the media area a vertical stack: main image then thumbs */
.card-media.gallery{
  display:flex;
  flex-direction:column;
  gap:10px;                 /* space between main and thumbs */
}

/* Wrap the main image in a clipping context WITHOUT affecting thumbs */
.card-media.gallery .gallery-main{
  display:block;
  width:100%;
  height:auto;              /* important: don't force a fixed height unless you intend to */
}

/* If you have a fixed-height main image somewhere, clip it safely */
.card-media.gallery{
  overflow:visible;         /* thumbs should never be clipped by the media wrapper */
}

/* Thumbs lane: never let it be covered/cropped */
.card-media.gallery .gallery-thumbs{
  position:relative;
  z-index:2;                /* keep thumbs above any main-image effects */
  overflow:visible;
  padding-top:2px;          /* tiny breathing room */
}
.gallery-mainwrap{
  border-radius:12px;       /* match your card style */
  overflow:hidden;          /* clip zoomed main image */
}

/* Now it's safe to zoom the image without touching thumbs */
.gallery-main{
  width:100%;
  display:block;
  transition: transform .18s ease;
}
.gallery-main.is-zoomed,     /* if your JS adds a class */
.gallery-main:hover{
  transform: none;
}
.feature-card .card-media .gallery-mainwrap{
  border-radius: 14px;
  overflow: hidden;
}

.feature-card .card-media .gallery-main{
  height: 200px;
  width: 100%;
  object-fit: cover;
  display:block;
}
/* Never let thumbnail images inherit the main height */
.gallery-thumbs img{
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
  display:block;
}
/* Clayton Lake: 2 rows x 4 thumbs under the main image */
.clayton-lake-card .gallery-thumbs{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}

/* Optional: slightly taller thumbs for the feature card */
.clayton-lake-card .thumb{
  width:auto;     /* let grid control width */
  height:66px;
}
.clayton-lake-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* ===== STOP thumbs from being cropped ===== */

/* 1) Never clip thumbs from card-media */
.clayton-lake-card .card-media.gallery{
  overflow: visible !important;
}

/* 2) Make sure thumbs are not being pulled under the main image */
.clayton-lake-card .gallery-thumbs{
  position: relative !important;
  z-index: 5 !important;
}

/* 3) Ensure the main image wrapper only clips the image, not the thumbs */
.clayton-lake-card .gallery-mainwrap{
  overflow: hidden;          /* OK here */
}

/* 4) Prevent any global rule from forcing thumb image heights */
.clayton-lake-card .gallery-thumbs img{
  height:100% !important;
  max-height:none !important;
}
@media (max-width: 600px){
  .clayton-lake-card .thumb{
    height: 38px;
  }
}
/* Thumbs must NEVER inherit main image sizing */
.gallery-thumbs img{
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  display:block;
}
/* ===== FINAL: main image sizing (safe for thumbs) ===== */

/* Don’t clip thumbs */
.card .card-media{ overflow: visible; }

/* Clip only the main image area */
.card .card-media .gallery-mainwrap{
  overflow: hidden;
  border-radius: 14px;
}

/* Default MAIN image */
.card .card-media .gallery-main,
.card .card-media > img{
  width: 100%;
  height: 180px;
  display:block;
  object-fit: cover;
  object-position: center;
}

/* Eat cards: shorter MAIN image */
.card.eat-card .card-media .gallery-main,
.card.eat-card .card-media > img{
  height: 170px;
}


/* 2) Main image gets a dedicated frame that clips ONLY the image */
.card-media.gallery .gallery-mainwrap{
  width:100% !important;
  height:200px !important;          /* adjust: 180–240 */
  border-radius:14px !important;
  overflow:hidden !important;
  position:relative !important;
}

/* 3) The main image MUST fill the frame (no contain) */
.card-media.gallery .gallery-main{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  transform:none;
}

/* 4) Thumbs lane stays below and never gets clipped */
.card-media.gallery .gallery-thumbs{
  position:relative !important;
  z-index:5 !important;
  overflow:visible !important;
  margin:0 !important;
  padding:0 !important;
}


.card-media.gallery .thumb img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}

/* Clip main image reliably */
.card-media.gallery .gallery-mainwrap{
  overflow: hidden !important;
  border-radius: 14px !important;
}
/* =========================================================
   SINGLE SOURCE OF TRUTH: GALLERY CARDS
   ========================================================= */

/* Gallery card-media should not clip thumbs */
.card-media.gallery{
  overflow: visible;
  display: block;
}

/* Main image frame (clips ONLY the main image) */
.card-media.gallery .gallery-mainwrap{
  width:100%;
  height:220px;              /* main image height */
  overflow:hidden;
  border-radius:14px;
}

/* Main image fills the frame */
.card-media.gallery .gallery-main{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  background:transparent;
}

/* If you intentionally want contain inside a gallery (logos/signs) */
.card-media.gallery.fit-contain .gallery-main{
  object-fit: contain;
  background:#f3f4f6;
  padding:10px;
}

/* Thumbs row (global default for all gallery cards) */
.card-media.gallery .gallery-thumbs{
  display:flex;
  gap:10px;
  padding:10px 12px 4px;     /* tight like you wanted */
  align-items:center;
  justify-content:flex-start;
  position:relative;
  z-index:2;
}

/* Thumb size (restores your “nice” thumbs) */
.card-media.gallery .thumb{
  width:92px;
  height:66px;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  border:2px solid transparent;
  background:transparent;
  cursor:pointer;
  flex:0 0 auto;
}

.card-media.gallery .thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Active thumb styling */
.card-media.gallery .thumb.is-active{
  border-color: rgba(37,110,79,.95);
  box-shadow: 0 8px 18px rgba(15,23,42,.18);
}
/* =========================================================
   GALLERY SPACING + FRAME FIX (PASTE AT VERY BOTTOM)
   ========================================================= */

/* 1) Ensure gallery stacks main then thumbs with a gap */
.card-media.gallery{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;              /* <-- the spacing you want */
  overflow: visible !important;
}

/* 2) Main frame controls height; image fills it */
.card-media.gallery .gallery-mainwrap{
  height: 200px !important;          /* adjust 180–240 */
  border-radius: 14px !important;
  overflow: hidden !important;
}

.card-media.gallery .gallery-main{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* 3) Thumbs row never clips + has its own spacing */
.card-media.gallery .gallery-thumbs{
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* 4) Thumb sizing (restore “normal” look) */
.card-media.gallery .thumb{
  width: 92px !important;
  height: 66px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 2px solid transparent !important;
  background: transparent !important;
}

.card-media.gallery .thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
/* =========================
   FINAL GALLERY SIZING (ONE SYSTEM)
   Wrapper controls height, thumbs never get clipped.
   Paste LAST in CSS.
   ========================= */

/* Non-gallery cards: keep your normal behavior */
.card-media:not(.gallery) > img{
  width:100%;
  height:180px;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Galleries: wrapper is the frame */
.card-media.gallery{
  display:flex;
  flex-direction:column;
  gap:10px;              /* <-- restores space between main + thumbs */
  overflow:visible;      /* thumbs never clipped */
}

/* Main frame */
.card-media.gallery .gallery-mainwrap{
  width:100%;
  height:200px;          /* pick your universal gallery height */
  border-radius:14px;
  overflow:hidden;       /* clips ONLY main image */
}

/* Main image fills the frame */
.card-media.gallery .gallery-main{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

/* Thumbs lane */
.card-media.gallery .gallery-thumbs{
  position:relative;
  z-index:5;
  overflow:visible;
  margin:0;
  padding:0;
}

/* Thumb sizing */
.card-media.gallery .thumb{
  width:92px;
  height:66px;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  border:2px solid transparent;
  background:transparent;
  flex:0 0 auto;
}
.card-media.gallery .thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* OPTIONAL: eat-card galleries slightly shorter main */
.card.eat-card .card-media.gallery .gallery-mainwrap{
  height:190px;
}

/* OPTIONAL: fit-contain galleries show logos nicely */
.card-media.gallery.fit-contain .gallery-main{
  object-fit:contain;
  background:#f3f4f6;
  padding:10px;
}
/* FINAL hard stop: main can never escape the frame */
.card-media.gallery .gallery-mainwrap{
  overflow:hidden !important;
}
.card-media.gallery .gallery-main{
  max-width:100% !important;
  max-height:100% !important;
}
/* =========================================================
   FINAL GALLERY LOCK (paste at VERY BOTTOM)
   Fixes:
   - Main images expanding outside frame (Shop + Eat/Drink)
   - Random cropping after hover/swap
   - fit-contain messing with thumbs or sizing
   - No gap between main + thumbs
   ========================================================= */

/* 0) Safety: cards should not clip thumbs */
.card .card-media{
  overflow: visible !important;
}

/* 1) Gallery layout: main frame then thumbs lane */
.card .card-media.gallery{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;            /* restores space between main + thumbs */
  overflow: visible !important;
}

/* 2) Main image frame (this is the ONLY thing that clips) */
.card .card-media.gallery .gallery-mainwrap{
  width: 100% !important;
  height: 200px !important;        /* adjust 180–240 to taste */
  border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 3) Main image ALWAYS fills the frame */
.card .card-media.gallery .gallery-main{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* 4) Thumbs lane never gets pulled under main image */
.card .card-media.gallery .gallery-thumbs{
  position: relative !important;
  z-index: 5 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important; /* keep the 3 thumbs in a row */
}

/* 5) Thumb buttons define size; images fill them */
.card .card-media.gallery .thumb{
  width: 92px !important;
  height: 66px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
}

.card .card-media.gallery .thumb img{
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 6) fit-contain should ONLY change the MAIN image look (not sizing) */
.card .card-media.gallery.fit-contain .gallery-mainwrap{
  background: #f3f4f6 !important;
}

.card .card-media.gallery.fit-contain .gallery-main{
  object-fit: contain !important;  /* logos/signs */
  background: transparent !important;
}

/* IMPORTANT: thumbs stay cover even in fit-contain galleries */
.card .card-media.gallery.fit-contain .thumb img{
  object-fit: cover !important;
  background: transparent !important;
}

/* 7) Eat cards: slightly shorter main frame if you want */
.card.eat-card .card-media.gallery .gallery-mainwrap{
  height: 190px !important;        /* optional; remove if you want all 200px */
}

/* 8) Mobile: make thumbs a bit smaller so they fit */
@media (max-width: 640px){
  .card .card-media.gallery .thumb{
    width: 78px !important;
    height: 56px !important;
  }
  .card .card-media.gallery{
    gap: 8px !important;
  }
}
/* ===== Clayton Lake: force main image to FILL the feature frame ===== */

/* Make the Clayton Lake main frame taller (since it’s a feature card) */
#clayton-lake .card-media.gallery .gallery-mainwrap{
  height: 260px !important; /* tweak 220–320 */
}
/* ===== Sardis Lake: match Clayton Lake height ===== */
#sardis-lake .card-media.gallery .gallery-mainwrap{
  height: 260px !important;  /* must match Clayton Lake */
}

/* EVEN IF this card has fit-contain, do NOT contain the main image */
#clayton-lake .card-media.gallery.fit-contain .gallery-main{
  object-fit: cover !important;
  background: transparent !important;
}

/* Prevent the “bottom gets cut off” look by nudging the crop */
#clayton-lake .card-media.gallery .gallery-main{
  object-position: center 80% !important; /* try 70–95% */
}

/* ===== Clayton Lake thumbs: 2 rows x 4 ===== */
#clayton-lake .card-media.gallery .gallery-thumbs{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

/* Thumbs: elongated but clean */
#clayton-lake .card-media.gallery .thumb{
  width: 100% !important;   /* grid controls width */
  height: 54px !important;  /* tweak 44–66 */
}
/* ===== RESERVED STUDENT ENTREPRENEUR CARDS ===== */
.reserved-card .reserved-media{
  height: 200px;              /* matches your main image frame vibe */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 10%, rgba(185,28,28,.10), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(37,99,235,.10), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  border: 2px dashed rgba(185,28,28,.45);
  color: #111827;
}

.reserved-card .reserved-badge{
  align-self: flex-start;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(185,28,28,.10);
  border: 1px solid rgba(185,28,28,.35);
}

.reserved-card .reserved-title{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.reserved-card .reserved-sub{
  font-size: 14px;
  font-weight: 700;
  color: rgba(17,24,39,.82);
}

.reserved-card .reserved-note{
  font-size: 12px;
  color: rgba(17,24,39,.70);
  line-height: 1.25;
  max-width: 46ch;
}

.reserved-card .reserved-bullets{
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: rgba(17,24,39,.75);
  line-height: 1.35;
}

.reserved-card:hover .reserved-media{
  border-color: rgba(185,28,28,.75);
  background:
    radial-gradient(circle at 20% 10%, rgba(185,28,28,.16), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(37,99,235,.16), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.80));
}
/* ===== Helpful Resources modal gallery ===== */
.resource-group-title{
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}

.resource-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 720px){
  .resource-grid{ grid-template-columns: 1fr; }
}

.resource-tile{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
  text-decoration: none;
  color: inherit;
}

.resource-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}

.resource-icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.9);
  font-size: 18px;
}

.resource-title{
  font-weight: 800;
  font-size: 13px;
  line-height: 1.2;
}

.resource-sub{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
  margin-top: 2px;
}

.modal-note{
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 10px;
}

.modal-footer-note{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(15,23,42,.10);
  font-size: 12px;
  color: var(--muted);
}
/* ===== Modal base ===== */
.modal-overlay{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(15, 23, 42, .55);
  z-index: 9999;
}

.modal-overlay.is-open{
  display: flex;
}

.modal{
  width: min(920px, 100%);
  max-height: min(80vh, 760px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
  position: relative;
}

.modal-close{
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* optional grid for resources */
.resource-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 720px){
  .resource-grid{ grid-template-columns: 1fr; }
}

.resource-tile{
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.12);
  text-decoration: none;
  color: inherit;
  background: rgba(255,255,255,.9);
}

.resource-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15,23,42,.12);
}

.resource-badge{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(185,28,28,.08);
}

.resource-name{ font-weight: 800; }
.resource-desc{ font-size: 13px; color: var(--muted); margin-top: 2px; }

.modal-overlay { display:none; }
.modal-overlay.is-open { display:flex; }
/* =========================================================
   MORE PHOTOS MODAL: thumbnail sizing (safe + universal)
   ========================================================= */

#photosModalOverlay .thumb{
  width: 72px;
  height: 52px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  flex: 0 0 auto;
}

#photosModalOverlay .thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep the strip from overlapping by allowing wrap */
#photosModalOverlay .gallery-thumbs{
  display: flex;
  flex-wrap: wrap;     /* key: prevents overlap when lots of photos */
  gap: 10px;
  align-items: center;
}
/* =========================================================
   MORE PHOTOS MODAL: smaller preview thumbs
   ========================================================= */

/* The preview grid inside the modal */
#photosModalOverlay .lightbox-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)) !important;
  gap: 8px !important;
  align-items: start !important;
}

/* Each preview item inside the grid */
#photosModalOverlay .lightbox-grid > *{
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
}

/* Preview images */
#photosModalOverlay .lightbox-grid img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Keep the large selected image large */
#photosModalOverlay .viewer{
  margin-top: 12px !important;
}

#photosModalOverlay #viewerImg{
  width: 100% !important;
  max-height: 70vh !important;
  object-fit: contain !important;
  display: block !important;
}
/* =========================================================
   MORE PHOTOS MODAL: make the window smaller + cleaner
   ========================================================= */

#photosModalOverlay .modal{
  width: min(920px, 92vw) !important;     /* shrink overall width */
  max-height: 84vh !important;            /* shrink overall height */
}

#photosModalOverlay .modal-body{
  max-height: calc(84vh - 64px) !important; /* subtract header area */
  overflow: auto !important;
}
/* =========================================================
   MORE PHOTOS MODAL: viewer at top + thumbs beneath
   ========================================================= */

#photosModalOverlay .modal-body{
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Put viewer first (top) without changing HTML order */
#photosModalOverlay #photoViewer{
  order: -1 !important;
}

/* Give the top image a real “frame” */
#photosModalOverlay #photoViewer{
  display: none;                 /* stays hidden until we activate it */
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.12);
  background: rgba(0,0,0,.03);
}

/* When active, show it */
#photosModalOverlay #photoViewer.is-open{
  display: block;
}

/* Size the top image area */
#photosModalOverlay #viewerImg{
  width: 100% !important;
  height: min(340px, 38vh) !important;  /* adjust to taste */
  object-fit: contain !important;       /* contain looks best in modals */
  display: block !important;
  background: rgba(255,255,255,.65);
}
.resource-badge{
  width:46px;
  height:46px;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(17,24,39,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}

.resource-badge img{
  width:85%;
  height:85%;
  object-fit:contain;
}
/* =========================================================
   MORE PHOTOS VIEWER: scenic background behind enlarged image
   ========================================================= */

#photosModalOverlay #photoViewer{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(17,24,39,.12);

  /* scenic Clayton background */
  background-image:
    linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)),
    url("https://assets.codepen.io/14924810/Background+for+Gallery+Thumbs+pop-up+window.scenic+mountain+view.1.PNG");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Enlarged image sits on top of the background */
#photosModalOverlay #viewerImg{
  width: 100% !important;
  height: min(340px, 38vh) !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;

  /* keep image itself transparent so background shows at edges */
  background: transparent !important;
}
/* =========================================================
   MAGNIFY BUTTON – glass / mirror style
   ========================================================= */

#cursorToggle{
  position: fixed;
  right: 18px;
  bottom: 76px;
  z-index: 9999;
  border:1px solid #ffffff;
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.25) inset;
}

#zoomToggle{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
}

#backToTop{
  position: fixed;
  right: 18px;
  bottom: 130px;
  z-index: 9999;
  border:1px solid #ffffff;
  box-shadow:
    0 8px 18px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.25) inset;
}

/* =========================================================
   MAGNIFY BUTTON – GLASS STYLE
   ========================================================= */

.magnify-btn{
  position: fixed;
  right: 18px;
  bottom: 76px;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  min-width: 150px;
  height: 44px;
  padding: 0 16px;

  /* override site button styles */
  background: linear-gradient(
  180deg,
  #4a4a4a 0%,
  #2f2f2f 60%,
  #1f1f1f 100%
) !important;
  border: 1px solid #000 !important;
  color: #111827 !important;

  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;

  box-shadow:
    0 10px 22px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.18);
}

/* inner gray border */
.magnify-btn::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:999px;
  border:1px solid #bcbcbc;
  pointer-events:none;
}


/* glass surface */
.magnify-btn::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.95) 0%,
      rgba(232,238,245,.92) 25%,
      rgba(190,200,210,.88) 50%,
      rgba(232,238,245,.92) 75%,
      rgba(255,255,255,.96) 100%
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(0,0,0,.08);

  pointer-events:none;
}

.magnify-label,
.magnify-level{
  position:relative;
  z-index:2;
  font-weight:800;
}
/* Glass highlight reflection */

.magnify-btn .magnify-label::before{
  content:"";
  position:absolute;
  top:-6px;
  left:-18px;
  width:140%;
  height:60%;
  border-radius:50%;
  background:linear-gradient(
    to bottom,
    rgba(255,255,255,.75),
    rgba(255,255,255,.25),
    rgba(255,255,255,0)
  );
  opacity:.45;
  pointer-events:none;
}
.magnify-level{
  min-width:40px;
  text-align:right;
}

@keyframes magnifyPulse{
  0%   { opacity: .35; }
  50%  { opacity: 1; }
  100% { opacity: .35; }
}

.magnify-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 12px 26px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.18);
}

.magnify-btn:active{
  transform: translateY(0);
}

.billpay-box{
  margin-top: 12px;
  padding: 14px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.billpay-title{
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink);
}

.billpay-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.billpay-qr{
  margin-top: 14px;
}

.billpay-qr img{
  width: 180px;
  height: 180px;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.10);
  background: #fff;
  padding: 8px;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

.billpay-note{
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
/* =========================================================
   CARD UTILITY BOX
   Reusable framed box for Bill Pay / Helpful Links / EMS
   ========================================================= */

.card-utility-box{
  margin-top: 14px;
  padding: 12px;
  border: 1.5px solid #b91c1c; /* 🔴 RED BORDER */
  border-radius: 14px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 16px rgba(15,23,42,.08);
}

.card-utility-note{
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
/* =========================================================
   NAV TARGET HIGHLIGHT
   ========================================================= */

.card:target{
  animation: cardHighlight 2.2s ease;
  box-shadow:
    0 0 0 3px rgba(220,38,38,.85),
    0 12px 28px rgba(0,0,0,.28);
  border-color:#dc2626;
}

@keyframes cardHighlight{
  0%{
    box-shadow:
      0 0 0 6px rgba(220,38,38,0.85),
      0 16px 36px rgba(0,0,0,.32);
  }
  100%{
    box-shadow:
      0 0 0 0 rgba(220,38,38,0),
      0 12px 28px rgba(0,0,0,.28);
  }
}
.ems-logo-row{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  align-items: center;
}

.ems-logo-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  min-height: 72px;
  padding: 8px;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 6px 14px rgba(15,23,42,.05);
}

.ems-logo-link img{
  max-width: 100%;
  max-height: 54px;
  display: block;
  object-fit: contain;
}
/* Stack EMS provider buttons vertically */

.ems-stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}
/* Schools hero image */
.schools-hero-img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 14px;
  margin: 10px 0 14px;
}

/* Grid */
.schools-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 14px;
}

/* Column card */
.school-column{
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  border: 1.5px solid #b91c1c; /* 🔴 RED BORDER */
  box-shadow: 0 8px 16px rgba(15,23,42,.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.school-column h5{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

/* Gallery */
.school-gallery img{
  width: 100%;
  height: 130px;
  object-fit: cover;
  border-radius: 10px;
}

.school-gallery .thumbs{
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.school-gallery .thumbs img{
  width: 33%;
  height: 50px;
  object-fit: cover;
  border-radius: 8px;
}

/* Button spacing */
.school-column .btn{
  margin-top: auto;
}

/* Mobile */
@media (max-width: 900px){
  .schools-grid{
    grid-template-columns: 1fr;
  }
}
.school-column{
  transition: transform .2s ease, box-shadow .2s ease;
}

.school-column:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(185,28,28,.15);
}
.school-column h5{
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #b91c1c; /* 🔴 make headers red */
}
.church-card .card-media.gallery .gallery-mainwrap{
  height: 200px !important;
  padding: 0 22px 0 22px !important;   /* top right bottom left */
  background: #f8fafc;
  border-radius: 14px;
  overflow: hidden;
}

.church-card .card-media.gallery .gallery-main{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: top center !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #f8fafc;
}
/* Ticket Pay Box – inherits card-utility-box styling */

.ticket-title-icon{
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Row layout (badge + button) */
.ticket-pay-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

/* Badge styling */
.ticket-badge{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  border: 2px solid #111827;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  background: #fff;
}

.ticket-badge img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Button (keeps your system styling) */
.ticket-pay-btn{
  font-weight: 800;
  letter-spacing: .3px;
  padding: 10px 18px;
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease;
}

.ticket-pay-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15,23,42,.15);
}

/* "fast" styling (kept from before, refined) */
.speed-word{
  display: inline-block;
  font-weight: 900;
  font-style: italic;
  letter-spacing: .4px;
  color: #b91c1c;
  transform: skew(-14deg);
}

/* Mobile */
@media (max-width: 640px){
  .ticket-pay-row{
    flex-direction: column;
    align-items: stretch;
  }

  .ticket-badge{
    margin: 0 auto;
  }

  .ticket-pay-btn{
    width: 100%;
    text-align: center;
  }
}
.ticket-badge:hover{
  transform: scale(1.06);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
.ticket-btn-text{
  white-space: nowrap;
}
.ticket-pay-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.ticket-pay-btn{
  white-space: nowrap;
  flex-shrink: 0;
}
:root{
  scroll-padding-top: 110px; /* adjust to your header height */
}
html{
  scroll-behavior: smooth;
}
:target{
  animation: highlightCard 1.2s ease;
}

@keyframes highlightCard{
  0%{ box-shadow: 0 0 0 0 rgba(185,28,28,0); }
  50%{ box-shadow: 0 0 0 6px rgba(185,28,28,.25); }
  100%{ box-shadow: 0 0 0 0 rgba(185,28,28,0); }
}