/* =====================================================================
   AI OVERRIDE (SCHOOL) - agent-maintained post-build audit fixes
   Site: St. Cecilia Catholic School, Haysville KS  (SCHOOL outlines)
   Created: 2026-09-21
   Registered as a CSS asset on the SCHOOL redesign outlines only:
   49 (#School Outline), 50 (#School Grid), 52 (#School Home).
   51 (#School Sponsors) is assigned to no page, so it carries no row.
   Deliberately separate from the parish file ai-override.css: parish
   fixes must not reach the school pages, and the reverse.
   Row priority 0, so it loads after content/override-school-2026.css.
   Add new audit fixes at the bottom of this file.
   ===================================================================== */

/* ---------------------------------------------------------------------
   FIX 1 - DOCman pages showed an unstyled title (audit item S)
   ---------------------------------------------------------------------
   Same fix as FIX 2 in the parish file ai-override.css. Both files carry
   it because the cause is the component, not the design: the article
   component emits the subpage title as
   `<div class="page-header"><h2>Title</h2>`, which the kit styles via
   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) instead of
   the 51.2px burgundy subpage title.
   Affected school page: /newsletter (menu item 1366, outline 49).
   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 2 - DOCman category heading carried an underline and sat tight
   ---------------------------------------------------------------------
   Follow-up to FIX 1, same element. Mirrors FIX 3 in ai-override.css.
   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.
   Affected school page: /newsletter (menu item 1366, outline 49).
   --------------------------------------------------------------------- */
html body .com_docman .docman_category > .koowa_header {
  border-bottom: none;
  margin-top: 1.5rem;
}

/* ---------------------------------------------------------------------
   FIX 3 - Grid tile image zoom reduced (item C follow-up)
   ---------------------------------------------------------------------
   Mirrors FIX 4 in ai-override.css.
   `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 4 - Side menu active item text was unreadable (audit item C&S)
   ---------------------------------------------------------------------
   Mirrors FIX 6 in ai-override.css. Same studius.2.0.css:186 rule
   `.moduletable .nav.menu li.current.active a { color: var(--default-white);
   background: rgba(var(--secondary-color-rgb), 1) }` (specificity 0,5,2)
   renders white text on the light peach `--secondary-color` #F5E0C3, so the
   current page's side-menu item is hard to read.
   Fix: the brief asks for #861746 (the site burgundy) on the active item.
   Affected school page: /our-school/mission (menu item 1314, outline 49).
   --------------------------------------------------------------------- */
html body .moduletable .nav.menu li.current.active a {
  color: #861746;
}

/* ---------------------------------------------------------------------
   FIX 5 - "View More News" button too small/light (audit item S)
   ---------------------------------------------------------------------
   The school home news button was 14px / weight 600 with 9px 20px padding,
   so the client asked for it to be bigger and bolder.
   Source: override-school-2026.css:216 `html body.site-home .button`
   (0,2,2) sets the base button look. That file is human-owned, so this is
   an override, not an edit.
   This rule is 0,2,3 and keys on the news button only (the sole
   `.h-news-button` child), so no other `.button` changes.
   Affected page: /school-st (outline 52).
   --------------------------------------------------------------------- */
html body .h-news-button > a.button {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 24px;
}

/* ---------------------------------------------------------------------
   FIX 6 - H6 sub-page headings were unreadable (audit item S, this list:
   "H6 too light, make #D2B48C")
   ---------------------------------------------------------------------
   Mirrors FIX 7 in ai-override.css. fonts2.css:123 sets
   `h6 { color: var(--secondary-color) }`, and --secondary-color here is
   the warm cream #F5E0C3, so H6 text on the white .g-wrapper background
   is almost invisible on the school sub-pages (e.g. /im-new-here,
   /in-our-community/*, /our-families/*, /student-life/*).
   Fix: the brief asks for #D2B48C on the H6s.
   --------------------------------------------------------------------- */
html body h6 {
  color: #D2B48C;
}

/* ---------------------------------------------------------------------
   FIX 7 - "View Full Calendar" button had no visible border (audit item S)
   ---------------------------------------------------------------------
   Symptom: the school home "View Full Calendar" button (Week at a Glance)
   showed no outline, because its border colour equalled its burgundy
   background. The church home's equivalent button has a white border.
   Source: override-school-2026.css:246 (human-owned)
   `html body.site-home .h-calendar-button .button { background:
   var(--primary-color); color:#fff; border-color: var(--primary-color) }`
   (0,3,2). The base border width/style come from
   override-school-2026.css:216 `html body.site-home .button
   { border: 1px solid #555 }`.
   Fix: set the border colour to white, matching the church button.
   Specificity 0,3,3 beats the 0,3,2 source rule, so only border-color
   changes and the border stays 1px solid.
   Affected page: /school-st (outline 52).
   --------------------------------------------------------------------- */
