/* Megamenyn i båda sidhuvudena (templates/public/partials/mega_menu.html och mega_menu_mobile.html, B-26 2026-11-01).
   Dator: en länk till navsidan och en liten pil som öppnar gruppens panel under sidhuvudet. Panelen är dold (hidden) när
   den är stängd, så att inget täcker sidan, och den ligger absolut, så att inget flyttar sig när den öppnas. Skriptet i
   mega_menu.html lägger den i sidled under sin egen post (--mm-x); utan skript står den centrerad. Samma ljusa panel under
   det ljusa och det mörka sidhuvudet. Under 861 px: grupperna som dragspel i «Meny». */

/* Posterna i raden */
.mm-item { display: inline-flex; align-items: center; }
.mm-trigger {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mm-trigger svg { transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.mm-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Det ljusa sidhuvudet: länken och pilen delar en yta */
.public-home__nav-links .mm-item { border-radius: 0.55rem; transition: background-color 140ms ease; }
.public-home__nav-links .mm-item--group > .mm-top { padding-right: 0.15rem; }
.public-home__nav-links .mm-item--group > .mm-top:hover { background: transparent; }
.public-home__nav-links .mm-item--group:hover,
.public-home__nav-links .mm-item.is-open { background: rgba(23, 32, 27, 0.045); }
.public-home__nav-links .mm-item--group:hover > .mm-top,
.public-home__nav-links .mm-item.is-open > .mm-top { color: #141a16; }
.public-home__nav-links .mm-trigger { margin-right: 0.3rem; color: #4a544d; }
.public-home__nav-links .mm-trigger:hover { color: #141a16; }
.public-home__nav-links .mm-trigger:focus-visible { outline: 2px solid #1f6b4f; outline-offset: 1px; }

/* Det mörka sidhuvudet */
.sp-links .mm-trigger { margin-left: 3px; color: #d4e2d8; }
.sp-links .mm-trigger:hover,
.sp-links .mm-item.is-open .mm-trigger { color: #ffffff; }
.sp-links .mm-item.is-open > .mm-top { color: #ffffff !important; }
.sp-links .mm-trigger:focus-visible { outline: 2px solid #8be7b5; outline-offset: 0; }
.sp-links .mm-top:focus-visible { outline: 2px solid #8be7b5; outline-offset: 3px; border-radius: 4px; }

/* Panelen */
.mm-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 70;
  display: grid;
  width: min(34rem, calc(100vw - 32px));
  padding: 0.5rem;
  border: 1px solid #dce3dd;
  border-radius: 1rem;
  background: #ffffff;
  color: #17201b;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.35;
  letter-spacing: -0.006em;
  text-align: left;
  transform: translateX(-50%);
  box-shadow: 0 22px 44px -26px rgba(18, 56, 43, 0.3), 0 2px 8px -4px rgba(18, 56, 43, 0.08);
}
.mm-js .mm-panel { left: var(--mm-x, 50%); transform: none; }
.mm-panel[hidden] { display: none; }
/* Musen kan gå över glappet mellan raden och panelen utan att lämna posten */
.mm-panel::before { content: ""; position: absolute; inset: -10px 0 auto; height: 10px; }
.mm-panel--narrow { width: min(17rem, calc(100vw - 32px)); }
.mm-panel--narrow .mm-links { grid-template-columns: minmax(0, 1fr); }
.mm-js .mm-panel:not([hidden]) { animation: mm-in 170ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes mm-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
/* Utan skript: panelen öppnas med hover och fokus, länkarna står i HTML:en ändå */
html:not(.mm-js) .mm-item:is(:hover, :focus-within) > .mm-panel[hidden] { display: grid; }

.mm-body { display: grid; align-content: start; gap: 0.25rem; padding: 0.25rem; }
.mm-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.125rem 0.25rem; margin: 0; padding: 0; list-style: none; }
.mm-panel .mm-links a {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.6rem;
  color: #17201b;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
.mm-panel .mm-links a:hover { background: #f3f2ed; color: #12382b; }
.mm-panel .mm-links a[aria-current] { background: #e8f7ee; color: #075f45; }
.mm-panel .mm-all {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.5rem;
  margin-top: 0.25rem;
  padding: 0.5rem 0.75rem 0.25rem;
  border-top: 1px solid #e9eeea;
  border-radius: 0 0 0.6rem 0.6rem;
  color: #075f45;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
.mm-panel .mm-all:hover { color: #12382b; text-decoration: underline; text-underline-offset: 3px; }
.mm-panel .mm-all span { transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.mm-panel .mm-all:hover span { transform: translateX(2px); }
.mm-panel :is(.mm-links a, .mm-all):focus-visible { outline: 2px solid #1f6b4f; outline-offset: 1px; }

/* Funktioner: en lugn rad om programmet överst, utan egen knapp (sidhuvudets knapp räcker) */
.mm-panel .mm-product {
  margin: 0;
  padding: 0.6rem 0.75rem 0.55rem;
  border-bottom: 1px solid #e9eeea;
  color: #4a544d;
  font-size: 0.84rem;
  line-height: 1.45;
}

/* «Meny» under 861 px: dragspelen. Sidhuvudenas regler för hamburgaren (.sp-menu summary, .public-home__menu summary)
   träffar också dragspelens summary, så de nollställs här med [data-mobile-menu], som står senare och väger lika. */
.public-home__menu-panel,
.sp-menu__panel { width: min(20.5rem, calc(100vw - 24px)); max-height: calc(100dvh - 5.5rem); overflow-y: auto; overscroll-behavior: contain; }
[data-mobile-menu] .mm-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 0 0.85rem;
  border-radius: 0.6rem;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
[data-mobile-menu] .mm-acc > summary::-webkit-details-marker { display: none; }
[data-mobile-menu] .mm-acc > summary svg { flex: none; transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1); }
[data-mobile-menu] .mm-acc[open] > summary svg { transform: rotate(180deg); }
.mm-acc__links { display: grid; margin: 0 0 0.35rem 0.85rem; padding-left: 0.25rem; border-left: 1px solid #e4e7e2; }
[data-mobile-menu] .mm-acc__links a { min-height: 40px; font-size: 0.94rem; }
[data-mobile-menu] a.mm-acc__all { gap: 0.35rem; }
/* Startsidans mobila sidhuvud gör hamburgaren ljus (public-home-mobile.css, .public-home:has(.phm) …); panelen är vit. */
.public-home__header [data-mobile-menu] .public-home__menu-panel .mm-acc > summary { color: #3f4a43; }
.public-home__header [data-mobile-menu] .public-home__menu-panel .mm-acc > summary:hover,
.public-home__header [data-mobile-menu] .public-home__menu-panel .mm-acc[open] > summary { background: rgba(23, 32, 27, 0.05); color: #141a16; }
.public-home__menu-panel .mm-acc > summary:focus-visible { outline: 2px solid #1f6b4f; outline-offset: -2px; }
.public-home__menu-panel a.mm-acc__all { color: #075f45; font-weight: 600; }
.sp-menu__panel .mm-acc > summary { color: #d4e2d8; }
.sp-menu__panel .mm-acc > summary:hover,
.sp-menu__panel .mm-acc[open] > summary { background: rgb(255 255 255 / 8%); color: #ffffff; }
.sp-menu__panel .mm-acc > summary:focus-visible { outline: 2px solid #8be7b5; outline-offset: -2px; }
.sp-menu__panel .mm-acc__links { border-left-color: rgb(255 255 255 / 14%); }
.sp-menu__panel a.mm-acc__all { color: #8be7b5 !important; font-weight: 600; }

/* 861–1080 px: raden ryms utan radbrytning. Bara där: under 861 px gäller sidhuvudets egna mobilregler (gap 8 px och
   knappens padding i public-seo.css), som den här filen annars skulle skriva över, eftersom den laddas efter. */
@media (min-width: 861px) and (max-width: 1080px) {
  .sp-links { gap: 12px; }
  .sp-links .mm-trigger { width: 1.125rem; }
  .sp-links :is(.mm-top, .sp-links__login, .sp-btn),
  .public-home__nav-links .mm-top { white-space: nowrap; }
  .sp-head .sp-btn { padding: 0 14px; }
  .public-home__nav-links .mm-trigger { width: 1.125rem; margin-right: 0.2rem; }
}

@media (max-width: 860px) {
  .sp-links .mm-item { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-js .mm-panel:not([hidden]) { animation: none; }
  [data-mobile-menu] .mm-acc > summary svg, .mm-trigger svg, .mm-panel .mm-all span { transition: none; }
}

/* Sidhuvudets knapp (signup_cta): «Prova gratis i N dagar» ryms inte bredvid märket, «Logga in» och «Meny» under 430 px,
   så där står den korta formen «Prova gratis» (signup_cta_short, accounts/pricing.py). Utan provperiod är båda «Skapa konto». */
.hdr-cta__short { display: none; }
@media (max-width: 429px) {
  .hdr-cta__full { display: none; }
  .hdr-cta__short { display: inline; }
}