/**
 * GuestSEO wandelroutes
 *
 * Mobiel eerst: de opmaak begint bij de telefoon, want deze pagina's worden
 * onderweg gebruikt. Grotere schermen krijgen daarbovenop meer kolommen.
 * Tikdoelen zijn minimaal 44 px hoog en de knoppen die je buiten nodig hebt
 * (GPX en routebeschrijving) staan boven de lopende tekst.
 */

:root {
    /* Overgenomen uit de huisstijl van de site (Elementor-kit): het groen en het
       oranje van de knoppen, en dezelfde ronding van 8 px als de velden en de
       aanmeldknop in de voettekst. */
    --guestseo-route-groen: #086246;
    --guestseo-route-groen-donker: #064b35;
    --guestseo-route-oranje: #F89707;
    --guestseo-route-oranje-donker: #CF7C00;
    --guestseo-route-radius: 8px;
    /* Eén tussenruimte tussen alle blokken, op de detailpagina en op het overzicht. */
    --guestseo-route-ruimte: 1.4em;
    --guestseo-route-lijn: #d5d8d2;
    /* Donkerder dan het grijs van het thema: deze pagina's worden buiten gelezen,
       vaak op een telefoon in fel licht. */
    --guestseo-route-grijs: #3a403c;
    --guestseo-route-tekst: #1C1C1C;
}

/* ------------------------------------------------- inpassing in het thema */

/**
 * Geen omhullend vlak om de pagina.
 *
 * Astra zet op single-weergaven een dekkend witte kaart met 3em padding rondom.
 * Die is hier helemaal weggehaald: het beeld, de kaart en de fotostrook vullen hun
 * eigen ruimte al, en een vlak eromheen voegt niets toe. Een ondergrond krijgen
 * alleen de blokken waar tekst in staat; die staan verderop bij hun eigen regels.
 */

.single-guestseo_route.ast-separate-container .ast-article-single,
.single-guestseo_route.ast-separate-container .ast-article-post,
.single-guestseo_route.ast-separate-container .ast-article-inner,
.single-guestseo_route.ast-separate-container .entry-content,
.single-guestseo_route.ast-separate-container .site-main,
.single-guestseo_route.ast-separate-container .content-area {
    background: none;
    background-color: transparent;
    box-shadow: none;
    border: 0;
    /* Astra zet deze padding per breakpoint opnieuw (2,5em op groot scherm,
       1,5em 1em op klein). Vandaar het uitroepteken: anders komt hij bij elke
       schermbreedte weer terug. */
    padding: 0 !important;
}

.single-guestseo_route.ast-separate-container .site-content > .ast-container {
    padding-top: 1.2em;
    padding-bottom: 2.5em;
}

.single-guestseo_route .entry-header {
    margin-bottom: 0.8em;
}

/* De datum- en auteursregel zegt niets bij een wandelroute. */
.single-guestseo_route .entry-meta,
.post-type-archive-guestseo_route .entry-meta {
    display: none;
}

@media (max-width: 600px) {
    .single-guestseo_route.ast-separate-container .site-content > .ast-container {
        padding-top: 0.8em;
    }
}

/**
 * De ondergrond voor tekst. Eén gedeelde stijl, zodat de blokken op de detailpagina
 * en het overzicht er hetzelfde uitzien.
 */
.guestseo-route-intro,
.guestseo-route .guestseo-route-facts,
.guestseo-route-body,
.guestseo-route-auberge,
.guestseo-route-credits,
.guestseo-routes-head,
.guestseo-routes-filters {
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

/* ---------------------------------------------------------------- detail */

/**
 * Eén container voor beide weergaven. De detailpagina stond op 820 px en het
 * overzicht op 1180 px, waardoor de inhoud bij het doorklikken verschoof.
 */
.guestseo-route,
.guestseo-routes-archive {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.2em 0 2.5em;
}

.guestseo-route {
    color: var(--guestseo-route-tekst);
}

.guestseo-route p,
.guestseo-route li,
.guestseo-route dd {
    color: var(--guestseo-route-tekst);
}

.guestseo-route-hero img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.guestseo-route-intro {
    font-size: 1.08em;
    line-height: 1.6;
    margin: var(--guestseo-route-ruimte) 0;
    padding: 1em 1.1em;
}

/* Kerngegevens: op de telefoon twee kolommen, daarboven op één rij. */
.guestseo-route .guestseo-route-facts {
    list-style: none;
    margin: 0 0 var(--guestseo-route-ruimte);
    padding: 1em 1.1em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.9em 1em;
}

.guestseo-route .guestseo-route-facts li {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.guestseo-route .guestseo-route-facts .lbl {
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--guestseo-route-grijs);
}

.guestseo-route .guestseo-route-facts .val {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--guestseo-route-groen);
}