html body.site-home .h-calendar-button a.button {
  border-color: #ffffff;
}

/* ---------------------------------------------------------------------
   FIX 8 - Top menu items were too far apart (audit item S)
   ---------------------------------------------------------------------
   Symptom: the school top navigation (Home / Our School / Our Families /
   Student Life / In Our Community / Sponsors) stretched edge to edge,
   with ~130px between items.
   Source: override-school-2026.css:184 (human-owned)
   `html body #g-navigation .g-toplevel { display:flex;
   justify-content: space-between }` (1,1,2) spreads the items across the
   full bar. The church nav instead groups its items with a 28px gap.
   Fix: centre the cluster and set a 28px gap, matching the church nav's
   spacing. Specificity 1,1,3 beats the 1,1,2 source rule. Only the
   top-level list (ul.g-toplevel) is affected - the dropdowns are
   ul.g-dropdown and are untouched.
   Affected pages: all school outlines (49, 50, 52).
   --------------------------------------------------------------------- */
html body #g-navigation ul.g-toplevel {
  justify-content: center;
  gap: 28px;
}

/* ---------------------------------------------------------------------
   FIX 9 - Hero "Contact Us" box did not use its full height (audit item S)
   ---------------------------------------------------------------------
   Symptom: the info box beside the hero rotator on the school home
   (.school-contact-box, matched in height to the rotator) packed its
   content at the top and left ~200px of empty space at the bottom.
   Cause: the block content (contentarray particle -> g-content-array ->
   g-grid -> g-block -> g-content -> g-array-item -> g-array-item-text ->
   .h-contact-wrapper) is all plain block layout, so it stops at its
   content height and never grows into the box.
   Fix: make the box a flex column and let that chain grow, then spread
   .h-contact-wrapper with justify-content: space-between so the contact
   details sit at the top and the three buttons anchor to the bottom
   (matching the church hero box, whose buttons also sit at the bottom).
   Scoped to .school-contact-box, so only this box is affected.
   Affected page: /school-st (outline 52).
   --------------------------------------------------------------------- */
html body .school-contact-box {
  display: flex;
  flex-direction: column;
}
html body .school-contact-box .g-content,
html body .school-contact-box .g-content-array,
html body .school-contact-box .g-grid > .g-block,
html body .school-contact-box .g-array-item,
html body .school-contact-box .g-array-item-text,
html body .school-contact-box .h-contact-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
html body .school-contact-box .g-grid {
  flex: 1 1 auto;
}
html body .school-contact-box .h-contact-wrapper {
  justify-content: space-between;
}

/* ---------------------------------------------------------------------
   FIX 10 - Hero contact box: centre the buttons in the free space
            (refines FIX 9) (audit item S)
   ---------------------------------------------------------------------
   FIX 9 spreads the box with `justify-content: space-between`, which pins
   the three buttons to the bottom edge. The client asked to centre them
   in the leftover white space instead, and to enlarge the box text a
   little so the box fills better.
   This rule overrides FIX 9's `space-between` (same specificity, later in
   the file) and centres `.h-contact-buttons` in the space below the
   details with auto block margins. Font sizes: h4 20 -> 22px, body
   paragraphs 17.6 -> 19px, buttons 14 -> 15px.
   Affected page: /school-st (outline 52).
   --------------------------------------------------------------------- */
html body .school-contact-box .h-contact-wrapper {
  justify-content: flex-start;
}
html body .school-contact-box .h-contact-buttons {
  margin-top: auto;
  margin-bottom: auto;
}
html body .school-contact-box .h-contact-content h4 {
  font-size: 22px;
}
html body .school-contact-box .h-contact-content p {
  font-size: 19px;
}
html body .school-contact-box .h-contact-buttons .button {
  font-size: 15px;
}

