/* Stadskartan.se — modern, responsiv omtolkning av den ursprungliga designen.
   Färgerna är hämtade ur den gamla mainstyle.css så identiteten består. */

:root {
    --blue: #0076b2;
    --blue-dark: #01669c;
    --blue-light: #0d8bcc;
    --grey-100: #f6f6f6;
    --grey-200: #f1f1f1;
    --grey-300: #e8e8e8;
    --grey-400: #d5d5d5;
    --grey-600: #767676;
    --text: #333;
    --white: #fff;
    --radius: 6px;
    --shadow: 0 1px 3px rgba(0, 0, 0, .12);
    --max-width: 1160px;
    --font: Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--white);
}

main.container {
    flex: 1 1 auto;
}

img { max-width: 100%; height: auto; }

a { color: var(--blue-dark); }

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 16px;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Topprad: språkval ---------- */

.topbar {
    background: var(--grey-200);
    border-bottom: 1px solid var(--grey-400);
    font-size: 13px;
}

.topbar .container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    min-height: 34px;
}

.lang { display: flex; gap: 6px; }

.lang a {
    display: inline-block;
    padding: 2px 9px;
    border-radius: var(--radius);
    color: var(--grey-600);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .04em;
}

.lang a:hover { background: var(--grey-300); }
.lang a[aria-current="true"] { background: var(--blue); color: var(--white); }

/* ---------- Sidhuvud ---------- */

.masthead { background: var(--white); }

.masthead .container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-top: 14px;
    /* Bottenpaddingen är avståndet mellan siluettens underkant och den blå
       menyraden — .masthead saknar kantlinje och .mainnav saknar toppmarginal,
       så detta värde ÄR måttet. */
    padding-bottom: 2px;
}

.logo { display: block; flex: 0 0 auto; margin-left: 28px; }
/* display: block tar bort inline-bildens descenderutrymme (samma resonemang som
   för .skyline img nedan), så avståndet ner till den blå menyraden blir enbart
   margin-bottom plus containerns padding-bottom: 15 + 2 = 17px, dubbelt mot de
   8,5px som gällde tidigare. Siluetten står kvar på sin gamla höjd. */
.logo img { display: block; width: 250px; margin-bottom: 15px; }

.skyline { flex: 1 1 auto; overflow: hidden; }
/* display: block tar bort inline-bildens descenderutrymme (~4px från
   line-height: 1.5) så att bildens underkant hamnar exakt vid containerns
   padding-kant; margin-left: auto högerställer den block-blivna bilden
   (text-align på .skyline gör inget längre, se .logo-marginalens
   undantag nedan för samma resonemang om indraget vid smalare bredder). */
.skyline img { display: block; margin-left: auto; width: auto; }

/* ---------- Huvudmeny ---------- */

.mainnav {
    background: linear-gradient(180deg, var(--blue-light), var(--blue-dark));
}

.mainnav .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 0;
    padding-bottom: 0;
}

.mainnav ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mainnav a {
    display: block;
    padding: 14px 18px;
    color: var(--white);
    text-decoration: none;
    font-size: 15px;
}

.mainnav a:hover,
.mainnav a[aria-current="page"] { background: rgba(0, 0, 0, .16); }

.mainnav-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: var(--white);
    cursor: pointer;
    padding: 11px 12px;
}

.mainnav-toggle-bars,
.mainnav-toggle-bars::before,
.mainnav-toggle-bars::after {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
}

.mainnav-toggle-bars {
    position: relative;
}

.mainnav-toggle-bars::before,
.mainnav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.mainnav-toggle-bars::before { top: -6px; }
.mainnav-toggle-bars::after { top: 6px; }

/* ---------- Sökfält ---------- */

.searchbox { display: flex; gap: 0; margin: 8px 0; }

.searchbox input[type="search"],
.searchbox input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    border: 1px solid var(--grey-400);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    font: inherit;
    font-size: 14px;
}

