/*
Theme Name:   GB Astra Child
Theme URI:    https://gamlabastad.se/
Description:  Child theme för Astra. Anpassar header (vit, ingen border, uppercase letterspaced nav, sticky med shrink-on-scroll), footer (italic, cream), tar bort Astras page-title/breadcrumb-rad på framsidan och knyter Astras typografi till designsystemets CSS-variabler (--gb-font-display, --gb-font-body, --gb-accent, ...). Lägger till global "tillbaka till toppen"-knapp via wp_footer (Astras inbyggda scroll-top dold). Mobil hamburger anpassad till paletten + kollapsbar undermeny i mobile drawer. Designsystemet laddas globalt av gb-hem-pluginet.
Author:       Föreningen Gamla Båstad
Template:     astra
Version:      1.52
Text Domain:  gb-astra-child
*/

/* ─── Global palett-mapping: Astras --ast-global-color-* → designsystemet ─── */
/* Strategin: istället för att jaga enskilda Astra-selektorer mappar vi om
   Astras hela paletten på :root. Alla element som ärver Astras default-
   variabler (länkar, ikoner, SVG-fyll, accenter, knappar) plockar då
   automatiskt upp våra --gb-* utan att vi behöver leta selektorer.

   :root + html, body kombineras för att vinna över Astras egna :root-
   deklaration (samma specificity, men vi laddas EFTER parent style pga
   wp_enqueue_style-dependency). html/body är en defense-in-depth om
   Astras dynamiska CSS i något läge kommer EFTER vår.

   Mapping enligt Astras semantik:
   - color-0 = primär (länkar, ikoner, accenter)      → --gb-accent
   - color-1 = sekundär (hover av primär, kontrast)   → --gb-ink
   - color-2 = rubriker                                → --gb-ink
   - color-3 = brödtext                                → --gb-ink-soft
   - color-4 = huvudbakgrund                           → --gb-bg
   - color-5 = alt bakgrund                            → --gb-bg-warm */

