/*
Theme Name: Diocese Website
Description: Shared standalone theme for diocese websites (per-site settings in site.php). No page builder: prose lives in each page's block-editor content, lists live in custom post types.
Version: 1.5.4
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: tandag
*/

/* ---------- Tokens ---------- */
:root {
  --dot-navy: #0e3557;
  --dot-navy-deep: #081f35;
  --dot-overlay-rgb: 8, 31, 53; /* hero/banner overlay + shadows (r, g, b of --dot-navy-deep) */
  --dot-sea: #1f6f8b;
  --dot-gold: #c9a227;
  --dot-gold-rgb: 201, 162, 39;
  --dot-gold-ink: #7a5c12;
  --dot-bg: #fbfaf7;
  --dot-surface: #ffffff;
  --dot-surface-2: #f2efe8;
  --dot-text: #1c232b;
  --dot-muted: #5a6572;
  --dot-border: #e2ddd2;
  --dot-link: #0e5c8a;
  --dot-on-dark: #ffffff;
  --dot-radius: 14px;
  --dot-shadow: 0 1px 2px rgba(var(--dot-overlay-rgb), .06), 0 8px 24px rgba(var(--dot-overlay-rgb), .06);
  --dot-max: 1180px;
  --dot-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --dot-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --dot-bg: #0c1117; --dot-surface: #131b24; --dot-surface-2: #1a2430;
    --dot-text: #e8ecf1; --dot-muted: #a3afbd; --dot-border: #2a3644;
    --dot-link: var(--dot-link-dark, #7cc3e8); --dot-gold-ink: #e3c35a; --dot-navy: var(--dot-navy-dark, #12476f);
    --dot-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --dot-bg: #0c1117; --dot-surface: #131b24; --dot-surface-2: #1a2430;
  --dot-text: #e8ecf1; --dot-muted: #a3afbd; --dot-border: #2a3644;
  --dot-link: var(--dot-link-dark, #7cc3e8); --dot-gold-ink: #e3c35a; --dot-navy: var(--dot-navy-dark, #12476f);
  --dot-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--dot-bg); color: var(--dot-text); font: 17px/1.65 var(--dot-sans); }
img { max-width: 100%; height: auto; }
a { color: var(--dot-link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { font-family: var(--dot-serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.dot-wrap { width: min(var(--dot-max), 100% - 32px); margin-inline: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dot-skip { position: absolute; left: 12px; top: -60px; background: var(--dot-gold); color: #111; padding: 10px 16px; border-radius: 8px; z-index: 100; font-weight: 600; }
.dot-skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--dot-gold); outline-offset: 2px; }

/* ---------- Header ---------- */
.dot-util { background: var(--dot-navy-deep); color: #cfdbe7; font-size: .85rem; }
.dot-util .dot-wrap { display: flex; gap: 18px; justify-content: space-between; align-items: center; min-height: 38px; flex-wrap: wrap; }
.dot-util a { color: #e9f0f6; text-decoration: none; }
.dot-util a:hover { text-decoration: underline; }
.dot-util nav { display: flex; gap: 18px; flex-wrap: wrap; }
/* Live indicator. The `dot-live` class is emitted only while a stream is actually running
   (see dot_is_live() / dot_live_link()), so the pulse now means something. */
.dot-live::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; margin-right: 6px; animation: dot-pulse 2s infinite; vertical-align: middle; }
.dot-live-banner { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 0 0 24px; padding: 12px 16px; border-radius: var(--dot-radius); background: rgba(229, 72, 77, .08); border: 1px solid rgba(229, 72, 77, .35); }
@keyframes dot-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot-live::before { animation: none; } html { scroll-behavior: auto; } }

.dot-header { background: var(--dot-surface); border-bottom: 1px solid var(--dot-border); position: sticky; top: 0; z-index: 50; }
.dot-header .dot-wrap { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.dot-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--dot-text); margin-right: auto; }
.dot-brand img { width: 52px; height: 52px; object-fit: contain; }
.dot-brand-mark { width: 48px; height: 48px; border-radius: 50%; background: var(--dot-navy); color: var(--dot-gold); display: grid; place-items: center; font: 700 1.2rem var(--dot-serif); }
.dot-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.dot-brand-text strong { font: 600 1.35rem var(--dot-serif); }
.dot-brand-text span { font-size: .78rem; color: var(--dot-muted); letter-spacing: .06em; text-transform: uppercase; }
.dot-nav { display: flex; gap: 4px; align-items: center; }
.dot-nav a { color: var(--dot-text); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: .95rem; }
.dot-nav a:hover, .dot-nav a[aria-current="page"] { background: var(--dot-surface-2); }
.dot-search-toggle, .dot-theme-toggle, .dot-menu-toggle { background: none; border: 1px solid var(--dot-border); color: var(--dot-text); border-radius: 10px; width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.dot-menu-toggle { display: none; }
.dot-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dot-searchbar { display: none; border-top: 1px solid var(--dot-border); padding: 12px 0; }
.dot-searchbar.is-open { display: block; }
@media (max-width: 960px) {
  .dot-menu-toggle { display: grid; }
  .dot-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--dot-surface); flex-direction: column; align-items: stretch; padding: 8px 16px 16px; border-bottom: 1px solid var(--dot-border); box-shadow: var(--dot-shadow); }
  .dot-nav.is-open { display: flex; }
  .dot-nav a { padding: 12px; }
  .dot-util .dot-hide-sm { display: none; }
}

/* ---------- Search form ---------- */
.dot-searchform { display: flex; gap: 8px; }
.dot-searchform input[type="search"] { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--dot-border); border-radius: 10px; background: var(--dot-surface); color: var(--dot-text); font: inherit; }

/* ---------- Buttons ---------- */
.dot-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-size: .95rem; line-height: 1.2; }
.dot-btn-primary { background: var(--dot-gold); color: #1a1405; }
.dot-btn-primary:hover { background: #d8b23b; }
.dot-btn-ghost { border-color: rgba(255,255,255,.7); color: #fff; }
.dot-btn-ghost:hover { background: rgba(255,255,255,.12); }
.dot-btn-outline { border-color: var(--dot-navy); color: var(--dot-navy); background: transparent; }
:root[data-theme="dark"] .dot-btn-outline { border-color: var(--dot-link); color: var(--dot-link); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dot-btn-outline { border-color: var(--dot-link); color: var(--dot-link); } }
.dot-btn-outline:hover { background: var(--dot-surface-2); }
button.dot-btn, input.dot-btn { font-family: inherit; }

/* ---------- Hero ---------- */
.dot-hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; background: var(--dot-navy-deep); }
.dot-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--dot-hero-img, none) center/cover no-repeat; }
.dot-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(var(--dot-overlay-rgb),.94) 20%, rgba(var(--dot-overlay-rgb),.72) 55%, rgba(var(--dot-overlay-rgb),.35) 100%); }
.dot-hero .dot-wrap { padding: clamp(64px, 11vw, 132px) 0; max-width: var(--dot-max); }
.dot-hero-inner { max-width: 680px; }
.dot-eyebrow { display: inline-block; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dot-gold); font-weight: 600; margin-bottom: 14px; }
.dot-hero h1 em { font-style: italic; color: var(--dot-gold); }
.dot-hero p.dot-lede { font-size: 1.15rem; color: #dce6ef; max-width: 58ch; }
.dot-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

/* Phones get the 768 px hero, not the 1920 px one. The <head> preload uses the
   same two breakpoints, so only one of the files is ever fetched. */
@media (max-width: 768px) {
  .dot-hero::before, .dot-page-hero::before { background-image: var(--dot-hero-img-sm, var(--dot-hero-img, none)); }
}

.dot-page-hero { position: relative; color: #fff; isolation: isolate; background: var(--dot-navy-deep); overflow: hidden; }
.dot-page-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--dot-hero-img, none) center/cover no-repeat; }
.dot-page-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(var(--dot-overlay-rgb),.95) 25%, rgba(var(--dot-overlay-rgb),.6) 70%, rgba(var(--dot-overlay-rgb),.35)); }
.dot-page-hero .dot-wrap { padding: clamp(44px, 7vw, 84px) 0; }
.dot-page-hero h1 { margin: 0; }
.dot-page-hero p { color: #d6e1eb; max-width: 62ch; margin: 12px 0 0; font-size: 1.08rem; }
.dot-crumbs { font-size: .85rem; margin-bottom: 10px; color: #b8c7d6; }
.dot-crumbs a { color: #e3ecf4; }

/* ---------- Sections ---------- */
.dot-section { padding: clamp(48px, 7vw, 88px) 0; }
.dot-section-alt { background: var(--dot-surface-2); }
.dot-section-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.dot-section-head h2 { margin: 0; }
.dot-section-head p { margin: 6px 0 0; color: var(--dot-muted); max-width: 60ch; }
.dot-grid { display: grid; gap: 20px; }
.dot-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.dot-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.dot-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.dot-card { background: var(--dot-surface); border: 1px solid var(--dot-border); border-radius: var(--dot-radius); padding: 24px; box-shadow: var(--dot-shadow); }
.dot-card h3 { margin-bottom: .35em; }
.dot-card p:last-child { margin-bottom: 0; }
.dot-card-link { text-decoration: none; color: inherit; display: block; transition: transform .15s ease, box-shadow .15s ease; }
.dot-card-link:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(var(--dot-overlay-rgb),.08), 0 14px 32px rgba(var(--dot-overlay-rgb),.1); }
.dot-card-media { margin: -24px -24px 18px; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--dot-radius) var(--dot-radius) 0 0; background: var(--dot-surface-2); }
.dot-card-media img { width: 100%; height: 100%; object-fit: cover; }
.dot-meta { color: var(--dot-muted); font-size: .88rem; }
.dot-chip { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--dot-surface-2); color: var(--dot-gold-ink); border: 1px solid var(--dot-border); }
.dot-muted { color: var(--dot-muted); }
.dot-icon-badge { width: 44px; height: 44px; border-radius: 12px; background: var(--dot-surface-2); color: var(--dot-navy); display: grid; place-items: center; margin-bottom: 14px; }
:root[data-theme="dark"] .dot-icon-badge { color: var(--dot-gold-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dot-icon-badge { color: var(--dot-gold-ink); } }

/* Quick links strip */
.dot-quick { margin-top: -44px; position: relative; z-index: 2; }
.dot-quick .dot-card { padding: 18px 20px; display: flex; gap: 14px; align-items: center; }
.dot-quick .dot-icon-badge { margin: 0; flex: none; }
.dot-quick strong { display: block; font-size: 1rem; color: var(--dot-text); }
.dot-quick span { color: var(--dot-muted); font-size: .88rem; }

/* Stats */
.dot-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dot-stat { text-align: center; padding: 22px 12px; }
.dot-stat b { display: block; font: 600 2.4rem var(--dot-serif); color: var(--dot-navy); }
:root[data-theme="dark"] .dot-stat b { color: var(--dot-gold-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dot-stat b { color: var(--dot-gold-ink); } }
.dot-stat span { color: var(--dot-muted); font-size: .9rem; }

/* Shepherd */
.dot-shepherd { display: grid; grid-template-columns: minmax(0, 320px) 1fr; gap: 40px; align-items: center; }
.dot-shepherd-photo { border-radius: var(--dot-radius); overflow: hidden; aspect-ratio: 4/5; background: var(--dot-surface); border: 1px solid var(--dot-border); display: grid; place-items: center; color: var(--dot-muted); }
.dot-shepherd-photo img { width: 100%; height: 100%; object-fit: cover; }
.dot-shepherd blockquote { margin: 0 0 18px; font: italic 500 1.55rem/1.4 var(--dot-serif); }
@media (max-width: 760px) { .dot-shepherd { grid-template-columns: 1fr; } .dot-shepherd-photo { max-width: 280px; } }

/* Schedule list */
.dot-sched { list-style: none; padding: 0; margin: 0; }
.dot-sched li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--dot-border); }
.dot-sched li:last-child { border-bottom: 0; }
.dot-sched b { font-weight: 600; }
.dot-sched span { color: var(--dot-muted); text-align: right; }

