/*CSS*/
:root{
    --gold:#d7b46e;
    --gold-hi:#f0cf87;
    --text:#e8ddc7;
    --muted:#b6ab98;
    --bg:#06080a;
    --panel:#0e1114;
    --panel2:#15191d;
    --line:#5e472e;
    --header-h:74px;
}
*{box-sizing:border-box}
html{background:#050608;scroll-behavior:smooth}
body{
    margin:0;
    min-width:320px;
    color:var(--text);
    background:
        radial-gradient(circle at 8% 26%,rgba(96,23,15,.16),transparent 30%),
        radial-gradient(circle at 92% 26%,rgba(23,53,91,.16),transparent 30%),
        #06080a;
    font-family:Georgia,"Times New Roman",serif;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
img{display:block;max-width:100%}

.site-shell{
    width:min(1672px,100%);
    min-height:100vh;
    margin:0 auto;
    position:relative;
    background:#080a0c;
    border-left:1px solid #3f3020;
    border-right:1px solid #3f3020;
    box-shadow:0 0 70px rgba(0,0,0,.88);
}

/* =========================
   HEADER / NAVBAR
   ========================= */
.site-header{
    position:absolute;
    inset:0 0 auto 0;
    height:var(--header-h);
    z-index:1000;
    pointer-events:none;
}
.nav-shell{
    height:100%;
    display:flex;
    align-items:stretch;
    position:relative;
    padding-left:148px;
    background:
        linear-gradient(180deg,rgba(12,14,17,.96),rgba(7,9,11,.96));
    border-top:1px solid #765737;
    border-bottom:1px solid #564029;
    box-shadow:0 7px 22px rgba(0,0,0,.66);
    pointer-events:auto;
}
.brand-logo{
    position:absolute;
    left:-4px;
    top:-6px;
    width:160px;
    height:160px;
    z-index:1100;
    pointer-events:auto;
}
.brand-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    filter:drop-shadow(0 10px 13px rgba(0,0,0,.82));
}
.main-nav{
    height:100%;
    display:flex;
    align-items:stretch;
    gap:0;
}
.nav-button{
    position:relative;
    width:154px;
    min-width:154px;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#e9deca;
    font-size:19px;
    text-shadow:0 2px 3px #000,0 0 8px rgba(0,0,0,.75);
    background:url("../images/navbar/nav-button.png") center/100% 100% no-repeat;
    transition:color .12s ease,filter .12s ease;
}
.nav-button:hover,
.nav-dropdown:hover>.nav-button{
    color:var(--gold-hi);
    background-image:url("../images/navbar/nav-button_hover.png");
}
.nav-button.active,
.nav-dropdown.active>.nav-button{
    color:var(--gold-hi);
    background-image:url("../images/navbar/nav-button_active.png");
}
.nav-button span{position:relative;z-index:2}
.nav-dropdown{
    position:relative;
    height:100%;
}
.header-spacer{flex:1}
.mobile-toggle{display:none}

/* =========================
   DYNAMIC DATABASE SUBMENU
   ========================= */
.database-menu{
    position:absolute;
    top:calc(100% - 2px);
    left:50%;
    width:276px;
    transform:translateX(-50%) translateY(-7px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    filter:drop-shadow(0 18px 24px rgba(0,0,0,.72));
    transition:opacity .12s ease,transform .12s ease,visibility .12s;
}
.nav-dropdown:hover .database-menu,
.nav-dropdown.menu-open .database-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
.submenu-top{
    height:98px;
    margin-bottom:-42px;
    position:relative;
    z-index:3;
    background:url("../images/submenu/submenu-top.png") center top/100% 100% no-repeat;
    pointer-events:none;
}
.submenu-body{
    position:relative;
    z-index:2;
    padding:35px 18px 25px;
    background:
        url("../images/submenu/submenu-middle.png") center top/100% 82px repeat-y;
}
.submenu-bottom{
    height:86px;
    margin-top:-44px;
    position:relative;
    z-index:3;
    background:url("../images/submenu/submenu-bottom.png") center bottom/100% 100% no-repeat;
    pointer-events:none;
}
.submenu-row{
    position:relative;
    z-index:4;
    min-height:27px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px 14px;
    color:#dfd3bc;
    font-size:14px;
    white-space:nowrap;
}
.submenu-row:before{
    content:"";
    position:absolute;
    inset:-2px -5px;
    z-index:-1;
    opacity:0;
    background:url("../images/submenu/submenu-row_hover.png") center/100% 100% no-repeat;
    transition:opacity .12s ease;
}
.submenu-row:hover{
    color:#f1d18a;
}
.submenu-row:hover:before{opacity:1}
.submenu-bullet{
    font-size:8px;
    color:#c08e42;
    text-shadow:0 0 6px rgba(220,160,70,.42);
}
.submenu-separator{
    height:7px;
    margin:0 8px;
    background:url("../images/submenu/submenu-separator.png") center/100% 100% no-repeat;
}

/* =========================
   HOME HERO
   ========================= */
.hero{
    min-height:790px;
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.05) 62%,rgba(5,7,9,.74) 100%),
        url("../images/hero-background.png") center top/cover no-repeat;
    border-bottom:1px solid #5b432c;
}
.hero:after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:180px;
    background:linear-gradient(transparent,rgba(6,8,10,.94));
    pointer-events:none;
}
.hero-content{
    position:relative;
    z-index:4;
    width:min(820px,58%);
    margin:0 auto;
    padding-top:145px;
    text-align:center;
}
.hero-title{
    margin:0;
    color:#d3b06e;
    font-size:clamp(78px,8.4vw,136px);
    line-height:.9;
    font-weight:900;
    letter-spacing:7px;
    text-transform:uppercase;
    text-shadow:
        0 2px 0 #f3d699,
        0 6px 0 #5d4425,
        0 13px 28px rgba(0,0,0,.92);
}
.hero-subtitle{
    margin-top:19px;
    color:#e4c589;
    font-size:clamp(23px,2.15vw,34px);
    text-shadow:0 3px 8px #000;
}
.hero-divider{
    width:470px;
    max-width:80%;
    height:22px;
    position:relative;
    margin:16px auto 25px;
}
.hero-divider:before,
.hero-divider:after{
    content:"";
    position:absolute;
    top:10px;
    width:44%;
    height:1px;
    background:linear-gradient(90deg,transparent,#a07b44);
}
.hero-divider:before{left:0}
.hero-divider:after{right:0;transform:scaleX(-1)}
.hero-divider span{
    position:absolute;
    left:50%;
    top:3px;
    width:15px;
    height:15px;
    transform:translateX(-50%) rotate(45deg);
    background:#1f6098;
    border:1px solid #e2b75f;
    box-shadow:0 0 0 2px #0b0e11,0 0 10px #3079b7;
}

/* =========================
   SEARCH
   ========================= */
.search-shell{
    width: min(760px, 96%);
    height: 92px;
    margin: 0 auto;
    position: relative;
    background: url("../images/search/search-frame.png") center/100% 100% no-repeat;
    filter: drop-shadow(0 11px 17px rgba(0,0,0,.58));
}

.search-form{
    position: absolute;
    inset: 0;
}

/* selve tekstfeltet */
.search-input{
    position: absolute;
    left: 70px;
    right: 92px;
    top: 50%;
    transform: translateY(-56%);
    height: 34px;

    border: 0;
    outline: 0;
    background: transparent;

    color: #d7c7a3;
    font-size: 18px;
    line-height: 34px;
    padding: 0 10px 0 14px;

    font-family: Georgia, "Times New Roman", serif;
}

.search-input::placeholder{
    color: #8f8574;
    opacity: 1;
}

/* knappen */
.search-submit{
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 68px;
    height: 68px;

    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    cursor: pointer;
}

.search-submit img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: opacity .15s ease;
}

