/* Next Door Saloon — delat designsystem
   Källa: brand kit + tokens (Claude Design, "Next Door Saloon")
   OBS: --font-script pekar på "Mrs Saint Delafield" som gratis platshållare
   för "Brittany Signature" (betalt typsnitt, inte på Google Fonts) — se
   planeringsdokumentets öppna frågor. */

:root {
  /* Brandfärger */
  --brown: #1A1008;
  --teal: #346663;
  --black: #000000;
  --cream: #FFFFE8;
  --sand: #D3A87F;

  /* Semantiska ytor */
  --surface-mid-dark: #110B04;
  --ink-subtle-dark: #7A4F2E;
  --border-soft: rgba(211, 168, 127, 0.25);
  --border-soft-light: #D3A87F;

  /* Typsnitt */
  --font-display: 'Sancreek', serif;
  --font-ui: 'Bebas Neue', sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-script: 'Mrs Saint Delafield', cursive;

  /* Radier */
  --radius-pill: 9999px;
  --radius-lg: 16px;
  --radius-md: 8px;
  --radius-sm: 4px;

  /* Spacing */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  /* Sidmarginal: minst 48px, men på breda skärmar växer den så att innehållet
     centreras i en kolumn på max 1280px (bakgrunder går fortfarande kant i kant). */
  --gutter: max(var(--space-8), calc((100vw - 1280px) / 2));
  --space-10: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--brown);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

@media (max-width: 720px) {
  .container { padding-left: var(--space-5); padding-right: var(--space-5); }
}

/* ---------- Knappar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 16px;
  letter-spacing: 0.08em;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--teal); color: var(--cream); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--sand); color: var(--cream); }
.btn-outline { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--sand); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--sand); color: var(--brown); }
.btn-secondary { background: var(--cream); color: var(--teal); border: 1px solid var(--sand); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--sand); color: var(--brown); }
.btn-outline-dark {
  background: transparent; color: var(--sand); border: 1px solid var(--sand);
  font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.08em;
  padding: 8px 18px; border-radius: var(--radius-pill);
}
.btn-outline-dark:hover { background: var(--sand); color: var(--brown); }
.btn-sm { padding: 10px 22px; font-size: 14px; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--brown);
  border-bottom: 1px solid var(--border-soft);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 14px var(--space-8);
  gap: 24px;
}
/* Desktop: nav-links tappar sin egen box så dess länkar + loggan blandas
   i SAMMA rad i huvudmenyn (ordningen styrs av `order` nedan). */
.nav-links {
  display: contents;
  font-family: var(--font-ui); font-size: 14px; letter-spacing: 0.08em;
}
.nav-links a { color: var(--cream); }
.nav-links a:hover, .nav-links a.active { color: var(--sand); }
.nav-links a:nth-child(1) { order: 1; }
.nav-links a:nth-child(2) { order: 2; }
.nav-links a:nth-child(3) { order: 3; }
.nav-links a:nth-child(4) { order: 4; }
.nav-links a:nth-child(5) { order: 6; }
.nav-links a:nth-child(6) { order: 7; }
.nav-links a:nth-child(7) { order: 8; }
.nav-links a:nth-child(8) { order: 9; }
.nav-logo {
  order: 5;
  margin: 0 32px; /* extra andrum runt loggan jämfört med ovriga länkar */
  white-space: nowrap;
}
.nav-logo-img {
  height: 64px; width: 64px;
  border-radius: 50%;
  object-fit: cover; object-position: center;
  border: 2px solid var(--sand);
  display: block;
}
.nav-shop-link {
  color: var(--sand) !important;
  border: 1px solid var(--sand);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
}
.nav-shop-link:hover { background: var(--sand); color: var(--brown) !important; }
.nav-toggle {
  order: 10;
  display: none;
  background: none; border: 0;
  width: 48px; height: 48px; padding: 0; cursor: pointer;
  color: var(--cream);
  align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-bars { position: relative; display: block; width: 28px; height: 20px; }
.nav-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px;
  background: currentColor;
  transition: transform .3s ease, opacity .2s ease, top .3s ease;
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 8.75px; }
.nav-toggle-bars span:nth-child(3) { top: 17.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 8.75px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { top: 8.75px; transform: rotate(-45deg); }
.nav-toggle:hover, .nav-toggle:focus-visible { color: var(--sand); }

@media (max-width: 1020px) {
  .nav-bar { justify-content: space-between; padding: 14px var(--space-5); }
  .nav-logo { order: 1; margin: 0; }
  .nav-toggle { display: inline-flex; order: 2; margin-right: -10px; }
  .nav-links {
    display: none;
    order: 10;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 8px;
    font-size: 16px;
  }
  .nav-links a { padding: 14px 4px; border-top: 1px solid var(--border-soft); }
  .nav-links a.nav-shop-link { margin-top: 12px; text-align: center; padding: 12px 16px; }
  .nav-links.is-open { display: flex; }
  .nav-links a:nth-child(n) { order: initial; }
}

/* ---------- Hero / poster-stil (riktning C) ---------- */
.ribbon-bar {
  background: var(--teal);
  padding: 8px var(--space-8);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--cream);
}

.hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 40px;
  align-items: center;
  /* Heron + butiksbanderollen ska precis rymma så att rubriken "En bit av Texas,
     mitt i Kungsbacka" syns längst ner i första skärmbilden (header + ribbon ≈ 128px,
     banderoll + sektionens överkant ≈ 245px). */
  min-height: max(440px, calc(100vh - 375px));
  padding: 80px var(--gutter);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn-sand { background: var(--sand); color: var(--brown); }
.btn-sand:hover, .btn-sand:focus-visible { background: var(--teal); color: var(--cream); }
.btn-shop { background: var(--brown); color: var(--cream); }
.btn-shop:hover, .btn-shop:focus-visible { background: var(--teal); color: var(--cream); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; padding: 64px var(--space-5); }
}

.hero-title-wrap { position: relative; display: inline-block; }
.hero-title {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 92px);
  line-height: 0.95;
  margin: 0;
  color: var(--cream);
}

