/* =====================================================================
   AI OVERRIDE - agent-maintained post-build audit fixes
   Site: St. Cecilia Catholic Church, Haysville KS  (PARISH outlines)
   Created: 2026-09-21
   Registered as a CSS asset on the PARISH redesign outlines only:
   17 (#Outline), 18 (#Home), 19 (#Grid), 20 (#Sponsors).
   Deliberately NOT on the Base Outline and NOT on the school outlines -
   the school has its own file, ai-override-school.css.
   Row priority 0, so it loads after content/override-2026.css.
   Add new audit fixes at the bottom of this file.
   ===================================================================== */

/* ---------------------------------------------------------------------
   FIX 1 - Grid tile overlay and title disappeared on hover
   ---------------------------------------------------------------------
   Symptom: hovering a `.grid-articles` tile hid its burgundy title wash
   and its title text, so the bare photo showed through.
   Cause: the hover rule `... .g-array-item:hover .g-array-item-image img
   { transform: scale(1.06) }` in content/override-2026.css makes the image
   a stacking context, so it paints above the absolutely-positioned
   `.g-array-item-title` overlay. grid.2.0.css positions that overlay with
   `position:absolute!important` but declares no `z-index`.
   Fix: give the overlay a stacking level.
   Order kept: overlay 1 < title link ::after 2 < read-more overlay 3.
   --------------------------------------------------------------------- */
html body :is(.h-news-feed,.grid-articles) .g-content-array .g-array-item-title {
  z-index: 1;
}

/* ---------------------------------------------------------------------
   FIX 2 - DOCman pages showed an unstyled title (audit item S)
   ---------------------------------------------------------------------
   Symptom: /newsletter's title did not match other subpage titles. It
   rendered 32px, shrink-wrapped and not indented, against 51.2px
   burgundy for every article subpage.
   Cause: the article component emits the subpage title as
   `<div class="page-header"><h2>Title</h2>`, and the kit styles that
   element (base.2.0.css `.page-header > h2` -> var(--hero-title-*)).
   The DOCman list view emits no page header at all; its own category
   heading `<h3 class="koowa_header">` is the only title on the page, so
   it fell back to the generic `h3` rule (var(--h3-font-size) = 32px).
   Fix: give DOCman's category heading the subpage-title metrics. The
   tokens resolve the same on the parish and school outlines, so this
   block is identical in ai-override.css and ai-override-school.css.
   Scoped to the category heading - the direct child of .docman_category.
   DOCman reuses .koowa_header for document titles, which must not change.
   --------------------------------------------------------------------- */
html body .com_docman .docman_category > .koowa_header {
  font-family: var(--hero-title-font-family);
  font-size: var(--hero-title-font-size);
  font-weight: 400;
  color: var(--hero-title-color);
  padding: var(--h2-padding);
  text-transform: var(--h2-text-transform);
}

/* ---------------------------------------------------------------------
   FIX 3 - DOCman category heading carried an underline and sat tight
   ---------------------------------------------------------------------
   Follow-up to FIX 2, same element.
   Underline: the global `h3` rule (fonts2.css:120) sets
   `border-bottom: var(--title-border-bottom)` - a 1px cream rule that
   spanned only the heading's own shrink-wrapped box. Article subpage
   titles resolve that same property to `var(--none)`, so the line under
   the DOCman title was a mismatch, not a deliberate style.
   Margin: `.k-ui-namespace .koowa_header` (site.min.css) sets
   `margin: 0 0 10px`, which outranks the `h3` margin and pins
   margin-top at 0, so the title sat against the navigation bar.
   --------------------------------------------------------------------- */
