/* Mobile optimizations for protiadvisory.ch */

/* Fade from grey (#2e3842 via ::after overlay) to dark grey (#1d242a) */
body.landing {
  background: #1d242a;
}
body.landing #page-wrapper {
  background: none;
}
body.landing #banner,
body.is-mobile.landing #banner {
  background: #1d242a;
}

.banner-logo {
  height: 45px;
  width: auto;
}

/* Warm accent color for decorative h2 lines and email */
#banner .more a {
  color: #c4a87a;
  border-bottom-color: #c4a87a;
}
#banner h2:before,
#banner h2:after {
  background: #c4a87a;
}

/* .more at bottom, pushed there by .inner flex:1 (never overlapping) */
#banner .inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#banner .more {
  position: static;
  flex-shrink: 0;
  margin: 0 auto 2em;
  height: auto;
  width: 100%;
  max-width: 22em;
  letter-spacing: 0.05em;
  line-height: 1.8em;
  text-transform: none;
}

/* Initial adjustments: thinner lines on medium screens */
@media screen and (max-width: 980px) {
  #banner h2:before,
  #banner h2:after {
    height: 1px;
  }

  #banner h2 {
    font-size: 1.6em;
  }

  .banner-logo {
    height: 42px;
  }
}

/* Full-screen banner on mobile — matches production sizing */
@media screen and (max-width: 736px) {
  #banner {
    padding: 7em 3em 5em;
    height: 100vh;
    min-height: 100vh;
  }

  .banner-logo {
    height: 38px;
  }

  #banner h2 {
    max-width: 100%;
    box-sizing: border-box;
  }

  #banner h2:before,
  #banner h2:after {
    width: calc(100% + 3em);
    left: -1.5em;
    right: auto;
  }

  #header h1 {
    left: 0.75em;
  }

  #header h1 a {
    font-size: 0.7em;
    letter-spacing: 0.1em;
  }
}

/* Smallest view refinements */
@media screen and (max-width: 480px) {
  #banner {
    padding: 5em 2em 3em;
  }

  .banner-logo {
    height: 32px;
  }

  #banner h2 {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 1.1em;
    padding: 0.75em 1.25em;
    letter-spacing: 0.1em;
  }

}

/* Landscape small screens */
@media screen and (max-height: 640px) and (orientation: landscape) {
  #banner {
    padding: 3.5em 1.5em 1.5em;
    min-height: 100vh;
  }

  .banner-logo {
    height: 28px;
  }

  #banner h2 {
    font-size: 1.05em;
    padding: 0.5em 0.75em;
  }

  #banner p {
    font-size: 0.8em;
  }

  #banner .more {
    font-size: 0.75em;
  }

  #banner h2:before,
  #banner h2:after {
    width: 150%;
    left: -25%;
    right: auto;
  }
}