/* Event rows */
.dot-event { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--dot-border); }
.dot-event:last-child { border-bottom: 0; }
.dot-date { flex: none; width: 60px; text-align: center; border-radius: 12px; background: var(--dot-navy); color: #fff; padding: 8px 0; line-height: 1.05; }
.dot-date b { display: block; font: 600 1.5rem var(--dot-serif); }
.dot-date span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dot-gold); }
.dot-event h3 { font-size: 1.15rem; margin: 0 0 4px; }

/* Content (block editor output) */
.dot-content { max-width: 760px; }
.dot-content-wide { max-width: none; }
.dot-content > * + h2 { margin-top: 1.6em; }
.dot-content > * + h3 { margin-top: 1.3em; }
.dot-content blockquote, .dot-content .wp-block-quote { border-left: 4px solid var(--dot-gold); margin: 1.5em 0; padding: .4em 0 .4em 1.2em; font: italic 1.25rem/1.5 var(--dot-serif); }
.dot-content .wp-block-image img { border-radius: 12px; }
.dot-content table { width: 100%; border-collapse: collapse; }
.dot-content th, .dot-content td { padding: 10px; border-bottom: 1px solid var(--dot-border); text-align: left; }
.dot-content .wp-block-button__link { background: var(--dot-gold); color: #1a1405; border-radius: 999px; padding: 12px 22px; text-decoration: none; font-weight: 600; }
.dot-content .wp-block-columns { gap: 24px; }
.dot-content .wp-block-group.is-style-dot-card, .dot-content .dot-box { background: var(--dot-surface); border: 1px solid var(--dot-border); border-radius: var(--dot-radius); padding: 22px; margin: 1.2em 0; }
.dot-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 44px; align-items: start; }
.dot-aside { position: sticky; top: 100px; display: grid; gap: 18px; }
@media (max-width: 960px) { .dot-layout { grid-template-columns: 1fr; } .dot-aside { position: static; } }

