/* =============================================================================
   PLUMSTEAD BAPTIST CHURCH — MAIN STYLESHEET
   All colours, layout, and visual design for the site. Sections are commented
   so you can find and adjust styles for specific parts of the site.
   ============================================================================= */

/* --- Colour palette (Cape Dutch–inspired) --- */
:root {
  --beige: #e9dfcf;
  --light-grey: #e6e6e3;
  --stone-grey: #6b6b65;
  --ochre: #c2943a;
  --pastel-blue: #9fb8c7;
  --deep-blue: #1f3a56;
  --dark: #1c1c1a;
  --white: #ffffff;
}

/* --- Base: reset and global body/link styles --- */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  color: var(--dark);
  background: var(--light-grey);
  line-height: 1.5;
}

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

img {
  max-width: 100%;
  display: block;
  height: auto;
}

/* --- Hero banner (home page top section with rotating images) --- */
.hero {
  position: relative;
  /* ~80% of the original banner height so more of the page is visible on load */
  height: 58vh;
  min-height: 416px;
  color: var(--white);
  overflow: hidden;
  background: var(--deep-blue);
}

/* Hero: background slide images and overlay */
.hero__slides {
  position: absolute;
  inset: 0;
  display: grid;
  pointer-events: none;
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: translateX(100%);
  opacity: 0;
  transition: transform 400ms ease-in-out, opacity 400ms ease-in-out;
}

.hero__slide.is-active {
  transform: translateX(0);
  opacity: 1;
}

.hero__slide.is-leaving {
  transform: translateX(-100%);
  opacity: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(31, 58, 86, 0.55) 0%,
    rgba(31, 58, 86, 0.5) 40%,
    rgba(28, 28, 26, 0.45) 100%
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hero__dots {
  position: absolute;
  inset-inline: 0;
  bottom: 0.9rem;
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  z-index: 60;
  pointer-events: auto;
}

.hero__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.hero__dot.is-active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.1);
}

/* Hero: top bar (nav + logo) — fixed on scroll, shrinks when scrolled (see body.header-compact below) */
.hero__top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--deep-blue);
  transition: padding 160ms ease, box-shadow 160ms ease, background 200ms ease;
}

.nav {
  display: flex;
  gap: 1.25rem;
}

.nav a {
  padding: 0.5rem 0.75rem;
  color: var(--white);
  font-weight: 600;
  opacity: 0.95;
}

.nav a:hover {
  opacity: 1;
  text-decoration: underline;
}

.nav a.is-active {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
  font-weight: 700;
}

/* External nav link (e.g. "Sermons" -> YouTube): keeps the text and its
   small "opens in a new tab" arrow icon together on one line, with a little
   space between them. The icon is sized in em so it scales with the text. */
.nav a.nav__external {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
}

/* Logo in header (image + church name) */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(233, 223, 207, 0.2);
  border: 1px solid rgba(233, 223, 207, 0.35);
  padding: 0.35rem 0.6rem 0.35rem 0.5rem;
  border-radius: 8px;
  backdrop-filter: blur(3px);
}

.logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.logo span {
  color: var(--beige);
  font-weight: 700;
  letter-spacing: 0.2px;
}

/* Hero: centred welcome text and tagline */
.hero__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 1.5rem;
  z-index: 10;
}

.hero__content {
  max-width: 1000px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--beige);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.hero p {
  margin: 0.85rem auto 1.5rem;
  max-width: 760px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: #f3f0ea;
  opacity: 0.95;
}

.hero__bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 2rem;
  z-index: 10;
  text-align: center;
}

/* Buttons (primary = gold, ghost = outline) */
.btn {
  display: inline-block;
  padding: 0.85rem 1.25rem;
  border-radius: 10px;
  font-weight: 700;
  border: 2px solid transparent;
  transition: transform 120ms ease, box-shadow 120ms ease, background 200ms ease,
    color 200ms ease;
  cursor: pointer;
}

