/* ===== HBC sticky navbar + mobile drawer (right slide-in) ===== */

/* Form controls don't inherit font-family by default — force Outfit site-wide */
button, input, select, textarea{
  font-family: "Outfit", "Helvetica Neue", Helvetica, system-ui, sans-serif;
}

/* Always-sticky navbar — overrides per-page `.nav { position: absolute }` */
.nav{
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 9999 !important;
  transition: background .25s ease, color .25s ease, padding .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.nav.is-scrolled{
  background: rgba(245, 240, 232, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink, #1f1e1c);
  box-shadow: 0 1px 0 rgba(31,30,28,0.06), 0 6px 24px rgba(31,30,28,0.06);
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.nav.is-scrolled .nav__brand img{ height: 52px; transition: height .25s ease; }
.nav.is-scrolled .nav__links a{ color: var(--ink, #1f1e1c); }
.nav.is-scrolled .nav__cta{
  background: var(--ink, #1f1e1c);
  color: var(--cream, #efe9e1);
  border-color: var(--ink, #1f1e1c);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 14px rgba(0,0,0,0.18);
}
.nav.is-scrolled .nav__cta:hover{ background: #000; }
.nav.is-scrolled .nav__menu-btn{ color: var(--ink, #1f1e1c); }

/* ---------- Hamburger: minimal, refined ---------- */
.nav__menu-btn{
  display: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--cream, #efe9e1);
  width: 48px; height: 48px;
  border-radius: 8px;
  place-items: center;
  cursor: pointer;
  justify-self: end;
  transition: opacity .2s ease, color .25s ease;
}
.nav__menu-btn:hover{ opacity: 0.65; }
.nav__menu-btn svg{ display: block; }
/* Refine the stock 3-line icon into two thin lines (supported browsers) */
.nav__menu-btn svg path{
  stroke-width: 1.5;
  d: path("M3.5 8.5h17M3.5 15.5h17");
}

/* ---------- Backdrop overlay ---------- */
.nav__drawer-overlay{
  display: none;
  position: fixed; inset: 0;
  background: rgba(20,18,16,0.44);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 999998 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.nav__drawer-overlay.is-open{ opacity: 1; pointer-events: auto; }

/* ---------- Right slide-in drawer ----------
   `html body` prefix out-ranks the per-page top-drawer !important
   overrides that force top:0/left:0/width:100%/height:50vh.       */
html body .nav__drawer{
  display: none;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(340px, 88vw) !important;
  height: 100% !important;
  height: 100dvh !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  background: #F5F0E8;
  color: var(--ink, #1f1e1c);
  z-index: 2147483647 !important;
  padding: 14px 28px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  flex-direction: column;
  box-shadow: -18px 0 56px rgba(20,18,16,0.24);
  transform: translateX(103%) !important;
  transition: transform .48s cubic-bezier(.32,.72,.28,1) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
html body .nav__drawer.is-open{ transform: translateX(0) !important; }

/* Head row: clean X, top-right */
.nav__drawer-head{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 4px 0 6px;
  margin: 0;
  border-bottom: 0;
  flex: 0 0 auto;
}
html body .nav__drawer-close{
  appearance: none;
  background: transparent;
  border: 0;
  width: 48px; height: 48px;
  border-radius: 8px;
  color: var(--ink, #1f1e1c);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s ease, opacity .2s ease;
}
html body .nav__drawer-close:hover{ background: rgba(31,30,28,0.06); }
.nav__drawer-close svg{ display: block; }
.nav__drawer-close svg path{ stroke-width: 1.5; }

/* Nav links: left-aligned, generously spaced */
html body .nav__drawer ul{
  list-style: none;
  margin: 0;
  padding: 16px 2px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1 1 auto;
  text-align: left;
}
html body .nav__drawer li{ margin: 0; }
html body .nav__drawer li a{
  color: var(--ink, #1f1e1c);
  text-decoration: none;
  font-family: "Outfit", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  font-weight: 500;
  font-size: 25px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  padding: 12px 2px;
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.nav__drawer li a .arrow{ display: none; }
.nav__drawer li a[aria-current="page"]{ opacity: 0.38; }
.nav__drawer li a:hover{ opacity: 0.55; }

/* Staggered fade-in of links + actions when the drawer opens */
@media (prefers-reduced-motion: no-preference){
  .nav__drawer li,
  .nav__drawer-actions{
    opacity: 0;
    transform: translateX(18px);
    transition: opacity .3s ease, transform .45s cubic-bezier(.22,.7,.3,1);
  }
  .nav__drawer.is-open li,
  .nav__drawer.is-open .nav__drawer-actions{
    opacity: 1;
    transform: none;
  }
  .nav__drawer.is-open li:nth-child(1){ transition-delay: .10s; }
  .nav__drawer.is-open li:nth-child(2){ transition-delay: .15s; }
  .nav__drawer.is-open li:nth-child(3){ transition-delay: .20s; }
  .nav__drawer.is-open li:nth-child(4){ transition-delay: .25s; }
  .nav__drawer.is-open li:nth-child(5){ transition-delay: .30s; }
  .nav__drawer.is-open li:nth-child(6){ transition-delay: .35s; }
  .nav__drawer.is-open li:nth-child(7){ transition-delay: .40s; }
  .nav__drawer.is-open .nav__drawer-actions{ transition-delay: .42s; }
}

/* Actions pinned to the bottom: Priser (ghost) above, Boka tid (filled) last */
html body .nav__drawer-actions{
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin: auto 0 0;
  padding-top: 20px;
  flex: 0 0 auto;
}
html body .nav__drawer-cta{
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 52px;
  padding: 15px 22px 16px;
  border-radius: 10px;
  background: var(--ink, #1f1e1c);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  box-shadow: 0 8px 24px rgba(31,30,28,0.18);
  flex: 0 0 auto;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
html body .nav__drawer-cta:hover{ background: #000; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(31,30,28,0.26); }
.nav__drawer-cta .arrow{ display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.nav__drawer-cta:hover .arrow{ transform: translateX(3px); }
html body .nav__drawer-cta--ghost{
  background: transparent;
  color: var(--ink, #1f1e1c);
  border: 1px solid rgba(31,30,28,0.35);
  box-shadow: none;
}
html body .nav__drawer-cta--ghost:hover{
  background: var(--ink, #1f1e1c);
  color: #ffffff;
  border-color: var(--ink, #1f1e1c);
  box-shadow: none;
}

body.is-drawer-open{ overflow: hidden; }

@media (max-width: 1024px){
  .nav__menu-btn{ display: grid; }
  .nav__cta{ display: none !important; }
  /* Collapse the inline nav so the grid only has brand + hamburger */
  .nav > nav[aria-label]{ display: none; }
  .nav__drawer-overlay{ display: block; }
  html body .nav__drawer{ display: flex; }
}

/* ===== Universal mobile patches ===== */
@media (max-width: 768px){
  /* Stack hero CTAs vertically, full-width buttons */
  .ctas{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }
  .ctas .btn{
    justify-content: center;
    width: 100%;
    padding: 15px 22px 16px;
  }
  /* Tighter brand image in nav on small screens */
  .nav__brand img{ height: 52px !important; }
  /* Footer bottom row size floor */
  .ft-bottom{ font-size: 12px !important; }
}

/* Smaller phones */
@media (max-width: 400px){
  .nav{ padding: 16px 18px !important; }
  .nav__brand img{ height: 46px !important; }
  .nav__menu-btn{ width: 44px; height: 44px; }
}

/* ===== Prominent navbar links (site-wide) =====
   Higher specificity (.nav .nav__links a) intentionally beats the
   per-page __nav-fixed-overrides !important rules. */
.nav .nav__links{
  gap: 48px !important;
}
.nav .nav__links a{
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  opacity: 0.82 !important;
  padding: 6px 1px 10px !important;
  position: relative !important;
  transition: opacity .2s ease;
}
.nav .nav__links a:hover,
.nav .nav__links a[aria-current="page"]{
  opacity: 1 !important;
}
/* Gold underline — animates in from the left on hover */
.nav .nav__links a::after{
  content: "" !important;
  position: absolute !important;
  left: 1px !important;
  right: 1px !important;
  bottom: 3px !important;
  height: 2px !important;
  background: #C8A97E !important;
  transform: scaleX(0);
  transform-origin: left center !important;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav .nav__links a:hover::after,
.nav .nav__links a[aria-current="page"]::after{
  transform: scaleX(1);
}