/* =========================================
   RISTORANTE DEMO — GLOBAL THEME STYLES
   ========================================= */

/* ---------- Design tokens ---------- */
:root{
  --bg:#0b0b0d;
  --panel:#131316;
  --line:#2b2b31;

  --text:#f7f7f8;
  --muted:#b8bec9;

  /* Ny, rik gulltone med bedre hover-kontrast */
  --accent:#e2bf76;   /* base gold */
  --accent-2:#f4e2b6; /* lysere gold for tekst/hover */

  --ok:#36d399;
  --warn:#ffd56b;
  --bad:#ff7a7a;

  --shadow:0 18px 48px rgba(0,0,0,.5);

  /* Radius */
  --r-xs:8px; --r-sm:10px; --r-md:12px; --r-lg:14px; --r-xl:18px;

  /* Spacing scale */
  --space-1:6px; --space-2:10px; --space-3:14px;
  --space-4:18px; --space-5:24px; --space-6:32px;

  /* Layout compaction (used by .compact) */
  --section-y: clamp(28px, 3.5vw, 44px);
  --grid-gap: 14px;
  --card-pad: 18px;
  --elem-gap: 10px;
}

/* ---------- Base reset ---------- */
*{ box-sizing:border-box }
html, body{
  margin:0; padding:0; overflow-x:hidden;
  background:var(--bg); color:var(--text);
  scroll-behavior:smooth;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  image-rendering: auto;
}
img{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none }
a:hover{ text-decoration:none }
.container{ max-width:1200px; margin:0 auto; padding:0 16px }
.container.narrow{ max-width:860px }