.btn--primary {
  background: linear-gradient(180deg, var(--ochre), #b78934);
  color: var(--dark);
  border-color: rgba(28, 28, 26, 0.15);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

/* --- Page sections and layout containers --- */
.section {
  padding: 3rem 1.25rem;
  width: 100%;
}

.container {
  max-width: 1150px;
  margin: 0 auto;
  width: 100%;
}

/* Intro section (e.g. "Who we are" card) — light grey background */
.intro {
  background: var(--light-grey);
}

/* Card: white box with optional image (e.g. intro, about) */
.card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  background: var(--white);
  border: 1px solid rgba(107, 107, 101, 0.18);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 12px 28px rgba(31, 58, 86, 0.06);
}

.about-page .card {
  grid-template-columns: 1fr;
}

.card h2 {
  margin: 0 0 0.75rem 0;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  color: var(--deep-blue);
}

.card p {
  color: #3b3b38;
  margin: 0.5rem 0 1rem 0;
}

.card .actions {
  margin-top: 1rem;
}

.btn--ghost {
  background: transparent;
  color: var(--deep-blue);
  border-color: var(--deep-blue);
}

.btn--ghost:hover {
  background: rgba(31, 58, 86, 0.08);
}

.card__media {
  border-radius: 12px;
  overflow: hidden;
  background: var(--pastel-blue);
  min-height: 280px;
  display: grid;
  place-items: center;
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.4px;
}

.about-gallery {
  margin-top: 1.5rem;
}

.about-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

/* About gallery photos (History, Ministries, Squirrels Leap Farm tabs).
   -----------------------------------------------------------------------------
   IMAGE CONTROLS — About page gallery photos
   To zoom a single photo in or out, add style="--image-scale: 0.9;" (or 1.1)
   on that photo's <figure class="about-photo"> in templates/about.html.
   Default is 1 (full width of its grid cell). Does NOT affect the Statement
   of Faith banner — see "faith-banner" controls further down. */
.about-photo {
  margin: 0;
  overflow: hidden;
  --image-scale: 1;
}

.about-photo img {
  width: calc(100% * var(--image-scale));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  display: block;
  transition: width 0.2s ease;
}

.about-photo figcaption {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: #4a4a46;
}

/* History galleries: masonry-style layout to reduce blank space between mixed image sizes */
.panel-history .about-gallery-grid {
  column-count: 3;
  column-gap: 1rem;
}

.panel-history .about-photo {
  break-inside: avoid;
  margin: 0 0 1rem 0;
}

.about-quote {
  margin: 1.5rem 0 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: rgba(159, 184, 199, 0.15);
  border-left: 4px solid var(--ochre);
  border-radius: 12px;
  position: relative;
}

.about-quote__marks {
  position: absolute;
  top: -0.8rem;
  left: 0.9rem;
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(31, 58, 86, 0.2);
  pointer-events: none;
}

.about-quote blockquote {
  margin: 0;
  font-style: italic;
  color: #2f3439;
}

.about-quote__source {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #555;
}

/* Floated variant of .about-quote: the quote sits on the right of the panel
   and any sibling headings / paragraphs wrap around it on the left, similar
   to how a floated image behaves in a Word document.
   On narrower screens this collapses back to a normal full-width block so
   the quote stays readable on tablets and phones. */
.about-quote--float-right {
  float: right;
  clear: right;
  width: 45%;
  max-width: 380px;
  margin: 0.25rem 0 1rem 1.5rem;
}

/* Ensure the parent .panel fully contains the floated quote (so the float
   does not bleed past the section into the next gallery / panel below).
   display: flow-root is the modern, side-effect-free clearfix. */
.panel:has(.about-quote--float-right) {
  display: flow-root;
}

@media (max-width: 720px) {
  .about-quote--float-right {
    float: none;
    width: auto;
    max-width: none;
    margin: 1.5rem 0 1.75rem 0;
  }
}

/* ============================================================================
   Statement of Faith "creed card"
   Used on the About page to make the church's confession of faith feel like
   the centrepiece of the page rather than just another bulleted list.

   - Soft cream/beige background with a thick ochre top accent bar (echoes the
     about-quote left accent so the design language is consistent).
   - "We believe" line is styled as a small-caps banner with an ochre underline.
   - Each belief is rendered as a numbered "article" via a CSS counter, with
     a small ochre circle marker on the left replacing the default bullet.
   - Falls back gracefully on small screens (smaller markers, less padding).
   ============================================================================ */
.statement-of-faith-card {
  margin: 1.25rem 0 1.5rem 0;
  padding: 1.75rem 1.75rem 1.25rem 1.75rem;
  background: linear-gradient(180deg, rgba(233, 223, 207, 0.55), rgba(255, 255, 255, 0.95));
  border: 1px solid rgba(194, 148, 58, 0.35);
  border-top: 4px solid var(--ochre);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(31, 58, 86, 0.08);
}

.statement-of-faith-card__title {
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--deep-blue);
  border-bottom: 2px solid rgba(194, 148, 58, 0.5);
}

