/* ============================================================
   SNAPSTING 2026 · Baren i Midten
   Official Snapsting brand — orange palette + Calibri (Carlito)
   Lys orange #F18A00 · Orange #ED6E1F · Brændt orange #C63A2B
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* official palette */
  --lys:        #f18a00;   /* lys orange  */
  --orange:     #ed6e1f;   /* orange      */
  --braendt:    #c63a2b;   /* brændt orange */
  --black:      #161310;
  --ink:        #1d1813;
  --ink-soft:   #574a3e;
  --muted:      #948577;
  --paper:      #ffffff;
  --paper-2:    #fff6ea;   /* light orange tint */
  --paper-card: #fffaf3;
  --cream:      #fdf1e2;
  --line:       #f3e1cb;
  --line-soft:  #f8eddd;
  --white:      #ffffff;

  /* semantic aliases (used by per-page inline styles) */
  --teal:       #c63a2b;   --teal-d: #a32d20;   --teal-l: #fdeadf;
  --coral:      #ed6e1f;   --coral-d:#d65c14;
  --gold:       #f18a00;   --gold-d: #d97c00;
  --plum:       #c63a2b;
  --text:       #1d1813;
  --border:     #f3e1cb;   --border-light: #f8eddd;
  --navy:       #161310;   --navy-mid: #574a3e;

  --shadow:     rgba(60,30,10,0.10);
  --shadow-lg:  rgba(60,30,10,0.18);
  --maxw:       1120px;
  --font: 'Carlito', Calibri, 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: var(--font); font-weight:700; line-height:1.08; letter-spacing:-0.01em; }
a { color: var(--braendt); }

/* ---- top stripe: three oranges ---- */
.stripe-top {
  height: 7px;
  background: repeating-linear-gradient(90deg,
    var(--lys) 0 30px, var(--orange) 30px 60px, var(--braendt) 60px 90px);
}

/* =================== NAV =================== */
nav {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 0 1.6rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 16px var(--shadow);
}
.brand { display:flex; align-items:center; gap:0.85rem; text-decoration:none; }
.nav-logo { display:block; width:auto; object-fit:contain; }
.nav-logo.snap { height:34px; }
.nav-logo.bim  { height:30px; }
.nav-div { width:1px; height:30px; background:var(--line); flex-shrink:0; }
.nav-links { display:flex; gap:1.5rem; align-items:center; }
.nav-links a {
  color: var(--ink-soft); text-decoration:none;
  font-size:0.84rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  position:relative; padding:0.3rem 0; transition:color .18s;
}
.nav-links a:hover { color: var(--braendt); }
.nav-links a.active { color: var(--braendt); }
.nav-links a.active::after {
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px;
  background:var(--lys); border-radius:3px;
}
.nav-hamburger {
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; background:none; border:none; cursor:pointer;
  padding:4px; border-radius:8px; transition:background .15s;
}
.nav-hamburger:hover { background:var(--paper-2); }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--braendt); border-radius:2px;
  transition:transform .25s, opacity .25s; transform-origin:center; }
.nav-hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2){ opacity:0; }
.nav-hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-mobile {
  display:none; position:absolute; top:72px; left:0; right:0;
  background:var(--paper); border-bottom:3px solid var(--orange);
  box-shadow:0 10px 26px var(--shadow); z-index:99; padding:0.4rem 0;
}
.nav-mobile.open { display:block; }
.nav-mobile a {
  display:block; padding:0.95rem 1.6rem; color:var(--ink-soft); text-decoration:none;
  font-size:0.9rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  border-top:1px solid var(--line-soft);
}
.nav-mobile a:first-child { border-top:none; }
.nav-mobile a:hover, .nav-mobile a.active { background:var(--paper-2); color:var(--braendt); }

