/*
 * ==========================================================
 * FOCUS_ADVENTURES_HQ_V8_UNIFIED_BRAND
 * ==========================================================
 *
 * Centrale Focus Adventures huisstijl
 *
 * Logo:
 * focus-adventures-badge-v7-2.webp
 *
 * Kleuren:
 * navy   #071f2c
 * navy2  #0d2b38
 * orange #e36d32
 * cream  #f4ead5
 * paper  #f7f1e4
 */

:root{
    --fa8-navy:#071f2c;
    --fa8-navy2:#0d2b38;
    --fa8-navy3:#123846;

    --fa8-orange:#e36d32;
    --fa8-orange-dark:#b94e28;

    --fa8-cream:#f4ead5;
    --fa8-paper:#f7f1e4;
    --fa8-sand:#cbb083;

    --fa8-ink:#112b35;
    --fa8-muted:#6d756f;

    --fa8-line:rgba(7,31,44,.16);

    --fa8-radius:16px;

    --fa8-shadow:
        0 12px 32px rgba(4,20,29,.12);
}


/* ==========================================================
 * BASIS
 * ========================================================== */

body.fa-hq-v8{
    color:var(--fa8-ink);
}

.fa-hq-v8 h1,
.fa-hq-v8 h2,
.fa-hq-v8 h3{
    color:var(--fa8-navy);
}

.fa-hq-v8 a{
    text-decoration-thickness:1px;
    text-underline-offset:3px;
}


/* ==========================================================
 * PUBLIC ROADBOOKS
 * ========================================================== */

body.fa-hq-v8-public{
    background:
        radial-gradient(
            circle at 85% 5%,
            rgba(227,109,50,.07),
            transparent 25%
        ),
        var(--fa8-paper) !important;

    color:
        var(--fa8-ink) !important;
}


/* header */

.fa-hq-v8-public header{
    border-color:
        rgba(227,109,50,.24) !important;
}


/* echt logo */

.fa-hq-v8-public .brand-logo,
.fa-hq-v8-public header img[
    src*="focus-adventures-badge"
]{
    filter:
        drop-shadow(
            0 5px 10px
            rgba(7,31,44,.18)
        );
}


/* primaire knoppen */

.fa-hq-v8-public a[class*="btn"],
.fa-hq-v8-public .rb-btn,
.fa-hq-v8-public .rb-download a,
.fa-hq-v8-public .rb-buy a{
    background:
        var(--fa8-navy) !important;

    color:
        var(--fa8-cream) !important;

    border-color:
        var(--fa8-orange) !important;
}


.fa-hq-v8-public a[class*="btn"]:hover,
.fa-hq-v8-public .rb-btn:hover,
.fa-hq-v8-public .rb-download a:hover,
.fa-hq-v8-public .rb-buy a:hover{
    background:
        var(--fa8-navy2) !important;

    border-color:
        var(--fa8-orange) !important;
}


/* roadbook cards */

.fa-hq-v8-public article,
.fa-hq-v8-public .rb-card,
.fa-hq-v8-public .rb-panel,
.fa-hq-v8-public .rb-buy{
    border-color:
        var(--fa8-line) !important;
}


/* downloadpaneel */

.fa-hq-v8-roadbook .rb-buy{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            140deg,
            var(--fa8-navy),
            var(--fa8-navy2)
        )
        !important;

    color:
        var(--fa8-cream)
        !important;

    border-top:
        4px solid
        var(--fa8-orange)
        !important;
}


.fa-hq-v8-roadbook .rb-buy strong,
.fa-hq-v8-roadbook .rb-buy h2,
.fa-hq-v8-roadbook .rb-buy h3{
    color:
        #fff4dc !important;
}


.fa-hq-v8-roadbook .rb-buy small,
.fa-hq-v8-roadbook .rb-buy p{
    color:
        #c9d2cc !important;
}


/* ==========================================================
 * INTERNE FOCUS ADVENTURES TOOLS
 * ========================================================== */

body.fa-hq-v8-admin{
    background:
        radial-gradient(
            circle at 85% 0%,
            rgba(227,109,50,.09),
            transparent 24%
        ),
        radial-gradient(
            circle at 5% 100%,
            rgba(13,43,56,.25),
            transparent 30%
        ),
        #050e14
        !important;

    color:
        #e9e4d9
        !important;
}


/* panelen */

.fa-hq-v8-admin .panel,
.fa-hq-v8-admin .card,
.fa-hq-v8-admin article{
    background:
        linear-gradient(
            145deg,
            rgba(10,27,36,.96),
            rgba(7,19,27,.97)
        )
        !important;

    border-color:
        rgba(227,109,50,.18)
        !important;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.17);
}


/* titels */

.fa-hq-v8-admin h1,
.fa-hq-v8-admin h2,
.fa-hq-v8-admin h3{
    color:
        #f5ead4
        !important;
}


/* muted */