.statement-of-faith-card__title strong {
  font-weight: 700;
}

.statement-of-faith-list {
  margin: 0;
}

/* Each belief gets a small ochre bullet (a coloured dot) on the left,
   matching the ochre accents on the surrounding creed card. The custom
   bullet replaces the default disc marker (which .list already hides).

   Spacing rationale: the bullet sits ~0.5rem in from the card edge and is
   0.5rem wide, so its right edge is at ~1rem. The list item's left padding
   is 2rem, which guarantees a clear ~1rem gap between the bullet and the
   first character of the text (so the dot never overlaps the wording). */
.statement-of-faith-card .statement-of-faith-list > li {
  position: relative;
  padding: 0.55rem 0 0.6rem 2rem;
  line-height: 1.55;
  color: #2f3439;
}

.statement-of-faith-card .statement-of-faith-list > li::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 1.1rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--ochre);
  border-radius: 50%;
}

@media (max-width: 620px) {
  .statement-of-faith-card {
    padding: 1.25rem 1.1rem;
  }
}

/* =============================================================================
   IMAGE CONTROLS — Statement of Faith banner (About page, Statement of Faith tab)
   -----------------------------------------------------------------------------
   Affects ONLY the photo below the Acts 4 quote in templates/about.html
   (<figure class="faith-banner">). No other image on the site uses these rules.

   HOW TO TWEAK (change the values on .panel-faith .faith-banner below):
     --faith-banner-max-width   Maximum width of the image (centred).
     --faith-banner-max-height  Tallest the image may be; scales down to fit
                                without cropping.
     --faith-banner-radius      Rounded corners (matches other About photos).

   No coloured frame or padding — just the photo on the page background, like
   the gallery images elsewhere on the About page.
   ============================================================================= */
.panel-faith .faith-banner {
  --faith-banner-max-width: min(100%, 720px);
  --faith-banner-max-height: 360px;
  --faith-banner-radius: 10px;

  margin: 1.5rem auto 0;
  max-width: var(--faith-banner-max-width);
  text-align: center;
}

.panel-faith .faith-banner__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--faith-banner-max-height);
  margin-left: auto;
  margin-right: auto;
  object-fit: contain;
  object-position: center center;
  border-radius: var(--faith-banner-radius);
}

/* About page: tabbed content (Ministries / History / Statement of Faith / Leadership / Squirrels Leap Farm) */
.about-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-tab-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.about-tab-list {
  display: flex;
  gap: 0;
  border-bottom: 2px solid rgba(31, 58, 86, 0.2);
  margin-bottom: 1.5rem;
}

.about-tab {
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  color: var(--stone-grey);
  cursor: pointer;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.about-tab:hover {
  color: var(--deep-blue);
}

#about-tab-history:checked ~ .about-tab-list .about-tab[for="about-tab-history"],
#about-tab-faith:checked ~ .about-tab-list .about-tab[for="about-tab-faith"],
#about-tab-leadership:checked ~ .about-tab-list .about-tab[for="about-tab-leadership"],
#about-tab-squirrels:checked ~ .about-tab-list .about-tab[for="about-tab-squirrels"],
#about-tab-resources:checked ~ .about-tab-list .about-tab[for="about-tab-resources"],
#about-tab-ministries:checked ~ .about-tab-list .about-tab[for="about-tab-ministries"] {
  color: var(--deep-blue);
  border-bottom-color: var(--ochre);
}

.about-tab-panels {
  position: relative;
}

.about-tab-panel {
  display: none;
}

#about-tab-history:checked ~ .about-tab-panels .panel-history,
#about-tab-faith:checked ~ .about-tab-panels .panel-faith,
#about-tab-leadership:checked ~ .about-tab-panels .panel-leadership,
#about-tab-squirrels:checked ~ .about-tab-panels .panel-squirrels,
#about-tab-resources:checked ~ .about-tab-panels .panel-resources,
#about-tab-ministries:checked ~ .about-tab-panels .panel-ministries {
  display: block;
}

