/* Layout corrections — 2026-07-31
   ------------------------------------------------------------------
   Both navigation bars are declared `position: fixed` but without a
   `top` offset, so the browser kept them at their static position: the
   menu floated over the middle of the page and covered headings.

   Pin them to the top of the viewport and reserve their height in the
   document flow. That replaces the old per-page margin hacks, which
   only ever compensated on the home page's slider image. */

.nav-bar2,
.nav-bar3 { top: 0 !important; }

/* Desktop navigation (.nav-bar2) is 66px tall and shows above 1250px. */
@media (min-width: 1251px) {
    .wrapper { padding-top: 66px; }
    .top-slider img { margin-top: 0 !important; }
}

/* Below 1250px the taller mobile bar (.nav-bar3, 110px) takes over. */
@media (max-width: 1250px) {
    .wrapper { padding-top: 110px; }
    .top-slider img { margin-top: 0 !important; }
    .ganocafe5 { padding-top: 0 !important; }
    .slick-initialized .slick-slide { margin-top: 0 !important; }
}


/* Readability scrim over replaced section backgrounds
   ------------------------------------------------------------------
   The home sections were designed around purpose-made artwork with
   clear areas where the headline sits. A photo uploaded from the admin
   panel has no such quiet area, so the copy on top can become
   unreadable. Sections carrying an uploaded image (the loader tags them
   with .has-custom-bg) get a translucent veil between the photo and the
   text — tinted to contrast with that section's own text colour. */

.slide.has-custom-bg { position: relative; }

.slide.has-custom-bg::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    pointer-events: none;
}

/* keep the section's real content above the veil */
.slide.has-custom-bg > * { position: relative; z-index: 1; }

/* Dark copy on these sections -> lighten the photo. */
#slide-1.has-custom-bg::before,
#slide-5.has-custom-bg::before,
#slide-6.has-custom-bg::before { background: rgba(255, 255, 255, 0.72); }

/* White copy on these sections -> darken the photo. */
#slide-2.has-custom-bg::before,
#slide-4.has-custom-bg::before { background: rgba(0, 0, 0, 0.42); }