/* Shared by the front end AND the block editor: tokens, fonts, typography, content blocks */
:root{
  --so-white:#FFFFFF; --so-cream:#F2EEE9; --so-grey:#C4BFAF; --so-gold:#B07E1E;
  --so-brick:#802F1D; --so-charcoal:#1E1E1E; --so-blue:#2C3E50;
  --img-radius:8px; --f-head:'Junge',Georgia,serif; --f-body:'Karla',system-ui,sans-serif;
  /* Mobile sizes (Figma: h1 24, h3/h4 16, body 12/20 -> body bumped to 14 for legibility) */
  --fs-h1:24px; --fs-h2:20px; --fs-h3:16px; --fs-h4:16px; --fs-body:14px; --lh-body:1.6;
}
@media (min-width:640px){
  :root{--img-radius:10px; --fs-h1:48px; --fs-h2:32px; --fs-h3:24px; --fs-h4:24px; --fs-body:18px; --lh-body:35px}
}
body,.editor-styles-wrapper{font-family:var(--f-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--so-charcoal);background:var(--so-cream)}
h1,h2,h3,h4,h5,h6,.editor-styles-wrapper .editor-post-title__input{font-family:var(--f-head);font-weight:400;line-height:1.25;color:var(--so-charcoal);margin:0 0 .6em}
h1,.editor-styles-wrapper .editor-post-title__input{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} h4{font-size:var(--fs-h4)}
/* Only H1-H3 are centred; H4-H6 align left */
h1,h2,h3,.editor-styles-wrapper .editor-post-title__input{text-align:center}
h4,h5,h6{text-align:left}
p,ul,ol{margin:0 0 1.2em}
.entry-content p,.editor-styles-wrapper p{text-align:justify}
a{color:var(--so-brick)}
img{max-width:100%;height:auto}
strong{font-weight:700}

/* Buttons */
.wp-block-button__link,.button{display:inline-block;background:var(--so-gold);color:var(--so-white);font-family:var(--f-body);font-size:14px;line-height:1.4;padding:12px 22px;border-radius:8px;text-decoration:none;border:0}
.wp-block-buttons{gap:12px;justify-content:center}

/* Divider */
.wp-block-separator{border:0;border-top:1px solid var(--so-grey);width:100%;margin:2em 0;opacity:1}

