/* Festive fonts (used mainly on Brev-siden) */
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

:root{
  --sfh-bg:#07131f;          /* deep navy */
  --sfh-bg-2:#0a1c2f;        /* slightly lighter navy */
  --sfh-card:#0d243a;        /* card surface */
  --sfh-ink:#eaf2ff;         /* main text on dark */
  --sfh-muted:rgba(234,242,255,.72);

  --brand-red:#b80f20;
  --brand-gold:#d9b24c;
  --brand-gold-2:#b88a2a;
  --brand-green:#0f7a3a;

  --paper:#f6e7c9;
  --shadow: 0 18px 55px rgba(0,0,0,.28);
}

/* ---- Global look (inspired by santaforhire.com: dark/navy + gold/red accents) ---- */
body{
  color: var(--sfh-ink);
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(217,178,76,.14), transparent 55%) fixed,
    radial-gradient(900px 600px at 80% 10%, rgba(184,15,32,.16), transparent 55%) fixed,
    linear-gradient(180deg, var(--sfh-bg) 0%, var(--sfh-bg-2) 100%) fixed;
}

/* Soft starry overlay */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
  background-image:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.9) 1.2px, transparent 1.3px),
    radial-gradient(circle at 38px 30px, rgba(255,255,255,.55) 1px, transparent 1.1px),
    radial-gradient(circle at 70px 18px, rgba(217,178,76,.55) 1px, transparent 1.1px);
  background-size: 120px 120px;
}

/*
  Stacking context fix:
  We must ensure the header/nav always paints above <main>.
  If header and main share the same z-index (and both create stacking contexts),
  <main> can end up above the dropdowns on all pages.
*/
header{ position: relative; z-index: 3000; }
nav{ position: relative; z-index: 3050; }
main, footer{ position: relative; z-index: 1; }

/* Keep the navbar above page content and overlays */
.navbar{ z-index: 1050; }
.navbar.sticky-top{ z-index: 1050; }

/* Dropdown menus should always render above everything else */
.dropdown-menu{ z-index: 4000; }

