/*
 * FOCUS_ADVENTURES_V8_7_1_SITEWIDE_MAGAZINE
 *
 * Sitewide editorial polish.
 * Geen trip.php-specifieke layout.
 */

:root{
    --fa871-bg:#090d12;
    --fa871-surface:#0e141b;
    --fa871-surface-soft:#121922;
    --fa871-line:rgba(255,255,255,.09);
    --fa871-text:#f4f1eb;
    --fa871-muted:#9ba4ae;
    --fa871-orange:#ff6a1a;
    --fa871-orange-soft:#ffb184;
    --fa871-max:1440px;
    --fa871-reading:780px;
}

html{
    scroll-behavior:smooth;
}

body{
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(255,106,26,.055),
            transparent 30rem
        ),
        var(--fa871-bg);
    color:var(--fa871-text);
}

/*
 * Hoofdcontent krijgt dezelfde rustige breedte
 * als de nieuwe magazine-reispagina.
 */
body > main,
main.fa-main,
.site-main,
.page-main{
    width:min(calc(100% - 40px),var(--fa871-max));
    margin-inline:auto;
}

/* -----------------------------------------------
   TYPOGRAFIE
------------------------------------------------ */

main h1,
main h2,
main h3{
    text-wrap:balance;
}

main h1{
    max-width:1000px;
    font-size:clamp(44px,7vw,96px);
    line-height:.91;
    letter-spacing:-.055em;
    font-weight:650;
}

main h2{
    font-size:clamp(30px,4vw,58px);
    line-height:.98;
    letter-spacing:-.04em;
}

main h3{
    font-size:clamp(20px,2vw,30px);
    line-height:1.08;
}

main p{
    text-wrap:pretty;
}

main article > p,
main section > p{
    max-width:var(--fa871-reading);
    line-height:1.75;
}

/* -----------------------------------------------
   EDITORIAL KICKERS / LABELS
------------------------------------------------ */

.fa871-kicker,
main .eyebrow,
main .kicker,
main [class*="label"]{
    letter-spacing:.12em;
    text-transform:uppercase;
}

/* -----------------------------------------------
   NAVIGATIE
------------------------------------------------ */

header nav,
.site-nav,
.main-nav{
    backdrop-filter:blur(18px);
}

header a,
nav a{
    text-underline-offset:5px;
}

/* -----------------------------------------------
   KAARTEN WORDEN MEER MAGAZINE
------------------------------------------------ */

main article,
main .card,
main [class*="card"]{
    border-color:var(--fa871-line);
}

/*
 * Geen zware dashboard-schaduwen.
 */
main .card,
main [class*="card"]{
    box-shadow:none;
}

/* -----------------------------------------------
   AFBEELDINGEN
------------------------------------------------ */

main img{
    max-width:100%;
}

main figure img,
main article img,
main section img{
    object-fit:cover;
}

main figure{
    margin-inline:0;
}

main figcaption{
    margin-top:9px;
    color:var(--fa871-muted);
    font-size:12px;
    line-height:1.5;
}

/* -----------------------------------------------
   BUTTONS
------------------------------------------------ */

main a[class*="button"],
main a[class*="btn"],
main button:not(.plain){
    border-radius:999px;
}

/* -----------------------------------------------
   SECTION RHYTHM
------------------------------------------------ */

main > section{
    margin-block:clamp(42px,7vw,100px);
}

/* -----------------------------------------------
   HERO'S
------------------------------------------------ */

main [class*="hero"]{
    position:relative;
}

main [class*="hero"] img{
    border-radius:clamp(18px,2vw,30px);
}

/* -----------------------------------------------
   REIS / BLOG / OVERZICHT GRID
------------------------------------------------ */

main [class*="grid"]{
    align-items:start;
}

/*
 * Editorial afbeeldingen mogen niet als kleine
 * dashboard thumbnails voelen.
 */
main [class*="card"] img{
    transition:
        transform .55s cubic-bezier(.2,.8,.2,1),
        filter .4s ease;
}

@media (hover:hover){
    main [class*="card"]:hover img{
        transform:scale(1.018);
    }
}

/* -----------------------------------------------
   DETAILS / ACCORDIONS
------------------------------------------------ */

main details{
    border-top:1px solid var(--fa871-line);
}

main details:last-child{
    border-bottom:1px solid var(--fa871-line);
}

main summary{
    cursor:pointer;
}

/* -----------------------------------------------
   FOOTER
------------------------------------------------ */

footer{
    margin-top:clamp(70px,10vw,150px);
    border-top:1px solid var(--fa871-line);
}

footer p,
footer a{
    color:var(--fa871-muted);
}

/* -----------------------------------------------
   JS ENHANCEMENT
------------------------------------------------ */

.fa871-reveal{
    opacity:0;
    transform:translateY(18px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);
}

.fa871-reveal.fa871-visible{
    opacity:1;
    transform:none;
}

/*
 * Respecteer toegankelijkheidsinstelling.
 */
@media (prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    .fa871-reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

    main [class*="card"] img{
        transition:none;
    }
}

/* -----------------------------------------------
   TABLET
------------------------------------------------ */

@media (max-width:900px){
    body > main,
    main.fa-main,
    .site-main,
    .page-main{
        width:min(calc(100% - 28px),var(--fa871-max));
    }

    main > section{
        margin-block:52px;
    }
}

/* -----------------------------------------------
   MOBILE
------------------------------------------------ */

@media (max-width:640px){
    body > main,
    main.fa-main,
    .site-main,
    .page-main{
        width:min(calc(100% - 22px),var(--fa871-max));
    }

    main h1{
        font-size:clamp(38px,13vw,58px);
    }

    main h2{
        font-size:clamp(28px,9vw,42px);
    }

    main > section{
        margin-block:38px;
    }

    main [class*="hero"] img{
        border-radius:18px;
    }
}