/* Fornyelse fase 1 (Andreas 08.10, designgjennomgang mot Mobbin):
   meny på mobil, fast bestillingslinje på mobil, trygghet ved bestillingsknappen.
   Ligger i egen fil så index.css forblir lik skissene (regel 9). */

/* ── Meny på mobil ── */
.meny-knapp{display:none;}
.meny-panel{display:none;}
@media(max-width:700px){
  .nav-logo{font-size:1.15rem;white-space:nowrap;}
  .meny-knapp{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:42px;height:38px;padding:0 10px;margin-right:112px;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
    border-radius:40px;cursor:pointer;
  }
  .meny-knapp span{display:block;height:2px;background:var(--star);border-radius:2px;transition:transform .2s,opacity .2s;}
  .meny-knapp[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .meny-knapp[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .meny-knapp[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .meny-panel:not([hidden]){
    display:flex;flex-direction:column;
    position:fixed;top:66px;left:0;right:0;z-index:998;
    background:rgba(13,17,23,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:8px 20px 20px;max-height:calc(100vh - 66px);overflow-y:auto;
  }
  .meny-panel a{
    color:var(--star);text-decoration:none;font-size:1.1rem;
    padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.06);
  }
  .meny-panel a.meny-bestill{
    margin-top:16px;border:none;text-align:center;border-radius:40px;
    background:var(--ember);color:#fff;font-weight:600;
  }
}

/* ── Fast bestillingslinje på mobil ── */
.bestill-linje{display:none;}
@media(max-width:700px){
  .bestill-linje:not([hidden]){
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:990;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background:rgba(13,17,23,.96);backdrop-filter:blur(16px);
    border-top:1px solid rgba(255,255,255,.08);
  }
  .bestill-linje .bl-pris{display:flex;flex-direction:column;line-height:1.2;}
  .bestill-linje .bl-pris b{color:var(--star);font-size:1.05rem;}
  .bestill-linje .bl-pris span{color:var(--mist);font-size:.82rem;}
  .bestill-linje .bl-knapp{
    background:var(--ember);color:#fff;text-decoration:none;font-weight:600;
    padding:12px 20px;border-radius:40px;font-size:.95rem;white-space:nowrap;
  }
  footer{padding-bottom:96px;}
}

/* ── Trygghet ved bestillingsknappen ── */
.trygghet{list-style:none;padding:0;margin:14px 0 4px;display:flex;flex-direction:column;gap:8px;text-align:left;}
.trygghet li{position:relative;padding-left:26px;color:var(--star);font-size:.92rem;line-height:1.45;}
.trygghet li::before{
  content:"";position:absolute;left:4px;top:.35em;width:12px;height:7px;
  border-left:2px solid var(--ember-light);border-bottom:2px solid var(--ember-light);transform:rotate(-45deg);
}
.trygghet a{color:var(--star);text-decoration:underline;text-underline-offset:3px;}

/* ═══ Fase 2 (08.10): bildet først, datoer først, vurdering ═══ */

/* Forsiden: domen under nordlyset. Bildet er liggende; på mobil holdes domen i bildet. */
.hero{
  background:
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.55) 0%, transparent 60%),
    linear-gradient(180deg, rgba(5,8,14,.55) 0%, rgba(5,8,14,.25) 45%, rgba(5,8,14,.75) 100%),
    url("/bilder/galleri/nordlys-og-stjerner-img-0150-f0480a.webp") 38% 70%/cover no-repeat,
    var(--night);
}
.hero .stars{opacity:.55;}
.hero h1,.hero-sub{text-shadow:0 2px 18px rgba(0,0,0,.55);}

/* Vurderingen under hyttekortene */
.vurdering{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  margin:28px auto 0;max-width:640px;padding:12px 20px;border-radius:40px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
  color:var(--star);text-decoration:none;font-size:.95rem;
}
.vurdering[hidden]{display:none;}
.vurdering .v-stjerne{color:var(--ember-light);}
.vurdering .v-pil{color:var(--ember-light);}
.vurdering:hover{border-color:rgba(255,255,255,.25);}

/* Datoer først: velg overnatting eller badstue, så kalenderen */
.modus-valg{display:flex;gap:8px;justify-content:center;margin-bottom:14px;flex-wrap:wrap;}
.modus{
  font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;cursor:pointer;
  padding:9px 18px;border-radius:40px;border:1px solid rgba(255,255,255,.15);
  background:transparent;color:var(--mist);
}
.modus.aktiv{background:var(--ember);border-color:var(--ember);color:#fff;}
.kal-hvem{text-align:center;margin:0 0 12px;}
.kal-hvem a{color:var(--ember-light);}
#ledige-hytter{margin-top:18px;}
.lh-tittel{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-bottom:10px;text-align:left;}
.lh-liste{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lh-kort{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;
  padding:10px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);color:var(--star);font-family:'DM Sans',sans-serif;
}
.lh-kort img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:6px;}
.lh-kort .lh-navn{font-family:'Cormorant Garamond',serif;font-size:1.3rem;}
.lh-kort .lh-status{font-size:.82rem;color:var(--mist);}
.lh-kort.valgt{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember) inset;}
.lh-kort:disabled{opacity:.45;cursor:not-allowed;}
.lh-kort:disabled img{filter:grayscale(1);}
@media(max-width:700px){
  /* Domen står nederst i bildet: teksten og knappene over den, ikke oppå. */
  .hero{align-items:flex-start;padding-top:17vh;background-position:center,center,40% 100%,center;}
  .hero .scroll-hint{display:none;}
}