/* ============================================================
   St. Mark Evangelical Lutheran Church
   ============================================================ */

:root {
  --blue:        #4a7fc1;
  --gold:        #c08a1e;
  --gold-dark:   #a97615;
  --footer-gold: #c8901f;
  --text:        #3a3a3a;
  --text-light:  #ffffff;
  --heading:     #2b2b2b;
  --font-head:   'Josefin Slab', Georgia, 'Times New Roman', serif;
  --font-body:   'Lato', 'Segoe UI', Arial, sans-serif;
  --container:   1200px;
  --col-text:    420px;   /* readable measure inside the blue band */
  --radius:      14px;
}

/* ------------------------------------------------------------
   Framework overrides

   ResponsiveTopNavDropdown.css loads first (see include/header.php) because
   this file re-skins its #nav block and has to win on equal specificity. The
   framework also ships globals for its own demo palette, and three of its
   class names collide with markup already on this site. Undo those here, once,
   rather than working around them further down.
   ------------------------------------------------------------ */

/* .container is ours. The framework paints it pale blue and widens it to
   2400px; the width is already overridden below, the colour was not. */
.container { background-color: transparent; }

/* .card is ours too - flat and blue. The framework makes it a white panel
   with a drop shadow that deepens on hover. */
.card,
.card:hover { box-shadow: none; }

/* The framework sets 42px/36px on bare h1 and h2. Headings here are sized per
   block, so give the bare elements a base in this design's range instead of
   the demo's; every block-scoped rule below still outranks these. */
h1 { font-size: 34px; }
h2 { font-size: 28px; }
h3 { font-size: 21px; }

/* ------------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;          /* guards against any stray horizontal scroll */
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 400;
  margin: 0;
  color: var(--heading);
}

p { margin: 0 0 18px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 30px;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  padding: 11px 26px;
  border-radius: 4px;
  transition: background-color .2s ease, color .2s ease;
}

.btn-gold {
  background: var(--gold);
  color: #fff;
}

.btn-gold:hover { background: var(--gold-dark); }

/* White filled pill used inside the blue cards */
.btn-light {
  background: #fff;
  color: #2f4a66;
  border: 1px solid #fff;
  padding: 8px 20px;
  font-size: 12px;
}

.btn-light:hover {
  background: #eef3fa;
  color: #24384f;
}

.btn-row {
  text-align: center;
  margin-top: 26px;
}

.text-link {
  font-weight: 700;
  text-decoration: underline;
  color: var(--text);
}

.text-link:hover { color: var(--gold); }

/* ------------------------------------------------------------
   Info banner - repeated at the top of every page so the address,
   phone, email and worship time are never more than one glance away
   ------------------------------------------------------------ */

.info-banner {
  background: var(--footer-gold);
  color: #fff;
  font-size: 13px;
}

.info-banner-inner {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 8px 26px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.info-banner a,
.info-banner span {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 7px;
  color: #fff;
  line-height: 1.3;
}

.info-banner a:hover { text-decoration: underline; }

.info-banner svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

/* ------------------------------------------------------------
   Hero + header
   ------------------------------------------------------------ */

.hero {
  position: relative;
  width: 100%;
  height: 65vh;
  min-height: 480px;
  background: #2a2318 url('images/Hero%20image.png') center center / cover no-repeat;
}

/* Dark scrim so the title and nav stay readable over the bright glass */
.hero-overlay {
  position: absolute;
  inset: 0 0 auto 0;
  padding: 16px 30px 46px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, 0) 100%);
}

.brand {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.brand-logo {
  width: 38px;
  height: auto;
}

.brand-name {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

/* Primary nav.

   The markup is the framework's #nav pattern, so ResponsiveTopNavDropdown.css
   supplies the responsive behaviour: below 820px the list collapses and a
   :target toggle shows it again, with no JavaScript involved. Everything here
   re-skins that nav to the church palette and swaps the framework's
   inline-block rows for grid.

   These selectors lead with #nav because the framework's own rules are
   id-scoped — a plain .main-nav a would lose to its #nav li a. */

.main-nav { margin-top: 10px; }

/* The framework floats #nav. Inside the absolutely-positioned hero overlay
   there is nothing to clear it, so the overlay would collapse behind it. */
#nav {
  float: none;
  font-size: inherit;
}

#nav li a {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: .2px;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
    text-shadow: 1px 1px 2px black;

}

#nav li a:hover { border-bottom-color: #fff; }

#nav li a[aria-current="page"] { border-bottom-color: #fff; font-weight: 700; }

