/*
  Oddsium sidhuvud, koncept "Ön" (2026-10-02). Markup: template-parts/menu.php.
  Menyn byggs av WordPress-menyn "Main Menu" (två nivåer): huvudpunkterna är länkar, undersidorna
  visas i en enkel lista när man håller över punkten eller trycker på pilen.
  Vanlig CSS utan Tailwind-klasser. Allt ligger under .hf-app, utom anpassningen mot sidornas
  färgade toppar längst ner.

  Mot dagens sidor:
  - z-index 95 som den tidigare menyn (#nav-header): inloggningsrutan (100), prognosernas flikrad (100),
    "Jämför åt mig" (9000) och åldersrutan ligger kvar ovanför. Öppen undermeny/meny lyfts till 101.
  - Sidhuvudet tar 50 px i flödet som den tidigare menyn, så allt innehåll ligger kvar på samma plats.
    Resten av ön ligger i luften upptill, där den tidigare vita undermenyraden låg.
  - Döljs när man scrollar nedåt och visas när man scrollar uppåt, som tidigare (skriptet).
*/

/* ===================== Tokens ===================== */
.hf-app{
  --g-fg:#00182A;
  --g-fg2:rgba(0,24,42,.72);
  --g-mut:rgba(0,24,42,.62);
  --g-line:rgba(0,24,42,.08);
  --g-line2:rgba(0,24,42,.13);
  --g-glass-2:rgba(255,255,255,.9);
  --g-rim:rgba(255,255,255,.75);
  --g-hover:rgba(0,24,42,.045);
  --g-press:rgba(0,24,42,.08);
  --g-cta:#00182A;--g-cta-fg:#fff;
  /* Oddsiums färger direkt från temat: gul primary, blå secondary */
  --g-ring:var(--color-secondary);
  --g-blur-2:saturate(180%) blur(28px);
  --g-sh-3:0 2px 6px -2px rgba(0,24,42,.06),0 30px 60px -22px rgba(0,24,42,.3);
  --g-R:16px;--g-Rc:10px;
  /* Toppmenyn: gul (temats primary) i både ljust och mörkt läge */
  --b-bg:var(--color-primary);
  --b-fg:#00182A;--b-fg2:rgba(0,24,42,.76);
  --b-hover:rgba(0,24,42,.075);--b-press:rgba(0,24,42,.12);--b-line:rgba(0,24,42,.1);
  --b-field:rgba(255,255,255,.55);--b-field-h:rgba(255,255,255,.78);
  --g-ease:cubic-bezier(.2,.8,.2,1);
  --g-font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
[data-theme="dark"] .hf-app{
  --g-fg:#EEF1F4;--g-fg2:rgba(238,241,244,.74);--g-mut:rgba(238,241,244,.6);
  --g-line:rgba(255,255,255,.08);--g-line2:rgba(255,255,255,.14);
  --g-glass-2:rgba(31,37,45,.9);--g-rim:rgba(255,255,255,.07);
  --g-hover:rgba(255,255,255,.06);--g-press:rgba(255,255,255,.1);
  --g-cta:#EEF1F4;--g-cta-fg:#00182A;
  --g-ring:var(--color-primary);
  --g-sh-3:0 2px 6px -2px rgba(0,0,0,.4),0 32px 64px -22px rgba(0,0,0,.8);
}

/* ===================== Bas (skyddar mot sajtens globala CSS) ===================== */
/* 50 px i flödet (border-box) som den tidigare menyn; ön (60/72 px med luften) sticker ut nedåt över
   sidans luft upptill. Höjd i stället för negativ marginal, som annars slås ihop med sidans marginaler. */
.hf-app{position:sticky;top:0;z-index:95;box-sizing:border-box;height:50px;pointer-events:none;font-family:var(--g-font);font-size:16px;font-weight:450;font-optical-sizing:auto;letter-spacing:-.011em;line-height:1.4;text-align:left;color:var(--g-fg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
.hf-app.is-raised{z-index:101}
.hf-app *,.hf-app *::before,.hf-app *::after{box-sizing:border-box}
:where(.hf-app) a{color:inherit;text-decoration:none}
:where(.hf-app) button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
:where(.hf-app) :is(h2,h3,p){margin:0;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}
/* GR:s Tailwind-cache gör alla h2 versala; sidhuvudets rubriker ska inte påverkas */
.hf-app :is(h2,h3,p)[class]{text-transform:none}
:where(.hf-app) img{display:block;max-width:none}
:where(.hf-app) ul{margin:0;padding:0}
.hf-app ul.hf-l{list-style:none}
.hf-app ul.hf-l > li{position:static;margin:0;padding:0;list-style:none;font-size:inherit;line-height:inherit}
.hf-app ul.hf-l > li::before,.hf-app ul.hf-l > li::after{content:none}
:where(.hf-app) .hf-i{display:block;width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
:where(.hf-app) :focus{outline:none}
:where(.hf-app) :focus-visible{outline:2px solid var(--g-ring);outline-offset:2px}

/* Glas: ett material för undermeny, landsväljare och ark. Toppmenyn är platt gul utan skugga. */
.hf-app__panel,.hf-app__pop,.hf-app__sheet{background:var(--g-glass-2);-webkit-backdrop-filter:var(--g-blur-2);backdrop-filter:var(--g-blur-2);box-shadow:inset 0 0 0 1px var(--g-rim),0 0 0 1px var(--g-line),var(--g-sh-3)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hf-app{--g-glass-2:#fff}
  [data-theme="dark"] .hf-app{--g-glass-2:#1f252d}
}

/* hoppa till innehållet */
.hf-app__skip{pointer-events:auto;position:absolute;left:12px;top:-64px;z-index:20;display:inline-flex;align-items:center;height:44px;padding:0 16px;border-radius:var(--g-Rc);background:var(--g-cta);color:var(--g-cta-fg)!important;font-size:14.5px;font-weight:550}
.hf-app__skip:focus{top:10px}

/* ===================== Ön ===================== */
.hf-app{padding:8px 8px 0;--hf-pt:8px}
/* Sidan tonar ut ovanför plattan, så att text inte syns i glipan ovanför den när man scrollar uppåt */
.hf-app::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--hf-pt) + 24px);background:linear-gradient(180deg,var(--color-base-100) 0,var(--color-base-100) var(--hf-pt),transparent);pointer-events:none;transition:opacity .2s ease}
/* Ligger ön på en färgad topp (skriptet sätter .is-over-hero) eller är den dold behövs ingen toning */
.hf-app.is-over-hero::before,.hf-app.is-hidden::before{opacity:0}
.hf-app__bar{pointer-events:auto;position:relative;z-index:2;display:flex;align-items:center;height:52px;padding:0 6px 0 14px;border-radius:16px;--hf-rim:4px;transition:transform .3s var(--g-ease)}
/* Döljs när man scrollar nedåt (som den tidigare menyn). Det är ön som flyttas, inte <header>,
   så att arket (position:fixed) alltid ligger rätt. */
.hf-app.is-hidden .hf-app__bar{transform:translateY(calc(-100% - 24px))}
/* Glaskant: den gula ytan (::after) är helt täckande, runt den ligger en smal kant av frostat,
   gultonat glas (::before). Ingen skugga. */
.hf-app__bar::before,.hf-app__bar::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.hf-app__bar::before{inset:calc(var(--hf-rim) * -1);border-radius:calc(16px + var(--hf-rim));background:color-mix(in oklab,var(--color-primary) 38%,rgba(255,255,255,.62));-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
.hf-app__bar::after{inset:0;border-radius:inherit;background:var(--b-bg);box-shadow:0 0 0 1px rgba(255,255,255,.45)}
[data-theme="dark"] .hf-app__bar::before{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
[data-theme="dark"] .hf-app__bar::after{box-shadow:none}
/* ovanpå en färgad topp behåller glaskanten sitt ljusa utseende även i mörkt läge */
[data-theme="dark"] .hf-app.is-over-hero .hf-app__bar::before{background:color-mix(in oklab,var(--color-primary) 38%,rgba(255,255,255,.62));box-shadow:inset 0 0 0 1px rgba(255,255,255,.75)}
[data-theme="dark"] .hf-app.is-over-hero .hf-app__bar::after{box-shadow:0 0 0 1px rgba(255,255,255,.45)}

.hf-app__logo{display:flex;align-items:center;height:40px;flex:none;border-radius:8px}
.hf-app__logo img{height:19px;width:auto}

.hf-app__tools{margin-left:auto;display:flex;align-items:center;gap:2px}
.hf-app__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--g-Rc);flex:none;color:var(--g-fg2);transition:background-color .15s ease,color .15s ease}
.hf-app__icon::before{content:"";position:absolute;inset:-2px;border-radius:inherit}
.hf-app__icon:hover{background:var(--g-hover);color:var(--g-fg)}
.hf-app__icon:active{background:var(--g-press)}
.hf-app__bar .hf-app__icon{color:var(--b-fg2)}
.hf-app__bar .hf-app__icon:hover{background:var(--b-hover);color:var(--b-fg)}
.hf-app__bar .hf-app__icon:active{background:var(--b-press)}
.hf-app__logo:focus-visible,.hf-app__seg:focus-visible,.hf-app__more:focus-visible,.hf-app__bar .hf-app__icon:focus-visible{outline-color:var(--b-fg)}
.hf-app__icon .hf-i{width:20px;height:20px}

/* Logga in: bara ikon på små skärmar, ikon + text på stora */
.hf-app__login-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hf-app__theme,.hf-app__landwrap{display:none}

.hf-app__theme .hf-i{position:absolute;top:10px;left:10px;transition:transform .4s var(--g-ease),opacity .2s ease}
.hf-app__theme .is-sun{opacity:0;transform:rotate(-45deg) scale(.7)}
[data-theme="dark"] .hf-app__theme .is-sun{opacity:1;transform:none}
[data-theme="dark"] .hf-app__theme .is-moon{opacity:0;transform:rotate(45deg) scale(.7)}

.hf-app__flag{width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,24,42,.2)}

/* ===================== Huvudmenyn (som tidigare: länkar, undermeny vid hovring) ===================== */
.hf-app__nav{display:none}
.hf-app__track{position:relative;display:flex;align-items:center;gap:0;height:40px}
.hf-app .hf-app__nav ul.hf-app__track > li{position:relative;display:flex;align-items:center}
.hf-app__seg{position:relative;z-index:1;display:inline-flex;align-items:center;height:36px;padding:0 12px;border-radius:var(--g-Rc);font-size:14.5px;font-weight:500;letter-spacing:-.012em;white-space:nowrap;color:var(--b-fg2);transition:color .15s ease}
.hf-app__seg:hover,.hf-app__seg[aria-current],.hf-app__track > li.is-hot > .hf-app__seg,.hf-app__track > li.is-open > .hf-app__seg{color:var(--b-fg)}
/* aktuell sektion: lite fetare, som tidigare (ingen extra markering) */
.hf-app__seg[aria-current]{font-weight:600}
.hf-app__seg:focus-visible{outline-offset:-2px}
.hf-app__track > li.has-sub > .hf-app__seg{padding-right:2px}
/* Pilen öppnar undermenyn med tangentbord och pekskärm (med mus räcker det att hålla över punkten) */
.hf-app__more{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:28px;height:36px;padding-right:6px;border-radius:var(--g-Rc);color:var(--b-fg2)}
.hf-app__more .hf-i{width:15px;height:15px;stroke-width:1.9;opacity:.55;transition:transform .3s var(--g-ease),opacity .15s ease}
.hf-app__track > li.is-hot .hf-app__more .hf-i,.hf-app__more[aria-expanded="true"] .hf-i{opacity:.95}
.hf-app__more[aria-expanded="true"] .hf-i{transform:rotate(180deg)}
.hf-app__more:focus-visible{outline-offset:-2px}
/* glidande hovringsyta */
.hf-app__thumb{position:absolute;z-index:0;top:2px;left:0;height:36px;width:40px;border-radius:var(--g-Rc);background:var(--b-hover);opacity:0;pointer-events:none;transition:transform .32s var(--g-ease),width .32s var(--g-ease),opacity .18s ease}
.hf-app__thumb.is-on{opacity:1}
.hf-app__thumb.is-jump{transition:opacity .18s ease}

/* Undermenyn: en enkel lista med länkarna, i samma ordning som i WordPress */
.hf-app__panel{position:absolute;z-index:3;top:calc(100% + 22px);left:-6px;width:max-content;min-width:232px;max-width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:var(--g-R);color:var(--g-fg);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:24px 0;transition:opacity .18s ease,transform .3s var(--g-ease),visibility 0s linear .3s}
/* osynlig brygga över glipan, så att undermenyn inte stängs på väg ner till den (bara när den är öppen) */
.hf-app .hf-app__nav ul.hf-app__track > li.is-open::after{content:"";position:absolute;left:-6px;right:0;top:100%;height:26px}
.hf-app__panel.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .3s var(--g-ease),visibility 0s}
.hf-app__panel.is-swap{transition:opacity .14s ease,visibility 0s}
.hf-app__list{display:grid;gap:1px}
/* Listan blir lika bred som den längsta punkten (högst 420 px); längre punkter radbryts */
.hf-app__list a{display:flex;align-items:center;min-height:42px;padding:9px 16px 9px 12px;border-radius:10px;font-size:14.5px;font-weight:500;letter-spacing:-.012em;line-height:1.25;white-space:normal;color:var(--g-fg);transition:background-color .15s ease}
.hf-app__list a:hover,.hf-app__list a:focus-visible{background:var(--g-hover);color:var(--g-fg)}
.hf-app__list a:focus-visible{outline-offset:-2px}
.hf-app__list a[aria-current]{font-weight:600}
.hf-app__18{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 5px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--g-line2);font-size:11px;font-weight:600;letter-spacing:0;color:var(--g-fg)}

