/* =====================================================================
   Birch Creek Building - Main Stylesheet
   All values driven by CSS custom properties set in customizer-output.php
   ===================================================================== */

/* --- 1. RESET & BASE --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--body-size, 1rem);
    font-weight: var(--body-weight, 400);
    color: var(--light-text, #cccccc);
    line-height: var(--body-line-height, 1.8);
    background-color: var(--dark-bg, #000000);
}

h1, h2, h3, h4 {
    font-family: var(--font-heading, 'Inter', sans-serif);
    font-weight: var(--heading-weight, 700);
    text-transform: var(--heading-transform, uppercase);
    letter-spacing: var(--heading-spacing, 1px);
    color: var(--white-text, #ffffff);
}

h1 { font-size: var(--h1-size, 3rem); }
h2 { font-size: var(--h2-size, 2.5rem); }
h3 { font-size: var(--h3-size, 1.5rem); }
h4 { font-size: var(--h4-size, 1.25rem); }

p { margin-bottom: var(--p-spacing, 1.5rem); }

a {
    color: var(--link-color, #C5A059);
    text-decoration: none;
    transition: color 0.3s ease, background 0.3s ease;
}

a:hover {
    color: var(--link-hover, #d4b36a);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--img-radius, 4px);
}

/* --- 2. FIXED HEADER --- */
.bcb-header-wrapper {
    position: var(--header-position, fixed);
    top: 0;
    left: 0;
    width: 100%;
    background: var(--header-topbar-bg, #ffffff);
    z-index: 1000;
    box-shadow: var(--header-shadow, 0 2px 10px rgba(0, 0, 0, 0.1));
}

.bcb-top-bar {
    background: var(--header-topbar-bg, #ffffff);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--topbar-padding, 10px) 20px;
    position: relative;
}

.header-logo {
    height: var(--logo-height, 100px);
    width: auto;
}

.bcb-nav-bar {
    background: var(--header-nav-bg, #085a73);
    display: flex;
    justify-content: var(--nav-alignment, flex-end);
    align-items: center;
    padding: var(--navbar-padding-v, 0) 20px;
    gap: var(--navbar-gap, 30px);
}

.bcb-nav-bar a {
    color: var(--header-nav-text, #ffffff);
    padding: 15px 0;
    display: block;
    font-family: var(--font-nav, 'Inter', sans-serif);
    font-weight: var(--nav-weight, 500);
    font-size: var(--nav-size, 0.95rem);
    text-transform: var(--nav-transform, uppercase);
    letter-spacing: var(--nav-spacing, 0.5px);
}

.bcb-nav-bar a:hover {
    color: var(--header-nav-hover, #C5A059);
}

.bcb-nav-links {
    display: flex;
    align-items: center;
    gap: var(--navbar-gap, 30px);
}

.bcb-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
}

.bcb-menu-toggle .bar {
    width: 25px;
    height: 3px;
    background: var(--header-nav-text, white);
    transition: 0.3s;
}

.bcb-dropdown {
    position: relative;
}

.dropdown-icon {
    display: inline-block;
    transition: transform 0.3s;
}

.bcb-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--header-dropdown-bg, #074a5e);
    min-width: 250px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-top: 2px solid var(--accent, #C5A059);
    z-index: 1001;
}

.bcb-dropdown:hover .bcb-dropdown-menu {
    display: block;
}

.bcb-dropdown-menu a {
    display: block;
    padding: 12px 20px;
    color: var(--header-nav-text, white);
    white-space: nowrap;
}

.bcb-dropdown-menu a:hover {
    background: var(--header-dropdown-hover, rgba(0, 0, 0, 0.2));
    color: var(--header-nav-hover, #C5A059);
}

.btn-outline-nav {
    border: 2px solid var(--btn-border, #ffffff);
    padding: 8px 16px !important;
    border-radius: 4px;
    color: var(--btn-text, #ffffff) !important;
}

.btn-outline-nav:hover {
    background: var(--btn-hover-bg, #ffffff);
    color: var(--btn-hover-text, #085a73) !important;
}

.bcb-header-offset {
    height: var(--header-offset, 160px);
}

/* --- 3. PAGE BANNER --- */
.page-banner {
    background: var(--banner-bg, linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%));
    background-size: cover;
    background-position: center;
    padding: var(--banner-padding, 80px) 20px;
    text-align: var(--banner-align, center);
    border-bottom: var(--banner-border-width, 3px) solid var(--banner-border, #C5A059);
}

.page-banner h1 {
    font-size: 3.5rem;
    color: var(--banner-text, #ffffff);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- 4. MAIN CONTENT --- */
main {
    background: var(--dark-bg, #000000);
    color: var(--light-text, #cccccc);
}

.section-pad {
    padding: var(--section-padding, 60px) 20px;
    max-width: var(--content-max-width, 1400px);
    margin: 0 auto;
}

.content-grid {
    display: grid;
    grid-template-columns: var(--grid-columns, repeat(2, 1fr));
    gap: var(--grid-gap, 40px);
    align-items: center;
}

.service-text h3 {
    margin-bottom: 20px;
    color: var(--accent, #C5A059);
}

.service-image img {
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* --- 5. FOOTER --- */
.footer-cta {
    background: var(--footer-bg, #111111);
    color: var(--footer-text, #ffffff);
    text-align: center;
    padding: var(--footer-padding, 80px) 20px;
    border-top: 1px solid var(--footer-border, #333333);
}

.footer-cta h2 {
    margin-bottom: 10px;
    color: var(--footer-heading, #ffffff);
}

.footer-cta-sub {
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 900px;
    margin: 60px auto 0;
}

.footer-left {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-right {
    flex: 1;
    min-width: 200px;
    text-align: right;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-logo {
    height: var(--footer-logo-height, 55px);
    width: auto;
}

.footer-company-name {
    font-size: 1.1rem;
    letter-spacing: 1px;
    margin: 0;
    line-height: 1.4;
    color: var(--footer-heading, white);
}

.footer-instagram-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--footer-link, white) !important;
    text-decoration: none;
}

.footer-instagram-link:hover {
    color: var(--footer-link-hover, #C5A059) !important;
}

.footer-instagram-link .instagram-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
}

.instagram-text {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 1.55rem;
}

.footer-address {
    margin-top: 5px;
}

.footer-address p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--footer-text, #ffffff);
}

.footer-owner-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent, #C5A059) !important;
    margin-bottom: 2px !important;
}

.footer-owner-title {
    font-style: italic;
    margin-bottom: 8px !important;
    font-size: 0.9rem;
}

.footer-contact-item {
    margin: 3px 0 !important;
}

.footer-contact-item a {
    color: var(--footer-link, white);
}

.footer-contact-item a:hover {
    color: var(--footer-link-hover, #C5A059);
}

/* Footer Widgets */
.footer-widgets {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 60px auto 0;
    justify-content: center;
    text-align: left;
}

.footer-widget-col {
    flex: 1;
    min-width: 200px;
}

.footer-widget-col .widget-title {
    font-size: 1rem;
    color: var(--accent, #C5A059);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-widget-col .widget {
    margin-bottom: 20px;
}

/* Footer Copyright */
.footer-copyright {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--footer-border, #333333);
}

.footer-copyright p {
    font-size: 0.85rem;
    color: var(--light-text, #cccccc);
    margin: 0;
}

/* --- 6. SOCIAL ICONS --- */
.bcb-social-icons {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bcb-social-header {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.bcb-social-footer {
    margin-top: 10px;
}

.bcb-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--social-color, #ffffff) !important;
    transition: color 0.3s ease, transform 0.3s ease;
}

.bcb-social-link svg {
    width: var(--social-size, 24px);
    height: var(--social-size, 24px);
}

.bcb-social-link:hover {
    color: var(--social-hover, #C5A059) !important;
    transform: scale(1.15);
}

/* --- 7. STICKY CONTACT BUTTON --- */
.sticky-contact-btn {
    position: fixed;
    bottom: 30px;
    left: var(--sticky-left, auto);
    right: var(--sticky-right, 30px);
    background: var(--sticky-bg, #0a6c8a);
    color: var(--sticky-text, white) !important;
    padding: 12px 20px;
    border-radius: var(--sticky-radius, 50px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 999;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none !important;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sticky-contact-btn:hover {
    background: var(--sticky-hover, #085a73);
    transform: scale(1.05);
    color: var(--sticky-text, white) !important;
}

.sticky-contact-btn svg {
    width: 22px;
    height: 22px;
}

/* --- 8. SCROLL TO TOP BUTTON --- */
.bcb-scroll-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: var(--stt-size, 45px);
    height: var(--stt-size, 45px);
    background: var(--stt-bg, #C5A059);
    color: var(--stt-color, #ffffff);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateY(20px);
}

.bcb-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.bcb-scroll-top:hover {
    transform: scale(1.1) translateY(0);
}

.bcb-scroll-top svg {
    width: 24px;
    height: 24px;
}

/* --- 9. RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    .bcb-header-wrapper {
        position: static !important;
    }

    .bcb-header-offset {
        height: 0 !important;
    }

    .bcb-nav-bar {
        flex-wrap: wrap;
        padding: 15px 15px;
        justify-content: flex-end;
    }

    .header-logo {
        height: var(--logo-height-mobile, 90px);
    }

    .bcb-menu-toggle {
        display: flex;
        order: 2;
        margin-left: auto;
    }

    .bcb-nav-links {
        display: block;
        width: 100%;
        background: var(--header-mobile-bg, #085a73);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        order: 3;
        text-align: center;
    }

    .bcb-nav-links.is-open {
        max-height: 1000px;
        margin-top: 15px;
    }

    .bcb-nav-bar a {
        display: block;
        padding: 15px 10px;
        margin: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .bcb-dropdown {
        display: block;
        width: 100%;
    }

    .bcb-dropdown-menu {
        display: none;
        position: static;
        min-width: 100%;
        width: 100%;
        box-shadow: none;
        border-top: none;
        background: var(--header-dropdown-bg, #074a5e);
        transform: none;
        left: 0;
        text-align: center;
    }

    .bcb-dropdown.is-open .bcb-dropdown-menu {
        display: block;
    }

    .bcb-dropdown-menu a {
        padding: 15px 20px;
        text-align: center;
        white-space: normal;
        word-wrap: break-word;
    }

    .bcb-dropdown:hover .dropdown-icon {
        transform: none;
    }

    .bcb-dropdown.is-open .dropdown-icon {
        transform: rotate(90deg);
    }

    .page-banner h1 {
        font-size: 2.5rem;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--grid-gap, 40px);
    }

    .footer-grid {
        flex-direction: column;
        text-align: center;
    }

    .footer-left, .footer-right {
        width: 100%;
        text-align: center;
        align-items: center;
    }

    .footer-brand {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    .footer-logo {
        margin: 0 auto;
        height: 45px;
    }

    .footer-instagram-link {
        justify-content: center;
    }

    .footer-right {
        text-align: center;
    }

    .footer-cta {
        padding: 40px 15px;
    }

    .footer-cta h2 {
        font-size: var(--h2-mobile, 1.5rem);
    }

    .footer-widgets {
        flex-direction: column;
        text-align: center;
    }

    .bcb-social-icons {
        justify-content: center;
    }

    .bcb-social-header {
        position: static;
        transform: none;
        margin-top: 10px;
        justify-content: center;
    }

    .sticky-contact-btn {
        bottom: 20px;
        right: 20px;
        left: auto;
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    .bcb-scroll-top {
        bottom: 20px;
        left: 20px;
    }
}

@media (max-width: 600px) {
    h1 { font-size: var(--h1-mobile, 2rem); }
    h2 { font-size: var(--h2-mobile, 1.5rem); }
    h3 { font-size: var(--h3-mobile, 1.25rem); }

    .page-banner {
        padding: var(--banner-padding-mobile, 40px) 15px;
    }

    .section-pad {
        padding: var(--section-padding-mobile, 40px) 15px;
    }

    .sticky-contact-btn svg {
        width: 18px;
        height: 18px;
    }

    .footer-instagram-link .instagram-icon {
        width: 36px;
        height: 36px;
    }

    .instagram-text {
        font-size: 1.2rem;
    }
}

/* =====================================================================
   10. ANNOUNCEMENT BAR
   ===================================================================== */
.bcb-announcement-bar {
    background: var(--announce-bg, #C5A059);
    color: var(--announce-text, #ffffff);
    font-size: var(--announce-font-size, 14px);
    padding: var(--announce-padding, 10px) 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 1001;
    border-bottom: 1px solid var(--announce-border, #b08d3e);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.bcb-announce-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.bcb-announce-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.bcb-announce-link {
    color: var(--announce-link, #ffffff) !important;
    text-decoration: underline;
    font-weight: 600;
}

.bcb-announce-link:hover {
    color: var(--announce-link-hover, #1a1a1a) !important;
}

.bcb-announce-close {
    background: none;
    border: none;
    color: var(--announce-close, #ffffff);
    font-size: 20px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.bcb-announce-close:hover {
    opacity: 1;
}

.bcb-announcement-bar.bcb-announce-dismissed {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

@media (max-width: 768px) {
    .bcb-announce-hide-mobile {
        display: none !important;
    }
}

/* =====================================================================
   11. BREADCRUMBS
   ===================================================================== */
.bcb-breadcrumbs {
    background: var(--bc-bg, #111111);
    padding: var(--bc-padding, 12px) 20px;
    font-size: var(--bc-font-size, 0.85rem);
    color: var(--bc-text, #888888);
    border-bottom: 1px solid var(--dark-border, #333333);
}

.bcb-breadcrumbs-inner {
    max-width: var(--content-max-width, 1400px);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.bcb-breadcrumbs a {
    color: var(--bc-link, #cccccc);
    transition: color 0.2s;
}

.bcb-breadcrumbs a:hover {
    color: var(--bc-hover, #C5A059);
}

.bcb-bc-sep {
    color: var(--bc-separator-color, #555555);
    margin: 0 2px;
}

.bcb-bc-current {
    color: var(--bc-current, #ffffff);
    font-weight: 500;
}

/* =====================================================================
   12. DARK MODE TOGGLE
   ===================================================================== */
.bcb-top-bar-right {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
}

.bcb-dark-mode-toggle {
    background: none;
    border: 2px solid var(--dark-border, #333333);
    color: var(--light-text, #cccccc);
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.bcb-dark-mode-toggle:hover {
    border-color: var(--accent, #C5A059);
    color: var(--accent, #C5A059);
}

.bcb-dm-icon-light {
    display: none;
}

[data-theme='light'] .bcb-dm-icon-dark {
    display: none;
}

[data-theme='light'] .bcb-dm-icon-light {
    display: inline-flex;
}

/* =====================================================================
   13. TRANSPARENT HEADER
   ===================================================================== */
.bcb-header-transparent {
    background: transparent !important;
    box-shadow: none !important;
}

.bcb-header-transparent .bcb-top-bar {
    background: transparent !important;
}

.bcb-header-transparent.bcb-header-scrolled {
    background: var(--header-topbar-bg, #ffffff) !important;
    box-shadow: var(--header-shadow, 0 2px 10px rgba(0, 0, 0, 0.1)) !important;
}

/* Active nav link */
.bcb-nav-bar a.active {
    color: var(--nav-active-color, #C5A059);
}

/* =====================================================================
   14. GLOBAL BUTTONS
   ===================================================================== */
.bcb-btn {
    display: inline-block;
    padding: var(--gbtn-padding-v, 12px) var(--gbtn-padding-h, 24px);
    border-radius: var(--gbtn-radius, 4px);
    font-size: var(--gbtn-font-size, 1rem);
    font-weight: var(--gbtn-font-weight, 600);
    text-transform: var(--gbtn-transform, uppercase);
    letter-spacing: var(--gbtn-letter-spacing, 1px);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all var(--transition-speed, 300ms) ease;
    text-align: center;
    line-height: 1.4;
}

.bcb-btn-primary {
    background: var(--gbtn-primary-bg, #C5A059);
    color: var(--gbtn-primary-text, #ffffff) !important;
    border-color: var(--gbtn-primary-border, #C5A059);
}

.bcb-btn-primary:hover {
    background: var(--gbtn-primary-hover-bg, #b08d3e);
    color: var(--gbtn-primary-hover-text, #ffffff) !important;
}

.bcb-btn-secondary {
    background: var(--gbtn-secondary-bg, transparent);
    color: var(--gbtn-secondary-text, #C5A059) !important;
    border-color: var(--gbtn-secondary-border, #C5A059);
}

.bcb-btn-secondary:hover {
    background: var(--gbtn-secondary-hover-bg, #C5A059);
    color: var(--gbtn-secondary-hover-text, #ffffff) !important;
}

/* =====================================================================
   15. BLOG CARDS / ARCHIVE GRID
   ===================================================================== */
.bcb-archive-grid {
    display: grid;
    grid-template-columns: var(--archive-columns, repeat(3, 1fr));
    gap: var(--archive-gap, 30px);
    max-width: var(--content-max-width, 1400px);
    margin: 0 auto;
    padding: var(--section-padding, 60px) var(--container-padding, 20px);
}

.bcb-card {
    background: var(--card-bg, #1a1a1a);
    border: 1px solid var(--card-border, #333333);
    border-radius: var(--card-radius, 8px);
    overflow: hidden;
    transition: border-color var(--transition-speed, 300ms) ease, transform var(--transition-speed, 300ms) ease;
}

.bcb-card:hover {
    border-color: var(--card-hover-border, #C5A059);
    transform: translateY(-4px);
}

.bcb-card-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 0;
}

.bcb-card-body {
    padding: var(--card-padding, 20px);
}

.bcb-card-title {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: var(--card-heading, #ffffff);
}

.bcb-card-title a {
    color: var(--card-heading, #ffffff);
}

.bcb-card-title a:hover {
    color: var(--accent, #C5A059);
}

.bcb-card-meta {
    font-size: 0.85rem;
    color: var(--card-meta, #888888);
    margin-bottom: 12px;
}

.bcb-card-meta a {
    color: var(--card-meta, #888888);
}

.bcb-card-meta a:hover {
    color: var(--accent, #C5A059);
}

.bcb-card-excerpt {
    color: var(--card-text, #cccccc);
    font-size: 0.95rem;
    line-height: 1.6;
}

.bcb-card-footer {
    padding: 0 var(--card-padding, 20px) var(--card-padding, 20px);
}

.bcb-read-more {
    color: var(--accent, #C5A059) !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bcb-read-more:hover {
    color: var(--link-hover, #d4b36a) !important;
}

/* Pagination */
.bcb-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 40px 20px;
}

.bcb-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: var(--dark-card, #1a1a1a);
    color: var(--light-text, #cccccc);
    border: 1px solid var(--dark-border, #333333);
    border-radius: var(--global-radius, 4px);
    font-weight: 500;
    transition: all 0.2s;
}

.bcb-pagination .page-numbers.current,
.bcb-pagination .page-numbers:hover {
    background: var(--accent, #C5A059);
    color: #ffffff;
    border-color: var(--accent, #C5A059);
}

@media (max-width: 768px) {
    .bcb-archive-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   16. COOKIE CONSENT
   ===================================================================== */
.bcb-cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--cookie-bg, #1a1a1a);
    color: var(--cookie-text, #ffffff);
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease;
}

.bcb-cookie-bottom { bottom: 0; }
.bcb-cookie-top { top: 0; }

.bcb-cookie-inner {
    max-width: var(--content-max-width, 1400px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.bcb-cookie-message {
    flex: 1;
    margin: 0 !important;
    font-size: 0.9rem;
    line-height: 1.5;
    min-width: 200px;
}

.bcb-cookie-policy-link {
    color: var(--cookie-link, #C5A059) !important;
    text-decoration: underline;
}

.bcb-cookie-buttons {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.bcb-cookie-accept {
    background: var(--cookie-btn-bg, #C5A059);
    color: var(--cookie-btn-text, #ffffff);
    border: none;
    padding: 10px 24px;
    border-radius: var(--global-radius, 4px);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}

.bcb-cookie-accept:hover { opacity: 0.85; }

.bcb-cookie-decline {
    background: var(--cookie-decline-bg, transparent);
    color: var(--cookie-decline-text, #cccccc);
    border: 1px solid var(--dark-border, #333333);
    padding: 10px 24px;
    border-radius: var(--global-radius, 4px);
    cursor: pointer;
    font-size: 0.9rem;
    transition: opacity 0.2s;
}

.bcb-cookie-decline:hover { opacity: 0.7; }

@media (max-width: 600px) {
    .bcb-cookie-inner {
        flex-direction: column;
        text-align: center;
    }
    .bcb-cookie-buttons {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   17. LOADING SCREEN
   ===================================================================== */
.bcb-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--loading-bg, #000000);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    transition: opacity var(--loading-fade, 400ms) ease;
}

.bcb-loading-screen.bcb-loading-done {
    opacity: 0;
    pointer-events: none;
}

.bcb-loading-logo {
    max-height: 80px;
    width: auto;
}

.bcb-loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--loading-color, #C5A059);
    border-radius: 50%;
    animation: bcb-spin 0.8s linear infinite;
}

@keyframes bcb-spin {
    to { transform: rotate(360deg); }
}

.bcb-loader-dots {
    display: flex;
    gap: 8px;
}

.bcb-loader-dots span {
    width: 10px;
    height: 10px;
    background: var(--loading-color, #C5A059);
    border-radius: 50%;
    animation: bcb-bounce 1.4s ease-in-out infinite both;
}

.bcb-loader-dots span:nth-child(2) { animation-delay: 0.16s; }
.bcb-loader-dots span:nth-child(3) { animation-delay: 0.32s; }

@keyframes bcb-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

.bcb-loader-pulse {
    width: 40px;
    height: 40px;
    background: var(--loading-color, #C5A059);
    border-radius: 50%;
    animation: bcb-pulse 1.2s ease-in-out infinite;
}

@keyframes bcb-pulse {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.bcb-loader-bar {
    width: 200px;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.bcb-loader-bar div {
    width: 40%;
    height: 100%;
    background: var(--loading-color, #C5A059);
    border-radius: 3px;
    animation: bcb-bar 1.2s ease-in-out infinite;
}

@keyframes bcb-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* =====================================================================
   18. FORMS
   ===================================================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
textarea,
select {
    background: var(--input-bg, #111111);
    color: var(--input-text, #ffffff);
    border: var(--input-border-width, 1px) solid var(--input-border, #333333);
    border-radius: var(--input-radius, 4px);
    padding: var(--input-padding, 12px);
    font-size: var(--input-font-size, 1rem);
    font-family: var(--font-body, 'Inter', sans-serif);
    width: 100%;
    transition: border-color var(--transition-speed, 300ms) ease, box-shadow var(--transition-speed, 300ms) ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--input-focus, #C5A059);
    box-shadow: 0 0 0 3px var(--input-focus-glow, rgba(197, 160, 89, 0.2));
}

input::placeholder,
textarea::placeholder {
    color: var(--input-placeholder, #666666);
}

label {
    color: var(--label-color, #cccccc);
    font-size: var(--label-font-size, 0.9rem);
    font-weight: var(--label-weight, 600);
    display: block;
    margin-bottom: 6px;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* =====================================================================
   19. TABLES
   ===================================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--table-bg, #000000);
    border: 1px solid var(--table-border, #333333);
    border-radius: var(--table-radius, 4px);
    overflow: hidden;
    margin-bottom: var(--component-margin, 30px);
}

th {
    background: var(--table-header-bg, #1a1a1a);
    color: var(--table-header-text, #ffffff);
    font-weight: 600;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 2px solid var(--table-border, #333333);
}

td {
    padding: 10px 16px;
    color: var(--table-text, #cccccc);
    border-bottom: 1px solid var(--table-border, #333333);
}

tr:nth-child(even) td {
    background: var(--table-alt-bg, #0d0d0d);
}

tr:hover td {
    background: var(--table-hover-bg, #1a1a1a);
}

/* =====================================================================
   20. BLOCKQUOTES
   ===================================================================== */
blockquote {
    background: var(--bq-bg, #111111);
    border-left: var(--bq-border-width, 4px) solid var(--bq-border-color, #C5A059);
    padding: var(--bq-padding, 20px);
    margin: var(--component-margin, 30px) 0;
    border-radius: var(--bq-radius, 0px);
    font-size: var(--bq-font-size, 1.1rem);
    color: var(--bq-text, #cccccc);
    font-style: italic;
    position: relative;
}

blockquote::before {
    content: '\201C';
    font-size: 3rem;
    color: var(--bq-quote-color, #C5A059);
    position: absolute;
    top: -5px;
    left: 10px;
    line-height: 1;
    opacity: 0.3;
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* =====================================================================
   21. CODE BLOCKS
   ===================================================================== */
pre {
    background: var(--code-bg, #0d0d0d);
    color: var(--code-text, #e0e0e0);
    border: 1px solid var(--code-border, #333333);
    border-radius: var(--code-radius, 6px);
    padding: var(--code-padding, 16px);
    font-family: var(--code-font, 'Fira Code', 'Consolas', monospace);
    font-size: var(--code-font-size, 0.9rem);
    overflow-x: auto;
    margin: var(--component-margin, 30px) 0;
    line-height: 1.6;
}

code {
    font-family: var(--code-font, 'Fira Code', 'Consolas', monospace);
    font-size: var(--code-font-size, 0.9rem);
}

:not(pre) > code {
    background: var(--inline-bg, #1a1a1a);
    color: var(--inline-text, #C5A059);
    padding: 2px 6px;
    border-radius: 3px;
}

/* =====================================================================
   22. LISTS
   ===================================================================== */
ul, ol {
    padding-left: var(--list-indent, 20px);
    margin-bottom: var(--component-margin, 30px);
}

li {
    margin-bottom: var(--list-spacing, 8px);
    color: var(--light-text, #cccccc);
}

ul li::marker {
    color: var(--list-marker, #C5A059);
}

ol li::marker {
    color: var(--list-marker, #C5A059);
    font-weight: 600;
}

/* =====================================================================
   23. HORIZONTAL RULE
   ===================================================================== */
hr {
    border: none;
    height: var(--hr-thickness, 1px);
    background: var(--hr-color, #333333);
    margin: var(--hr-margin, 30px) auto;
    width: var(--hr-width, 100%);
}

/* =====================================================================
   24. SIDEBAR
   ===================================================================== */
.bcb-layout-with-sidebar {
    display: flex;
    gap: var(--sidebar-gap, 40px);
    max-width: var(--content-max-width, 1400px);
    margin: 0 auto;
    padding: var(--section-padding, 60px) var(--container-padding, 20px);
}

.bcb-main-content {
    flex: 1;
    min-width: 0;
}

.bcb-sidebar {
    width: var(--sidebar-width, 30%);
    flex-shrink: 0;
}

.bcb-sidebar .widget {
    background: var(--sidebar-bg, #1a1a1a);
    border: 1px solid var(--sidebar-border, #333333);
    border-radius: var(--sidebar-radius, 8px);
    padding: var(--sidebar-padding, 20px);
    margin-bottom: 20px;
}

.bcb-sidebar .widget-title {
    color: var(--sidebar-heading, #ffffff);
    font-size: 1rem;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sidebar-border, #333333);
}

.bcb-sidebar a {
    color: var(--sidebar-link, #C5A059);
}

.bcb-sidebar a:hover {
    color: var(--sidebar-link-hover, #d4b36a);
}

@media (max-width: 768px) {
    .bcb-layout-with-sidebar {
        flex-direction: column;
    }
    .bcb-sidebar {
        width: 100%;
    }
}

/* =====================================================================
   25. FOOTER EXTENDED
   ===================================================================== */
.footer-cta-btn-wrap {
    margin-bottom: 30px;
}

.footer-cta-btn {
    display: inline-block;
}

.footer-hours {
    margin-top: 15px;
    text-align: left;
}

.footer-hours h4 {
    font-size: 0.95rem;
    color: var(--accent, #C5A059);
    margin-bottom: 8px;
}

.footer-hours-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0 !important;
    padding: 4px 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.footer-hours-day {
    font-weight: 600;
    color: var(--footer-text, #ffffff);
}

.footer-hours-time {
    color: var(--light-text, #cccccc);
}

.footer-map {
    margin-top: 20px;
    border-radius: var(--global-radius, 4px);
    overflow: hidden;
}

.footer-map iframe {
    width: 100%;
    height: 200px;
    border: none;
    border-radius: var(--global-radius, 4px);
}

.footer-nav {
    max-width: var(--footer-max-width, 900px);
    margin: 30px auto 0;
    padding-top: 20px;
    border-top: 1px solid var(--footer-border, #333333);
}

.footer-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-nav-links li {
    margin: 0;
}

.footer-nav-links a {
    color: var(--footer-link, #ffffff);
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-nav-links a:hover {
    color: var(--footer-link-hover, #C5A059);
}

.footer-bottom {
    margin-top: 30px;
    padding: var(--footer-bottom-padding, 20px) 0 0;
    border-top: var(--footer-border-width, 1px) var(--footer-border-style, solid) var(--footer-border, #333333);
    background: var(--footer-bottom-bg, transparent);
}

.footer-bottom .footer-copyright p {
    font-size: var(--footer-bottom-font-size, 0.85rem);
    color: var(--footer-bottom-text, #888888);
    margin: 0;
}

.footer-bottom .footer-copyright a {
    color: var(--footer-bottom-link, #cccccc);
}

.footer-bottom .footer-copyright a:hover {
    color: var(--footer-bottom-hover, #C5A059);
}

.footer-instagram-link .instagram-icon {
    width: var(--footer-ig-icon-size, 54px);
    height: var(--footer-ig-icon-size, 54px);
}

.instagram-text {
    font-size: var(--footer-ig-text-size, 1.55rem);
}

/* =====================================================================
   26. SCROLL ANIMATIONS
   ===================================================================== */
.bcb-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--anim-duration, 600ms) var(--anim-easing, ease-out),
                transform var(--anim-duration, 600ms) var(--anim-easing, ease-out);
}

.bcb-animate.bcb-animated {
    opacity: 1;
    transform: translateY(0);
}

.bcb-animate-fade { opacity: 0; }
.bcb-animate-fade.bcb-animated { opacity: 1; }

.bcb-animate-slide-left {
    opacity: 0;
    transform: translateX(-30px);
}
.bcb-animate-slide-left.bcb-animated {
    opacity: 1;
    transform: translateX(0);
}

.bcb-animate-slide-right {
    opacity: 0;
    transform: translateX(30px);
}
.bcb-animate-slide-right.bcb-animated {
    opacity: 1;
    transform: translateX(0);
}

.bcb-animate-scale {
    opacity: 0;
    transform: scale(0.9);
}
.bcb-animate-scale.bcb-animated {
    opacity: 1;
    transform: scale(1);
}

/* =====================================================================
   27. 404 PAGE
   ===================================================================== */
.bcb-404-page {
    background: var(--e404-bg, #000000);
    color: var(--e404-text, #ffffff);
    text-align: center;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.bcb-404-page .bcb-btn {
    margin-top: 20px;
}

/* =====================================================================
   28. SECTION BACKGROUNDS
   ===================================================================== */
body {
    background-color: var(--main-bg, #000000);
}

.bcb-section-alt {
    background: var(--alt-section-bg, #0a0a0a);
}

.bcb-section-highlight {
    background: var(--highlight-bg, #111111);
}

.bcb-section-cta {
    background: var(--cta-section-bg, #1a1a1a);
}

@media (max-width: 768px) {
    .bcb-top-bar-right {
        position: static;
        transform: none;
        margin-top: 10px;
        justify-content: center;
    }

    .bcb-top-bar {
        flex-direction: column;
    }

    .bcb-breadcrumbs-inner {
        font-size: 0.8rem;
    }

    .footer-hours {
        text-align: center;
    }

    .footer-hours-row {
        justify-content: center;
        gap: 15px;
    }
}

/* =====================================================================
   29. FULLWIDTH PAGE TEMPLATE RESET
   Prevents theme broad selectors from breaking custom page HTML content.
   ===================================================================== */
.bcb-fullwidth-main {
    background: var(--dark-bg, #000000);
    color: var(--light-text, #cccccc);
}

/* Reset heading styles inside scoped homepage content */
.bcb-homepage h1,
.bcb-homepage h2,
.bcb-homepage h3,
.bcb-homepage h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    font-size: revert;
    margin: revert;
}

.bcb-homepage h1 {
    font-family: 'Poppins', sans-serif;
}

.bcb-homepage p {
    margin-bottom: 0;
}

.bcb-homepage a {
    text-decoration: none;
    transition: 0.3s;
}

.bcb-homepage img {
    border-radius: 0;
}

.bcb-homepage em {
    color: var(--accent, #C5A059);
    font-style: italic;
    font-family: 'Inter', sans-serif;
}