.searchbox button {
    flex: 0 0 auto;
    padding: 7px 18px;
    border: 1px solid var(--grey-400);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--grey-300);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.searchbox button:hover { background: var(--grey-400); }

.mainnav .searchbox { max-width: 320px; width: 100%; }
.mainnav .searchbox button { background: var(--white); }

/* ---------- Sektionsrubriker ---------- */

.section-header {
    background: var(--grey-200);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin: 24px 0 18px;
}

.section-header h1 { margin: 0; font-size: 21px; color: var(--text); }
.section-header h2 { margin: 0; font-size: 21px; color: var(--text); }
.section-header h3 { margin: 2px 0 0; font-size: 13px; font-weight: 400; color: var(--grey-600); }
.section-header .subheading { margin: 2px 0 0; font-size: 13px; font-weight: 400; color: var(--grey-600); }

/* ---------- Kartmaterial för tryck ---------- */

.printmaps { display: grid; grid-template-columns: 260px 1fr; gap: 20px; }

.printmaps-menu ul { margin: 0; padding: 0; list-style: none; }

.printmaps-menu a {
    display: block;
    padding: 11px 14px;
    border-bottom: 1px solid var(--grey-300);
    background: var(--grey-100);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
}

.printmaps-menu a:hover,
.printmaps-menu a[aria-current="page"] { background: var(--blue); color: var(--white); }

.printmaps-hero img { display: block; width: 100%; border-radius: var(--radius); }

.printmaps-content { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }

.printmaps .prose.prose-narrow { max-width: 480px; }

.printmaps-figure { margin: 0; flex: 0 1 335px; }

.printmaps .prose > h2:first-child { margin-top: 0; }

.offert-form label { display: block; margin-bottom: 4px; }

.offert-form input[type="text"],
.offert-form input[type="email"],
.offert-form textarea {
    display: block;
    width: 100%;
    max-width: 480px;
    padding: 7px 10px;
    border: 1px solid var(--grey-400);
    border-radius: var(--radius);
    font: inherit;
    font-size: 14px;
}

.offert-form textarea { resize: vertical; }

/* ---------- Gratiskartor: kartan och sidopanelen ---------- */

.section-header.freemaps {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 0 20px;
    padding: 0;
    background: none;
    border-radius: 0;
}

/* grid-row: 1 på båda cellerna är nödvändigt — annars autoplacerar griden dem på var sin rad. */
.section-header.freemaps .section-text {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 18px;
    background: var(--grey-200);
    border-radius: var(--radius);
}

.section-header.freemaps .heading { flex: 1 1 auto; min-width: 0; }

.section-header.freemaps .section-text .searchbox { flex: 0 1 380px; margin: 0; }

.section-header.freemaps .nowshowing {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 14px 18px;
    background: var(--grey-200);
    border-radius: var(--radius);
}

.nowshowing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.nowshowing .label { font-size: 13px; color: var(--grey-600); }
.nowshowing h1,
.nowshowing .city { margin: 0; font-size: 18px; font-weight: 700; color: var(--text); }

.mapsection { display: grid; grid-template-columns: 1fr 340px; gap: 20px; margin-bottom: 28px; align-items: start; --map-height: 560px; --tab-height: 43px; --tab-slant: 11.5px; --panel-background: #efefef; }

/* Panelens svans: pekar från flikradens vänsterkant in mot mellanrummet mot kartan.
   grid-column: 2 finns bara i tvåkolumnsläget (se @media (max-width: 900px) nedan)
   där panelen ligger i kolumn 2 — annars skulle den skapa en implicit tredje kolumn. */
.mapsection::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    position: relative;
    z-index: 1;
    width: 21px;
    height: 35px;
    margin: calc(var(--tab-height) + 11px) 0 0 -20px;
    background: var(--panel-background);
    clip-path: polygon(100% 0, 0 17px, 100% 100%);
    pointer-events: none;
}

#map {
    height: var(--map-height);
    border: 1px solid var(--grey-400);
    border-radius: var(--radius);
    background: var(--grey-200);
}