/* Knoppen voor onderweg. */
.guestseo-route-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    margin: 0;
}

/**
 * Knoppen zijn altijd gevuld, nooit doorzichtig, en dragen nooit een onderstreping.
 * De extra klasse in de selector is nodig omdat het thema links binnen de inhoud
 * onderstreept met een zwaardere regel dan een enkele klasse.
 */
.guestseo-route .guestseo-route-btn,
.guestseo-route .guestseo-route-btn.primary,
.guestseo-route .guestseo-route-btn.accent {
    flex: 1 1 auto;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7em 1.2em;
    border: 1px solid var(--guestseo-route-groen);
    border-radius: var(--guestseo-route-radius);
    background: var(--guestseo-route-groen);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

/* De actieknop in het accentoranje van de site, net als "Aanmelden" in de voettekst. */
.guestseo-route .guestseo-route-btn.accent {
    background: var(--guestseo-route-oranje);
    border-color: var(--guestseo-route-oranje);
    color: #fff;
}

.guestseo-route .guestseo-route-btn:hover,
.guestseo-route .guestseo-route-btn:focus,
.guestseo-route .guestseo-route-btn:active {
    background: var(--guestseo-route-groen-donker);
    border-color: var(--guestseo-route-groen-donker);
    color: #fff;
    text-decoration: none;
}

.guestseo-route .guestseo-route-btn.accent:hover,
.guestseo-route .guestseo-route-btn.accent:focus,
.guestseo-route .guestseo-route-btn.accent:active {
    background: var(--guestseo-route-oranje-donker);
    border-color: var(--guestseo-route-oranje-donker);
    color: #fff;
}

.guestseo-route-body {
    line-height: 1.7;
    padding: 1em 1.1em;
    margin: 0 0 var(--guestseo-route-ruimte);
}

.guestseo-route-map {
    margin: 0 0 var(--guestseo-route-ruimte);
}

.guestseo-route-map iframe,
.guestseo-route-map .guestseo-map-iframe {
    width: 100%;
    min-height: 260px;
    border: 0;
    border-radius: 8px;
    display: block;
}

.guestseo-route-map .guestseo-map-link {
    margin: 0.4em 0 0;
    font-size: 0.85em;
}

.guestseo-route-auberge {
    margin: 0 0 var(--guestseo-route-ruimte);
    padding: 1.1em 1.2em;
}

.guestseo-route-auberge h2 {
    margin: 0 0 0.4em;
    font-size: 1.05em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--guestseo-route-grijs);
}

.guestseo-route-auberge .naam {
    margin: 0 0 0.5em;
    font-size: 1.15em;
    font-weight: 700;
}

.guestseo-route-auberge .plaats {
    font-weight: 400;
    color: var(--guestseo-route-grijs);
}

.guestseo-route-auberge .plaats::before {
    content: "· ";
}

.guestseo-route .guestseo-route-auberge ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.guestseo-route .guestseo-route-auberge li {
    margin: 0.25em 0;
}

/* Telefoonnummers zijn tikbaar; geef ze ruimte. */
.guestseo-route-auberge a {
    display: inline-block;
    padding: 0.2em 0;
    min-height: 28px;
}

.guestseo-route-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9em;
    margin: 0 0 var(--guestseo-route-ruimte);
}

.guestseo-route-gallery figure {
    margin: 0;
}

.guestseo-route-gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.guestseo-route-gallery figcaption {
    font-size: 0.8em;
    color: var(--guestseo-route-grijs);
    margin-top: 0.3em;
}

.guestseo-route-credits {
    font-size: 0.82em;
    color: var(--guestseo-route-grijs);
    line-height: 1.5;
    margin: 0 0 var(--guestseo-route-ruimte);
    padding: 0.8em 1.1em;
}

.guestseo-route-back {
    margin: 1.6em 0;
}

/* --------------------------------------------------------------- overzicht */



.guestseo-routes-head h1 {
    margin: 0 0 0.3em;
}

.guestseo-routes-intro {
    max-width: 62ch;
    color: var(--guestseo-route-grijs);
}

