/*
Theme Name: Maryfield Visitation
Theme URI: https://maryfieldvisitation.org/
Author: Custom Build
Description: Custom theme for Maryfield Visitation, laid out after carmelitenuns.org with the Maryfield color palette (#f26835 / #313131).
Version: 1.0
Text Domain: maryfield-visitation
*/

/* ---------- Variables ---------- */
:root{
  --accent: #f26835;
  --accent-text: #a3451a;      /* orange text on LIGHT backgrounds (6.1:1 on white) */
  --accent-strong: #d3430e;    /* orange BACKGROUND behind small white text (4.6:1 with white) */
  --accent-on-dark: #f48257;   /* orange text/hover on DARK backgrounds (5.1:1 on #313131) */
  --dark: #313131;
  --cream: #faf7f2;
  --white: #ffffff;
  --line: #e7e1d8;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  font-size: 18px;
  line-height: 1.7;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--accent-text); text-decoration: none; transition: color .2s ease; }
a:hover{ color: var(--dark); }

/* Text written with **bold**: set in Lora (the heading font), a step larger than the body text.
   A bold line on its own reads as a small subheading. */
.bold-text{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06em;
}
.bold-subhead{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.28em;
  line-height: 1.4;
  margin-top: 34px;
  margin-bottom: 14px;
  color: var(--dark);
}
.bold-subhead .bold-text{ font-size: 1em; font-weight: inherit; }
.page-main > .bold-subhead:first-child{ margin-top: 0; }

/* Highlighted callout inside paragraph text (line starting with "> ") */
.text-callout{
  margin: 26px 0;
  padding: 16px 22px;
  background: #f7f1e5;
  border-left: 4px solid var(--accent);
  border-radius: 0 6px 6px 0;
  color: var(--dark);
  font-size: 18px;
  line-height: 1.7;
}
.text-callout strong{ color: var(--accent-text); font-weight: 700; }

/* Links written inside paragraph text (see maryfield_linkify) */
a.inline-link{
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
  padding: 1px 3px;
  margin: 0 -3px;
  transition: background-color .2s ease, color .2s ease;
}
/* Small arrow after the link; the non-breaking space keeps it on the same line as the last word */
a.inline-link::after{
  content: "\00a0\2197";
  font-size: .85em;
  font-weight: 700;
}
a.inline-link:hover,
a.inline-link:focus-visible{
  background-color: rgba(242,104,53,.16);
  text-decoration: none;
}

h1, h2, h3, h4, h5{
  font-family: var(--font-display);
  color: var(--dark);
  line-height: 1.15;
  margin: 0 0 .5em;
  font-weight: 600;
}

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.btn{
  display: inline-block;
  padding: 14px 34px;
  background: var(--accent-strong);
  color: var(--white);
  font-family: var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 14px;
  border: 1px solid var(--accent-strong);
  border-radius: 999px;
}
.btn:hover{
  background: transparent;
  color: var(--accent-text);
}
.btn-outline{
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
}
.btn-outline:hover{
  background: var(--white);
  color: var(--dark);
}
/* Dark filled button (e.g. on the orange call-to-action strip). Hover flips to white. */
.btn-dark{
  background: var(--dark);
  border-color: var(--dark);
  color: var(--white);
}
.btn-dark:hover{
  background: var(--white);
  border-color: var(--white);
  color: var(--dark);
}

/* ---------- Top bar ---------- */
/* ---------- Masthead: transparent over the hero, solid once scrolled ---------- */
#site-masthead{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}
#site-masthead .top-bar,
#site-masthead .site-header{
  background: transparent;
  border-bottom: none;
}
#site-masthead .main-nav a,
#site-masthead .top-bar a,
#site-masthead .menu-toggle{
  color: #fff;
}
#site-masthead .main-nav a:hover,
#site-masthead .top-bar a:hover{
  color: var(--accent-on-dark);
}
#site-masthead .btn-vocation{
  color: #fff;
  border-color: #fff;
}
#site-masthead .btn-vocation:hover{
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}
#site-masthead.scrolled{
  background: var(--dark);
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
}
#site-masthead.scrolled .top-bar{
  background: rgba(0,0,0,.15);
}