/* Desktop: one centred grid row. Scoped to min-width rather than written as a
   plain rule, so the framework's own 820px collapse is left to do its job
   instead of being overridden by source order. */
@media (min-width: 821px) {
  #nav > ul {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 26px;
  }

  #nav > ul > li {
    display: block;
    margin: 0;
    padding: 0;
  }
}

/* Ten links stop fitting on one row a little above the 820px toggle point */
@media (min-width: 821px) and (max-width: 980px) {
  #nav > ul {
    grid-auto-flow: row;
    grid-template-columns: repeat(5, max-content);
  }
}

/* Collapsed menu. The framework decides what is shown; this is only the skin. */
@media (max-width: 820px) {
  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    color: #fff;
    font-size: 16px;
    letter-spacing: .3px;
    padding: 7px 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
  }

  #nav:target > ul {
    display: grid;
    grid-template-columns: 1fr;
    padding: 6px 0 10px;
    background: rgba(26, 32, 40, .95);
    border-radius: 0 0 6px 6px;
  }

  #nav > ul > li {
    display: block;
    padding: 6px 0;
  }

  #nav li a {
    font-size: 16px;
    text-shadow: none;
  }

  /* No room for an underline to read as anything but a divider here */
  #nav li a:hover { border-bottom-color: transparent; text-decoration: underline; }

  #nav li a[aria-current="page"] { border-bottom-color: transparent; }
}

/* ------------------------------------------------------------
   Interior page header - same banner as home, shorter, with the
   page title sitting in it
   ------------------------------------------------------------ */

.page-hero {
  position: relative;
  width: 100%;
  min-height: 300px;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #2a2318 url('images/Hero%20image.png') center 38% / cover no-repeat;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .55) 100%);
}

.page-hero > * { position: relative; z-index: 1; }

.page-hero .hero-overlay {
  position: static;
  padding: 16px 30px 0;
  background: none;
}

.page-title {
  display: grid;
  place-content: center;
  justify-items: center;
  padding: 34px 30px 40px;
  text-align: center;
}

.page-title h1 {
  font-size: 40px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}

.page-title p {
  margin: 8px 0 0;
  font-size: 15px;
  color: #f4efe4;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .7);
}

/* ------------------------------------------------------------
   Shared page sections
   ------------------------------------------------------------ */

.page-section { padding: 46px 0; }

