/* === Wedding Theme (Sage + Blush) ========================================= */
/* === Invitation styles (Elisabeth & Casper) ================================== */
:root{
  --countdown-h: 56px;  /* height of countdown footer (reduced from 72px) */
  --tabbar-h:   56px;   /* height of mobile tabbar (set to 0px if unused) */

  --paper: #F6F4EF;                 /* Light "paper" */
  --ink-strong: #2A2A2A;
  --accent-blush: #e7c3bd;          /* Button border accent */
  --accent-blush-ink: #7b4e49;      /* Button text color */

  /* Palette (kan tweakes frit) */
  --sage-900:#3E5E55;
  --sage-700:#59796E;
  --sage-600:#6B8C7D;
  --sage-500:#7A9A8A;   /* primary */
  --sage-300:#AECBBA;
  --sage-200:#BFD3C1;   /* lys baggrund */
  --blush-500:#E5B7B2;  /* secondary */
  --rose-600:#B88486;   /* dark blush */
  --gold-500:#C8A96A;   /* varm gulddetalje */
  --ink:#2B2B2B;
  --ivory:#F6F4EF;

  /* App tokens */
  --brand-bg: var(--sage-200);
  --brand-ink: var(--ink);
  --brand-accent: var(--sage-500);
  --brand-accent-2: var(--blush-500);
  --brand-border: rgba(0,0,0,.08);
  --brand-text: var(--ink);
  --brand-primary: var(--sage-500);
  --brand-primary-ink: #fff;
  --brand-primary-hover: var(--sage-600);
  --brand-secondary: var(--blush-500);
  --brand-secondary-ink: #2b2b2b;
  --brand-secondary-hover: var(--rose-600);
  --brand-focus: var(--blush-500);

  /* Komponent-specifikke tokens til dine filer */
  --upload-border: var(--gold-500);
  --upload-bg: #fffdf8;
  --upload-bg-hover: #fff8e6;

  --alert-ok-bg: #f1faef;
  --alert-ok-stroke: #b7e0b1;
  --alert-ok-text: #155724;
  --alert-warn-bg: #fff5f1;
  --alert-warn-stroke: #f3c2a7;
  --alert-warn-text: #8a3b14;
  --alert-inf-bg: var(--sage-200);
  --alert-inf-text: var(--sage-700);
  --alert-inf-stroke: var(--blush-500);
  --alert-dang: #f8d7da;
  --alert-dang-text: #721c24;
  --alert-dang-stroke: #f5c6cb;
}

/* Mulighed for at nulstille tabbar-h pr. side */
body.no-tabbar{ --tabbar-h: 0px; }

/* --- Alerts --- */
.alert-ok, .alert-warn, .alert-inf, .alert-dang{ margin-bottom:12px; padding:10px 12px; border-radius:10px; text-align:center; }
.alert-ok{ background:var(--alert-ok-bg); color:var(--alert-ok-text); box-shadow: inset 0 0 0 1px var(--alert-ok-stroke); }
.alert-warn{ background:var(--alert-warn-bg); color:var(--alert-warn-text); box-shadow: inset 0 0 0 1px var(--alert-warn-stroke); }
.alert-inf{  background:var(--alert-inf-bg); color:var(--alert-inf-text);  box-shadow: inset 0 0 0 1px var(--alert-inf-stroke); }
.alert-dang{ background:var(--alert-dang); color:var(--alert-dang-text); box-shadow: inset 0 0 0 1px var(--alert-dang-stroke); }