.top-bar{
  background: var(--dark);
  color: #cfcfcf;
  font-size: 14px;
}
.top-bar .container{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  flex-wrap: wrap;
  gap: 6px;
  max-width: none;
  padding-left: 40px;
  padding-right: 40px;
}
.top-bar a{ color: #cfcfcf; }
.top-bar a:hover{ color: var(--accent-on-dark); }
.top-bar .top-social{ display: flex; align-items: center; }
.top-bar .top-social a{
  margin-left: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cfcfcf;
  line-height: 0;
}
.top-bar .top-social a:hover{ color: var(--accent-on-dark); }
.top-bar .top-social svg{ display: block; }

/* ---------- Header ---------- */
.site-header{
  background: var(--white);
  border-bottom: 3px solid var(--accent);
  z-index: 100;
}
.site-header .container{
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 14px;
  padding-bottom: 14px;
  max-width: none;
  padding-left: 40px;
  padding-right: 40px;
}
.site-logo-mark{
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-logo-mark img,
.site-logo-mark .custom-logo{
  height: 84px;
  width: auto;
  display: block;
}

.site-header-center{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.site-header-actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Above the hamburger breakpoint: the logo and the action buttons are
   different widths, so simple flex-centering (splitting the leftover space
   evenly around the nav) pulls the nav visibly off the true middle of the
   header — toward whichever side is narrower. A 3-column grid with matching
   1fr flanks keeps the nav mathematically centered on the page regardless of
   how wide the logo or the button group happens to be. */
@media (min-width: 1201px){
  .site-header .container{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .site-logo-mark{ justify-self: start; }
  .site-header-center{ justify-self: center; }
  .site-header-actions{ justify-self: end; }
}

.btn-give{
  padding: 11px 28px;
  font-size: 15px;
  white-space: nowrap;
}
/* Header buttons: "Request a Prayer" is the orange (primary) button; "Give" is the white outline (secondary).
   Same height. Side by side on wide screens; on narrower ones the outlined Give moves into the thin top strip. */
.btn-prayer{
  padding: 11px 24px;
  font-size: 15px;
  white-space: nowrap;
}
/* The orange header button sits on a dark bar, so its hover flips to an orange outline that stays readable. */
#site-masthead .btn-prayer:hover{
  background: transparent;
  border-color: var(--accent-on-dark);
  color: var(--accent-on-dark);
}
.top-give{ display: none; }
.top-bar .top-give{
  margin-right: auto;            /* left side of the strip; social icons stay on the right */
  padding: 4px 16px;
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: #fff;
}
/* Beats "#site-masthead .top-bar a:hover" so the white-filled hover keeps dark, readable text. */
#site-masthead .top-bar .top-give:hover{ color: var(--dark); }
/* Phones only (see the 767px rule below): the orange Request a Prayer button, in the top strip beside Give. */
.top-prayer{ display: none; }
.top-bar .top-prayer{
  margin-right: auto;
  padding: 4px 16px;
  font-size: 12px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: #fff;
}
#site-masthead .top-bar .top-prayer:hover{
  background: transparent;
  border-color: var(--accent-on-dark);
  color: var(--accent-on-dark);
}

/* Laptop widths: the menu + logo + two buttons only fit if everything tightens up a little */
@media (min-width: 1201px) and (max-width: 1499px){
  .site-header .container{ gap: 20px; padding-left: 28px; padding-right: 28px; }
  .main-nav ul{ gap: 22px; }
  .main-nav a{ font-size: 14px; letter-spacing: .03em; }
  .site-header-actions{ gap: 10px; }
  .btn-give{ padding: 11px 20px; font-size: 14px; }
  .btn-prayer{ padding: 11px 18px; font-size: 14px; }   /* same height as Give */
}
/* Below that there is no room for both buttons: Give moves to the top strip, Request a Prayer stays in the header */
@media (max-width: 1365px){
  .site-header-actions .btn-give{ display: none; }
  .top-bar .top-give{ display: inline-block; }
}
/* Phones: "Request a Prayer" is too long for the header row (it would wrap onto its own line),
   so both buttons sit together in the top strip and the header keeps just logo, search and menu. */
@media (max-width: 767px){
  .site-header-actions .btn-prayer{ display: none; }
  /* Nothing left in the actions slot on phones (search icon and buttons all
     moved elsewhere), so tighten the side padding to bring the hamburger
     closer to the true edge instead of sitting 40px in from it. */
  .site-header .container{ padding-left: 20px; padding-right: 20px; }
  .top-bar .top-give{ margin-right: 8px; }
  .top-bar .top-prayer{ display: inline-block; }
  /* Tighter strip so two buttons + the social icons still fit on one line */
  .top-bar .container{ padding-left: 16px; padding-right: 16px; }
  .top-bar .top-give,
  .top-bar .top-prayer{ padding: 4px 12px; letter-spacing: .05em; }
  .top-bar .top-social a{ margin-left: 10px; }
}
@media (max-width: 360px){
  .top-bar .top-give,
  .top-bar .top-prayer{ font-size: 11px; padding: 4px 10px; letter-spacing: .03em; }
  .top-bar .top-social a{ margin-left: 8px; }
}
.btn-vocation{
  padding: 10px 26px;
  font-size: 13px;
  white-space: nowrap;
  background: transparent;
  color: var(--accent-text);
  border: 1px solid var(--accent);
}
.btn-vocation:hover{
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--white);
}

.main-nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 0;
  padding: 0;
}
.main-nav a{
  color: var(--dark);
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 500;
}
.main-nav a:hover{ color: var(--accent-text); }