/* Typography */
h1,h2,h3,.brand-title{ font-family: ui-serif, Georgia, "Times New Roman", Times, serif; }
body, .navbar, .btn, .form-control, .form-select{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* ---- Top ribbon ---- */
.top-ribbon{
  background: linear-gradient(90deg, rgba(184,15,32,.95), rgba(217,178,76,.92));
  border-bottom: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
  position: relative;
  z-index: 1040;
}
.top-ribbon a{ color: rgba(255,255,255,.92); text-decoration: none; }
.top-ribbon a:hover{ text-decoration: underline; }

/* ---- Navbar ---- */
.navbar{
  background: rgba(7,19,31,.82) !important;
  border-bottom: 1px solid rgba(217,178,76,.25) !important;
  backdrop-filter: blur(10px);
}
.navbar .navbar-brand{ color: var(--sfh-ink); }
.navbar .navbar-brand:hover{ color: #fff; }
.navbar .nav-link{ color: rgba(234,242,255,.80); }
.navbar .nav-link:hover{ color: #fff; }
.navbar .nav-link.active{ color: #fff; }
.dropdown-menu{
  background: rgba(13,36,58,.98);
  border: 1px solid rgba(217,178,76,.22);
  box-shadow: var(--shadow);
}
.dropdown-item{ color: rgba(234,242,255,.86); }
.dropdown-item:hover{ background: rgba(217,178,76,.12); color:#fff; }
.navbar-toggler{ border-color: rgba(217,178,76,.35); }
.navbar-toggler-icon{ filter: invert(1) brightness(1.3); }

/* ---- Hero ---- */
.hero{
  background:
    radial-gradient(900px 360px at 18% 10%, rgba(217,178,76,.25), transparent 60%),
    radial-gradient(700px 320px at 80% 30%, rgba(184,15,32,.28), transparent 62%),
    linear-gradient(135deg, rgba(13,36,58,.92), rgba(7,19,31,.92));
  border: 1px solid rgba(217,178,76,.22);
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero .lead{ color: rgba(234,242,255,.80); }
.badge-soft{
  background: rgba(217,178,76,.12);
  border: 1px solid rgba(217,178,76,.22);
  color: rgba(234,242,255,.92);
}

/* Decorative corners on main content area */
.page-wrap{ position: relative; }
.page-wrap::before,
.page-wrap::after{
  pointer-events: none;
  z-index: 0;
  position:absolute;
  width:72px;height:72px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(217,178,76,.18);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 32px;
  line-height: 1;
  color: rgba(255,255,255,.92);
}
.page-wrap::before{ content:"❄"; top:-14px; left:-10px; transform: rotate(-10deg); }
.page-wrap::after{ content:"⭐"; top:-14px; right:-10px; transform: rotate(10deg); }

/* ---- Cards / content surfaces ---- */
.card{
  background: rgba(13,36,58,.92);
  border: 1px solid rgba(217,178,76,.18);
  border-radius: 1.25rem;
  box-shadow: 0 16px 46px rgba(0,0,0,.25);
}
.text-secondary{ color: var(--sfh-muted) !important; }
hr{ border-color: rgba(255,255,255,.12); }

/* ---- Buttons ---- */
.btn-brand{
  background: linear-gradient(180deg, rgba(184,15,32,1), rgba(143,11,23,1));
  border-color: rgba(184,15,32,1);
  color:#fff;
}
.btn-brand:hover{ filter: brightness(1.05); color:#fff; }
.btn-outline-secondary{
  border-color: rgba(234,242,255,.35) !important;
  color: rgba(234,242,255,.85) !important;
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}

/* ---- Footer ---- */
.footer-dark{
  background: rgba(7,19,31,.92);
  border-top: 1px solid rgba(217,178,76,.18);
}
.footer-dark .link-secondary{ color: rgba(234,242,255,.72) !important; }
.footer-dark .link-secondary:hover{ color: #fff !important; }
.footer-dark .text-secondary{ color: rgba(234,242,255,.62) !important; }

/* ---- Forms ---- */
.form-control, .form-select{
  background: rgba(7,19,31,.55);
  border: 1px solid rgba(217,178,76,.16);
  color: rgba(234,242,255,.92);
}
.form-control::placeholder{ color: rgba(234,242,255,.55); }
.form-control:focus, .form-select:focus{
  box-shadow: 0 0 0 .25rem rgba(217,178,76,.18);
  border-color: rgba(217,178,76,.32);
}
label.form-label{ color: rgba(234,242,255,.88); }

/* ---- Footer ---- */
footer{
  background: rgba(7,19,31,.72) !important;
  border-top: 1px solid rgba(217,178,76,.20);
}
footer .link-secondary{ color: rgba(234,242,255,.75) !important; }
footer .link-secondary:hover{ color:#fff !important; }

/* ---- Snow canvas + sleigh overlay ---- */
/* Snow should sit above content but below nav/dropdowns */
#snow-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
}

.sleigh{
  position: fixed;
  top: 70px;
  left: -420px;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.35));
  opacity: .96;
}

.sleigh svg{ width: 360px; height: auto; display: block; }

@keyframes sleigh-fly{
  0%{ transform: translateX(-420px) translateY(0) rotate(-2deg); }
  15%{ transform: translateX(10vw) translateY(-10px) rotate(0deg); }
  55%{ transform: translateX(60vw) translateY(6px) rotate(1deg); }
  100%{ transform: translateX(calc(100vw + 520px)) translateY(-6px) rotate(2deg); }
}
.sleigh.is-flying{ animation: sleigh-fly 16s linear forwards; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #snow-canvas, .sleigh{ display:none !important; }
}

/* ---- Booking slots ---- */
.slot-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}
@media (max-width: 768px){
  .slot-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.slot-btn{
  border-radius: 999px;
  border: 1px solid rgba(217,178,76,.22);
  background: rgba(7,19,31,.55);
  padding: .55rem .75rem;
  font-weight: 800;
  color: rgba(234,242,255,.92);
}
.slot-btn[aria-pressed="true"]{
  background: rgba(217,178,76,.14);
  border-color: rgba(217,178,76,.38);
}
.slot-btn.is-taken{
  opacity: .5;
  text-decoration: line-through;
  pointer-events: none;
}

.shake{ animation: shake .35s ease-in-out; }
@keyframes shake{
  0%,100%{ transform: translateX(0); }
  25%{ transform: translateX(-6px); }
  50%{ transform: translateX(6px); }
  75%{ transform: translateX(-4px); }
}

/* Gallery */
.gallery-img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 1rem;
  border: 1px solid rgba(217,178,76,.16);
}

/* Parchment letter look (for the letter page) */
.parchment{
  color: #2b2b2b;
  background: linear-gradient(180deg, #f9edcf 0%, var(--paper) 40%, #f3dfb7 100%);
  border: 1px solid rgba(80,40,10,.25);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
  position: relative;
  overflow: hidden;
}
.parchment::before{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width:200px;height:200px;
  background: rgba(184,15,32,.10);
  border-radius: 50%;
}
.parchment::after{
  content:"";
  position:absolute;
  left:-40px; bottom:-40px;
  width:170px;height:170px;
  background: rgba(15,122,58,.12);
  border-radius: 50%;
}

/* ---- Brev til julemanden (inspired by aletter4santa.com: bold “Dear Santa” + stationery look) ---- */
.letter-stage{
  position: relative;
}

.letter-stage .letter-kicker{
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  padding: .45rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(217,178,76,.25);
  background: rgba(13,36,58,.55);
  color: rgba(234,242,255,.92);
  font-weight: 800;
}

.letter-form-card{
  border: 1px solid rgba(217,178,76,.16) !important;
  background: radial-gradient(900px 420px at 10% 0%, rgba(184,15,32,.12), transparent 55%),
              radial-gradient(900px 420px at 90% 10%, rgba(217,178,76,.12), transparent 55%),
              rgba(13,36,58,.92) !important;
}

.letter-paper{
  font-family: "Crimson Text", ui-serif, Georgia, serif;
  line-height: 1.75;
}

.letter-paper .dear{
  font-family: "Mountains of Christmas", system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: .5px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color: #7b0f18;
  margin-bottom: .35rem;
}

.letter-paper .meta{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  color: rgba(43,43,43,.78);
  font-weight: 600;
  margin-bottom: .8rem;
}

.letter-paper .ruled{
  padding-top: 6px;
  background-image: linear-gradient(to bottom, rgba(80,40,10,.10) 1px, transparent 1px);
  background-size: 100% 30px;
  border-radius: 14px;
}

.wax-seal{
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 35%),
              radial-gradient(circle at 65% 70%, rgba(0,0,0,.15), transparent 55%),
              linear-gradient(180deg, #b80f20, #7f0b15);
  box-shadow: 0 18px 30px rgba(0,0,0,.25);
  border: 2px solid rgba(80,40,10,.18);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-family: "Mountains of Christmas", system-ui, sans-serif;
}

.stamp{
  position: absolute;
  top: 16px;
  right: 16px;
  width: 92px;
  height: 112px;
  border-radius: 14px;
  border: 2px dashed rgba(80,40,10,.22);
  background: rgba(184,15,32,.08);
  display: grid;
  place-items: center;
  font-family: "Mountains of Christmas", system-ui, sans-serif;
  color: rgba(123,15,24,.88);
}


/* Santa GIF sled (jQuery) */
.santa{position:fixed;bottom:10px;right:-500px;z-index:9999;pointer-events:none;}
.santa img{max-width:400px;height:auto;}