html body .com_docman .docman_category > .koowa_header {
  border-bottom: none;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------
   FIX 4 - Grid tile image zoom reduced (item C follow-up)
   ---------------------------------------------------------------------
   `content/override-2026.css:457` scales the tile image to 1.06 on hover.
   The card itself does NOT scale - it only lifts `translateY(-3px)` at
   line 456 - so 1.06 was the whole of the zoom, not a second zoom on top
   of a card scale. Reduced to 1.03 here.
   The source rule is human-owned, so it is overridden, not edited.
   The `prefers-reduced-motion` block in that same file still wins: it
   sets `transform: none !important`, and this rule carries no
   !important.
   --------------------------------------------------------------------- */
html body :is(.h-news-feed,.grid-articles) .g-content-array .g-array-item:is(:hover,:focus-within) .g-array-item-image img {
  transform: scale(1.03);
}

/* ---------------------------------------------------------------------
   FIX 5 - Accordion "+" toggle coloured cream (audit item C)
   ---------------------------------------------------------------------
   Page: /engage-st/apostolates (article 2394, menu item 1354, outline 19,
   the only parish page known to use the accordion wrapper).
   The "+" is not markup. The shared kit draws it with a pseudo-element on
   the title bar, once per breakpoint:
     grid.2.0.css:5951  .accordian-wrapper .g-array-item-title:after
                        @media (min-width: 50.99rem)
     grid.2.0.css:6093  .accordian-wrapper-mobile .g-array-item-title:after
                        @media (max-width: 50.99rem)
   Both are Font Awesome "\f067" and both resolve `color` to
   var(--tertiary-color) - the Liturgical Gold #C9A227 - which reads dark
   against the burgundy bar. The brief asks for #F6E1C3.
   Both source rules are specificity 0,2,1. This rule is 0,2,3, so it wins
   with no !important, and one declaration covers both breakpoints because
   the wrapper carries both classes.
   NOTE: #F6E1C3 is one digit from the site token --secondary-color
   #F5E0C3. The brief's value is used as given.
   --------------------------------------------------------------------- */
html body :is(.accordian-wrapper,.accordian-wrapper-mobile) .g-array-item-title::after {
  color: #F6E1C3;
}

/* ---------------------------------------------------------------------
   FIX 6 - Side menu active item text was unreadable (audit item C&S)
   ---------------------------------------------------------------------
   Symptom: the current page's item in the side menu (the `.nav.menu`
   module, e.g. "Mission" on /our-school/mission and "Staff" on
   /about-us-st/staff) rendered white text on the light peach
   `--secondary-color` background, so it was hard to read.
   Cause: studius.2.0.css:186
   `.moduletable .nav.menu li.current.active a { color: var(--default-white);
   background: rgba(var(--secondary-color-rgb), 1) }` (specificity 0,5,2).
   --secondary-color on this site is #F5E0C3, a light peach, so white text
   has almost no contrast.
   Fix: the brief asks for #861746 (the site burgundy) on the active item.
   The background is left as-is; only the text colour changes.
   Scope: the same studius.2.0.css rule serves the parish and school
   outlines, so this block is mirrored in ai-override-school.css (FIX 4).
   --------------------------------------------------------------------- */
html body .moduletable .nav.menu li.current.active a {
  color: #861746;
}

/* ---------------------------------------------------------------------
   FIX 7 - H6 sub-page headings were unreadable (audit item C, this list:
   "H6 too light, make #D2B48C")
   ---------------------------------------------------------------------
   Symptom: every H6 on the parish sub-pages (e.g. "OFFICE HOURS" and
   "DIRECTIONS" on /about-us-st/contact-us, the accordion headings on
   /engage-st/stewardship-giving, /pray-with-us, /stay-in-touch and the
   faith-formation pages) rendered almost invisible.
   Cause: fonts2.css:123 `h6 { color: var(--secondary-color) }`. On this
   site --secondary-color is the warm cream #F5E0C3, so H6 text on the
   white .g-wrapper background has almost no contrast. Same root pattern
   as FIX 6 (the kit assumes --secondary-color is dark enough to carry
   light text on a light surface).
   Fix: the brief asks for #D2B48C on the H6s.
   Scope: every H6 checked across the site sits on a white background
   (g-wrapper) - none is on a burgundy panel - so a plain element override
   is safe. Mirrored in ai-override-school.css (FIX 6).
   --------------------------------------------------------------------- */
html body h6 {
  color: #D2B48C;
}

/* ---------------------------------------------------------------------
   FIX 8 - Stewardship & Giving cards: line spacing too loose (audit item 9, C)
   ---------------------------------------------------------------------
   The four quicklink cards in the `steward-quicklinks` blockcontent (the
   "Annual Stewardship Commitment" / "One-Time Withdrawal Authorization"
   set on /home-st and /engage-st/stewardship-giving) wrap their labels to
   three lines with wide gaps.
   The visible label is the inner span `.g-blockcontent-subcontent-title-text`
   (human-owned override-2026.css:336 styles it `600 17px/1.3`), but the line
   box height comes from the parent H4's strut: fonts2.css:121 gives h4
   `font-size: var(--h4-font-size)` (32px) and
   `line-height: var(--h4-line-height)` (41.6px). So 17px text was spaced
   41.6px apart.
   Fix: match the H4's own metrics to the label, so the strut is the
   intended 1.3 (22.1px). The H4's font-size is otherwise unused - the text
   comes from the span.
   Specificity 0,2,2 beats the plain h4 rule (0,0,1).
   --------------------------------------------------------------------- */
html body .steward-quicklinks .g-blockcontent-subcontent-title {
  font-size: 17px;
  line-height: 1.3;
}

/* ---------------------------------------------------------------------
   FIX 9 - Helpful Links: icon badges for Catholic Exchange / Diocese (item 10, C)
   ---------------------------------------------------------------------
   The two external-link boxes in the home "Helpful Links" section
   (article 2505) carried no icon beside their heading. A burgundy
   rounded-square badge with a white glyph was added in the markup before
   each heading: `solutio-icons s-online-giving` (the heart-with-cross
   glyph already used on the Stewardship cards) for Catholic Exchange, and
   `fas fa-church` for the Diocese of Wichita.
   This lays the badge out beside the title + subtitle.
   --------------------------------------------------------------------- */
html body.site-home .h-feed-inner-title {
  display: flex;
  align-items: center;
  gap: 14px;
}

html body.site-home .h-feed-inner-title .h-feed-badge {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #861746;
}

html body.site-home .h-feed-inner-title .h-feed-badge i {
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
}

html body.site-home .h-feed-inner-title .h-feed-title-text {
  min-width: 0;
}

html body.site-home .h-feed-inner-title .h-feed-title-text h4 {
  margin: 0;
}

html body.site-home .h-feed-inner-title .h-feed-title-text p {
  margin: 2px 0 0;
}

/* ---------------------------------------------------------------------
   FIX 10 - Helpful Links badges: gap below the title row (item 10 follow-up, C)
   ---------------------------------------------------------------------
   Adding the badges (FIX 9) removed the H4's own bottom margin, so the
   title row now sits flush against the feed/image below. Give the whole
   title row a little breathing room.
   --------------------------------------------------------------------- */
html body.site-home .h-feed-inner-title {
  margin-bottom: 12px;
}

/* ---------------------------------------------------------------------
   FIX 11 - Saint of the Day: compact feed cards (home Helpful Links)
   ---------------------------------------------------------------------
   mod_feed (module 1238, catholic.org sofd RSS) prints each item as a
   title link plus the full description paragraph, so every card was a
   ~200px wall of text that ended in a ragged "...". The mockup wants a
   title, a single-line subtitle and a chevron, with a left accent bar on
   the highlighted (first) card.
   Only the description is clamped to one line; the title keeps its full
   text (client chose CSS-only, no script). Scoped to .saint-wrapper so
   the Daily Readings box keeps its current look.
   Specificity 0,4,3 beats the source card rule (override-2026.css:320,
   0,3,3); the first-child rules use 0,5,3 vs 0,4,3.
   --------------------------------------------------------------------- */
html body.site-home .h-feed-box.saint-wrapper .newsfeed li {
  position: relative;
  padding-right: 40px;
}

html body.site-home .h-feed-box.saint-wrapper .newsfeed li .feed-link a {
  display: block;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  text-decoration: none;
}

html body.site-home .h-feed-box.saint-wrapper .newsfeed li .feed-item-description {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

html body.site-home .h-feed-box.saint-wrapper .newsfeed li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

html body.site-home .h-feed-box.saint-wrapper .newsfeed li:first-child {
  padding-left: 30px;
}

html body.site-home .h-feed-box.saint-wrapper .newsfeed li:first-child::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: #F6E1C3;
}

html body.site-home .h-feed-box.saint-wrapper .h-feed-link a::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: 1px;
}

/* ---------------------------------------------------------------------
   FIX 12 - Helpful Links "read more" links: burgundy, bolder, arrow
   ---------------------------------------------------------------------
   Match the mockup: "Read More at USCCB.org" / "Learn More at Catholic.org"
   sat at 12px/600 (override-2026.css:324). Make them 16px/700 burgundy
   with a Font Awesome arrow. `:not(.button)` excludes the two box buttons
   ("Explore Novenas & Prayers", "Visit Website").
   This also supersedes the chevron FIX 11 put on the Saint of the Day link
   (same ::after, higher specificity via #g-utility).
   --------------------------------------------------------------------- */
html body.site-home #g-utility .h-feed-link {
  font-size: 16px;
  font-weight: 700;
}

html body.site-home #g-utility .h-feed-link a:not(.button) {
  color: #861746;
  font-weight: 700;
}

html body.site-home #g-utility .h-feed-link a:not(.button)::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  display: inline-block;
  width: auto;
  height: auto;
  margin-left: 8px;
  border: 0;
  transform: none;
  vertical-align: -1px;
}

/* ---------------------------------------------------------------------
   FIX 13 - Daily Readings cards + hover on both feed boxes
   ---------------------------------------------------------------------
   Extend the FIX 11 card treatment to the Daily Readings box so it matches
   Saint of the Day, and add a hover state to both.
   The readings module (1237) supplies only a title, so the "AI Override JS"
   row builds the subtitle from the reading name and sets the title to the
   weekday (first item = "Today - <Weekday>").
   Same selectors as FIX 11 but covering :is(.readings-wrapper,.saint-wrapper);
   FIX 13 loads later so it wins the shared properties.
   --------------------------------------------------------------------- */
html body.site-home .h-feed-box:is(.readings-wrapper,.saint-wrapper) .newsfeed li {
  position: relative;
  padding-right: 40px;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

html body.site-home .h-feed-box:is(.readings-wrapper,.saint-wrapper) .newsfeed li .feed-link a {
  display: block;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.3;
  text-decoration: none;
}

html body.site-home .h-feed-box:is(.readings-wrapper,.saint-wrapper) .newsfeed li .feed-item-description {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.8;
}

html body.site-home .h-feed-box:is(.readings-wrapper,.saint-wrapper) .newsfeed li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: right .15s ease;
}