/* About page: Recommended Resources tab.
   - The disclaimer paragraph is softened with a tinted, left-bordered box so it
     reads as a caveat rather than body text.
   - External links get a small north-east arrow after them to signal they open
     a different website in a new tab. */
.resource-disclaimer {
  font-size: 0.95rem;
  color: #555;
  background: #f6f4ee;
  border-left: 4px solid var(--ochre);
  padding: 0.75rem 1rem;
  border-radius: 4px;
}

.resource-links {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

.resource-links li {
  margin-bottom: 0.4rem;
}

/* Underline the resource links so they read clearly as clickable links. */
.resource-links a {
  text-decoration: underline;
}

.resource-links a[target="_blank"]::after {
  content: "\2197"; /* north-east arrow: indicates the link opens externally */
  display: inline-block;
  margin-left: 0.15em;
  font-size: 0.8em;
  text-decoration: none; /* keep the arrow itself free of the underline */
}

/* About page: Leadership tab.
   - Elders: circular photo beside the name, role and short bio (.leader-grid).
   - Deacons: name, role and short bio only, no photo (.leader-list).
   Both lay out in two columns on wider screens and stack to a single column
   on phones (see the max-width rule at the end of this block). */
.leader-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  margin-bottom: 2rem;
}

.leader-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.leader-card__photo {
  width: 110px;
  height: 110px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  background: var(--light-grey);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.leader-card__name {
  margin: 0;
}

.leader-card__role {
  margin: 0.15rem 0 0.5rem;
  color: var(--ochre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
}

.leader-card__bio {
  margin: 0;
}

.leader-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 2rem;
}

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

/* History galleries responsive behaviour: fewer columns on smaller screens */
@media (max-width: 920px) {
  .panel-history .about-gallery-grid {
    column-count: 2;
  }
}

@media (max-width: 620px) {
  .panel-history .about-gallery-grid {
    column-count: 1;
  }
}

/* Services section (two-column: panel + media feed) */
.services {
  background: var(--light-grey);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: flex-start;
}

/* Banking-details panel on the Contact page: sits as a full-width block
   below the two-column "Contact details / Find us" grid, so it needs its
   own top margin (the grid's gap doesn't apply outside the grid). */
.contact-banking {
  margin-top: 2rem;
}

/* Panel: white box for service times, contact details, etc. */
.panel {
  background: var(--white);
  border: 1px solid rgba(107, 107, 101, 0.18);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 12px 28px rgba(31, 58, 86, 0.06);
}

.panel h3 {
  margin: 0 0 0.75rem 0;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--deep-blue);
}

/* List style used in panels (service times, contact, etc.) */
.list {
  margin: 0.5rem 0 0 0;
  padding: 0;
  list-style: none;
}

.list li {
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(107, 107, 101, 0.25);
}

.list li:last-child {
  border-bottom: none;
}

.media-feed {
  display: grid;
  gap: 1rem;
}