/* "Card" style for Media & Text blocks (Links page, etc.) */
.wp-block-media-text.is-style-card{background:#fff;border-radius:var(--img-radius);overflow:hidden;margin:0 0 20px}
.wp-block-media-text.is-style-card .wp-block-media-text__content{padding:16px 20px}
.wp-block-media-text.is-style-card h3,.wp-block-media-text.is-style-card p{text-align:left;margin:0 0 .3em}
.wp-block-media-text.is-style-card p{font-size:12px;line-height:1.5}
.wp-block-media-text.is-style-card .wp-block-media-text__media img{object-fit:cover;height:100%}

/* Gallery block style "Image Tiles" (Sacraments page): image + caption in a white rounded tile */
.wp-block-gallery.is-style-tiles{gap:12px;justify-content:center;margin:0 0 32px}
.wp-block-gallery.is-style-tiles.has-nested-images figure.wp-block-image:not(#individual-image){
  flex:none;width:calc(50% - 6px);background:#fff;border-radius:var(--img-radius);overflow:hidden;display:block;margin:0}
.wp-block-gallery.is-style-tiles figure.wp-block-image img{width:100%;height:auto;aspect-ratio:1/1.05;object-fit:cover;display:block}
.wp-block-gallery.is-style-tiles figure.wp-block-image figcaption{
  position:static;background:#fff;color:var(--so-charcoal);font-family:var(--f-head);font-size:14px;line-height:1.2;
  text-align:center;padding:8px 6px;min-height:48px;max-height:none;overflow:visible;display:flex;align-items:center;justify-content:center}
.wp-block-gallery.is-style-tiles figure.wp-block-image a{display:block}
@media (min-width:640px){
  .wp-block-gallery.is-style-tiles{gap:16px}
  .wp-block-gallery.is-style-tiles.has-nested-images figure.wp-block-image:not(#individual-image){width:calc(25% - 12px)}
  .wp-block-gallery.is-style-tiles figure.wp-block-image figcaption{font-size:16px}
}

/* ---- Refinements: widths, centred headings, rounded images ---- */
/* Headings + images max 800px, text max 700px (front end and editor) */
.entry-content{max-width:800px}
.entry-content>.alignwide{max-width:800px}
.entry-content>*{max-width:800px;margin-left:auto;margin-right:auto}
:is(.entry-content,.editor-styles-wrapper) :is(p,ul,ol,blockquote,pre){max-width:700px;margin-left:auto;margin-right:auto}
:is(.entry-content,.editor-styles-wrapper) :is(h1,h2,h3,h4,h5,h6){max-width:800px;margin-left:auto;margin-right:auto}
:is(.entry-content,.editor-styles-wrapper) :is(h1,h2,h3){text-align:center}
:is(.entry-content,.editor-styles-wrapper) :is(h4,h5,h6){text-align:left}
:is(.entry-content,.editor-styles-wrapper) :is(figure,.wp-block-image,.wp-block-gallery,.wp-block-media-text){max-width:800px;margin-left:auto;margin-right:auto}

/* All content images: 10px radius desktop / 8px mobile (via --img-radius) */
:is(.entry-content,.editor-styles-wrapper) img{border-radius:var(--img-radius)}
/* Images inside a rounded card/tile are clipped by the card instead */
.wp-block-gallery.is-style-tiles img,.wp-block-media-text.is-style-card img{border-radius:0}

/* Separator = ornament + line + ornament (same in editor). Ornament URLs come from functions.php */
:root{--orn-h:20px; --orn-w:calc(var(--orn-h) * 138 / 59); --orn-gap:10px} /* ornament size is fixed per breakpoint; only the line stretches */
@media (min-width:640px){:root{--orn-h:40px; --orn-gap:16px}}
hr.wp-block-separator,hr.wp-block-separator.has-alpha-channel-opacity{
  border:0;opacity:1;width:100%;max-width:800px;height:var(--orn-h);margin:40px auto;background-color:transparent;color:var(--so-grey);
  background-image:var(--orn-l,url(../img/ornament.svg)),var(--orn-r,url(../img/ornament-right.svg)),linear-gradient(var(--so-grey),var(--so-grey));
  background-repeat:no-repeat;
  background-position:left center,right center,center;
  background-size:var(--orn-w) var(--orn-h),var(--orn-w) var(--orn-h),max(0px,calc(100% - 2*(var(--orn-w) + var(--orn-gap)))) 1px}

/* Image Tiles captions: WordPress core styles gallery captions white-on-gradient, positioned over the image.
   Force dark text on the white tile so captions never disappear (front end + editor). */
.wp-block-gallery.is-style-tiles.has-nested-images figure.wp-block-image:not(#individual-image) figcaption,
.wp-block-gallery.is-style-tiles.has-nested-images figure.wp-block-image:not(#individual-image) .block-editor-rich-text__editable{
  position:static!important;color:var(--so-charcoal)!important;text-shadow:none!important;background:#fff!important;
  opacity:1!important;visibility:visible!important;max-height:none!important;overflow:visible!important;
  width:100%;box-sizing:border-box;font-family:var(--f-head);text-align:center}
.wp-block-gallery.is-style-tiles.has-nested-images figure.wp-block-image:not(#individual-image)::before{display:none!important}


/* Desktop: separator spans the viewport with 100px padding on the left and right (line stretches, ornaments keep size).
   Uses the container width of .page-body (editor: the editor canvas) so scrollbars are accounted for. */
.editor-styles-wrapper{container-type:inline-size}
@media (min-width:640px){
  hr.wp-block-separator,hr.wp-block-separator.has-alpha-channel-opacity{
    max-width:none!important;
    width:calc(100cqw - 200px);
    margin-left:calc(50% - 50cqw + 100px)!important;
    margin-right:calc(50% - 50cqw + 100px)!important}
}

/* Image Tiles: linked images (wrapped in <a>) collapsed under core's flex rules. Plain block layout instead. */
.wp-block-gallery.is-style-tiles.has-nested-images figure.wp-block-image:not(#individual-image){display:block!important}
.wp-block-gallery.is-style-tiles.has-nested-images figure.wp-block-image:not(#individual-image)>a{display:block!important;flex:none!important;height:auto!important;width:100%!important;margin:0!important}
.wp-block-gallery.is-style-tiles.has-nested-images figure.wp-block-image:not(#individual-image) img{display:block!important;flex:none!important;width:100%!important;height:auto!important;aspect-ratio:1/1.05;object-fit:cover}

/* Links page cards: min height of event cards (desktop), grows with text; image fills the full height of the card */
.wp-block-media-text.is-style-card{align-items:stretch!important}
.wp-block-media-text.is-style-card .wp-block-media-text__media{height:100%;margin:0}
.wp-block-media-text.is-style-card .wp-block-media-text__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.wp-block-media-text.is-style-card .wp-block-media-text__content{display:flex;flex-direction:column;justify-content:center;padding:16px 20px}
@media (min-width:640px){
  .wp-block-media-text.is-style-card{min-height:200px;grid-template-columns:30% 1fr!important}
  .wp-block-media-text.is-style-card .wp-block-media-text__media img{aspect-ratio:auto}
}

/* WPForms "Section Divider": ornament separator drawn ABOVE the title; WPForms' own line is hidden; title = Heading 2 */
.wpforms-container .wpforms-field-divider hr{display:none!important}
.wpforms-container .wpforms-field-divider::before{
  content:"";display:block;width:100%;max-width:800px;height:var(--orn-h);margin:24px auto;
  background-image:var(--orn-l,url(../img/ornament.svg)),var(--orn-r,url(../img/ornament-right.svg)),linear-gradient(var(--so-grey),var(--so-grey));
  background-repeat:no-repeat;background-position:left center,right center,center;
  background-size:var(--orn-w) var(--orn-h),var(--orn-w) var(--orn-h),max(0px,calc(100% - 2*(var(--orn-w) + var(--orn-gap)))) 1px}
@media (min-width:640px){
  .wpforms-container .wpforms-field-divider::before{max-width:none;width:calc(100cqw - 200px);margin-left:calc(50% - 50cqw + 100px);margin-right:calc(50% - 50cqw + 100px)}
}
div.wpforms-container-full .wpforms-form .wpforms-field-divider :is(h3,.wpforms-field-label),
.wpforms-container .wpforms-field-divider :is(h3,.wpforms-field-label){
  font-family:var(--f-head)!important;font-size:var(--fs-h2)!important;font-weight:400!important;line-height:1.25!important;color:var(--so-charcoal)!important;text-align:center!important;margin:0 0 .4em!important}
.wpforms-container .wpforms-field-divider .wpforms-field-description{text-align:center}

/* Single column: everything is centred (images, buttons, galleries, embeds, forms, tables, groups) */
:is(.entry-content,.editor-styles-wrapper) :is(.alignleft,.alignright){float:none;margin-left:auto;margin-right:auto}
:is(.entry-content,.editor-styles-wrapper) figure.wp-block-image{text-align:center}
:is(.entry-content,.editor-styles-wrapper) figure.wp-block-image img{margin-left:auto;margin-right:auto;display:block}
:is(.entry-content,.editor-styles-wrapper) :is(.wp-block-buttons,.wp-block-gallery){justify-content:center}
:is(.entry-content,.editor-styles-wrapper) :is(.wp-block-embed,.wp-block-video,.wp-block-audio,.wp-block-file,.wp-block-table,.wp-block-group,.wp-block-columns,.wp-block-cover,.wp-block-column>*,.wpforms-container){margin-left:auto;margin-right:auto}
:is(.entry-content,.editor-styles-wrapper) .wp-block-embed__wrapper{display:flex;justify-content:center}
:is(.entry-content,.editor-styles-wrapper) .wp-block-file{text-align:center}
.entry-content .wpforms-container{max-width:700px}

/* Link cards: max 250px wide on mobile */
@media (max-width:639px){
  :is(.entry-content,.editor-styles-wrapper) .wp-block-media-text.is-style-card{max-width:250px;margin-left:auto;margin-right:auto}
}

/* Image tiles: same size on mobile as on desktop (4 x 188px + 3 x 16px gaps = 800px) */
.wp-block-gallery.is-style-tiles{gap:16px!important}
.wp-block-gallery.is-style-tiles.has-nested-images figure.wp-block-image:not(#individual-image){width:188px!important;flex:none!important}
.wp-block-gallery.is-style-tiles figure.wp-block-image figcaption{font-size:16px!important}

/* 30px gap between the items in page content (front end + editor) */
:is(.entry-content,.editor-styles-wrapper .is-root-container)>*{margin-top:0;margin-bottom:0}
:is(.entry-content,.editor-styles-wrapper .is-root-container)>*+*{margin-top:30px}

/* Desktop: body links = normal text colour, no underline, gold on hover (buttons excluded) */
@media (min-width:640px){
  :is(.entry-content,.editor-styles-wrapper) a:not(.wp-block-button__link):not(.button){color:inherit;text-decoration:none;transition:color .2s ease}
  :is(.entry-content,.editor-styles-wrapper) a:not(.wp-block-button__link):not(.button):hover{color:var(--so-gold)}
}

/* ---- Bottom-of-page navigation: centred links wrapping over several lines, separated by "/" ----
   Works with the Navigation block, the Page List block, or a List block with the style "Page Links". */
:is(.entry-content,.editor-styles-wrapper) .wp-block-navigation{justify-content:center}
:is(.entry-content,.editor-styles-wrapper) .wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open){display:block!important;position:static;background:none;padding:0;width:100%}
:is(.entry-content,.editor-styles-wrapper) .wp-block-navigation .wp-block-navigation__responsive-container-open{display:none!important}
:is(.entry-content,.editor-styles-wrapper) .wp-block-navigation .wp-block-navigation__responsive-container-content{display:block;padding:0}
:is(.entry-content,.editor-styles-wrapper) :is(.wp-block-navigation__container,ul.wp-block-page-list,ul.is-style-page-links){
  display:flex!important;flex-direction:row!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:0;
  list-style:none;margin-left:auto;margin-right:auto;padding:0;max-width:700px;font-size:var(--fs-body);line-height:1.6}
:is(.entry-content,.editor-styles-wrapper) :is(.wp-block-navigation__container,ul.wp-block-page-list,ul.is-style-page-links)>li{display:flex;margin:0;padding:0;list-style:none}
:is(.entry-content,.editor-styles-wrapper) :is(.wp-block-navigation__container,ul.wp-block-page-list,ul.is-style-page-links)>li:not(:last-child)::after{content:"/";margin:0 11px;color:var(--so-charcoal)}
:is(.entry-content,.editor-styles-wrapper) :is(.wp-block-navigation,ul.wp-block-page-list,ul.is-style-page-links) a{color:var(--so-charcoal);text-decoration:none;padding:0}

/* ===== Details block: no triangle, gold "[… Read more]" at the end of the text ===== */
.wp-block-details>summary{list-style:none;display:block;cursor:pointer;text-align:justify}
.wp-block-details>summary::-webkit-details-marker{display:none}
.wp-block-details>summary::marker{content:""}
.wp-block-details>summary::after{content:"\00a0[… Read more]";color:var(--so-gold);white-space:nowrap}
.wp-block-details[open]>summary::after{content:"\00a0[… Read less]"}