html body.site-home .h-feed-box:is(.readings-wrapper,.saint-wrapper) .newsfeed li:first-child {
  padding-left: 30px;
}

html body.site-home .h-feed-box:is(.readings-wrapper,.saint-wrapper) .newsfeed li:first-child::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 3px;
  background: #F6E1C3;
}

/* hover: lift the card, tint the border, nudge the chevron */
html body.site-home .h-feed-box:is(.readings-wrapper,.saint-wrapper) .newsfeed li:hover {
  border-color: #861746;
  box-shadow: 0 6px 16px rgba(134, 23, 70, 0.16);
  transform: translateY(-2px);
}

html body.site-home .h-feed-box:is(.readings-wrapper,.saint-wrapper) .newsfeed li:first-child:hover {
  border-color: #F6E1C3;
}

html body.site-home .h-feed-box:is(.readings-wrapper,.saint-wrapper) .newsfeed li:hover::after {
  right: 12px;
}

/* read-more link: slide the arrow on hover */
html body.site-home #g-utility .h-feed-link a:not(.button)::after {
  transition: transform .15s ease;
}

html body.site-home #g-utility .h-feed-link a:not(.button):hover::after {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------------
   FIX 14 - Helpful Links feed cards: make the whole card clickable
   ---------------------------------------------------------------------
   Only the title anchor was a link target; the rest of the card was dead.
   Stretch the anchor over the card with an inset pseudo-element overlay so
   the whole card clicks through. The `li` already has position:relative
   (FIX 11/13), so `inset:0` covers the card. Hover still works because the
   overlay lives inside the `li`.
   --------------------------------------------------------------------- */
html body.site-home .h-feed-box:is(.readings-wrapper,.saint-wrapper) .newsfeed li .feed-link a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ---------------------------------------------------------------------
   FIX 15 - "View More News" button too small/light (audit item C)
   ---------------------------------------------------------------------
   Client: "view more news button could be bigger/bolded".
   Base rule: override-2026.css:298 `html body.site-home .h-news-button
   .button` (0,3,2) sets 14px / padding 8px 22px, and the weight falls to
   the kit default 400 (base.2.0.css:279). Human-owned file, so override.
   This rule is 0,3,3 and keys on the news button's own anchor only, so no
   other `.button` changes. Mirrors ai-override-school.css FIX 5.
   Affected pages: the parish home (outline 18, /home-st).
   --------------------------------------------------------------------- */
html body.site-home .h-news-button > a.button {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 24px;
}

/* ---------------------------------------------------------------------
   FIX 16 - Parish News cards: arrow placement + bigger title (audit item C)
   ---------------------------------------------------------------------
   Client: "fix the placement of the arrow on these News items. Also looks
   like the font needs to be a bit bigger"
   The card's "Read More" arrow (`.g-array-item-read-more`, a 28px circle)
   was pinned to the card's TOP-right by override-2026.css:294
   (`top:10px; right:10px`, 0,2,0), so it sat on the top-right of the photo.
   The mockup wants it on the image's BOTTOM-right.
   The element is a SIBLING of `.g-array-item-image`, so CSS alone cannot
   anchor it to the image; an inline script on outline 18 moves it inside
   the image div. This rule then offsets it from the image's bottom-right.
   `.g-array-item-image` already has `position: relative`
   (override-2026.css:290), so it is the containing block.
   Selector is 0,3,0 so it beats the 0,2,0 source. Parish home only.
   --------------------------------------------------------------------- */
html body .h-news-feed .g-array-item-image .g-array-item-read-more {
  top: auto;
  bottom: 10px;
  right: 10px;
  margin: 0;
}

/* News card title: 20px/600 (override-2026.css:292) -> 22px. */
html body .h-news-feed .g-item-title {
  font-size: 22px;
}

/* ---------------------------------------------------------------------
   FIX 17 - Footer: "Site by Solutio" credit overlapping the social icons
   on smaller screens (audit item C)
   ---------------------------------------------------------------------
   Client: "the solutio icons overlap weird on smaller screens".
   The footer admin/credit block `.adminfootericon` (lock + "Site by
   Solutio" + "Analytics Privacy Policy") is absolutely positioned by the
   kit — base.2.0.css:1333 `position: absolute; bottom: 30px; right: 10px`,
   and base.2.0.css:229 drops it to `bottom: 40px` under
   50.99rem. Because it is out of flow the `.footer-bottom-row` social
   icons do not reserve space for it, so on narrow screens the two collide
   (measured overlap band ~21px at 390px wide).
   Below 50.99rem this puts the block back in flow, centred under the
   social row. Desktop is untouched.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 50.99rem) {
  html body .adminfootericon {
    position: static;
    right: auto;
    bottom: auto;
    text-align: center;
    padding: 8px 0 0;
  }
}

/* ---------------------------------------------------------------------
   FIX 18 - Footer credit STILL overlapped the social icons at desktop
   ---------------------------------------------------------------------
   FIX 17 only covered <= 50.99rem. At desktop #g-copyright is
   `position: relative` (base.2.0.css:1710) and collapses to height:0,
   because its only child (`.adminfootericon`) is absolutely positioned.
   base.2.0.css:1333 then anchors that block `bottom: 30px; right: 10px`
   against the zero-height box - i.e. 30px up INTO the footer, landing on
   the social row, which navigation.2.0.css:3284 keeps right-aligned
   (`justify-content: flex-end`).
   Taking the block out of absolute positioning at ALL widths lets
   #g-copyright size to it, so the credit sits below the social row.
   Right-aligned to match the icon row above. Supersedes FIX 17.
   --------------------------------------------------------------------- */
html body .adminfootericon {
  position: static;
  right: auto;
  bottom: auto;
  text-align: right;
  padding: 10px 0 0;
}

/* ---------------------------------------------------------------------
   FIX 19 - Subpage header: school-style background + shorter logo (audit item C)
   ---------------------------------------------------------------------
   Client: "subpages need header adjustment. It needs to keep the layout but
   the logo can shrink in height and it needs a background similar to what
   the school has."
   The parish header (#g-navigation) is transparent (override-2026.css:205),
   so on subpages - which have no hero underneath - the logo and nav sit on
   bare white. The school gives the same section its own photo behind a 90%
   white wash (override-school-2026.css:341/342). Same treatment here, using
   the church's own asset. Layout is unchanged: logo left, nav right.
   Scoped to the parish SUBPAGES: outline 17 (about-us/parish-life/engage),
   19 (grid) and 20 (sponsors). The home (outline 18) overlays its header on
   the slideshow, so it must stay transparent - excluded.
   Logo: 205px tall today (override-2026.css:208 `max-height:225px`); the
   school logo is 150px (override-school-2026.css:181), so cap it to match.
   --------------------------------------------------------------------- */
html body.outline-17 #g-navigation,
html body.outline-19 #g-navigation,
html body.outline-20 #g-navigation {
  background-color: #fff;
  background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)), url('/images/template/church26/church-calendar-background.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

html body.outline-17 #g-navigation .h-nav-logo img,
html body.outline-19 #g-navigation .h-nav-logo img,
html body.outline-20 #g-navigation .h-nav-logo img {
  width: auto;
  height: 150px;
  max-height: 150px;
}