/* ---------- Eventbiljetter i heron ---------- */
.event-stack {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
@media (min-width: 901px) {
  .event-stack { align-items: flex-end; }
}
.event-card {
  --card-rot: 0deg;
  display: flex; align-items: stretch;
  width: min(100%, 380px); height: 84px;
  background: #efe0c2; color: #2a180c;
  border-radius: 5px;
  cursor: pointer;
  transform: rotate(var(--card-rot));
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.5));
  /* halvcirkelformade hack i kanterna, som en riktig biljett */
  -webkit-mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000), radial-gradient(circle 9px at 100% 50%, #0000 98%, #000);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 9px at 0 50%, #0000 98%, #000), radial-gradient(circle 9px at 100% 50%, #0000 98%, #000);
  mask-composite: intersect;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.event-card:hover, .event-card:focus-visible {
  transform: rotate(var(--card-rot)) scale(1.05);
  filter: drop-shadow(0 12px 16px rgba(0,0,0,0.55));
}
.event-card .stub {
  flex: 0 0 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #a8512f; color: #fff4dc;
  border-right: 3px dotted rgba(42,24,12,0.55);
}
.event-card .stub .d { font-family: var(--font-display); font-size: 23px; line-height: 1; }
.event-card .stub .m { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.1em; margin-top: 4px; white-space: nowrap; }
.event-card .body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0 8px 0 14px; min-width: 0; }
.event-card .eyebrow { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.14em; color: #8a4a2c; margin: 0; }
.event-card .title { font-family: var(--font-display); font-size: 17.5px; line-height: 1.1; margin: 2px 0 0; }
.event-card .go { align-self: center; padding-right: 18px; font-size: 20px; color: #a8512f; }
.event-card.rot-l { --card-rot: -1.5deg; }
.event-card.rot-r { --card-rot: 1deg; }
.event-card.rot-l2 { --card-rot: -0.5deg; }

/* ---------- Ribbon-sektion: butik <-> saloon ---------- */
.shop-ribbon {
  position: relative;
  background: #9e6d43; /* sandton hämtad från fotot med cowboyavtryck i jorden, nu som ren platt färg */
  color: var(--brown);
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  clip-path: polygon(0 0, 100% 0, 96% 100%, 0% 100%);
}
.shop-ribbon h2 { font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 26px); max-width: 640px; margin: 0; }
@media (max-width: 720px) { .shop-ribbon { clip-path: none; } }

.boot-trail { display: flex; align-items: center; gap: 20px; margin-left: auto; margin-right: 28px; }
.boot-print-icon { width: 26px; height: 26px; object-fit: cover; border-radius: 6px; opacity: 0.8; }
@media (max-width: 760px) { .boot-trail { display: none; } }

/* ---------- Generiska sektioner ---------- */
.section { padding: var(--space-10) var(--gutter); }
.section-dark { background: var(--surface-mid-dark); }
.section-light { background: var(--cream); color: var(--brown); }

/* ---------- Träbakgrund som löper genom hela sidan (startsidan) ---------- */
/* Fast träbakgrund som eget lager i stället för background-attachment: fixed,
   som tvingar webbläsaren att måla om hela bakgrunden vid varje scroll. */
.wood-bg { position: relative; isolation: isolate; }
.wood-bg::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(17,11,4,0.55), rgba(17,11,4,0.68)), url('../images/wood-texture.webp') center / cover no-repeat;
}
.wood-bg .section { background: rgba(17,11,4,0.42); }
.eyebrow {
  font-family: var(--font-ui); font-size: clamp(19px, 2.2vw, 22px); letter-spacing: 0.12em; color: var(--sand);
  margin-bottom: 12px;
}
.card .eyebrow { font-size: 15px; }
.signature { font-family: var(--font-script); font-size: clamp(44px, 6vw, 60px); line-height: 1; color: var(--sand); margin: 8px 0 0; }
.section-light .eyebrow { color: var(--teal); }
h2.section-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); margin: 0 0 16px; }

.card-grid { display: flex; gap: 32px; flex-wrap: wrap; }
.card {
  display: block;
  flex: 1 1 280px; min-width: 240px;
  border: 1px solid var(--sand); border-radius: var(--radius-lg);
  padding: 28px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: scale(1.03) translateY(-4px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.45);
}
.card .dot { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 16px; }
.card .card-photo {
  width: calc(100% + 56px); max-width: none; margin: -28px -28px 16px;
  height: 160px; object-fit: cover; display: block;
}
.offer-grid { justify-content: center; }
.offer-grid.events-grid { justify-content: flex-start; }
.offer-grid .card-photo.photo-contain { object-fit: contain; background: #0c0703; }
.offer-grid .card { max-width: 410px; }
.offer-grid .card-photo {
  aspect-ratio: 1 / 1; height: auto;
}

/* ---------- Text + foto, sida vid sida ---------- */
.split-photo {
  display: flex; gap: 40px; align-items: center; flex-wrap: wrap;
}
.split-photo > .split-text { flex: 1 1 420px; min-width: 300px; }
.split-photo > img {
  flex: 1 1 360px; min-width: 280px; max-width: 480px;
  border-radius: var(--radius-lg); object-fit: cover;
  max-height: 420px; width: 100%;
}

/* ---------- Banderoll-foto högt upp på en sida ---------- */
.page-banner {
  width: 100%; height: 280px; object-fit: cover;
  border-bottom: 1px solid var(--border-soft);
}
@media (max-width: 720px) { .page-banner { height: 180px; } }
.card h3 { font-family: var(--font-ui); font-size: 22px; letter-spacing: 0.05em; margin: 0 0 8px; }
.card p { font-size: 14px; opacity: 0.85; margin: 0 0 12px; }
.card a, .card .card-link { font-family: var(--font-ui); font-size: 19px; letter-spacing: 0.08em; color: var(--sand); display: inline-block; }
.section-dark .card a, .section-dark .card { color: var(--cream); }
.section-dark .card a, .section-dark .card .card-link { color: var(--sand); }
.offer-grid .card { background: rgba(17,11,4,0.82); }

.placeholder-box {
  border: 1px dashed var(--sand); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--sand); font-size: 14px; text-align: center; padding: 24px;
  min-height: 220px;
}