/* =================== HERO =================== */
.hero {
  background: var(--orange);
  background-image: linear-gradient(135deg, var(--lys) 0%, var(--orange) 55%, var(--braendt) 120%);
  color: #fff;
  padding: 4.5rem 1.6rem 4rem;
  text-align: center; position: relative; overflow: hidden;
}
.hero-s {                       /* big "S" watermark */
  position:absolute; right:-3%; bottom:-22%; height:150%; width:auto;
  opacity:0.12; pointer-events:none; user-select:none;
}
.hero-inner { position:relative; z-index:2; }
.hero-logo { width:min(440px, 78%); height:auto; margin:0 auto 1.4rem; display:block; }
.hero-tagline {
  font-size:clamp(1.6rem,4.5vw,2.6rem); font-weight:700; color:#fff; letter-spacing:-0.01em;
  margin-bottom:0.5rem; text-shadow:0 2px 14px rgba(120,40,10,0.25);
}
.hero-kicker {
  font-size:0.95rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(255,255,255,0.92); margin-bottom:1.3rem;
}
.hero-dates {
  display:inline-block; background:#fff; color:var(--braendt);
  font-weight:700; font-size:1.05rem; letter-spacing:0.02em;
  padding:0.45rem 1.3rem; border-radius:100px; margin-bottom:1.2rem;
}
.hero-sub { color:rgba(255,255,255,0.92); font-size:1.05rem; max-width:580px; margin:0 auto; }
.hero-cta { margin-top:1.8rem; display:flex; gap:0.8rem; justify-content:center; flex-wrap:wrap; }
.hero-presenter {
  margin-top:2rem; display:inline-flex; align-items:center; gap:0.7rem;
  background:rgba(0,0,0,0.16); border:1px solid rgba(255,255,255,0.3);
  padding:0.5rem 1.1rem; border-radius:100px;
}
.hero-presenter span { font-size:0.82rem; font-weight:700; letter-spacing:0.05em; color:#fff; text-transform:uppercase; }
.hero-presenter img { height:24px; width:auto; }

/* =================== BUTTONS =================== */
.btn {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font); font-weight:700; font-size:0.9rem;
  letter-spacing:0.04em; text-transform:uppercase; text-decoration:none;
  padding:0.78rem 1.6rem; border-radius:100px; cursor:pointer; border:2px solid transparent;
  transition:transform .12s, box-shadow .15s, background .15s;
}
.btn:active { transform:translateY(1px); }
.btn-coral, .btn-primary { background:#fff; color:var(--braendt); box-shadow:0 6px 18px rgba(120,40,10,0.22); }
.btn-coral:hover { background:var(--cream); }
.btn-ghost { background:transparent; color:#fff; border-color:rgba(255,255,255,0.6); }
.btn-ghost:hover { background:rgba(255,255,255,0.14); border-color:#fff; }
.btn-gold { background:var(--braendt); color:#fff; box-shadow:0 6px 18px rgba(120,40,10,0.22); }
.btn-gold:hover { background:var(--teal-d); }
/* on light backgrounds */
.on-light .btn-coral, .btn-solid { background:var(--orange); color:#fff; }
.btn-solid:hover { background:var(--braendt); }

/* =================== LAYOUT =================== */
.wrap { max-width: var(--maxw); margin:0 auto; padding: 3.5rem 1.6rem; }
.wrap-narrow { max-width: 860px; }
.section-head { margin-bottom:2rem; }
.eyebrow {
  font-weight:700; font-size:0.78rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--braendt); display:flex; align-items:center; gap:0.6rem; margin-bottom:0.6rem;
}
.eyebrow::before { content:''; width:26px; height:3px; background:var(--lys); border-radius:3px; }
.section-title {
  font-weight:700; font-size:clamp(1.8rem,4.2vw,2.6rem); color:var(--braendt); letter-spacing:-0.01em;
}
.section-intro { color:var(--ink-soft); font-size:1.05rem; max-width:640px; margin-top:0.7rem; }

/* =================== FACTS =================== */
.facts { background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.facts-inner { max-width:var(--maxw); margin:0 auto; padding:1.4rem 1.6rem;
  display:flex; flex-wrap:wrap; gap:1rem 2.5rem; justify-content:center; align-items:center; }
.fact { display:flex; align-items:center; gap:0.6rem; }
.fact-ico { width:30px; height:30px; object-fit:contain; }
.fact b { color:var(--braendt); font-weight:700; }
.fact span { color:var(--ink-soft); font-size:0.95rem; }

/* =================== CARDS / GRID =================== */
.grid { display:grid; gap:1.4rem; }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.card {
  background:var(--paper-card); border:1px solid var(--line); border-radius:16px;
  padding:1.6rem; box-shadow:0 4px 18px var(--shadow); transition:transform .15s, box-shadow .15s;
  position:relative; overflow:hidden;
}
.card.link-card { text-decoration:none; color:inherit; display:flex; flex-direction:column; }
.card.link-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px var(--shadow-lg); }
.card-emoji { font-size:2.2rem; margin-bottom:0.8rem; display:block; }
.card-ico { width:46px; height:46px; object-fit:contain; margin-bottom:0.8rem; display:block; }
.card h3 { font-weight:700; font-size:1.35rem; color:var(--braendt); margin-bottom:0.4rem; }
.card p { color:var(--ink-soft); font-size:0.97rem; }
.card-arrow { margin-top:auto; padding-top:1rem; color:var(--orange); font-weight:700;
  font-size:0.85rem; letter-spacing:0.04em; text-transform:uppercase; }
.card-tag {
  position:absolute; top:1rem; right:1rem; background:var(--lys); color:#fff;
  font-size:0.62rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.2rem 0.6rem; border-radius:100px;
}
.place-card { border-top:5px solid var(--orange); }
.place-card.nytorv { border-top-color:var(--lys); }
.place-card.hjultorvet { border-top-color:var(--orange); }
.place-card.paradepladsen { border-top-color:var(--braendt); }

/* =================== PROSE =================== */
.prose p { margin-bottom:1rem; color:var(--ink-soft); font-size:1.04rem; }
.prose h3 { color:var(--braendt); font-size:1.5rem; font-weight:700; margin:2rem 0 0.7rem; }
.prose strong { color:var(--ink); }
.callout {
  background:var(--paper-2); border-left:5px solid var(--orange); border-radius:0 12px 12px 0;
  padding:1.3rem 1.5rem; margin:1.6rem 0;
}
.callout.coral { background:#fdeadf; border-left-color:var(--braendt); }
.callout.gold { background:#fff3e0; border-left-color:var(--lys); }
.callout p { margin:0; color:var(--ink-soft); }
.callout p+p { margin-top:0.6rem; }

/* =================== PAGE HEADER (subpages) =================== */
.page-head {
  background: var(--orange);
  background-image: linear-gradient(135deg, var(--lys) 0%, var(--orange) 60%, var(--braendt) 130%);
  color:#fff; padding:3rem 1.6rem 2.6rem; text-align:center; position:relative; overflow:hidden;
}
.page-head .eyebrow { color:#fff; justify-content:center; }
.page-head .eyebrow::before { background:#fff; }
.page-head h1 { font-weight:700; font-size:clamp(2.1rem,5.5vw,3.4rem); color:#fff; }
.page-head h1 em { font-style:normal; color:#fff; opacity:0.85; }
.page-head p { color:rgba(255,255,255,0.92); max-width:580px; margin:0.7rem auto 0; }
.page-head .head-s { position:absolute; right:-2%; bottom:-40%; height:160%; opacity:0.12; pointer-events:none; }

/* =================== FOOTER =================== */
footer { background:var(--black); color:rgba(255,255,255,0.82); margin-top:3rem; border-top:6px solid var(--orange); }
.footer-main { max-width:var(--maxw); margin:0 auto; padding:3rem 1.6rem 1.5rem;
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem; }
.footer-main h4 { color:var(--lys); font-size:1rem; font-weight:700; letter-spacing:0.02em;
  margin-bottom:0.9rem; text-transform:uppercase; }
.footer-logos { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.footer-logos img.snap { height:40px; width:auto; }
.footer-logos img.bim { height:34px; width:auto; }
.footer-logos .div { width:1px; height:30px; background:rgba(255,255,255,0.25); }
.footer-brand p { font-size:0.92rem; color:rgba(255,255,255,0.7); max-width:340px; }
.footer-col a { display:block; color:rgba(255,255,255,0.82); text-decoration:none; font-size:0.94rem; padding:0.28rem 0; }
.footer-col a:hover { color:var(--lys); }
.footer-other { font-size:0.88rem; }
.footer-other a { color:rgba(255,255,255,0.7); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.14); padding:1.1rem 1.6rem; text-align:center;
  font-size:0.8rem; color:rgba(255,255,255,0.55); max-width:var(--maxw); margin:0 auto; }
.footer-bottom a { color:rgba(255,255,255,0.7); text-decoration:none; }
.footer-bottom a:hover { color:var(--lys); }

/* =================== UTILITIES =================== */
.center { text-align:center; }
.mt-2 { margin-top:2rem; } .mt-1 { margin-top:1rem; }
.soon-badge {
  display:inline-block; background:var(--paper-2); color:var(--braendt);
  border:1px dashed var(--line); border-radius:100px;
  font-size:0.74rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  padding:0.3rem 0.9rem;
}

@media (max-width:820px){
  .footer-main { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:720px){
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  nav { position:relative; }
  .nav-logo.snap { height:28px; } .nav-logo.bim { height:25px; }
  .hero { padding:3.2rem 1.2rem 3rem; }
  .wrap { padding:2.4rem 1.2rem; }
  .footer-main { grid-template-columns:1fr; }
}