/* FIX 19b - breathing room below the shorter logo in the new subpage band.
   `#g-navigation` is `.g-flushed`, which pins `padding: 0 !important`
   (nucleus.css:568), and the logo's bottom currently lands exactly on the
   band edge (45 top offset + 150 = 195 = section height). The school leaves
   ~20px under its logo. Needs !important at higher specificity to beat
   `0,1,0 !important`.
   --------------------------------------------------------------------- */
html body.outline-17 #g-navigation,
html body.outline-19 #g-navigation,
html body.outline-20 #g-navigation {
  padding-bottom: 18px !important;
}

/* FIX 19c - the subpage band must be DARK, not light (client decision).
   The church header content is light: the logo (church26/logo.svg) fills
   #F6E1C3 + #FFFFFF, and the top-level nav is white with a black
   text-shadow (override-2026.css:218). A light wash therefore leaves both
   unreadable. The school can take a light wash because the school's own
   logo and nav are dark. This matches the home hero, which shows the same
   photo behind the same white header content.
   Supersedes the white wash set in FIX 19; FIX 19's positioning and the
   FIX 19b padding still stand.
   --------------------------------------------------------------------- */
html body.outline-17 #g-navigation,
html body.outline-19 #g-navigation,
html body.outline-20 #g-navigation {
  background-color: #861746;
  background-image: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)), url('/images/template/church26/church-calendar-background.jpg');
}

/* FIX 19d - blur the band photo (client: "keep that photo blurred out").
   `filter: blur()` on #g-navigation itself would blur the logo and the nav
   with it, so the photo moves onto a ::before layer and the content is
   lifted above it with z-index. The section keeps a burgundy fill so the
   soft blurred edge blends into the brand colour instead of leaving a seam.
   No overflow:hidden - the section must stay able to show the nav dropdowns.
   Supersedes the section-level image in FIX 19/19c.
   --------------------------------------------------------------------- */
html body.outline-17 #g-navigation,
html body.outline-19 #g-navigation,
html body.outline-20 #g-navigation {
  background-color: #861746;
  background-image: none;
}

html body.outline-17 #g-navigation::before,
html body.outline-19 #g-navigation::before,
html body.outline-20 #g-navigation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)), url('/images/template/church26/church-calendar-background.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(8px);
}

html body.outline-17 #g-navigation > .g-container,
html body.outline-19 #g-navigation > .g-container,
html body.outline-20 #g-navigation > .g-container {
  position: relative;
  z-index: 1;
}

/* FIX 19e - the band's edge fade read as a PINK border (client).
   The blurred ::before loses alpha over its last ~8px, which revealed the
   section's burgundy fill as a pink frame around the band. Changing that
   fill to black turns the same fade into a dark vignette instead.
   Client: "if it had a black overlay over that pink I might be okay with it".
   --------------------------------------------------------------------- */
html body.outline-17 #g-navigation,
html body.outline-19 #g-navigation,
html body.outline-20 #g-navigation {
  background-color: #000;
}

/* FIX 20 - home rotator to 16:9 (church).
   override-2026.css:232 sizes the slides 3:2 - height clamp(720px,67.5vw,960px),
   which is 864px at 1280 wide. The slide photos are 16:9 (1200x675), so
   object-fit:cover cropped their left and right edges. Client: "Lets make the
   rotator 16x9".
   aspect-ratio makes the frame exactly 16:9 at every width, so the 16:9 photos
   fit with no crop at all.
   Two ids (#g-slideshow + #rotate-addpic) so this beats override-2026.css:232
   (1,2,3) on specificity rather than on file order.
   DESKTOP ONLY: override-2026.css:370/:394 give the phone slideshow fixed
   420px/300px heights on purpose. Those are a separate design decision and are
   left alone - ask before changing them.
   --------------------------------------------------------------------- */
@media only screen and (min-width: 50.99rem) {
  html body.site-home #g-slideshow #rotate-addpic :is(.g-swiper, .swiper-wrapper, .swiper-slide) {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* FIX 20b - companion to FIX 20.
   The home hero is now 720px tall at 1280 wide instead of 864px, so the
   mass-times overlay box - 552px tall, top 185.6px - hung 17px below the hero
   and onto the next section. override-2026.css:236 places it with
   top: clamp(180px,14.5vw,210px).
   This keeps that value but pulls the box up when the hero is too short to
   hold it: clamp(100px, min(14.5vw, calc(100% - 570px)), 210px).
   570px is the box's own height (552px) plus an 18px bottom margin.
   On wide screens (>=1440px) 100% - 570px is the larger term, so the box does
   not move at all - the design is only corrected where it used to overflow.
   Below about 1150px wide a 16:9 hero cannot hold both the nav and a 552px
   box; the box stays inside but sits high.
   --------------------------------------------------------------------- */
html body.site-home #g-slideshow .mt-swiper-overlay {
  top: clamp(100px, min(14.5vw, calc(100% - 570px)), 210px);
}

/* =====================================================================
   FIX 21 - rotator aspect ratio, all widths (church home)
   FIX 20 was desktop-only. The phone slideshow is NOT exactly 16:9 either:
   hero = 375x219 at a 390 viewport = 1.712, because the kit sizes it with
   --slideshow-height-mobile: 56.25vw (viewport width, scrollbar included)
   while the element is only as wide as the container.
   Dropping the media query makes the element itself exactly 16:9 at every
   width. Client: "the mobile aspect ratio of the homepage rotator needs to
   also be 16x9".
   Specificity (2,2,2) beats the kit's slideshow.2.0.css:152 (1,4,0) and the
   phone overrides override-2026.css:370/:394 (1,2,3).
   --------------------------------------------------------------------- */
html body.site-home #g-slideshow #rotate-addpic :is(.g-swiper, .swiper-wrapper, .swiper-slide) {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------------------
   FIX 21b - mass-times box at tablet / small-desktop widths (816-1184px).
   A 16:9 hero is too short to hold the box there: at 991 the hero is 549px
   and the box is 514px + a 100px top = 614px, i.e. 65px over the edge; at
   1100 it still overruns by 7px. The box only fits from about 1185px up.
   Below that, the mass-times content goes UNDER the rotator as a full-width
   burgundy band. That is not an invention: it is exactly what the designer
   already does for phones (override-2026.css:371-373), so tablet now matches
   the phone treatment instead of overlapping.
   --------------------------------------------------------------------- */
@media only screen and (min-width: 50.99rem) and (max-width: 74rem) {
  html body.site-home #g-slideshow .mt-swiper-overlay {
    position: relative;
    top: auto;
    right: auto;
    max-width: none;
    width: 100%;
    padding: 30px;
    outline-offset: -10px;
    background: #861746;
  }
  html body.site-home #g-slideshow .h-mt-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
  html body.site-home #g-slideshow .h-mt-buttons {
    align-self: center;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------
   FIX 21c - correct the FIX 20b constant (570 -> 620).
   570px was the box height I measured at 1280 (552px) plus 18px. But the box
   grows as it narrows: it reaches 582px at 1600px, which left it sitting
   flush with the hero's bottom edge (0px slack) at about 1400px wide - one
   extra line of text and it would overrun. 620px covers its 582px maximum
   with room to spare, so the box always clears the hero.
   Above about 1450px the 14.5vw term wins and the box sits exactly where the
   designer put it (top: 210px), so wide screens are untouched.
   --------------------------------------------------------------------- */
