/*
Theme Name: Blaze FSE
Description: Child theme of Ollie for Blaze Commerce redesign
Template: ollie
Version: 1.0.0
*/

/* Import parent theme styles */
@import url("../ollie/style.css");

/* ===== TRANSPARENT HEADER WITH BACKGROUND IMAGE INTEGRATION ===== */

/* Make header transparent and overlay on background - STICKY HEADER */
.blaze-header,
header,
.wp-site-header,
.wp-block-template-part header {
    background: transparent !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    transition: all 0.3s ease-in-out !important;
}

/* Remove any borders from header elements */
header,
.wp-site-header,
header .wp-block-group,
.wp-site-header .wp-block-group {
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Header container with 92px height as per Figma design */
.blaze-header .wp-block-group,
header .wp-block-group,
.wp-site-header .wp-block-group {
    min-height: 92px !important;
    height: 92px !important;
    padding: 0 0 24px 0 !important;
}

/* Ensure header itself has correct height */
.blaze-header,
header,
.wp-site-header {
    height: 92px !important;
    min-height: 92px !important;
}

/* ===== STICKY HEADER SCROLLED STATE ===== */

/* Header when scrolled - reduced height and solid background */
.blaze-header.scrolled,
header.scrolled,
.wp-site-header.scrolled,
.wp-block-template-part header.scrolled {
    background: #222222 !important;
    background-color: #222222 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

.blaze-header.scrolled .wp-block-group,
header.scrolled .wp-block-group,
.wp-site-header.scrolled .wp-block-group {
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 0 12px 0 !important;
    background: #222222 !important;
    background-color: #222222 !important;
}

.blaze-header.scrolled,
header.scrolled,
.wp-site-header.scrolled {
    height: 60px !important;
    min-height: 60px !important;
}

/* Body margin to account for fixed header - only push content down */
.wp-site-blocks {
    margin-top: 92px !important;
}

/* Responsive header height for mobile */
@media (max-width: 768px) {
    .wp-site-blocks {
        margin-top: 72px !important;
    }

    .blaze-header .wp-block-group,
    header .wp-block-group,
    .wp-site-header .wp-block-group {
        min-height: 72px !important;
        height: 72px !important;
        padding: 0 5px 16px 5px !important;
    }

    .blaze-header,
    header,
    .wp-site-header {
        height: 72px !important;
        min-height: 72px !important;
    }

    /* Mobile scrolled state - reduced height */
    .blaze-header.scrolled .wp-block-group,
    header.scrolled .wp-block-group,
    .wp-site-header.scrolled .wp-block-group {
        min-height: 50px !important;
        height: 50px !important;
        padding: 0 5px 8px 5px !important;
    }

    .blaze-header.scrolled,
    header.scrolled,
    .wp-site-header.scrolled {
        height: 50px !important;
        min-height: 50px !important;
    }
}

/* ===== HEADER NAVIGATION TEXT STYLING ===== */

/* Force all navigation links to be white - very specific selectors */
.wp-site-blocks header .wp-block-navigation .wp-block-navigation-item a,
.wp-site-blocks header .wp-block-navigation .wp-block-navigation-link a,
.wp-site-blocks header .wp-block-navigation a,
.wp-site-blocks header a,
header .wp-block-navigation .wp-block-navigation-item a,
header .wp-block-navigation .wp-block-navigation-link a,
header .wp-block-navigation a,
header a,
.wp-block-navigation .wp-block-navigation-item a,
.wp-block-navigation .wp-block-navigation-link a,
.wp-block-navigation a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Site logo and title */
.wp-site-blocks header .wp-block-site-title a,
.wp-site-blocks header .wp-block-site-logo a,
header .wp-block-site-title a,
header .wp-block-site-logo a {
    color: #ffffff !important;
}

/* Navigation links - all states */
.blaze-header .wp-block-navigation .wp-block-navigation-item a,
.blaze-header .wp-block-navigation .wp-block-navigation-link a,
.blaze-header .wp-block-navigation-item .wp-block-navigation-item__content,
.blaze-header .wp-block-navigation-link .wp-block-navigation-item__content {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.3s ease, opacity 0.3s ease !important;
}

/* Navigation hover states */
.blaze-header .wp-block-navigation .wp-block-navigation-item a:hover,
.blaze-header .wp-block-navigation .wp-block-navigation-link a:hover,
.blaze-header .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.blaze-header .wp-block-navigation-link:hover .wp-block-navigation-item__content {
    color: #ffffff !important;
    opacity: 0.8 !important;
}

/* Navigation active/current page states */
.blaze-header .wp-block-navigation .wp-block-navigation-item.current-menu-item a,
.blaze-header .wp-block-navigation .wp-block-navigation-link.current-menu-item a,
.blaze-header .wp-block-navigation .wp-block-navigation-item.current_page_item a,
.blaze-header .wp-block-navigation .wp-block-navigation-link.current_page_item a {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

/* Navigation focus states for accessibility */
.blaze-header .wp-block-navigation .wp-block-navigation-item a:focus,
.blaze-header .wp-block-navigation .wp-block-navigation-link a:focus {
    color: #ffffff !important;
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
}

/* Site title/logo links */
.blaze-header .wp-block-site-title a:hover,
.blaze-header .wp-block-site-logo a:hover {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

/* ===== MOBILE NAVIGATION STYLING ===== */

/* Mobile navigation background - set to black for white text visibility - AGGRESSIVE OVERRIDE */
.wp-block-navigation__responsive-container,
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-dialog,
.wp-block-navigation .wp-block-navigation__responsive-container,
dialog[aria-label="Menu"],
.wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* Force black background on all possible mobile menu containers */
.wp-block-navigation__responsive-container * {
    background-color: transparent !important;
}

.wp-block-navigation__responsive-container {
    background-color: #000000 !important;
}

/* Ensure mobile navigation text remains white */
.wp-block-navigation__responsive-container .wp-block-navigation-item a,
.wp-block-navigation__responsive-container .wp-block-navigation-link a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link a,
dialog[aria-label="Menu"] .wp-block-navigation-item a,
dialog[aria-label="Menu"] .wp-block-navigation-link a {
    color: #ffffff !important;
}

/* Mobile navigation close button - make white for visibility against black background */
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-close {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Close button SVG icon */
.wp-block-navigation__responsive-container-close svg,
.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Mobile navigation burger menu (open) button - make white for visibility */
.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-open {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Burger menu SVG icon */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open svg {
    fill: #ffffff !important;
    color: #ffffff !important;
}

/* Header button styling - orange background as per theme.json */
.blaze-header .wp-block-button .wp-block-button__link,
.blaze-header .wp-element-button {
    background-color: #ff5f29 !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    padding: 12px 24px !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    border: none !important;
    text-decoration: none !important;
}

/* ===== BACKGROUND IMAGE INTEGRATION ===== */

/* Apply background image to body only - extends behind header */
body {
    background-image: url('./background.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Account for header height in content positioning */
main {
    padding-top: 92px;
}

/* ===== SCROLLING BEHAVIOR ===== */

/* Header background when scrolled */
.blaze-header.scrolled {
    background: #222222 !important;
    position: fixed !important;
    transition: background-color 0.3s ease;
}

/* ===== COMPATIBILITY WITH EXISTING CONTENT ===== */

/* Ensure existing GenerateBlocks content works with new header */
.gb-container.gb-container-4d7de231.alignfull {
    margin-top: 0 !important;
    padding-top: 92px !important;
}

/* Remove any conflicting backgrounds from content containers */
.wp-block-group.alignfull:first-child {
    background: transparent !important;
}