/* ---------- Formulär ---------- */
.booking-form { display: grid; gap: 20px; max-width: 640px; }
.form-row { display: grid; gap: 8px; }
.form-row label { font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; color: var(--sand); }
.form-row input, .form-row select, .form-row textarea {
  font-family: var(--font-body); font-size: 16px;
  background: var(--surface-mid-dark); color: var(--cream);
  border: 1px solid var(--border-soft-light); border-radius: var(--radius-md);
  padding: 12px 14px;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 14px; color: #bdb8b0; background: rgba(211,168,127,0.08); padding: 16px; border-radius: var(--radius-md); }
.form-success { display: none; background: rgba(52,102,99,0.2); border: 1px solid var(--teal); border-radius: var(--radius-md); padding: 20px; }
.form-success.is-visible { display: block; }
.booking-form.is-hidden { display: none; }

/* ---------- Footer: centrerad, tonar ljusstyrka ju längre ner man kommer ---------- */
.site-footer {
  position: relative;
  background: var(--brown);
  border-top: 1px solid var(--border-soft);
  padding: 44px var(--space-5) 36px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px;
  font-family: var(--font-ui); letter-spacing: 0.06em;
}
.footer-name {
  font-size: 20px; color: var(--cream); opacity: 1;
}
.footer-address {
  font-size: 13px; color: var(--sand); opacity: 0.78;
}
.footer-credit { font-size: 12px; color: var(--sand); opacity: 0.65; }
.footer-credit a { text-decoration: underline; text-underline-offset: 2px; }
.footer-credit a:hover { color: var(--cream); opacity: 1; }
.social-row { display: flex; align-items: center; gap: 16px; opacity: 0.85; }
.social-circle {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sand);
  display: flex; align-items: center; justify-content: center; color: var(--sand);
}
.social-circle svg { width: 18px; height: 18px; display: block; }
.social-circle:hover { background: var(--sand); color: var(--brown); opacity: 1; }
.footer-links {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  font-size: 12px; opacity: 0.5;
}
.footer-links a:hover { color: var(--cream); opacity: 1; }

/* ---------- Saloonsdörrar: entré-animation ---------- */
#saloon-doors {
  position: fixed; inset: 0; z-index: 100;
  display: flex;
  background: transparent; /* sidan bakom ska synas direkt, aldrig svart och inget "rum" */
  perspective: 1200px;
  pointer-events: none;
}
/* Den fasta dörrkarmen (karmposterna) ligger stilla och roterar ALDRIG —
   bara själva dörrbladet (::door) svänger. Annars sträcks karmen ut och
   blir till ett långt, skevt streck när dörren öppnas på höga sidor. */
#saloon-doors::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../images/saloon-frame.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
#saloon-doors .door {
  position: relative;
  width: 50%; height: 100%;
  background-image: url('../images/saloon-doors.webp');
  background-size: 200% 100%;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}
/* Gångjärnspunkten (rotationsaxeln) måste ligga där dörrbladets riktiga
   trä börjar i bilden — INTE i rutans fysiska kant. Dörrbladsbilden har en
   genomskinlig marginal innanför kanten (karmen är maskad bort ur samma bild),
   så om axeln ligger på rutans kant svänger den osynliga marginalen med och
   det riktiga träet lossnar synligt från gångjärnen. Uppmätt via alfakanalen:
   vänster dörrs trä börjar vid 32% av rutans bredd, höger dörrs slutar vid 68%. */
#saloon-doors .door-left { transform-origin: 32% center; background-position: left top; }
#saloon-doors .door-right { transform-origin: 68% center; background-position: right top; }

/* Skuggning som följer dörrbladets exakta form (maskad med samma bild):
   när bladet vrids bort från betraktaren tappar det ljus, mest ute vid den
   fria kanten som svänger längst in i det mörkare rummet. */
#saloon-doors .door::after {
  content: ''; position: absolute; inset: 0;
  -webkit-mask-image: url('../images/saloon-doors.webp');
  mask-image: url('../images/saloon-doors.webp');
  -webkit-mask-size: 200% 100%; mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  opacity: 0;
}
#saloon-doors .door-left::after {
  -webkit-mask-position: left top; mask-position: left top;
  background: linear-gradient(to right, rgba(8,5,2,0.2) 30%, rgba(8,5,2,0.6) 100%);
}
#saloon-doors .door-right::after {
  -webkit-mask-position: right top; mask-position: right top;
  background: linear-gradient(to left, rgba(8,5,2,0.2) 30%, rgba(8,5,2,0.6) 100%);
}

/* Entrén: man kliver in genom dörrarna. Bladen trycks upp INÅT (bort från
   betraktaren), samtidigt som hela dörröppningen — karm, väggar och dörrar —
   glider förbi (skalas upp) och tonas bort som en enhet, så att väggarna
   aldrig står kvar när dörrarna är borta. */
#saloon-doors.is-opening { animation: nds-walk-in 1.6s cubic-bezier(.5,0,.3,1) forwards; }
#saloon-doors.is-opening .door-left { animation: nds-door-left 1.5s cubic-bezier(.3,.05,.2,1) forwards; }
#saloon-doors.is-opening .door-right { animation: nds-door-right 1.5s cubic-bezier(.3,.05,.2,1) forwards; }
#saloon-doors.is-opening .door::after { animation: nds-door-shade 1.5s cubic-bezier(.3,.05,.2,1) forwards; }

@keyframes nds-walk-in {
  0%   { transform: scale(1); opacity: 1; }
  58%  { opacity: 1; }
  100% { transform: scale(1.14); opacity: 0; }
}
@keyframes nds-door-left  { from { transform: rotateY(0deg); } to { transform: rotateY(82deg); } }
@keyframes nds-door-right { from { transform: rotateY(0deg); } to { transform: rotateY(-82deg); } }
@keyframes nds-door-shade { from { opacity: 0; } to { opacity: 1; } }

#saloon-doors.is-hidden { display: none; }
.nds-skip-intro #saloon-doors, .nds-skip-intro #page-dim { display: none; }

