﻿/* Site specific styles */

html, body { height: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; }
    body > main { flex: 1; }

body { background-color: black; color: white; }
body { font-family: 'Karla', sans-serif; color: #f8f8f8; background-color: #000; }
:root { scroll-padding-top: 140px; /* Adjust to match your navbar height */ }

h1, h2, h3, .navbar-brand { font-family: 'Caveat', cursive; font-weight: 400; letter-spacing: 1px; font-size: 3rem; color: #eac415; }
h4 { font-family: 'Caveat', cursive; font-weight: 400; letter-spacing: 1px; font-size: 2rem; color: #eac415; }
h1 { font-size: 4rem; }

.brand { font-weight: 700; color: #28a745; font-style: italic; }
button.brand { background-color: #28a745 !important; color: white !important; font-weight: 700; font-style: italic; border: none; box-shadow: none; }
    button.brand:hover { background-color: #218838 !important; }
    button.brand:focus,
    button.brand:active,
    button.brand:focus:active { background-color: #1e7e34; color: white; outline: none; box-shadow: none; border: none; }
button.btn.brand { background-image: none !important; box-shadow: none !important; border: none !important; }

a { color: #28a745; text-decoration: none; }
    a:hover { color: #218838; }
    a.text-white:hover { color: #ccc !important; }

.mt-huge { margin-top: 6rem; /* or adjust as needed */ }

@media (min-width: 768px) {
    .mt-huge { margin-top: 8rem; }
}

.logo-sm { max-height: 80px; }

/* Navigation */
#mainNav .navbar-brand img { transition: height 0.3s ease; height: 140px; }
#mainNav.navbar-shrink .navbar-brand img { height: 80px; }
@media (max-width: 768px) {
    #mainNav .navbar-brand img { height: 100px; }

    #mainNav.navbar-shrink .navbar-brand img { height: 50px; }
}

/* Banners */
.rotating-banner { margin-top: 140px; display: flex; align-items: center; justify-content: center; text-align: center; height: 500px; background-size: cover; background-position: center; background-repeat: no-repeat; transition: background-image 1s ease-in-out; position: relative; z-index: 1; }
    .rotating-banner .container { height: 100%; display: flex; flex-direction: column; justify-content: center; }

/* Page top scroll */
#scroll { position: fixed; right: 20px; bottom: 20px; cursor: pointer; width: 50px; height: 50px; background-color: #bbb; text-indent: -9999px; display: none; border-radius: 60px; opacity: 0; z-index: 1000; transition: opacity 0.3s ease; }
    #scroll.visible { display: block; opacity: 0.7; }
    #scroll span { position: absolute; top: 50%; left: 50%; margin-left: -8px; margin-top: -12px; height: 0; width: 0; border: 8px solid transparent; border-bottom-color: #ffffff; }
    #scroll:hover { opacity: 0.9; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; }

/* Cookie consent */
#cookie-banner { position: fixed; bottom: -60px; left: -500px; transform: translateY(-50%); width: 400px; background: rgba(34,37,41, 0.5); box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 5px; padding: 20px; z-index: 1001; transition: left 0.8s ease; }
    #cookie-banner.show { left: 20px; }
.cookie-content { font-family: sans-serif; font-size: 14px; }
    .cookie-content h4 { font-family: sans-serif; font-size: 20px; }
    .cookie-logo { float: right; height: 50px; }
.cookie-content h3 { margin-bottom: 20px; }

.button-group { display: flex; gap: 8px; align-items: center; }
.cookie-buttons { margin-top: 20px; display: flex; justify-content: space-between; }
    .cookie-buttons button,
    .cookie-link-button { background: #f8f9fa; color: #333; display: inline-block; font-size: 14px; font-family: inherit; line-height: 1.5; text-align: center; vertical-align: middle; padding: 8px 16px; border: 1px solid transparent; border-radius: 6px; cursor: pointer; text-decoration: none; height: 38px; /* Match Bootstrap-ish button height */ box-sizing: border-box; }        .cookie-link-button:hover { background: #eac415; color: #000; }
.cookie-link-button { background: #f8f9fa; color: #333; display: inline-block; }
#cookie-decline,
.cookie-link-button { background-color: #444 !important; color: #fff !important; border: none; }
    #cookie-decline:hover,
    .cookie-link-button:hover { background-color: #555 !important; }
.cookie-cert { margin-top: 12px; font-size: 12px; color: gray; }
#floating-cookie-button { position: fixed; bottom: 23px; left: 20px; padding: 10px 16px; background: #c00; color: white; font-size: 0.8rem; font-weight: bold; border: none; border-radius: 20px; z-index: 1000; cursor: pointer; }