html body.site-home #g-slideshow .mt-swiper-overlay {
  top: clamp(100px, min(14.5vw, calc(100% - 620px)), 210px);
}

/* ---------------------------------------------------------------------
   FIX 21d - mobile 16:9, take two. FIX 21 sized the swiper's inner elements
   but NOT the block that wraps them, and on phones that block has an explicit
   height: slideshow.2.0.css:152 gives #rotate-addpic
   `height: var(--slideshow-height-mobile)` = 56.25vw. That is 56.25% of the
   VIEWPORT width (390px, scrollbar included) while the block is only as wide
   as its container (375px), so the phone hero came out 375x219 = 1.712.
   Setting the block itself to aspect-ratio makes the height follow its own
   width, so phones get a true 16:9 as well.
   Specificity (2,1,2) beats slideshow.2.0.css:152 (1,4,0) and
   override-2026.css:86 (1,5,0) on id count.
   Desktop was already exact 16:9 through FIX 20/21 and is unaffected.
   --------------------------------------------------------------------- */
html body.site-home #g-slideshow #rotate-addpic,
html body.site-home #g-slideshow #rotate-addpic :is(.g-swiper, .swiper-wrapper, .swiper-slide) {
  height: auto;
  aspect-ratio: 16 / 9;
}
/* ---------------------------------------------------------------------
   FIX 22 - homepage mass-times buttons had no icons.
   The three buttons in the .h-mt-buttons block (article 2509) each carried
   only a marker class - `bulletin-icon`, `calendar-icon`,
   `ministry-schedule-icon` - and no rule anywhere defined them, so they
   rendered as plain text.
   Each icon is drawn as a ::before ON THE ANCHOR, not as an <i> tag in the
   article: the anchor already holds its own label text, so nothing empty is
   added and a client save in TinyMCE cannot strip the icon
   (see kb/tinymce-safe-html).
   Glyphs are the Solutio icon font (solutio-font.css, shared CDN):
   s-bulletin \e83c, s-calendar-alt-solid \e80d, s-pray-solid \e814 - all
   three exist, so no Font Awesome fallback is needed.
   The fixed 1.15em box and centre alignment keep the three labels starting
   at the same x, the way the design shows them.
   --------------------------------------------------------------------- */
html body.site-home .h-mt-buttons .button::before {
  font-family: "fontello";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  display: inline-block;
  width: 1.15em;
  margin-right: 10px;
  text-align: center;
}
html body.site-home .h-mt-buttons .button.bulletin-icon::before {
  content: "\e83c";
}
html body.site-home .h-mt-buttons .button.calendar-icon::before {
  content: "\e80d";
}
html body.site-home .h-mt-buttons .button.ministry-schedule-icon::before {
  content: "\e814";
}
/* ---------------------------------------------------------------------
   FIX 23 - Helpful Links badges: the two icon badges move out of the
   article and into CSS.
   FIX 9 put them in article 2505 as empty <i> tags inside a
   `<span class="h-feed-badge">`. An empty inline element is not safe in a
   TinyMCE-edited article: a human opening and saving the article strips it
   and the icon disappears (see kb/tinymce-safe-html).
   The <i> tags AND their wrapper span are now gone from the article. Each
   badge is a ::before on `.h-feed-inner-title`, which still holds the real
   title and subtitle text, so nothing empty remains in the content and the
   icon cannot be stripped. Nothing needs to be added to the article if the
   client later adds another badged box - the CSS keys off the wrapper class.
   Appearance is deliberately unchanged from FIX 9: a 48x48 burgundy tile
   with a white 22px glyph - `s-online-giving` (fontello, \e83a) on Catholic
   Exchange, `fa-church` (Font Awesome 6 Free, \f51d) on the Diocese box.
   The FIX 9 rules for `.h-feed-badge` and `.h-feed-badge i` are now dead -
   that element no longer exists in the markup - and stay in the file only
   because this file is append-only.
   --------------------------------------------------------------------- */
html body.site-home .h-feed-inner-title::before {
  content: "";
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #861746;
  color: #ffffff;
  font-size: 22px;
  font-style: normal;
  line-height: 1;
}
html body.site-home .catholic-exchange-wrapper .h-feed-inner-title::before {
  content: "\e83a";
  font-family: "fontello";
  font-weight: normal;
}
html body.site-home .cdowk-wrapper .h-feed-inner-title::before {
  content: "\f51d";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
/* ---------------------------------------------------------------------
   FIX 24 - header top-link buttons (Contact Us / School) had no icons.
   Same defect as FIX 22: the two buttons in `.h-nav-buttons` carried marker
   classes only - `phone-icon` and `school-icon` - and nothing anywhere
   defined a glyph for them. (`school-icon` was already used, but only to
   turn the button white - override-2026.css:213.)
   The buttons are rendered by the Gantry header, not by an article, but the
   fix follows the same rule: the icon is a ::before on the anchor, never an
   <i> tag - so no empty element exists anywhere and a TinyMCE save can
   never remove it (kb/tinymce-safe-html).
   Glyphs are the Solutio icon font: s-phone-solid \e82a, s-school-solid
   \e80b. Both exist, so no Font Awesome fallback is needed.
   NO color is set on the ::before on purpose - the glyph inherits the
   button's own color, so Contact Us gets a white handset on the dark button
   and School gets a burgundy building on the white button.
   Not scoped to .site-home: the same header runs on every church outline,
   so the icons show on subpages as well as the home page. This file is only
   loaded on church outlines, so the school header is unaffected.
   --------------------------------------------------------------------- */
html body .h-nav-buttons .button::before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  width: 1.15em;
  margin-right: 9px;
  text-align: center;
}
html body #g-navigation .h-nav-buttons .button.phone-icon::before {
  content: "\e82a";
}
html body #g-navigation .h-nav-buttons .button.school-icon::before {
  content: "\e80b";
}
/* ---------------------------------------------------------------------
   FIX 25 - header: bigger social icons, bigger menu text, stronger shadow.
   Menu text: the designer sets the nav label size on the anchor
   (override-2026.css:218 `font: 500 clamp(13px,1.3vw,18px)/1.3`), but the
   kit ALSO sizes the inner label span - studius.2.0.css:44
   `.g-main-nav .g-toplevel > li .g-menu-item-title { font-size: min(1vw,14.4px) }`
   - and a rule on the span beats an inherited value from the anchor. So the
   real label size was 12.8px at 1280 and the designer's clamp only ever
   reached 14.4px, never 18px. Sizing the span directly is the only way to
   change what is visible; 18.6px at 1280, floor 15px, cap 19px (near the
   designer's intended 18px maximum, and about 45% up on the old 12.8px).
   Selector follows the real structure with child combinators
   (a.g-menu-item-container > .g-menu-item-content > .g-menu-item-title) so
   it cannot leak into dropdown items, which the designer keeps at their own
   size with `text-shadow:none` (override-2026.css:221).
   Shadow: the designer used one soft pass, `0 1px 8px #000`. Replaced with a
   tight dark core plus a wider halo so the white text keeps an edge over the
   photo on the home hero and still reads on the black subpage band.
   Social icons: override-2026.css:215 sets 19px; raised to 24px.
   Not scoped to .site-home - the same header runs on every church outline.
   --------------------------------------------------------------------- */