.main-nav li{ position: relative; }
.main-nav .sub-menu{
  display: block;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  min-width: 250px;
  box-shadow: 0 14px 28px rgba(0,0,0,.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
  z-index: 200;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.main-nav .sub-menu li{ margin: 0; width: 100%; }
.main-nav .sub-menu a{
  display: block;
  padding: 12px 22px;
  font-size: 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  white-space: nowrap;
  color: var(--dark) !important;
}
.main-nav .sub-menu a:hover{ background: var(--cream); color: var(--accent-text) !important; }

.menu-toggle{
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--dark);
}

.search-toggle{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--cream);
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  color: var(--accent-text);
  transition: background .2s ease, color .2s ease;
}
.search-toggle:hover,
.search-toggle[aria-expanded="true"]{
  background: var(--accent);
  color: var(--white);
}

.header-search{
  max-height: 0;
  overflow: hidden;
  border-top: 0 solid var(--line);
  background: var(--cream);
  transition: max-height .25s ease, border-color .25s ease;
}
.header-search.open{
  max-height: 120px;
  border-top: 1px solid var(--line);
}
.header-search .container{
  padding-top: 18px;
  padding-bottom: 18px;
}
.header-search .search-form{
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.header-search .search-form label{
  flex: 1 1 auto;
  margin: 0;
}
.header-search .search-field{
  width: 100%;
  padding: 11px 20px;
  font-size: 15px;
  font-family: var(--font-body);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--dark);
}
.header-search .search-field:focus{
  outline: none;
  border-color: var(--accent);
}
.header-search .search-submit{
  flex: 0 0 auto;
  padding: 11px 24px;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--white);
  background: var(--accent-strong);
  border: 1px solid var(--accent-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.header-search .search-submit:hover{
  background: var(--dark);
  border-color: var(--dark);
}

@media (max-width: 1200px){
  /* Below 1200px there isn't room for the full menu beside the logo, so use the
     hamburger menu (this used to start at 880px, which let the menu overlap the logo
     on tablets and small laptop windows).
     Also: don't float a transparent header over the hero —
     it collides with the hero title. Make it a normal, solid header
     that pushes the hero content down instead. */
  #site-masthead{
    position: static;
    background: var(--dark);
    box-shadow: 0 2px 14px rgba(0,0,0,.18);
  }
  #site-masthead .top-bar{
    background: rgba(0,0,0,.15);
  }
  .site-header .container{ flex-wrap: wrap; }
  .site-logo-mark img,
  .site-logo-mark .custom-logo{ height: 56px; }
  .site-header-center{ order: 5; width: 100%; }
  .menu-toggle{ display: block; order: 2; margin-left: auto; }
  .site-header-actions{ order: 3; }
  /* Mobile: no separate search icon — the hamburger opens the search bar
     together with the nav panel (see .header-search sync below and main.js). */
  .search-toggle{ display: none; }
  .main-nav{
    display: none;
    width: 100%;
  }
  .main-nav.open{ display: block; }
  .main-nav ul{ flex-direction: column; align-items: center; gap: 0; padding: 10px 0; }
  .main-nav li{ border-top: 1px solid var(--line); width: 100%; text-align: center; }
  .main-nav a{ display: block; padding: 12px 0; }
  .btn-give{ padding: 9px 20px; }
  .btn-vocation{ padding: 8px 18px; }
  .header-search .container{ padding-top: 14px; padding-bottom: 14px; }
  .header-search .search-form{ max-width: none; }
  .main-nav .sub-menu{
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px 16px;
    background: transparent;
  }
  .main-nav .sub-menu a{
    padding: 8px 0;
    color: var(--white) !important;
  }
  .main-nav .sub-menu a:hover{
    background: rgba(255,255,255,.08);
    color: var(--accent-on-dark) !important;
  }
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  background: linear-gradient(160deg, var(--dark) 0%, #4a3226 55%, var(--accent) 150%);
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(242,104,53,.35), transparent 60%);
}
.hero-inner{
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 24px;
}
.hero-eyebrow{
  text-transform: uppercase;
  letter-spacing: .25em;
  font-size: 13px;
  color: var(--white);
  margin-bottom: 18px;
  display: block;
}
.hero-title{
  color: var(--white);
  margin-bottom: 10px;
}
.hero-title-line{
  display: block;
  font-size: 56px;
  line-height: 1.15;
  font-weight: 700;
}
.hero-title-connector{
  display: block;
  font-size: 22px;
  font-weight: 400;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #f2ded4;
  margin: 6px 0;
}
@media (max-width: 880px){
  .hero{ min-height: 60vh; }
  .hero-title-line{ font-size: 34px; }
  .hero-title-connector{ font-size: 16px; }
}

