/* DO NOT EDIT THIS FILE DIRECTLY */
/* Minimal baseline styles for early layout scaffolding.
   This theme's original CSS pipeline isn't currently populated, so keep
   this file small and focused on structural elements.
*/

:root {
  --container-max: 70rem;
  --surface: #ffffff;
  --surface-2: #f3f5f7;
  --text: #0f172a;
  --muted: #475569;
  --border: rgba(15, 23, 42, 0.12);
  --shadow: 0 10px 30px rgba(2, 8, 23, 0.10);
  --color-darkblue: #0b141b;
  --color-medblue: #0d3e62;
  --color-brightblue: #0c78bd;
  --color-green: #014221;
  --color-brightgreen: #89c540;
  --color-white: #ffffff;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
/*  font-weight: <weight>;*/
  font-style: normal;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.25rem;
  position: relative;
  z-index: 10;
}

/* Buttons (used by hero and feature sections) */
.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
}

.btn-primary {
  background: #0b4a6f;
  color: #fff;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

/* Homepage hero */
.hero {
  text-align: left;
  max-width: 85%;
  margin: 0 auto;
  padding: 24px 0;
}

/* ── Countdown timer ── */
.hero-countdown__timer {
  font-size: 2rem;
  font-weight: 700;
  margin: 0.5rem 0 1rem;
  font-variant-numeric: tabular-nums;
}

/* ── Live stream hero ── */
.site-hero--live {
  position: relative;
  overflow: hidden;
}

.site-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}

.site-hero--live::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Live mode: dark scrim over the video for text legibility. Overrides the
   branded colored gradient on .site-hero.large::before (higher specificity). */
.site-hero.large.site-hero--live::before {
  background: rgba(0, 0, 0, 0.3);
}

.site-hero--live > .container {
  position: relative;
  z-index: 2;
}

.hero-live__badge {
  display: inline-block;
  background: #dc2626;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 0.75rem;
}

/* ── Announcement banner ── */
.hero-banner {
  margin-top: 16px;
  padding: 1.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.hero-banner__title {
  font-weight: 100;
  font-size: 4.5rem;
  padding: 0 1rem;
}

.hero-banner__meta {
  font-size: 14px;
  opacity: 0.9;
  padding: .5rem 1rem 2rem;

}

.hero-banner__countdown {
  font-size: 1.125rem;
  font-weight: 600;
  opacity: 0.95;
  font-variant-numeric: tabular-nums;
}

.hero-banner__actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Hero banner with foreground image */
.hero-banner--has-fg {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.hero-banner__body {
  flex: 1;
  min-width: 0;
}

.hero-banner__fg {
  flex-shrink: 0;
  width: 12rem;
}

.hero-banner__fg img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
}

/* Hero with background image (announcement mode) */
.site-hero--bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.site-hero--bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.site-hero--bg > * {
  position: relative;
  z-index: 10;
}

/* Tiles: these are the "boxes" from the mockup. */
.home-tiles {
  background: var(--surface-2);
  padding: 28px 0;
  position: relative;
  z-index: 10;
}

.tile-grid {
  display: grid;
  gap: 4vh;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tile {
  display: block;
  padding: 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  min-height: 120px;
}

.tile__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.tile__desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

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

/* Tiles Background images and animation - home page and other pages */
.container-home-tile{
  padding: 0 10vh;
}
/* 1. Parent container - ensures scaling is contained */
.img-container {
  overflow: hidden;
  border-radius: 16px;
  position: relative;
  display: inline-block;
}
.container-home-tile a, .container-link-tile a {
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  color: inherit;
  display: block;
  min-height: 120px;
  margin:0;
  position: relative;
  padding:0;
  text-decoration: none;
  width: 100%;
}
.entry-content .container-link-tile{
  line-height: 1rem;
}
/* 2. The Image - ensure it stays at the bottom of the stack */
.container-home-tile img, .container-link-tile img, .entry-content .container-link-tile img{
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
  border-radius: 16px;
}

/* 3. The Gradient Overlay - sits on top of image, below text */
.container-home-tile a::after, .container-link-tile a::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0) 100%);
  z-index: 1; /* Higher than image */
  pointer-events: none;
  border-radius: 16px;
}