.page-section.tint { background: #f6f3ec; }

.section-head {
  max-width: 820px;
  margin: 0 auto 30px;
  text-align: center;
}

.section-head h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

.section-head p { font-size: 15.5px; margin-bottom: 0; }

.section-head p + p { margin-top: 10px; }

.prose {
  max-width: 780px;
  margin: 0 auto;
  font-size: 15px;
}

.prose p { margin-bottom: 16px; }

.prose p:last-child { margin-bottom: 0; }

/* Centred variant, for a prose block standing alone in its section rather than
   sitting in a column beside a picture */
.prose.centered { text-align: center; }

/* Editorial entry list: the name of the thing on the left, what it is on
   the right, separated by hairlines - the way a printed bulletin reads */

.entries {
  max-width: 960px;
  margin: 0 auto;
}

.entry {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 40px;
  padding: 22px 0;
  border-top: 1px solid #e2dccf;
}

.entry:first-child { border-top: 0; padding-top: 0; }

.entry:last-child { padding-bottom: 0; }

.tint .entry { border-top-color: #e0d8c7; }

.entry h3 {
  font-size: 21px;
  line-height: 1.3;
}

.entry h3 .when {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .3px;
  color: #8a7d66;
}

.entry-body p { margin-bottom: 12px; }

.entry-body p:last-child { margin-bottom: 0; }

.entry-body .name {
  font-weight: 700;
  color: var(--heading);
}

.entries.compact .entry-body p { margin-bottom: 4px; }

/* Contact block set off from the body copy above it */
.contact-line {
  padding: 14px 0 16px;
  border-top: 1px solid #e2dccf;
  border-bottom: 1px solid #e2dccf;
  line-height: 1.9;
}

/* Tighter rhythm for lists of short lines (staff, contact details) */
.entries.compact .entry {
  padding: 14px 0;
  gap: 30px;
}

/* An entry with no left-hand term: the text runs the full measure */
.entry.full { grid-template-columns: 1fr; gap: 0; }

.closing-line {
  max-width: 960px;
  margin: 26px auto 0;
  padding-top: 22px;
  border-top: 1px solid #e2dccf;
  text-align: center;
  font-family: var(--font-head);
  font-size: 21px;
  color: var(--gold-dark);
}

/* Text + picture split used for page intros */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.split.narrow-media { grid-template-columns: 420px 1fr; }

.split-media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: #000;
}

/* Two media side by side: crop both to one shape so they are the same
   size and their captions land on the same line */
.split.pair { align-items: start; }

.split.pair img,
.split.pair video {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.split.pair figcaption {
  margin-top: 12px;
  min-height: 1.4em;
}

.split img { width: 100%; border-radius: var(--radius); }

.split-media figcaption {
  margin-top: 10px;
  font-size: 13px;
  font-style: italic;
  color: #6b6459;
  text-align: center;
}

.split-media { margin: 0; }

/* Placeholder blocks for artwork and video that is not shot yet */

.placeholder {
  background: #e6e1d6;
  border: 1px dashed #b9ae99;
  border-radius: var(--radius);
  min-height: 260px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  color: #6b6459;
}

/* Full-width picture band */
.wide-figure {
  max-width: 960px;
  margin: 0 auto;
}

.wide-figure img {
  width: 100%;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

.placeholder.wide {
  min-height: 0;
  aspect-ratio: 3 / 1;
  max-width: 960px;
  margin: 0 auto;
}

.placeholder strong {
  font-family: var(--font-head);
  font-size: 19px;
  color: #4a4237;
}

.placeholder span { font-size: 13px; }

a.placeholder:hover { border-color: var(--gold); background: #e0dacb; }

/* Photo gallery - two across, all visible on the page */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.gallery figure { margin: 0; }

.gallery img,
.gallery .placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 0;
  object-fit: cover;
  border-radius: var(--radius);
}

/* An odd last picture runs the full width instead of sitting alone */
.gallery > figure:last-child:nth-child(odd) { grid-column: 1 / -1; }

.gallery > figure:last-child:nth-child(odd) img { aspect-ratio: 5 / 2; }

.gallery figcaption {
  margin-top: 10px;
  font-size: 13px;
  font-style: italic;
  color: #6b6459;
  text-align: center;
}

/* Numbered / plain lists inside an entry body */

.plain-list {
  margin: 0;
  padding-left: 20px;
}

.plain-list li {
  margin-bottom: 10px;
  padding-left: 4px;
}

.plain-list li:last-child { margin-bottom: 0; }

.plain-list li::marker { color: var(--gold); }

/* ------------------------------------------------------------
   About us
   ------------------------------------------------------------ */

.about { padding: 80px 0; }

.about-grid {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 90px;
  align-items: center;
}

.about-media img {
  width: 100%;
  border-radius: var(--radius);
}

.about-text h2 {
  font-size: 30px;
  text-align: center;
  margin-bottom: 24px;
}

.about-text p {
  text-align: justify;
  font-size: 16px;
}

/* ------------------------------------------------------------
   Blue band: worship + contact
   ------------------------------------------------------------ */

.blue-band {
  background: var(--blue);
  color: var(--text-light);
  padding: 80px 0;
}

.blue-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.blue-band h2 {
  font-size: 26px;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}

.blue-band p {
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 14px;
}

.blue-band strong { font-weight: 700; }

.worship-col { padding: 0 55px 0 20px; }
.contact-col {
  padding: 0 20px 0 55px;
  border-left: 1px solid rgba(255, 255, 255, .85);
}

/* Constrain the measure in both columns so they read as balanced
   against the divider */
.worship-col > *,
.contact-col > * {
  max-width: var(--col-text);
  margin-left: auto;
  margin-right: auto;
}

.worship-col .lead {
  font-style: italic;
  margin-bottom: 24px;
}

.map {
  width: 100%;
  max-width: var(--col-text);
  margin: 0 auto 22px;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: #e8e6e1;
}

.map iframe,
.map img {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* social icons */

.socials {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: 22px;
  margin-top: 28px;
}

/* .social-off is an icon with no account behind it yet. It sits in the row at
   full size so the spacing does not shift when it becomes a real link. */
.socials a,
.socials .social-off {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
}

.socials .social-off { cursor: default; }

.socials svg {
  width: 100%;
  height: 100%;
  fill: #fff;
  display: block;
}

.socials a:hover svg { fill: rgba(255, 255, 255, .75); }

/* ------------------------------------------------------------
   Get involved
   ------------------------------------------------------------ */

.involved { padding: 80px 0; }

.involved-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: start;
}

.involved-left h2 {
  font-size: 28px;
  text-align: left;
  margin-bottom: 22px;
}

.involved-left p {
  text-align: left;
  font-size: 16px;
  margin-bottom: 34px;
}

.calendar-placeholder {
  background: #d9d9d9;
  border-radius: var(--radius);
  min-height: 300px;
  display: grid;
  place-items: center;
}

.calendar-placeholder span {
  font-family: var(--font-head);
  font-size: 26px;
  letter-spacing: 1px;
  color: #333;
  transform: rotate(-8deg);
}

/* cards */

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;      /* every row the same height */
  align-items: stretch;
  gap: 26px;
}

.card {
  background: var(--blue);
  color: #fff;
  border-radius: 10px;
  padding: 20px 20px 24px;
  min-height: 210px;
  text-align: center;
  display: grid;
  grid-template-rows: 1fr auto;   /* body takes the slack, button sits on the bottom row */
}

.card h3 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 14px;
}

.card p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 14px;
}

