/**
* Megameny för Medlemsklubbar.
*
* Laddas automatiskt av register_global_styles() i scripts-setup.php, som
* enqueue:ar allt i den här mappen.
*
* Färgerna kommer ur temats palett i global/variables.css — inga egna
* hex-värden utom där en ton saknas i paletten.
*/
/* ---------- Positionering ----------
*
* Panelen spänner över hela navigationsradens bredd, inte bara menyobjektets.
* Därför är .main-navigation positioneringskontext och panelen left/right 0,
* med en inre wrapper som matchar sajtens containerbredd (1140 px).
*
* overflow: visible sätts uttryckligen på båda förfäderna: en overflow: hidden
* någonstans i header-kedjan skulle klippa panelen, och det är ett fel som ser
* ut som att panelen inte renderas alls.
*/
/*
* Containing block för panelen är .inside-header — temats egen container,
* 1320 px och centrerad i sidan.
*
* Varför inte .inside-navigation, som ligger närmare? Den har max-width 1240px
* OCH är förskjuten åt höger (logotypen ligger före den i en flexrad), så en
* panel positionerad mot den blir både för smal och osymmetrisk — uppmätt
* stack den ut 45 px utanför viewporten.
*
* Därför görs de två nav-elementen position: static så att .inside-header blir
* närmaste positionerade förfader. GP positionerar sina egna undermenyer mot
* `li` (`.main-navigation li { position: relative }`), inte mot dessa två, så
* dropdownsen påverkas inte. Verifierat i webbläsaren.
*/
.site-header .inside-header {
position: relative;
}
.main-navigation,
.main-navigation .inside-navigation {
position: static;
overflow: visible;
}
/*
* Specificiteten är inte överarbetad, den är nödvändig. GeneratePress
* main.min.css har `.main-navigation li { position: relative }` (0-1-1) för sina
* egna dropdowns. En ensam `.mhrf-mega-item` (0-1-0) förlorar, och då blir
* positioneringskontext — panelen får menyobjektets bredd (163 px) i stället för
* navigationens, och grid-kolumnerna rinner ut utanför den vita bakgrunden.
*
* Verifierat i webbläsaren: med den här selektorn (0-2-1) blir containing block
* .inside-navigation, som redan är position: relative.
*/
.main-navigation li.mhrf-mega-item {
position: static;
}
.mhrf-mega {
position: absolute;
/* I linje med heron/innehållet. Containing block är .inside-header
(uppmätt), vars underkant är headerns. Glappet ned till innehållet mäts
i megameny-klubbar.js (placera), eftersom det är olika per sida.
calc och inte margin-top: margin hade flyttat även bryggan nedan. */
top: calc(100% + var(--mhrf-mega-glapp, 0px));
left: 0;
right: 0;
z-index: 500;
padding: 0;
background: #fff;
box-shadow: 0 0 10px 3px rgb(0 0 0 / 5%);
text-align: left;
/*
* Taket och rullningen är inte kosmetik.
*
* Panelen visar sedan omläggningen pluginets riktiga flödeskort, som är
* mer än dubbelt så höga som menyns gamla poster. Uppmätt blev panelen
* 1091px mot en 900px hög vy — "Visa allt"-länken längst ned gick inte att
* nå. 180px är menyraden plus admin-baren i värsta fall.
*/
max-height: calc(100vh - 180px);
overflow-y: auto;
overscroll-behavior: contain;
}
/*
* Osynlig brygga över glappet.
*
* Utan den lämnar pekaren på väg ned i panelen, eftersom glappet emellan
* varken tillhör eller panelen. Ett pseudoelement på räknas som en
* del av , så mouseleave utlöses inte.
*
* På och inte som ::before på panelen: panelen har overflow-y: auto (för
* max-height ovan), och den klipper allt som hänger utanför den. Uppmätt: en
* brygga ovanför panelen fanns i DOM:en men tog inte emot pekaren.
*
* är position: static, så top: 100% räknas mot .inside-header — samma
* underkant som panelens. Bara i öppet läge, så att den inte ligger över
* sidan och fångar klick. Höjd 0 på mobil, där JS inte sätter variabeln.
*/
.main-navigation li.mhrf-mega-item.mhrf-mega-oppen::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 500;
height: var(--mhrf-mega-glapp, 0px);
}
/*
* In- och uttoning.
*
* JS växlar attributet hidden. display: none går inte att animera, så panelen
* hålls i flödet (den är absolut positionerad och påverkar ingen layout) och
* göms med opacity + visibility i stället.
*
* visibility ligger i transitionen med 0.1s fördröjning i stängt läge, så
* panelen hinner tona ut innan den blir omöjlig att träffa. Vid öppning byter
* den direkt (0s) så att pekarhändelser fungerar från första bildrutan.
*
* pointer-events: none är inte överflödigt: utan det ligger en genomskinlig
* panel över sidan och fångar klick under uttoningen.
*/
.mhrf-mega {
opacity: 1;
visibility: visible;
transition: opacity 0.1s ease, visibility 0s;
}
.mhrf-mega[hidden] {
/* !important: temats style.css har `[hidden] { display: none !important }`,
och utan detta går panelen från display:none till block — vilket avbryter
transitionen så den hoppar rakt till opacity 1. */
display: block !important;
opacity: 0;
transition: opacity 0.1s ease, visibility 0s linear 0.1s;
}
/*
* Hela innehållet måste stängas av, inte bara panelen.
*
* Panelen ligger kvar i DOM:en för att kunna tona, och flera regler inuti den
* sätter `pointer-events: auto` och `visibility: visible` för att neutralisera
* GP:s `ul ul`-döljning. De slog igenom även i gömt läge, så listorna fångade
* pekaren 300px ned på sidan och öppnade menyn av sig själva.
*
* Selektorn träffar panelen OCH allt i den, med !important eftersom det är
* just de reglerna som ska förlora.
*/
.mhrf-mega[hidden],
.mhrf-mega[hidden] * {
visibility: hidden !important;
pointer-events: none !important;
}
.mhrf-mega-inner {
display: grid;
/* Sökblocket sätter sin egen fältbredd (420px), så griden får hela
bredden — annars hade hjälptexten inte fått plats vid sidan av fältet. */
grid-template-columns: minmax(0, 1fr);
gap: 0;
max-width: 1320px;
margin: 0 auto;
/* Botten är avståndet NED till strecket ovanför "Händer i
medlemsklubbarna". Samma 40px som strecket har ned till rubriken, se
.mhrf-mega-sektionsrubrik — luften ska vara lika stor på båda sidor. */
padding: 34px 40px 40px;
}
@media (max-width: 1100px) {
.mhrf-mega-inner {
grid-template-columns: minmax(240px, 1fr) 1fr 1fr;
}
}
/* ---------- Utfällningsknappen ----------
*
* GP sätter `display: block` på nav-länkar. Knappen är ett syskon till
* inuti , och mot en block-länk hamnade den på egen rad UNDER etiketten,
* vänsterställd — den såg ut att höra till något annat.
*
* Länken görs därför inline-flex: då är länk och knapp båda inline-nivå och
* ligger på samma rad. Specificiteten måste slå `.main-navigation a`
* (0,1,1) och `.main-navigation .main-nav ul li a` (0,2,4) — den här är
* (0,3,2).
*
* Gäller BÅDA sorterna. Med GP:s display: block fyllde hela det utväxta
* (flex: 2 1 auto) och knappen hamnade på nästa rad — uppmätt: pilen låg
* 180px till vänster om etikettens slut.
*/
.main-navigation .main-nav li.mhrf-mega-item > a,
.main-navigation .main-nav li.mhrf-har-undermeny > a {
display: inline-flex;
align-items: center;
gap: 2px;
}
/*
* Etiketten och pilen ska ALLTID vara svarta, aldrig blå.
*
* GP har inline-regeln
* `.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a
* { color: var(--accent) }`
* som färgar länken blå när LI:n hovras. Knappen ligger i samma li, så pilen
* räknades som hover på menyobjektet: gick man från texten till pilen blev
* etiketten blå fast panelen låg kvar öppen.
*
* !important: regeln är inline-genererad och väger (0,5,3). Att matcha den med
* specificitet skulle ge en selektor som är omöjlig att läsa.
*/
.main-navigation .main-nav li.mhrf-mega-item > a,
.main-navigation .main-nav li.mhrf-mega-item:hover > a,
.main-navigation .main-nav li.mhrf-mega-item > a:hover,
.main-navigation .main-nav li.mhrf-mega-item > a:focus,
.main-navigation .main-nav li.mhrf-mega-item.mhrf-mega-oppen > a {
color: var(--contrast, #222) !important;
}
/* ---------- Pilen på menyposter med undermeny ----------
*
* EN komponent för både megamenyn och de vanliga undermenyerna. Tidigare var
* de vanliga posterna ett ::after på länken och megaposten en , vilket
* krävde två uppsättningar regler som aldrig gick att få att linjera.
*
* Knappen är ett SYSKON till , inte ett barn. Det är hela poängen: länkens
* understrykning dras över hela sin radbox, och ett pseudoelement inuti hade
* fått linjen ritad rakt igenom sig.
*
* !important genomgående: knappen är en och träffas av både temats
* knappstilar och en inline-regel på sidan
* (`.active, .accordion:hover, button:focus { background: #85a6d1 }`). Utan dem
* fick pilen gul respektive blå bakgrund vid hover och fokus. Den ska aldrig ha
* någon bakgrund alls på desktop — den är en pil, inte en knappyta.
*/
.mhrf-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
/* -3px: GP ger 11px högerpadding och glyfen har eget sidoutrymme.
Uppmätt: utan justering blev glappet 12,4px, det ska vara 10px. */
margin: 0 0 0 -3px !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: currentColor !important;
cursor: pointer;
vertical-align: middle;
}
.mhrf-nav-toggle:hover,
.mhrf-nav-toggle:focus,
.mhrf-nav-toggle:focus-visible,
.mhrf-nav-toggle:active,
.mhrf-nav-toggle[aria-expanded="true"] {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: currentColor !important;
}
/* Fokusring behålls — knappen är liten och behöver en synlig markering för
tangentbord. Blå, inte gul: gult är signalfärg för knappar, inte för fokus. */
.mhrf-nav-toggle:focus-visible {
outline: 2px solid var(--blue-primary, #15529f) !important;
outline-offset: 2px;
}
/*
* Caret, inte en fylld triangel. Samma tecken (›) som pilarna i
* .mhrf-lank, roterat 90 grader så det pekar nedåt — undermenyn öppnas under.
*
* Tecknet kommer från CSS och inte från markupen eftersom pilen är dekorativ
* (span:en är aria-hidden). Då slipper mallen och den här filen hållas i synk.
*/
.mhrf-nav-pil {
display: inline-block;
transform: rotate(90deg);
transition: transform 0.15s ease;
}
.mhrf-nav-pil::before {
content: "\203A";
display: block;
font-size: 18px;
font-weight: 400;
line-height: 0;
}
/*
* Öppen: pilen pekar uppåt. 270 och inte -90, samma sak men entydigt åt vilket
* håll den snurrar.
*
* Megamenyn och mobil sätter aria-expanded. På desktop öppnas de vanliga
* undermenyerna på hover, och då finns bara :hover och :focus-within på .
*
* `> ul > li` och inte bara `li`: undermenyposterna får också klassen
* mhrf-har-undermeny (JS sätter den), och en oskyddad `li.mhrf-har-undermeny:hover`
* väger (0,6,1) — mer än regeln nedan som ska hålla dem oroterade. Utan
* barnkombinatorerna roterades även nivå två.
*/
.main-navigation .main-nav > ul > li > .mhrf-nav-toggle[aria-expanded="true"] .mhrf-nav-pil,
.main-navigation .main-nav > ul > li.mhrf-har-undermeny:hover > .mhrf-nav-toggle .mhrf-nav-pil,
.main-navigation .main-nav > ul > li.mhrf-har-undermeny:focus-within > .mhrf-nav-toggle .mhrf-nav-pil {
transform: rotate(270deg);
}
/*
* Nivå två och nedåt: pilen pekar åt HÖGER, inte nedåt. GP fäller ut de
* undermenyerna åt sidan (`.main-navigation ul ul ul { left: 100% }`), så en
* nedåtpil hade pekat åt fel håll.
*
* Ingen rotation alls är rätt läge för glyfen ›, som redan pekar höger.
*/
.main-navigation .main-nav ul ul .mhrf-nav-pil {
/* Alltid höger, oavsett läge. Att listan öppnas är signal nog — pilen
behöver inte animeras.
Inga hover- eller aria-varianter behövs: regeln ovan är scopad till
`> ul > li` och når inte hit. */
transform: none;
transition: none;
}
/*
* Panelerna kant i kant.
*
* GP positionerar nästa nivå med `left: 100%` mot , och slutar 4px
* till höger om panelens synliga kant. Det är summan av två temaregler i
* sidans inline-stilmall: `ol, ul { padding: 0 10px }` och
* `ul.children li { margin: 8px 14px }`, plus att är 100% brett av
* panelens border-box.
*
* -4px i stället för att röra någon av dem: indraget på undermenyposterna är
* avsiktligt och ska inte försvinna. Uppmätt värde, inte gissat.
*/
.main-navigation .main-nav ul.children ul.children {
margin-left: -4px;
}
/*
* Undermenyposterna är block-länkar i en smal panel. Knappen ska sitta längst
* till höger i raden, inte klistrad efter etiketten som på toppnivån.
*/
.main-navigation .main-nav ul ul li.mhrf-har-undermeny {
position: relative;
}
.main-navigation .main-nav ul ul li.mhrf-har-undermeny > .mhrf-nav-toggle {
position: absolute;
top: 0;
right: 12px;
bottom: 0;
margin: 0 !important;
}
.main-navigation .main-nav ul ul li.mhrf-har-undermeny > a {
padding-right: 34px !important;
}
/*
* Länken: svart i båda lägena, och en understrykning som ALLTID finns men är
* genomskinlig. Då är det bara färgen som ändras vid hover, vilket går att
* animera — hade linjen tillkommit vid hover hade den poppat fram utan
* övergång. Samma lösning som .mhrf-lank-text i lankar.css.
*
* !important på color: GP färgar nav-länkar med en väljare som väger (0,2,3).
*/
.main-navigation .main-nav ul > li.mhrf-har-undermeny > a {
color: #000 !important;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 3px;
transition: text-decoration-color 0.2s ease;
}
.main-navigation .main-nav ul > li.mhrf-har-undermeny:hover > a,
.main-navigation .main-nav ul > li.mhrf-har-undermeny:focus-within > a {
text-decoration-color: currentColor;
}
/* ---------- Neutralisera GeneratePress' dropdown-stilar ----------
*
* GP behandlar varje nästlad i navigationen som en undermeny:
*
* .main-navigation ul ul -> opacity 0, position absolute,
* left -99999px, height 0, pointer-events none
* .main-navigation .main-nav ul ul li a -> display block, padding 10px 11px,
* font-size 14px, line-height normal
*
* SPECIFICITETEN ÄR HELA POÄNGEN med de långa selektorerna nedan. GP:s
* a-regel väger (0,2,4). En selektor som `.mhrf-mega-trafflista a` (0,1,1) förlorar,
* och då blir GP:s padding 10px 11px kvar, vilket ger dubbelt så höga rader och
* ett indrag som inte hör dit.
*
* Tre klasser ger (0,3,1) och vinner. Verifierat i webbläsaren, inte gissat.
*/
.main-navigation .mhrf-mega .mhrf-mega-trafflista {
/*
* float: none är inte städning, det är en bugg som fixas. GP floatar
* nav-listorna vänster, och en floatad barn bidrar inte till förälderns
* höjd. Kategorilistorna klarade sig ändå eftersom deras förälder är ett
* grid-item, som innesluter floats — men sökträfflådan är en vanlig div och
* kollapsade till 15 px medan listan inuti var 260 px. Träffarna fanns, de
* ritades bara ovanpå det som låg under.
*/
float: none;
position: static;
left: auto;
width: auto;
height: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
box-shadow: none;
background: transparent;
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation .mhrf-mega .mhrf-mega-trafflista li {
float: none;
position: static;
width: auto;
margin: 0;
padding: 0;
border: 0;
}
/* ---------- Samma sak igen, för mobilmenyns öppna läge ----------
*
* GP har en EGEN uppsättning regler för när mobilmenyn är utfälld:
*
* .main-navigation.toggled .main-nav ul ul { visibility: hidden } (0,3,4)
* .main-navigation.toggled .main-nav ul li a { line-height: ... }
*
* Basöverstyrningarna ovan väger (0,3,1) och förlorar mot dem. Resultatet var
* att posterna hade full geometri på mobil — 105 px per rad — men aldrig
* målades: `visibility` ärvs, och den kom från . Rubrikerna syntes eftersom
* de ligger utanför listan.
*
* Med `.toggled` i selektorn väger de här (0,4,1) och vinner. Verifierat i
* webbläsaren vid 500 px bredd med mobilmenyn utfälld.
*/
.main-navigation.toggled .mhrf-mega .mhrf-mega-trafflista {
visibility: visible;
float: none;
position: static;
left: auto;
width: auto;
height: auto;
opacity: 1;
pointer-events: auto;
}
.main-navigation.toggled .mhrf-mega .mhrf-mega-trafflista a {
/* GP:s mobilradhöjd är 45 px och gjorde varje post 105 px hög. */
line-height: 1.35;
width: auto;
}
.main-navigation.toggled .mhrf-mega .mhrf-mega-trafflista a {
padding: 6px 0;
}
/* ---------- Kolumnrubriker ---------- */
/* Samma stil som kolumnrubrikerna — gemener, Source Sans Pro 600. Den var
versal 12px medan de andra rubrikerna är gemena 16px, och stack ut som ett
kvarglömt element. */
.mhrf-mega .mhrf-mega-rubrik {
display: block;
margin: 0 0 10px;
font-family: "Source Sans Pro", sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
line-height: 1.3;
color: inherit;
}
/* ---------- Händer i medlemsklubbarna ---------- */
.mhrf-mega-hander {
max-width: 1320px;
margin: 0 auto;
padding: 0 40px 34px;
}
/* Sektionsrubriken ärver temats rubriktypografi — ingen font-family och ingen
font-weight här. Den tyngden ligger i stället på kolumnrubrikerna nedan.
Resterande deklarationer är nollställningar mot GP:s nav-stilar, inte
typografiska val. */
.mhrf-mega .mhrf-mega-sektionsrubrik {
margin: 0 0 16px;
/* Lika stort som .mhrf-mega-inner:s padding-bottom, som är luften ovanför
samma streck. Ändras det ena måste det andra följa med. */
padding-top: 40px;
border-top: 1px solid var(--blue-primary--trans-40, #afc4e1);
font-size: 26px;
line-height: 1.3;
color: inherit;
text-transform: none;
letter-spacing: 0;
}
.mhrf-mega-hander-kolumner {
display: grid;
/* Evenemangen får mer bredd — de ligger i två spalter inne i panelen,
nyheterna i en. Samma proportion som flödesvyerna. */
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 90px;
/* start, inte stretch: panelen ska inte sträckas till nyhetskolumnens höjd
om den råkar vara högre. */
align-items: start;
}
/* ---- "Visa allt" centrerad under båda kolumnerna ----
*
* !important på line-height och padding: GP:s inline-stil sätter
* `line-height: 60px` och `padding: 10px 11px` på nav-länkar och vinner över
* specificitet.
*/
/* Ingen linje — länken hör till samma del som kolumnerna ovanför och ska inte
avgränsas från dem. */
.mhrf-mega-visa-allt-rad {
margin: 33px 0 0;
padding-top: 0;
border-top: 0;
}
/*
* Utseendet kommer från .mhrf-lank med modifierarna --large och --center i
* lankar.css. Reglerna här UPPFINNER inga värden — de upprepar bara dem
* modifierarna redan sätter, på en selektor tung nog att slå GP.
*
* GP:s nav-regler väger (0,1,1) till (0,2,4) och vinner annars över
* komponentens (0,1,0). Varje rad nedan har sin egen anteckning om vilken
* regel den slår.
*/
.main-navigation .mhrf-mega .mhrf-lank {
/*
* display: flex måste upprepas här. GP:s `.main-navigation a` sätter
* display: block och väger (0,1,1) mot komponentens (0,1,0) — utan den här
* raden blev länken ett block och justify-content gjorde ingenting, så
* innehållet låg kvar till vänster.
*/
display: flex;
align-items: center;
justify-content: center;
/* Som --center, men utan vågrät padding: panelen har redan sin egen. */
padding: 18px 0 !important;
line-height: 1.4 !important;
/* Som --large. GP:s `.main-navigation .main-nav ul li a` väger (0,2,4) och
sätter 15px, så modifierarens (0,1,0) förlorar. */
font-size: 20px;
}
.main-navigation .mhrf-mega .mhrf-lank,
.main-navigation .mhrf-mega .mhrf-lank:hover,
.main-navigation .mhrf-mega .mhrf-lank:focus,
.main-navigation .mhrf-mega .mhrf-lank:focus-visible {
color: #000 !important;
background: transparent !important;
/*
* Sidans inline-stilmall har `.main-navigation ul a:hover { text-decoration:
* underline }` som väger (0,2,2) och slår komponentens (0,1,0). Den satte
* understrykningen på LÄNKEN, och eftersom pilen är ett flex-item drogs
* linjen tvärs över den också.
*
* Understrykningen hör hemma på .mhrf-lank-text, ingen annanstans.
*/
text-decoration: none;
}
/* Evenemangskolumnens panel. Samma ljusblå ton som pluginets
.mhrf-kn-flode-panel i flödesvyerna (--blue-secondary), så evenemang ser
likadana ut i menyn som på klubbsidan och startsidan. Nyhetskolumnen har
ingen panel — också som i flödet. */
.mhrf-mega .mhrf-mega-kol--evenemang {
/* Ingen padding i botten: sista kortet bär redan sina 32px (se
.mhrf-mega .mhrf-kn-flodekort längre ned), och panelens egna 18px ovanpå
dem blev ett tomt blått fält under listan. */
padding: 16px 20px 0;
background: var(--blue-secondary, #ebf1f8);
border-radius: var(--radius-m, 8px);
}
/*
* Nyhetskolumnen har ingen panel men SAMMA vertikala padding, så rubrikerna och
* första kortet i de två kolumnerna hamnar på samma linje. Utan den låg allt i
* evenemangskolumnen 16 px lägre — panelens padding-top — och kolumnerna såg
* förskjutna ut.
*
* Ingen horisontell padding: den finns bara för att hålla texten innanför
* panelens kant, och nyhetskolumnen har ingen kant.
*/
.mhrf-mega .mhrf-mega-kol--nyhet {
padding: 16px 0 0;
}
/* Kolumnrubrikerna — Kommande evenemang / Senaste nyheterna.
*
* Source Sans Pro 700, inte versaler. Storleken höjd till 1rem: 12px var satt
* för versalgemener, och samma storlek utan caps läser inte som en rubrik. */
.mhrf-mega .mhrf-mega-underrubrik {
margin: 0 0 12px;
font-family: "Source Sans Pro", sans-serif;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
line-height: 1.3;
color: inherit;
}
/* ---------- Flödeskorten i menyn ----------
*
* Korten renderas av PLUGINET (mhrf_kn_flode_kort) och bär dess CSS. Menyn har
* ingen egen kortdesign längre — den hade en, med egna mått, utan typmärke och
* utan klubblogotyp, och de två versionerna gled isär.
*
* Reglerna nedan lägger inte till någon design. De lämnar tillbaka det som
* navigationen tar ifrån korten. Uppmätt i webbläsaren, med de vinnande
* reglerna noterade:
*
* .main-navigation a display:block, 15px, weight 400
* .main-navigation .main-nav ul li a padding 11px, line-height 60px
* .main-navigation .main-nav ul li a color: var(--contrast)
* .main-nav img height: 21px
*
* Selektorerna väger (0,3,1) respektive (0,4,0) och slår dem alla.
*/
.main-navigation .mhrf-mega .mhrf-kn-flodekort a {
display: inline;
width: auto;
padding: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
text-transform: none;
background: transparent;
}
/* Rubriklänken är svart i flödet. GP:s var(--contrast) vann annars. */
.main-navigation .mhrf-mega .mhrf-kn-flodekort .mhrf-kn-flodekort-lank {
color: #000;
}
/* Klubbnamnet: blå versaler, pluginets egna mått. */
.main-navigation .mhrf-mega .mhrf-kn-flodekort .mhrf-kn-flodekort-klubbnamn {
color: var(--blue-primary, #15529f);
font-size: 0.8125em;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/*
* Logotypen. `.main-nav img { height: 21px }` är skriven för menyns egna
* ikoner och krympte klubblogotypen till under halva storleken.
*/
.main-navigation .mhrf-mega .mhrf-kn-flodekort-logo {
width: auto;
height: auto;
max-width: 44px;
max-height: 44px;
}
/*
* Evenemangsrutan ritas redan av .mhrf-mega-kol--evenemang här: samma ljusblå
* (#ebf1f8), samma 8px radie. Pluginets egen panel la en IDENTISK ruta inuti
* den och sköt in korten ytterligare 24px från kanten — uppmätt 20px från
* kolumnen plus 24px från panelen.
*
* Bakgrunden, radien och den horisontella paddingen tas bort. Den vertikala
* står kvar: den bär kortens avstånd till rutans över- och underkant.
*/
.mhrf-mega .mhrf-kn-flode-panel {
padding-left: 0;
padding-right: 0;
/* Botten nollas av samma skäl som på .mhrf-mega-kol--evenemang: pluginets
16px låg INUTI den blå rutan och adderades till kortets egna 32px. */
padding-bottom: 0;
background: transparent;
border-radius: 0;
}
/*
* Tätare kort i menyn. Pluginet ger varje kort `padding: 24px 0 60px` — måtten
* är gjorda för flödessidan, där korten står ensamma på en hel sida. I panelen
* blev 60px under varje kort ett tomt fält som sköt ned "Visa allt"-raden ur
* synhåll på lägre skärmar.
*
* Bara de lodräta värdena ändras. Den vågräta paddingen är 0 i pluginet och
* ska förbli det: korten ska ligga i linje med kolumnrubriken ovanför.
*/
.mhrf-mega .mhrf-kn-flodekort {
padding-top: 16px;
padding-bottom: 32px;
}
/* ---------- Sökkolumnen ---------- */
/*
* Rubrik, fält och hjälptext som ett block i stället för tre staplade fragment.
* Hjälptexten står till höger om fältet, vertikalt centrerad — då läses raden
* som en sökfunktion och inte som lös text under en ruta.
*
* Träfflistan får hela bredden under, så den har plats när man söker.
*/
.mhrf-mega-sok {
display: grid;
/* 1fr, inte en fast maxbredd: fältet fyller raden fram till knappen. */
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"rubrik rubrik"
"falt knapp"
"traffar traffar";
align-items: center;
column-gap: 18px;
}
.mhrf-mega-sok > .mhrf-mega-rubrik {
grid-area: rubrik;
}
.mhrf-mega-sokfalt {
position: relative;
grid-area: falt;
}
/*
* !important på line-height och padding: GP sätter `line-height: 60px` och
* `padding: 10px 11px` på nav-länkar från en inline-stil, och den vinner över
* specificitet.
*/
.main-navigation .mhrf-mega .mhrf-mega-allalank {
grid-area: knapp;
justify-self: start;
/* !important: temat sätter underline på länkar via `a { text-decoration:
underline }` i den inline-genererade stilen, och den vinner över
specificitet. Knappen ska aldrig vara understruken. */
text-decoration: none !important;
line-height: 1em !important;
/* 20px i sidled: 10px runt om gjorde etiketten trång mot pillerkanten,
som med border-radius: 50vmax äter av hörnen. Lodrätt kvar på 10px, den
höjden matchar sökfältets. */
padding: 10px 20px !important;
height: 100%;
display: flex;
align-items: center;
border-radius: 50vmax;
font-size: 0.9375rem;
white-space: nowrap;
}
.mhrf-mega-sok > .mhrf-mega-traffar {
grid-area: traffar;
}
.main-navigation .mhrf-mega .mhrf-mega-sokfalt input {
width: 100%;
padding: 10px 38px 10px 14px;
/* Samma ram som klubbfiltrets fält och mhrf-select, samma färg i alla
lägen. */
border: 1px solid var(--blue-primary--trans-60, #85a6d1);
border-radius: var(--radius-s, 4px);
background: #fff;
font-size: 0.9375rem;
line-height: 1.4;
}
.main-navigation .mhrf-mega .mhrf-mega-sokfalt input:focus {
border-color: var(--blue-primary--trans-60, #85a6d1);
outline: none;
box-shadow: none;
}
.mhrf-mega-sokikon {
position: absolute;
top: 50%;
right: 13px;
transform: translateY(-50%);
color: var(--gray-primary, #435b79);
pointer-events: none;
}
/* ---------- Sökträffarna ---------- */
.mhrf-mega-traffar:empty {
display: none;
}
.mhrf-mega-traffar.har-traffar {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--blue-secondary, #ebf1f8);
}
.mhrf-mega-trafflista {
list-style: none;
margin: 0;
padding: 0;
/* Åtta träffar plus en länk ska inte kunna göra panelen orimligt hög. */
max-height: 260px;
overflow-y: auto;
}
.main-navigation .mhrf-mega .mhrf-mega-trafflista a {
display: block;
width: auto;
padding: 6px 0;
color: inherit;
text-decoration: none;
line-height: 1.3;
font-size: 0.875rem;
}
.main-navigation .mhrf-mega .mhrf-mega-trafflista a:hover,
.main-navigation .mhrf-mega .mhrf-mega-trafflista a:focus-visible {
background: transparent;
}
.mhrf-mega-trafflista a:hover .mhrf-mega-traff-namn,
.mhrf-mega-trafflista a:focus-visible .mhrf-mega-traff-namn {
text-decoration: underline;
color: var(--blue-primary, #15529f);
}
.mhrf-mega-traff-namn {
display: block;
font-weight: 600;
}
.mhrf-mega-traff-meta {
display: block;
font-size: 0.8125em;
color: var(--gray-primary, #435b79);
}
.mhrf-mega-tom {
margin: 0;
font-size: 0.9375rem;
color: var(--gray-primary, #435b79);
}
.main-navigation .mhrf-mega .mhrf-mega-merlank {
display: inline-block;
width: auto;
margin-top: 10px;
padding: 0;
font-size: 0.8125rem;
font-weight: 600;
line-height: 1.4;
background: transparent;
}
/* ---------- Mobil ----------
*
* I mobilmenyn är navigationen en vertikal lista, och en absolut positionerad
* panel skulle lägga sig ovanpå de andra menyposterna. Panelen blir därför ett
* vanligt block i flödet.
*/
/* 768px, inte 767: GP:s egna mobilregler ligger på
`@media screen and (max-width: 768px)`. Med 767 här hade det uppstått ett
1px-brett fönster där deras mobilradhöjd gällde men mina inte. */
@media (max-width: 768px) {
/*
* Ingen intoning på mobil, och panelen måste tas ur flödet när den är
* stängd.
*
* På desktop är den absolut positionerad, så display: block kostar ingen
* layout. Här är den position: static och ett flex-item i — uppmätt
* lämnade den en tom yta på 2009px i mobilmenyn när den var gömd.
*/
.mhrf-mega[hidden] {
display: none !important;
}
.mhrf-mega {
position: static;
left: auto;
right: auto;
border-top: 0;
box-shadow: none;
background: var(--blue-secondary, #ebf1f8);
}
.mhrf-mega-inner {
grid-template-columns: 1fr;
gap: 24px;
padding: 20px;
}
/* Sökblocket staplas: hjälptexten får inte plats vid sidan av fältet. */
.mhrf-mega-sok {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"rubrik"
"falt"
"knapp"
"traffar";
row-gap: 12px;
}
/* Kolumnerna staplas, och evenemangen går från två spalter till en. */
.mhrf-mega-hander-kolumner {
grid-template-columns: 1fr;
gap: 22px;
}
.mhrf-mega-hander {
padding: 0 20px 20px;
}
/* ---------- Caretarna på mobil ----------
*
* I mobilmenyn är varje menypost en egen rad på 45px (GP:s
* `line-height: 45px !important`). Caretet ska då sitta längst till höger i
* raden, inte klistrat efter etiketten, och vara en tydlig ruta att sikta
* på med tummen.
*/
/*
* blir en flexrad: etikett till vänster, knapp till höger, undermenyn
* på egen rad under.
*
* Ersätter absolut positionering med top: 2.5px. Den utgick från en
* radhöjd på 45px och blev fel så fort etiketten radbröts — uppmätt 10px
* för högt på båda nivåerna. align-items: center centrerar knappen mot
* radens faktiska höjd i stället, oavsett hur många rader etiketten tar.
*/
.main-navigation .main-nav li.mhrf-har-undermeny,
.main-navigation .main-nav li.mhrf-mega-item {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.main-navigation .main-nav li.mhrf-har-undermeny > a,
.main-navigation .main-nav li.mhrf-mega-item > a {
flex: 1 1 auto;
}
/* Undermenyn och megapanelen bryter till egen rad i flexen. */
.main-navigation .main-nav li.mhrf-har-undermeny > ul.children,
.main-navigation .main-nav li.mhrf-mega-item > .mhrf-mega {
flex: 0 0 100%;
}
.mhrf-nav-toggle {
position: static;
flex: 0 0 auto;
width: 40px;
height: 40px;
margin: 0 6px 0 0 !important;
}
.mhrf-nav-pil::before {
/* Optisk centrering — glyfen › sitter inte mitt i sin ruta. */
padding-bottom: 5px;
padding-left: 1px;
font-size: 26px;
line-height: 1;
}
/*
* Mobilmenyn tonar in när man trycker på Meny.
*
* En animation och inte en transition: GP växlar klassen toggled, och
* animationen körs en gång när klassen läggs till. En transition hade
* triggats om varje gång något inuti menyn ändrade opacity — och en
* utfälld undermeny ska inte tona, bara öppnas.
*/
.main-navigation.toggled .main-nav {
animation: mhrf-meny-in 0.2s ease;
}
/*
* Inga understrykningar alls i mobilmenyn.
*
* De kommer från samma sticky-hover som pilen: efter ett tryck ligger
* :hover kvar på och linjen blev stående. Här finns ingen anledning
* att ha den över huvud taget — raderna är redan tydligt avgränsade.
*
* Samma specificitet som desktopregeln (0,4,3), och senare i filen.
*/
.main-navigation .main-nav ul > li.mhrf-har-undermeny > a,
.main-navigation .main-nav ul > li.mhrf-har-undermeny:hover > a,
.main-navigation .main-nav ul > li.mhrf-har-undermeny:focus-within > a {
text-decoration: none;
}
/*
* :hover fastnar på touch. Efter ett tryck ligger den kvar på tills
* man rör något annat, och pilen blev stående roterad även när menyn var
* stängd.
*
* [aria-expanded="false"] i selektorn löser det utan att offra hover på
* pekarenheter: när knappen är stängd pekar pilen nedåt oavsett hover, och
* när den är öppen får hover-regeln ovan rotera den. Väger (0,7,2) mot
* hover-regelns (0,6,2).
*/
.main-navigation .main-nav > ul > li.mhrf-har-undermeny:hover > .mhrf-nav-toggle[aria-expanded="false"] .mhrf-nav-pil {
transform: rotate(90deg);
}
/*
* Nivå två och nedåt pekar NEDÅT på mobil, tvärtemot desktop: här fälls
* ingenting ut åt sidan, allt staplas. Och till skillnad från desktop ska
* de snurra när de öppnas.
*/
.main-navigation .main-nav ul ul .mhrf-nav-pil {
transform: rotate(90deg);
transition: transform 0.15s ease;
}
.main-navigation .main-nav ul ul .mhrf-nav-toggle[aria-expanded="true"] .mhrf-nav-pil {
transform: rotate(270deg);
}
/* Nivå 2 använder samma ruta som toppnivån, inte den smala desktopvarianten
som är absolut positionerad. */
.main-navigation .main-nav ul ul li.mhrf-har-undermeny > .mhrf-nav-toggle {
position: static;
top: auto;
right: auto;
bottom: auto;
/*
* 10px = 6px in från panelkanten + de 4px som sticker ut utanför
* den. Marginalen måste upprepas här: desktopregeln ovan sätter
* `margin: 0 !important` med högre specificitet.
*/
margin: 0 10px 0 0 !important;
}
/*
* Utfälld undermeny. GP parkerar på left: -99999px
* med opacity 0, height 1px OCH float: left med fast bredd 219px — alla
* måste nollställas. float är den som är lätt att missa: utan float: none
* bidrar listan inte till :ets höjd, så den lägger sig ovanpå
* menyposterna under i stället för att skjuta ned dem. Uppmätt: blev
* 65px högt medan listan var 804px.
*/
.main-navigation .main-nav ul > li.mhrf-undermeny-oppen > ul.children {
position: static;
left: auto;
float: none;
width: 100%;
height: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/*
* Megaposten får samma ruta. måste bli relative igen — desktopregeln
* gör den static för att panelen ska kunna positioneras mot .inside-header,
* men på mobil ligger panelen i flödet och behöver ingen sådan referens.
*/
.main-navigation li.mhrf-mega-item {
position: relative;
}
/*
* Sökikonen i mobilhuvudet visas bara när menyn är öppen.
*
* GP lägger klassen mobile-menu-open på när mobilmenyn fälls ut —
* kontrollerat genom att jämföra klasserna före och efter ett klick. Den
* ligger på roten och inte på wrappern, så väljaren måste börja där.
*
* Två klasser på samma element (.main-navigation.mobile-menu-control-wrapper):
* GP har `.main-navigation .menu-bar-items { display: flex }` som väger lika
* mycket (0,2,0) och laddas senare, så en kortare selektor förlorar.
*/
.main-navigation.mobile-menu-control-wrapper .menu-bar-items {
display: none;
}
.mobile-menu-open .main-navigation.mobile-menu-control-wrapper .menu-bar-items {
display: flex;
}
/*
* Bakgrunden måste upprepas för varje tillstånd. Desktopreglerna sätter
* `background: transparent !important` på :hover, :focus, :focus-visible,
* :active och [aria-expanded="true"] med en väljare som väger (0,2,0) —
* en ensam .mhrf-nav-toggle (0,1,0) förlorar även med !important. Därav
* att knappen såg ut att tappa färgen så fort man tryckt på den.
*/
.mhrf-nav-toggle,
.mhrf-nav-toggle:hover,
.mhrf-nav-toggle:focus,
.mhrf-nav-toggle:focus-visible,
.mhrf-nav-toggle:active,
.mhrf-nav-toggle[aria-expanded="true"] {
border-radius: var(--radius-s, 6px) !important;
background: var(--blue-secondary, #ebf1f8) !important;
color: #000 !important;
}
/*
* !important är här enda utvägen, inte slarv.
*
* GeneratePress skriver ut `line-height: 45px !important` på
* `.main-navigation li a` i en inline-stil inuti sin mobil-media-query.
* !important slår specificitet, så ingen selektor hur lång den än är vinner
* över den. Utan detta blev varje flödespost 103 px hög på mobil.
*
* Verifierat med getPropertyPriority() i webbläsaren — inte antaget.
*/
.mhrf-mega .mhrf-kn-flodekort a,
.mhrf-mega .mhrf-mega-trafflista a,
.mhrf-mega .mhrf-mega-allalank {
line-height: 1.35 !important;
}
}
/* ---------- Notis på listsidan ----------
*
* Visas när man kommit in via en kategorilänk i megamenyn, så det framgår
* varför tabellen är filtrerad.
*/
.mhrf-klubbsok-notis {
margin: 10px 0 0;
padding: 8px 14px;
background: var(--blue-secondary, #ebf1f8);
border-left: 4px solid var(--blue-primary, #15529f);
border-radius: var(--radius-s, 4px);
font-weight: 600;
}
@keyframes mhrf-meny-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}