:root{
  --bg:#0b1030;
  --bg2:#1d1f47;
  --card:#1d214c;

  --text:#e4a604;         /* brand gold */
  --muted:#ffe066;
  --ink:#0b0d26;

  --border: rgba(255,224,102,.10);
  --shadow: 0 12px 28px rgba(0,0,0,.40);
  --corner: 20px;
  --header-h: 88px; /* mobile header height used by the overlay */
}

/* =============== Base & global backdrop (seamless) =============== */
*{ box-sizing:border-box }
html,body{ height:100% }

/* Fallback color used while the URL bar animates on mobile */
html{ background:#20265a; }

/* Global backdrop: gold glow from bottom-left + top→bottom vertical gradient */
html::before{
  content:"";
  position:fixed;
  /* overscan so it still covers when the mobile URL bar collapses/expands */
  top:-100vh; right:-10vw; bottom:-100vh; left:-10vw;
  z-index:-1; pointer-events:none;
  background:
    /* Gold glow (kept exactly as you set it — fully transparent stops) */
    radial-gradient(1300px 850px at -6% 106%,
      rgba(228,166,4,0) 0%,
      rgba(228,166,4,0) 34%,
      rgba(228,166,4,0) 64%),
    /* Top → bottom, identical to your original tones */
    linear-gradient(
      180deg,
      #0b1030 0%,
      #10163b 26%,
      #18205a 58%,
      #212a6f 78%,
      #2a327e 100%
    );
  /* no background-attachment:fixed — position:fixed already pins it and avoids mobile culling */
  will-change:transform;
  transform:translateZ(0);
}

/* Site-wide soft-light + noise texture (very subtle) */
html::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    url("/noise.webp"),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.16) 100%);
  mix-blend-mode:soft-light;
  opacity:.50;
}

/* Ensure full viewport coverage */
body{
  margin:0; padding:0;
  background:transparent;       /* let the global backdrop show through */
  color:var(--text);
  font-family:'Bahnschrift',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-weight:bold;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
}
@supports (height:100dvh){
  body{ min-height:100dvh; }
}
/* Prevent background scrolling when a modal/overlay is open */
body.no-scroll{ overflow: hidden; }

a{ color:var(--muted); text-decoration:none }
a:hover{ text-decoration:underline }
a:focus-visible, button:focus-visible, .btn:focus-visible, .tile:focus-visible{
  outline:3px solid var(--muted);
  outline-offset:2px;
  border-radius:12px;
}

/* =============== Header =============== */
.site-header{
  background:transparent !important; /* no seam */
  padding:20px 40px;
  display:flex; align-items:center; justify-content:center; gap:16px;
  position:relative; z-index:1000;
  border-bottom:0 !important;
  transition:box-shadow .2s ease;
}
.site-header.is-scrolled{ box-shadow:0 8px 24px rgba(0,0,0,.25); }

.brand-mark{ height:50px; width:95px; display:block }

.site-header nav ul{
  list-style:none; display:flex; gap:20px; padding:0; margin:0; z-index:9999;
}
.site-header nav ul li{ display:flex; align-items:center }
.site-header a{ color:var(--text) }
.site-header nav a[aria-current="page"]{
  text-decoration:underline; text-underline-offset:3px;
}
.site-header .admin-only{ display:none; align-items:center }
.hamburger{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  width:40px; height:40px; background:none; border:none; cursor:pointer; z-index:1001
}
.hamburger span{
  display:block; width:28px; height:4px; margin:4px 0; background:var(--text); border-radius:2px; transition:.3s
}

/* Cart button – base look (shared across pages) */
#cartBtn{
  background:none; border:none; position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:0; margin:0; cursor:pointer;
}
#cartBtn span:first-child{ font-size:2rem; line-height:1; }
#cartCount{
  position:absolute; top:-6px; right:-6px;
  background:var(--text); color:var(--ink);
  border-radius:50%; padding:2px 7px; font-size:.85rem;
  min-width:22px; text-align:center; line-height:1;
}

@media(max-width:700px){
  .site-header{ min-height: var(--header-h); }

  .site-header nav ul{
    display:none;
    position:fixed; z-index:2000;
    top: var(--header-h);              /* ✅ sit exactly under the header */
    left:0; right:0; bottom:0;
    width:100vw; padding:12px 16px 24px; overflow:auto;
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(29,31,71,.96), rgba(19,23,53,.96));
    align-content:start;
    grid-auto-rows:min-content;
  }
  .site-header nav ul.open{
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:8px 16px; /* compact, no huge gaps */
  }
  .site-header nav ul li{ display:block; width:100% }
  .site-header nav ul li a{ display:block; width:100%; padding:12px 24px; text-align:left }
  .hamburger{ display:flex }
}