/* 4. The Text - sits on top of everything */
.container-home-tile a div, .container-link-tile a strong { 
  font-size: 1.6rem;
  font-weight: 600;
  text-align: center;
  padding-bottom:1rem;
  margin: -4rem auto 0 ;
  position: relative;
  color: white;
  z-index: 2; /* Higher than gradient */
  transition: transform 0.5s ease;
}
.container-link-tile span{
  color:#fff;
  display: block;
  margin-top:-6rem;
  padding:0 .5rem;
  position: relative;
  text-align: center;
  z-index: 10;
}
.container-link-tile span strong{
  display: block;
  font-size: 1.1rem;
  line-height: 1.5rem;
}
/* 5. Hover Effect - Scale only the image */
.img-container:hover img{
  transform: scale(1.1);
}

/* Scale effect on hover */
.img-container a:hover img {
  transform: scale(1.2); /* Zooms  */
}
/* Scale effect on hover */
.img-container a:hover div, .container-link-tile a:hover strong{
  transition: transform 0.5s ease; /* Controls speed and smoothness */
  transform: scale(1.4); /* Zooms */
}

/* Feature section */
.home-feature {
  background: var(--surface);
  padding: 36px 0;
}

.feature-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: start;
}

.feature-copy h2 {
  margin: 0 0 10px;
  font-size: 1.7rem;
}

.feature-copy p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.55;
  font-size:1.1rem
}

.feature-actions {
  margin-top: 14px;
}

.feature-actions .btn-secondary {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1e293b;
}

.feature-media {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(135deg, #e2e8f0, #f8fafc);
  min-height: 220px;
  display: grid;
  place-items: center;
}
.feature-media .media-image{
  border-radius: 16px;
  min-height: 220px;
  display: grid;
  place-items: center;
  width: 100%;
}

.media-placeholder {
  color: var(--muted);
  font-size: 14px;
}

/* ── Page Colums x3 ── */
.content-column {
  display: grid;
  gap: 4vh;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding:0;
  margin:0;
}
.content-cell {
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding:1.5rem 2rem;
}

/* ── Resource cards (variable count, wraps instead of fixed 3-up) ── */
.resource-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1.5rem 0;
}
.resource-card {
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding: 1.5rem 2rem;
}
.resource-card h3 {
  margin-top: 0;
}

/* ── enter text, usually when logo is used */
.resource-grid.text-center{
  text-align: center;
}

/* ── Resource cards (smaller!) ── */
.resource-grid.small {
  gap:.5rem;
  grid-template-columns: repeat(auto-fit, minmax(1rem, 1fr));
}
.resource-grid.small  .resource-card{
  padding:1rem 1rem 0;
}

/* ── Camp logo row ── */
.camp-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  margin: 1.5rem 0;
}
.entry-content .camp-logos img {
  height: 64px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
/* ── Donate form (embedded PayPal button) ── */
.donate-form {
  margin: 1.5rem 0;
  text-align: center;
}
/* ── Small standalone logo (single-item sections, not a grid) ── */
.inline-logoblock {
  float:left;
  margin:-1.5rem 1rem 0 0;
  padding:0;
  width: auto;
}
.inline-logoblock a{
  display: inline-block;
  font-size:.8rem;
  margin: 0.5rem 1.25rem 0.75rem 0;
  text-align: center;
}
.entry-content .inline-logo {
  border-radius: 15px;
  display:flex;
  height: 8rem;
  width: auto;
}
/* ── Larger inline icon (e.g. contact tiles) ── */
.entry-content .icon-lg {
  width: 2.5rem;
  height: 2.5rem;
}
.btn-contentsmall{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #1e293b;
  margin-right:.5rem;
  margin-bottom:.5rem;
}
.btn-contentsmall:hover{
  color:#fff;
  background-color:var(--color-medblue);
}
.img-roundcorner {
  border-radius: 15px;
  transition: 
    transform 0.4s ease,
    box-shadow 0.4s ease,
    filter 0.4s ease;
}

.img-roundcorner:hover, .img-roundcorner:focus-visible {
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.2);
  filter: brightness(1.1);
}
@media (prefers-reduced-motion: no-preference) {
  .img-roundcorner:hover, .img-roundcorner:focus-visible {
    transform: scale(1.08) translateY(-12px);
  }
}
/* ── Adding Some Content Breaks  ── */