.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* Accessible focus */
:where(a,button,input,select,textarea,.btn,.chip).focus-visible,
:where(a,button,input,select,textarea,.btn,.chip):focus-visible{
  outline:3px solid color-mix(in srgb, var(--accent) 70%, #fff 30%);
  outline-offset:2px; border-radius:8px;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
}

/* ---------- Typography ---------- */
.h1, h1{ font-family:"Fraunces", serif; font-weight:700; letter-spacing:.2px; line-height:1.08; font-size: clamp(28px, 4vw, 48px); margin:0 0 var(--space-2) }
.h2, h2{ font-family:"Fraunces", serif; font-weight:700; letter-spacing:.2px; line-height:1.1;  font-size: clamp(24px, 3vw, 36px); margin:0 0 var(--space-2) }
.h3, h3{ font-weight:700; line-height:1.15; font-size: clamp(18px, 2.2vw, 24px); margin:0 0 var(--space-2) }
.eyebrow{ color:#e7e7eb; opacity:.85; letter-spacing:.18em; text-transform:uppercase; font-size:.9rem; margin:0 0 6px }
.lead{ color:#e7e7eb; opacity:.9; font-size: clamp(16px, 1.8vw, 18px) }
.muted{ color:var(--muted) }

/* ---------- Buttons ---------- */
.btn, .btn-custom, .hero-btn, .se-meny-btn, .cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; letter-spacing:.2px; cursor:pointer;
  padding:.8rem 1.15rem; border-radius:var(--r-md); border:1px solid transparent;
  transition: transform .15s ease, box-shadow .25s ease, background .2s ease, border-color .2s ease, color .2s ease;
  text-align:center;
}
.btn-gold, .hero-btn, .se-meny-btn, .btn-custom{
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 85%, #000 15%));
  color:#111;
  border:1px solid color-mix(in srgb, var(--accent) 70%, #000 30%);
  box-shadow: 0 10px 18px rgba(226,191,118,.24);
}
.btn-gold:hover, .hero-btn:hover, .se-meny-btn:hover, .btn-custom:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff 8%), color-mix(in srgb, var(--accent) 78%, #000 22%));
  border-color: color-mix(in srgb, var(--accent) 80%, #000 20%);
  box-shadow: 0 14px 26px rgba(226,191,118,.32);
}

.btn-ghost, .cta-btn{ background: transparent; border-color: rgba(255,255,255,.16); color:var(--accent-2) }
.btn-ghost:hover, .cta-btn:hover{ background: rgba(255,255,255,.05); border-color: var(--accent) }
.btn:disabled, .btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:none }

/* ---------- Chips / Pills ---------- */
.chipbar{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.chip{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.16);
  color:#f0f0f4; padding:.5rem .85rem; border-radius:999px; font-weight:700; letter-spacing:.2px; cursor:pointer;
  transition: transform .18s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.chip:hover{ transform:translateY(-1px); border-color:var(--accent) }
.chip.is-active{
  background:linear-gradient(180deg, var(--accent), #e7cc9c); color:#111; border-color:var(--accent);
  box-shadow:0 6px 16px rgba(212,180,131,.28);
}
.pill{
  display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .7rem; border-radius:999px;
  font-weight:700; letter-spacing:.2px; color:#111; background:linear-gradient(180deg, var(--accent), #e7cc9c);
  border:1px solid var(--accent);
}

/* ---------- Cards / Panels ---------- */
.card, .info-card, .contact-card, .selskaper-card, .newsletter-box{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r-xl);
  padding: var(--space-5);
  color:var(--text);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .25s ease;
}
.card:hover, .info-card:hover, .contact-card:hover, .newsletter-box:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0,0,0,.45);
}

/* ---------- Forms ---------- */
.form-control, .form-select, .selskapers-input{
  background:#0f0f14; border:1px solid var(--accent); color:#fff;
  border-radius: var(--r-md); padding:.7rem .9rem; font-size:1rem;
}
.form-control::placeholder, .selskapers-input::placeholder{ color: color-mix(in srgb, var(--muted) 80%, #fff 20%) }
.form-control:focus, .form-select:focus, .selskapers-input:focus{
  outline:none; box-shadow:0 0 0 3px rgba(212,180,131,.28);
}
textarea.form-control{ resize:vertical; min-height:110px }
.form-control:disabled, .form-select:disabled{ opacity:.6; cursor:not-allowed }

/* Choices.js */
/* Choices.js — base (ingen piler her, de tegnes side-spesifikt) */
.choices{ margin-bottom:1rem }

/* Visuelt mørkt tema i tråd med inputs */
.choices__inner{
  background:#0f0f14 !important;
  border:1px solid var(--accent) !important;
  color:#fff !important;
  border-radius: var(--r-md) !important;
  min-height:48px;
  padding:.55rem .75rem !important;
}

/* Dropdown-panelet */
.choices__list--dropdown,
.choices__list[aria-expanded]{
  background:#1a1a1a !important;
  border:1px solid var(--accent) !important;
  border-radius: var(--r-md) !important;
  color:#fff !important;
}

/* Hover/markert item */
.choices__list--dropdown .choices__item--selectable.is-highlighted{
  background: var(--accent) !important;
  color:#111 !important;
}

/* ===== ENSARTET TYPOGRAFI & PLACEHOLDERS ===== */
.choices__list--single .choices__item{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 600;
  color:#fff !important;
}

.choices__placeholder{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  color: color-mix(in srgb, var(--muted) 80%, #fff 20%) !important;
  opacity:.95 !important;
}

/* ===== VIKTIG: slå AV Choices sin innebygde pil globalt ===== */
.choices[data-type*="select-one"]::after,
.choices[data-type*="select-one"]::before{
  display:none !important;
  content:none !important;
}

/* (FJERNET) .choices__inner::after piler — disse settes side-spesifikt */


/* =========================================
   HERO
   ========================================= */

/* Legacy hero (bakgrunnsbilde via CSS) */
/* Viktig: relativ fra style.css -> /static/img/... */
.hero{
  position:relative; width:100%; min-height: 100vh;
  background: url("./static/img/HjemRestaurant.jpg") center/cover no-repeat;
  display:grid; place-items:center;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1000px 500px at 20% -10%, rgba(212,180,131,.12), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.65));
}
.hero--with-media{ background:none; padding: clamp(28px, 5vw, 48px) 0; min-height:auto }
.hero--with-media .hero-grid{
  display:grid; gap: clamp(16px, 3vw, 28px);
  grid-template-columns: 1.05fr .95fr; align-items:center;
}
.hero--with-media .hero-left{ padding: 8px 0 }
.hero--with-media .hero-right{ position:relative }
.hero--with-media .hero-media{
  border-radius: var(--r-xl); border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow); width:100%; height:auto; object-fit:cover;
}

.hero-title{ font-family:"Fraunces", serif; font-weight:700; font-size: clamp(32px, 6vw, 64px); color: var(--accent); margin:0 0 var(--space-2) }
.hero-subtitle{ font-family:"Fraunces", serif; font-style:italic; font-size: clamp(16px, 2.2vw, 22px); color: #f0e9db; opacity:.95 }
.hero-buttons{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top: var(--space-4) }
.hero-buttons .btn{ min-width: 160px; }

@media (max-width: 860px){
  .hero--with-media .hero-grid{ grid-template-columns:1fr }
}
/* HERO click-through + stacking fix */
.hero::before{ pointer-events: none; z-index: 0 }
.hero > *{ position: relative; z-index: 1 }

/* Sørg for full viewport-høyde uten “svart stripe” */
.hero{ min-height: 100svh }

/* Scroll chevron */
.scroll-down{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%) }
.scroll-down span{
  width:30px; height:30px; display:block; border-bottom:3px solid #fff; border-right:3px solid #fff; transform:rotate(45deg);
  animation: scroll-bounce 2s infinite;
}
@keyframes scroll-bounce{
  0%,20%,50%,80%,100%{ transform: translateX(-50%) rotate(45deg) translateY(0) }
  40%{ transform: translateX(-50%) rotate(45deg) translateY(10px) }
  60%{ transform: translateX(-50%) rotate(45deg) translateY(5px) }
}

/* ---------- Sections ---------- */
.section{ padding: clamp(28px, 4vw, 52px) 0 }
.section .section-title{ margin-bottom: var(--space-4) }

/* Feature 3-up */
.feature-grid{
  display:grid; gap:16px; margin-top:14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* Gallery */
.gallery-grid{
  display:grid; gap:14px; align-items:center;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.rounded{ border-radius: var(--r-xl) }
.shadow{ box-shadow: var(--shadow) }

/* CTA */
.cta-section{ padding: clamp(36px, 5vw, 56px) 0; text-align:center }
.cta-section .cta-btn{ margin-top:12px; padding:.85rem 1.35rem; font-weight:800 }

/* ---------- Info + Kontakt ---------- */
.info-grid{
  display:grid; gap:18px; align-items:start;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.opening-hours li{ display:flex; justify-content:space-between; gap:10px; margin: 6px 0 }
.opening-hours li[data-now="1"]{ color:var(--accent-2) }
.contact-card input.form-control,
.contact-card textarea.form-control{ background:#111; border:1px solid var(--accent) }

/* Sticky CTA (mobile) */
.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index: 1100;
  display:flex; gap:10px; justify-content:center; padding:10px 14px;
  background: linear-gradient(180deg, rgba(18,18,20,.35), rgba(18,18,20,.88));
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter: saturate(130%) blur(8px);
}
@media (min-width: 860px){ .sticky-cta{ display:none !important } }

/* ---------- Menu grid ---------- */
.menu-section{ padding: clamp(32px, 5vw, 64px) 0 }
.menu-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:.65rem }
.filter-btn{
  padding:.55rem 1rem; border-radius:999px; font-weight:700; cursor:pointer; border:1px solid var(--accent);
  background: linear-gradient(180deg, var(--accent), #e7cc9c); color:#111;
  transition: transform .15s ease, box-shadow .25s ease;
}
.filter-btn:hover{ transform:translateY(-1px); box-shadow:0 12px 22px rgba(212,180,131,.25) }
.filter-btn.active{ box-shadow:0 12px 22px rgba(212,180,131,.35) }

.menu-grid{
  display:grid; gap: 22px; margin-top: 22px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.menu-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.10); border-radius: var(--r-lg);
  padding:18px; text-align:center; display:flex; flex-direction:column; gap:10px;
  transition: transform .2s ease, box-shadow .25s ease;
}
.menu-card:hover{ transform:translateY(-3px); box-shadow:0 14px 26px rgba(0,0,0,.45) }
.menu-img{ width:100%; height:180px; object-fit:cover; border-radius: var(--r-md) }
.menu-card h3{ font-size:1.25rem; margin:0 }
.menu-card p{ color: var(--accent); margin:0 }
.menu-card .price, .price{ display:block; font-weight:700; color: var(--accent); margin-top:.4rem }
.icon-vegetarian{ color:#4CAF50 } .icon-spicy{ color:#FF4500 } .icon-fish{ color:#00BFFF }

/* ---------- Selskaper ---------- */
.selskaper-card{
  background: var(--panel);
  border:1px solid var(--accent);
  border-radius: var(--r-xl);
  padding: clamp(18px, 2.5vw, 32px);
}
.selskaper-card input.form-control,
.selskaper-card select.form-select,
.selskaper-card textarea.form-control{
  background:#111; border:1px solid var(--accent); color:#fff; border-radius: var(--r-md); margin-bottom:1rem;
}
.selskaper-card .btn, .selskaper-card button[type="submit"], .selskaper-card .btn.btn-custom{
  width:100%; background: linear-gradient(180deg, var(--accent), #e7cc9c); color:#111; border:1px solid var(--accent);
  font-weight:800;
}
.selskaper-textarea{ background:#111; color:#fff; border:1px solid var(--accent) }
.selskaper-textarea:focus{ background:#111 !important; color:#fff !important; border-color:var(--accent) !important; box-shadow:none !important }

.selskaper-card input[type="date"],
.selskaper-card input[type="time"],
.selskapers-input.date{
  background:#111; border:1px solid var(--accent); color:#fff; appearance:none; padding-right:2rem;
}
.selskapers-input.date.filled{ color:#fff }

/* ---------- Newsletter / popup ---------- */
.booking-popup{
  position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:2000;
}
.booking-popup.show{ opacity:1; pointer-events:auto }
.booking-popup-content{
  position:fixed; top:50%; left:50%; transform:translate(-50%, -50%) translateY(-12px);
  background:#1a1a1a; color:#fff; padding:2rem; border-radius: var(--r-lg); max-width:420px; width:92%;
  border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 48px rgba(0,0,0,.55); opacity:0; transition:all .35s ease; text-align:center;
}
.booking-popup.show .booking-popup-content{ transform:translate(-50%, -50%) translateY(0); opacity:1 }
.booking-popup-close{ position:absolute; top:.6rem; right:.8rem; font-size:1.5rem; cursor:pointer; color:#fff; background:transparent; border:0 }

/* ---------- Utilities ---------- */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  backdrop-filter: saturate(120%) blur(8px);
}
.cluster{ display:flex; gap:10px; align-items:center }
.round{ border-radius:999px }

.aspect-16x9{ aspect-ratio: 16 / 9 }
.aspect-4x3{ aspect-ratio: 4 / 3 }
.img-cover{ width:100%; height:100%; object-fit:cover; }

/* ---------- Fade system (samspiller med main.js) ---------- */
.fade-in{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; will-change: opacity, transform }
.fade-in-visible{ opacity:1; transform:translateY(0) }

.fade-in-top{ opacity:0; transform:translateY(-18px); transition:opacity .8s ease, transform .8s ease; will-change: opacity, transform }
.fade-in-top.fade-in-visible{ opacity:1; transform:translateY(0) }

.fade-in-subtext{ opacity:0; transform:translateY(18px); transition:opacity .8s ease .2s, transform .8s ease .2s; will-change: opacity, transform }
.fade-in-subtext.fade-in-visible{ opacity:1; transform:translateY(0) }

/* Hero-variant (JS legger til .in) */
.fade-in-hero{ opacity:0; transform: translateY(14px); filter:saturate(.92);
  transition: opacity .55s ease, transform .55s ease, filter .55s ease; will-change: opacity, transform, filter }
.fade-in-hero.in{ opacity:1; transform:none; filter:none }

/* Sideveis fades */
.fade-in-left{ opacity:0; transform:translateX(-18px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); will-change: opacity, transform }
.fade-in-right{ opacity:0; transform:translateX(18px);  transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1);  will-change: opacity, transform }
.fade-in-left.fade-in-visible,
.fade-in-right.fade-in-visible{ opacity:1; transform:none }

/* Stagger-delays (HTML: .delay-1/2/3/4) */
.delay-1{ transition-delay:.12s }
.delay-2{ transition-delay:.24s }
.delay-3{ transition-delay:.36s }
.delay-4{ transition-delay:.48s }

/* Badge brukt i videoene */
.ai-badge{
  position:absolute; right:12px; bottom:12px;
  background:rgba(0,0,0,.75); color:#fff;
  padding:.35rem .6rem; border-radius:.4rem; font-weight:700; font-size:.85rem;
  border:1px solid rgba(255,255,255,.2); backdrop-filter:saturate(120%) blur(2px);
}

.site-footer a{ color: var(--accent-2) }
.site-footer a:hover{ text-decoration: underline }

@media (max-width: 992px){
  .section{ padding: 42px 0 }
}

/* ====== Background helpers (RELATIVE paths) ====== */
.section-img--bord{ background: url("./static/img/BordRestaurant.jpg") center/cover no-repeat }
.section-img--pizza{ background: url("./img/Pizza.jpg") center/cover no-repeat }

/* ---- FIX: media-hero skal vise innhold, ikke overlay ---- */
.hero--with-media::before{ display:none !important; }

/* ---- FIX: ikke gjem hero-innhold med fade-in ---- */
.hero--with-media .fade-in{ opacity:1 !important; transform:none !important }

/* Ekstra trygghet: sørg for at bildet faktisk er synlig og fint */
.hero--with-media .hero-right .hero-media{
  display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 18px 48px rgba(0,0,0,.45);
}

/* ============================
   COMPACT LAYOUT — DROP-IN
   ============================ */
.compact .section{ padding: var(--section-y) 0 }
.compact .container.narrow{ max-width: 780px }

.compact .h1, .compact h1{ margin-bottom: 8px }
.compact .h2, .compact h2{ margin-bottom: 8px }
.compact .h3, .compact h3{ margin-bottom: 6px }
.compact .lead{ line-height: 1.45 }

.compact .hero--with-media .hero-grid{ gap: 18px }
.compact .hero-title{ margin-bottom: 6px }
.compact .hero-subtitle{ margin-top: 2px }
.compact .trust-row{ margin: 6px 0 0 }
.compact .hero-booking{ gap: 8px; margin-top: 10px; padding: 10px; border-radius: 14px }
@media (max-width: 860px){
  .compact .hero-booking{ grid-template-columns: 1fr 1fr; }
}

.compact .chipbar{ gap: 8px; margin-top: 8px!important }
.compact .chip{ padding: .42rem .7rem }

.compact .card,
.compact .info-card,
.compact .contact-card,
.compact .selskaper-card,
.compact .newsletter-box{
  padding: var(--card-pad); border-radius: 14px;
}
.compact .contact-card .form-control,
.compact .contact-card .form-label{ margin-bottom: 8px }

.compact .feature-grid{ gap: var(--grid-gap); margin-top: 8px }
.compact .gallery-grid{ gap: var(--grid-gap) }
.compact .info-grid{ gap: var(--grid-gap) }

.compact .menu-grid{ gap: 16px; margin-top: 14px }
.compact .menu-card{ padding: 14px; gap: 8px; border-radius: 12px }
.compact .menu-img{ height: 160px; border-radius: 10px }
.compact .menu-card h3{ font-size: 1.15rem }

.compact .opening-hours li{ margin: 4px 0 }
.compact .cta-section{ padding: clamp(24px, 3.5vw, 40px) 0 }
.compact .cta-section .cta-btn{ margin-top: 8px }
.compact .sticky-cta{ padding: 8px 12px; gap: 8px }

/* ---------- Print ---------- */
@media print{
  *{ box-shadow:none!important; text-shadow:none!important }
  a[href]:after{ content:"" }
  .site-header, .site-footer, .sticky-cta, .scroll-down{ display:none !important }
  .card, .info-card, .contact-card{ border-color:#000 }
}

/* Subtil, rask fade util (valgfritt) */
.fade-soft {
  opacity: 0;
  transform: translateY(8px) scale(.995);
  filter: saturate(.9);
  transition:
    opacity .22s ease-out,
    transform .22s cubic-bezier(.2,.8,.2,1),
    filter .22s ease-out;
  will-change: opacity, transform, filter;
}
.fade-soft.in { opacity: 1; transform: none; filter: none }

/* Reduced motion: slå av animasjon men vis alt */
@media (prefers-reduced-motion: reduce){
  .fade-in,.fade-in-top,.fade-in-subtext,.fade-in-left,.fade-in-right,.fade-in-hero,.fade-soft{
    transition:none !important; opacity:1 !important; transform:none !important; filter:none !important;
  }
  .delay-1,.delay-2,.delay-3,.delay-4{ transition-delay:0s !important }
}