/* =====================================================
   nav-dropdown.css
   Dropdown-meny för huvudnavigationen (t.ex. "Om oss" med undersidor
   riktade till olika målgrupper). Fristående klassnamn (site-nav-dropdown)
   så den aldrig krockar med dashboardens egen addon-dropdown.
===================================================== */

.site-nav-dropdown {
  position: relative;
  display: inline-flex;
}

.site-nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  font: inherit;
  /* OBS: "color: inherit" räckte inte här – knappar får en egen
     UA-standardfärg (buttontext) i vissa webbläsare/kontexter som kan
     vinna över nedärvd färg från <nav>, särskilt på startsidan där
     .nav a:s färg troligen sätts via en mer specifik regel i style.css
     (t.ex. "body.homepage .nav a") som en <button> aldrig matchar.
     Sätt därför en explicit, alltid synlig färg istället för att lita
     på nedärvning, plus en uttrycklig override för startsidan. */
  color: #221f2e !important;
  cursor: pointer;
  padding: 0;
}

/* Startsidan har en mörk/transparent hero-header där de vanliga nav-länkarna
   troligen får sin ljusa färg via en startsida-specifik regel i style.css.
   Knappen omfattas inte av den regeln (den är en <button>, inte en <a>),
   så vi ger den samma ljusa färg explicit här. */
body.homepage .site-nav-dropdown__trigger {
  color: #ffffff !important;
}

.site-nav-dropdown__trigger:hover,
.site-nav-dropdown__trigger:focus {
  color: #f28b93 !important;
}

.site-nav-dropdown__trigger .caret {
  font-size: 0.7em;
  transition: transform 0.2s ease;
}

.site-nav-dropdown.is-open .site-nav-dropdown__trigger .caret {
  transform: rotate(180deg);
}

.site-nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 260px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 45px -15px rgba(34, 31, 46, 0.35);
  border: 1px solid rgba(34, 31, 46, 0.08);
  padding: 0.5rem;
  z-index: 60;
  /* Animerad "scrolldown" – menyn glider ner och tonas in istället för att
     bara poppa upp. */
  transform-origin: top center;
  transform: translateX(-50%) translateY(-8px) scaleY(0.96);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.site-nav-dropdown.is-open .site-nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(6px) scaleY(1);
}

.site-nav-dropdown__menu a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  color: #221f2e;
  font-size: 0.92rem;
  text-decoration: none;
  white-space: normal;
}

.site-nav-dropdown__menu a:hover,
.site-nav-dropdown__menu a:focus,
.site-nav-dropdown__menu a.active {
  background: #faf1f2;
  color: #f28b93;
}

.site-nav-dropdown__menu .divider {
  height: 1px;
  background: rgba(34, 31, 46, 0.08);
  margin: 0.35rem 0.25rem;
}

/* --- Split-variant: klickbar rubriklänk + separat pil för dropdownen ---
   Används av "Partnerskap & Sponsorer": klick på själva texten navigerar
   till landningssidan, klick på pilen öppnar/stänger undermenyn. */
.site-nav-dropdown--split {
  gap: 0.25rem;
  align-items: center;
}

.site-nav-dropdown__link {
  color: #221f2e;
  text-decoration: none;
  font: inherit;
}

body.homepage .site-nav-dropdown__link {
  color: #ffffff;
}

.site-nav-dropdown__link:hover,
.site-nav-dropdown__link:focus,
.site-nav-dropdown__link.active {
  color: #f28b93;
}

.site-nav-dropdown__trigger--caret {
  padding: 0.2rem 0.3rem;
  font-size: 0.85rem;
  line-height: 1;
  border-radius: 6px;
  /* Egen, alltid synlig färg oavsett sida/tema – litar inte på att ärva
     samma vit/mörk-logik som textlänken bredvid, som annars kan göra
     pilen osynlig mot en mörk header. */
  color: #ffffff !important;
}

.site-nav-dropdown__trigger--caret:hover,
.site-nav-dropdown__trigger--caret:focus {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff !important;
}

.site-nav-dropdown__trigger--caret .caret {
  font-size: 1rem;
}