html body #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content > .g-menu-item-title {
  font-size: clamp(15px, 1.45vw, 19px);
}
html body #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.9), 0 2px 12px rgb(0 0 0 / 0.9);
}
html body .h-nav-social-icons a {
  font-size: 24px;
}
/* ---------------------------------------------------------------------
   FIX 25b - the social icons in FIX 25 did not move, and this is why.
   `html body .h-nav-social-icons a` is 1 class + 3 elements (0,1,3). The
   kit's rule `.g-social .g-social-items a` (studius_18.css:3) is 2 classes +
   1 element (0,2,1), and class count is compared before element count - so
   the kit won and the icons stayed 16px. That also means the designer's own
   `font-size:19px` (override-2026.css:215) has NEVER applied - the icons have
   always been the kit's 1rem (16px), or its 1vw above 1600px.
   Adding the #g-navigation id lifts this rule to (1,1,3), which no class-only
   rule can reach, so 24px now wins at every width and stays there.
   FIX 25's menu-text size and shadow DID take effect - those elements were
   won on class-count, not element-count.
   --------------------------------------------------------------------- */
html body #g-navigation .h-nav-social-icons a {
  font-size: 24px;
}

/* ---------------------------------------------------------------------
   FIX 26 - PWA installed-app bars (church).
   The standalone-mode chrome comes from the Solutio kit
   (//shared.solutiocdn.com/content/shared/pwa.css), and the two bars are
   filled by two new Gantry particle modules: 1257 "PWA Logo" in the
   pwa-logo position, 1258 "PWA Quicklinks" in pwa-ql. Both bars are
   display:none until pwa.css's @media (display-mode: standalone) fires,
   so every rule below is inert in a normal browser tab.

   Two defects in the kit's phone rules for the BOTTOM bar:
   1. The tile label is inside an <h4>. pwa.css resizes the inner span to
      4vw but never the h4, so the h4 keeps the kit's heading line-height
      (27.7px). At 390px the h4 box measures 83px and the wrapped label
      61px, i.e. 112px of content inside a 60pt (80px) wrapper with
      overflow:hidden - which is why the icons were sliced off at the top
      edge and the label cut off at the bottom.
   2. The label wraps. The kit assumes one short word per tile; "Mass
      Times" broke to three lines in a 77px column.
   Fix: give the wrapper the full bar height, size the h4 itself (not just
   the span), kill the heading line-height, and stop the wrap. 3.15vw is
   12.3px at 390px and clamps to 10px, so "Mass Times" fits from a 320px
   phone upward.
   --------------------------------------------------------------------- */
html body #g-mobile-fixed-nav { height: 80pt; }
html body #g-mobile-fixed-nav .mobile-fixed-nav {
  height: 80pt;
  overflow: visible;
  align-items: center;
}
html body #g-mobile-fixed-nav .g-blockcontent-subcontent-block-content { gap: 3px; }
html body #g-mobile-fixed-nav .g-blockcontent-subcontent-title-icon {
  font-size: 21px;
  line-height: 1;
}
html body #g-mobile-fixed-nav .g-blockcontent-subcontent-title,
html body #g-mobile-fixed-nav .g-blockcontent-subcontent-title-text {
  margin: 0;
  padding: 0;
  font-size: clamp(10px, 3.15vw, 13px);
  line-height: 1.15;
  font-family: var(--body-font-family);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------
   FIX 27 - phone view of the home hero: rotator arrows + mass-times card.
   Design comp (mobile): the rotator shows NO prev/next arrows, and the
   mass-times block is an inset, rounded card with no frame.
   The desktop rules give the block a 5px translucent border AND a hairline
   inset outline (outline-offset:-10px). The existing phone rule
   (override-2026.css:371) only resets position and width, so both the frame
   and the square corners reached the phone. Phone-only, parish home only.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 50.99rem) {
  html body.site-home #g-slideshow .swiper-navigation {
    display: none;
  }

  html body.site-home #g-slideshow .mt-swiper-overlay {
    top: 0;
    width: calc(100% - 26px);
    margin: 10px 13px 20px;
    padding: 24px;
    border: 0;
    outline: 0;
    border-radius: 10px;
  }
}

/* ---------------------------------------------------------------------
   FIX 28 - phone mass-times card, second pass (supersedes FIX 27 parts).
   Client mockup: the card is SQUARE, keeps an inset hairline border that
   matches the button outline (1px #ffffff99), and the three buttons sit
   UNDER the times at every phone width (the human phone rule made the
   wrapper 2 columns from 481-815px, so the buttons sat beside the times).
   The 5px translucent border stays off (FIX 27) so the card reads as one
   solid burgundy panel on the cream page.
   Hero: the human file wants 420px on phones (override-2026.css:370), but
   the FIX 20/21 16:9 rule (ai-override.css:770, 2,2,2) beat it and pinned
   the phone hero to 56.25vw (219px at 390). Restore the taller hero so the
   header can overlap it.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 50.99rem) {
  html body.site-home #g-slideshow #rotate-addpic :is(.g-swiper, .swiper-wrapper, .swiper-slide) {
    height: 420px;
    aspect-ratio: auto;
  }

  html body.site-home #g-slideshow .mt-swiper-overlay {
    border-radius: 0;
    padding: 26px;
    outline: 1px solid #ffffff99;
    outline-offset: -11px;
  }

  html body.site-home #g-slideshow .h-mt-wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  html body.site-home #g-slideshow .h-mt-buttons {
    align-self: stretch;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------
   FIX 29 - phone header over the hero (HOME PAGE ONLY) + shorter hero.
   Client follow-up: the mockup's mobile header sits ON the rotator, not in
   a band above it. So on phones the nav stops being a burgundy bar and
   becomes a transparent overlay on the hero:
     - logo top-left, compact (the stacked church26 logo is 150x142, too
       tall over a photo, so cap it)
     - "Contact Us | School" as plain text links, thrown right
     - the offcanvas hamburger moves from the left to the right
   Everything is keyed on `.site-home`, so the subpages keep the band.
   `pointer-events` is off on the section so the overlay cannot eat the
   swiper's swipe, and back on for the anchors.
   Hero is shortened from FIX 28's 420px: the client wants it shorter.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 50.99rem) {
  html body.site-home #g-slideshow #rotate-addpic :is(.g-swiper, .swiper-wrapper, .swiper-slide) {
    height: 300px;
  }

  html body.site-home #g-navigation {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    background: transparent;
    pointer-events: none;
  }
  html body.site-home #g-navigation a {
    pointer-events: auto;
  }

  html body.site-home #g-navigation .show-mobile {
    position: absolute;
    top: 12px;
    left: 16px;
    width: auto;
  }
  html body.site-home #g-navigation .show-mobile .g-logo {
    max-width: none;
    margin: 0;
  }
  html body.site-home #g-navigation .show-mobile .g-logo img {
    width: auto;
    max-height: 84px;
  }

  html body.site-home .g-offcanvas-toggle {
    left: auto;
    right: 20px;
  }

  html body.site-home #g-navigation .h-main-menu-container,
  html body.site-home #g-navigation .h-main-menu-container .g-block.hidden {
    display: block;
    height: auto;
  }
  html body.site-home #g-navigation .h-nav-logo,
  html body.site-home #g-navigation .h-nav-main-menu,
  html body.site-home #g-navigation .h-nav-social-icons {
    display: none;
  }
  html body.site-home #g-navigation .h-nav-wrapper,
  html body.site-home #g-navigation .h-nav-links,
  html body.site-home #g-navigation .h-nav-social-buttons {
    display: block;
  }
  html body.site-home #g-navigation .h-nav-buttons {
    position: absolute;
    top: 28px;
    right: 76px;
    display: flex;
    align-items: center;
    margin: 0;
  }
  html body.site-home #g-navigation .h-nav-buttons .button {
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  }
  html body.site-home #g-navigation .h-nav-buttons .button::before {
    content: none;
  }
  html body.site-home #g-navigation .h-nav-buttons .button + .button::before {
    content: "|";
    margin: 0 10px;
    opacity: 0.65;
  }
}

/* FIX 30 - completes FIX 29. The header block carries Gantry's `.hidden`
   utility, which is `display: none; visibility: hidden` (nucleus.css:578).
   FIX 29 restored `display`, but `visibility: hidden` is INHERITED, so the
   whole chain stayed invisible. Restore visibility on the same block. */