/* Startsidans navigeringsinfofönster för ortsmarkörer: ortsnamn som rubrik, omslaget
   till ortens senaste kartguide och navigeringsknapparna underst. Innehållet centreras
   och hålls smalt så att infofönstret blir lika brett som omslaget. */
.map-info-city {
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 170px;
    padding: 2px 2px 4px;
    text-align: center;
}

.map-info-cityname {
    display: block;
    font-size: 16px;
    letter-spacing: 0.04em;
    color: var(--blue-dark);
}

.map-info-cover {
    display: block;
    width: 130px;
    border: 1px solid var(--grey-400);
    border-radius: var(--radius);
}

.map-info-question {
    margin: 0;
    font-size: 13px;
}

.map-info-actions {
    display: flex;
    gap: 8px;
}

.map-info-button {
    display: inline-block;
    padding: 6px 16px;
    border: none;
    border-radius: var(--radius);
    background: var(--blue);
    color: var(--white);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.map-info-button:hover {
    background: var(--blue-dark);
    color: var(--white);
}

/* NEJ är sekundär: dämpad grå yta så att JA blir det tydliga valet. Paddingen är
   1px mindre än JA:s eftersom ramen annars gör knappen högre än grannen. */
.map-info-button-no {
    padding: 5px 15px;
    background: var(--grey-200);
    border: 1px solid var(--grey-400);
    color: var(--grey-600);
}

.map-info-button-no:hover {
    background: var(--grey-300);
    color: var(--text);
}

/* grid-column: 2; grid-row: 1 måste stå explicit här: .mapsection::after tar samma cell
   explicit för svansen, och grid-auto-placement hoppar över en cell som redan är explicit
   upptagen av ett annat item — utan denna rad auto-placerades panelen på en ny rad under
   kartan i stället för i kolumn 2. Två explicit placerade items i samma cell får överlappa,
   vilket är avsikten (svansen ligger ovanpå panelens vänsterkant, z-index: 1 mot panelens
   egen stapelkontext). Regeln gäller bara tvåkolumnsläget; @media (max-width: 900px) sätter
   grid-template-columns: 1fr och panelen faller då tillbaka till auto-placering på egen rad. */
.panel {
    display: flex;
    flex-direction: column;
    position: relative;
    grid-column: 2;
    grid-row: 1;
    height: var(--map-height);
    border: 1px solid var(--grey-400);
    border-radius: var(--radius);
    /* Vattenmärket från den gamla sajtens panelbakgrund. Bilden är 251x470 och bär både
       panelytan (x 25-250) och svansen i de vänstra 25 px. Den skalas med faktorn
       340/225 så att panelytan fyller panelbredden, och förskjuts 38 px (25 x samma
       faktor) åt vänster så att svansdelen hamnar utanför panelen och klipps bort.
       bottom-ankringen ger samma beskärning uppåt som i facit. */
    background: url("../images/sv/sidemenu_bg.png") no-repeat -38px bottom / 379px auto,
                var(--panel-background);
    overflow: hidden;
    /* Panelens siluett följer flikradens trapets upptill, så att sidans bakgrund syns i
       hörnen bredvid flikarna. Utan den här klippningen räcker det inte att forma den
       mörka radbakgrunden: panelens egen bakgrund och ram ligger kvar under hörnen och
       fyller dem med #efefef i stället för att släppa igenom sidan.
       Diagonalen slutar vid flikradens underkant (--tab-height + radens border + panelens
       border-top), varefter panelen går rakt ned i full bredd. */
    clip-path: polygon(
        var(--tab-slant) 0,
        calc(100% - var(--tab-slant)) 0,
        100% calc(var(--tab-height) + 2px),
        100% 100%,
        0 100%,
        0 calc(var(--tab-height) + 2px));
}

/* Tonad övertoning vid panelens nederkant; klassen has-more sätts av site.js när innehållet fortsätter nedanför kanten. */
.panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgba(239, 239, 239, 0), var(--panel-background));
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}

.panel.has-more::after { opacity: 1; }

