/* SJ Parish design pack: main stylesheet
   Layout and visual styles are inline in the HTML (see CLAUDE.md, "Design notes").
   This file holds tokens, base rules, fonts, forms, and generated state/responsive rules. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/figtree-latin.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/newsreader-latin.woff2) format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/newsreader-italic-latin.woff2) format('woff2');}
:root{
  --navy:#1C3A66; --navy-deep:#13284A; --navy-ink:#0E1F3A;
  --gold:#C9A55C; --gold-light:#E2C98F; --gold-ink:#8A6A2C; --bronze:#B8924A;
  --cream:#F6F3EC; --line:#E6E2D9; --ink:#1F2430; --body:#363C48; --muted:#555C69; --field:#BCC8D6;
  --error:#B3261E; --error-bg:#FBEDEC; --done-bg:#EEF2F6;
  --font-serif:'Newsreader',Georgia,serif; --font-sans:'Figtree',system-ui,sans-serif;
  --radius:4px; --radius-lg:6px;
}
html,body{margin:0;padding:0;background:#FFFFFF;}
body{font-family:var(--font-sans);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
*,*::before,*::after{box-sizing:border-box;}
img{display:block;max-width:100%;}
a{color:var(--navy);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--navy-deep);}
button{font:inherit;}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;}
[hidden]{display:none!important;}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#FFFFFF;padding:10px 16px;border-radius:var(--radius);font-weight:700;text-decoration:none;}
.skip-link:focus{top:12px;color:#FFFFFF;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;}}

/* ===== Forms (kit markup: .enquiry / .form / .form-row / .form-alert / .form-error / .form-done) ===== */
.enquiry{max-width:100%;margin-top:28px;}
.form{display:grid;gap:20px;}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;}
.form label{display:block;font-size:14.5px;font-weight:600;color:var(--ink);min-width:0;}
.form .optional{font-weight:400;color:#6A7180;}
.form input,.form select,.form textarea{font:inherit;font-size:16.5px;font-weight:400;color:var(--ink);padding:12px 14px;border:1px solid var(--field);border-radius:var(--radius);background:#FFFFFF;min-height:50px;width:100%;display:block;margin-top:7px;}
.form textarea{resize:vertical;min-height:160px;line-height:1.55;}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(28,58,102,0.15);}
.form [aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 1px var(--error);}
.form-error{display:block;margin-top:6px;font-size:13.5px;font-weight:500;color:var(--error);}
.form-alert{margin:0;background:var(--error-bg);border-top:2px solid var(--error);border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:14px 18px;font-size:15px;font-weight:600;color:#7A1A14;}
.form-privacy{margin:0;font-size:14px;line-height:1.6;color:var(--muted);}
.form-privacy a{color:var(--navy);font-weight:600;}
.button{background:var(--navy);color:#FFFFFF;border:0;border-radius:var(--radius);font-weight:600;font-size:15.5px;padding:0 28px;min-height:50px;cursor:pointer;justify-self:start;}
.button:hover{background:var(--navy-deep);}
.button[aria-busy="true"]{opacity:0.7;cursor:progress;}
.form-done{background:var(--done-bg);border-top:2px solid var(--navy);border-radius:0 0 var(--radius-lg) var(--radius-lg);padding:24px 28px;}
.form-done p{margin:0;font-size:16px;line-height:1.6;color:var(--body);}
.form-done .form-done-title{font-family:var(--font-serif);font-size:24px;color:var(--navy);margin-bottom:6px;}

/* ===== Generated from the prototype: hover/focus states ===== */
.s1:hover{background:rgba(255,255,255,0.08)!important}
.s2:hover{background:rgba(255,255,255,0.08)!important;color:#FFFFFF!important}
.s3:hover{background:#D9B872!important;color:#13284A!important}
.s7:hover{color:#1C3A66!important}
.s8:hover{color:#8A6A2C!important}
.s9:hover{background:#F3F5F8!important;color:#1C3A66!important}
.sb:hover{background:#F6F8FA!important;color:#1F2430!important}
.sc:hover{background:#13284A!important;color:#FFFFFF!important}
.sd:hover{color:#13284A!important;text-decoration:underline!important}
.se:hover{color:#13284A!important}
.sf:hover{color:#E2C98F!important}
.sg:hover{color:#E2C98F!important;text-decoration:underline!important}
.sh:hover{color:#FFFFFF!important}
.si:hover{color:#FFFFFF!important;text-decoration:underline!important}
.sj:hover{background:#F1F3F6!important;color:#1C3A66!important}
.sl:hover{background:#F6F3EC!important}
.sm:hover{border-color:#FFFFFF!important}
.so:hover{background:#13284A!important}
.ss:hover{color:#1C3A66!important;text-decoration:underline!important}
.s17:hover{border-color:#1C3A66!important}
.s18:focus{border-color:#1C3A66!important;outline:none!important;box-shadow:0 0 0 3px rgba(28,58,102,0.15)!important}
.s1g:hover{color:#1C3A66!important;background:#FBFAF7!important}
.s1h:hover{border-color:#1C3A66!important;background:#F6F3EC!important}
.s1p:hover{border-color:#1C3A66!important;background:#FBFAF7!important}
.s1x:hover{background:#FBFAF7!important}

/* ===== Responsive overrides (bands match the prototype breakpoints) ===== */
@media (min-width:1080px){
.bh-0{display:none!important}
.bh-0123{display:none!important}
}
@media (min-width:1000px) and (max-width:1079.98px){
.bh-12345{display:none!important}
.bh-0123{display:none!important}
}
@media (min-width:960px) and (max-width:999.98px){
.bh-12345{display:none!important}
.ra{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.bh-0123{display:none!important}
}
@media (min-width:720px) and (max-width:959.98px){
.bh-12345{display:none!important}
.ra{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.bh-0123{display:none!important}
.rz{grid-template-columns:minmax(0,1fr)!important}
.r10{position:static!important}
.bh-345{display:none!important}
.r16{grid-template-columns:minmax(0,1fr)!important}
.r19{position:static!important}
.r1f{grid-template-columns:minmax(0,1fr)!important}
.r1i{position:static!important}
.r1o{grid-template-columns:minmax(0,1fr)!important}
.r1q{position:static!important}
.r1w{grid-template-columns:minmax(0,1fr)!important}
.r1y{position:static!important}
.r24{grid-template-columns:minmax(0,1fr)!important}
.r25{position:static!important}
.r2b{grid-template-columns:minmax(0,1fr)!important}
.r2c{position:static!important}
.r2i{grid-template-columns:minmax(0,1fr)!important}
.r2j{position:static!important}
.r2p{grid-template-columns:minmax(0,1fr)!important}
.r2q{position:static!important}
.r2w{grid-template-columns:minmax(0,1fr)!important}
.r2x{position:static!important}
.r33{grid-template-columns:minmax(0,1fr)!important}
.r34{position:static!important}
.r3a{grid-template-columns:minmax(0,1fr)!important}
.r3b{position:static!important}
.r3h{grid-template-columns:minmax(0,1fr)!important}
.r3i{position:static!important}
.r3o{grid-template-columns:minmax(0,1fr)!important}
.r3p{position:static!important}
}
@media (min-width:560px) and (max-width:719.98px){
.bh-12345{display:none!important}
.ra{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.rk{bottom:64px!important}
.rt{column-count:1!important}
.ru{bottom:64px!important}
.rz{grid-template-columns:minmax(0,1fr)!important}
.r10{position:static!important}
.bh-345{display:none!important}
.r11{bottom:64px!important}
.r16{grid-template-columns:minmax(0,1fr)!important}
.r19{position:static!important}
.r1a{bottom:64px!important}
.r1f{grid-template-columns:minmax(0,1fr)!important}
.r1i{position:static!important}
.r1j{bottom:64px!important}
.r1o{grid-template-columns:minmax(0,1fr)!important}
.r1q{position:static!important}
.r1r{bottom:64px!important}
.r1w{grid-template-columns:minmax(0,1fr)!important}
.r1y{position:static!important}
.r1z{bottom:64px!important}
.r24{grid-template-columns:minmax(0,1fr)!important}
.r25{position:static!important}
.r26{bottom:64px!important}
.r2b{grid-template-columns:minmax(0,1fr)!important}
.r2c{position:static!important}
.r2d{bottom:64px!important}
.r2i{grid-template-columns:minmax(0,1fr)!important}
.r2j{position:static!important}
.r2k{bottom:64px!important}
.r2p{grid-template-columns:minmax(0,1fr)!important}
.r2q{position:static!important}
.r2r{bottom:64px!important}
.r2w{grid-template-columns:minmax(0,1fr)!important}
.r2x{position:static!important}
.r2y{bottom:64px!important}
.r33{grid-template-columns:minmax(0,1fr)!important}
.r34{position:static!important}
.r35{bottom:64px!important}
.r3a{grid-template-columns:minmax(0,1fr)!important}
.r3b{position:static!important}
.r3c{bottom:64px!important}
.r3h{grid-template-columns:minmax(0,1fr)!important}
.r3i{position:static!important}
.r3j{bottom:64px!important}
.r3o{grid-template-columns:minmax(0,1fr)!important}
.r3p{position:static!important}
.r3q{bottom:64px!important}
}
@media (max-width:559.98px){
.bh-12345{display:none!important}
.ra{grid-template-columns:minmax(0,1fr)!important}
.rk{bottom:64px!important}
.rt{column-count:1!important}
.ru{bottom:64px!important}
.rz{grid-template-columns:minmax(0,1fr)!important}
.r10{position:static!important}
.bh-345{display:none!important}
.r11{bottom:64px!important}
.r16{grid-template-columns:minmax(0,1fr)!important}
.r19{position:static!important}
.r1a{bottom:64px!important}
.r1f{grid-template-columns:minmax(0,1fr)!important}
.r1i{position:static!important}
.r1j{bottom:64px!important}
.r1o{grid-template-columns:minmax(0,1fr)!important}
.r1q{position:static!important}
.r1r{bottom:64px!important}
.r1w{grid-template-columns:minmax(0,1fr)!important}
.r1y{position:static!important}
.r1z{bottom:64px!important}
.r24{grid-template-columns:minmax(0,1fr)!important}
.r25{position:static!important}
.r26{bottom:64px!important}
.r2b{grid-template-columns:minmax(0,1fr)!important}
.r2c{position:static!important}
.r2d{bottom:64px!important}
.r2i{grid-template-columns:minmax(0,1fr)!important}
.r2j{position:static!important}
.r2k{bottom:64px!important}
.r2p{grid-template-columns:minmax(0,1fr)!important}
.r2q{position:static!important}
.r2r{bottom:64px!important}
.r2w{grid-template-columns:minmax(0,1fr)!important}
.r2x{position:static!important}
.r2y{bottom:64px!important}
.r33{grid-template-columns:minmax(0,1fr)!important}
.r34{position:static!important}
.r35{bottom:64px!important}
.r3a{grid-template-columns:minmax(0,1fr)!important}
.r3b{position:static!important}
.r3c{bottom:64px!important}
.r3h{grid-template-columns:minmax(0,1fr)!important}
.r3i{position:static!important}
.r3j{bottom:64px!important}
.r3o{grid-template-columns:minmax(0,1fr)!important}
.r3p{position:static!important}
.r3q{bottom:64px!important}
}

/* ===== Condensed header (body.is-condensed, toggled by js/site.js on scroll) ===== */
body.is-condensed .r4{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r5{min-height:68px!important}
body.is-condensed .r6{width:38px!important}
body.is-condensed .rp{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .rq{min-height:68px!important}
body.is-condensed .rr{width:38px!important}
body.is-condensed .rw{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .rx{min-height:68px!important}
body.is-condensed .ry{width:38px!important}
body.is-condensed .r13{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r14{min-height:68px!important}
body.is-condensed .r15{width:38px!important}
body.is-condensed .r1c{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r1d{min-height:68px!important}
body.is-condensed .r1e{width:38px!important}
body.is-condensed .r1l{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r1m{min-height:68px!important}
body.is-condensed .r1n{width:38px!important}
body.is-condensed .r1t{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r1u{min-height:68px!important}
body.is-condensed .r1v{width:38px!important}
body.is-condensed .r21{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r22{min-height:68px!important}
body.is-condensed .r23{width:38px!important}
body.is-condensed .r28{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r29{min-height:68px!important}
body.is-condensed .r2a{width:38px!important}
body.is-condensed .r2f{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r2g{min-height:68px!important}
body.is-condensed .r2h{width:38px!important}
body.is-condensed .r2m{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r2n{min-height:68px!important}
body.is-condensed .r2o{width:38px!important}
body.is-condensed .r2t{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r2u{min-height:68px!important}
body.is-condensed .r2v{width:38px!important}
body.is-condensed .r30{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r31{min-height:68px!important}
body.is-condensed .r32{width:38px!important}
body.is-condensed .r37{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r38{min-height:68px!important}
body.is-condensed .r39{width:38px!important}
body.is-condensed .r3e{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r3f{min-height:68px!important}
body.is-condensed .r3g{width:38px!important}
body.is-condensed .r3l{box-shadow:0 10px 28px -16px rgba(19,40,74,0.35)!important}
body.is-condensed .r3m{min-height:68px!important}
body.is-condensed .r3n{width:38px!important}

/* ===== Build additions (not in the design) ===== */
/* Engine: form honeypot field and screen-reader-only text. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* Phones (below 720px, where the bottom action bar shows): phone and email move out of the
   top strap into the "Parish Office" popup opened from the action bar. */
@media (max-width:719.98px){.bh-45{display:none!important}}
/* Mobile menu: Sacraments opens a child list; its chevron points up while open. */
.mnav-parent[aria-expanded="true"] .mnav-chevron{transform:translateY(2px) rotate(225deg)!important;}
.mnav-parent:focus-visible{outline:2px solid #1C3A66;outline-offset:2px;}