@media only screen and (max-width: 50.99rem) {
  html body.site-home #g-navigation .h-main-menu-container .g-block.hidden {
    visibility: visible;
  }
}

/* FIX 31 - completes FIX 29. override-2026.css:418 pins the School link to
   `color:#861746 !important` (on desktop that button is white with burgundy
   text). In the plain-text phone treatment both links must be white, so the
   colour needs the same weight. */
@media only screen and (max-width: 50.99rem) {
  html body.site-home #g-navigation .h-nav-buttons .button {
    color: #fff !important;
  }
}

/* FIX 32 - phone header pass 2 (revises FIX 29/30):
   - the hamburger goes back on the LEFT
   - the logo moves to its right so the two do not collide
   - the hero gets taller again (300px read too short once the header
     overlays it; the client asked for taller rotator images)
   The theme JS adds Gantry's `.hidden` to the nav block ~3s after load
   (which is why the links used to flash then vanish); FIX 30's
   `visibility: visible` already holds them on screen after that. */
@media only screen and (max-width: 50.99rem) {
  html body.site-home #g-slideshow #rotate-addpic :is(.g-swiper, .swiper-wrapper, .swiper-slide) {
    height: 380px;
  }

  html body.site-home .g-offcanvas-toggle {
    left: 20px;
    right: auto;
  }

  html body.site-home #g-navigation .show-mobile {
    left: 72px;
  }
}

/* FIX 33 - phone hero + header pass 3.
   Hero/card: FIX 28/32 set the height on `#rotate-addpic`'s DESCENDANTS only.
   The block itself is still pinned to `--slideshow-height` (56.25vw = 219px
   at 390), so the tall image overflowed its own block and the mass-times
   card landed ON it (151px overlap). Grow the block with the swiper, and the
   card falls back to its 10px gap.
   Header (client): logo to the RIGHT, and Contact Us | School next to the
   hamburger on the left. */
@media only screen and (max-width: 50.99rem) {
  html body.site-home #g-slideshow #rotate-addpic {
    height: 380px;
  }

  html body.site-home #g-navigation .show-mobile {
    left: auto;
    right: 16px;
  }

  html body.site-home #g-navigation .h-nav-buttons {
    left: 72px;
    right: auto;
  }
}

/* ---------------------------------------------------------------------
   FIX 34 - phone quicklinks, home page only. Client mockup: the first four
   tiles stay 2-up, the fifth ("Stay in Touch") runs the FULL width, and the
   gaps are tighter. The grid is already two equal columns, so the fifth
   only has to span both. A soft shadow is added to the tile titles - the
   fifth sits on a light church interior and white text had no contrast.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 50.99rem) {
  html body.site-home .quicklink-boxes .g-blockcontent-subcontent {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  html body.site-home .quicklink-boxes .g-blockcontent-subcontent-block:nth-child(5) {
    grid-column: 1 / -1;
  }

  html body.site-home .quicklink-boxes .g-blockcontent-subcontent-title-text {
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  }
}

/* FIX 35 - phone quicklink tiles: title size. In the mockup the tile titles
   are much larger than live - they wrap to two lines ("Becoming Catholic",
   "Sharing the Faith") while the live 17-18px set fits on one. Raise the
   phone-only size so the wrapping matches; the human clamp
   (override-2026.css:256) bottoms out at 18px below ~1059px. */
@media only screen and (max-width: 50.99rem) {
  html body.site-home .quicklink-boxes .g-blockcontent-subcontent-title-text {
    font-size: 22px;
  }
}

/* FIX 36 - bigger mobile header logo. The compact logo was capped at 84px;
   raise it and scale it with the viewport so it never collides with the
   Contact Us | School links on the left. The links are nudged closer to the
   hamburger and shrink slightly on very narrow phones for the same reason. */
@media only screen and (max-width: 50.99rem) {
  html body.site-home #g-navigation .show-mobile .g-logo img {
    max-height: min(108px, 28vw);
  }

  html body.site-home #g-navigation .h-nav-buttons {
    left: 64px;
  }

  html body.site-home #g-navigation .h-nav-buttons .button {
    font-size: clamp(12px, 3.8vw, 15px);
  }
}

/* ---------------------------------------------------------------------
   FIX 37 - phone quicklinks: the last ("Stay in Touch") tile must be the
   SAME height as the four 2-up tiles. The tile height comes from
   `aspect-ratio: 185 / 134`, so a full-width tile computes to ~254px while
   the 2-up tiles are 135px. Pin one height for all five; width stays 100%,
   so the fifth is still full width. */
@media only screen and (max-width: 50.99rem) {
  html body.site-home .quicklink-boxes .g-blockcontent-subcontent-block-content {
    aspect-ratio: auto;
    height: min(135px, 36vw);
  }
}

/* ---------------------------------------------------------------------
   FIX 38 - phone "Week at a Glance" (home page only). Client mockup: the
   day cards stack FULL WIDTH down the page, compact (they hug their
   content), every date badge is a solid burgundy circle, and the control
   row sits at the BOTTOM - "View Full Calendar" on the left, round prev/next
   arrows on the right. The human file makes the feed a horizontal
   scroll-snap carousel (override-2026.css:269) that shows one 88%-wide card
   at a time on phones (override-2026.css:397), with a 305px min-height that
   left a large empty area under short days.

   `display:contents` on .h-calendar-title-button lifts the title and the
   button into the wrapper grid, so the button can sit in the bottom row
   beside the arrows with NO DOM move. Everything is inside the phone block,
   so desktop keeps the designer's carousel untouched. The arrows are built
   by the "AI Override JS - Calendar Pager" row (outline 18). */
html body.site-home .h-calendar-arrows {
  display: none;
}