/* På stående/smala skärmar skulle dörrbilden (≈1,75:1) annars sträckas ut till
   en lång smal stolpe. Där täcker den i stället skärmhöjden med bevarade
   proportioner och beskärs i sidled kring mitten (som background-size: cover). */
@media (max-aspect-ratio: 7/5) {
  #saloon-doors {
    inset: 0 auto 0 50%;
    width: max(100vw, 174.6vh);
    margin-left: calc(max(100vw, 174.6vh) / -2);
  }
}

/* Intro: när dörrarna har öppnats glider innehållet in från sidorna.
   Klassen nds-intro sätts bara av JS när dörrarna faktiskt spelas upp,
   så utan JS / vid återbesök är allt synligt direkt. Använder egenskapen
   `translate` så att kortens rotation (transform) inte krockar. */
.nds-intro .reveal-left  { opacity: 0; translate: -110px 0; }
.nds-intro .reveal-right { opacity: 0; translate: 110px 0; }
.nds-intro.nds-intro-go .reveal-left,
.nds-intro.nds-intro-go .reveal-right {
  opacity: 1; translate: 0 0;
  transition: opacity .8s ease var(--d, 0s), translate 1s cubic-bezier(.2,.75,.2,1) var(--d, 0s);
}
.nds-intro.nds-intro-go .event-card.reveal-right {
  transition: opacity .8s ease var(--d, 0s), translate 1s cubic-bezier(.2,.75,.2,1) var(--d, 0s),
              transform .2s ease, filter .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .nds-intro .reveal-left, .nds-intro .reveal-right { opacity: 1; translate: none; }
}
@media (prefers-reduced-motion: reduce) {
  #saloon-doors { display: none !important; }
}

/* Mörkt filter över SIDAN (aldrig över dörrarna) som tonar bort i takt med att
   dörrarna öppnas, så det känns som att man ser in i saloonen. */
#page-dim {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(8,5,2,0.9);
  pointer-events: none;
  opacity: 1;
  transition: opacity 1.6s cubic-bezier(.5,0,.3,1);
}
#page-dim.is-opening { opacity: 0; }
#page-dim.is-hidden { display: none; }
@media (prefers-reduced-motion: reduce) {
  #page-dim { display: none !important; }
}

/* ---------- Cookie-banner ---------- */
#cookie-banner {
  position: fixed; left: 24px; right: 24px; bottom: 24px; z-index: 90;
  max-width: 760px; margin: 0 auto;
  background: var(--surface-mid-dark); border: 1px solid var(--sand); border-radius: var(--radius-lg);
  padding: 20px 24px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
#cookie-banner p { margin: 0; font-size: 14px; flex: 1 1 320px; }
#cookie-banner.is-hidden { display: none; }
.cookie-actions { display: flex; gap: 12px; }

/* ---------- Ljust sidtema (för Butik/Kontakt-sektioner) ---------- */
.on-light { color: var(--brown); }
.on-light .eyebrow { color: var(--teal); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--sand); color: var(--brown);
  padding: 12px 20px; z-index: 200; border-radius: 0 0 var(--radius-md) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Our Story: teamfoto + teamlista ---------- */
.split-photo > img.team-photo { max-height: none; max-width: 440px; aspect-ratio: 947 / 1300; object-position: 50% 22%; }
.team-grid { display: flex; flex-direction: column; margin-top: 16px; max-width: 980px; }
.team-member { display: flex; gap: 28px; align-items: center; padding: 24px 0; border-top: 1px solid rgba(211,168,127,0.28); }
.team-member:first-child { border-top: 0; }
.team-member img { width: 120px; height: 120px; flex: none; border-radius: 50%; object-fit: cover; border: 3px solid var(--sand); }
.team-name { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 32px); line-height: 1.05; }
.team-role { display: inline-block; font-family: var(--font-ui); font-size: 17px; letter-spacing: 0.14em; background: #a8512f; color: #fff4dc; border-radius: 4px; padding: 3px 12px; margin: 8px 0; }
.team-member p { font-size: 16.5px; line-height: 1.55; margin: 0; opacity: 0.92; max-width: 680px; }
@media (max-width: 560px) {
  .team-member { gap: 16px; align-items: flex-start; }
  .team-member img { width: 84px; height: 84px; }
}

/* ---------- Mat & dryck ---------- */
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-poster-col { justify-self: end; width: 100%; max-width: 520px; }
.menu-poster { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  transform: rotate(1.8deg); transition: transform 0.25s ease; }
.menu-poster:hover, .menu-poster:focus-visible { transform: rotate(0deg) scale(1.02); }
.menu-poster img { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.45)) drop-shadow(0 26px 30px rgba(0,0,0,0.55)); }
.menu-nail { position: absolute; top: 5.5%; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #d9d2c4, #6d655a 55%, #2b2620); box-shadow: 0 3px 4px rgba(0,0,0,0.6); }
.menu-hint { font-family: 'Caveat', cursive; font-size: 24px; color: var(--sand); text-align: center; margin-top: 10px; transform: rotate(1.8deg); }
.menu-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(8,5,2,0.9); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.menu-lightbox[hidden] { display: none; }
.menu-lightbox img { max-height: 94vh; max-width: 94vw; width: auto; height: auto; }
.menu-lightbox-close { position: absolute; top: 14px; right: 18px; width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: rgba(17,11,4,0.8); color: var(--cream); font-size: 32px; line-height: 1; cursor: pointer; }
@media (max-width: 860px) {
    .menu-poster-col { justify-self: center; }
}

/* Eventkort: "Boka bord" längst ner */
.events-grid .card { display: flex; flex-direction: column; }
.events-grid .card .card-link { margin-top: auto; padding-top: 10px; }

/* Diskret utvecklarrad längst ner i sidfoten */
.footer-dev { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.08em; color: var(--cream); opacity: 0.32; transition: opacity 0.2s ease; margin-top: 4px; }
.footer-dev:hover, .footer-dev:focus-visible { opacity: 0.7; }

/* ---------- Vanliga frågor (klicka för svar) ---------- */
.faq-list { max-width: 720px; }
.faq-item { margin: 0 0 6px; }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 12px 0; font-weight: 700; font-size: 17px; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 1.5px solid var(--sand);
  border-radius: 50%; color: var(--sand); font-family: var(--font-ui); font-size: 20px; line-height: 1; font-weight: 400; transition: background .15s ease, color .15s ease; }