/* ---------------------------------------------------------------------
   FIX 11 - Hero "link box" buttons had no icons (audit item S)
   ---------------------------------------------------------------------
   Symptom: the three buttons in the hero contact box (Newsletter /
   Lunch Menu / Parent Resources) carry icon classes but show no icon.
   Cause: the classes (.newsletter-icon etc.) are hooks with NO CSS
   anywhere - not in the shared kit, not in the per-outline sheets, not in
   override-school-2026.css. Nothing draws them.
   Fix: add a ::before glyph per button.
     - Newsletter uses the custom Solutio font (fontello) glyph
       "s-newspaper-solid" = U+E808.
     - Lunch Menu (apple) and Parent Resources (clipboard-list) use
       Font Awesome 6 Free solid.
   Icons inherit the button's text colour, so no colour is set.
   Affected page: /school-st (outline 52).
   --------------------------------------------------------------------- */
html body .school-contact-box .h-contact-buttons .button::before {
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}
html body .school-contact-box .h-contact-buttons .newsletter-icon::before {
  font-family: "fontello";
  font-weight: 400;
  content: "\e808";
}
html body .school-contact-box .h-contact-buttons .apple-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f5d1";
}
html body .school-contact-box .h-contact-buttons .clipboard-icon::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f46d";
}

/* ---------------------------------------------------------------------
   FIX 12 - Newsletter button uses the Solutio icon class on the markup
   ---------------------------------------------------------------------
   The Newsletter button in article 2516 (School Contact) now carries
   `solutio-icons s-bulletin` directly, so the font stylesheet draws the
   glyph and the FIX 11 `.newsletter-icon` ::before rule is retired (that
   class is gone from the markup).
   The Solutio base rule adds a .2em left margin to its glyph that the
   Font Awesome icons do not have, so the Newsletter icon sat ~3px right
   of the other two. Normalise it so all three icons align.
   --------------------------------------------------------------------- */
html body .school-contact-box .h-contact-buttons .button::before {
  margin-left: 0;
}

/* ---------------------------------------------------------------------
   FIX 13 - School header "Parish" button: smaller, burgundy (audit item 8, S)
   ---------------------------------------------------------------------
   The toplink is a Block Content particle ("Toplinks", blockcontent-4325,
   blockClass `topsite-quicklinks`) in #g-navigation on outline 52. The
   human-owned override-school-2026.css:190 styles its content as a white
   pill (8px 20px padding, #fff fill, 1px #777 border), which reads as an
   empty outlined box on the white header band. It is also about twice the
   size of the matching church-side "School" button (a.button.school-icon,
   85x37).
   Make it a compact burgundy pill with a white icon and label.
   Specificity 0,3,2 beats the 0,2,2 source (override-school-2026.css:190);
   the icon rule 0,2,3 beats `html body .topsite-quicklinks i` (0,1,3).
   --------------------------------------------------------------------- */
html body .topsite-quicklinks .g-content.g-blockcontent-subcontent-block-content {
  gap: 8px;
  padding: 7px 16px;
  border-color: #861746;
  background: #861746;
}

html body .topsite-quicklinks .g-blockcontent-subcontent-title-icon {
  margin: 0;
  font-size: 18px;
}

html body .topsite-quicklinks .g-blockcontent-subcontent-title-icon i {
  color: #ffffff;
}

html body .topsite-quicklinks .g-blockcontent-subcontent-title-text {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.2;
}

/* ---------------------------------------------------------------------
   FIX 14 - "Parish" toplink: a bit bigger (audit item 8 follow-up, S)
   ---------------------------------------------------------------------
   The client asked for the FIX 13 pill to be a little larger. Same
   selector as FIX 13, so equal specificity and later load order wins.
   164x71 white -> 114x43 (FIX 13) -> ~131x55.
   --------------------------------------------------------------------- */
html body .topsite-quicklinks .g-content.g-blockcontent-subcontent-block-content {
  gap: 10px;
  padding: 10px 22px;
}

html body .topsite-quicklinks .g-blockcontent-subcontent-title-icon {
  font-size: 22px;
}

html body .topsite-quicklinks .g-blockcontent-subcontent-title-text {
  font-size: 15px;
}

/* ---------------------------------------------------------------------
   FIX 15 - School header "Parish" toplink restyled to the client mockup
   ---------------------------------------------------------------------
   The client sent a mockup: a white pill with a grey border and rounded
   corners, a burgundy church glyph, and dark "Parish" text. FIX 13/14 had
   made it a burgundy pill with white text, so this restyles it.
   Same selectors as FIX 13 (0,3,2 block / 0,2,3 icon / 0,2,2 label);
   appended after them, so it wins on load order. School home, outline 52.
   The overlay `a` stays the click target.
   --------------------------------------------------------------------- */
html body .topsite-quicklinks .g-content.g-blockcontent-subcontent-block-content {
  background: #ffffff;
  border: 2px solid #666666;
  border-radius: 6px;
  padding: 12px 26px;
}