/* flex-shrink: 0 är nödvändigt: .panel är en flex-kolumn och panel-body (rad 505)
   har flex: 1 1 auto med min-height: 0 för att kunna krympa till panelens höjd —
   utan att flikraden nollställs som flexkrympare skulle den, med standardvärdet
   flex-shrink: 1, själv krympas ned mot sin textrads min-content-höjd (~22px)
   varje gång panel-bodyns innehåll (t.ex. startsidans bokstavslista) är högre än
   panelens 560 px, i stället för att behålla sina 43 px. */
.panel-tabs {
    display: flex;
    flex-shrink: 0;
    position: relative;
    height: var(--tab-height);
    border-bottom: 1px solid var(--grey-400);
}

/* Den mörka radbakgrunden ligger i ett eget lager med facitets trapetsform: kortsidorna
   lutar inåt uppåt med samma vinkel som skevningen mellan flikarna
   (--tab-slant = tan(15deg) x 43px). En ovald flik vid ytterkanten har ingen egen form
   att luta, så utan det här lagret slutade raden i en rak rektangel.
   Klippningen ligger på lagret och inte på .panel-tabs själv, eftersom en clip-path på
   raden även kapar knapparnas fokusring vid ytterkanterna. De valda flikformerna
   behöver ingen klippning: de skevas kring sin nederkant och lutar därmed inåt,
   aldrig utanför raden. */
.panel-tabs::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--text);
    clip-path: polygon(var(--tab-slant) 0, calc(100% - var(--tab-slant)) 0, 100% 100%, 0 100%);
}

.panel-tabs button,
.panel-tabs .panel-heading {
    position: relative;
    z-index: 0;
    height: 100%;
    margin: 0;
    padding: 0 8px;
    border: 0;
    background: transparent;
    color: var(--white);
    font: inherit;
    font-size: 14px;
    white-space: nowrap;
}

.panel-tabs button { flex: 1 1 0; cursor: pointer; }
.panel-tabs .panel-heading { flex: 0 0 50%; display: flex; align-items: center; justify-content: center; }

/* Vald flik/rubrik: ljus trapetsform bakom texten byggd av två skevade pseudoelement,
   så att skiljelinjen mot grannfliken blir sned i stället för lodrät. */
.panel-tabs button[aria-selected="true"],
.panel-tabs .panel-heading {
    z-index: 1;
    color: var(--blue-dark);
    font-weight: 600;
}

.panel-tabs button[aria-selected="true"]::before,
.panel-tabs button[aria-selected="true"]::after,
.panel-tabs .panel-heading::before,
.panel-tabs .panel-heading::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    /* -1px lägger formen över radens border-bottom så fliken går ihop med panelkroppen utan synlig linje. */
    bottom: -1px;
    width: calc(50% + 10px);
    background: var(--panel-background);
    transform-origin: bottom;
}

.panel-tabs button[aria-selected="true"]::before,
.panel-tabs .panel-heading::before {
    left: -10px;
    transform: skewX(-15deg);
}

.panel-tabs button[aria-selected="true"]::after,
.panel-tabs .panel-heading::after {
    right: -10px;
    transform: skewX(15deg);
}

/* Ytterkanterna av flikraden ska inte sticka ut ur panelen. Rubriken på startsidan
   är både first- och last-child, men dess högra kant ska sticka in i den mörka ytan
   som resten av raden, så den undantas här. */
.panel-tabs > button:first-child::before { left: 0; }
.panel-tabs > button:last-child::after { right: 0; }

/* Ramen ligger på knappen och läggs över grannflikens utsprång vid tangentbordsfokus. */
.panel-tabs button:focus-visible { z-index: 2; }

.panel-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 12px; }

/* Ortsregister på översiktssidan */

.letter-groups { display: flex; gap: 6px; margin-bottom: 10px; }