.hero-buttons{
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* ---------- Welcome / Intro section ---------- */
.welcome{
  padding: 90px 0;
  background: var(--white);
}
.welcome-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: start;
}
.welcome .kicker{
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;
  color: var(--accent-text);
  font-weight: 600;
}
.welcome h2{ font-size: 38px; margin-top: 10px; }
.welcome p{ color: #4a4a4a; }

.quote-block{
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 28px 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  color: var(--dark);
}

.quote-attribution{
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  color: var(--accent-text);
}

.welcome-photo{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(49,49,49,.10);
}

.contact-card{
  background: var(--cream);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  padding: 34px;
  border-radius: 3px;
}
.contact-card h3{ font-size: 22px; margin-bottom: 16px; }
.contact-card .field{ margin-bottom: 18px; }
.contact-card .field label{
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 4px;
}
.contact-card .field div{ font-weight: 600; }
.contact-card .btn{ margin-top: 10px; width: 100%; text-align: center; }

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

/* ---------- Light secondary features (Guard of Honor / Retreats) ---------- */
.light-features{
  padding: 90px 0;
  background: var(--cream);
}
.light-features-grid{
  --lf-gap: 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lf-gap);
  max-width: 1100px;
  margin: 0 auto;
}
.light-feature{ position: relative; }
/* Dividers sit in the middle of each gap: a plain thin line. */
.light-feature + .light-feature::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--lf-gap) / -2);
  width: 1px;
  transform: translateX(-50%);
  background: #d8cdbb;
}
.light-feature-photo{
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 18px;
}
.light-feature-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* Shown when a card has no photo yet, so the three cards still line up */
.light-feature-photo.is-placeholder{
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eee7d9;
}
.lf-cross{ position: relative; display: block; width: 26px; height: 40px; opacity: .55; }
.lf-cross::before,
.lf-cross::after{ content: ""; position: absolute; background: var(--accent-text); border-radius: 1px; }
.lf-cross::before{ left: 50%; top: 0; width: 3px; height: 100%; transform: translateX(-50%); }
.lf-cross::after{ top: 28%; left: 0; width: 100%; height: 3px; }
.light-feature h3{ font-family: var(--font-display); font-size: 26px; margin: 0 0 10px; color: var(--dark); }
.light-feature p{ color: #4a4a4a; font-size: 17px; line-height: 1.75; margin: 0 0 16px; }
/* Outline button for the three cards: accent outline + text on the cream background, fills in on hover.
   (.btn-outline above is white-on-transparent, for dark backgrounds.) */
.light-feature{ display: flex; flex-direction: column; }
.light-feature-photo{ flex: 0 0 auto; }
.light-feature .btn-outline-accent{
  align-self: flex-start;   /* natural button width, not stretched across the card */
  margin-top: auto;         /* buttons line up along the bottom even if the text lengths differ */
  padding: 11px 26px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--accent-text);
  border: 1.5px solid var(--accent-text);
  transition: background-color .2s ease, color .2s ease;
}
.light-feature .btn-outline-accent:hover,
.light-feature .btn-outline-accent:focus-visible{
  background: var(--accent-text);
  color: var(--white);
}
@media (max-width: 1100px){
  .light-features-grid{ --lf-gap: 56px; }
}
@media (max-width: 900px){
  .light-features-grid{ grid-template-columns: 1fr; gap: 40px; max-width: 520px; }
  /* Stacked: swap the vertical dividers for a horizontal rule */
  .light-feature + .light-feature::before{ display: none; }
  .light-feature + .light-feature{ border-top: 1px solid #d8cdbb; padding-top: 40px; }
}

/* Homepage-only background alternation — welcome white, get involved cream, sisters white,
   feature cards cream, blog white, quote strip cream,
   scoped with a modifier class so the same sections keep their normal
   background wherever else they're reused (About Us, the blog archive, etc). */
.sisters-section.bg-white{ background: var(--white); }
.blog-section.bg-cream{ background: var(--cream); }
.about-quote-strip.bg-white{ background: var(--white); border-bottom-color: transparent; }

/* ---------- Contact / Request a Prayer form ---------- */
.contact-form-section{ padding: 60px 0 90px; }

.prayer-form .field{ margin-bottom: 20px; }

.prayer-form label{
  display: block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 6px;
}

.prayer-form input[type="text"],
.prayer-form input[type="tel"],
.prayer-form input[type="email"],
.prayer-form textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--dark);
  background: #fff;
}

.prayer-form input:focus,
.prayer-form textarea:focus{
  outline: none;
  border-color: var(--accent);
}

.prayer-form textarea{ resize: vertical; }

.prayer-form button.btn{
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 14px 40px;
}

.hp-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-notice{
  padding: 16px 20px;
  border-radius: 3px;
  margin-bottom: 26px;
  font-size: 15px;
}

.form-notice-success{
  background: #eef7ee;
  border: 1px solid #bfe3bf;
  color: #2d5f2d;
}

.form-notice-error{
  background: #fbeceb;
  border: 1px solid #eec3c0;
  color: #8a2f28;
}

/* ---------- Feature / service cards ---------- */
.features{
  background: var(--cream);
  padding: 90px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.features.hero-overlap{
  position: relative;
  z-index: 3;
  background: transparent;
  border: none;
  padding: 0;
  margin-top: -160px;
}
.features.hero-overlap .blog-card{ box-shadow: 0 18px 40px rgba(0,0,0,.18); }
/* Prayer Requests / Vocations cards, sitting just below the welcome section */
.features.get-involved-section{
  background: var(--cream);
  border: none;
  padding: 80px 0;
}
.get-involved-section .blog-card{ background: var(--white); box-shadow: 0 10px 28px rgba(49,49,49,.10); }
@media (max-width: 780px){
  .features.hero-overlap{ margin-top: -90px; }
}
.features .section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}
.features .kicker{
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;
  color: var(--accent-text);
  font-weight: 600;
}
.features h2{ font-size: 34px; margin-top: 10px; }