.search-submit .hover{
    opacity: 0;
}

.search-submit:hover .normal{
    opacity: 0;
}

.search-submit:hover .hover{
    opacity: 1;
}

/* =========================
   FEATURE CARDS
   ========================= */
.feature-section{
    position:relative;
    z-index:20;
    margin-top:-96px;
    padding:0 155px 44px;
}
.feature-frame{
    position:relative;
    padding:24px 25px 28px;
    background:
        radial-gradient(circle at 8% 50%,rgba(97,24,16,.09),transparent 28%),
        radial-gradient(circle at 92% 50%,rgba(25,58,100,.09),transparent 28%),
        linear-gradient(#111418,#080a0c);
    border:1px solid #685033;
    box-shadow:
        0 0 0 4px #06080a,
        0 18px 38px rgba(0,0,0,.58);
}
.feature-frame:before,
.feature-frame:after{
    content:"";
    position:absolute;
    width:30px;
    height:30px;
    border-color:#a28454;
    pointer-events:none;
}
.feature-frame:before{
    left:8px;top:8px;
    border-left:2px solid;
    border-top:2px solid;
}
.feature-frame:after{
    right:8px;bottom:8px;
    border-right:2px solid;
    border-bottom:2px solid;
}
.card-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
}
.card-unit{
    position:relative;
    min-width:0;
}
.card-image{
    width:100%;
    height:auto;
    pointer-events:none;
    user-select:none;
    filter:drop-shadow(0 9px 12px rgba(0,0,0,.40));
}
.card-cta{
    position:absolute;
    left:14.5%;
    bottom:5.4%;
    width:71%;
    z-index:5;
    display:block;
    filter:drop-shadow(0 5px 7px rgba(0,0,0,.52));
}
.card-cta img{
    width:100%;
    height:auto;
    pointer-events:none;
    transition:opacity .13s ease,transform .13s ease;
}
.card-cta .hover{
    position:absolute;
    inset:0;
    opacity:0;
}
.card-cta:hover .normal{opacity:0}
.card-cta:hover .hover{opacity:1}
.card-cta:hover img{transform:scale(1.025)}