.section-break{
  border-bottom:1px solid #bbb;
  padding-bottom:1rem;
 margin-bottom:3rem; 
}
.section-secondary, .section-main{
 margin-bottom:3rem; 
}
.entry-content hr {
  clear: both;
  border:none;
  border-bottom:1px solid #bbb;
  padding-bottom:2rem;
  margin-bottom:3rem;
}
.section-highlight{
  background-color:var(--surface-2);
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  padding:1.5rem 2.5rem;
  margin:2.5rem auto 2rem;
}
.section-highlight.center{
  text-align: center;
}
/* on blue background, keep White background */
.section-highlight.section-blue .resource-card{
  background: #fff;
  border-color:none;
}
/* on blue background, keep blue background */
.section-highlight.section-blue .onblue .resource-card{
  background:rgb(8, 98, 155);
  border-color:none;

}
.section-highlight.section-blue{
  background: #0D3E62;
  background: linear-gradient(21deg,rgba(13, 62, 98, 1) 1%, rgb(8, 98, 155) 50%, rgba(12, 120, 189, 1) 100%);
  color:#fff;
  font-size: 1.2rem;
}
.section-highlight.section-blue a{
  color:#89c540
}
.section-highlight.section-blue a:hover{
  color:#fff;
}
.section-highlight.section-blue a.btn-contentsmall{
  color:#0b141b
}
.section-highlight.section-blue a.btn-contentsmall:hover{
  color:#fff;
}
.section-highlight.section-blue .resource-card{
  background: #fff;
  border-color:none;

}
.section-highlight.section-backgroundimage{
  background-color: var(--color-medblue);
  color: #fff;
  background-image: url("../../images/cs-online-community.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-size:1.2rem;
  overflow: hidden;
  position: relative;
  scale: calc(1.1rem);
}
.section-highlight.section-backgroundimage a{
  color:#89c540
}
.section-highlight.section-backgroundimage a:hover{
  color:#fff
}
/* Mother Church Image */
.cs-online-community{
  background-image: url("../../images/cs-online-community.jpg");
}
/* Open Book Image */
.section-highlight.section-backgroundimage.cs-readingroom{
  background-image: url("../../images/square-FCC-03.jpg");
}
/* Open Book Image */
.section-highlight.section-backgroundimage.cs-youth{
  background-image: url("../../images/square-FCC-10.jpg");
}
/* Open Book Image */
.section-highlight.section-backgroundimage.cs-speaker{
  background-image: url("../../images/square-FCC-04.jpg");
}
.page-top-paragraph{
  font-size:1.25rem;
}
.content-cell-background {
  background-color: var(--color-medblue);
  color: #fff;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  scale: calc(1.1rem);
  font-size: 1.15rem;

}
.content-cell-background h3 {
  font-size:1.35rem;
  line-height:1.5rem
}
/*.content-cell-background-sunday {
 background-image: url("../../images/square-FCC-04.jpg");
}
.content-cell-background-childcare {
 background-image: url("../../images/square-FCC-10.jpg");
}
.content-cell-background-wednesday {
 background-image: url("../../images/square-FCC-07.jpg");
}*/
.section-highlight.section-backgroundimage::after, .content-cell-background::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0, 0, 0, 0.8) 0%, rgba(0, 58, 85, 0.8) 100%);
  z-index: 1;
  overflow: hidden;
}
.section-backgroundimage-container, .content-cell-container{
  position: relative;
  z-index: 10;
}
.btn-callout{
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  background:var(--color-brightgreen);
  border-color: #c7d2fe;
  margin:1rem auto;
  font-size:1.125rem
}
.btn-callout:hover{
  color:#fff;
  background-color:var(--color-medblue);
}
.entry-content .section-highlight hr {
  border-bottom:1px solid #ddd;
  width:75%;
}
/* ── Portal tiles ── */
.portal-tiles {
  background: var(--surface-2);
  padding: 1.75rem 0;
}

.tile-grid--portal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tile--portal {
  display: flex;
  flex-direction: column;
}

.tile__icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  background-color: var(--muted);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.tile--portal:hover .tile__icon {
  background-color: var(--text);
}