html body .topsite-quicklinks .g-blockcontent-subcontent-title-icon i {
  color: #861746;
}

html body .topsite-quicklinks .g-blockcontent-subcontent-title-text {
  color: #333333;
  font-size: 20px;
  font-weight: 400;
}

/* ---------------------------------------------------------------------
   FIX 16 - School header "Parish" toplink: transparent background
   ---------------------------------------------------------------------
   Client: "the parish top link should have a transparent background in the
   school header". FIX 15 gave the pill a solid white fill; this drops it so
   the header shows through, keeping the grey border + burgundy icon + dark
   label. Same 0,3,2 selector as FIX 15, appended after it, so it wins on
   load order. School header, outlines 49/50/52.
   --------------------------------------------------------------------- */
html body .topsite-quicklinks .g-content.g-blockcontent-subcontent-block-content {
  background: transparent;
}

/* ---------------------------------------------------------------------
   FIX 17 - School News cards: match the church card styles (audit item C)
   ---------------------------------------------------------------------
   Client: "move that chevron on the school news as well. make them match
   the church styles."
   The school card is the same structure as the church (module 1243 in
   `.h-news-feed` / `#grid-addpic`). Same two changes as ai-override.css
   FIX 16:
   1. Arrow position. override-school-2026.css:358 pins
      `.h-news-feed .g-array-item-read-more` to the card's top-right
      (0,2,0). The read-more is a SIBLING of `.g-array-item-image`, so CSS
      cannot anchor it to the image; an inline script on outline 52 moves it
      inside the image div (which already has position: relative). This rule
      (0,3,0) then offsets it from the image's bottom-right.
   2. Title size. override-school-2026.css:327 sets
      `font: 600 18px/1.35 var(--title-font-family) !important` (0,2,0);
      the church is 22px. Matching it needs !important with higher
      specificity. Colour (#333) and family (Raleway) already match.
   The child/offset rules mirror the parish FIX 16 exactly.
   --------------------------------------------------------------------- */
html body .h-news-feed .g-array-item-image .g-array-item-read-more {
  top: auto;
  bottom: 10px;
  right: 10px;
  margin: 0;
}

html body .h-news-feed .g-item-title {
  font-size: 22px !important;
  line-height: 1.3 !important;
}

/* ---------------------------------------------------------------------
   FIX 18 - Footer: "Site by Solutio" credit overlapping the social icons
   on smaller screens (audit item C)
   ---------------------------------------------------------------------
   Same defect and same fix as ai-override.css FIX 17 — the school footer
   uses the same kit rule (base.2.0.css:1333 absolute `.adminfootericon`,
   bottom 40px under 50.99rem via base.2.0.css:229) and the same markup, so
   the credit block overlapped the social row on narrow screens.
   Below 50.99rem the block goes back in flow, centred under the social row.
   Applies to the school outlines; desktop 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 19 - Footer credit STILL overlapped the social icons at desktop
   ---------------------------------------------------------------------
   Same defect and fix as ai-override.css FIX 18. FIX 18 only covered
   <= 50.99rem; at desktop #g-copyright (base.2.0.css:1710, position:
   relative) collapses to height:0, so base.2.0.css:1333 anchors the
   absolutely positioned `.adminfootericon` 30px up into the footer, on
   top of the right-aligned social row. Taking it out of absolute
   positioning at ALL widths lets #g-copyright size to it, so the credit
   sits below the social row, right-aligned. Supersedes FIX 18.
   --------------------------------------------------------------------- */
html body .adminfootericon {
  position: static;
  right: auto;
  bottom: auto;
  text-align: right;
  padding: 10px 0 0;
}

/* ---------------------------------------------------------------------
   FIX 20 - phone news section: horizontal side scroller with scroll snap
   (school home). Identical change to ai-override.css FIX 39 - the school
   card has the same structure (module 1243 in `.h-news-feed` /
   `#grid-addpic`), and the school design rules mirror the parish ones, so
   the selectors are the same. Phone only; desktop keeps the grid.
   --------------------------------------------------------------------- */
@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 21 - phone news scroller: line the cards up (school home).
   Same defect and fix as ai-override.css FIX 40: the kit's
   studius_18.css `@media (max-width:50.99rem)` rule
   `.g-content-array .g-grid:not(:first-child) .g-content { padding-top:2.5rem }`
   (0,4,0) pushes every card except the first 40px down in FIX 20's
   horizontal scroller.
   --------------------------------------------------------------------- */
@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;
  }
}