/* ============================================================
   TEMA – MARCOS UBEDA
   Mörkt, varmt tema med guld/creme-accenter, hämtat från den
   tidigare sajten (marcosubeda.com). Serif-rubriker, sans brödtext.
   Kontrast kontrollerad (minst 4.5:1 för all text):
   https://webaim.org/resources/contrastchecker/
   ============================================================ */
:root {
  color-scheme: dark; /* Native kontroller (audio, formulär) i mörkt läge */

  /* Färger */
  --farg-primar: #d4b06a;          /* Guld: knappar, länkar, accenter */
  --farg-primar-mork: #e3c485;     /* Ljusare guld: hover-lägen på mörk bakgrund */
  --farg-accent: #ffe0b2;          /* Creme: underrubriker, etiketter */
  --farg-text: #f1ece3;            /* Brödtext */
  --farg-text-dampad: #b9b3a8;     /* Sekundär text */
  --farg-text-invers: #1c1c1c;     /* Text på guldknappar */
  --farg-bakgrund: #262626;        /* Sidans bakgrund */
  --farg-bakgrund-alternativ: #1d1d1d; /* Varannan sektion */
  --farg-kort: #2e2e2e;            /* Kort och paneler */
  --farg-kant: #414141;            /* Kantlinjer, formulärfält */

  /* Typsnitt – systemtypsnitt = inga nedladdningar = snabbt.
     Playfair Display används om den finns lokalt, annars Georgia. */
  --typsnitt-rubrik: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --typsnitt-brod: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Mått */
  --max-bredd: 1100px;
  --radie: 6px;
}

/* ============================================================
   GRUND (mobil först)
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* Så att ankare inte hamnar under sidhuvudet */
}

body {
  margin: 0;
  font-family: var(--typsnitt-brod);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--farg-text);
  background: var(--farg-bakgrund);
}

h1, h2, h3 {
  font-family: var(--typsnitt-rubrik);
  font-weight: 700;
  line-height: 1.15;
  color: var(--farg-text);
  margin: 0 0 0.75rem;
}

h1 { font-size: 2.4rem; letter-spacing: 0.01em; }
h2 { font-size: 1.7rem; }
h3 { font-size: 1.25rem; }

p {
  margin: 0 0 1rem;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--farg-primar);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--farg-primar-mork);
}

/* Synlig fokusmarkering för tangentbordsnavigering */
:focus-visible {
  outline: 3px solid var(--farg-accent);
  outline-offset: 3px;
}

.behallare {
  max-width: var(--max-bredd);
  margin: 0 auto;
  padding: 0 1rem;
}

.behallare--smal {
  max-width: 760px;
}

/* Dölj visuellt men behåll för skärmläsare */
.visuellt-dold {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hopplänk – syns bara vid tangentbordsfokus */
.hoppa-till-innehall {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--farg-primar);
  color: var(--farg-text-invers);
  padding: 0.5rem 1rem;
  z-index: 100;
}

.hoppa-till-innehall:focus {
  left: 0;
  color: var(--farg-text-invers);
}

/* Liten guldstjärna som avdelare / rubrikprydnad */
.avdelare {
  color: var(--farg-primar);
  text-align: center;
  font-size: 1.1rem;
  letter-spacing: 0.6em;
  margin: 0 0 1.25rem;
}

/* Etikett ovanför rubriker ("eyebrow") */
.etikett {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--farg-accent);
  margin-bottom: 0.5rem;
}

.ingress {
  font-size: 1.1rem;
  color: var(--farg-text-dampad);
  max-width: 60ch;
}

.text-dampad {
  color: var(--farg-text-dampad);
}

/* ============================================================
   SIDHUVUD OCH MENY
   ============================================================ */
.sidhuvud {
  background: rgba(29, 29, 29, 0.96);
  border-bottom: 1px solid var(--farg-kant);
  position: sticky;
  top: 0;
  z-index: 50;
}

.sidhuvud__inre {
  max-width: var(--max-bredd);
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.logotyp {
  font-family: var(--typsnitt-rubrik);
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--farg-text);
  letter-spacing: 0.02em;
}

.logotyp:hover {
  color: var(--farg-primar);
}

/* Hamburgerknapp – syns bara på mobil */
.meny-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--farg-kant);
  border-radius: var(--radie);
  cursor: pointer;
}

.meny-knapp__streck,
.meny-knapp__streck::before,
.meny-knapp__streck::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--farg-text);
  position: relative;
  transition: transform 0.2s ease;
}

.meny-knapp__streck::before,
.meny-knapp__streck::after {
  content: "";
  position: absolute;
}

.meny-knapp__streck::before { top: -7px; }
.meny-knapp__streck::after  { top: 7px; }

