/* VARIABLES */

:root {
    --black: #262626;
    --grey: #404040;
    --gold: #C4A46E;
    --gold-dark: #91713B;
    --gold-mid: #D3BB92;
    --gold-light: #E0D7C6;
    --gold-pale: #EDE8DE;
    --white: #FCFBF7;
}

/* BODY */

html, body {
    overflow-x: hidden;
}

body {
    background: var(--gold-light);
    font-family: 'Cinzel', 'Times New Roman', Times, serif;
}

/* NAV BAR */

#title {
    visibility: hidden;
    font-size: 0.1rem;
}

.navbar-top-logo {
    display: flex;
    justify-content: center;
    background-color: var(--gold-light);
}

.logo {
    width: 45%;
    padding-top: .5rem;
    margin-bottom: 0;
}

@media (min-width: 576px) {
    .logo {
        width: 55%;
    }
}

.navbar {
    background-color: var(--gold-light);
    font-size: 1.3rem;
}

.nav-item {
    margin-left: 8px;
    margin-right: 8px;
}

.nav-link:hover,
.nav-link:active {
    background-color: var(--gold-pale);
}

@media (min-width: 576px) {
    .dropdown-toggle::after {
        display: none;
    }
}

.navbar .dropdown-menu {
    font-size: 1.2rem;
    margin-top: 0;
    padding: 0;
    background-color: var(--gold-light);
    border: none;
    border-radius: 0;
}