.faq-item[open] summary::after { content: '–'; background: var(--sand); color: var(--brown); }
.faq-item summary:hover, .faq-item summary:focus-visible { color: var(--sand); }
.faq-a { padding: 0 0 12px; }
.faq-a p { margin: 0; line-height: 1.65; }
.faq-a a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Eventkort och popup ---------- */
.events-grid .card { position: relative; }
.card-open { all: unset; cursor: pointer; }
.card-open::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.card-open:focus-visible::after { outline: 2px solid var(--sand); outline-offset: 3px; }
.card-actions { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: center; gap: 14px; position: relative; z-index: 2; }
.card-actions .card-link { padding-top: 0; margin-top: 0; }
.card-actions a.card-link:hover, .card-actions a.card-link:focus-visible { color: var(--cream); }
.event-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8,5,2,0.86); overflow-y: auto; }
.event-modal[hidden] { display: none; }
.event-modal-panel { position: relative; width: min(900px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; margin: auto; outline: none;
  background: #1c1209; border: 1.5px solid var(--sand); border-radius: var(--radius-lg); box-shadow: 0 30px 60px rgba(0,0,0,0.6); }
.event-modal-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.ev-img img { display: block; width: 100%; height: 100%; min-height: 340px; object-fit: cover; border-radius: calc(var(--radius-lg) - 2px) 0 0 calc(var(--radius-lg) - 2px); }
.ev-text { padding: 36px 34px 32px; }
.ev-text h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); margin: 0 0 14px; line-height: 1.05; }
.ev-text p { margin: 0 0 12px; line-height: 1.6; }
.ev-text a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }
.ev-facts { margin: 18px 0 22px; }
.ev-facts div { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(211,168,127,0.25); font-size: 15px; }
.ev-facts dt { font-family: var(--font-ui); letter-spacing: 0.08em; color: var(--sand); font-size: 16px; }
.ev-facts dd { margin: 0; }
.ev-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.event-modal-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(17,11,4,0.85); color: var(--cream); font-size: 30px; line-height: 1; }
.event-modal-close:hover, .event-modal-close:focus-visible { background: var(--sand); color: var(--brown); }
body.modal-open { overflow: hidden; }
@media (max-width: 720px) {
  .event-modal-body { grid-template-columns: 1fr; }
  .ev-img img { min-height: 0; height: 220px; border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0; }
  .ev-text { padding: 24px 22px 26px; }
  .ev-facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Bokningssidor: checklista ---------- */
.check-list { list-style: none; padding: 0; margin: 16px 0; }
.check-list li { position: relative; padding: 7px 0 7px 30px; line-height: 1.5; }
.check-list li::before { content: '★'; position: absolute; left: 2px; top: 8px; color: var(--sand); font-size: 14px; }
.split-text a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Karta (laddas först efter val) ---------- */
.map-gate { min-height: 360px; display: grid; place-items: center; text-align: center; padding: 28px; border-radius: 16px; border: 1px solid var(--sand);
  background: linear-gradient(rgba(17,11,4,0.78), rgba(17,11,4,0.88)), url('../images/wood-texture.webp') center / cover; }
.map-gate h2 { font-family: var(--font-display); font-size: 28px; margin: 0 0 8px; }
.map-gate p { max-width: 380px; margin: 0 auto 18px; }
.map-gate-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.map-gate.is-loaded { padding: 0; display: block; background: none; border: 0; }
.map-gate iframe { width: 100%; min-height: 360px; border: 0; border-radius: 16px; display: block; }

/* ---------- Integritetspolicy ---------- */
.legal { max-width: 860px; }
.legal h2 { font-family: var(--font-ui); font-size: 26px; letter-spacing: 0.05em; margin: 40px 0 8px; font-weight: 400; color: var(--sand); }
.legal h3 { font-family: var(--font-ui); font-size: 20px; letter-spacing: 0.06em; margin: 24px 0 4px; font-weight: 400; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: 22px; margin: 10px 0 14px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }
.legal-updated { opacity: 0.7; font-size: 14px; margin: -4px 0 18px; }
.legal h2[id] { scroll-margin-top: 110px; }
.link-button { background: none; border: 0; padding: 0; font: inherit; color: var(--sand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie-status { font-size: 13px; opacity: 0.8; margin: 0 0 4px; }
#cookie-banner a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }
.ev-text a.btn { text-decoration: none; color: var(--cream); }
.ev-text a.btn:hover, .ev-text a.btn:focus-visible { color: var(--cream); }
.legal { margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; }
@media (max-width: 600px) { .legal { padding-left: 24px; padding-right: 24px; } }

.btn { text-decoration: none; }

.cookie-list { list-style: none; padding: 0; margin: 14px 0; }
.legal .cookie-list li { padding: 12px 0; border-top: 1px solid rgba(211,168,127,0.25); margin: 0; }
.legal .cookie-list li:last-child { border-bottom: 1px solid rgba(211,168,127,0.25); }
.cookie-list code { font-size: 0.95em; color: var(--sand); }
.split-text a.btn { text-decoration: none; color: var(--cream); }
.split-text a.btn:hover, .split-text a.btn:focus-visible { color: var(--brown); }

/* ---------- Hitta hit ---------- */
.route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.route { padding: 24px 26px; background: rgba(17,11,4,0.82); border: 1px solid var(--sand); border-radius: var(--radius-lg); }
.route h3 { font-family: var(--font-ui); font-weight: 400; font-size: 24px; letter-spacing: 0.05em; margin: 0 0 4px; }
.route .route-sub { font-family: var(--font-ui); letter-spacing: 0.12em; font-size: 15px; color: var(--sand); margin: 0 0 10px; }
.route p { margin: 0; font-size: 15px; line-height: 1.6; }
.route.featured { border-width: 2px; }
.route-note { max-width: 760px; margin: 24px 0 0; line-height: 1.65; }
@media (max-width: 900px) { .route-grid { grid-template-columns: 1fr; } }

/* ---------- Ta dig hit med tåg ---------- */
.train { display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; align-items: center; margin-top: 8px; }
.train h2 { font-family: var(--font-display); font-size: clamp(30px, 4vw, 46px); line-height: 1.05; margin: 0 0 16px; }
.train p { line-height: 1.65; max-width: 480px; }
.train-facts { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.train-facts li { padding: 10px 18px; border: 1.5px solid var(--sand); border-radius: 999px; font-family: var(--font-ui); letter-spacing: 0.08em; font-size: 18px; }
.train-facts b { color: var(--sand); font-weight: 400; }
.train .map-gate { min-height: 420px; }
.train .map-gate iframe { min-height: 420px; }
@media (max-width: 900px) { .train { grid-template-columns: 1fr; gap: 28px; } }
.route-grid.two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 700px) { .route-grid.two { grid-template-columns: 1fr; } }

/* ---------- Mat & dryck: menykort och affisch i samma höjd ---------- */
.menu-intro { text-align: center; max-width: 740px; margin: 0 auto 44px; }
.menu-intro p { line-height: 1.7; margin: 0; }
.menu-board { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: 64px; align-items: stretch; max-width: 1080px; margin: 0 auto; }
.menu-card { display: flex; flex-direction: column; justify-content: space-between; gap: 34px; padding: 34px 28px; text-align: center;
  background: rgba(17,11,4,0.82); border: 1px solid var(--sand); border-radius: var(--radius-lg); }
.menu-head { font-family: var(--font-display); font-weight: 400; font-size: 28px; margin: 0; }
.menu-orn { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--sand); font-size: 13px; margin: 6px 0 14px; }
.menu-orn span { width: 56px; border-top: 1.5px solid var(--sand); opacity: 0.7; }
.menu-list { list-style: none; padding: 0; margin: 0; }
.menu-list li { font-family: var(--font-ui); font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 0; }
.menu-board .menu-poster-col { justify-self: center; align-self: start; width: 100%; max-width: 600px; }
@media (max-width: 860px) {
  .menu-board { grid-template-columns: 1fr; gap: 40px; }
  .menu-card { gap: 26px; }
}
.menu-board { margin-bottom: 48px; }
.menu-board .menu-poster-col { position: relative; }
.menu-board .menu-hint { position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; }
.menu-card { gap: 26px; padding: 30px 28px; }

/* ---------- Kontakt ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 36px 48px; margin-top: 28px; }
.contact-grid h2 { margin-top: 0; }
.contact-grid a { text-decoration: underline; text-underline-offset: 3px; }
.contact-grid .social-row a { text-decoration: none; }
.split-text h3 { font-family: var(--font-ui); font-size: 22px; letter-spacing: 0.05em; text-transform: uppercase; margin: 22px 0 6px; }

/* Datumfält i formulär */
.form-row input[type="date"] { color-scheme: dark; color: #fff; font-family: var(--font-body); }
.form-row input[type="date"]::-webkit-datetime-edit,
.form-row input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.form-row input[type="date"]::-webkit-datetime-edit-text,
.form-row input[type="date"]::-webkit-datetime-edit-year-field,
.form-row input[type="date"]::-webkit-datetime-edit-month-field,
.form-row input[type="date"]::-webkit-datetime-edit-day-field { color: #fff; font-family: var(--font-body); }
.form-row input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

/* Kontakt: centrerad topp */
.contact-a { text-align: center; }
.contact-a-addr { display: flex; flex-direction: column; gap: 2px; margin: 28px 0 10px; }
.contact-a-addr strong { font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 48px); font-weight: 400; line-height: 1.15; }
.contact-a-note { max-width: 560px; margin: 0 auto 36px; }
.contact-a-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 900px; margin: 0 auto; }
.contact-a-cols > div { padding: 8px 28px; border-left: 1px solid rgba(232,200,150,0.3); }
.contact-a-cols > div:first-child { border-left: 0; }
.contact-a-cols h2 { font-family: var(--font-ui); font-size: 16px; letter-spacing: 0.05em; margin: 0 0 8px; color: var(--sand); }
.contact-a a { text-decoration: underline; text-underline-offset: 3px; }
.contact-a .social-row a { text-decoration: none; }
@media (max-width: 900px) { .contact-a-cols { grid-template-columns: 1fr; gap: 18px; } .contact-a-cols > div { border-left: 0; padding: 12px 0; } .contact-a-cols p { margin-top: 0; } .contact-a-cols h2 { margin-bottom: 6px; } }
.contact-a-cols > div { display: flex; flex-direction: column; padding: 8px 18px; }
.contact-a-cols h2 { margin-bottom: 14px; }
.contact-a-cols p { margin-top: auto; overflow-wrap: anywhere; }

/* Centrerade vanliga frågor */
.faq-centered { text-align: center; }
.faq-centered .faq-list { margin-left: auto; margin-right: auto; text-align: left; }

/* Kontakt: namnrad och avstånd */
.contact-a-addr { margin-bottom: 14px; }
.contact-a-addr > span:first-child { font-family: var(--font-ui); font-size: clamp(26px, 3.4vw, 34px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sand); margin-bottom: 4px; }
.contact-a-cols { max-width: 1100px; }
.contact-a-cols > div { align-items: center; }
.contact-a-note { margin-top: 34px; }

/* Rullgardinsmeny: Boka saloonen */
.nav-links > .nav-dropdown { order: 6; position: relative; display: flex; align-items: center; gap: 2px; }
.nav-caret { background: none; border: 0; padding: 6px 4px; cursor: pointer; color: var(--cream); display: inline-flex; align-items: center; }
.nav-caret::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.nav-caret:hover, .nav-dropdown:focus-within .nav-caret { color: var(--sand); }
.nav-dropdown.is-open .nav-caret::before { transform: rotate(-135deg) translateY(-2px); }
.nav-sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); z-index: 60;
  min-width: 220px; padding: 14px 6px 6px; display: none; flex-direction: column;
}
.nav-sub::before { content: ""; position: absolute; inset: 14px 0 0 0; background: var(--surface-mid-dark); border: 1px solid var(--sand); border-radius: var(--radius-md); box-shadow: 0 12px 28px rgba(0,0,0,.45); }
.nav-sub a { position: relative; padding: 11px 16px; white-space: nowrap; font-size: 15px; }
.nav-sub a + a { border-top: 1px solid var(--border-soft); }
.nav-dropdown:hover .nav-sub, .nav-dropdown.is-open .nav-sub, .nav-dropdown:focus-within .nav-sub { display: flex; }
@media (max-width: 1020px) {
  .nav-links > .nav-dropdown { order: initial; flex-wrap: wrap; border-top: 1px solid var(--border-soft); justify-content: space-between; }
  .nav-links .nav-dropdown > a:first-child { border-top: 0; flex: 1; }
  .nav-caret { padding: 14px 10px; }
  .nav-sub { position: static; transform: none; display: none; width: 100%; min-width: 0; padding: 0 0 8px 18px; }
  .nav-sub::before { display: none; }
  .nav-dropdown:hover .nav-sub, .nav-dropdown:focus-within .nav-sub { display: none; }
  .nav-dropdown.is-open .nav-sub { display: flex; }
  .nav-sub a { border-top: 1px solid var(--border-soft); font-size: 15px; }
}
.nav-links .nav-dropdown > a:nth-child(1) { order: 0; }
.nav-links .nav-dropdown > .nav-caret { order: 1; }
@media (max-width: 1020px) { .nav-links .nav-dropdown > .nav-sub { order: 2; } }