/* ===================== Landsväljare ===================== */
.hf-app__landwrap{position:static}
.hf-app__pop{position:absolute;z-index:3;top:calc(100% + 10px);right:0;width:248px;padding:6px;border-radius:var(--g-R);color:var(--g-fg);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:92% 0;transition:opacity .18s ease,transform .3s var(--g-ease),visibility 0s linear .3s}
.hf-app__pop.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .18s ease,transform .3s var(--g-ease),visibility 0s}
.hf-app__pop-k{padding:10px 12px 6px;font-size:13px;font-weight:550;letter-spacing:-.005em;color:var(--g-mut)}
.hf-app__lands a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;font-size:14.5px;font-weight:500;color:var(--g-fg)}
.hf-app__lands a:hover,.hf-app__lands a:focus-visible{background:var(--g-hover);color:var(--g-fg)}
.hf-app__lands a:focus-visible{outline-offset:-2px}
.hf-app__lands img{width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 1px var(--g-line2)}
.hf-app__lands .hf-i{margin-left:auto;width:17px;height:17px;stroke-width:2}
.hf-app__lands [aria-current]{font-weight:600}

/* ===================== Dialoger ===================== */
.hf-app__scrim{pointer-events:auto;position:fixed;inset:0;z-index:10;background:rgba(240,242,245,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
[data-theme="dark"] .hf-app__scrim{background:rgba(8,11,14,.55)}
.hf-app__scrim.is-open{opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}
.hf-app__close{color:var(--g-fg2)}
.hf-app__k{font-size:13px;font-weight:550;letter-spacing:-.005em;color:var(--g-mut)}

/* ===================== Bottenark (menyn på mobil och surfplatta) ===================== */
.hf-app__sheet{pointer-events:auto;position:fixed;z-index:11;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:calc(100dvh - 44px);border-radius:20px 20px 0 0;color:var(--g-fg);transform:translateY(102%);visibility:hidden;transition:transform .42s var(--g-ease),visibility 0s linear .42s}
.hf-app__sheet.is-open{transform:translateY(var(--ha-drag,0px));visibility:visible;transition:transform .42s var(--g-ease),visibility 0s}
.hf-app__sheet.is-dragging{transition:none}
.hf-app__sheet:focus{outline:none}
.hf-app__sheet-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:18px 10px 8px 20px;touch-action:none;flex:none}
.hf-app__grab{position:absolute;top:7px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:var(--g-line2)}
.hf-app__sheet-t{font-size:20px;font-weight:650;letter-spacing:-.025em;line-height:1.2;color:var(--g-fg)}
.hf-app__sheet-body{overflow:auto;overscroll-behavior:contain;padding:2px 14px calc(22px + env(safe-area-inset-bottom));display:grid;gap:22px;-webkit-overflow-scrolling:touch}
.hf-app__group{display:grid;gap:10px}
.hf-app__group > .hf-app__k{padding:0 4px}

/* Menyn i arket: samma punkter som i listen, undersidorna fälls ut med pilen */
.hf-app__acc{display:grid}
.hf-app ul.hf-app__acc > li + li{border-top:1px solid var(--g-line)}
.hf-app__row{display:flex;align-items:center;gap:4px;padding:3px 0}
.hf-app__row > a{flex:1;display:flex;align-items:center;min-height:48px;padding:0 10px;border-radius:10px;font-size:16.5px;font-weight:600;letter-spacing:-.018em;line-height:1.25;color:var(--g-fg);transition:background-color .15s ease}
.hf-app__row > a:hover{background:var(--g-hover);color:var(--g-fg)}
.hf-app__row > a:focus-visible{outline-offset:-2px}
.hf-app__acc-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--g-Rc);color:var(--g-fg2);transition:background-color .15s ease,color .15s ease}
.hf-app__acc-btn:hover{background:var(--g-hover);color:var(--g-fg)}
.hf-app__acc-btn:focus-visible{outline-offset:-2px}
.hf-app__acc-btn .hf-i{width:18px;height:18px;transition:transform .3s var(--g-ease)}
.hf-app__acc-btn[aria-expanded="true"] .hf-i{transform:rotate(180deg)}
/* (.hf-app ul… slår temats globala ul:not(.ez-toc-list){margin-left:0;padding-left:0}) */
.hf-app ul.hf-app__sub{display:grid;gap:1px;margin:0 0 10px 10px;padding-left:8px;border-left:1.5px solid var(--g-line2)}
.hf-app ul.hf-app__sub[hidden]{display:none}
.hf-app__sub a{display:flex;align-items:center;min-height:44px;padding:0 10px;border-radius:10px;font-size:15px;font-weight:500;letter-spacing:-.012em;line-height:1.25;color:var(--g-fg2);transition:background-color .15s ease,color .15s ease}
.hf-app__sub a:hover{background:var(--g-hover);color:var(--g-fg)}
.hf-app__sub a:focus-visible{outline-offset:-2px}
.hf-app__sub a[aria-current]{color:var(--g-fg);font-weight:600}