.letter-groups button {
    flex: 1 1 0;
    padding: 7px 4px;
    border: 1px solid var(--grey-400);
    border-radius: var(--radius);
    background: var(--white);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.letter-groups button[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }

.letter-block { margin-bottom: 14px; }

.letter-block > .letter {
    display: block;
    margin-bottom: 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--grey-400);
    font-size: 17px;
    font-weight: 700;
    color: var(--blue-dark);
}

.letter-block.empty > .letter { color: var(--grey-400); }

.citylist { margin: 0; padding: 0; list-style: none; }
.citylist a { display: block; padding: 3px 2px; color: var(--text); text-decoration: none; font-size: 14px; }
.citylist a:hover { color: var(--blue-dark); text-decoration: underline; }

/* Företagsregister på ortssidan */

.register-switch { display: flex; gap: 6px; margin-bottom: 10px; }

.register-switch button {
    flex: 1 1 0;
    padding: 7px 4px;
    border: 1px solid var(--grey-400);
    border-radius: var(--radius);
    background: var(--white);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.register-switch button[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: var(--white); }

.company { border-bottom: 1px solid var(--grey-300); }

.company > summary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 2px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    list-style: none;
}

.company > summary::-webkit-details-marker { display: none; }
/* line-height matchar namnets första rad så pilen inte hamnar mitt emellan raderna */
.company > summary::before { content: "▸"; color: var(--blue); font-size: 12px; line-height: 1.4; }
.company[open] > summary::before { content: "▾"; }
.company > summary .name { flex: 1 1 auto; }
.company.highlight > summary { background: #fff6d6; }

.company-details { padding: 4px 2px 12px 20px; font-size: 13px; color: #555; }
.company-details .company-name { font-weight: 600; color: var(--text); }
.company-links { display: flex; gap: 10px; margin-top: 8px; }
.company-links a { color: var(--blue-dark); font-size: 13px; }

.category-block > summary {
    padding: 8px 2px;
    font-weight: 600;
    color: var(--blue-dark);
    cursor: pointer;
    border-bottom: 1px solid var(--grey-300);
    font-size: 14px;
}

.category-block .company { margin-left: 10px; }

/* Kartor (guider) i sidopanelen */

.guides { margin: 0; padding: 0; list-style: none; }
.guides li { margin-bottom: 16px; text-align: center; }
.guides li:last-child { margin-bottom: 0; }
.guides img.cover { border: 1px solid var(--grey-400); border-radius: var(--radius); max-height: 260px; }
.guides .cover-placeholder {
    display: inline-block;
    width: 153px;
    height: 214px;
    max-height: 260px;
    aspect-ratio: 153 / 214;
    border: 1px solid var(--grey-400);
    border-radius: var(--radius);
    background: var(--grey-200);
    vertical-align: baseline;
}
.guides .guide-name { display: block; margin: 8px 0 6px; font-size: 14px; font-weight: 600; }

/* Nedladdningsknappen under varje kartguide: en snedställd yta ritad av ::before
   (i stället för clip-path, som annars skulle klippa bort fokusramen), med
   isolation: isolate så att ::before:s z-index: -1 stannar bakom länkens eget
   innehåll utan att sjunka bakom panelens bakgrund. Text och ikon står upprätta
   trots att ytan lutar. Ikonen får en fast höjd eftersom den globala
   img { max-width: 100%; height: auto } annars låter SVG:ns width="2378" styra. */
.pdf-button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 8px 22px;
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.pdf-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--text);
    border-radius: var(--radius);
    transform: skewX(-10deg);
}

.pdf-button-icon { height: 28px; width: auto; display: block; }

.btn {
    display: inline-block;
    padding: 8px 16px;
    border: 0;
    border-radius: var(--radius);
    background: var(--blue);
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}

.btn:hover { background: var(--blue-dark); }
.btn.secondary { background: var(--grey-300); color: var(--text); }

.panel-empty { padding: 20px 4px; color: var(--grey-600); font-size: 14px; text-align: center; }

/* ---------- Annonsplatser ---------- */

.ads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 28px; }

.ad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    overflow: hidden;
    border: 1px solid var(--grey-300);
    border-radius: calc(var(--radius) + 1px);
    color: var(--text);
    text-decoration: none;
    text-align: center;
    font-size: 14px;
}

