/* St. Wenceslaus Parish - 2026 header (staged 2026-10-30, SOL-30584)
   Loaded by the Gantry Page Settings CSS row "Header 2026" (priority 0), so it
   emits after /content/override.css and wins on specificity as well.

   override.css (line ~141/192) sets on #g-navigation:
     background: url('/images/template/bg-glass.png') 0% 0% no-repeat, var(--default-white);
   That stained-glass portrait of St. Wenceslaus is the photo the parish asked
   us to take down. The swirl watermark lives on #g-navigation > .g-container
   and is left in place. */

/* 1. Remove the St. Wenceslaus photo from the header. */
body.site-1 #g-navigation {
  background-image: none;
  background-color: var(--default-white, #fff);
}

/* 2. Left-justify the 2026 lockup. The logo block carries Gantry's align-right
      class, which sets text-align:right on .g-logo. */
body.site-1 #g-navigation .g-logo {
  text-align: left;
}

/* 3. Size the new lockup. It is ~3.4:1 (the old logo-text.svg was 8.6:1), so
      the template default would render it 669px wide and too tall.
      ID selectors are required: clarity2.css / clarity_15.css set
      #g-navigation .g-logo img { width:400px; min-width:40% }. */
body.site-1 #g-navigation .g-logo img,
body.site-1 #g-header .g-logo img,
body.site-1 #g-logo .g-logo img {
  width: 460px;
  min-width: 0;
  max-width: 90%;
  height: auto;
}

/* 4. Mobile: the logo stays left and centred-blocked without the photo.
      override.css centres it (max-width:70%; margin:2rem auto) and
      header-mobile.css right-aligns it to clear the stained glass. The photo is
      gone, so this rule outranks both (1 id + 3 classes) and left-aligns it. */
@media (max-width: 50.99rem) {
  body.site-1 #g-navigation > .g-container .g-logo {
    max-width: 70%;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
  }
}

/* 5. Swirl watermark should fill the whole white header band, not stop a third
      of the way down. override.css pins it at its natural 812x165 size
      (background-size:auto), which leaves a plain white strip under it on
      desktop. Scale it to the container height instead; the right edge stays
      anchored so the swoosh keeps its position behind the logo. Mobile keeps
      the original sizing. */
@media (min-width: 51rem) {
  body.site-1 #g-navigation > .g-container {
    background-size: auto 100%;
    background-position: 100% 0%;
    background-repeat: no-repeat;
  }
}