/* =========================
   INNER PAGES
   ========================= */
.inner-hero{
    min-height:330px;
    display:flex;
    align-items:flex-end;
    position:relative;
    padding:110px 7% 46px;
    background:
        linear-gradient(90deg,rgba(88,20,13,.35),rgba(6,9,12,.56) 36%,rgba(6,9,12,.56) 64%,rgba(20,52,91,.35)),
        linear-gradient(180deg,rgba(0,0,0,.14),rgba(5,7,9,.83)),
        url("../images/hero-background.png") center 43%/cover no-repeat;
    border-bottom:1px solid #61482f;
}
.inner-hero h1{
    margin:0;
    color:#dfbb73;
    font-size:48px;
    text-shadow:0 4px 10px #000;
}
.inner-hero p{
    margin:7px 0 0;
    color:#d0c1a8;
    font-size:17px;
}
.content{
    width:min(1210px,92%);
    margin:30px auto 55px;
}
.panel{
    position:relative;
    padding:23px;
    background:linear-gradient(#15191d,#0d1013);
    border:1px solid #5f492f;
    box-shadow:0 0 0 3px #07090b,0 12px 30px rgba(0,0,0,.42);
}
.panel+.panel{margin-top:19px}
.panel h2,.panel h3{margin-top:0;color:#deb971}
.category-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.category-tile{
    min-height:108px;
    padding:17px;
    background:#12161a;
    border:1px solid #433728;
    transition:border-color .12s ease,background .12s ease,transform .12s ease;
}
.category-tile:hover{
    border-color:#8a693e;
    background:#181d22;
    transform:translateY(-2px);
}
.category-tile h3{margin:0 0 7px;color:#dbb772}
.category-tile p{
    margin:0;
    color:#ada493;
    font:14px/1.45 Arial,sans-serif;
}
.inner-search{
    display:flex;
    gap:8px;
}
.inner-search input{
    flex:1;
    padding:13px 15px;
    border:1px solid #59462e;
    outline:0;
    background:#0c0f12;
    color:#fff;
}
.inner-search button{
    padding:0 23px;
    border:1px solid #88673b;
    background:#1b4c79;
    color:#efd294;
    cursor:pointer;
}
.result-tabs{
    display:flex;
    overflow:auto;
    margin-top:17px;
    border:1px solid #50402c;
}
.result-tabs span{
    padding:10px 13px;
    white-space:nowrap;
    background:#14181c;
    border-right:1px solid #34302a;
}
.result-tabs span:first-child{
    color:#f0cf81;
    background:#22394f;
}
.result-box{
    margin-top:12px;
    padding:22px;
    color:#b9af9f;
    background:#101317;
    border:1px solid #423627;
    font-family:Arial,sans-serif;
}

/* =========================
   FOOTER
   ========================= */
.site-footer{
    padding:21px 4%;
    display:flex;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    color:#8b8275;
    background:#06080a;
    border-top:1px solid #463622;
    font:12px Arial,sans-serif;
}
.site-footer strong{color:#b99a61}

/* =========================
   RESPONSIVE
   ========================= */
@media(max-width:1280px){
    .nav-shell{padding-left:132px}
    .brand-logo{width:145px;height:145px}
    .nav-button{width:135px;min-width:135px;font-size:17px}
    .feature-section{padding-left:60px;padding-right:60px}
}
@media(max-width:980px){
    .hero{min-height:720px}
    .hero-content{width:74%}
    .feature-section{margin-top:-52px;padding-left:28px;padding-right:28px}
    .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
    .category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
    .site-header{position:absolute;height:auto}
    .nav-shell{
        min-height:67px;
        padding-left:88px;
        flex-wrap:wrap;
    }
    .brand-logo{
        width:96px;
        height:96px;
        top:-3px;
    }
    .mobile-toggle{
        display:block;
        margin-left:auto;
        margin-right:14px;
        align-self:center;
        padding:8px 11px;
        color:#e4c783;
        background:#101419;
        border:1px solid #675034;
        cursor:pointer;
    }
    .main-nav{
        display:none;
        width:calc(100% + 88px);
        height:auto;
        margin-left:-88px;
        order:10;
        flex-direction:column;
        background:#090c0f;
    }
    .main-nav.mobile-open{display:flex}
    .nav-button{
        width:100%;
        min-width:0;
        height:50px;
        justify-content:flex-start;
        padding-left:28px;
        background-size:100% 100%;
    }
    .nav-dropdown{height:auto;width:100%}
    .database-menu{
        position:static;
        width:100%;
        transform:none;
        display:none;
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        filter:none;
    }
    .nav-dropdown:hover .database-menu{display:none}
    .nav-dropdown.menu-open .database-menu{display:block}
    .submenu-top,.submenu-bottom{display:none}
    .submenu-body{
        padding:8px 18px 12px 36px;
        background:#0d1115;
        border-top:1px solid #403321;
        border-bottom:1px solid #403321;
    }
    .submenu-row{min-height:32px}
    .submenu-separator{height:4px}
    .hero{
        min-height:650px;
        background-position:center top;
    }
    .hero-content{
        width:92%;
        padding-top:128px;
    }
    .hero-title{font-size:64px}
    .hero-subtitle{font-size:20px}
    .search-shell{height:72px}
    .search-submit{width:48px;height:48px;margin-left:8px}
    .feature-section{margin-top:0;padding:18px 14px 36px}
    .card-grid{grid-template-columns:1fr}
    .category-grid{grid-template-columns:1fr}
    .inner-hero{padding-top:105px}
    .inner-hero h1{font-size:37px}
}