/* Annonsbilderna fyller hela cellen i stället för att flyta centrerade i en ruta.
   Rutans bakgrund och 10 px padding är borta, så avståndet mellan bilderna är nu
   gridens gap -- samma 16 px som tidigare skilde rutorna åt. Bilderna är 300 px breda
   i original och skalas upp knappt en fjärdedel för att nå cellbredden. Ramen sitter
   på bilden och håller ihop annonser vars egen bakgrund är vit och annars skulle
   flyta ut i sidan; med border-box ligger den innanför cellbredden, så mellanrummet
   påverkas inte. */
/* Bilden dras ut 2 px åt varje håll och klipps av .ad:s overflow, så annonsens två
   yttersta pixelrader faller bort -- flera annonsbilder har en egen kantlinje inbakad
   som annars lägger sig dubbel intill ramen. Rundningen kommer från samma
   klippning: .ad:s ytterradie är radie + rambredd, vilket ger bilden exakt
   var(--radius) i hörnen. */
.ad img {
    display: block;
    /* flex-shrink: 0 behovs: som flex-item krymps bilden annars tillbaka till
       containerns bredd, och overhanget som ska klippas bort uteblir. */
    flex-shrink: 0;
    /* max-width: none haver den globala img-regeln, som annars kapar overhanget. */
    max-width: none;
    width: calc(100% + 4px);
    margin: -2px;
    height: auto;
}

.ad:hover { border-color: var(--grey-400); }

/* ---------- Sidfot ---------- */

.footer {
    margin-top: 32px;
    padding: 24px 0;
    border-top: 1px solid var(--grey-400);
    background: var(--grey-200);
    font-size: 14px;
}

.footer .container { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; }
.footer h2 { margin: 0 0 8px; font-size: 15px; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer a { color: var(--text); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .link-button { font: inherit; color: var(--text); background: none; border: 0; padding: 0; cursor: pointer; }
.footer .link-button:hover { text-decoration: underline; }

/* ---------- Innehållssidor ---------- */

.prose { max-width: 780px; }
.prose h1 { font-size: 26px; }
.prose h2 { font-size: 19px; margin-top: 28px; }
.prose table { border-collapse: collapse; }
.prose td, .prose th { padding: 4px 12px 4px 0; vertical-align: top; }

.sitemap-list { columns: 3 220px; column-gap: 24px; list-style: none; margin: 0; padding: 0; }
.sitemap-list li { break-inside: avoid; margin-bottom: 4px; font-size: 14px; }

.sitemap-letters { display: flex; flex-wrap: wrap; gap: 8px 12px; list-style: none; margin: 0 0 20px; padding: 0; }
.sitemap-letters a { display: inline-block; font-size: 14px; text-decoration: none; }
.sitemap-letters a:hover { text-decoration: underline; }
.sitemap-group h2 { scroll-margin-top: 12px; }

/* ---------- Sökresultat ---------- */

dialog.search-results {
    width: min(560px, 92vw);
    padding: 0;
    border: 1px solid var(--grey-400);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}

dialog.search-results::backdrop { background: rgba(0, 0, 0, .4); }
.search-results header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--grey-300); }
.search-results header h2 { margin: 0; font-size: 17px; }
.search-results .results { max-height: 60vh; overflow-y: auto; padding: 12px 16px; }
.search-results h3 { margin: 12px 0 6px; font-size: 14px; color: var(--grey-600); }
.search-results ul { margin: 0; padding: 0; list-style: none; }
.search-results li a { display: block; padding: 4px 0; color: var(--text); text-decoration: none; font-size: 14px; }
.search-results li a:hover { color: var(--blue-dark); text-decoration: underline; }

/* ---------- Tangentbordsfokus ---------- */

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
}

.mainnav a:focus-visible,
.mainnav-toggle:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: -3px;
}