/* Rullgardin utan pil: undersidorna alltid synliga i mobilmenyn */
@media (max-width: 1020px) {
  .nav-dropdown .nav-sub { display: flex !important; }
  .nav-links > .nav-dropdown { border-top: 0; }
  .nav-links .nav-dropdown > a:first-child { border-top: 1px solid var(--border-soft); flex: 1 1 100%; }
}

/* ---------- Mobil: hamburgermenyn ligger ovanpå sidan ---------- */
@media (max-width: 1020px) {
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 70;
    background: var(--brown); border-bottom: 1px solid var(--border-soft);
    box-shadow: 0 18px 30px rgba(0,0,0,0.5);
    padding: 0 var(--space-5) 20px; max-height: calc(100vh - 80px); overflow-y: auto;
  }
}

/* ---------- Mobil: kort utan bilder (bilden visas i popupen/undersidan) ---------- */
@media (max-width: 720px) {
  .no-photo-mobile .card-photo { display: none; }
}

/* ---------- Mobil: butiksbandet ---------- */
@media (max-width: 720px) {
  .shop-ribbon { flex-direction: column; justify-content: center; text-align: center; padding: 30px var(--space-5); gap: 18px; }
  .shop-ribbon h2 { font-size: 24px; line-height: 1.25; max-width: 18em; }
}