.feature-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.feature-card{
  background: var(--white);
  padding: 38px 30px;
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(49,49,49,.08);
}
.feature-card .num{
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--accent-text);
  letter-spacing: .1em;
  margin-bottom: 14px;
  display: block;
}
.feature-card h3{ font-size: 21px; margin-bottom: 12px; }
.feature-card p{ color: #545454; font-size: 15px; margin-bottom: 18px; }
.feature-card a{
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

.feature-card .btn{
  display: block;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid var(--accent);
  padding: 14px 34px;
  box-sizing: border-box;
}

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

.feature-grid-1{
  grid-template-columns: 1fr;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}

.charism-plain{
  padding: 70px 0;
  text-align: center;
}
.charism-plain .container{
  max-width: 620px;
}
.charism-plain h3{
  font-size: 30px;
  margin-bottom: 16px;
}
.charism-plain p{
  color: #545454;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 26px;
}

.feature-grid-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 700px){
  .feature-grid-2{ grid-template-columns: 1fr; }
}

.involved-grid{
  grid-template-columns: repeat(2, 1fr);
  max-width: 800px;
  margin: 0 auto;
}
.involved-grid .blog-card-body{ text-align: left; align-items: flex-start; }

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

/* ---------- CTA strip ---------- */
.cta-strip{
  background: var(--accent-strong);
  color: var(--white);
  padding: 60px 0;
  text-align: center;
}
.cta-strip h2{ color: var(--white); font-size: 30px; }
.cta-strip p{ color: var(--white); max-width: 560px; margin: 0 auto 26px; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--dark);
  color: #cfcfcf;
  padding: 70px 0 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #4a4a4a;
}
.footer-col h4{
  color: var(--white);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 18px;
}
.footer-col p, .footer-col a{ color: #b9b9b9; font-size: 14.5px; }
.footer-col a:hover{ color: var(--accent-on-dark); }
.footer-col ul{ list-style: none; margin: 0; padding: 0; }
.footer-col li{ margin-bottom: 10px; }
.site-footer .logo-mark{
  margin-bottom: 18px;
}
.site-footer .logo-mark img{
  height: 60px;
  width: auto;
  display: block;
}

.footer-bottom{
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  color: #9a9a9a;
}
.footer-bottom a{ color: #9a9a9a; }
.footer-bottom a:hover{ color: var(--accent-on-dark); }

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

/* ---------- Inner pages (generic) ---------- */
.page-hero{
  background: var(--dark);
  color: var(--white);
  padding: 150px 0 70px;
  text-align: center;
}
.page-hero h1{ color: var(--white); font-size: 40px; }

/* Tall, full-bleed photo banner (used on Our Monastery, Our Day, Spirituality, Vocation) */
.page-hero.page-hero--tall{
  min-height: 62vh;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.page-hero.page-hero--tall .container{
  padding-bottom: 60px;
}
.page-hero.page-hero--tall h1{
  font-size: 48px;
}
@media (max-width: 700px){
  .page-hero.page-hero--tall{ min-height: 42vh; }
  .page-hero.page-hero--tall .container{ padding-bottom: 36px; }
  .page-hero.page-hero--tall h1{ font-size: 34px; }
}

.page-content{
  padding: 70px 0;
  max-width: 820px;
  margin: 0 auto;
}
/* ---------- Left sidebar on dropdown pages ---------- */
.page-content.page-content--sidebar{ max-width: 1180px; }
.page-content--sidebar > .container{
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.page-content--sidebar .page-main{ max-width: 780px; }
.page-sidebar{
  position: sticky;
  top: 110px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 30px 26px 26px;
  text-align: left;
}
.sidebar-kicker{
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-text);
}
.sidebar-rule{
  position: relative;
  height: 1px;
  margin: 12px 0 18px;
  background: #d8cdbb;
}
.sidebar-rule span{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--accent);
  border: 3px solid var(--cream);
  box-sizing: content-box;
  transform: translate(-50%, -50%) rotate(45deg);
}
.sidebar-nav,
.sidebar-sub{ list-style: none; margin: 0; padding: 0; }
.sidebar-nav a{
  color: var(--accent-text);
  font-size: 16.5px;
  line-height: 1.4;
  text-decoration: none;
}
.sidebar-nav a:hover{ color: var(--dark); }
.sidebar-single{ padding: 9px 0; }
.sidebar-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
}
.sidebar-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 4px;
  background: none;
  border: 0;
  color: var(--accent-text);
  font: inherit;
  font-size: 16.5px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.sidebar-toggle--label{ width: 100%; padding: 0; }
.sidebar-toggle:hover{ color: var(--dark); }
.sidebar-icon{
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.sidebar-icon::before,
.sidebar-icon::after{
  content: "";
  position: absolute;
  background: currentColor;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.sidebar-icon::before{ width: 12px; height: 1.5px; }
.sidebar-icon::after{ width: 1.5px; height: 12px; }
.sidebar-toggle[aria-expanded="true"] .sidebar-icon::after{ opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.sidebar-group:not(.is-open) > .sidebar-sub{ display: none; }
.sidebar-sub{ margin: 0 0 8px; padding-left: 14px; border-left: 1px solid #d8cdbb; }
.sidebar-sub li{ margin: 0; }
.sidebar-sub a{
  display: block;
  padding: 7px 10px;
  font-size: 15.5px;
  border-radius: 4px;
}
.sidebar-sub .is-current > a{
  background: rgba(242,104,53,.12);
  color: var(--dark);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent);
}
@media (max-width: 900px){
  .page-content--sidebar > .container{ grid-template-columns: 1fr; gap: 36px; }
  .page-sidebar{ position: static; }
}
/* Phones: leave the "Explore" list out entirely (the menu already gets people around).
   Tablets (768px and up) and desktop still show it. */
@media (max-width: 767px){
  .page-sidebar{ display: none; }
}

.page-content h2{ color: var(--accent-text); font-size: 28px; margin-top: 40px; }
.page-content-list{
  margin: 0 0 22px;
  padding-left: 22px;
}
.page-content-list li{
  color: #4a4a4a;
  margin-bottom: 10px;
  line-height: 1.7;
}
.page-content-list li::marker{ color: var(--accent-text); }

/* ---------- Vocation page: "Discerning This Life" highlight ---------- */
.vocation-highlight{
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 60px 0;
}
.vocation-highlight-frame{
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  padding: 40px 10px;
}
.vocation-highlight-frame h2{ color: var(--accent-text); font-size: 28px; margin-top: 10px; }
.vocation-highlight-frame p{ color: #4a4a4a; margin-bottom: 22px; text-align: left; }
.vocation-highlight-frame p:last-child{ margin-bottom: 0; }

/* ---------- About Us page ---------- */
.about-quote-strip{
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 46px 0;
  text-align: center;
}
.about-quote-strip p{
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  color: var(--dark);
  line-height: 1.4;
}

.history-section{ padding: 70px 0 30px; }
.history-section .section-head{ text-align: center; max-width: 700px; margin: 0 auto 50px; }
.history-section .kicker{
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;
  color: var(--accent-text);
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.history-section h2{ font-size: 36px; margin: 0; }

.history-row{
  display: grid;
  grid-template-columns: 48% 1fr;
  gap: 50px;
  align-items: center;
  padding: 46px 0;
  border-bottom: 1px solid var(--line);
}
.history-row:last-child{ border-bottom: none; }
.history-row.reverse{ grid-template-columns: 1fr 48%; }
.history-row.reverse .history-photo{ order: 2; }
.history-row.reverse .history-text{ order: 1; }
.history-row.text-only{ grid-template-columns: 1fr; text-align: center; padding: 36px 0; }
.history-row.text-only .history-text{ max-width: 680px; margin: 0 auto; }

.history-photo{ position: relative; }
.history-photo-frame{
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  padding: 10px 10px 14px;
  box-shadow: 0 10px 26px rgba(49,49,49,.10);
  border-radius: 2px;
}
.history-photo-frame img{
  width: 100%;
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 1px;
}
.history-photo-caption{
  position: absolute;
  right: 10px;
  bottom: 14px;
  max-width: 75%;
  padding: 7px 14px;
  background: rgba(30,30,30,.72);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-align: right;
  letter-spacing: .02em;
  border-top-left-radius: 2px;
}
.history-year-badge{
  position: absolute;
  z-index: 2;
  top: -14px;
  left: 22px;
  background: var(--accent-strong);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 16px;
  padding: 6px 16px;
  border-radius: 2px;
  box-shadow: 0 4px 10px rgba(211,67,14,.35);
}
.history-row.reverse .history-year-badge{ left: auto; right: 22px; }

.history-text .kicker-small{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--accent-text);
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}
.history-text h3{ font-family: var(--font-display); font-size: 24px; margin: 0 0 14px; color: var(--dark); }
.history-text p{ color: #4a4a4a; margin: 0; font-size: 19px; line-height: 1.85; }

.history-cta{ text-align: center; padding: 50px 0 30px; }

.vocation-sisters-teaser{
  text-align: center;
  padding: 10px 0 50px;
  font-size: 17px;
  color: #5a5a5a;
}
.vocation-sisters-teaser a{ font-weight: 600; }

@media (max-width: 760px){
  .history-row, .history-row.reverse{ grid-template-columns: 1fr; gap: 22px; }
  .history-row.reverse .history-photo,
  .history-row.reverse .history-text{ order: initial; }
  .history-section h2{ font-size: 30px; }
}

.sisters-section{ background: var(--cream); }
.sisters-section .sisters-intro{
  max-width: 620px;
  margin: 14px auto 0;
  color: #5a5a5a;
  font-size: 17px;
}
.sisters-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.sister-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 20px 24px;
  text-align: center;
  width: 240px;
  max-width: 100%;
}
.sister-card img,
.sister-avatar-fallback{
  width: 170px;
  height: 170px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
  border: 3px solid var(--cream);
  box-shadow: 0 6px 18px rgba(49,49,49,.12);
}
.sister-avatar-fallback{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 38px;
}
.sister-card h3{ font-size: 18px; margin: 0; }
.sister-card .sister-role{
  font-size: 14px;
  color: var(--accent-text);
  margin: 6px 0 0;
  font-weight: 600;
}

@media (max-width: 600px){
  .about-quote-strip p{ font-size: 19px; }
}
.page-content p{ color: #4a4a4a; margin-bottom: 22px; }
.page-content > .container > *:first-child{
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--dark);
}
.page-content img{
  border-radius: 4px;
  margin: 30px 0;
}
.page-content blockquote{
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 22px;
  margin: 30px 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  color: var(--dark);
}
/* ---------- Donate page ---------- */
.donate-intro{ padding: 60px 0 10px; }
.donate-intro p{ color: #4a4a4a; font-size: 18px; margin-bottom: 26px; }
.donate-admin-note{ color: #9a9a9a; font-size: 14px; }

.funds-section{ padding: 60px 0 80px; background: var(--cream); margin-top: 40px; }
.funds-section .section-head{ text-align: center; margin-bottom: 44px; }
.funds-section .section-head p{ color: #666; max-width: 620px; margin: 12px auto 0; }

.fund-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}
.fund-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fund-card img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.fund-card-body{
  padding: 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.fund-card-body h3{
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--dark);
  margin: 0 0 12px;
}
.fund-desc{ color: #5a5a5a; font-size: 15.5px; flex: 1; margin-bottom: 18px; }
.fund-desc p{ margin: 0 0 10px; }
.fund-card-body .btn{ align-self: flex-start; padding: 11px 26px; font-size: 13px; }
.fund-give-pending{ color: #9a9a9a; font-size: 14px; }

.page-content ul, .page-content ol{
  color: #4a4a4a;
  padding-left: 22px;
}
.page-content li{ margin-bottom: 8px; }

/* ---------- Our Monastery — alternating image/text rows ---------- */
.monastery-row-section{
  padding: 60px 0;
}
.monastery-row-section.alt-bg{
  background: var(--cream);
}
.monastery-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.monastery-row.reverse .monastery-row-image{
  order: 2;
}
.monastery-row.reverse .monastery-row-text{
  order: 1;
}
.monastery-row-image img{
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.monastery-row-image-fallback{
  width: 100%;
  height: 380px;
  border-radius: 4px;
  background: linear-gradient(160deg, var(--dark) 0%, #4a3226 55%, var(--accent) 150%);
}
.monastery-row-text h3{
  color: var(--accent-text);
  font-size: 27px;
  margin-bottom: 14px;
}
.step-num{
  display: block;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.monastery-row-text p{
  color: #4a4a4a;
  margin-bottom: 18px;
}
.monastery-row-text .row-link{
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* Daily schedule list (legacy - unused after Our Day timeline redesign) */
.schedule-list p{
  margin: 0 0 6px;
  color: #4a4a4a;
  font-size: 15.5px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 6px;
}

@media (max-width: 880px){
  .monastery-row{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .monastery-row.reverse .monastery-row-image{ order: 1; }
  .monastery-row.reverse .monastery-row-text{ order: 2; }
  .monastery-row-image img,
  .monastery-row-image-fallback{ height: 260px; }
}

/* ---------- Our Day — closing quote ---------- */
.closing-quote{
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 60px 0;
  text-align: center;
}
.closing-quote-logo{
  max-width: 140px;
  margin: 0 auto 26px;
  display: block;
}
.closing-quote p{
  max-width: 700px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.7;
  color: var(--dark);
}

.motto-section{
  padding: 70px 0 76px;
  background: var(--white);
  text-align: center;
}
.motto-frame{
  max-width: 760px;
  margin: 0 auto;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  padding: 36px 20px 32px;
  position: relative;
}
.motto-quote-mark{
  display: block;
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: -4px;
}
.motto-quote-mark--close{ margin: 18px 0 -4px; transform: scaleX(-1); }
.motto-kicker{
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;
  color: var(--accent-text);
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.motto-frame .motto-heading{ font-family: var(--font-display); color: var(--dark); font-size: 32px; letter-spacing: .01em; margin: 0 0 22px; }
.motto-frame .motto-text{
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.8;
  color: #4a4a4a;
}
@media (max-width: 640px){
  .motto-frame{ padding: 30px 22px 26px; }
  .motto-frame .motto-heading{ font-size: 26px; }
  .motto-frame .motto-text{ font-size: 17px; }
}

/* ---------- Our Day — schedule timeline ---------- */
.schedule-section{
  padding: 80px 0;
  background: var(--cream);
}
.schedule-section .section-head{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
  width: 100%;
}
.schedule-section .kicker{
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 13px;
  color: var(--accent-text);
  font-weight: 600;
}
.schedule-section h2{ font-size: 34px; margin-top: 10px; }

.schedule-timeline{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 40px;
}
.schedule-col{
  border-left: 2px solid var(--accent);
  padding-left: 24px;
}
.schedule-item{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.schedule-item::before{
  content: "";
  position: absolute;
  left: -29px;
  top: 22px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.schedule-item:last-child{ border-bottom: none; }
.schedule-time{
  flex: 0 0 90px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--dark);
  font-size: 15.5px;
}
.schedule-activity{
  color: #4a4a4a;
  font-size: 15.5px;
}

@media (max-width: 880px){
  .schedule-timeline{
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 24px;
  }
  .schedule-col{ margin-bottom: 10px; }
  /* Mobile-only safety net: stops the whole page from scrolling sideways if
     any one element (an image, a wide table, a long unbroken word) ever
     ends up a little wider than the screen. Has no effect on desktop. */
  html, body{ overflow-x: hidden; max-width: 100%; }
}

/* ---------- Blog ---------- */
.page-hero-sub{
  color: #e9e2d8;
  font-size: 17px;
  margin-top: 10px;
}
.blog-section{ padding: 70px 0; background: var(--white); }
.blog-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 34px;
}
@media (max-width: 380px){
  /* On narrow phones, 300px minimum columns can force the grid (and the
     whole page) wider than the screen, causing horizontal scrolling.
     Drop to a single, fully fluid column below this width. */
  .blog-grid{ grid-template-columns: 1fr; }
}
.blog-card{
  background: var(--cream);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(49,49,49,.08);
  display: flex;
  flex-direction: column;
}
.blog-card-thumb{
  display: block;
  width: 100%;
  height: 200px;
  background: var(--dark);
  overflow: hidden;
}
.blog-card-thumb img{
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.blog-card-thumb-fallback{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 48px;
}
.blog-card-body{ padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; }
.blog-card-meta{
  display: flex;
  gap: 14px;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
  color: #9a9a9a;
  margin-bottom: 10px;
}
.blog-card-cat{ color: var(--accent-text); font-weight: 600; }
.blog-card-body h2{ font-size: 21px; margin-bottom: 12px; }
.blog-card-body h2 a{ color: var(--dark); }
.blog-card-body h2 a:hover{ color: var(--accent-text); }
.blog-card-excerpt{ color: #4a4a4a; font-size: 15.5px; margin-bottom: 18px; flex: 1; }
.blog-card-more{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.blog-empty{ text-align: center; color: #4a4a4a; padding: 30px 0; }

.blog-pagination{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
  flex-wrap: wrap;
}
.blog-pagination .page-numbers{
  display: inline-block;
  min-width: 42px;
  text-align: center;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dark);
  font-size: 14px;
  background: var(--white);
}
.blog-pagination .page-numbers.current{
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--white);
}
.blog-pagination .page-numbers:hover{ border-color: var(--accent); color: var(--accent-text); }

/* Single post */
.blog-post-cat{
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
}
.blog-post-content img{ border-radius: 6px; margin: 30px 0; width: 100%; height: auto; }
.blog-post-tags{
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.blog-post-tags a{
  font-size: 13px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  color: #4a4a4a;
}
.blog-post-tags a:hover{ border-color: var(--accent); color: var(--accent-text); }
.blog-post-nav{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 15px;
}
.blog-post-nav a{ color: var(--dark); }
.blog-post-nav a:hover{ color: var(--accent-text); }
.blog-post-back{ text-align: center; margin-top: 46px; }
.blog-post-comments{
  margin-top: 50px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

@media (max-width: 600px){
  .blog-post-nav{ flex-direction: column; gap: 10px; }
}

/* ---------- Our Day: intro line ---------- */
.ourday-intro{
  background: var(--white);
  padding: 46px 0 6px;
  text-align: center;
}
.ourday-intro p{
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: 21px;
  font-style: italic;
  color: var(--dark);
  line-height: 1.5;
}
@media (max-width: 600px){
  .ourday-intro p{ font-size: 18px; }
}

/* ---------- Italic text (*like this* in any text field) ----------
   Inside blocks that are already italic (pull-quotes), emphasis flips back
   to upright so it still stands out. */
.quote-block em,
.about-quote-strip em{ font-style: normal; }

/* ---------- Closing photo row (Vocation page: up to 3 photos in a row) ----------
   Photos sit side by side and share the width equally. One or two photos are
   capped in size and centred rather than stretched. On phones they stack. */
.about-photo-row{
  padding-bottom: 40px;
}
.about-photo-grid{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}
.about-photo-grid img{
  flex: 1 1 0;
  min-width: 0;
  max-width: 380px;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 10px 26px rgba(49,49,49,.10);
}
@media (max-width: 640px){
  .about-photo-grid{
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .about-photo-grid img{
    flex: none;
    width: 100%;
    max-width: 520px;
  }
}

/* ---------- Accessibility: screen-reader-only text, skip link, main landmark ---------- */
.screen-reader-text{
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
/* "Skip to content": hidden until a keyboard user tabs to it, then it appears top-left. */
.skip-link:focus{
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  margin: 0;
  padding: 14px 24px;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000;
  background: var(--white);
  color: var(--dark);
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
}
.site-main:focus{ outline: none; }