.navbar .dropdown-item {
    padding: .75rem 1rem;
    color: var(--black);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus,
.navbar .dropdown-item:active,
.navbar .dropdown-item.active {
    background-color: var(--gold-pale);
    color: var(--black);
}

@media (min-width: 576px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

@media (min-width: 960px) {
    .logo {
        width: 35%;
    }
}

@media (min-width: 1360px) {
    .logo {
        width: 22%;
    }
}

/* MOBILE NAV TOGGLE */

.navbar-toggler {
    border: none;
    border-radius: 0;
    padding: .5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    filter: invert(15%);
}

/* COLLAPSED NAV */

@media (max-width: 575px) {

    .navbar {
        justify-content: center;
    }

    .navbar-collapse {
        text-align: center;
        background-color: var(--gold-light);
        margin-top: .5rem;
    }

    .nav-item {
        margin: 4px 0;
    }

    .nav-link {
        padding: .75rem;
    }

    .navbar .dropdown-menu {
        text-align: center;
        position: static;
        float: none;
    }

}

/* CONTENT */

.page {
    padding-top: 18px;
    padding-bottom: 16px;
    color: var(--gold-light);
    background-color: var(--black);
}

.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6 {
    color: var(--gold);
}

/* HERO HEADER */

.cta {
    font-size: 2.5rem;
}

.path-divider {
    display: inline;
    padding: 0 10px;
}

@media (max-width: 991px) {

    .headline h1 {
        text-align: center;
    }

    .path-divider {
        display: block;
        height: 0;
        font-size: 0;
    }

    .path-divider::after {
        content: "";
    }
}

/* SHARED BOX STYLES */

.box {
    position: relative;
    width: 100%;
    margin-bottom: 1.8rem;
    font-size: 1.2rem;
}

.box-content {
    position: relative;
    z-index: 1;
    padding: 0.5rem 0.7rem 0.5rem 0.7rem;
}

@media (min-width: 992px) {
    .box-content {
        padding: 1rem 3rem 1rem 3rem;
    }
}

/* HEADLINE */

.headline {
    margin-top: 2.8rem;
    margin-bottom: 2.8rem;
    text-align: center;
}

/* BUTTON */

.btn-gold {
    background-color: var(--gold-mid);
    color: var(--black);
    border-radius: 0;
    font-size: 1.1rem;
    --bs-btn-color: var(--black);
    --bs-btn-hover-color: var(--black);
    --bs-btn-bg: var(--gold-mid);
    --bs-btn-hover-bg: var(--gold-light);
}

.btn-gold a{
    text-decoration: none;
    color: var(--black);
}

.btn-gold:focus,
.btn-gold:active {
    color: var(--black);
    background-color: var(--gold-light);
}

.btn-black {
    background-color: var(--black);
    color: var(--gold-light);
    border-radius: 0;
    font-size: 1.1rem;
    --bs-btn-color: var(--gold-light);
    --bs-btn-hover-color: var(--gold-pale);
    --bs-btn-bg:  var(--black);
    --bs-btn-hover-bg: var(--grey);
}

.btn-black a {
    color: var(--gold-light);
    text-decoration: none;
}

.btn-black:focus,
.btn-black:active {
    color: var(--gold-pale);
    background-color: var(--grey);
}

/* TEXT-IMG STYLES */

@media (max-width: 576px) {
    .box-img-text .btn, .box-text-img .btn {
        margin-bottom: 14px;
    }
    .box-text-img h3, .box-img-text h3 {
        margin-top: 14px;
    }
}



.box-img-text .box-content img {
    max-width: 100%;
    padding-right: 20px;
}

/* IMG-TEXT STYLES */
.box-text-img .box-content {
    padding-left: 40px;
}

.box-text-img .box-content img {
    max-width: 100%;
}

/* LINE BREAK */

@media (max-width: 991px) {
    .linebreak {
        width: 120%;
        margin-left: -10%;
    }
}

@media (min-width: 992px) {
    .linebreak {
        width: 100%;
        margin: -30px 0 0 0;
    }
}

/* FULL WIDTH IMG */

#bgimg-reapers27 {
    height: 360px;
    width: 102%;

    background-image: url("../assets/graphics/reapers27_header.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
    margin-bottom: 16px;
    margin-left: -1%;
}

/* ACCORION */

.accordion h3, .accordion p, .accordion a {
    color: var(--black);
    text-decoration: none;
}

.accordion a:hover {
    color: var(--grey);
}

.accordion .card {
    background: none;
    border: none;
    min-width: 100%;
}

.accordion .card-header {
    border-radius: 0;
    background-color: var(--gold);
    
}

.accordion .card-body {
    border-radius: 0;
    background-color: var(--gold-light);
}

.accordion h3 {
    font-size: 1.6rem;
}

/* EVENT HEADERS */

.box-event-header {
    width: 100%;
    overflow: hidden;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.event-header-overlay {
    background-color: var(--gold);
}

.event-header-overlay h1,
.event-header-overlay p {
    color: var(--black);
    margin: 0;
}

.event-header-overlay h1,
.event-overlay-subheading {
    font-weight: 500;
}

.event-overlay-infos {
    font-size: 1.1rem;
}

/* DESKTOP */

@media (min-width: 992px) {

    .box-event-header {
        height: 540px;
        width: 102%;
        margin-left: -1%;
        margin-top: -1.2%;
        margin-bottom: 16px;
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
    }

    .event-header-overlay {
        width: 42%;
        padding: 14px 10px 16px 36px;
        margin-top: 20px;
    }

    .event-overlay-h1 {
        display: inline-block;
        padding-right: 10px;
    }

    .event-overlay-subheading {
        display: inline-block;
    }

    .event-btn-wrapper {
        display: flex;
        justify-content: flex-end;
    }

    .event-book {
        margin-right: 5px;
    }
}

/* MOBILE / TABLET */

@media (max-width: 992px) {

    .box-event-header {
        min-height: auto;
        width: 110%;
        margin-left: -5%;
        padding-top: 55vw; /* controls image height */
        position: relative;
        overflow: hidden;
    }

    .event-header-overlay {
        width: 100%;
        padding: 20px 15px;
        text-align: center;
    }

    .event-overlay-h1,
    .event-overlay-subheading {
        display: block;
    }

    .event-overlay-h1 {
        padding-right: 0;
        font-size: 2rem;
    }

    .event-overlay-infos {
        font-size: 1rem;
    }

    .event-btn-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 15px;
    }

    .event-book {
        margin: 0;
    }
}

 /* EVENT HEADER IMAGE SPECIFICATION */
    
 #event-header-reapers {
    background-image: url("../assets/graphics/reapers27_header.png");
    background-position: center 35%;
}

/* FORMS */

label {
    font-size: 1.2rem;
}

label a {
    color: var(--white);
    text-decoration: none;
}

#form-label-marketing {
    font-size: 1rem;
}

.alert {
    border-radius: 0;
}

/* FOOTER */

.footer-content {
    margin-top: 18px;
    margin-bottom: 20px;
    text-align: center;
    color: var(--black);
}

.footer-content a {
    color: var(--gold-dark);
}

.social-link {
    font-size: 2rem;
    margin: 0 6px 0 6px;
}