.tile__details {
  margin-top: auto;
  padding-top: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ── Article meta ── */
.article-meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.article-meta__sep {
  margin: 0 0.375rem;
}

.article-meta__category {
  color: #0b4a6f;
  text-decoration: none;
  font-weight: 500;
}

.article-meta__category:hover {
  text-decoration: underline;
}

.article-tags {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.article-tags__tag {
  font-size: 0.8125rem;
  padding: 0.25rem 0.625rem;
  border-radius: 1rem;
  background: var(--surface-2);
  color: var(--muted);
  text-decoration: none;
}

.article-tags__tag:hover {
  background: #e2e8f0;
}

/* ── Article listing ── */
.category-desc {
  color: var(--muted);
  margin-bottom: 2rem;
  line-height: 1.55;
}

.article-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.article-list__item {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.article-list__item:last-child {
  border-bottom: none;
}

.article-list__title {
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}

.article-list__title a {
  color: var(--text);
  text-decoration: none;
}

.article-list__title a:hover {
  color: #0b4a6f;
}

.article-list__meta {
  font-size: 0.875rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.article-list__summary {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* ── Taxonomy lists (tags, categories, authors) ── */
.taxonomy-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.taxonomy-list__item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.taxonomy-list__item a {
  display: inline-block;
  padding: 0.375rem 0.875rem;
  border-radius: 2rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
}

.taxonomy-list__item a:hover {
  background: #e2e8f0;
}

.taxonomy-list__count {
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ── Page content ── */
.site-section {
  padding: 32px 0 48px;
  position: relative;
  z-index: 10;
}

.entry-content {
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 32px;
}

.entry-content img {
  max-width: 100%;
  height: auto;
}

.entry-content .img-portrait {
  max-width: 16rem;
  border-radius: 0.5rem;
}

.entry-content .infobox {
  float: right;
  width: 18rem;
  margin: 0 0 1rem 1.5rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.entry-content .infobox img {
  display: block;
  max-width: 100%;
  margin: 0 auto 1rem;
}

.entry-content .infobox ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.entry-content .infobox li {
  margin-bottom: 0.375rem;
}

.entry-content a {
  color: #0b4a6f;
}

/* ── Recordings (Past Services) ── */
.recordings {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.recording__heading {
  font-size: 20px;
  margin: 0 0 12px;
}

.recording__type {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
}

.recording__player {
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  line-height: 0;
}

.recording__player video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.recording__options {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.recording__link {
  font-size: 14px;
  font-weight: 500;
  color: #0b4a6f;
  text-decoration: none;
}

.recording__link:hover {
  text-decoration: underline;
}

/* ── Site header ── */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
  gap: 1 rem;
}

.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo img {
  height: 4rem;
  width: auto;
}
/* ── footer logo ── */
.site-footer-logo  {
  filter:grayscale(1) brightness(10);
  height:5.5rem;
  margin:  -2rem 0 1rem -1.5rem;
}

/* ── Location badge ── */
.site-location {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--color-brightblue);
  text-decoration: none;
  white-space: nowrap;
}

.site-location:hover {
  color: var(--text);
}

.site-location__pin {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  -webkit-mask-image: url("../../images/pin.svg");
  mask-image: url("../../images/pin.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  background-color: var(--color-brightblue);

}

/* ── Desktop navigation ── */
.site-nav__list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}

.site-nav__link {
  display: block;
  padding: .5rem .6rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--color-medblue);
  text-decoration: none;
  border-radius: 6px;
  white-space: nowrap;
}

.site-nav__link:hover {
  background: var(--surface-2);
  color: var(--color-brightblue);
}

.caret {
  font-size: 10px;
  margin-left: 2px;
}

/* Dropdown */
.site-nav__item--dropdown {
  position: relative;
}

/* Invisible bridge so the cursor can travel from the nav link to the
   dropdown without leaving the li's hover zone. */
.site-nav__item--dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.site-nav__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  min-width: 180px;
  z-index: 200;
}

.site-nav__item--dropdown:hover .site-nav__dropdown,
.site-nav__item--dropdown:focus-within .site-nav__dropdown {
  display: block;
}

.site-nav__dropdown-link {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
}

.site-nav__dropdown-link:hover {
  background: var(--surface-2);
}

/* Header actions (portal button + hamburger) */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-portal {
  display: inline-block;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.btn-portal:hover {
  background: #e2e8f0;
}

/* Hamburger (hidden on desktop) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}

/* ── Mobile menu overlay ── */
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.4);
}

.mobile-menu-overlay.is-open {
  display: block;
}

.mobile-menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  background: var(--surface);
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  overflow-y: auto;
  padding: 20px;
}

.mobile-menu__header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.mobile-menu__close {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--text);
  line-height: 1;
  padding: 4px;
}

.mobile-menu__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu__nav > ul > li > a {
  display: block;
  padding: 10px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}

.mobile-menu__sub {
  padding-left: 16px;
}

.mobile-menu__sub li a {
  display: block;
  padding: 8px 0;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}

.mobile-menu__nav .btn-portal {
  display: block;
  text-align: center;
  margin-top: 20px;
}

/* ── Site hero (page titles) ── */
.site-hero, .site-hero.large{
  background-color: var(--color-medblue);
  color: #fff;
  padding: 32px 0;
  background-image: url("../../images/FirstChurchChrist-Scientist-Banner-13.jpg");
  background-size: cover;
  background-position: center;
  min-height: 15vh;
  background-attachment: fixed;
  text-shadow: 2px 2px 1px rgba(18, 50, 64, 0.85);
  overflow: hidden;
  position: relative;
  scale: calc(1.1rem);
}
.site-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(4, 23, 46, 0.622), rgba(70, 70, 70, 0.1)100%);
  z-index: 1;
  overflow: hidden;
}
.site-hero.large::after{
  background: linear-gradient(90deg,rgba(4, 23, 46, 0.622), rgba(70, 70, 70, 0.1)100%);
}
/* ── Site hero (page titles) ── */
.site-hero.large{
  min-height: 50vh;
}
.site-hero.large::before, .site-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.site-hero.large .hero{
  padding:0;
  margin:0;
  width:100%;
}
.site-hero__default h1 {
  margin: 0;
  font-size: 5rem;
}
/* ── Site hero (Countdown ) ── */
.hero-banner.hero-banner-countdown {
  margin-top: 0;
  padding:3rem 0 3rem 2rem;
  z-index: 10;
  position: relative;
  background:color-mix(in srgb, var(--color-darkblue) 45%, transparent);
  width:65%;
}
.hero-banner_countdown, .hero-banner_countdown-column{
  display: grid;
  grid-template-columns: 3fr .5fr 5fr .5fr 7fr .5fr 7fr;
}
.hero-banner_countdown{
  display: flex;
  width: 25rem;
}
.hero-banner__kicker{
  color:#ccc;
  font-size: 1.1rem;
  letter-spacing: .1rem;
  text-transform: uppercase;
  padding:0 1rem;
  opacity: 0.9;
}
.countdown-number{
  font-weight: 100;
  font-size:4.5rem;
  display: block;
  width: 100%;
  text-align: center;
}
.countdown-spacer {
  font-weight: 100;
  font-size:4rem;
  display: block;
  width: 1rem;
  text-align: center;
}
.countdown-label{
  text-align: center;
  color: #ccc;
  font-variant: all-small-caps;
  font-size: 1.1rem;
  display: block;
  width: 100%;
}
/* ── Hero Section, Large Buttons ── */
.hero .btn-primary{
  border-color: #fff;
  color:rgb(20, 72, 104);
  background-color:  rgba(255, 255, 255, 0.85);
  text-shadow: none;
  font-size: 1.5rem;
  padding:1.2rem 2rem;
}
.hero  .btn-primary:hover{
  color:#fff;
  background-color: rgb(20, 72, 104);
}