.hint-m { display: none; }
@media (max-width: 720px) {
  /* Mat & dryck: mindre meny, affischen kan förstoras */
  .hint-d { display: none; } .hint-m { display: inline; }
  .menu-board { gap: 28px; margin-bottom: 40px; }
  .menu-card { gap: 16px; padding: 20px 20px; }
  .menu-head { font-size: 21px; }
  .menu-orn { transform: scale(0.8); }
  .menu-list li { font-size: 16px; padding: 2px 0; }
  .menu-board .menu-poster-col { max-width: 280px; }
  /* Erbjudanden: kortare bilder */
  .offer-grid .card-photo { aspect-ratio: auto; height: 160px; }
}

/* Rullista i formulär: pilen längre in från kanten */
.form-row select {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%23D3A87F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 14px 9px;
}

/* Wilda-popupen: bredare bildkolumn så hela texten på bilden syns centrerad */
@media (min-width: 721px) {
  .event-modal-body:has(.ev-wide) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ev-wide img { object-position: 50% 0%; }
}

/* Rullgardinsmenyn: smalare, centrerad och samma storlek som menyn */
.nav-sub { min-width: 0; width: max-content; padding: 12px 0 0; text-align: center; }
.nav-sub::before { inset: 12px 0 0 0; }
.nav-sub a { font-size: inherit; letter-spacing: inherit; padding: 11px 22px; }
@media (max-width: 1020px) {
  .nav-sub { width: 100%; text-align: left; padding: 0 0 8px 18px; }
  .nav-sub a { padding: 14px 4px; font-size: 15px; }
}

/* ---------- Eventportalen: dynamiska events ---------- */
.events-loading, .events-empty { grid-column: 1 / -1; margin: 12px 0; opacity: 0.85; }
.event-modal-body:not(:has(.ev-img)) { grid-template-columns: minmax(0, 1fr); }
.event-modal-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.card-ticket { color: var(--cream); }

