/* V1.1: focused visual and accessibility refinements.
   Loaded last so the original page styles stay easy to compare. */
:root { --muted: #625c53; }
:focus-visible { outline: 3px solid #765b20; outline-offset: 4px; }
.site-header :focus-visible, .site-footer :focus-visible,
.mass-section :focus-visible, .feature-panel :focus-visible,
.newsletter :focus-visible, .history-display :focus-visible {
  outline-color: var(--gold-light);
}
#main-content:focus { outline: none; }
.search-form input:focus-visible { outline: 3px solid #765b20; outline-offset: -3px; }
button, input, select { font-family: inherit; }
.utility-button, .utility-phone { min-height: 44px; align-items: center; }
.utility-phone { display: inline-flex; }
.utility-bar { font-size: .78rem; letter-spacing: .04em; }
.identity-copy small { font-size: .72rem; letter-spacing: .09em; color: #eee7da; }
.primary-nav a { font-size: .76rem; letter-spacing: .065em; }
.menu-toggle, .search-close-button { min-width: 44px; min-height: 44px; }
.search-hint, .search-result small, .no-results { font-size: .875rem; }
.site-footer nav a, .footer-bottom, .footer-identity span { font-size: .8rem; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom { color: #ded8cd; }
.eyebrow, .card-kicker, .signature span, .contact-details > div > span,
.newsletter-action small, .papal-intention-source { font-size: .85rem; }
.eyebrow.dark { color: #765b20; }
.papal-intention-source { color: #625747; }
.newsletter-action small { color: #e0d4c8; }
.sacraments-hero h1, .sacraments-overview h2,
.sacraments-contact-band h2, .sacrament-card h3,
.safe-hero h1, .urgent-panel h2, .safe-heading h2, .safe-card h3,
.safe-info h3, .safe-archdiocese h2, .safe-arch-panel h3 {
  font-family: var(--serif-display); line-height: 1.15;
}
.safe-label, .sacrament-number { color: #765b20; }
.privacy-updated, .privacy-nav a, .history-source-note { font-size: .85rem; color: #625c53; }
.history-eyebrow, .history-content-eyebrow { font-size: .8rem; }
.history-detail small, .history-nav-button small { font-size: .8rem; }
.history-label { font-size: .75rem; }
.history-timeline-wrap { scrollbar-width: thin; }
.history-point { min-height: 44px; }
/* Keep era labels legible; intentionally scroll the existing timeline when needed. */
.parish-history-page .history-timeline-wrap { overflow-x: auto; }
.parish-history-page .history-timeline { min-width: 1420px; }
.parish-history-page .history-label { font-size: .75rem; }
.parish-history-page .history-year { font-size: .85rem; }
/* Long headings, addresses and email links must remain within their grid cells. */
main h1, main h2, main h3 { overflow-wrap: anywhere; }
.contact-details, .contact-row, .safe-card, .safe-info, .sacrament-card,
.sacraments-hero-grid > *, .safe-hero-grid > *, .wider-hero-grid > *,
.history-hero > *, .history-content { min-width: 0; }
main a[href^="mailto:"] { overflow-wrap: anywhere; }
.quick-info { background: var(--cream); border-bottom: 1px solid var(--stone); }
.quick-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-block: 28px 18px; }
.quick-info-item {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0; padding: 12px 28px; text-decoration: none;
  border-inline-start: 1px solid var(--stone); color: var(--wine);
  transition: background-color .18s ease;
}
.quick-info-item:first-child { border-inline-start: 0; padding-left: 0; }
.quick-info-item:last-child { padding-right: 0; }
.quick-info-label { font: 700 .75rem/1.5 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #665439; }
.quick-info-item strong { font: 600 clamp(1.45rem, 2vw, 1.9rem)/1.3 var(--serif-display); }
.quick-info-detail { font-size: .8rem; color: #625747; }
.quick-info-detail span { color: var(--wine); }
.quick-info-item:hover { background-color: #eae2d3; }
.quick-info-note { margin-block: 0; padding-bottom: 22px; font-size: .8rem; color: #625747; }
.not-found { padding-block: 70px 110px; }
.not-found-number { font: 600 5rem/1 var(--serif-display); margin: 20px 0; color: #765b20; }
.not-found h1 { font: 500 clamp(2.5rem, 6vw, 4rem)/1.2 var(--serif-display); margin: 0 0 24px; color: var(--wine); }
.not-found > p { max-width: 720px; }
.not-found-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; margin-top: 32px; }
@media (max-width: 1100px) {
  .utility-bar { display: none; }
  .masthead { min-height: 86px; }
  .menu-toggle { display: block; position: relative; z-index: 102; }
  .primary-nav {
    position: fixed; inset: 0; z-index: 101; flex-direction: column;
    justify-content: center; gap: 16px; background: rgba(14,21,29,.98);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    overflow-y: auto; max-height: 100dvh; padding: 76px 24px 28px;
    transition: .25s ease;
  }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .primary-nav a { font-size: .95rem; min-height: 44px; color: #fff; }
  .mobile-utilities {
    display: flex; flex-direction: column; align-items: center;
    gap: 12px; padding-top: 12px; margin-top: 8px;
    border-top: 1px solid #ffffff24; color: #eee7da; font-size: .875rem;
  }
}
@media (max-width: 760px) {
  .quick-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 12px; }
  .quick-info-item { padding: 18px 14px; }
  .quick-info-item:first-child { padding-left: 14px; }
  .quick-info-item:nth-child(odd) { border-inline-start: 0; }
  .quick-info-item:nth-child(n+3) { border-top: 1px solid var(--stone); }
  .quick-info-item:last-child { padding-right: 14px; }
  .quick-info-item strong { font-size: clamp(1.1rem, 3.7vw, 1.6rem); }
  .quick-info-label { font-size: .7rem; letter-spacing: .08em; }
  .quick-info-detail { font-size: .75rem; }
  .quick-info-note { font-size: .8rem; }
  .search-panel { max-height: calc(100dvh - 36px); }
  .sacraments-hero h1 { font-size: clamp(2.1rem, 9vw, 3.4rem); }
  .safe-hero h1 { font-size: clamp(1.8rem, 8vw, 3rem); }
}
@media (max-height: 650px) and (max-width: 1100px) {
  .primary-nav { justify-content: flex-start; gap: 4px; padding-top: 65px; }
  .mobile-utilities { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}
/* Legible secondary labels on light panels; retain gold as the decorative accent. */
.safe-content .safe-kicker, .sacraments-overview .sacraments-kicker,
.safe-info > span, .section-number, .contact-card-number,
.archive-item-number, .link-number { color: #765b20; }
.newsletter-button, .archive-link, .newsletter-latest-note,
.archive-item-subtitle, .contact-button, .wider-button,
.wider-jump-nav a, .privacy-button, .safe-label { font-size: .8rem; }
.archive-link, .wider-jump-nav a, .sacrament-card > a {
  min-height: 44px; display: inline-flex; align-items: center;
}

/* V1.1 correction: intrinsic HTML dimensions reserve space; CSS must scale both axes.
   Existing page-specific image heights still take precedence over this base rule. */
img { height: auto; }
.feature-symbol {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.feature-symbol img {
  display: block;
  width: 100%;
  height: auto;
}

/* 17 October: use the existing palette consistently across adjacent sections. */
.quick-info,
.quick-info-item,
.quick-info-label,
.quick-info-item strong,
.quick-info-detail,
.quick-info-detail span,
.quick-info-note {
  color: var(--ink);
}

/* A light papal section separates navy worship information from burgundy Sacraments. */
.papal-intention {
  background: var(--paper);
  color: var(--ink);
}
.papal-intention::before {
  border-color: var(--gold);
}
.papal-intention h2,
.papal-intention-text,
.papal-intention-source {
  color: var(--ink);
}
.papal-intention-date {
  color: #765b20;
}
.papal-intention-copy,
.papal-arms {
  border-color: var(--gold);
}

/* Final preview corrections: equal Mass cards and aligned heading/content rows. */
@media (min-width: 961px) {
  .mass-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Fallback for older browsers without shared grid rows. */
  .mass-card .card-kicker {
    min-height: 3.5em;
  }
  .mass-card h3 {
    min-height: 1.75em;
  }
  @supports (grid-template-rows: subgrid) {
    .mass-grid {
      grid-template-rows: auto auto 1fr;
      row-gap: 0;
    }
    .mass-card {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      row-gap: 0;
    }
    .mass-card .card-kicker,
    .mass-card h3 {
      min-height: 0;
    }
  }
}
.mass-card .time-list > div {
  align-items: baseline;
}

/* Keep the full word within its column rather than splitting the final letter. */
.safe-hero h1 {
  font-size: clamp(1.5rem, 4.1vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  overflow-wrap: normal;
  word-break: normal;
}
@media (max-width: 900px) {
  .safe-hero h1 {
    font-size: clamp(1.5rem, 7vw, 3.6rem);
  }
}

/* Recovery links on ivory need a dark foreground. */
.not-found .text-link {
  color: var(--wine);
  text-decoration: underline;
  text-underline-offset: .2em;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* Brighten homepage hero image */
.hero-image {
  background:
    linear-gradient(rgba(14,21,29,.02), rgba(14,21,29,.02)),
    url("images/st-marys-hero.jpg") center 45% / cover no-repeat;
}

.hero-image::after {
  background:
    radial-gradient(circle at 50% 22%, rgba(179,149,87,.10), transparent 24%),
    linear-gradient(120deg, rgba(75,23,32,.10), transparent 45%);
}

/* Balanced hero overlay — darker at top, brighter below */
.hero-overlay {
  background:
    linear-gradient(
      180deg,
      rgba(7,11,16,.78) 0%,
      rgba(7,11,16,.62) 15%,
      rgba(7,11,16,.32) 32%,
      rgba(7,11,16,.08) 55%,
      transparent 70%
    ),
    linear-gradient(
      90deg,
      rgba(7,11,16,.65) 0%,
      rgba(7,11,16,.35) 45%,
      rgba(7,11,16,.06) 80%
    );
}
/* Remove borders/lines from papal intention section */
.papal-intention::before {
  display: none;
}

.papal-intention-copy,
.papal-arms {
  border: 0 !important;
  border-left: 0 !important;
  border-top: 0 !important;
}