.fa-hq-v8-admin .muted,
.fa-hq-v8-admin .note,
.fa-hq-v8-admin small{
    color:
        #a8b1ac
        !important;
}


/* knoppen */

.fa-hq-v8-admin .btn,
.fa-hq-v8-admin button.btn,
.fa-hq-v8-admin a.btn{
    background:
        var(--fa8-navy2)
        !important;

    color:
        #fff1d7
        !important;

    border:
        1px solid
        var(--fa8-orange)
        !important;
}


.fa-hq-v8-admin .btn:hover,
.fa-hq-v8-admin button.btn:hover,
.fa-hq-v8-admin a.btn:hover{
    background:
        var(--fa8-navy3)
        !important;

    border-color:
        #f08a57
        !important;
}


/* secondary / ghost */

.fa-hq-v8-admin .ghost,
.fa-hq-v8-admin .secondary{
    background:
        rgba(255,255,255,.035)
        !important;

    color:
        #d8d8d0
        !important;

    border-color:
        rgba(244,234,213,.18)
        !important;
}


/* inputs */

.fa-hq-v8-admin input,
.fa-hq-v8-admin textarea,
.fa-hq-v8-admin select{
    background:
        #07141c
        !important;

    color:
        #f0eadf
        !important;

    border-color:
        rgba(203,176,131,.28)
        !important;
}


.fa-hq-v8-admin input:focus,
.fa-hq-v8-admin textarea:focus,
.fa-hq-v8-admin select:focus{
    outline:
        2px solid
        rgba(227,109,50,.35)
        !important;

    border-color:
        var(--fa8-orange)
        !important;
}


/* badges */

.fa-hq-v8-admin .badge{
    background:
        rgba(244,234,213,.04)
        !important;

    color:
        #d8d3c8
        !important;

    border-color:
        rgba(203,176,131,.22)
        !important;
}


.fa-hq-v8-admin .badge.ok{
    color:
        #b9d8ca
        !important;

    border-color:
        #2d6b54
        !important;
}


.fa-hq-v8-admin .badge.warn{
    color:
        #f0c994
        !important;

    border-color:
        var(--fa8-orange-dark)
        !important;
}


/* ==========================================================
 * ROUTEPRODUCTEN
 * ========================================================== */

.fa-hq-v8-route-products .head{
    position:relative;

    padding-left:
        92px !important;
}


.fa-hq-v8-route-products .head:before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:72px;
    height:72px;

    transform:
        translateY(-50%);

    background:
        url("/focusadventures/assets/focus-adventures-badge-v7-2.webp")
        center/contain no-repeat;

    filter:
        drop-shadow(
            0 6px 12px
            rgba(0,0,0,.22)
        );
}


.fa-hq-v8-route-products .eyebrow{
    color:
        var(--fa8-orange)
        !important;
}


.fa-hq-v8-route-products .part.ok{
    border-color:
        rgba(227,109,50,.28)
        !important;
}


/* ==========================================================
 * ROUTEKAART VIEWER
 * ========================================================== */

.fa-hq-v8-route-map:before{
    content:"";

    display:block;

    width:92px;
    height:92px;

    margin:
        18px auto 4px;

    background:
        url("/focusadventures/assets/focus-adventures-badge-v7-2.webp")
        center/contain no-repeat;

    filter:
        drop-shadow(
            0 7px 15px
            rgba(0,0,0,.22)
        );
}


.fa-hq-v8-route-map img,
.fa-hq-v8-route-map svg{
    border:
        3px solid
        var(--fa8-navy)
        !important;

    border-bottom:
        7px solid
        var(--fa8-orange)
        !important;

    box-shadow:
        var(--fa8-shadow);
}


/* ==========================================================
 * REISCOVERS
 * ========================================================== */

.fa-hq-v8-covers .head{
    position:relative;

    padding-left:
        82px;
}


.fa-hq-v8-covers .head:before{
    content:"";

    position:absolute;

    left:0;
    top:50%;

    width:64px;
    height:64px;

    transform:
        translateY(-50%);

    background:
        url("/focusadventures/assets/focus-adventures-badge-v7-2.webp")
        center/contain no-repeat;
}


.fa-hq-v8-covers .preview,
.fa-hq-v8-covers .hq-cover-preview{
    background:
        #020a0f
        !important;

    border:
        1px solid
        rgba(227,109,50,.25)
        !important;
}


.fa-hq-v8-covers .hq-cover-label{
    background:
        var(--fa8-navy)
        !important;

    color:
        var(--fa8-cream)
        !important;

    border-color:
        var(--fa8-orange)
        !important;
}


/* ==========================================================
 * RESPONSIVE
 * ========================================================== */

@media(max-width:700px){

    .fa-hq-v8-route-products .head,
    .fa-hq-v8-covers .head{
        padding-left:
            0 !important;

        padding-top:
            72px !important;
    }

    .fa-hq-v8-route-products .head:before,
    .fa-hq-v8-covers .head:before{
        top:0;

        left:0;

        transform:none;
    }
}