.form-sendnote { margin: 10px 0 0; font-size: 14px; color: #bdb8b0; }
.form-sendnote:empty { display: none; }
.booking-form button[disabled] { opacity: 0.7; cursor: progress; }

/* ---------- Pil i vår stil (i stället för emoji-pilen på iPhone) ---------- */
.arrow-ne { width: 0.95em; height: 0.95em; vertical-align: -0.1em; margin-left: 0.15em; flex: none; }

/* ---------- Mobil: finjusteringar ---------- */
@media (max-width: 720px) {
  /* bandet överst på en rad */
  .ribbon-bar { padding: 7px 8px; font-size: clamp(8.5px, 2.65vw, 11px); letter-spacing: 0.12em; white-space: nowrap; overflow: hidden; }
  /* mindre luft mellan sektioner */
  .section { padding-top: 44px; padding-bottom: 44px; }
  /* "Från boots till baren": smalare band */
  .shop-ribbon { padding: 16px var(--space-5); gap: 10px; }
  .shop-ribbon h2 { font-size: 19px; line-height: 1.2; max-width: none; }
  .shop-ribbon .btn { padding: 8px 20px; font-size: 14px; }
  /* eventpopupen: en kolumn, bilden överst */
  .event-modal-body, .event-modal-body:has(.ev-wide) { grid-template-columns: minmax(0, 1fr) !important; }
  .event-modal-body .ev-img img { height: 210px; min-height: 0; width: 100%; border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0; }
  .ev-text { padding: 22px 20px 24px; }
  .ev-text .eyebrow { letter-spacing: 0.12em; line-height: 1.5; padding-right: 44px; }
}

/* ---------- Mobil: header som krymper vid scroll och smalare meny ---------- */
@media (max-width: 1020px) {
  .nav-bar { transition: padding 0.2s ease; }
  .nav-logo-img { transition: width 0.2s ease, height 0.2s ease; }
  .site-header.is-scrolled .nav-bar { padding-top: 6px; padding-bottom: 6px; }
  .site-header.is-scrolled .nav-logo-img { width: 40px; height: 40px; }
  .nav-links {
    left: auto; right: 0; width: min(78vw, 300px);
    border-left: 1px solid var(--border-soft); border-bottom-left-radius: 14px;
    padding: 4px 18px 16px; font-size: 15px;
  }
  .nav-links a { padding: 11px 2px; }
  .nav-links .nav-sub a { padding: 9px 2px; }
  .nav-links a.nav-shop-link { margin-top: 10px; padding: 10px 14px; }
}

/* ---------- Mobil: större band, hamburgarmeny i full höjd med större text ---------- */
@media (max-width: 720px) {
  .ribbon-bar { font-size: clamp(10px, 3.3vw, 13px); letter-spacing: 0.1em; }
}
@media (max-width: 1020px) {
  .nav-links {
    position: fixed; top: var(--nds-header-h, 84px); bottom: 0; right: 0; left: auto;
    width: min(82vw, 330px); max-height: none; overflow-y: auto; border-bottom-left-radius: 0;
    padding: 6px 22px 22px; font-size: 19px;
  }
  .nav-links a { padding: 15px 2px; }
  .nav-links .nav-sub a { padding: 12px 2px; font-size: 17px; }
  .nav-links a.nav-shop-link { margin-top: auto; margin-bottom: 4px; padding: 13px 16px; font-size: 18px; }
  .nav-links .nav-dropdown + a { margin-top: 0; }
}

/* ---------- Hemlig meny: suddig meny med stämpel ---------- */
.menu-wrap { position: relative; }
.menu-wrap .ov { display: none; }
.menu-wrap.secret { margin-bottom: 48px; }
.menu-wrap.secret .menu-board { filter: blur(11px) saturate(0.85); opacity: 0.9; pointer-events: none; user-select: none; -webkit-user-select: none; margin-bottom: 0; }
.menu-wrap.secret .menu-hint { display: none; }
.menu-wrap.secret .ov { display: flex; position: absolute; inset: 0; justify-content: center; align-items: center; z-index: 5; pointer-events: none; }
.menu-wrap.secret .ov-in { text-align: center; }
.menu-wrap .stamp { display: inline-block; transform: rotate(-7deg); border: 0.28em solid #d2402a; color: #d2402a; border-radius: 0.4em; padding: 0.15em 0.55em; font-family: var(--font-ui); font-size: clamp(44px, 9vw, 104px); letter-spacing: 0.12em; line-height: 1.05; background: rgba(17,11,4,0.55); text-shadow: 0 0 1px rgba(210,64,42,0.6); box-shadow: 0 0 0 0.08em rgba(210,64,42,0.35) inset; }
.menu-wrap .ov .sub { font-family: var(--font-ui); letter-spacing: 0.2em; font-size: clamp(18px, 3.4vw, 28px); margin: 18px 0 0; color: var(--cream); text-shadow: 0 2px 12px rgba(0,0,0,0.9); }
@media (max-width: 720px) {
  .menu-wrap.secret .ov { align-items: flex-start; }
  .menu-wrap.secret .ov-in { position: sticky; top: 26vh; margin-top: 14vh; }
}

/* Obligatoriska fält */
.req { color: var(--sand); font-family: var(--font-body); font-weight: 700; margin-left: 2px; }
.form-req-note { margin: 0; font-size: 14px; color: #bdb8b0; }
.form-row input:user-invalid { border-color: #e0735a; }


/* ---------- Öppettider, abonnera-ruta ---------- */
.ribbon-hours { background: var(--brown); color: var(--sand); border-bottom: 1px solid var(--border-soft); white-space: normal !important; overflow: visible !important; font-size: clamp(12px, 3vw, 14px) !important; letter-spacing: 0.12em !important; }
.hours-panel { display: grid; grid-template-columns: 1fr 1.3fr; gap: 28px 56px; align-items: center; max-width: 980px; margin: 0 auto; background: rgba(17,11,4,0.82); border: 1px solid var(--sand); border-radius: 20px; padding: 32px 40px; }
.hours-eyebrow { font-family: var(--font-ui); font-size: 19px; letter-spacing: 0.12em; color: var(--sand); margin-bottom: 6px; }
.hours-title { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; margin: 0 0 14px; }
.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: 24px; font-size: 20px; padding: 8px 0; border-top: 1px solid rgba(211,168,127,0.28); }
.hours-list li:first-child { border-top: 0; }
.hours-list strong { font-family: var(--font-ui); font-size: 26px; letter-spacing: 0.06em; color: var(--sand); }
.hours-shop p { font-size: 18px; line-height: 1.55; margin: 0; }
.hours-shop strong { color: var(--sand); }
@media (max-width: 720px) { .hours-panel { grid-template-columns: 1fr; padding: 24px 22px; } }
.callout { max-width: 820px; background: rgba(17,11,4,0.82); border: 2px solid var(--sand); border-radius: 16px; padding: 22px 28px; margin: 22px 0 28px; }
.callout-eyebrow { font-family: var(--font-ui); font-size: 22px; letter-spacing: 0.12em; color: var(--sand); margin-bottom: 6px; }
.callout p { margin: 0 0 8px; font-size: 18px; line-height: 1.55; }
.callout a { color: var(--sand); text-decoration: underline; text-underline-offset: 3px; }
.callout .callout-sub { font-size: 16px; opacity: 0.9; margin: 0; }