/* Halloween-tema: legges oppå style.css. Fjern lenken til denne fila for å gå tilbake. */
:root {
  --brand: #ff8a1f;
  --brand-deep: #ffb066;
  --on-brand: #14072e;
  --ink: #f6f0ff;
  --ink-soft: #c9bde3;
  --paper: #140a28;
  --tint: #1e1040;
  --line: #3a2468;
  --dark: #08030f;
  --dark-soft: #cfc4e8;
  --dark-line: #2d1b57;
}

::selection { background: var(--brand); color: var(--on-brand); }

/* Knapper: oransje med mørk tekst */
.btn, .btn:hover { color: var(--on-brand); }
.btn:hover { box-shadow: 0 0 0 4px rgba(255, 138, 31, .22), 0 8px 28px rgba(255, 138, 31, .3); }
.btn-quiet { color: var(--brand-deep); background: transparent; }
.btn-quiet:hover { color: var(--brand-deep); background: var(--tint); box-shadow: none; }

/* Stripe øverst */
.spooky-strip { background: var(--brand); color: #14072e; text-align: center; font-weight: 600; font-size: .98rem; padding: .55rem 1rem; }
.spooky-strip p { display: flex; align-items: center; justify-content: center; gap: .6rem; color: #14072e; }
.spooky-strip svg { width: 1.6rem; height: 1.6rem; flex: none; }

/* Header */
.site-header { background: var(--paper); border-bottom-color: var(--line); }
.brand-link { background: #fff; padding: .35rem .75rem; border-radius: 8px; }
.nav a:hover { color: var(--brand); }

/* Hero: måne, glød og spindelvev */
.hero {
  position: relative;
  background:
    radial-gradient(60% 70% at 88% 8%, rgba(255, 138, 31, .22), transparent 70%),
    linear-gradient(180deg, #230f4d, var(--paper) 92%);
}
.hero .wrap { position: relative; z-index: 1; }
.hero::before {
  content: ""; position: absolute; top: 0; left: 0; width: clamp(140px, 22vw, 260px); aspect-ratio: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' fill='none' stroke='rgb(201,189,227)' stroke-width='1.2'%3E%3Cpath d='M0 0L220 0M0 0L214 70M0 0L190 130M0 0L140 190M0 0L70 214M0 0L0 220'/%3E%3Cpath d='M40 0Q14 14 0 40M80 0Q28 28 0 80M120 0Q42 42 0 120M160 0Q56 56 0 160M200 0Q70 70 0 200'/%3E%3C/svg%3E") no-repeat top left / contain;
  opacity: .45;
}
.hero::after {
  content: ""; position: absolute; z-index: 0; top: clamp(1.25rem, 3vw, 2.5rem); right: clamp(1rem, 8vw, 7rem);
  width: clamp(64px, 9vw, 110px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff3d9, #ffd89a 70%);
  box-shadow: 0 0 60px 18px rgba(255, 190, 110, .35), 0 0 160px 60px rgba(255, 138, 31, .18);
}
.hero h1 { text-shadow: 0 0 36px rgba(255, 138, 31, .35); }
.hero-art img { filter: drop-shadow(0 0 42px rgba(255, 138, 31, .28)); }

/* Flaggermus som flyr over forsiden én gang */
.bats { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.bat { position: absolute; left: 0; width: clamp(34px, 5vw, 58px); color: #a592e0; opacity: .85; animation: bat-fly 13s linear both; }
.bat svg { display: block; width: 100%; height: auto; animation: bat-flap .35s ease-in-out infinite alternate; transform-origin: 50% 60%; }
.bat-1 { top: 18%; animation-delay: .3s; }
.bat-2 { top: 34%; width: clamp(26px, 3.8vw, 44px); animation-duration: 16s; animation-delay: 1.5s; }
.bat-3 { top: 9%; width: clamp(22px, 3vw, 36px); animation-duration: 11s; animation-delay: 3s; }
.bat-still { position: absolute; color: #b9a8ee; opacity: .9; }
.bat-still svg { display: block; width: 100%; height: auto; }
.bat-still-1 { top: clamp(.6rem, 2vw, 1.6rem); right: clamp(7rem, 20vw, 17rem); width: clamp(30px, 4.5vw, 52px); transform: rotate(-12deg); }
.bat-still-2 { top: clamp(4.5rem, 9vw, 8rem); right: clamp(1rem, 4vw, 4rem); width: clamp(22px, 3vw, 34px); transform: rotate(14deg); }
@keyframes bat-fly {
  0%   { transform: translate(-12vw, 0); }
  25%  { transform: translate(24vw, -26px); }
  50%  { transform: translate(52vw, 14px); }
  75%  { transform: translate(80vw, -22px); }
  100% { transform: translate(112vw, 8px); }
}
@keyframes bat-flap { from { transform: scaleY(1); } to { transform: scaleY(.55); } }

/* Lysere nyanser i seksjonene */
.alt { background: #1b0e38; border-block-color: var(--line); }
.quote-section { background: var(--tint); }
.dark { background: var(--dark); }
.trade { background: var(--tint); border: 1px solid var(--line); }
.trade:hover { background: #2a1558; border-color: var(--brand); box-shadow: 0 0 32px rgba(255, 138, 31, .2); }
.faq summary:hover { color: var(--brand); }
.quote-photo img { border: 2px solid var(--brand); }

/* Skjemaet beholder lys flate og mørk tekst */
.form-panel {
  --brand: #b8420a;
  --brand-deep: #8f3206;
  --on-brand: #fff;
  --ink: #14072e;
  --ink-soft: #4a4366;
  --paper: #fbfaff;
  --line: #dcd6f4;
  --tint: #f0edff;
  box-shadow: 0 0 0 2px var(--brand), 0 0 60px rgba(255, 138, 31, .25);
}
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(184, 66, 10, .3); }
.slot input:checked + span { color: var(--on-brand); }
.day-btn[aria-pressed="true"] { color: var(--on-brand); }
.form-panel a { color: var(--brand-deep); }

/* Om oss: egen mørk flate med tydelig lys tekst */
#om-oss { background: var(--dark); color: #f6f0ff; }
#om-oss h2 { color: #fff; }
#om-oss .about p { color: #e4d9f7; }

/* Bunn */
.site-footer { background: var(--dark); border-top: 2px solid var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .bat { display: none; }
}