/* Cart button placement – only when header has the flag */
.site-header.has-cart #cartBtn{
  position:absolute; right:16px; top:50%;
  transform:translateY(-50%);
  z-index:1002;                 /* above nav overlay edge */
}

/* Move hamburger left a bit when cart is present (mobile & desktop) */
.site-header.has-cart .hamburger{
  position:absolute; right:64px; top:50%;
  transform:translateY(-50%);
}

/* =============== Utilities =============== */
.wrap{ max-width:1200px; margin:0 auto; padding:0 16px }
.section{ padding: clamp(28px, 5vw, 56px) 20px }

/* =============== Cards & Tiles =============== */
.card{
  position:relative;
  background: linear-gradient(180deg, var(--card), #20245a);
  border-radius: var(--corner);
  padding:18px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.55); }
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.02);
}

.tile{
  position:relative;
  display:flex; flex-direction:column; gap:6px;
  min-height:110px;
  text-decoration:none;
  background: linear-gradient(180deg, var(--card), #20245a);
  border-radius: var(--corner);
  padding:18px 16px;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  color:#e8e0b0;
}
.tile:hover{ transform:translateY(-4px); box-shadow:0 18px 36px rgba(0,0,0,.55); }
.tile::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.02);
}
.tile h3{ margin:0; color:#fff; font-size:1.15rem; letter-spacing:.2px; }
.tile p{ margin:0; color:#e8e0b0; opacity:.95; }

/* Banner card */
.card.banner{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background: linear-gradient(180deg, #23275f, #1b1f49);
  border:1px solid var(--border);
}

/* Grids */
.grid{ display:grid; gap:16px }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.grid.cols-4{ grid-template-columns:repeat(4,1fr) }
@media(max-width:900px){ .grid.cols-4{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:640px){ .grid.cols-3,.grid.cols-4{ grid-template-columns:1fr } }

/* =============== Buttons =============== */
.btn{
  background:var(--text); color:var(--ink);
  border:none; cursor:pointer;
  padding:12px 18px; border-radius:12px;
  font:inherit; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow: var(--shadow);
  transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn:hover{ filter:brightness(1.05); transform: translateY(-1px); box-shadow:0 16px 30px rgba(0,0,0,.5); }
.btn:active{ transform:translateY(0); filter:brightness(.98) }
.btn.alt{
  background:transparent; outline:2px solid var(--text); color:var(--text)
}
.btn.ghost{
  background:transparent; color:var(--muted); outline:1px dashed rgba(255,224,102,.6)
}
.btn[disabled], .btn:disabled{
  opacity:.6; cursor:not-allowed;
}

/* =============== Forms =============== */
input, select, textarea{
  font:inherit; color:var(--text);
  background:#23255a; border:0; border-radius:12px;
  padding:12px 10px; width:100%;
}
input::placeholder, textarea::placeholder{ color:rgba(255,224,102,.7) }
input:focus, select:focus, textarea:focus{
  outline:3px solid rgba(255,224,102,.5);
  outline-offset:2px;
}

/* Floating label */
.field{ position:relative; margin:0 0 14px }
.field input, .field select, .field textarea{ width:100% }
.field label.floating{
  position:absolute; left:12px; top:12px;
  color:rgba(255,224,102,.85);
  pointer-events:none;
  transition:transform .15s ease, font-size .15s ease, top .15s ease, opacity .15s ease, background .15s ease, padding .15s ease;
  opacity:.95;
}
.field.has-value label.floating,
.field input:focus + label.floating,
.field select:focus + label.floating,
.field textarea:focus + label.floating{
  top:-8px; left:10px; font-size:.78rem; background:var(--card); padding:0 6px; border-radius:6px;
}

/* Date input tweaks */
.field input[type="date"]{
  min-height:48px; padding-block:12px;
  -webkit-appearance:none; appearance:none; color-scheme: dark;
}
.field:not(.has-value) input[type="date"]{ color:transparent; caret-color: var(--text); }
.field:not(.has-value) input[type="date"]::-webkit-datetime-edit,
.field:not(.has-value) input[type="date"]::-webkit-date-and-time-value{ color:transparent; }
.field.has-value input[type="date"], .field input[type="date"]:focus{ color:var(--text); }
.field.has-value input[type="date"]::-webkit-datetime-edit,
.field input[type="date"]:focus::-webkit-datetime-edit{ color:var(--text); }

/* =============== Sale card states =============== */
.card.reserved::after,
.card.bought::after{
  content: attr(data-state);
  position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45);
  color:#fff; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
}
.card .price-badge{
  position:absolute; right:10px; bottom:10px;
  background:var(--text); color:#131735;
  font-weight:800; padding:6px 10px; border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

/* =============== Footer =============== */
.site-footer{
  background:transparent !important;
  border-top:0 !important;
  text-align:center; padding:20px;
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem; color:#cfd6ff; gap:16px; flex-wrap:wrap;
}
.site-footer img{ height:32px; width:32px }

/* =============== Helpers =============== */
.hidden{ display:none !important }
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =============== Hero polish =============== */
/* Keep hero transparent; remove the “circle” mid-page glow entirely */
.hero{ background:transparent !important; position:relative; }
/* remove the circle low-light gradient from the hero */
.hero .inner::after{ content:none !important; }
/* also ensure any old hero overlay is gone */
.hero::after{ content:none !important; }

/* Emoji highlight boxes used on index */
.usp-grid{
  position: relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(300px, 1fr));
  gap:16px; margin-top:18px;
}

@media (max-width:1100px){ .usp-grid{ grid-template-columns:repeat(2, minmax(260px, 1fr)); } }
@media (max-width:640px){ .usp-grid{ grid-template-columns:1fr; } }

/* Hide the big hero logo on phones */
@media (max-width: 980px){
  .hero-visual { display:none !important; }
}

.usp{
  background:linear-gradient(180deg, var(--card), #20245a);
  border:1px solid var(--border);
  border-radius:14px; padding:16px 18px;
  box-shadow:var(--shadow);
  cursor:pointer
}
.usp-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.usp-head .emoji{ font-size:22px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.usp-head .title{ color:#fff; font-weight:900; font-size:1.15rem; align-items: center;}
.usp-desc{ margin:0; color:#e8e0b0; font-weight:800; line-height:1.35; text-align: left;}

/* Dim background cards when big card is open (optional) */
.usp-grid.expandable.is-open .usp{ filter:brightness(.85); }

/* Fixed overlay that always appears over the grid (same place every time) */
.usp-overlay{
  position:absolute; inset:0;               /* cover the grid area */
  display:none; align-items:flex-start;     /* big card sticks to the top like "Fællesskab" */
  justify-content:stretch;
  z-index:30;                               /* over the small cards */
  pointer-events:none;                      /* clicks pass through when hidden */
}
.usp-overlay.is-open{ display:flex; pointer-events:auto; }

/* Big card – same look as your tiles, spans full grid width */
.usp-overlay-card{
  width:100%;
  background: linear-gradient(180deg, #23275f, #1b1f49);
  border:1px solid var(--border);
  border-radius: var(--corner);
  box-shadow: var(--shadow);
  padding: clamp(18px, 2.5vw, 28px);
  margin: 0;                                /* sits at the top of the grid */
  transform-origin: top center;
  transform: scale(.98);
  opacity:0;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
  position:relative;
}
.usp-overlay.is-open .usp-overlay-card{
  transform: none;
  opacity:1;
}
/* --- Mobile: show the big card as a real modal over the whole screen --- */
@media (max-width: 700px){
  .usp-overlay{
    position: fixed;                 /* cover viewport instead of grid */
    inset: 0;
    padding: 24px;
    background: rgba(11,16,48,.55);  /* subtle dim */
    backdrop-filter: blur(6px);
    align-items: center;         /* centered vertically */
    justify-content: center;         /* centered horizontally */
    z-index: 1100;
  }

  .usp-overlay-card{
    width: 100%;
    max-width: 640px;
    margin: 0;                           /* ⬅️ no push from the top */
    max-height: 86vh;                /* scroll inside if needed */
    overflow: auto;
    border-radius: 16px;
  }

  /* optional: don’t dim the small tiles on mobile while modal is open */
  .usp-grid.expandable.is-open .usp{ filter:none; }
}


/* Close button */
.usp-close{
  position:absolute; top:10px; right:12px;
  width:36px; height:36px; border-radius:50%;
  border:0; background:rgba(255,255,255,.08); color:#fff;
  font-size:22px; line-height:1; cursor:pointer;
}
.usp-close:hover{ background:rgba(255,255,255,.15); }

/* Reuse the small-card head styles inside the big card */
.usp-overlay-card .usp-head{ display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.usp-overlay-card .emoji{ font-size:28px; }
.usp-overlay-card .title{ font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight:900; color:#fff; }
.usp-overlay-card p{ margin:.4rem 0; color:#e8e0b0; font-weight:800; line-height:1.35; }

/* Give the grid some extra bottom space so the big card never feels cramped */
.usp-grid.expandable{ padding-bottom: 16px; }