.visit-columns-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.visit-columns-right {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.visit-photo-panel {
  padding: 0.75rem;
}

.visit-photo {
  border-radius: 12px;
  min-height: 220px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.embed {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid rgba(107, 107, 101, 0.18);
  padding: 0.75rem;
  box-shadow: 0 8px 18px rgba(31, 58, 86, 0.06);
}

/* Embed card: thumbnail area and video/iframe wrappers */
.embed .thumb {
  height: 170px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--pastel-blue), #86a9b9);
  display: grid;
  place-items: center;
  color: var(--white);
  font-weight: 700;
}

.video-wrapper,
.fb-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.video-wrapper {
  padding-bottom: 56.25%;
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fb-wrapper {
  min-height: 350px;
}

.fb-wrapper .fb-page,
.fb-wrapper iframe {
  width: 100% !important;
  min-height: 350px;
}

/* Embed card: title and description text */
.embed h4 {
  margin: 0.6rem 0 0.25rem;
  font-size: 1rem;
  color: var(--deep-blue);
}

.embed p {
  margin: 0;
  color: #4a4a47;
  font-size: 0.95rem;
}

/* Visit section (beige background, address, map) — full width at bottom of home page */
.section.visit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  clear: both;
}

.visit {
  background: var(--beige);
  border-top: 1px solid rgba(107, 107, 101, 0.18);
  border-bottom: 1px solid rgba(107, 107, 101, 0.18);
}

.visit .cta {
  text-align: center;
  margin-bottom: 1.25rem;
}

.visit .address {
  text-align: center;
  color: var(--dark);
  margin-bottom: 1.75rem;
}

/* Google Map embed container */
.map {
  height: 380px;
  background: var(--light-grey);
  border: 1px solid rgba(107, 107, 101, 0.25);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(31, 58, 86, 0.06);
  display: grid;
  place-items: center;
  color: var(--stone-grey);
  font-weight: 600;
}

/* Home page only: smaller map in the "Visit Us" strip at the bottom of index.
   Half the default height and width so it loads less into view and takes less
   space; Visit and Contact pages keep the full-size .map above. */
#visit .map {
  height: 190px;
  max-width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* Subpage header (About, Visit, Contact, Sermons): same blue bar, no hero images */
.subpage-header {
  background: transparent;
  color: var(--white);
}

/* Space for fixed header so content is not hidden underneath */
body {
  padding-top: 80px;
}

/* When user has scrolled down: header bar gets slightly smaller (see base.html script) */
body.header-compact .hero__top {
  padding: 0.5rem 1.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* --- Footer (on every page, content in base.html) --- */
footer {
  width: 100%;
  box-sizing: border-box;
  background: #2a2a27;
  color: #ddd9d0;
  padding: 2.5rem 1.25rem;
}

/* Footer grid: two columns on desktop ("Find us" and "Service times").
   Banking details previously sat in a third column here; they've moved to
   the Contact page only. Tablet/mobile rules below collapse this further. */
.footer-grid {
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
}

.footer-grid h5 {
  margin: 0 0 0.75rem 0;
  font-size: 1.05rem;
  color: var(--beige);
}

.footer-grid p,
.footer-grid a,
.footer-grid li {
  color: #ddd9d0;
  opacity: 0.95;
  font-size: 0.98rem;
}

.footer-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

/* =============================================================================
   Social media links
   Shared between the site-wide footer and the Contact page's "Follow us"
   section (markup lives in templates/partials/social_links.html). The same
   <ul> is rendered in both places; the two variants below give it a
   different look in each context:

   - Footer variant: circular icon-only "chips" in a horizontal row, sized
     to be a comfortable touch target (~44px). The visible "Facebook" /
     "YouTube" text is hidden visually (still read by screen readers via
     the aria-label on the <a>), so what visitors actually see is just the
     icon. Beige border + icon on the dark footer, switching to a filled
     ochre chip with a deep-blue icon on hover/focus.

   - Contact page variant: rounded "pill" buttons with both the icon AND a
     visible label, sitting on the white Contact panel. This is a more
     prominent call to action than the footer.

   fill="currentColor" on each inline SVG means the icon picks up its
   parent link's `color`, so theming both variants is just a matter of
   setting `color` on the <a>.
   ============================================================================= */
.social-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-links li {
  border: 0;
  padding: 0;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.social-icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

/* ---- Footer variant: icon-only chips ---- */
/* Override the vertical .footer-grid ul layout so the social icons sit in
   a tight horizontal row instead of a stacked list. */
.footer-grid .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* Hide the "Facebook" / "YouTube" text visually, but keep it in the DOM so
   screen readers (and "view source") still see a label. The aria-label on
   each <a> is what assistive tech actually announces. */
.footer-grid .social-links a > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.footer-grid .social-links a {
  position: relative; /* containing block for the visually-hidden span above */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(233, 223, 207, 0.45); /* soft beige outline */
  color: var(--beige);
  background: transparent;
  transition: background 160ms ease, color 160ms ease,
    border-color 160ms ease, transform 160ms ease;
}

.footer-grid .social-links a:hover,
.footer-grid .social-links a:focus-visible {
  background: var(--ochre);
  border-color: var(--ochre);
  color: var(--deep-blue);
  transform: translateY(-1px);
  text-decoration: none;
}

.footer-grid .social-links .social-icon {
  width: 1.2rem;
  height: 1.2rem;
}

/* ---- Contact page "Follow us" variant: labelled pills ---- */
.contact-follow {
  margin-top: 1.5rem;
}

.contact-follow__heading {
  margin: 0 0 0.6rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--deep-blue);
}

.contact-follow .social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.contact-follow .social-links li {
  border-bottom: 0;
}

.contact-follow .social-links a {
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(31, 58, 86, 0.2);
  border-radius: 999px;
  background: var(--white);
  color: var(--deep-blue);
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 160ms ease, border-color 160ms ease;
}

.contact-follow .social-links a:hover,
.contact-follow .social-links a:focus-visible {
  background: var(--beige);
  border-color: var(--ochre);
  text-decoration: none;
}

.footer-bottom {
  max-width: 1150px;
  margin: 1.5rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(221, 217, 208, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  color: #cfcabf;
}

/* =============================================================================
   RESPONSIVE LAYOUT
   These rules only apply at smaller screen widths. Desktop (above 920px) is
   unchanged. Breakpoints: 920px = tablet, 620px = phone, 480px = small phone.
   ============================================================================= */

/* --- Tablet and smaller (e.g. iPad portrait, small laptop) --- */
@media (max-width: 920px) {
  .card,
  .grid-2,
  .hero__top {
    grid-template-columns: 1fr;
  }

  .hero__top {
    padding: 0.85rem 1.25rem;
  }

  .nav {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .logo {
    justify-self: center;
    margin-top: 0.75rem;
  }

  .card {
    padding: 1.5rem 1.25rem;
    gap: 1.5rem;
  }

  .card__media {
    min-height: 220px;
  }

  .section {
    padding: 2.25rem 1.25rem;
  }

  .panel {
    padding: 1.25rem 1.35rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    text-align: center;
  }
}

/* --- Mobile (phone in portrait) --- */
@media (max-width: 620px) {
  /* Load in compact header from the start: slim bar, icon-only logo, one row */
  body {
    padding-top: 52px;
  }

  .hero__top {
    grid-template-columns: 1fr auto;
    padding: 0.35rem 0.6rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  }

  .nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
  }

  .nav a {
    padding: 0.4rem 0.5rem;
    min-height: 36px;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
  }

  .logo {
    justify-self: end;
    margin-top: 0;
    padding: 0.25rem 0.4rem;
    gap: 0;
  }

  .logo img {
    width: 32px;
    height: 32px;
  }

  .logo span {
    display: none;
  }

  .hero {
    height: 54vh;
    min-height: 336px;
  }

  .hero__center {
    padding: 0 1rem;
  }

  .hero h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .hero p {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  }

  .hero__bottom {
    bottom: 1.5rem;
  }

  .btn {
    min-height: 44px;
    padding: 0.75rem 1.1rem;
  }

  .section {
    padding: 1.75rem 1rem;
  }

  .card {
    padding: 1.25rem 1rem;
    gap: 1.25rem;
  }

  .panel {
    padding: 1.1rem 1.15rem;
  }

  .embed {
    padding: 0.6rem;
  }

  .embed .thumb {
    height: 140px;
  }

  .fb-wrapper {
    min-height: 300px;
  }

  .fb-wrapper .fb-page,
  .fb-wrapper iframe {
    min-height: 300px;
  }

  .map {
    height: 280px;
  }

  #visit .map {
    height: 140px;
    max-width: 70%;
  }

  .visit .cta,
  .visit .address {
    margin-bottom: 1rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  footer {
    padding: 1.75rem 1rem;
  }

  .footer-bottom {
    flex-direction: column;
    padding-top: 1.25rem;
  }

  /* Mobile only: when user has scrolled, shrink header to a slim bar and show logo only (no text) */
  body.header-compact {
    padding-top: 52px;
  }

  body.header-compact .hero__top {
    padding: 0.35rem 0.6rem;
  }

  body.header-compact .logo span {
    display: none;
  }

  body.header-compact .logo {
    justify-self: end;
    margin-top: 0;
    padding: 0.25rem 0.4rem;
    gap: 0;
  }

  body.header-compact .logo img {
    width: 32px;
    height: 32px;
  }

  body.header-compact .nav a {
    padding: 0.4rem 0.5rem;
    min-height: 36px;
    font-size: 0.9rem;
  }
}

/* --- Small phone (narrow screens) --- */
@media (max-width: 480px) {
  .hero {
    min-height: 304px;
  }

  .hero__bottom {
    bottom: 1.25rem;
  }

  .section {
    padding: 1.5rem 0.75rem;
  }

  .card,
  .panel {
    padding: 1rem 0.85rem;
  }

  .map {
    height: 240px;
  }

  #visit .map {
    height: 120px;
    max-width: 100%;
  }
}