/**
 * Kop en filters vormen samen één strook: bovenaan afgerond, onderaan afgerond, met
 * één scheidingslijn ertussen. De ondergrond komt uit de gedeelde tekstregel boven.
 */
.guestseo-routes-head {
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    padding: 1.4em 1.3em 1em;
}

.guestseo-routes-filters {
    margin: 0 0 var(--guestseo-route-ruimte);
    padding: 1.1em 1.3em 1.2em;
    border-top: 1px solid var(--guestseo-route-lijn);
    border-radius: 0 0 8px 8px;
}

.guestseo-routes-filters .filtergroep + .filtergroep {
    margin-top: 0.9em;
}

.guestseo-routes-filters .filterlabel {
    display: block;
    font-size: 0.76em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--guestseo-route-grijs);
    margin-bottom: 0.4em;
}

/* Op de telefoon horizontaal scrollen in plaats van afbreken. */
.guestseo-routes-archive .guestseo-routes-filters .filterknoppen {
    display: flex;
    gap: 0.5em;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2em;
}

.guestseo-routes-filters button {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.5em 1em;
    border: 1px solid var(--guestseo-route-lijn);
    border-radius: var(--guestseo-route-radius);
    background: #fff;
    color: inherit;
    font-size: 0.92em;
    cursor: pointer;
    white-space: nowrap;
}

.guestseo-routes-filters button.actief {
    background: var(--guestseo-route-groen);
    border-color: var(--guestseo-route-groen);
    color: #fff;
}

.guestseo-routes-teller {
    margin: 0.9em 0 0;
    font-size: 0.9em;
    color: var(--guestseo-route-grijs);
}

.guestseo-routes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--guestseo-route-ruimte);
}

.guestseo-route-kaart[hidden] {
    display: none;
}

.guestseo-route-kaart {
    display: flex;
    border: 1px solid var(--guestseo-route-lijn);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.guestseo-route-kaart .kaart-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.guestseo-route-kaart .kaart-beeld {
    aspect-ratio: 3 / 2;
    background: #eceee8;
    overflow: hidden;
}

.guestseo-route-kaart .kaart-beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.guestseo-route-kaart .kaart-tekst {
    flex: 1 1 auto;
    padding: 0.9em 1em 1em;
}

.guestseo-route-kaart h2 {
    margin: 0 0 0.4em;
    font-size: 1.06em;
    line-height: 1.35;
    color: var(--guestseo-route-groen);
}

.guestseo-route-kaart .kaart-excerpt {
    margin: 0 0 0.7em;
    font-size: 0.92em;
    color: var(--guestseo-route-tekst);
    line-height: 1.5;
}

/* Gegevens onder elkaar, benaming links en waarde rechts tegen de rand. */
.guestseo-route-kaart .kaart-feiten {
    margin: 0;
    padding: 0.7em 0 0;
    border-top: 1px solid var(--guestseo-route-lijn);
    font-size: 0.86em;
}

.guestseo-route-kaart .kaart-feiten > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8em;
    padding: 0.16em 0;
}

.guestseo-route-kaart .kaart-feiten dt {
    margin: 0;
    color: var(--guestseo-route-grijs);
    font-weight: 400;
}

.guestseo-route-kaart .kaart-feiten dd {
    margin: 0;
    text-align: right;
    font-weight: 700;
    color: var(--guestseo-route-groen);
    white-space: nowrap;
}

/* Aansporing over de volle breedte, onderaan vastgezet zodat kaarten met een
   kortere tekst hun knop toch op dezelfde hoogte houden. */
.guestseo-routes-grid .guestseo-route-kaart .kaart-cta {
    display: block;
    margin-top: auto;
    padding: 0.85em 1em;
    background: var(--guestseo-route-oranje);
    color: #fff;
    text-decoration: none;
    text-align: center;
    font-weight: 600;
    font-size: 0.95em;
    min-height: 46px;
    line-height: 1.5;
}

.guestseo-routes-grid .guestseo-route-kaart .kaart-link:hover .kaart-cta,
.guestseo-routes-grid .guestseo-route-kaart .kaart-link:focus .kaart-cta {
    opacity: 0.9;
}

.guestseo-routes-grid .guestseo-route-kaart .kaart-link,
.guestseo-routes-grid .guestseo-route-kaart .kaart-link:hover {
    text-decoration: none;
}

.guestseo-routes-leeg[hidden] {
    display: none;
}

/* ------------------------------------------------------------ grotere schermen */