/* FAQ accordion */
.dot-faq details { background: var(--dot-surface); border: 1px solid var(--dot-border); border-radius: 12px; margin-bottom: 10px; }
.dot-faq summary { cursor: pointer; padding: 16px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.dot-faq summary::-webkit-details-marker { display: none; }
.dot-faq summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--dot-gold-ink); }
.dot-faq details[open] summary::after { content: "–"; }
.dot-faq .dot-faq-body { padding: 0 20px 16px; }

/* Finder */
.dot-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.dot-filter input, .dot-filter select { padding: 11px 14px; border: 1px solid var(--dot-border); border-radius: 10px; background: var(--dot-surface); color: var(--dot-text); font: inherit; }
.dot-filter input { flex: 1; min-width: 220px; }
.dot-empty { text-align: center; padding: 40px 20px; color: var(--dot-muted); border: 1px dashed var(--dot-border); border-radius: var(--dot-radius); }

/* Mass finder: the collapsed "Schedules not yet posted" group and the
   per-parish freshness line. The +/- marker matches the FAQ accordion above.
   Lived inline in templates/massfinder.php until 2026-09-28 (DOK-32). */
.dot-pending { background: var(--dot-surface); border: 1px solid var(--dot-border); border-radius: 12px; margin-top: 28px; }
.dot-pending > summary { cursor: pointer; padding: 16px 20px; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dot-pending > summary::-webkit-details-marker { display: none; }
.dot-pending > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--dot-gold-ink); }
.dot-pending[open] > summary::after { content: "\2013"; }
.dot-pending-body { padding: 0 20px 20px; }
.dot-updated { margin: 12px 0 0; font-size: .85em; }