:root,
html,
body {
    --ast-global-color-0: var(--gb-accent, #9C4A2A);
    --ast-global-color-1: var(--gb-ink, #1F1B16);
    --ast-global-color-2: var(--gb-ink, #1F1B16);
    --ast-global-color-3: var(--gb-ink-soft, #3A332B);
    --ast-global-color-4: var(--gb-bg, #FFFFFF);
    --ast-global-color-5: var(--gb-bg-warm, #FAF7F1);
}

/* ─── Header och navigation ──────────────────────────────────────────────── */
/* Astra default: sans-serif. Vi tar över med editorial-typografi. */

/* Vit header utan avgränsningslinje – innehållet får tala för sig självt. */
.site-header,
.site-header .ast-main-header-bar-alignment,
.site-header .main-header-bar,
.site-header .ast-builder-grid-row {
    background: var(--gb-bg, #FFFFFF);
    border-bottom: 0;
    box-shadow: none;
}

/* Sticky: headern följer med på scroll. z-index:99 lämnar plats för
   WP-admin-bar (99999) och dropdown-submenyn ska ligga över sidans innehåll.
   Mjuk skugga lyfter headern från innehållet utan att tävla med vår tunna
   editorial-känsla.

   Palett-mapping av --ast-global-color-* sker globalt på :root i toppen av
   filen — ingen lokal override behövs här. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 99;
    box-shadow: 0 1px 0 rgba(31, 27, 22, 0.04),
                0 8px 24px -16px rgba(31, 27, 22, 0.18);
}
/* När WP-admin-bar visas (inloggad) — flytta sticky-toppen så headern
   hamnar precis under den. Admin-bar är 32px (desktop) / 46px (mobil). */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
    body.admin-bar .site-header { top: 46px; }
}

/* Komprimerat sidhuvud: nolla alla wrapper-min-heights så loggan styr,
   och ge bara EN nivå bar-padding så vi inte ackumulerar luft. */
.site-header,
.site-header .ast-main-header-wrap,
.site-header .main-header-bar-wrap,
.site-header .main-header-bar,
.site-header .ast-primary-header-bar,
.site-header .site-primary-header-wrap,
.site-header .ast-builder-grid-row-container,
.site-header .ast-builder-grid-row-container-inner,
.site-header .ast-builder-grid-row {
    min-height: 0;
}
.site-header .ast-primary-header-bar {
    padding-top: 6px;
    padding-bottom: 6px;
}
/* Logga och meny vertikalt centrerade i bar-flexen */
.site-header .ast-builder-grid-row,
.site-header .site-primary-header-wrap {
    align-items: center;
}
/* Astras default line-height: 80px på menyposter blåser upp baren onödigt */
.site-header .main-header-menu > .menu-item {
    line-height: 1.4;
}

/* Inget vitt mellanrum mellan header och hero på framsidan: nolla margins
   och paddings på hela kedjan av Astra-wrappers ned till .gbh-page. */
.home #content.site-content,
.home #content.site-content > .ast-container,
.home #content.site-content .content-area,
.home #content.site-content .site-main,
.home #content.site-content .site-main > article,
.home #content.site-content .entry-content,
.home #content.site-content .entry-content > .gbh-page {
    padding-top: 0;
    margin-top: 0;
}

/* Custom logo: kvadratisk monogram-logga, behöver fast max-höjd för balans */
.site-header .custom-logo-link img,
.ast-site-identity .custom-logo-link img {
    max-height: 110px;
    width: auto;
    height: auto;
    transition: max-height 240ms ease-out;
}
@media (max-width: 920px) {
    .site-header .custom-logo-link img,
    .ast-site-identity .custom-logo-link img {
        max-height: 84px;
    }
}

/* ─── Shrink-on-scroll: kompakt header efter scroll DOWN ──────────────────── */
/* .gbac-slim sätts av JS (gbac_back_to_top i functions.php) baserat på scroll-
   riktning: läggs till på scroll NED, tas bort på scroll UPP eller vid topp.
   Resultat: stor editorial-header vid topp och vid uppåt-läsning, kompakt
   slim-header på passiv nedscrollning — minimal vertikal yta utan att gå
   förlorad. Smooth transition på 240ms gör övergången naturlig. */
.site-header .ast-primary-header-bar {
    transition: padding 240ms ease-out;
}
.site-header .main-header-menu > .menu-item > a,
.site-header .ast-builder-menu > .menu > .menu-item > a {
    transition: color 200ms ease-out, font-size 240ms ease-out;
}
.site-header.gbac-slim .custom-logo-link img,
.site-header.gbac-slim .ast-site-identity .custom-logo-link img {
    max-height: 52px;
}
.site-header.gbac-slim .main-header-menu > .menu-item > a,
.site-header.gbac-slim .ast-builder-menu > .menu > .menu-item > a {
    font-size: 14.5px;
}
.site-header.gbac-slim .ast-primary-header-bar {
    padding-top: 4px;
    padding-bottom: 4px;
}
@media (max-width: 920px) {
    .site-header.gbac-slim .custom-logo-link img,
    .site-header.gbac-slim .ast-site-identity .custom-logo-link img {
        max-height: 44px;
    }
}

/* Mobil hamburger: fyll-färgen kommer automatiskt från global :root-mapping
   (--ast-global-color-0 → --gb-accent). Subtil hover-feedback med cream-
   bakgrund. SVG-storlek höjd från Astras default 20px → 35px (+75%) för
   bättre touch-yta och visuell närvaro på mobil.

   Astras dynamiska CSS-regel är:
     [data-section="section-header-mobile-trigger"] .ast-button-wrap
       .mobile-menu-toggle-icon .ast-mobile-svg { width: 20px; ... }
   = specificity 40. Vi matchar samma struktur + .site-header-prefix
   = 50 så vår regel vinner utan !important. */
.site-header [data-section="section-header-mobile-trigger"]
    .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
    width: 35px;
    height: 35px;
}
.site-header .main-header-menu-toggle:hover,
.site-header .main-header-menu-toggle:focus {
    background: var(--gb-accent-soft, rgba(156, 74, 42, 0.08));
}

.main-header-menu > .menu-item > a,
.ast-builder-menu > .menu > .menu-item > a,
#ast-hf-mobile-menu > .menu-item > a {
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 16.5px;
    font-weight: 500;
    color: var(--gb-ink, #1F1B16);
    transition: color 200ms ease-out;
}

.main-header-menu > .menu-item > a:hover,
.main-header-menu > .menu-item.current-menu-item > a,
.main-header-menu > .menu-item.current-menu-ancestor > a,
.ast-builder-menu > .menu > .menu-item > a:hover,
.ast-builder-menu > .menu > .menu-item.current-menu-item > a,
.ast-builder-menu > .menu > .menu-item.current-menu-ancestor > a {
    color: var(--gb-accent, #9C4A2A);
}

/* Dropdown (Båstads Historia): mjukare typografi, ingen uppercase i submenyn */
.main-header-menu .sub-menu > .menu-item > a,
.ast-builder-menu .sub-menu > .menu-item > a {
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gb-ink, #1F1B16);
}
.main-header-menu .sub-menu > .menu-item > a:hover,
.ast-builder-menu .sub-menu > .menu-item > a:hover {
    color: var(--gb-accent, #9C4A2A);
    background: var(--gb-accent-soft, rgba(156, 74, 42, 0.08));
}

/* Avdelare i dropdown — tunn linje något smalare än menyn, ingen klickbar yta */
.main-header-menu .sub-menu > .menu-item.gbac-avdelare,
.ast-builder-menu .sub-menu > .menu-item.gbac-avdelare,
#ast-hf-mobile-menu > .menu-item.gbac-avdelare {
    margin: 4px 14px;
    padding: 0;
    line-height: 0;
    border-top: 1px solid var(--gb-border, #E8E2D6);
    pointer-events: none;
}
.main-header-menu .sub-menu > .menu-item.gbac-avdelare > a,
.ast-builder-menu .sub-menu > .menu-item.gbac-avdelare > a,
#ast-hf-mobile-menu > .menu-item.gbac-avdelare > a {
    display: none;
}

/* Menyrubriker — top-level menypost som visar label men inte är klickbar
   (t.ex. "Båstads Historia" som är dropdown-paraply utan egen landningssida).
   På desktop: dropdownen öppnas på hover, klick blir no-op via JS-handler.
   På mobil: hela raden togglar sub-menyn via samma JS-handler.
   Vi använder INTE pointer-events:none — det bryter klick-handlern på ankaret
   och förhindrar Astras drawer-stäng-logik från att blockeras korrekt.
   Bara visuell cursor-hint här. */
.main-header-menu > .menu-item.gbac-menu-rubrik > a,
.ast-builder-menu > .menu-item.gbac-menu-rubrik > a {
    cursor: default;
}

/* Site title (om text-logo används istället för bild) */
.site-title a, .site-title a:visited {
    font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif);
    font-style: italic;
    font-weight: 500;
    color: var(--gb-ink, #1F1B16);
}

/* ─── Page title / breadcrumb-bar bort på framsidan ──────────────────────── */
/* Astra ritar en "Single Post Banner" med page title (eller breadcrumbs) över
   innehållet på vissa layouter. På framsidan vill vi bara se hero-sektionen. */

.home .ast-page-header,
.home .ast-banner-title-container,
.home .ast-archive-description,
.home .ast-breadcrumbs-wrapper,
.home .ast-breadcrumbs,
.home .entry-header,
.home .ast-single-post-banner,
.home .ast-single-entry-banner {
    display: none;
}

/* Säkerställ att Astras innercontainer inte stoppar vår kant-till-kant hero */
.home .site-content > .ast-container,
.home .site-content .entry-content {
    padding-top: 0;
}

/* ─── Footer: italic, varma toner ────────────────────────────────────────── */

.site-footer,
.site-footer .ast-footer-copyright,
.site-footer .footer-widget-area,
.ast-builder-footer-grid-columns {
    background: var(--gb-bg-warm, #FAF7F1);
    color: var(--gb-ink-soft, #3A332B);
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
}

.site-footer p,
.site-footer .ast-footer-copyright,
.site-footer .footer-widget-area p {
    font-style: italic;
    font-size: 14px;
    color: var(--gb-muted, #6B6258);
}

.site-footer a,
.site-footer a:visited {
    color: var(--gb-accent, #9C4A2A);
    text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }

.site-footer .footer-widget-area .widget-title {
    font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif);
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
    color: var(--gb-accent, #9C4A2A);
    text-transform: none;
    letter-spacing: 0;
}

/* ─── Egen mörk sidfot (.gbac-footer) ────────────────────────────────────── */
/* Designhandoff-kit: mörk ink-bakgrund, varma terrakotta-länkar (#E8B07A),
   ljus brödfärg (#C9C0B0). Renderas av gbac_custom_footer() i functions.php.
   Tvåkolumns: brand vänster, nav höger. Lag-text + copyright underst. */
.gbac-footer {
    background: var(--gb-ink, #1F1B16);
    color: #C9C0B0;
    padding: 56px 2.5em 48px;
    border-top: 0;
}
.gbac-footer .gbac-footer-inner {
    max-width: var(--gb-container-wide, 1240px);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    flex-wrap: wrap;
}
.gbac-footer .gbac-footer-brand { max-width: 360px; }
.gbac-footer .gbac-footer-namn {
    display: block;
    font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif);
    font-style: italic;
    font-weight: 500;
    font-size: 30px;
    line-height: 1.1;
    color: #E8B07A;
}
.gbac-footer .gbac-footer-tagline {
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
    font-style: italic;
    font-size: 15px;
    color: #C9C0B0;
    margin: 12px 0 0;
    line-height: 1.5;
}
.gbac-footer .gbac-footer-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: right;
}
.gbac-footer .gbac-footer-nav a {
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
    font-size: 15px;
    color: #C9C0B0;
    text-decoration: none;
    transition: color 200ms ease-out, transform 200ms ease-out;
}
.gbac-footer .gbac-footer-nav a:hover { color: #fff; }
.gbac-footer .gbac-footer-upphov {
    max-width: var(--gb-container-wide, 1240px);
    margin: 40px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.gbac-footer .gbac-footer-upphov p {
    margin: 0;
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
    font-size: 13.5px;
    line-height: 1.65;
    color: #9C8B72;
    max-width: 80ch;
}
.gbac-footer .gbac-footer-upphov p em {
    font-style: italic;
    color: #C9C0B0;
}
.gbac-footer .gbac-footer-bottom {
    max-width: var(--gb-container-wide, 1240px);
    margin: 20px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.gbac-footer .gbac-footer-bottom p {
    margin: 0;
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
    font-style: italic;
    font-size: 13px;
    color: #9C8B72;
}
@media (max-width: 800px) {
    .gbac-footer { padding: 44px 16px 32px; }
    .gbac-footer .gbac-footer-inner { flex-direction: column; gap: 28px; }
    .gbac-footer .gbac-footer-nav { text-align: left; }
}

/* ─── Generella anpassningar ─────────────────────────────────────────────── */

body {
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
    color: var(--gb-ink, #1F1B16);
}

h1, h2, h3, h4, h5, h6,
.entry-title, .ast-archive-title {
    font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif);
    font-weight: 500;
    color: var(--gb-ink, #1F1B16);
}

/* Subsidor (icke-startsida): editorial-rubriker enligt designsystemet.
   Framsidan exkluderas via body.home så .gbh-*-stylingen i gb-hem.php
   fortsatt äger där. Värden 1:1-mappade mot .gbh-sektion-rubrik /
   .gbh-avsnitt-rubrik på framsidan.

   OBS: Vi använder explicita selektorer (inte :where()) för att vinna
   över Astras .ast-single-post .entry-title-regler (specificity 20). */

/* Reset Astras entry-header som har margin-top:4em + padding-left/right:20px
   – ger luftspann och bredd som inte matchar framsidans .gbh-page-rytm. */
body:not(.home) .entry-header {
    margin-top: 0;
    margin-bottom: 16px;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

/* Page-title + content H1/H2 = framsidans .gbh-sektion-rubrik */
body:not(.home) .entry-header .entry-title,
body:not(.home) .entry-title,
body:not(.home) .ast-archive-title,
body:not(.home) .entry-content h1,
body:not(.home) .entry-content h2 {
    font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif);
    font-style: italic;
    font-weight: 500;
    font-size: clamp(32px, 4vw, 44px);
    letter-spacing: -0.005em;
    line-height: 1.1;
    color: var(--gb-accent, #9C4A2A);
    margin: 0 0 16px;
}

/* Arkivhuvudets nyckelord: <em> i subsidetiteln bär arkivets heritage-färg
   (--sec, satt på pluginets wrapper); basen förblir terrakotta. Faller tillbaka
   på terrakotta där --sec inte satts (Länkar, vanliga sidor). Enhetlig
   signatur över alla arkiv. Se design-system/CLAUDE-designregler.md. */
body:not(.home) .entry-content h1 em,
body:not(.home) .entry-content h2 em {
    color: var(--sec, var(--gb-accent, #9C4A2A));
    font-style: italic;
}

/* Content H3/H4 = framsidans .gbh-avsnitt-rubrik */
body:not(.home) .entry-content h3,
body:not(.home) .entry-content h4 {
    font-family: var(--gb-font-display, 'EB Garamond', Georgia, serif);
    font-style: italic;
    font-weight: 500;
    font-size: 28px;
    color: var(--gb-accent, #9C4A2A);
    margin: 48px 0 16px;
}

/* Lede/ingress på subsidor – matchar framsidans .gbh-sektion-lede 1:1.
   Används explicit via <p class="gb-lede">. (Tidigare automatik via
   :first-of-type togs bort i v1.9: alla första stycken är inte leden,
   och stilen ska vara italic muted, inte ink-soft). */
body:not(.home) .entry-content .gb-lede,
.gb-lede {
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
    font-style: italic;
    color: var(--gb-muted, #6B6258);
    font-size: 16px;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0 0 36px;
}

a { color: var(--gb-accent, #9C4A2A); }
a:hover { color: var(--gb-ink, #1F1B16); }

/* ─── Tillbaka till toppen (fast knapp i sidans hörn) ─────────────────────── */
/* Renderas via wp_footer-hook i functions.php (gbac_back_to_top).
   Fade:as in när användaren scrollat förbi halva viewporten. Pekfingret
   sitter alltid där, men kompletterar sticky-headern för "uppåt-rörelse". */

.gbac-top-btn {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 60;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    border: 1px solid var(--gb-accent, #9C4A2A);
    background: var(--gb-accent, #9C4A2A);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 240ms ease-out,
                transform 240ms ease-out,
                background 200ms ease-out,
                border-color 200ms ease-out,
                visibility 240ms;
    box-shadow: 0 4px 14px rgba(31, 27, 22, 0.18);
    padding: 0;
}
.gbac-top-btn.synlig {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.gbac-top-btn:hover {
    background: var(--gb-ink, #1F1B16);
    border-color: var(--gb-ink, #1F1B16);
    transform: translateY(-2px);
}
.gbac-top-btn svg { display: block; }
.gbac-top-btn__label {
    position: absolute;
    right: 62px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--gb-ink, #1F1B16);
    color: #fff;
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
    font-style: italic;
    font-size: 13px;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
}
.gbac-top-btn:hover .gbac-top-btn__label { opacity: 1; }

@media (max-width: 920px) {
    .gbac-top-btn {
        right: 20px;
        bottom: 20px;
        width: 48px;
        height: 48px;
    }
    .gbac-top-btn__label { display: none; }
}

/* Mobil – minska letterspacing så menyn inte växer för mycket */
@media (max-width: 920px) {
    .main-header-menu > .menu-item > a,
    .ast-builder-menu > .menu > .menu-item > a,
    #ast-hf-mobile-menu > .menu-item > a {
        letter-spacing: 0.10em;
        font-size: 15.5px;
        font-weight: 500;
    }
}

/* ─── Mobil sidopadding (baseline för hela sajten) ────────────────────────── */
/* Astras .ast-container krymper hårt på mobil när inga andra regler tar över.
   Vi sätter en garanterad min-padding på 16px (800px) / 14px (500px) så
   ingen sektion klistras mot kanten — oavsett vilket plugin som äger
   innehållet. Plugins som har egen padding ovanpå (.gbh-page etc.) ärver
   detta som baseline. */
@media (max-width: 800px) {
    .ast-container,
    body:not(.home) .site-content > .ast-container,
    body:not(.home) .entry-content {
        padding-left: 16px;
        padding-right: 16px;
    }
    /* Header-baren får också luft mot kanten */
    .site-header .ast-builder-grid-row-container-inner,
    .site-header .ast-builder-grid-row {
        padding-left: 12px;
        padding-right: 12px;
    }
}
@media (max-width: 500px) {
    .ast-container,
    body:not(.home) .site-content > .ast-container,
    body:not(.home) .entry-content {
        padding-left: 14px;
        padding-right: 14px;
    }
    /* Logga krymper ytterligare på små telefoner så headern inte tar 1/3
       av viewporten innan slim-state slår in */
    .site-header .custom-logo-link img,
    .ast-site-identity .custom-logo-link img {
        max-height: 64px;
    }
    .site-header.gbac-slim .custom-logo-link img,
    .site-header.gbac-slim .ast-site-identity .custom-logo-link img {
        max-height: 38px;
    }
    /* Back-to-top minimera ytterligare */
    .gbac-top-btn {
        right: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
    }
}

/* ─── Mobil-meny: kollapsbar undermeny + pekfingervänlig ─────────────────── */
/* Astras drawer-toggle är <span class="dropdown-menu-toggle"> inuti parent-<a>.
   Vi använder Astras inbyggda mekanism (skippar egen knapp för att inte
   dubblera pilar), stylar bara om utseendet. JS i functions.php
   (gbac_mobile_submenu_state) lägger initialt .gbac-mob-collapsed på varje
   menu-item-has-children och toggle:r vid klick på pilen eller parent-länken. */

#ast-hf-mobile-menu .menu-item-has-children {
    position: relative;
}

/* Pekfingervänlig touch-target: 48px minimum-höjd (Apple/Google-guideline).
   Större padding än desktop + tunna avskiljare mellan poster. */
#ast-hf-mobile-menu > .menu-item > a {
    position: relative;
    display: block;
    min-height: 48px;
    padding: 14px 18px;
    font-size: 16px;
    letter-spacing: 0.04em;
    line-height: 1.3;
    border-bottom: 1px solid var(--gb-border, #E8E2D6);
    box-sizing: border-box;
}

/* Astras pil-toggle: styla som en 56×48 touch-yta i högerkant av posten.
   Behåll Astras <span> (det är där klicket hookas av Astras JS) men dölj
   Astras default-SVG och rita egen ren CSS-pil via ::after för att slippa
   bero på Astras SVG-fill/storlek. */
#ast-hf-mobile-menu .dropdown-menu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gb-accent, #9C4A2A);
    cursor: pointer;
    transition: background 200ms ease-out;
    z-index: 2;
}
#ast-hf-mobile-menu .dropdown-menu-toggle:hover,
#ast-hf-mobile-menu .dropdown-menu-toggle:focus {
    background: var(--gb-accent-soft, rgba(156, 74, 42, 0.08));
    outline: none;
}

/* Dölj Astras inbyggda SVG-pil — vi ritar egen via ::after så vi slipper
   tampas med fill/viewBox/storlek. !important för säkerhets skull. */
#ast-hf-mobile-menu .dropdown-menu-toggle .ast-icon,
#ast-hf-mobile-menu .dropdown-menu-toggle > svg,
#ast-hf-mobile-menu .dropdown-menu-toggle .ast-arrow-svg {
    display: none !important;
}

/* Astra renderar OCKSÅ en separat <button class="ast-menu-toggle"> UTANFÖR
   <a>:n i drawern — den ger en andra pil. Dölj den helt; vår dropdown-menu-
   toggle inuti <a> hanterar all interaktion. */
#ast-hf-mobile-menu .ast-menu-toggle {
    display: none !important;
}

/* Astra lägger en .icon-arrow SVG inuti VARJE .menu-link (även submeny-
   poster utan barn). De syns som extra små pilar och är onödiga. */
#ast-hf-mobile-menu .menu-link > .ast-icon.icon-arrow,
#ast-hf-mobile-menu .sub-menu .menu-link .ast-icon.icon-arrow {
    display: none !important;
}

/* Egen pil: chevron via roterad border. Pekar nedåt när menyn är kollapsad,
   uppåt när expanderad. Animeras smooth. */
#ast-hf-mobile-menu .dropdown-menu-toggle::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 220ms ease-out;
}
/* Roterad pil när menyn är öppen (= INTE collapsed) */
#ast-hf-mobile-menu .menu-item-has-children:not(.gbac-mob-collapsed)
    > a .dropdown-menu-toggle::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

/* Dölj submenyn när parent är collapsed — !important behövs för att vinna
   över Astras eventuella inline-style från drawer-init JS */
#ast-hf-mobile-menu .menu-item-has-children.gbac-mob-collapsed > .sub-menu {
    display: none !important;
}
/* Och säkerställ att expanderad sub-menu visas */
#ast-hf-mobile-menu .menu-item-has-children:not(.gbac-mob-collapsed) > .sub-menu {
    display: block !important;
}

/* Ge parent-länken plats för pil-knappen så texten inte krockar */
#ast-hf-mobile-menu .menu-item-has-children > a {
    padding-right: 64px;
}

/* Submeny-poster: cream-bakgrund visar hierarkin tydligare än indrag,
   mixed case (inte uppercase) eftersom de är många och ska skannas snabbt */
#ast-hf-mobile-menu .sub-menu {
    padding-left: 0;
    margin-left: 0;
    background: var(--gb-bg-warm, #FAF7F1);
    list-style: none;
}
#ast-hf-mobile-menu .sub-menu > .menu-item > a {
    display: block;
    min-height: 44px;
    padding: 12px 18px 12px 36px;
    font-family: var(--gb-font-body, 'Source Serif 4', Georgia, serif);
    font-size: 15px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--gb-ink-soft, #3A332B);
    border-bottom: 1px solid var(--gb-border, #E8E2D6);
    box-sizing: border-box;
}
#ast-hf-mobile-menu .sub-menu > .menu-item:last-child > a { border-bottom: 0; }
#ast-hf-mobile-menu .sub-menu > .menu-item > a:hover,
#ast-hf-mobile-menu .sub-menu > .menu-item.current-menu-item > a {
    color: var(--gb-accent, #9C4A2A);
    background: var(--gb-accent-soft, rgba(156, 74, 42, 0.08));
}

/* Avdelare i mobile drawer: tunn linje istället för en klickbar rad */
#ast-hf-mobile-menu .sub-menu > .menu-item.gbac-avdelare {
    margin: 4px 18px;
    padding: 0;
    line-height: 0;
    border-top: 1px solid var(--gb-border, #E8E2D6);
    border-bottom: 0;
    min-height: 0;
}
#ast-hf-mobile-menu .sub-menu > .menu-item.gbac-avdelare > a {
    display: none;
}

/* ─── Mobil-drawern måste kunna scrollas ─────────────────────────────────── */
/* Panelen (.ast-mobile-header-content) är position:absolute inuti en sticky
   header. Utfälld "Båstads Historia" gör menyn 1036 px hög i en 844 px
   viewport — och eftersom headern är pinnad följer panelen INTE med när sidan
   scrollas (uppmätt: panelens top står still på 94-98 px oavsett scrollY).
   Allt under vikningen blev därmed permanent oåtkomligt: "Böcker & Skrifter",
   "Länkar" och sökrutan, som ligger sist.

   Panelen får därför en egen höjdgräns och egen scroll. Höjden sätts av JS
   (gbac_mobilpanel_hojd i functions.php) eftersom avståndet till viewportens
   överkant växlar med slim-läget; värdet nedan är fallback utan JS.

   Fallbacken drar av 140 px, inte headerns nominella höjd. Uppmätt 2026-08-16
   ligger panelens överkant på 98 px vid 375–414 px bredd men 127 px vid
   320–360 px (loggan bryter till egen rad) och 125 px i landskap. Ett avdrag
   på 98 gjorde panelen för HÖG i just de lägena, och sista menyposten hamnade
   utanför viewporten — vilket är samma fel som hela fixen finns till för att
   laga. En fallback som är för kort kostar bara någon rads extra scroll; en
   som är för hög döljer innehåll. Därför största uppmätta överkanten (127)
   plus marginal.

   Ingen media query: .ast-mobile-header-content renderas bara i Astras
   mobil-header-wrap, som är dold över brytpunkten. */
.ast-mobile-header-content {
    max-height: var(--gbac-mobilpanel-hojd, calc(100dvh - 140px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Scrollen ska stanna i menyn och inte fortsätta ner i sidan bakom. */
    overscroll-behavior: contain;
}