.meny-knapp[aria-expanded="true"] .meny-knapp__streck {
  background: transparent;
}

.meny-knapp[aria-expanded="true"] .meny-knapp__streck::before {
  transform: translateY(7px) rotate(45deg);
}

.meny-knapp[aria-expanded="true"] .meny-knapp__streck::after {
  transform: translateY(-7px) rotate(-45deg);
}

.huvudmeny {
  display: none;
  width: 100%;
}

.huvudmeny.oppen {
  display: block;
}

.huvudmeny ul {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.huvudmeny a {
  display: block;
  padding: 0.75rem 0;
  text-decoration: none;
  color: var(--farg-text);
  border-top: 1px solid var(--farg-kant);
}

.huvudmeny a:hover,
.huvudmeny a[aria-current="page"] {
  color: var(--farg-primar);
}

/* Menylänk som sticker ut (Charts) */
.huvudmeny a.huvudmeny__markerad {
  color: var(--farg-primar);
  font-weight: 600;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(212, 176, 106, 0.16), transparent 70%),
    var(--farg-bakgrund-alternativ);
  color: var(--farg-text);
  text-align: center;
  padding: 4rem 0 3.5rem;
  border-bottom: 1px solid var(--farg-kant);
}

.hero h1 {
  margin: 0 0 0.75rem;
  font-size: 2.8rem;
}

.hero__tagline {
  font-family: var(--typsnitt-rubrik);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.hero__roller {
  color: var(--farg-accent);
  font-family: var(--typsnitt-rubrik);
  font-size: 1.05rem;
  margin: 0 0 2rem;
}

.hero__knappar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.hero--liten {
  padding: 3rem 0 2.5rem;
  text-align: left;
}

.hero--liten h1 {
  font-size: 2.4rem;
}

.hero--liten .ingress {
  margin-bottom: 0;
}

/* Guld-ornament (ögat) i heron */
.ornament {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 1.5rem;
  color: var(--farg-primar);
}

/* ============================================================
   SEKTIONER OCH KORT
   ============================================================ */
.sektion {
  padding: 3.5rem 0;
}

.sektion--alternativ {
  background: var(--farg-bakgrund-alternativ);
  border-top: 1px solid var(--farg-kant);
  border-bottom: 1px solid var(--farg-kant);
}

.sektion__huvud {
  margin-bottom: 2rem;
}

.sektion__huvud h2 {
  margin-bottom: 0.5rem;
}

.sektion__huvud .ingress {
  margin-bottom: 0;
}

.kort-rutnat {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.kort {
  background: var(--farg-kort);
  border: 1px solid var(--farg-kant);
  border-radius: var(--radie);
  padding: 1.5rem;
}

.kort h3 {
  margin-top: 0;
}

.kort p:last-child {
  margin-bottom: 0;
}

/* Hela kortet är en länk (Spotify/YouTube) */
.kort--lank {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--farg-text);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.kort--lank:hover,
.kort--lank:focus-visible {
  color: var(--farg-text);
  border-color: var(--farg-primar);
  transform: translateY(-2px);
}

.kort--lank .kort__text {
  color: var(--farg-text-dampad);
  flex: 1;
}

.kort__handling {
  color: var(--farg-primar);
  font-weight: 600;
  margin-top: 1rem;
}

.kort--lank:hover .kort__handling {
  color: var(--farg-primar-mork);
}

/* Höjdpunkter i Om-sektionen */
.hojdpunkter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.hojdpunkter li {
  padding: 0.85rem 1rem;
  background: var(--farg-kort);
  border-left: 3px solid var(--farg-primar);
  border-radius: 0 var(--radie) var(--radie) 0;
}

.hojdpunkter strong {
  display: block;
  font-family: var(--typsnitt-rubrik);
  font-size: 1.05rem;
}

.hojdpunkter span {
  color: var(--farg-text-dampad);
  font-size: 0.95rem;
}

.tva-kolumner {
  display: grid;
  gap: 2rem;
}

/* Lista över låtar på startsidan (teaser för charts) */
.latlista-kompakt {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.latlista-kompakt li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--farg-kant);
}

.latlista-kompakt a {
  font-family: var(--typsnitt-rubrik);
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--farg-text);
}

.latlista-kompakt a:hover {
  color: var(--farg-primar);
}

.latlista-kompakt span {
  color: var(--farg-text-dampad);
  font-size: 0.9rem;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
   CHARTS-SIDAN
   ============================================================ */
.hopplista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  background: var(--farg-kort);
  border: 1px solid var(--farg-kant);
  border-radius: var(--radie);
  font-size: 0.95rem;
}

.hopplista__rubrik {
  color: var(--farg-text-dampad);
  margin-right: 0.25rem;
}

