/* Highway Break - style-fix.css - critical overrides */
*, *::before, *::after { box-sizing: border-box; }

/* ── CRITICAL LAYOUT FIX: flexbox must fill full container width ──────────── */
/* Without width:100%, .flexbox shrinks to content and content leans left */
.site-header .flexbox {
  width: 100%;
}
/* Hero and sub-page headers: .flexbox must span full width and sit above bg */
.article__header .flexbox {
  width: 100%;
  position: relative;
  z-index: 2;
}
/* The .covers .flexbox at bottom of some pages */
.covers .flexbox {
  width: 100%;
}

/* Header height variants */
.article__header--page.two-thirds-height {
  min-height: 66.67vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.article__header--page.half-height {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Ensure parallax images cover header variants */
.article__header--page.two-thirds-height .article__parallax,
.article__header--page.half-height .article__parallax {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.article__parallax__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.article__header.full-height {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article__parallax {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
}
.article__parallax img, .article__parallax .rsImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article__parallax__slider {
  width: 100%;
  height: 100%;
}
.gallery-item {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article__header:before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}
.article__headline {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
}
.site-logo-img--light, .site-logo-img--dark {
  max-height: 81px;
  width: auto;
}
.gallery-item { display: none; }
.gallery-item:first-child { display: block; }
@media (max-width: 899px) {
  .nav--main { display: none; }
  .nav-trigger { display: block; }
}
@media (min-width: 900px) {
  .nav-trigger { display: none; }
  .nav--main { display: flex; }
}

/* ── FIX 1: page only filled ~1250px, right side of the viewport left blank ──
   Modernizr writes a `flexbox` feature class onto <html>, which collides with
   the theme's `.flexbox` layout utility (wp-content/themes/rosa/style.css:77).
   That turned the root element into a flex container, so <body> became a flex
   item and shrank to its max-content width (1250px, the .container cap)
   instead of stretching across the viewport. Keep the utility, but never let
   it apply to the root element. */
html.flexbox {
  display: block;
  width: auto;
  align-items: normal;
  flex-wrap: nowrap;
}

/* ── FIX 2: main menu invisible — white links on the white header bar ───────
   wp-content/themes/rosa/style.css:113 forces white nav links whenever
   .site-header has `header--inversed` and lacks `headroom--not-top`. The
   headroom--top / headroom--not-top classes are added by the theme's sticky
   header script, which never runs in this rollback, so the links stayed white
   over the white header background and only the hover/sub-menu showed up.
   Default to dark links on the solid header; the inverted (white) treatment
   is kept, but only for a header that is genuinely transparent over a hero. */
.site-header .nav--main a,
.site-header.header--inversed:not(.headroom--not-top) .nav--main a {
  color: #000000;
}
.site-header .nav.nav--items-social a:before,
.site-header.header--inversed:not(.headroom--not-top) .nav.nav--items-social a:before {
  color: #000000;
}
.site-header .nav--main > .menu-item > a:hover,
.site-header .nav--main > .menu-item.current-menu-item > a,
.site-header.header--inversed:not(.headroom--not-top) .nav--main > .menu-item > a:hover,
.site-header.header--inversed:not(.headroom--not-top) .nav--main > .menu-item.current-menu-item > a {
  color: #c59d5f;
}

/* Inverted header: only while it is actually transparent over a hero image.
   `headroom--top` is set by the sticky-header script; if that script is not
   running the rules above keep the menu readable. */
body.header--transparent .site-header.headroom--top {
  background-color: transparent;
  border-bottom: none;
  box-shadow: none;
}
body.header--transparent .site-header.header--inversed.headroom--top .nav--main a,
body.header--transparent .site-header.header--inversed.headroom--top .nav.nav--items-social a:before {
  color: #ffffff;
}
body.header--transparent .site-header.header--inversed.headroom--top .nav--main > .menu-item > a:hover,
body.header--transparent .site-header.header--inversed.headroom--top .nav--main > .menu-item.current-menu-item > a {
  color: #c59d5f;
}

/* ── FIX 3: tapping the hamburger did nothing on phones/tablets ─────────────
   The theme's menu script toggles `navigation--is-visible` on <html>
   (assets/js/main.js:1587), but the only open-state rule in the stylesheet is
   `.navigation--main.is-open` (style.css:803), which nothing ever sets. Hook
   the open state onto the class the script actually writes. */
@media (max-width: 899px) {
  html.navigation--is-visible .navigation--main { display: block; }
  html.navigation--is-visible .nav--main {
    display: flex;
    flex-direction: column;
  }
  /* keep the trigger clickable above the full-screen panel so it also closes */
  .site-header .nav-trigger { position: relative; z-index: 1001; }
  /* stop the page behind the panel from scrolling while it is open */
  html.navigation--is-visible body { overflow: hidden; }
}