/* =============================================================
   Niseko Nomads — unified site chrome (header + footer)
   -------------------------------------------------------------
   Loaded by EVERY page in the site. The header/footer MARKUP is
   duplicated statically into each .html file (kept crawlable —
   nothing is injected at runtime), but every style and every
   behaviour lives here and in js/site-chrome.js so the two can
   never drift apart.

   Header behaviour (identical on all pages):
     - transparent over the hero at scroll position 0
     - fades to a solid white bar once the page is scrolled
       (body.nav-scrolled, toggled by js/site-chrome.js at 40px)
     - nav links swap white -> steel blue in the same transition
   ============================================================= */

/* ---------------------------------------------------------------
   HEADER — top (transparent) state
   `!important` is required on the colour properties only: Webflow's
   IX2 "navigation" interaction still writes inline styles on the two
   pages it is bound to (index.html, thank-you.html) and the unified
   state has to win everywhere so all pages look the same.
   --------------------------------------------------------------- */
.navbar-logo-left {
  background-color: rgba(255, 255, 255, 0) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0);
  transition: background-color .35s ease, box-shadow .35s ease;
}

.navbar-logo-left-container,
.navbar-logo-left-container.shadow-three,
.navbar-logo-left-container.shadow-three.navigation {
  background-color: transparent;
  box-shadow: none;
}

.nav-menu-two {
  color: #fff;
}

.nav-link {
  color: #fff !important;
  transition: color .35s ease;
}

.nav-link:hover {
  color: rgba(255, 255, 255, .75) !important;
}

.menu-button .w-icon-nav-menu {
  color: #fff;
}

/* Announcement strip sits inside the header block and animates with it.
   It is wrapped in a bare <section>, and the SEO/blog pages set
   `.seo-page section { padding: 72px 0 }` — which would inflate the FIXED
   header from ~106px to ~250px, hide the top of the hero underneath it and
   drop a 250px white slab over the page content once `.nav-scrolled` paints
   the bar solid. The header's own section is pinned to zero on every page. */
.navbar-logo-left > section,
body.seo-page .navbar-logo-left > section,
body.nn-plain .navbar-logo-left > section {
  margin: 0;
  padding: 0;
}

.text-block-4.applications-open-text {
  background-color: rgba(0, 0, 0, 0) !important;
  color: rgba(255, 255, 255, 0) !important;
  transition: background-color .35s ease, color .35s ease;
}

/* ---------------------------------------------------------------
   HEADER — scrolled (solid white) state
   --------------------------------------------------------------- */
body.nav-scrolled .navbar-logo-left {
  background-color: #fff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

body.nav-scrolled .nav-link {
  color: #2f5249 !important;
}

body.nav-scrolled .nav-link:hover {
  color: rgba(26, 27, 31, .75) !important;
}

body.nav-scrolled .menu-button .w-icon-nav-menu {
  color: #1a1b1f;
}

body.nav-scrolled .text-block-4.applications-open-text {
  background-color: #000 !important;
  color: #fff !important;
}

/* "Apply Now" CTA. The SEO/blog pages set a page-wide `.seo-page a` colour
   that is the same green as the button fill, which would repaint the label
   into invisibility, so the button is pinned here for every page instead. */
.nav-menu-two .button-primary,
.nav-menu-two .button-primary:hover,
.nav-menu-two .button-primary:focus {
  color: #fff !important;
  text-decoration: none !important;
}

/* Current-page marker (set by js/site-chrome.js) */
.nav-link.nn-active {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* Keep the wider unified nav on one line at desktop widths */
@media screen and (min-width: 992px) {
  .navbar-logo-left .container-2 {
    max-width: 1080px;
  }

  .nav-menu-two .nav-link {
    margin-left: 2px;
    margin-right: 2px;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
  }

  .nav-menu-two .button-primary {
    padding: 12px 1.5rem;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------
   HEADER — tablet / mobile
   Below 992px Webflow collapses the nav into the hamburger drawer and
   the bar is solid white at all times, so the scroll swap is pinned to
   that one appearance on every page.
   --------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .navbar-logo-left,
  body.nav-scrolled .navbar-logo-left {
    background-color: #fff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
  }

  .nav-link,
  body.nav-scrolled .nav-link {
    color: #2f5249 !important;
  }

  .menu-button .w-icon-nav-menu,
  body.nav-scrolled .menu-button .w-icon-nav-menu {
    color: #1a1b1f;
  }

  .text-block-4.applications-open-text,
  body.nav-scrolled .text-block-4.applications-open-text {
    background-color: #253c37 !important;
    color: #fff !important;
  }
}

/* ---------------------------------------------------------------
   SEO / blog pages used to reserve a solid strip for a permanently
   white navbar. The unified header is transparent at the top, so the
   hero has to run underneath it instead.
   --------------------------------------------------------------- */
body.seo-page {
  padding-top: 0 !important;
}

body.seo-page .hero {
  padding-top: 170px !important;
}

@media screen and (max-width: 991px) {
  body.seo-page .hero {
    padding-top: 148px !important;
  }
}

/* ---------------------------------------------------------------
   Pages that had no chrome of their own (Webflow leftovers such as
   style-guide / detail_*). They now carry the unified header, so
   their content needs room under the fixed bar.
   --------------------------------------------------------------- */
body.nn-plain {
  padding-top: 96px;
}

@media screen and (max-width: 991px) {
  body.nn-plain {
    padding-top: 84px;
  }
}

/* =============================================================
   FOOTER — one minimal, centred, responsive footer on every page
   ============================================================= */
.nn-footer {
  background-color: #0b0b0b;
  color: #cfcfcf;
  font-family: Roboto, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  padding: 56px 24px 26px;
  margin: 0;
}

.nn-footer * {
  box-sizing: border-box;
}

.nn-footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

.nn-footer-brand {
  display: block;
  line-height: 0;
  text-decoration: none;
}

.nn-footer-logo {
  width: 130px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.nn-footer-tagline {
  margin: 0;
  max-width: 620px;
  font-size: .95rem;
  line-height: 1.7;
  color: #cfcfcf;
}

.nn-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
}

.nn-footer-links li {
  margin: 0;
  padding: 0;
  line-height: 1;
}

footer.nn-footer .nn-footer-links a {
  color: #fff;
  font-size: .92rem;
  letter-spacing: .04em;
  text-decoration: none;
  transition: color .2s ease;
}

footer.nn-footer .nn-footer-links a:hover {
  color: #b0dce2;
  text-decoration: none;
}

.nn-footer-contact {
  margin: 0;
  font-size: .88rem;
  line-height: 1.8;
  color: #9a9a9a;
}

footer.nn-footer .nn-footer-contact a {
  color: #b0dce2;
  text-decoration: none;
}

footer.nn-footer .nn-footer-contact a:hover {
  text-decoration: underline;
}

.nn-footer-bar {
  width: 100%;
  max-width: 1040px;
  margin: 8px auto 0;
  padding-top: 20px;
  border-top: 1px solid #1e1e1e;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  font-size: .8rem;
  color: #777;
  text-align: center;
}

footer.nn-footer .nn-footer-bar a {
  color: #9a9a9a;
  text-decoration: none;
}

footer.nn-footer .nn-footer-bar a:hover {
  color: #b0dce2;
  text-decoration: none;
}

@media screen and (max-width: 600px) {
  .nn-footer {
    padding: 44px 20px 22px;
  }

  .nn-footer-links {
    gap: 10px 20px;
  }
}