/* segmenterad kontroll (ljust/mörkt) */
.hf-app__seg2{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:11px;background:var(--g-hover);box-shadow:inset 0 0 0 1px var(--g-line)}
.hf-app__seg2 button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;border-radius:10px;font-size:14px;font-weight:550;text-align:center;color:var(--g-fg2);transition:color .2s ease}
.hf-app__seg2 [aria-checked="true"]{color:var(--g-fg)}
.hf-app__seg2 button:focus-visible{outline-offset:-2px}
.hf-app__seg2 button .hf-i{width:17px;height:17px}
.hf-app__seg2-thumb{position:absolute;z-index:0;top:3px;left:3px;height:38px;width:calc(50% - 3px);border-radius:10px;background:var(--g-glass-2);box-shadow:inset 0 0 0 1px var(--g-rim),0 1px 2px rgba(0,24,42,.08),0 3px 10px -3px rgba(0,24,42,.14);transition:transform .36s var(--g-ease)}
[data-theme="dark"] .hf-app__seg2-thumb{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transform:translateX(100%)}
.hf-app__chips{display:flex;flex-wrap:wrap;gap:8px}
.hf-app__chips a{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 9px;border-radius:999px;background:var(--g-hover);box-shadow:inset 0 0 0 1px var(--g-line);font-size:14px;font-weight:500;color:var(--g-fg)}
.hf-app__chips a:hover{background:var(--g-press);color:var(--g-fg)}
.hf-app__chips img{width:20px;height:20px;border-radius:50%;box-shadow:0 0 0 1px var(--g-line2)}
.hf-app__chips a[aria-current]{background:var(--g-cta);color:var(--g-cta-fg);box-shadow:none;font-weight:600}
.hf-app__chips a[aria-current] .hf-i{width:15px;height:15px;stroke-width:2.2;margin-left:-2px}
.hf-app__rg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:14px 4px 0;border-top:1px solid var(--g-line);font-size:13px;line-height:1.45;color:var(--g-mut)}
.hf-app__rg a{color:var(--g-fg2);text-decoration:underline;text-decoration-color:var(--g-line2);text-underline-offset:3px;padding:10px 0;margin:-10px 0}