.hopplista a {
  text-decoration: none;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--farg-kant);
  border-radius: 999px;
  color: var(--farg-text);
}

.hopplista a:hover {
  border-color: var(--farg-primar);
  color: var(--farg-primar);
}

.lat {
  padding: 2rem 0;
  border-top: 1px solid var(--farg-kant);
  scroll-margin-top: 4.5rem; /* Ankare (#zadebu) hamnar under sidhuvudet annars */
}

section[id] {
  scroll-margin-top: 4rem;
}

.lat:last-of-type {
  border-bottom: 1px solid var(--farg-kant);
}

.lat__huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 1rem;
}

.lat__huvud h2 {
  margin: 0;
}

.lat__meta {
  margin: 0;
  color: var(--farg-text-dampad);
  font-size: 0.9rem;
}

.lat__inre {
  display: grid;
  gap: 1.5rem;
}

.lat__rubrik-liten {
  font-family: var(--typsnitt-brod);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--farg-accent);
  margin: 0 0 0.6rem;
}

/* Stämmor / PDF-länkar */
.delar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.del {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  background: var(--farg-kort);
  border: 1px solid var(--farg-kant);
  border-radius: var(--radie);
  color: var(--farg-text);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.2s ease;
}

.del:hover,
.del:focus-visible {
  color: var(--farg-primar);
  border-color: var(--farg-primar);
}

.del__ikon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--farg-primar);
}

.del__typ {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--farg-text-dampad);
}

/* Ljudspelare */
.lyssna audio {
  display: block;
  width: 100%;
  max-width: 520px;
  border-radius: var(--radie);
}

.lyssna__nedladdning {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

/* Infoboxar */
.info-ruta {
  background: var(--farg-kort);
  border: 1px solid var(--farg-kant);
  border-left: 3px solid var(--farg-primar);
  border-radius: var(--radie);
  padding: 1.25rem 1.5rem;
}

.info-ruta h2,
.info-ruta h3 {
  margin-top: 0;
  font-size: 1.15rem;
}

.info-ruta p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   FORMULÄR
   ============================================================ */
.kontaktformular {
  max-width: 520px;
}

.falt {
  margin-bottom: 1rem;
}

.falt label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.falt input,
.falt textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font: inherit;
  border: 1px solid var(--farg-kant);
  border-radius: var(--radie);
  background: var(--farg-kort);
  color: var(--farg-text);
}

.falt input:focus,
.falt textarea:focus {
  border-color: var(--farg-primar);
}

/* ============================================================
   KNAPPAR
   ============================================================ */
.knapp {
  display: inline-block;
  background: var(--farg-primar);
  color: var(--farg-text-invers);
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--farg-primar);
  border-radius: var(--radie);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.knapp:hover {
  background: var(--farg-primar-mork);
  border-color: var(--farg-primar-mork);
  color: var(--farg-text-invers);
}

.knapp--sekundar {
  background: transparent;
  color: var(--farg-primar);
}

.knapp--sekundar:hover {
  background: rgba(212, 176, 106, 0.12);
  color: var(--farg-primar-mork);
}

/* ============================================================
   TACK-SIDA OCH SIDFOT
   ============================================================ */
.tack-sektion {
  text-align: center;
  padding: 5rem 0;
}

.sidfot {
  background: var(--farg-bakgrund-alternativ);
  border-top: 1px solid var(--farg-kant);
  color: var(--farg-text-dampad);
  padding: 2rem 0;
  font-size: 0.9rem;
}

.sidfot__inre {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.sidfot p {
  margin: 0;
}

.sidfot a {
  color: var(--farg-text);
}

.sidfot a:hover {
  color: var(--farg-primar);
}

.sidfot__lankar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

/* ============================================================
   STÖRRE SKÄRMAR
   ============================================================ */
@media (min-width: 600px) {
  .kort-rutnat {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }

  .hero { padding: 5.5rem 0 5rem; }
  .hero h1 { font-size: 4rem; }
  .hero__tagline { font-size: 1.7rem; }
  .hero__roller { font-size: 1.15rem; }
  .hero--liten { padding: 3.5rem 0 3rem; }
  .hero--liten h1 { font-size: 3rem; }

  .meny-knapp {
    display: none;
  }

  .huvudmeny {
    display: block;
    width: auto;
  }

  .huvudmeny ul {
    display: flex;
    gap: 1.75rem;
    margin: 0;
  }

  .huvudmeny a {
    border-top: none;
    padding: 0.5rem 0;
  }

  .sektion { padding: 4.5rem 0; }

  .tva-kolumner {
    grid-template-columns: 3fr 2fr;
    gap: 3rem;
    align-items: start;
  }

  .lat__inre {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}

@media (min-width: 960px) {
  .kort-rutnat {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Respektera användare som stängt av animationer */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}