/*
 * Kastelo brand overrides on top of Bootstrap 5.3.
 *
 * The site is dark-only: neutral near-black surfaces (#0B0B0B) with the
 * Kastelo green (#06D6A0) as accent. The <html> element carries
 * data-bs-theme="dark" at all times; there is no light mode.
 */

:root,
[data-bs-theme="dark"] {
    /* Kastelo palette: green accent on neutral near-black surfaces */
    --ks-green: #06d6a0;
    --ks-green-bright: #3fdfb7;
    --ks-green-dark: #0f1c18;
    --ks-dark: #0b0b0b;
    --ks-dark-raised: #171717;
    --ks-dark-band: #131313;

    /* Bootstrap variable overrides */
    --bs-body-bg: var(--ks-dark);
    --bs-body-color: #d4d4d4;
    --bs-heading-color: #f5f5f5;
    --bs-primary: var(--ks-green);
    --bs-primary-rgb: 6, 214, 160;
    --bs-primary-bg-subtle: var(--ks-dark-raised);
    --bs-primary-border-subtle: rgba(6, 214, 160, 0.25);
    --bs-link-color: var(--ks-green);
    --bs-link-color-rgb: 6, 214, 160;
    --bs-link-hover-color: var(--ks-green-bright);
    --bs-link-hover-color-rgb: 63, 223, 183;
    --bs-border-color: rgba(6, 214, 160, 0.14);
    --bs-secondary-color: rgba(212, 212, 212, 0.72);
    --bs-tertiary-bg: var(--ks-dark-raised);
    --bs-secondary-bg: var(--ks-dark-raised);
}

/* Bootstrap 5.3.8 leaves .container-xxl full width below 1400px;
   cap it so content gets generous side margins. */
.container-xxl {
    max-width: 1080px;
    padding-inline: 1.5rem;
}

@media (min-width: 1400px) {
    .container-xxl {
        max-width: 1200px;
    }
}

/* Primary buttons: green with dark text */
.btn-primary {
    --bs-btn-color: var(--ks-dark);
    --bs-btn-bg: var(--ks-green);
    --bs-btn-border-color: var(--ks-green);
    --bs-btn-hover-color: var(--ks-dark);
    --bs-btn-hover-bg: var(--ks-green-bright);
    --bs-btn-hover-border-color: var(--ks-green-bright);
    --bs-btn-focus-shadow-rgb: 6, 214, 160;
    --bs-btn-active-color: var(--ks-dark);
    --bs-btn-active-bg: var(--ks-green-bright);
    --bs-btn-active-border-color: var(--ks-green-bright);
    --bs-btn-disabled-color: var(--ks-dark);
    --bs-btn-disabled-bg: var(--ks-green);
    --bs-btn-disabled-border-color: var(--ks-green);
    font-weight: 600;
}

/* Navbar: translucent dark green, blur, hairline separator */
.navbar {
    --bs-navbar-color: rgba(217, 229, 223, 0.8);
    --bs-navbar-hover-color: #ffffff;
    --bs-navbar-active-color: var(--ks-green);
    --bs-navbar-brand-color: #ffffff;
    --bs-navbar-toggler-border-color: rgba(6, 214, 160, 0.3);
    background-color: rgba(15, 28, 24, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(6, 214, 160, 0.12);
}

.navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(6, 214, 160, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Alternating section band */
.band {
    background-color: var(--ks-dark-band);
}

/* Hero: full-bleed background image with a darkening shade */
.hero {
    padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-shade {
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 11, 11, 0.30) 0%, rgba(11, 11, 11, 0.45) 70%, var(--ks-dark) 100%),
        linear-gradient(90deg, rgba(11, 11, 11, 0.78) 0%, rgba(11, 11, 11, 0.45) 60%, rgba(11, 11, 11, 0.22) 100%);
}

@media (max-width: 991.98px) {
    /* Text spans the full width on small screens: darken uniformly */
    .hero-shade {
        background: linear-gradient(180deg, rgba(11, 11, 11, 0.55) 0%, rgba(11, 11, 11, 0.78) 100%);
    }
}

/* Hero tagline: standalone accent line under the intro copy */
.tagline {
    font-weight: 600;
    color: var(--ks-green);
}

/* Footer: dark green surface, matching the navbar tint */
.site-footer {
    background-color: var(--ks-green-dark);
}

.footer-link {
    color: var(--bs-body-color);
    text-decoration: none;
}

.footer-link:hover,
.footer-link:focus {
    color: var(--ks-green);
}

/* Keep anchor targets clear of the sticky navbar */
section[id] {
    scroll-margin-top: 5rem;
}