/* ===================== Surfplatta och uppåt ===================== */
@media (min-width:768px){
  .hf-app{padding:12px 24px 0;--hf-pt:12px}
  .hf-app__bar{--hf-rim:5px}
  .hf-app__bar{max-width:1216px;height:60px;margin:0 auto;padding:0 10px 0 18px;border-radius:var(--g-R)}
  .hf-app__logo img{height:21px}
  .hf-app__nav{display:block;position:relative;margin-left:22px}
  .hf-app__sheet{left:50%;right:auto;width:min(560px,calc(100vw - 48px));transform:translate(-50%,102%)}
  .hf-app__sheet.is-open{transform:translate(-50%,var(--ha-drag,0px))}
}
@media (min-width:1024px){
  .hf-app{padding:12px 16px 0}
  /* Den gula plattan är 10 % bredare än innehållet (1216 px), minst 16 px från fönsterkanten.
     Logga och knappar ligger kvar i linje med innehållet under. */
  .hf-app__bar{--hf-c:min(1216px,100% - 32px);--hf-b:min(var(--hf-c) * 1.1,100%);width:var(--hf-b);max-width:none;padding-inline:max(14px,(var(--hf-b) - var(--hf-c)) / 2)}
  .hf-app__nav{margin-left:28px}
  .hf-app__tools{gap:4px}
  .hf-app__menu{display:none}
  .hf-app__theme,.hf-app__landwrap{display:inline-flex}
  /* Logga in: samma ljusa material som listen i övrigt, så att den hör till den i stället för att bryta av */
  .hf-app__login{width:auto;height:40px;padding:0 14px 0 11px;gap:7px;margin-left:6px;background:var(--b-field);box-shadow:inset 0 0 0 1px var(--b-line);font-size:14px;font-weight:600;letter-spacing:-.01em}
  .hf-app__bar .hf-app__login{color:var(--b-fg)}
  .hf-app__bar .hf-app__login:hover{background:var(--b-field-h);color:var(--b-fg)}
  .hf-app__bar .hf-app__login:active{background:var(--b-field)}
  .hf-app__login .hf-i{width:18px;height:18px}
  .hf-app__login-t{position:static;width:auto;height:auto;overflow:visible;clip:auto}
}
/* Får inte alla menypunkter plats i listen (långa namn eller många punkter på en sajt) visas
   menyn i arket i stället, oavsett skärmbredd. Sätts av skriptet. */
