/**************************
Fonts and Typography
**************************/

/* Following fonts are imported via Google Fonts CDN and defined here */

.philosopher-regular {
    font-family: "Philosopher", serif;
    font-weight: 400;
    font-style: normal;
}

.philosopher-bold {
    font-family: "Philosopher", serif;
    font-weight: 700;
    font-style: normal;
}

.philosopher-regular-italic {
    font-family: "Philosopher", serif;
    font-weight: 400;
    font-style: italic;
}

.philosopher-bold-italic {
    font-family: "Philosopher", serif;
    font-weight: 700;
    font-style: italic;
}

/**************************
Bootstrap Overrides
**************************/

:root {
    /* Override core color variables */
    --bs-primary: #ffd700; /* Gold */
    --bs-primary-rgb: 255, 215, 0; /* Gold RGB values */
    --bs-primary-bg-subtle: #fff9e6; /* Light yellow */
    --bs-primary-border-subtle: #fff9e6; /* Light yellow */
    --bs-primary-text-emphasis: #665400; /* Darker gold for text */
    --bs-primary-bg: #ffd700; /* Gold */

    --bs-secondary: #594931; /* Brown */
    --primary-color-dark: hsl(51, 100%, 40%); /* Adjust the lightness value to darken */

    /* Override font family */
    --bs-body-font-family: "Philosopher", serif;
    --bs-body-font-weight: 400;

    /* Override for border radius */
    --bs-border-radius: 0.25rem;
}

a {
    color: var(--bs-primary);
    text-decoration: none;
}

/* Remove visited link styling - links always look the same */
a:visited {
    color: inherit;
}

/* Bootstrap Primary Button Overrides */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #222233 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--primary-color-dark) !important;
    border-color: var(--primary-color-dark) !important;
    color: white !important;
}

/* Bootstrap Outline Primary Button Overrides */
.btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #222233 !important;
}

/* Remove visited state for all button types */
.btn:visited,
.btn-primary:visited,
.btn-outline-primary:visited,
.btn-secondary:visited,
.btn-outline-secondary:visited {
    color: inherit;
}

/* Bootstrap Background Utilities */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

/* Bootstrap Text Utilities */
.text-primary {
    color: var(--bs-primary) !important;
}

/* Bootstrap Border Utilities */
.border-primary {
    border-color: var(--bs-primary) !important;
}

/* Bootstrap Badge Primary */
.badge.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #222233 !important;
}

/**************************
End of Bootstrap Overrides
**************************/

/**************************
Social Media Button Styles
**************************/
.btn-facebook {
    background-color: #1877F2;
    border-color: #1877F2;
    color: white;
}

.btn-facebook:hover {
    background-color: #0e5a9e; /* Darker blue */
    border-color: #0e5a9e;
    color: white;
}

/**************************
Utility classes
**************************/
.color-text-gold {
    color: var(--bs-primary) !important;
}


/**************************
 Navigation styles
**************************/
@media (min-width: 992px) {
    .nav-link {
        font-size: 1.25rem;

        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/** Remove visited state styling for navigation links */
a.nav-link:visited {
    color: inherit;
}

/**************************
 HERO Section
**************************/
.hero-bg-image {
    background-image: url("/public/images/hero-honey-plate.jpg");
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    max-height: 1200px;
    min-height: 600px;

    @media screen and (min-width: 768px) {
        background-position: bottom;
    }
}

/**************************
Image classes
**************************/
.octagon-img {
    mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgzIiBoZWlnaHQ9Ijg2OCIgdmlld0JveD0iMCAwIDk4MyA4NjgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05NzQuMTc5IDQ2NEM5ODQuODk3IDQ0NS40MzYgOTg0Ljg5NyA0MjIuNTY0IDk3NC4xNzkgNDA0TDc1OC44MjEgMzAuOTg3M0M3NDguMTAzIDEyLjQyMzMgNzI4LjI5NSAwLjk4NzMwNSA3MDYuODU5IDAuOTg3MzA1SDI3Ni4xNDFDMjU0LjcwNSAwLjk4NzMwNSAyMzQuODk3IDEyLjQyMzIgMjI0LjE3OSAzMC45ODczTDguODIwNTEgNDA0Qy0xLjg5NzQ1IDQyMi41NjQgLTEuODk3NDYgNDQ1LjQzNiA4LjgyMDUxIDQ2NEwyMjQuMTc5IDgzNy4wMTNDMjM0Ljg5NyA4NTUuNTc3IDI1NC43MDUgODY3LjAxMyAyNzYuMTQxIDg2Ny4wMTNINzA2Ljg1OUM3MjguMjk1IDg2Ny4wMTMgNzQ4LjEwMyA4NTUuNTc3IDc1OC44MjEgODM3LjAxM0w5NzQuMTc5IDQ2NFoiIGZpbGw9IiNFRkVGRUYiLz4KPC9zdmc+Cg==') no-repeat center / contain;
    mask-size: contain;
    mask-repeat: no-repeat;
    display: inline-block;
}

/**************************
Gallery Section
**************************/
.gallery-header {
    background-image: url("/public/images/pcelar-radi.jpg");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    min-height: 400px;
}

.gallery-header > h1 {
    font-weight: 700;
    color: white;
    font-size: 3rem;
}

.faq-header {
    background-image: url("/public/images/faq-header.png");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    min-height: 400px;
}

.faq-header > h1 {
    font-weight: 700;
    color: white;
    font-size: 3rem;
}