/****************************************************
 * GLOBAL HEADER VARS (heights + spacing + colors)
 ****************************************************/
:root {
  --brand-h: 70px;              /* fixed height of logo wrapper */
  --padY: 2rem;                 /* top state padding (1rem + 1rem) */
  --padY-scrolled: 1rem;        /* scrolled padding (.5rem + .5rem) */
  --gap: 2px;                   /* constant space between primary & secondary */

  /* Opacity controls */
  --primary-alpha: .85;         /* top state (~15% transparent) */
  --primary-alpha-scrolled: .95;/* scrolled (~5% transparent) */

  /* Gradient coverage (secondary bar) */
  --sub-solid-pct: 75%;         /* solid until 75%, then fade out */

  /* Secondary bar heights */
  --sub-h: 50px;                /* height of secondary strip */
  --logo-h: 62px;               /* Skam Summer logo height (taller on purpose) */
}

/* computed header height */
:root     { --header-h: calc(var(--brand-h) + var(--padY)); }
.scrolled { --header-h: calc(var(--brand-h) + var(--padY-scrolled)); }

/****************************************************
 * PRIMARY NAVBAR (semi-transparent) + shrink
 ****************************************************/
#navbar-main.navbar-expand-lg {
  padding-top: calc(var(--padY) / 2);
  padding-bottom: calc(var(--padY) / 2);
  background-color: rgba(0, 0, 0, var(--primary-alpha));
  transition: background-color .3s ease, padding .3s ease;
  will-change: background-color, padding;
}
.scrolled #navbar-main.navbar-expand-lg {
  padding-top: calc(var(--padY-scrolled) / 2);
  padding-bottom: calc(var(--padY-scrolled) / 2);
  background-color: rgba(0, 0, 0, var(--primary-alpha-scrolled));
}

/* Logo shrink without layout shift */
#navbar-main .navbar-brand {
  display: flex;
  align-items: center;
  height: var(--brand-h);
}
#navbar-main .navbar-brand img {
  height: 100%;
  width: auto;
  transform: scale(1);
  transform-origin: left center;
  transition: transform .3s ease;
  will-change: transform;
}
.scrolled #navbar-main .navbar-brand img { transform: scale(0.8); }

/****************************************************
 * PRIMARY NAV LINKS (Oswald + red hover)
 ****************************************************/
#navbar-main.navbar {
  --bs-navbar-color: #fff;
  --bs-navbar-hover-color: red;
  --bs-navbar-active-color: #fff;
  --bs-navbar-disabled-color: rgba(255,255,255,.5);
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
}
#navbar-main #block-weloveskam-mainnavigation .navbar-nav > .nav-item > .nav-link {
  color: var(--bs-navbar-color);
  font-family: "Oswald", sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
  text-decoration: none;
  padding: .5rem .75rem;
  transition: color .2s ease-in-out;
}
#navbar-main #block-weloveskam-mainnavigation .navbar-nav > .nav-item > .nav-link:hover,
#navbar-main #block-weloveskam-mainnavigation .navbar-nav > .nav-item > .nav-link:focus {
  color: var(--bs-navbar-hover-color);
}
#navbar-main #block-weloveskam-mainnavigation .navbar-nav > .nav-item > .nav-link.active,
#navbar-main #block-weloveskam-mainnavigation .navbar-nav > .nav-item.show > .nav-link,
#navbar-main #block-weloveskam-mainnavigation .navbar-nav > .nav-item > .nav-link[aria-current="page"] {
  color: var(--bs-navbar-active-color);
}

/****************************************************
 * SECONDARY NAV — constant gap + gradient BEHIND items
 ****************************************************/
.featured-top {
  position: sticky;
  top: calc(var(--header-h) + var(--gap));
  z-index: 1020;                 /* keep bar above page content */
  width: 100%;
  height: var(--sub-h);
  display: flex;
  align-items: center;
  background: none;
  overflow: visible;             /* allow taller logo to leak */
}

/* Inner wrapper: smooth transform (no jerky snap) */
.featured-top__inner {
  position: relative;            /* containing block for ::after */
  z-index: 1;                    /* content sits above gradient */
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 1rem;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transform: translateY(0);
  transition: transform .3s ease;
  will-change: transform;
}
.scrolled .featured-top__inner { transform: translateY(-4px); }

/* Gradient overlay BEHIND menu items (solid → fade) */
.featured-top::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 100%;
  z-index: 0;                    /* behind .featured-top__inner */
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, var(--primary-alpha)) 0%,
    rgba(0, 0, 0, var(--primary-alpha)) var(--sub-solid-pct),
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 1;
  transition: opacity .3s ease, background .3s ease;
}
.scrolled .featured-top::after {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, var(--primary-alpha-scrolled)) 0%,
    rgba(0, 0, 0, var(--primary-alpha-scrolled)) var(--sub-solid-pct),
    rgba(0, 0, 0, 0) 100%
  );
  opacity: .95;
}

/* Subnav block + list — FULL vertical centering */
#block-weloveskam-subnavigation {
  display: flex;
  align-items: center;
  height: 100%;
}
#block-weloveskam-subnavigation ul.nav {
  display: flex;
  align-items: center;           /* center items vertically */
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each li aligns to strip height for consistent centering */
#block-weloveskam-subnavigation ul.nav > li.nav-item {
  display: flex;
  align-items: center;
  height: var(--sub-h);
}

/* Links: no vertical padding; use flex-center for text */
#block-weloveskam-subnavigation a.nav-link {
  color: #ffffff;
  font-size: 1.15em;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 .75rem;             /* horizontal only */
  transition: color .2s ease;
}
#block-weloveskam-subnavigation a.nav-link:hover { color: #efefef; }

/* Book Now button: centered pill inside the strip */
#block-weloveskam-subnavigation .menu-book-now a {
  display: flex;
  align-items: center;
  height: calc(var(--sub-h) - 12px);  /* slightly smaller than strip for nicer pill */
  padding: 0 .9rem;
  border-radius: 18px;
  background: #666;
}

/* Skam Summer logo — taller but centered; allowed to leak */
#block-weloveskam-subnavigation .menu-skam-summer .nav-link {
  display: block;              /* background-image element */
  width: 81px;
  height: var(--logo-h);       /* taller than strip */
  padding: 0;
  background-image: url('/sites/default/files/2025-04/skam_summer_logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;

  align-self: center;          /* centers within the 50px strip */
}

/****************************************************
 * RESPONSIVE
 ****************************************************/
@media (max-width: 768px) {
  #block-weloveskam-subnavigation ul.nav {
    flex-direction: column;
    align-items: flex-start;
  }
  #block-weloveskam-subnavigation ul.nav > li.nav-item {
    height: auto;              /* let items grow naturally on mobile */
  }
  #block-weloveskam-subnavigation a.nav-link {
    height: auto;              /* text no longer forced to strip height */
    padding: .25rem 0;         /* comfortable tap area */
  }
  .featured-top__inner {
    justify-content: flex-start;
    transform: translateY(0);  /* no nudge on mobile */
  }
}

/****************************************************
 * TOGGLER
 ****************************************************/
.navbar-toggler { border-color: rgba(255, 255, 255, 0.3); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}