/* =====================================================
   BOXEREN.DK - SHARED SITE DESIGN
===================================================== */

:root {
    --site-dark:#292a25;
    --site-dark-soft:#353630;
    --site-light:#f4f2ed;
    --site-text:#242424;
    --site-muted:#aaa9a2;
    --site-accent:#d5b06c;
    --site-accent-light:#ead8b6;
}

* {
    box-sizing:border-box;
}

html,
body {
    margin:0;
    padding:0;
}

body {
    background:var(--site-light);
    color:var(--site-text);
    font-family:Verdana, Arial, sans-serif;
}


/* =====================================================
   HEADER
===================================================== */

.site-header {
    position:relative;
    z-index:1000;
    width:100%;
    background:var(--site-dark);
    border-bottom:1px solid rgba(255,255,255,.08);
}

.site-header-inner {
    width:100%;
    max-width:1240px;
    min-height:84px;
    margin:0 auto;
    padding:0 28px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:35px;
}


/* =====================================================
   BRAND
===================================================== */

.site-brand {
    flex-shrink:0;
}

.site-brand a {
    display:block;
    color:#fff;
    text-decoration:none;
}

.site-brand-name {
    display:block;
    font-family:Georgia, "Times New Roman", serif;
    font-size:28px;
    line-height:1;
    letter-spacing:.2px;
}

.site-brand-subtitle {
    display:block;
    margin-top:7px;
    color:var(--site-accent-light);
    font-size:9px;
    line-height:1;
    letter-spacing:1.65px;
    text-transform:uppercase;
}


/* =====================================================
   NAVIGATION
===================================================== */

.site-navigation {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
}

.site-navigation a {
    position:relative;
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:0 13px;

    border-radius:4px;

    color:#c7c6c0;
    font-size:12px;
    text-decoration:none;
    white-space:nowrap;

    transition:
        color .16s ease,
        background .16s ease;
}

.site-navigation a:hover,
.site-navigation a:focus {
    background:rgba(255,255,255,.06);
    color:#fff;
}

.site-navigation a.active {
    color:#fff;
}

.site-navigation a.active::after {
    content:"";
    position:absolute;
    left:13px;
    right:13px;
    bottom:5px;
    height:2px;
    background:var(--site-accent);
}

.site-navigation .webshop-link {
    margin-left:8px;
    padding-left:17px;
    padding-right:17px;

    background:#f4f1e9;
    color:#292a25;
    font-weight:bold;
}

.site-navigation .webshop-link:hover,
.site-navigation .webshop-link:focus {
    background:#fff;
    color:#111;
}

.external-mark {
    margin-left:6px;
    font-size:12px;
    font-weight:normal;
}


/* =====================================================
   MOBILE MENU BUTTON
===================================================== */

.site-menu-toggle {
    display:none;
    width:44px;
    height:44px;
    padding:10px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:5px;

    background:transparent;
    cursor:pointer;
}

.site-menu-toggle span {
    display:block;
    width:20px;
    height:2px;
    margin:4px auto;
    background:#fff;

    transition:
        transform .18s ease,
        opacity .18s ease;
}

.site-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform:translateY(6px) rotate(45deg);
}

.site-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity:0;
}

.site-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform:translateY(-6px) rotate(-45deg);
}


/* =====================================================
   BASIC PAGE WRAPPER
   Can be reused on future pages.
===================================================== */

.site-content {
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:40px 28px 60px;
}


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

@media(max-width:900px) {

    .site-header-inner {
        min-height:74px;
        padding-left:20px;
        padding-right:20px;
    }

    .site-menu-toggle {
        display:block;
        flex-shrink:0;
    }

    .site-navigation {
        display:none;

        position:absolute;
        top:100%;
        left:0;
        right:0;

        padding:12px 20px 20px;

        background:var(--site-dark);
        border-top:1px solid rgba(255,255,255,.08);
        border-bottom:1px solid rgba(255,255,255,.08);

        box-shadow:0 12px 25px rgba(0,0,0,.2);
    }

    .site-navigation.is-open {
        display:block;
    }

    .site-navigation a {
        display:flex;
        width:100%;
        min-height:47px;
        padding:0 12px;

        border-bottom:1px solid rgba(255,255,255,.06);
        border-radius:0;
    }

    .site-navigation a.active::after {
        left:12px;
        right:auto;
        width:25px;
        bottom:6px;
    }

    .site-navigation .webshop-link {
        justify-content:center;

        margin:13px 0 0;
        border-bottom:0;
        border-radius:4px;
    }
}

@media(max-width:500px) {

    .site-brand-name {
        font-size:24px;
    }

    .site-brand-subtitle {
        font-size:8px;
        letter-spacing:1.2px;
    }

    .site-content {
        padding:
            30px
            18px
            50px;
    }
}

/* =====================================================
   FRONT PAGE - DATABASE FEATURE V2
===================================================== */

.database-feature {
    width:100%;
    padding:28px 28px 0;
}

.database-feature-link {
    position:relative;
    display:block;
    width:100%;
    max-width:1240px;
    min-height:320px;
    margin:0 auto;
    overflow:hidden;
    border-radius:10px;
    background:#d8d0c3;
    color:#fff;
    text-decoration:none;
    box-shadow:0 10px 28px rgba(0,0,0,.14);
}

.database-feature-image {
    position:absolute;
    inset:0;
    background-image:url("https://boxeren.dk/images/frontpage/G2I5415_1-2.jpg");
    background-position:center 43%;
    background-size:cover;
    transform:scale(1.01);
    transition:transform .45s ease;
}

.database-feature-overlay {
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(26,27,23,.76) 0%,
            rgba(26,27,23,.56) 34%,
            rgba(26,27,23,.20) 58%,
            rgba(26,27,23,.04) 100%
        );
}

.database-feature-content {
    position:relative;
    z-index:2;
    width:100%;
    max-width:560px;
    min-height:320px;
    padding:42px 46px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
}

.database-feature-kicker {
    margin-bottom:12px;
    color:#f0cf91;
    font-size:10px;
    font-weight:bold;
    letter-spacing:1.9px;
    text-transform:uppercase;
}

.database-feature h1 {
    max-width:520px;
    margin:0;
    color:#fff;
    font-family:Georgia, "Times New Roman", serif;
    font-size:38px;
    font-weight:normal;
    line-height:1.08;
    letter-spacing:-.2px;
}

.database-feature p {
    max-width:500px;
    margin:16px 0 0;
    color:rgba(255,255,255,.88);
    font-size:13px;
    line-height:1.7;
}

.database-feature-button {
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:22px;
    padding:10px 14px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:4px;
    color:#fff;
    font-size:11px;
    font-weight:bold;
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease;
}

.database-feature-link:hover .database-feature-image {
    transform:scale(1.035);
}

.database-feature-link:hover .database-feature-button {
    background:#fff;
    border-color:#fff;
    color:#252620;
}

@media(max-width:800px) {
    .database-feature {
        padding:20px 18px 0;
    }

    .database-feature-link,
    .database-feature-content {
        min-height:300px;
    }

    .database-feature-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(26,27,23,.78) 0%,
                rgba(26,27,23,.52) 100%
            );
    }

    .database-feature-content {
        max-width:100%;
        padding:34px 28px;
    }

    .database-feature h1 {
        font-size:32px;
    }
}

@media(max-width:500px) {
    .database-feature-link,
    .database-feature-content {
        min-height:280px;
    }

    .database-feature-content {
        padding:30px 22px;
    }

    .database-feature h1 {
        font-size:28px;
    }

    .database-feature p {
        font-size:12px;
    }
}