@media only screen and (max-width: 50.99rem) {
  html body.site-home .h-calendar-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "cal-title cal-title"
      "cal-feed cal-feed"
      "cal-btn cal-arrows";
  }

  html body.site-home .h-calendar-title-button {
    display: contents;
  }

  html body.site-home .h-calendar-title {
    grid-area: cal-title;
  }

  html body.site-home .h-calendar-feed {
    grid-area: cal-feed;
  }

  html body.site-home .h-calendar-button {
    grid-area: cal-btn;
    justify-self: start;
    margin-top: 22px;
  }

  html body.site-home .h-calendar-arrows {
    display: flex;
    grid-area: cal-arrows;
    justify-self: end;
    align-self: center;
    gap: 10px;
    margin-top: 22px;
  }

  html body.site-home .h-cal-arrow {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
  }

  html body.site-home .h-cal-arrow:disabled {
    opacity: 0.35;
    cursor: default;
  }

  html body.site-home .gcaltohtml {
    display: block;
    overflow: visible;
    gap: 0;
    padding: 0;
    scroll-snap-type: none;
  }

  html body.site-home .cc-date-event-container {
    width: 100%;
    flex: none;
    min-height: 0;
    margin-bottom: 14px;
    padding: 18px 18px 20px;
    border-radius: 8px;
  }

  html body.site-home .cc-dateblockformat {
    margin-bottom: 12px;
  }

  html body.site-home .cc-daynumberformat {
    background: #861746;
    color: #fff;
    border-radius: 50%;
  }

  html body.site-home .cc-eventblock .event {
    grid-template-columns: 76px minmax(0, 1fr);
    padding: 11px 0;
  }

  html body.site-home .cc-timeofday {
    font-size: 13px;
  }

  html body.site-home .cc-title {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------
   FIX 39 - phone news section: horizontal side scroller with scroll snap
   (parish home; the same change ships to the school home as
   ai-override-school.css FIX 20). Client mockup: the news cards run in one
   horizontal row, one card about three quarters of the screen wide, the
   next card peeking at the right edge, and the row snapping card to card.
   The human file lays the feed out as a grid - 4-up on desktop and 2-up on
   phones (override-2026.css:287 / :380) - so on phones the feed becomes a
   flex scroller.

   The phone gutter is 20px (`--haysville-width: calc(100% - 40px)`,
   override-2026.css:364). A -20px right margin plus 20px right padding
   lets the scroller bleed to the right viewport edge, as the mockup shows;
   the left inset keeps the 20px gutter. */
@media only screen and (max-width: 50.99rem) {
  html body .h-news-feed > .g-particle > .g-content-array {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding: 2px 20px 16px 0;
    margin-right: -20px;
    scrollbar-width: none;
  }

  html body .h-news-feed > .g-particle > .g-content-array::-webkit-scrollbar {
    display: none;
  }

  html body .h-news-feed > .g-particle > .g-content-array > .g-grid {
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

/* ---------------------------------------------------------------------
   FIX 40 - phone news scroller: line the cards up.
   Client: "the first item is not lined up with the rest of them."
   Cause: the kit's mobile stylesheet (studius_18.css:3, inside
   @media (max-width: 50.99rem)) spaces stacked grid items apart:
     .g-content-array .g-grid:not(:first-child) .g-content { padding-top: 2.5rem }
   That rule has specificity 0,4,0 and was written for a grid that flows
   VERTICALLY. In FIX 39's horizontal scroller the cards sit side by side,
   so the 40px became a top inset on every card except the first - the first
   card sat 40px higher than the rest. Zero it for the news feed only.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 50.99rem) {
  html body .h-news-feed > .g-particle > .g-content-array > .g-grid > .g-block > .g-content {
    padding-top: 0;
  }
}


/* ---------------------------------------------------------------------
   FIX 41 - phone Helpful Links: stack the cards in one column.
   Client: "These helpful links should be stacked in one column on mobile."
   The human override-2026.css gives ONE column at <=480px (:400) and at
   816-1050px (:359), but the 481-815px range only resets the gap (:384),
   so it kept the desktop 2-column grid from :312. Fill that gap so the
   whole phone/tablet range is a single column, in reading order.
   Specificity must beat :312's 0,3,2 (custom_18.css loads before
   override-2026.css), so the selector carries two classes -> 0,4,2.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 50.99rem) {
  html body.site-home .h-widget-wrapper.helplinks-wrapper > .h-widget-feed {
    grid-template-columns: 1fr;
  }
}


/* ---------------------------------------------------------------------
   FIX 42 - phone Stewardship & Giving: one column of icon rows.
   Client: "the Stewardship and Giving section should look like this on
   mobile" (mock: title with a short rule, then four full-width white rows,
   each a light-grey circle icon on the left and the burgundy label beside
   it).
   The human override-2026.css lays the four cards out 4-up (desktop :332)
   and 2-up on phones (:385), centred, with the icon above the label. On
   phones turn each card into a left-aligned row.
   Specificity notes: custom_18.css loads BEFORE override-2026.css, so
   every rule below carries one extra class (0,4,2) to beat the human
   0,3,2 rules (the :196 padding reset and the :333/:334/:335/:336 card
   parts). Media query only - desktop is untouched.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 50.99rem) {

  html body.site-home .steward-quicklinks .g-grid.g-blockcontent-subcontent {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  html body.site-home .steward-quicklinks .g-content.g-blockcontent-subcontent-block-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 18px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
    text-align: left;
  }

  html body.site-home .steward-quicklinks .g-content > .g-blockcontent-subcontent-title-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    margin: 0;
    font-size: 21px;
    background: #f1ede8;
  }

  html body.site-home .steward-quicklinks .g-content > .g-blockcontent-subcontent-title {
    max-width: none;
    margin: 0;
    text-align: left;
  }

  html body.site-home .steward-quicklinks .g-content .g-blockcontent-subcontent-title-text {
    font-size: 16px;
  }
}


/* ---------------------------------------------------------------------
   FIX 42b - tighten the FIX 42 phone row so every label fits ONE line.
   Measured at 390px: the labels are 254-270px wide at 16px, but the row
   left only 252px of text space, so they wrapped. Drop the label to 15px
   and claw back space from the icon, gap and padding -> 259px of text.
   --------------------------------------------------------------------- */
@media only screen and (max-width: 50.99rem) {
  html body.site-home .steward-quicklinks .g-content.g-blockcontent-subcontent-block-content {
    gap: 14px;
    padding: 15px 16px;
  }

  html body.site-home .steward-quicklinks .g-content > .g-blockcontent-subcontent-title-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  html body.site-home .steward-quicklinks .g-content .g-blockcontent-subcontent-title-text {
    font-size: 15px;
  }
}

/* ---------------------------------------------------------------------
   FIX 43 - 404 / error page: the header needs the same dark band as the
   parish subpages.
   The Gantry error outline (`_error`) stores its OWN CSS row list, which
   matched the Base Outline and did not carry this file at all. The error
   page therefore rendered the light church header content - cream logo
   and white nav labels - straight onto bare white, so the menu read as
   faint grey on white.
   The error row list now loads "AI Override"; FIX 43 repeats the FIX 19
   band for the error outline, because FIX 19 is scoped to the parish
   subpage outline ids (17/19/20). Includes the FIX 19b bottom padding
   and the FIX 19 logo cap of 150px.
   FIX 24 (button icons) and FIX 25 / 25b (menu label size, shadow,
   social icon size) need no repeat - they are scoped `html body`.
   --------------------------------------------------------------------- */
html body.outline-_error #g-navigation {
  background-color: #000;
  background-image: none;
  padding-bottom: 18px !important;
}

html body.outline-_error #g-navigation::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(0,0,0,.42), rgba(0,0,0,.42)), url('/images/template/church26/church-calendar-background.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(8px);
}

html body.outline-_error #g-navigation > .g-container {
  position: relative;
  z-index: 1;
}

html body.outline-_error #g-navigation .h-nav-logo img {
  width: auto;
  height: 150px;
  max-height: 150px;
}