.card .btn-light {
  justify-self: center;
  align-self: end;
}

/* ------------------------------------------------------------
   Synod / newsletter
   ------------------------------------------------------------ */

.synod { padding: 80px 0; }

.synod-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.synod-text { text-align: center; }

.synod-text h2 {
  font-size: 26px;
  margin-bottom: 28px;
}

.synod-text p {
  font-size: 16px;
  margin-bottom: 16px;
}

.synod-text .btn-gold {
  display: block;
  width: fit-content;
  margin: 0 auto 24px;
}

.synod-media img {
  width: 100%;
  aspect-ratio: 4 / 3;        /* source is square; crop to the design's landscape slot */
  object-fit: cover;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.site-footer {
  background: var(--footer-gold);
  color: #fff;
  padding: 34px 0 38px;
  font-size: 15px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 210px 1fr 170px 1fr;
  gap: 30px;
  align-items: start;
}

.site-footer p { margin: 0 0 4px; }

.footer-logo {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

/* Sized with width, not max-width: the framework's img rule carries
   "max-width:100% !important", which no max-width here can outrank. Setting
   width still lets that cap shrink the logo on a narrow footer column. */
.footer-logo img {
  width: 190px;
  height: auto;
  display: block;
}

.footer-contact { text-align: center; }

.footer-hours { margin-top: 12px; }

.footer-address {
  text-align: center;
  padding-top: 2px;
}

/* icons sit under the contact block only, not the full footer width */
.socials-sm {
  gap: 14px;
  margin-top: 16px;
}

.socials-sm a,
.socials-sm .social-off {
  width: 22px;
  height: 22px;
}

/* Two clean rows: six links, then four */
.footer-nav ul {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  justify-content: end;
  gap: 18px;
  white-space: nowrap;
}

.footer-nav a { font-size: 15px; }

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

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, .4);
  margin-top: 26px;
  padding-top: 14px;
  text-align: center;
  font-size: 14px;
}

.footer-legal p { margin: 0; }

/* The base a{text-decoration:none} would leave the credit link looking exactly
   like the copyright text beside it */
.footer-legal a { text-decoration: underline; }

.footer-legal a:hover { text-decoration: none; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 980px) {
  .about-grid,
  .involved-grid,
  .synod-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-media,
  .synod-media {
    max-width: 420px;
    margin: 0 auto;
  }

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

  .split,
  .split.narrow-media {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .entry {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .split-media { max-width: 460px; margin: 0 auto; }

  .page-title h1 { font-size: 32px; }

  .worship-col { padding: 0 0 40px; }

  .contact-col {
    padding: 40px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .85);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 30px;
  }

  .footer-nav ul {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
  }
}

/* Same 820px line the framework collapses the nav at: below it the top strip
   comes off, so a phone opens straight onto the hero. The address, phone and
   email are still one tap away in the footer, and the phone and email are
   still live links there. */
@media (max-width: 820px) {
  .info-banner { display: none; }
}

@media (max-width: 640px) {
  .hero { height: auto; min-height: 380px; aspect-ratio: 16 / 10; }

  .brand { grid-auto-flow: row; justify-items: center; gap: 8px; }

  .brand-name { font-size: 22px; text-align: center; }

  .cards { grid-template-columns: 1fr; grid-auto-rows: auto; }

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

  .footer-logo { justify-content: center; }

  .footer-nav ul { justify-content: center; }

  .gallery { grid-template-columns: 1fr; gap: 18px; }

  .page-section { padding: 36px 0; }

  .page-title h1 { font-size: 26px; }

  .closing-line { font-size: 18px; }
}