/* Parish */
.dot-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dot-facts li { display: flex; gap: 10px; align-items: flex-start; }
.dot-facts .dot-icon { flex: none; margin-top: 3px; color: var(--dot-gold-ink); }
.dot-vicariate { margin-bottom: 40px; }
.dot-vicariate > h2 { font-size: 1.6rem; border-bottom: 2px solid var(--dot-gold); padding-bottom: 8px; display: inline-block; }

/* Watch */
.dot-video { aspect-ratio: 16/9; border-radius: var(--dot-radius); overflow: hidden; background: #000; }
.dot-video iframe { width: 100%; height: 100%; border: 0; }
.dot-map { width: 100%; aspect-ratio: 16/10; border: 0; border-radius: var(--dot-radius); }

/* Posts */
.dot-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.dot-pagination .page-numbers { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--dot-border); text-decoration: none; color: var(--dot-text); }
.dot-pagination .current { background: var(--dot-navy); color: #fff; border-color: var(--dot-navy); }

/* ---------- Footer ---------- */
.dot-footer { background: var(--dot-navy-deep); color: #c3d0dc; font-size: .93rem; margin-top: 0; }
.dot-footer .dot-wrap { padding: 56px 0 28px; }
.dot-footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.dot-footer h4 { color: #fff; font: 600 1.1rem var(--dot-sans); margin-bottom: 14px; }
.dot-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dot-footer a { color: #e3ecf4; text-decoration: none; }
.dot-footer a:hover { text-decoration: underline; }
.dot-footer-brand strong { font: 600 1.4rem var(--dot-serif); color: #fff; display: block; margin-bottom: 8px; }
.dot-social { display: flex; gap: 10px; margin-top: 16px; }
.dot-social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; }
.dot-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 36px; padding-top: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; }
@media (max-width: 860px) { .dot-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .dot-footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .dot-brand-text span { display: none; }
  .dot-brand-text strong { font-size: 1.15rem; white-space: nowrap; }
  .dot-brand-mark, .dot-brand img { width: 40px; height: 40px; }
  .dot-header .dot-wrap { gap: 10px; }
}
.dot-content .wp-block-table { margin: 1.2em 0; overflow-x: auto; }
.dot-content .wp-block-table table, .dot-content .wp-block-table th, .dot-content .wp-block-table td { border: 0; }
.dot-content .wp-block-table thead { border-bottom: 2px solid var(--dot-gold); }
.dot-content .wp-block-table td, .dot-content .wp-block-table th { border-bottom: 1px solid var(--dot-border); vertical-align: top; padding: 10px 12px; }
.dot-content .wp-block-quote cite { display: block; font: normal .9rem var(--dot-sans); color: var(--dot-muted); margin-top: 6px; }

/* ---------- Photos ---------- */
.dot-photo-credit { position: absolute; right: 14px; bottom: 10px; z-index: 1; max-width: min(60%, 520px); text-align: right; font-size: .7rem; line-height: 1.3; color: rgba(255,255,255,.72); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.dot-shepherd-photo img.is-arms { object-fit: contain; padding: 28px; }
.dot-card-media img { transition: transform .5s ease; }
.dot-card-link:hover .dot-card-media img { transform: scale(1.04); }
.dot-content .wp-block-gallery { gap: 10px; margin: 1.2em 0; }
.dot-content .wp-block-gallery .wp-block-image img { border-radius: 10px; }
.dot-content figcaption, .dot-content .wp-element-caption { font-size: .85rem; color: var(--dot-muted); margin-top: 8px; text-align: left; }
.dot-content figcaption small { display: block; font-size: .78rem; opacity: .85; }
.dot-content .wp-block-image.size-medium { max-width: 300px; }

/* ---------- Motion (added only when JS runs; off for reduced-motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .dot-hero::before { animation: dot-kenburns 26s ease-out both; transform-origin: 60% 40%; }
  @keyframes dot-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
  .dot-hero-inner > * { animation: dot-rise .8s cubic-bezier(.2,.7,.2,1) both; }
  .dot-hero-inner > *:nth-child(2) { animation-delay: .12s; }
  .dot-hero-inner > *:nth-child(3) { animation-delay: .24s; }
  .dot-hero-inner > *:nth-child(4) { animation-delay: .36s; }
  .dot-page-hero h1, .dot-page-hero p, .dot-crumbs { animation: dot-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .dot-page-hero p { animation-delay: .1s; }
  @keyframes dot-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  .dot-anim .dot-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--dot-i, 0) * 80ms); }
  .dot-anim .dot-reveal.is-in { opacity: 1; transform: none; }
  .dot-anim .dot-reveal.dot-reveal-left { transform: translateX(-26px); }
  .dot-anim .dot-reveal.dot-reveal-left.is-in { transform: none; }
}
.dot-hero > .dot-photo-credit { top: 12px; bottom: auto; }
.dot-page-hero::after { background: linear-gradient(100deg, rgba(var(--dot-overlay-rgb),.92) 20%, rgba(var(--dot-overlay-rgb),.55) 65%, rgba(var(--dot-overlay-rgb),.2)); }
@media (max-width: 520px) { .dot-photo-credit { font-size: .6rem; max-width: 75%; } }

/* ---------- Announcement bar ---------- */
.dot-notice { background: var(--dot-gold); color: #1a1405; font-size: .93rem; }
.dot-notice.is-urgent { background: #b42318; color: #fff; }
.dot-notice .dot-wrap { display: flex; align-items: center; gap: 12px; justify-content: center; min-height: 44px; padding: 8px 0; }
.dot-notice p { margin: 0; text-align: center; }
.dot-notice a { color: inherit; font-weight: 600; }
.dot-notice-close { background: none; border: 0; color: inherit; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.dot-notice-close:hover { background: rgba(0,0,0,.08); }

/* ---------- Today's readings ---------- */
.dot-readings { display: flex; gap: 16px; align-items: center; }
.dot-readings .dot-icon-badge { margin: 0; flex: none; }
.dot-readings strong { display: block; font: 600 1.25rem var(--dot-serif); margin: 2px 0; color: var(--dot-text); }
.dot-aside .dot-readings strong { font-size: 1.05rem; }
.dot-readings .dot-muted { font-size: .9rem; }

/* ---------- Editor palette classes (core + Kadence) ---------- */
.has-dot-navy-color { color: var(--dot-navy); } .has-dot-navy-background-color { background-color: var(--dot-navy); }
.has-dot-navy-deep-color { color: var(--dot-navy-deep); } .has-dot-navy-deep-background-color { background-color: var(--dot-navy-deep); }
.has-dot-sea-color { color: var(--dot-sea); } .has-dot-sea-background-color { background-color: var(--dot-sea); }
.has-dot-gold-color { color: var(--dot-gold); } .has-dot-gold-background-color { background-color: var(--dot-gold); }
.has-dot-gold-ink-color { color: var(--dot-gold-ink); } .has-dot-gold-ink-background-color { background-color: #7a5c12; }
.has-dot-sand-color { color: #f2efe8; } .has-dot-sand-background-color { background-color: var(--dot-surface-2); }
.has-dot-white-color { color: #fff; } .has-dot-white-background-color { background-color: var(--dot-surface); }
.has-dot-ink-color { color: var(--dot-text); } .has-dot-ink-background-color { background-color: #1c232b; }

/* Kadence rows inside the full-width template span the page; keep text readable. */
.dot-content-wide .kb-row-layout-wrap { margin-bottom: 0; }
.dot-content .kt-blocks-accordion-header { font-family: var(--dot-sans); }
.dot-content .kb-row-layout-wrap h2, .dot-content .kb-row-layout-wrap h3 { font-family: var(--dot-serif); }
/* Kadence accordion follows the site theme (its default header colour is light-only). */
.dot-content .kt-accordion-header-wrap .kt-blocks-accordion-header { background: var(--dot-surface-2); color: var(--dot-text); border-color: var(--dot-border); }
.dot-content .kt-accordion-panel-inner { background: var(--dot-surface); color: var(--dot-text); border-color: var(--dot-border); }
.dot-content .kt-blocks-accordion-header .kt-blocks-accordion-icon-trigger::before, .dot-content .kt-blocks-accordion-header .kt-blocks-accordion-icon-trigger::after { background: var(--dot-gold-ink); }

/* ---------- Fluent Forms (contact) ---------- */
.dot-content .fluentform .ff-el-input--label label { font-weight: 600; color: var(--dot-text); }
.dot-content .fluentform .ff-el-form-control { border: 1px solid var(--dot-border); border-radius: 10px; background: var(--dot-surface); color: var(--dot-text); padding: 11px 14px; font: inherit; }
.dot-content .fluentform .ff-el-form-control:focus { border-color: var(--dot-gold); box-shadow: 0 0 0 3px rgba(var(--dot-gold-rgb),.25); }
.dot-content .fluentform .ff-btn-submit { background: var(--dot-gold) !important; color: #1a1405 !important; border: 0; border-radius: 999px; padding: 12px 24px; font-weight: 600; }
.dot-content .dot-form-note { font-size: .88rem; color: var(--dot-muted); }

/* Site logo (tall coat of arms): fixed height, natural width, never cropped. */
.dot-brand img.dot-brand-logo { width: auto; height: 60px; max-width: 64px; object-fit: contain; }
@media (max-width: 520px) { .dot-brand img.dot-brand-logo { height: 46px; } }
.dot-footer-brand .dot-footer-logo { height: 72px; width: auto; margin-bottom: 12px; display: block; }

/* =========================================================
   Header & footer motion (v1.5)
   ========================================================= */
/* Top bar links: soft gold on hover */
.dot-util a { transition: color .2s ease; }
.dot-util a:hover { color: var(--dot-gold); text-decoration: none; }

/* Sticky header: glass + shrink + shadow after scrolling */
.dot-header { transition: box-shadow .3s ease, background-color .3s ease; }
.dot-header .dot-wrap { transition: min-height .3s ease; }
.dot-header.is-scrolled { box-shadow: 0 6px 24px rgba(var(--dot-overlay-rgb), .12); background: color-mix(in srgb, var(--dot-surface) 86%, transparent); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); }
.dot-header.is-scrolled .dot-wrap { min-height: 62px; }
.dot-brand img.dot-brand-logo, .dot-brand-mark { transition: height .3s ease, transform .3s ease; }
.dot-header.is-scrolled .dot-brand img.dot-brand-logo { height: 48px; }
.dot-brand:hover img.dot-brand-logo { transform: rotate(-4deg) scale(1.05); }

/* Main nav: gold underline grows from the centre; current page keeps it */
.dot-nav a { position: relative; transition: color .2s ease, background-color .2s ease; }
.dot-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--dot-gold); transform: scaleX(0); transform-origin: center; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.dot-nav a:hover, .dot-nav a[aria-current="page"] { background: transparent; color: var(--dot-navy); }
:root[data-theme="dark"] .dot-nav a:hover, :root[data-theme="dark"] .dot-nav a[aria-current="page"] { color: var(--dot-gold-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dot-nav a:hover, :root:not([data-theme="light"]) .dot-nav a[aria-current="page"] { color: var(--dot-gold-ink); } }
.dot-nav a:hover::after, .dot-nav a:focus-visible::after, .dot-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Header CTA */
.dot-header-cta { padding: 9px 16px; font-size: .9rem; box-shadow: 0 2px 10px rgba(var(--dot-gold-rgb), .35); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.dot-header-cta .dot-icon { width: 18px; height: 18px; }
.dot-header-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--dot-gold-rgb), .45); }

@media (max-width: 520px) { .dot-header-cta { display: none; } }

/* Icon buttons */
.dot-search-toggle, .dot-theme-toggle, .dot-menu-toggle { transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.dot-search-toggle:hover, .dot-theme-toggle:hover, .dot-menu-toggle:hover { border-color: var(--dot-gold); color: var(--dot-gold-ink); background: var(--dot-surface-2); }
.dot-search-toggle .dot-icon, .dot-theme-toggle .dot-icon { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.dot-search-toggle:hover .dot-icon { transform: scale(1.12); }
.dot-theme-toggle:hover .dot-icon { transform: rotate(-25deg); }

/* Mobile menu slides down */
@media (max-width: 960px) {
  .dot-nav.is-open { animation: dot-drop .25s ease both; }
  .dot-nav a::after { left: 12px; right: auto; width: 28px; bottom: 6px; transform-origin: left; }
  @keyframes dot-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
}

/* Footer: gold accent line, link arrow slide, social lift */
.dot-footer { position: relative; }
.dot-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--dot-gold) 20%, var(--dot-gold) 80%, transparent); opacity: .85; }
.dot-footer h4 { position: relative; padding-bottom: 10px; }
.dot-footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; border-radius: 2px; background: var(--dot-gold); }
.dot-footer ul a { display: inline-flex; align-items: center; gap: 0; transition: color .2s ease, gap .25s ease, transform .25s ease; }
.dot-footer ul a::before { content: "›"; color: var(--dot-gold); width: 0; overflow: hidden; opacity: 0; transition: width .25s ease, opacity .25s ease; }
.dot-footer ul a:hover { color: var(--dot-gold); text-decoration: none; gap: 6px; }
.dot-footer ul a:hover::before { width: .6em; opacity: 1; }
.dot-footer-brand a:hover, .dot-footer-bottom a:hover { color: var(--dot-gold); text-decoration: none; }
.dot-footer a { transition: color .2s ease; }
.dot-social a { transition: transform .25s ease, background-color .25s ease, border-color .25s ease, color .25s ease; }
.dot-social a:hover { transform: translateY(-3px); background: var(--dot-gold); border-color: var(--dot-gold); color: #1a1405; }
.dot-footer-logo { transition: transform .4s ease; }
.dot-footer-brand:hover .dot-footer-logo { transform: rotate(-4deg); }

/* Back to top */
.dot-to-top { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--dot-navy); color: #fff; box-shadow: 0 6px 20px rgba(var(--dot-overlay-rgb),.3); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s ease, transform .3s ease, background-color .2s ease; }
.dot-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.dot-to-top:hover { background: var(--dot-gold); color: #1a1405; }

@media (prefers-reduced-motion: reduce) {
  .dot-header, .dot-header .dot-wrap, .dot-nav a::after, .dot-footer ul a, .dot-footer ul a::before, .dot-social a, .dot-to-top, .dot-brand img.dot-brand-logo,
  .dot-search-toggle .dot-icon, .dot-theme-toggle .dot-icon, .dot-header-cta, .dot-footer-logo { transition: none !important; animation: none !important; }
  .dot-brand:hover img.dot-brand-logo, .dot-footer-brand:hover .dot-footer-logo, .dot-social a:hover, .dot-header-cta:hover { transform: none; }
}
/* Keep the header on one line: labels never wrap; the CTA drops its text before the menu is squeezed. */
.dot-nav a, .dot-brand-text span, .dot-brand-text strong, .dot-header-cta { white-space: nowrap; }
.dot-nav { gap: 0; }
.dot-nav a { padding: 8px 10px; }
.dot-nav a::after { left: 10px; right: 10px; }
.dot-header .dot-wrap { gap: 14px; }
@media (max-width: 1420px) { .dot-header-cta span { display: none; } .dot-header-cta { padding: 9px 11px; } }
@media (max-width: 1240px) and (min-width: 961px) { .dot-brand-text span { display: none; } }
.dot-to-top { border: 2px solid var(--dot-gold); }

/* ---------- Print ----------
   Parishioners print the Mass schedule and the pastoral letters. Without this
   block that came out as the navy hero, the sticky header, the nav and the
   whole footer. The page <h1> lives inside .dot-page-hero, so that one is
   flattened rather than hidden — otherwise the printout has no title. */
@media print {
  :root, :root[data-theme="dark"], :root[data-theme="light"] {
    --dot-bg: #fff; --dot-surface: #fff; --dot-surface-2: #fff;
    --dot-text: #000; --dot-muted: #333; --dot-border: #999; --dot-link: #000;
    --dot-navy: #000; --dot-navy-deep: #fff; --dot-gold: #666; --dot-gold-ink: #000;
    --dot-on-dark: #000; --dot-shadow: none; color-scheme: light;
  }
  @page { margin: 15mm; }
  * { animation: none !important; transition: none !important; box-shadow: none !important; }
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  /* Screen-only chrome, and the interactive bits that cannot work on paper. */
  .dot-skip, .dot-util, .dot-header, .dot-searchbar, .dot-footer, .dot-to-top,
  .dot-notice, .dot-hero, .dot-filter, .dot-empty-filter, .dot-photo-credit,
  .dot-crumbs, .dot-card-media, .dot-video, iframe { display: none !important; }
  /* Banner: keep the title, drop the photo, the overlay and the white-on-navy. */
  .dot-page-hero { background: none !important; color: #000 !important; }
  .dot-page-hero::before, .dot-page-hero::after { display: none !important; }
  .dot-page-hero .dot-wrap { padding: 0 0 12px !important; }
  .dot-page-hero h1, .dot-page-hero p { color: #000 !important; }
  /* Cards and sections: plain, and never split across a page. */
  .dot-wrap { max-width: none !important; padding: 0 !important; }
  .dot-section { padding: 0 !important; }
  .dot-card, .dot-vicariate, article, details, li, tr { break-inside: avoid; }
  h1, h2, h3, h4, summary { break-after: avoid; }
  .dot-card { border: 1px solid #999 !important; background: none !important; }
  .dot-grid-2, .dot-grid-3, .dot-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  img { max-width: 100% !important; height: auto !important; }
  /* FAQs and any other collapsed block print open. theme.js also forces this on
     beforeprint, because Chrome hides ::details-content, not the children. */
  details, details > * { display: block !important; }
  details > summary { list-style: none; font-weight: 600; }
  ::details-content { content-visibility: visible !important; display: block !important; }
  /* A printed link is useless without its address — but only for real URLs. */
  .dot-content a[href^="http"]::after, .dot-content a[href^="mailto:"]::after,
  .dot-content a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }
  a { color: #000 !important; text-decoration: underline; }
}