/* Sökfältets fokusring läggs runt fältet och knappen tillsammans. De sitter kant i
   kant (gap: 0, och inputen saknar högerkant), så en ring runt enbart inputen målas
   över av knappen, som kommer efter den i dokumentet -- ringen såg ut att försvinna in
   bakom knappen. Ringen på gruppen har inget att kollidera med. */
.searchbox:has(input:focus-visible) {
    outline: 3px solid var(--blue);
    outline-offset: 2px;
    border-radius: var(--radius);
}

.searchbox input:focus-visible { outline: 0; }

.mainnav .searchbox:has(input:focus-visible) {
    outline-color: var(--white);
    outline-offset: 1px;
}

.mainnav .searchbox button:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 1px;
}

.btn:focus-visible {
    outline: 3px solid var(--blue-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--white);
}

.pdf-button:focus-visible {
    outline: 3px solid var(--blue-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--white);
}

/* ---------- Responsivt ---------- */

@media (max-width: 900px) {
    .mapsection { grid-template-columns: 1fr; --map-height: 420px; }
    /* Staplat läge: panelen ska inte hålla kartans fasta höjd utan följa innehållet, med samma tak som kartans höjd.
       grid-column/grid-row måste återställas till auto här — annars refererar panelens tvåkolumnsplacering
       (kolumn 2) en kolumn som inte finns i enkolumnsgriden och skapar en implicit kolumn i stället för att
       panelen hamnar på egen rad under kartan (samma fälla som .section-header.freemaps). */
    .panel { grid-column: auto; grid-row: auto; height: auto; max-height: var(--map-height); }
    /* Svansen pekar mot kartan, som i enkolumnsläget ligger ovanför panelen; grid-column: 2 skulle
       annars skapa en implicit kolumn i enkolumnsgriden (samma fälla som .section-header.freemaps). */
    .mapsection::after { display: none; }
    .printmaps { grid-template-columns: 1fr; }
    .ads { grid-template-columns: 1fr; }
    /* Vid stapling faller "Nu Visas" ner som en egen rad ovanför kartan; grid-row: auto krävs — annars skapar griden en implicit tredje kolumn i stället för en ny rad. */
    .section-header.freemaps { grid-template-columns: 1fr; gap: 8px; }
    .section-header.freemaps .section-text { grid-column: auto; grid-row: auto; }
    .section-header.freemaps .nowshowing { grid-column: auto; grid-row: auto; order: 2; flex-direction: row; align-items: baseline; gap: 8px; }
}

@media (max-width: 833px) {
    /* Under ~834px räcker inte containerns bredd för logotypens 28px-indrag
       + 24px gap + siluettens naturliga 500px bredd, så img { max-width: 100% }
       skulle skala ned siluetten mer än den gjorde före indraget. Nollställ
       indraget här så att siluetten inte kläms hårdare än i baslinjen; vid
       ≤640px döljs den ändå (se nästa block) och nollställningen linjerar då
       i stället logotypen med hamburgern och sökfältet. */
    .logo { margin-left: 0; }
}

@media (max-width: 640px) {
    .masthead .container { align-items: center; }
    .logo img { width: 190px; }
    .skyline { display: none; }
    .mainnav .container { padding-bottom: 8px; }
    .mainnav a { padding: 11px 12px; font-size: 14px; }
    .mainnav.has-js .mainnav-toggle { display: inline-flex; align-items: center; order: 1; }
    .mainnav.has-js .searchbox { flex: 1 1 auto; max-width: none; order: 2; }
    .mainnav.has-js ul { flex-direction: column; flex: 1 1 100%; order: 3; }
    .mainnav.has-js:not(.is-open) ul { display: none; }
    .mainnav.has-js.is-open ul { display: flex; }
    .sitemap-list { columns: 1; }
    /* flex: none krävs — annars blir sökfältets flex-basis (380px) en höjd när flexriktningen byter till column. */
    .section-header.freemaps .section-text { flex-direction: column; align-items: stretch; gap: 8px; }
    .section-header.freemaps .section-text .searchbox { flex: none; width: 100%; }
}