/* ── Footer ── */
.site-footer {
  background: var(--color-darkblue);
  color: #cbd5e1;
  padding: 4rem 0 0;
  font-size: 0.9rem;
}

.site-footer a {
  color: #e2e8f0;
  text-decoration: none;
}

.site-footer a:hover, 
.site-footer__grid a.site-location:hover{
    color:var(--color-brightgreen);
}

a:hover .site-location__pin {
  background-color: var(--color-brightgreen);

}

/* ── Location badge Footer ── */
.site-footer__grid .site-location {
    font-size: 0.9rem;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 3fr 1.5fr 2.5fr;
  gap: 2rem;
}

.site-footer__heading {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: #98aac3;
  margin: 0 0 14px;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer__links li {
  margin-bottom: 8px;
}

.site-footer__text {
  margin: 0 0 10px;
  line-height: 1.5;
  letter-spacing: .02rem;
}

.site-footer .btn-donate {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0.5rem;
  text-decoration: none;
  background: #fff;
  color: #0f172a;
}

.site-footer .btn-donate:hover {
  background: #e2e8f0;
  color: #0f172a;
  text-decoration: none;
}

.site-footer__bottom {
  margin-top: 2rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  font-size: 13px;
  color: var(--color-white);
  letter-spacing: 0.05rem;
}

.site-footer__bottom .copyright{
  margin-top: 2rem;
  color:var(--muted)
}

.site-footer__bottom p {
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 980px) {
  .content-column {
    gap: 2vh;
  }
  .content-cell {
    padding: .2rem 1rem;
  }
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile-grid--portal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .hero-countdown__timer {
    font-size: 1.5rem;
  }

    /* Hide desktop nav + location badge, show hamburger */
  .site-location {
    display: none;
  }

  .site-nav {
    display: none;
  }

  .site-header__actions .btn-portal {
    display: none;
  }

  .hamburger {
    display: flex;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .hero-banner__fg {
    width: 8rem;
  }
  .hero-banner.hero-banner-countdown{
    margin:auto;
    width:85%;
  }
  .hero-banner__actions{
    margin:1rem auto;
    width:85%;
  }
  .container-home-tile{
    padding:0 3rem;
  }
  /* Resource card logos vary wildly in native size (225px up to 1000px);
  without a cap, small source images render at native size while large
  ones stretch to fill the card, making the row look uneven. */
  .entry-content .resource-card img {
    width: 75%;
    max-width: 200px;
  }
  /* ── Page Colums x3 ── */
  .content-column {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    margin: 1.5rem 0;
  }
}

@media (max-width: 520px) {
  .resource-card{
    padding:1.5rem;
  }
  .resource-grid {
    gap: .5rem;
  }

  .content-column {
    display: block;
    gap: 2vh;
  }
  .content-cell {
    padding: .2rem 1rem;
    margin:0 0 1rem;
  }
  .tile-grid {
    grid-template-columns: 1fr;
  }

  .entry-content .infobox {
    float: none;
    width: auto;
    margin: 0 0 1.5rem;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-banner__fg {
    display: none;
  }
  .hero-banner.hero-banner-countdown{
    padding:1rem;
    width:100%;
    margin:0 0 0 -1rem;
  }
  .countdown-number{
    font-size:3rem;
  }
  .hero-banner_countdown, .hero-banner_countdown-column{
    grid-template-columns:2fr .5fr 3fr .5fr 4fr .5fr 3fr;
  }
  .hero-banner__actions{
    width:100%;
  }
.hero .btn {
    display: block;
    margin:auto;
  }
  /* Additional Style Adjustments */
  .site-hero__default h1 {
    font-size:3rem;
    max-width: 100%;
  }
  .btn-contentsmall{
    display: block;
    line-height:1.2rem;
    text-align: center;
    margin:.5rem auto;
    padding:1rem;
  }
  .section-highlight{
    padding:.5rem 1.5rem;
  }
  .entry-content .inline-logo{
    height:6rem;
    margin-top:1rem;
  }
  .entry-content hr{
    padding:0;
    margin:0 0 2rem;
  }
}

/* ── Print ── */
@media print {
  .site-wrap {
    position: relative;
  }

  .site-header {
    position: static;
  }

  .site-nav,
  .site-location,
  .site-header__actions {
    display: none;
  }

  .site-hero,
  .site-hero.large {
    min-height: 0;
    height: auto;
    padding: 8px 0;
    background-image: none;
    background-attachment: scroll;
    color: #000;
    text-shadow: none;
  }

  .site-hero::before,
  .site-hero::after,
  .site-hero.large::before,
  .site-hero.large::after {
    display: none;
  }

  .site-hero__default h1 {
    font-size: 2rem;
    margin: 0;
  }

  /* Internal page titles: pull the title up into the header row, right-aligned
     across from the logo, so the header's divider sits below both instead of
     between them. (The homepage hero has too much going on for this treatment.) */
  .site-hero:not(.large) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    display: flex;
    align-items: center;
    background: none;
  }

  .site-hero:not(.large) .container {
    width: 100%;
  }

  .site-hero:not(.large) .site-hero__default {
    width: 100%;
    text-align: right;
  }

  .site-hero:not(.large) .site-hero__default h1 {
    font-size: 1.5rem;
  }

  .site-section {
    padding-top: 12px;
  }

  .entry-content h1 {
    font-size: 1.75rem;
    margin-top: 0;
  }

  /* ── Footer: built for a dark background, needs to be readable on paper ── */
  .site-footer {
    background: none;
    color: #000;
    padding: 16px 0 0;
    border-top: 1px solid #000;
  }

  .site-footer a {
    color: #000;
  }

  .site-footer__heading {
    color: #000;
  }

  .site-footer__grid {
    display: block;
  }

  .site-footer__col {
    margin-bottom: 12px;
  }

  .site-footer-logo,
  .site-footer .btn-donate {
    display: none;
  }

  .site-footer__bottom {
    color: #000;
    border-top-color: #000;
  }

  .site-footer__bottom .copyright {
    color: #000;
  }
}