.hf-app.is-compact .hf-app__nav{display:none}
.hf-app.is-compact .hf-app__menu{display:inline-flex}

/* ===================== Sidornas färgade toppar ===================== */
/* Den gula (röda) toppen (template-parts/small-hero.php) och tipsens mobiltopp
   (template-parts/predictions/single-header.php) börjar 50 px tidigare, bakom ön, och får lika
   mycket extra luft upptill: innehållet ligger kvar på exakt samma plats som tidigare. Gäller bara
   när toppen kommer direkt efter sidhuvudet. */
#hf-app + div > #small-hero-banner:first-child{margin-top:-50px;padding-top:calc(4.5rem + 50px)}
/* Tipsens mobiltopp låg ovanför den tidigare vita undermenyraden (z-index 100); nu ligger den bakom ön */
#hf-app + .md\:hidden > div:first-child > #match-hero-banner:first-child{z-index:90;margin-top:-50px;padding-top:50px}
@media (min-width:768px){
  #hf-app + .md\:hidden + div > div:first-child > #small-hero-banner:first-child{margin-top:-50px;padding-top:calc(4.5rem + 50px)}
}
/* Ingen vit toning över en färgad topp från första början (skriptet tar över när sidan laddats) */
#hf-app:not([data-hf-ready]):has(+ div > #small-hero-banner:first-child)::before,
#hf-app:not([data-hf-ready]):has(+ .md\:hidden > div:first-child > #match-hero-banner:first-child)::before,
#hf-app:not([data-hf-ready]):has(+ .hf-scene)::before{opacity:0}
@media (min-width:768px){
  #hf-app:not([data-hf-ready]):has(+ .md\:hidden + div > div:first-child > #small-hero-banner:first-child)::before{opacity:0}
}

/* ===================== Rörelse ===================== */
html.hf-theming .hf-app *{transition:none!important}
@media (prefers-reduced-motion:reduce){
  .hf-app,.hf-app *,.hf-app *::before,.hf-app *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}