body{
  background: var(--sage-500);
  color:var(--brand-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{ color:var(--brand-accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Bootstrap focus i mild sage */
.btn:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus{
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-focus) 40%, transparent);
  border-color: var(--brand-focus);
}

/* Bootstrap knapper → bind til tema */
.btn-primary{
  --bs-btn-bg:var(--brand-primary);
  --bs-btn-color:var(--brand-primary-ink);
  --bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-bg:var(--brand-primary-hover);
  --bs-btn-hover-border-color:var(--sage-700);
}
.btn-outline-primary{
  --bs-btn-color:var(--brand-primary);
  --bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-bg:var(--brand-primary);
  --bs-btn-hover-color:var(--brand-primary-ink);
}
.btn-secondary{
  --bs-btn-bg:var(--brand-secondary);
  --bs-btn-color:var(--brand-secondary-ink);
  --bs-btn-border-color:var(--brand-secondary);
  --bs-btn-hover-bg:var(--brand-secondary-hover);
  --bs-btn-hover-border-color:var(--brand-secondary-hover);
}
.btn-outline-secondary{
  --bs-btn-color:var(--brand-secondary);
  --bs-btn-border-color:var(--brand-secondary);
  --bs-btn-hover-bg:var(--brand-secondary);
  --bs-btn-hover-color:var(--brand-secondary-ink);
}

/* Små utiliteter */
.bg-sage{ background:var(--sage-200) !important; }
.text-sage{ color:var(--sage-700) !important; }
.bg-blush{ background:var(--blush-500) !important; }
.text-blush{ color:var(--rose-600) !important; }
.border-gold{ border-color: color-mix(in srgb, var(--gold-500) 60%, #fff) !important; }

/* Cards og overflader */
.card{
  background:#fff;
  border:1px solid var(--brand-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* Knapper – lys/sekundær */
.btn{
  --btn-bg:#fff; --btn-ink:var(--ink);
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--brand-border);
  border-radius:.75rem;
  padding:.6rem 1rem; font-weight:600;
  background:var(--btn-bg); color:var(--btn-ink);
  transition: .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.06); }
.btn-secondary{
  --btn-bg: #fff; --btn-ink: #24302b;
  border:2px solid var(--blush-500);
  box-shadow: 0 0 0 3px rgba(229,183,178,.18);
}

/* Tabbar i bunden (dit eksisterende nav) */
.bottom-tabs{
  position:sticky; bottom:0; z-index:3;
  display:flex; justify-content:center; align-items:center; gap:.75rem;
  padding:.8rem max(env(safe-area-inset-left), 16px)
  calc(.8rem + env(safe-area-inset-bottom)) max(env(safe-area-inset-right), 16px);
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(12px);
  border-top:1px solid var(--brand-border);
}
.bottom-tabs .tab{
  background:#fff; border:1px solid var(--brand-border);
  border-radius: 18px; padding:.7rem 1.1rem; font-weight:600;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

/* Små helpers */
.container{ max-width: 960px; margin:0 auto; }
.center{ text-align:center; }

/* Wrapper */
.invite-hero{
  position:relative;
  padding: clamp(16px, 4vw, 32px);
  margin-bottom: var(--countdown-h);
}

/* Star field background */
/* Klip alt udenfor heltesektionen (fjerner horisontal scroll) */
.invite-hero{ position: relative; overflow: clip; }
@supports not (overflow: clip){ .invite-hero{ overflow: hidden; } }

/* Kun lodret bleed – ingen negativ venstre/højre */
:root{ --stars-bleed-block: 12%; } /* justér 0–20% efter smag */

.invite-stars{
  position: absolute;
  inset-inline: 0;                 /* left/right = 0 => ingen “luft” til siderne */
  top: calc(-1 * var(--stars-bleed-block));
  bottom: calc(-1 * var(--stars-bleed-block));
  z-index: -1;
  pointer-events: none;
}

/* Pseudo-elementer holdes også inde i boksen (kun lodret bleed) */
.invite-stars::before,
.invite-stars::after{
  content: "";
  position: absolute;
  inset-inline: 0;  /* venstre/højre = 0 */
  top: -8%;
  bottom: -8%;
}

/* Stjerner */
.invite-stars::before{
  background:
          radial-gradient(circle at 20% 30%, rgba(255,255,255,.8) 1px, transparent 2px) repeat,
          radial-gradient(circle at 70% 60%, rgba(255,255,255,.8) 1px, transparent 2px) repeat,
          radial-gradient(circle at 40% 80%, rgba(255,255,255,.8) 1px, transparent 2px) repeat;
  background-size: 140px 140px, 220px 220px, 180px 180px;
  opacity: .45;
}


/* Paper card */
.invite-sheet{
  position:relative; z-index:1;
  width:min(680px, 92vw);
  background: var(--paper);
  border-radius: 22px;
  padding: clamp(22px, 5vw, 48px);
  border:1px solid rgba(0,0,0,.08);
  overflow:hidden; /* <- klipper linjer så de ikke stikker ud af kortet */
}

/* Top titles */
.invite-kicker{
  font-family: "Playfair Display", serif;
  letter-spacing:.02em;
  line-height:1;
  color:#1f1f1f;
  text-transform: uppercase;
}
.invite-names{
  font-family: "Playfair Display", serif;
  font-weight:600;
  margin: .25rem 0 1.1rem 0;
  font-size: clamp(26px, 4vw, 42px);
  color:#1f1f1f;
  text-shadow: 0 1px 0 #fff;
  line-height:1.2;
  letter-spacing:.02em;
  text-transform: uppercase;
}

/* Selve tabbaren behøver ikke fixed længere */
.mobile-tabbar .tab-link{
  flex:1 1 0; text-align:center; background:#fff;
  border:1px solid var(--brand-border); border-radius:.75rem;
  padding:.6rem .5rem; font-weight:600; text-decoration:none; color:#212529;
}


.mobile-tabbar{
  position: sticky; bottom: var(--countdown-h);
  z-index: 1001;
  display:flex; gap:.5rem;
  padding: max(env(safe-area-inset-top), .5rem)
  max(env(safe-area-inset-right), .75rem)
  .5rem
  max(env(safe-area-inset-left), .75rem);
  background: rgba(255,255,255,.95);
}


/* Larger, themed radios */
.form-check-input {
  width: 1.05rem;
  height: 1.05rem;
  border-color: var(--accent-blush);
}
.form-check-input:checked {
  background-color: var(--sage-500);
  border-color: var(--sage-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sage-500) 25%, transparent);
}

/* =============================================================================
   UNIFIED TOP NAVIGATION - Mobile-First with Hamburger Menu
   ============================================================================= */

:root {
  --topnav-h: 56px;           /* Height of unified top navigation */
  --nav-drawer-width: 280px;  /* Width of mobile navigation drawer */
}

/* Main content spacing for navigation */
.main-content {
  padding-bottom: 0;
}

/* When navigation is present, add top padding for fixed nav */
.main-content.has-topnav {
  /* No additional spacing needed since nav is sticky, not fixed */
}

/* =============================================================================
   UNIFIED TOP NAVIGATION BAR (Both Mobile & Desktop)
   ============================================================================= */
.unified-topnav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--brand-border);
  padding: max(env(safe-area-inset-top, 0px), 0px) 0 0 0;
}

.topnav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 16px;
  min-height: var(--topnav-h);
}

/* Brand/Logo (left side) */
.topnav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

.brand-title {
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

.topnav-brand:hover {
  text-decoration: none;
}

.topnav-brand:hover .brand-title {
  color: var(--sage-700);
}

/* Desktop horizontal navigation links */
.topnav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.topnav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 10px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.topnav-link i {
  font-size: 1.1rem;
  color: var(--sage-600);
}

.topnav-link:hover,
.topnav-link:focus {
  background: var(--sage-200);
  text-decoration: none;
  color: var(--ink);
}

.topnav-link.active,
.topnav-link[aria-current="page"] {
  background: var(--sage-200);
  color: var(--sage-700);
}

.topnav-link.active i,
.topnav-link[aria-current="page"] i {
  color: var(--sage-500);
}

/* Desktop More dropdown button */
.topnav-more-btn {
  position: relative;
}

.topnav-more-btn::after {
  display: none; /* Hide Bootstrap dropdown caret */
}

/* Desktop dropdown menu styling */
.topnav-links .dropdown-menu {
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  padding: 8px;
  min-width: 240px;
  margin-top: 8px;
}

.topnav-links .dropdown-item {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ink);
  transition: background 0.15s ease;
}

.topnav-links .dropdown-item i {
  color: var(--sage-600);
}

.topnav-links .dropdown-item:hover,
.topnav-links .dropdown-item:focus {
  background: var(--sage-200);
  color: var(--ink);
}

/* =============================================================================
   HAMBURGER BUTTON (Mobile only)
   ============================================================================= */
.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.hamburger-btn:hover,
.hamburger-btn:focus {
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

.hamburger-btn:focus-visible {
  outline: 2px solid var(--sage-500);
  outline-offset: 2px;
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger-line:not(:last-child) {
  margin-bottom: 5px;
}

/* Hamburger animation to X when active */
.hamburger-btn.active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* =============================================================================
   MOBILE NAVIGATION DRAWER (Slide-down menu)
   ============================================================================= */
.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  background: #fff;
  max-height: calc(100vh - 100px); /* Leave space for mini-player at bottom */
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border-radius: 0 0 20px 20px;
  padding-top: max(env(safe-area-inset-top, 0px), 0px);
}

.nav-drawer.open {
  transform: translateY(0);
}

.nav-drawer-content {
  padding: 72px 16px calc(20px + env(safe-area-inset-bottom, 0px)) 16px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
}

.nav-drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  color: var(--ink);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 12px;
  transition: background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  min-height: 56px; /* Touch-friendly size */
}

.nav-drawer-link i {
  font-size: 1.25rem;
  color: var(--sage-600);
  width: 24px;
  text-align: center;
}

.nav-drawer-link:hover,
.nav-drawer-link:focus {
  background: var(--sage-200);
  text-decoration: none;
  color: var(--ink);
}

.nav-drawer-link:active {
  background: var(--sage-300);
}

/* Ensure mini-player is not covered by navigation */
@media (max-width: 767.98px) {
  /* Mini-player stays below navigation drawer z-index */
  #mini-player-container {
    z-index: 998;
  }
}