@media (min-width: 600px) {
    .guestseo-route-facts {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    }

    .guestseo-route-actions .guestseo-route-btn {
        flex: 0 1 auto;
    }

    .guestseo-routes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .guestseo-route-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .guestseo-routes-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 1.5em;
    }

    .guestseo-routes-filters .filtergroep + .filtergroep {
        margin-top: 0;
    }

    .guestseo-routes-teller {
        margin: 0 0 0.6em auto;
    }
}

@media (min-width: 900px) {
    .guestseo-routes-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .guestseo-route-map iframe {
        min-height: 340px;
    }
}

/* ------------------------------------------------------- kaart met het spoor */

.guestseo-route-kaartveld {
    width: 100%;
    height: 300px;
    border-radius: 8px;
    background: #e8ece6;
    z-index: 0; /* houdt de kaartlagen onder een eventueel menu */
}

/* De regel onder de kaart is een eigen balkje: zo valt op dat er een lengte staat
   en dat de kaart groter te bekijken is. */
.guestseo-route-map .guestseo-map-link {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
    justify-content: space-between;
    align-items: center;
    margin: 0.5em 0 0;
    padding: 0.7em 1.1em;
    font-size: 0.95em;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--guestseo-route-radius);
}

.guestseo-route-lengte {
    color: var(--guestseo-route-tekst);
    font-weight: 700;
}

.guestseo-route-map .guestseo-map-link a {
    color: var(--guestseo-route-groen);
    font-weight: 600;
    text-decoration: underline;
}

/* De afstand achter de wandelduur, iets rustiger dan het getal ervoor. */
.guestseo-route .guestseo-route-facts .val .afstand {
    font-weight: 400;
    color: var(--guestseo-route-grijs);
    font-size: 0.9em;
}

/* Leaflet zet zijn eigen lettergrootte; die van de site is hier te groot. */
.guestseo-route-kaartveld .leaflet-container {
    font-size: 0.85em;
}

@media (min-width: 900px) {
    .guestseo-route-kaartveld {
        height: 420px;
    }
}

/* -------------------------------------------------------- terug naar boven */

.guestseo-route-terug {
    margin: 0 0 var(--guestseo-route-ruimte);
}

.guestseo-route .guestseo-route-terug .guestseo-route-btn,
.guestseo-route .guestseo-route-back .guestseo-route-btn {
    flex: 0 0 auto;
    display: inline-flex;
}

.guestseo-route-back {
    margin: 0;
}

/* ------------------------------------------- bovenblok: foto naast de tekst */

/**
 * Op een telefoon staat alles onder elkaar met de foto bovenaan. Vanaf een breed
 * scherm twee gelijke kolommen: links het beeld, rechts de gegevens, de tekst, de
 * knoppen en de ferme-auberge. De kaart, de fotostrook en de verantwoording staan
 * daaronder over de volle breedte.
 */
.guestseo-route-top {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--guestseo-route-ruimte);
    margin: 0 0 var(--guestseo-route-ruimte);
}

.guestseo-route-kolom > *:first-child {
    margin-top: 0;
}

.guestseo-route-kolom > *:last-child {
    margin-bottom: 0;
}

@media (min-width: 900px) {
    .guestseo-route-top {
        grid-template-columns: 1fr 1fr;
        gap: var(--guestseo-route-ruimte);
        align-items: start;
    }

    .guestseo-route-top .guestseo-route-hero img {
        max-height: 78vh;
        object-fit: cover;
    }
}

/* --------------------------------------------- beeld met knoppen eronder */

/* Zelfde tussenruimte tussen de foto en de knoppen eronder als tussen de andere blokken. */
.guestseo-route-beeld .guestseo-route-actions {
    margin: var(--guestseo-route-ruimte) 0 0;
}

/* Geen onderstreping in welke knop dan ook, ook niet binnen de themacontent. */
.guestseo-route a.guestseo-route-btn,
.guestseo-route a.guestseo-route-btn:hover,
.guestseo-route a.guestseo-route-btn:focus,
.guestseo-routes-grid a.kaart-link,
.guestseo-routes-grid a.kaart-link:hover,
.guestseo-routes-grid a.kaart-link:focus {
    text-decoration: none;
}

@media (min-width: 900px) {
    /* De foto met zijn knoppen blijft in beeld zolang de tekstkolom doorloopt. */
    .guestseo-route-top .guestseo-route-beeld {
        position: sticky;
        top: 1.2em;
    }
}