/* ========================================================================= TZ_ACCORDION — samma accordion-design på land- och temasidor Pass 88, 2026-09-27 VAD SOM SKILDE, UPPMÄTT Båda layouterna använder samma Divi-modul, samma attribut (`class="zmart-accordion"`) och SAMMA modulpreset `q677rad7f5`. Ändå såg de olika ut i stängt läge: /land/frankrike/ bakgrund transparent, ingen ram, padding 0 20px /tema/kryssningsresor/ bakgrund #f4f4f4, 1px #d9d9d9, padding 20px ROTORSAKEN ÄR INTE DESIGNEN — DET ÄR SELEKTORN. Divi skriver ut presetens regel som .et-db #et-boc .et-l .preset--module--divi-accordion-item--q677rad7f5… Den kräver alltså en förälder med klassen `.et-l`. På landsidan ligger accordionen inuti det omslaget. På temasidan gör den det inte (`el.closest('.et-l') === null`, uppmätt), så presetregeln matchar aldrig och Divis standardstilar för `.et_pb_toggle` och `.et_pb_toggle_close` blir kvar — det är de som är den grå rutan med ram. LÖSNINGEN ÄR DÄRFÖR INTE EN NY DESIGN, utan att skriva presetens värden en gång till på en selektor som inte beror på Divis omslag. Landsidan ser redan ut så här, så reglerna är en no-op där. AVGRÄNSNING: bara `.zmart-accordion`. Klassen sattes av två layouter — `Alla Länder` (379508) och `Layout För All teman Brödtext` (384836) — och inget annat på sajten använder den. Typografin rörs inte: rubrikerna är redan identiska (Poppins 22 px 600) på båda. UPPDATERING PASS 112 (2026-09-30): landmallen 379508 har bytt från Accordion till Toggle och sätter inte längre `zmart-accordion`. Reglerna nedan gäller därmed numera bara temamallen 384836. De står kvar oförändrade — upplevelsemallen 383533 kör samma preset men utan klassen, precis som förut. Landmallens nya utseende ligger i PASS 112-blocket sist i filen. UPPDATERING PASS 116 (2026-09-30): nu har även temamallen 384836 bytt till Toggle. Ingen mall på sajten sätter längre `zmart-accordion`, så reglerna i det här blocket matchar just nu ingenting. De står ändå kvar ORÖRDA på ägarens uttryckliga beslut — de är sajtens enda dokumenterade motmedel mot preset-selektorproblemet ovan, och den dagen en layout utanför `.et-l` behöver en Accordion igen är de det som gör att den ser rätt ut. Presetet `q677rad7f5` är likaså ORÖRT och används fortfarande av upplevelsemallen 383533. ========================================================================= */ body #page-container .zmart-accordion .et_pb_toggle { background-color: transparent !important; border: 0 !important; padding: 0 20px !important; margin: 0 !important; } /* Divis standard lägger på en bottenmarginal mellan posterna i öppet läge. Landsidan har 0 — samma här. */ body #page-container .zmart-accordion .et_pb_toggle_open, body #page-container .zmart-accordion .et_pb_toggle_close { margin-bottom: 0 !important; } /* ========================================================================= TZ_FORDJUPNING — delad fördjupningssektion för land- och temasidor Pass 112, 2026-09-30. Utökad till temamallen i pass 116, 2026-09-30. `tz-fordjupning` är sajtens GEMENSAMMA komponent för redaktionella fördjupnings- och FAQ-sektioner. Den sätts av två mallar: Alla Länder (379508) sedan pass 112 Layout För All teman Brödtext (384836) sedan pass 116 Reglerna nedan var generiska redan från pass 112 — ingen selektor nämner land eller tema — så pass 116 krävde INGEN ny CSS. Skriv inget mallspecifikt här: det som gäller den ena mallen ska gälla den andra. VAD SOM ÄNDRADES OCH VARFÖR Sektionen byggde på Divi 5:s Accordion-modul. Den har ett inbyggt fel för det här ändamålet: en öppen post går inte att stänga igen. Det är ingen inställning som råkat bli fel — modulschemat för `divi/accordion` har inget fält för det, och en öppen post behåller `et_pb_toggle_open` vid klick (uppmätt på /land/vietnam/: höjden stod kvar på 302 px). Landmallen 379508 använder därför sedan pass 112 tio fristående `divi/toggle`-moduler i stället. Samma native Divi 5-familj, samma markup (`.et_pb_toggle` / `_open` / `_close` / `.et_pb_toggle_title` / `.et_pb_toggle_content`), samma dynamiska ACF-data och samma villkor — men Toggle går att stänga igen (uppmätt: 66 → 355 → 66 px). Mönstret är inte nytt på sajten: resamallen 393143 kör Divi Toggle sedan tidigare (`.tzr-toggle`). Ingen egen JavaScript behövs. FÖLJD: flera poster kan vara öppna samtidigt. Det är Toggles natur och ägarens uttryckliga beslut 2026-09-30 — "en öppen åt gången" går inte att kombinera med stängbarhet i Divi, och ska inte återskapas med egen JS. AVGRÄNSNING: bara `.tz-fordjupning`. Sedan pass 116 sätts klassen av både land- (379508) och temamallen (384836) — samma klasser, samma toggles, samma villkor, bara olika ACF-fält (`land_` respektive `tema_`). Upplevelsemallen 383533 står UTANFÖR och kör kvar sin Accordion med presetet `q677rad7f5`, som är ORÖRT. Dess sektion renderar i praktiken aldrig: den läser `land_detaljer_*` på CPT `destination`, där ingen post har den datan. Det är dokumenterad teknisk skuld, inte en glömd mall. TEMAMALLENS AVVIKELSER FRÅN LANDMALLEN, MEDVETNA (pass 116): temamallens H2 är postens titel rå, utan "Mer om"/"som resmål"; introraden saknar landmallens villkor på ingressfältet; och sektionen har en tredje rad — epilog med kontaktknapp — som landmallen inte har. Allt detta är temamallens eget innehåll och lämnades orört. Ingen regel nedan träffar epilograden, eftersom varje selektor kräver `__intro`, `__lista`, `__over` eller `__post` som andra klass. RUBRIKNIVÅ: Toggle renderar H5 som standard, Accordion gav H3 via presetet. Under sektionens H2 hade det hoppat över två nivåer, så `headingLevel: h3` är satt på modulerna i mallen. H2 → H3 ×10, precis som förut. `!important` FÖREKOMMER PÅ TRE STÄLLEN, alla för att slå temats EGNA globala `!important`-regler i den oversionerade style.css: p { font-size: 1.2em !important; font-family: var(--tz-font-body) !important } body #page-container .et_pb_row:not(.et_pb_row_inner) { width: var(--tz-container-width) !important; max-width: var(--tz-container-max) !important } (= 2400 px) OBS: skriv aldrig ett kommentartecken inuti det här blocket. CSS-kommentarer nastlar inte, så ett inre slut-tecken stänger kommentaren i förtid — resten av texten blir då en ogiltig selektor som slukar NÄSTA regel. Exakt det hände under pass 112: radbreddsregeln nedan försvann spårlöst ur stilmallen medan filen såg helt korrekt ut. Utan dem blir överrubriken 19,2 px Roboto i stället för 13 px Poppins, svarstexten 19,2 px, och raderna 2400 px breda oavsett vad som står här. Samma situation och samma lösning som tz-bildhero.css redan använder för `.tz-bildhero__over p` och för radbredden (`max-width: … !important`). SPECIFICITET: reglerna scopas via sektionsklassen först (`body #page-container .tz-fordjupning .tz-fordjupning__…`), samma mönster som resten av temat. Det behövs inte för att slå Divis egna selektorer — två klasser räckte i test — men håller blocket enhetligt och gör det omöjligt att råka träffa något utanför landmallen. MÄTFÄLLA VÄRD ATT MINNAS: Chrome driver inte CSS-transitions för element UTANFÖR vyn. Mätningar av öppet läge som görs utan att först scrolla fram sektionen returnerar transitionens STARTvärden — ramen såg ut att vara kvar på rgba(26,26,26,.14), skuggan saknades och pilen stod still på 45°, trots att reglerna var korrekta. Scrolla in sektionen före mätning. H2:N ÄR MEDVETET ORÖRD. Sajtens sektionsrubriker är genomgående svarta 26 px — "I blickfång" och "Blogginlägg" står så på samma sida. Att göra just den här grön hade brutit mot grannsektionerna. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Läsbredder Uppmätt före: introraden 1524 px och listraden 1715 px — radlängder på ~200 tecken, och listan var dessutom BREDARE än ingressen den hör till. Båda får nu sajtens egna etablerade mått. 1080 px är samma bredd som brödtextblocket på kryssningssidorna (`.tz-kr-sida`). UPPDATERING PASS 116B: ingressen kapades tidigare till `--tz-hero-lead-width` (62ch) och centrerades. Den följer nu i stället radens hela bredd och läses vänsterställd, så att dess vänster- och högerkant linjerar exakt med fördjupningskorten under. Uppmätt på /tema/nhl-resor/ vid 390, 768, 1024, 1440 och 1920 px: ingressens och kortens kanter är identiska på pixeln vid samtliga bredder. Att det räcker med `text-align` beror på att introraden INTE längre bär någon egen breddinställning i mallarna. Så länge raden är en vanlig rad ärver den sajtens responsiva radbredd precis som listraden gör, vid varje brytpunkt. Sätt därför ALDRIG en bredd på introraden här — det skulle tvinga oss att återskapa sajtens responsiva logik i mediafrågor, och det var precis det som gjorde raden feljusterad under 1080 px före pass 116B. Överrubriken och H2 är fortsatt CENTRERADE. Endast ingressens brödtext är vänsterställd. ---------------------------------------------------------------------- */ /* `!important` krävs: style.css sätter max-width: var(--tz-container-max) !important (2400 px) på varje .et_pb_row. Samma grepp som tz-bildhero.css använder för hero-radens bredd. */ body #page-container .tz-fordjupning .tz-fordjupning__intro.et_pb_row, body #page-container .tz-fordjupning .tz-fordjupning__lista.et_pb_row { max-width: 1080px !important; } /* Luft mellan introduktionen och listan — raderna har margin 0 från Divi. */ body #page-container .tz-fordjupning .tz-fordjupning__intro.et_pb_row { margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); } /* Ingressen, men inte överrubriken. Fyller radens bredd och läses vänsterställd — se punkt 1 ovan. */ body #page-container .tz-fordjupning .tz-fordjupning__intro .et_pb_text:not(.tz-fordjupning__over) .et_pb_text_inner { text-align: left; } /* ------------------------------------------------------------------------- 2. Överrubriken Samma formspråk som `.tz-bildhero__over` (pass 109) och `.tzkmp-teaser__over`: liten spärrad versal i rubriktypsnittet. Grön, eftersom den beigea ytan tål en accent och rubriken under är svart. ---------------------------------------------------------------------- */ body #page-container .tz-fordjupning .tz-fordjupning__over .et_pb_text_inner p { margin: 0 0 0.6rem; font-family: var(--tz-font-heading) !important; font-size: 0.8125rem !important; line-height: 1.3 !important; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tz-green); } /* ------------------------------------------------------------------------- 3. Fördjupningsposten Ett lugnt kort per ämne: vit yta på den beigea sektionen, temats egen ram och radie, och hela rubrikraden som klickyta med `--tz-tap` som lägsta höjd. Divis standard var grå #f4f4f4 med fyrkantiga hörn, 20 px padding och noll marginal mellan posterna. ---------------------------------------------------------------------- */ body #page-container .tz-fordjupning .tz-fordjupning__post.et_pb_toggle { margin: 0 0 12px; padding: 0; background: var(--tz-color-surface); border: 1px solid var(--tz-color-border); border-radius: var(--tz-radius); transition: border-color 160ms ease, box-shadow 160ms ease; } body #page-container .tz-fordjupning .tz-fordjupning__post.et_pb_toggle:last-child { margin-bottom: 0; } body #page-container .tz-fordjupning .tz-fordjupning__post.et_pb_toggle:hover { border-color: rgba(65, 83, 33, 0.32); } /* Öppet läge ska synas utan att bli tungt: samma gröna ram som hover plus temats egen mjuka skugga. */ body #page-container .tz-fordjupning .tz-fordjupning__post.et_pb_toggle_open { border-color: rgba(65, 83, 33, 0.32); box-shadow: var(--tz-shadow); } /* -- Rubrikraden ------------------------------------------------------- */ body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_title { position: relative; display: flex; align-items: center; min-height: var(--tz-tap); margin: 0; padding: 16px 58px 16px 22px; font-family: var(--tz-font-heading); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); font-weight: 600; line-height: 1.35; color: var(--tz-color-text); cursor: pointer; } body #page-container .tz-fordjupning .tz-fordjupning__post.et_pb_toggle_open .et_pb_toggle_title { color: var(--tz-green); } /* -- Öppna/stäng-indikatorn -------------------------------------------- Ritad med två kantlinjer i stället för Divis ETmodules-glyf. Samma skäl som i tz-kampanj.php: teckensnittet laddas inte på alla sidtyper, och en ren CSS-form kan inte utebli. Divis egen ::before används inte. ---------------------------------------------------------------------- */ body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_title::before { content: none; } body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_title::after { content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px; margin-top: -6px; background: none; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; color: var(--tz-green); font-size: 0; transform: rotate(45deg); transition: transform 180ms ease, margin-top 180ms ease; } body #page-container .tz-fordjupning .tz-fordjupning__post.et_pb_toggle_open .et_pb_toggle_title::after { margin-top: -2px; transform: rotate(-135deg); } /* -- Svaret ------------------------------------------------------------ */ /* Svaren är i snitt 1 040 tecken och som längst 3 879 (georgia). Utan en radlängd blir de tusen pixlar breda textblock. 72ch är något generösare än ingressens 62ch, eftersom texten här är vänsterställd och löpande. Måttet sitter på BEHÅLLAREN, inte på varje barn. Ett `ch` beror på elementets eget typsnitt, så `> * { max-width: 72ch }` gav styckena 647 px och en h4 i samma svar 837 px — samma regel, olika resultat. Behållaren mäter en gång, i brödtextens typsnitt, och alla barn delar den kanten. `box-sizing: border-box` gäller globalt i temat, därför + paddingen. */ body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_content { padding: 0 22px 20px; max-width: calc(72ch + 44px); } /* 18 av svaren inleds med eller innehåller en egen underrubrik — h4 i de flesta fall, enstaka h2 och h5 ur redaktionstexten. Divi ger dem margin 0, så de klistrar i stycket under. De ska läsa som mellanrubriker i svaret, inte som en ny sektion. */ body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_content :is(h2, h3, h4, h5, h6) { margin: 1.25em 0 0.4em; font-family: var(--tz-font-heading); font-size: 1.0625rem; line-height: 1.35; color: var(--tz-color-text); } body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_content > :first-child { margin-top: 0; } body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_content p { margin: 0 0 0.9em; font-family: var(--tz-font-body); font-size: 1rem !important; line-height: var(--tz-leading-body) !important; color: var(--tz-color-text); } /* 22 av de 1 222 svaren innehåller markup. Inventerat 2026-09-30: h4 (16), em (3), span (2), h2, h5 och en section — INGA listor i dagens innehåll. Reglerna nedan är alltså förebyggande, så att en redaktör som lägger in en lista i ACF-fältet får något rimligt i stället för temats standard. */ body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_content ul, body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_content ol { margin: 0 0 0.9em 1.2em; padding: 0; } body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_content li { margin: 0 0 0.35em; font-size: 1rem !important; line-height: var(--tz-leading-body) !important; color: var(--tz-color-text); } body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_content > *:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------------- 4. Mobil ---------------------------------------------------------------------- */ @media (max-width: 767px) { body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_title { padding: 15px 48px 15px 16px; } body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_title::after { right: 18px; } body #page-container .tz-fordjupning .tz-fordjupning__post .et_pb_toggle_content { padding: 0 16px 18px; } }