/* Header Font and Icons Update */

@font-face {
    font-family: 'TestSohne';
    src: url('../fonts/TestSohne-Leicht.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'TestSohne';
    src: url('../fonts/TestSohne-Kraftig.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

:root {
    --header-font-family: 'TestSohne', 'Instrument Sans', 'Sofia Sans Condensed', sans-serif;
    --global-font-family: 'TestSohne', 'Instrument Sans', sans-serif;
}

/* Global Typography Application */
/* Targeting a wide range of elements to ensure full coverage */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li,
span,
div,
input,
button,
textarea,
select,
label,
.elementor-widget-container,
.elementor-heading-title,
.woocommerce-loop-product__title,
.price,
.product-title,
.elementor-widget-heading .elementor-heading-title,
.woocommerce div.product .product_title,
.woocommerce-loop-product__title a,
.elementor-button,
.woocommerce-loop-category__title,
.widget-title,
th,
td,
blockquote {
    font-family: var(--global-font-family) !important;
}

/* Unified Header Container Styling */
.apollo-header,
.shop-header,
.about-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #fff;
    border-bottom: 1px solid #eee;
    /* var(--color-border) fallback */
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo Link wrapper styling */
.apollo-header-logo,
.shop-header-logo,
.about-header-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #000;
    gap: -5px;
    /* Negative gap to overlap */
    margin-top: -20px;
    /* Shift logo up significantly, may crop icon top */
    overflow: hidden;
    /* Allow cropping of icon top */
}

/* Nav Styling */
.apollo-header-nav,
.shop-header-nav,
.about-header-nav {
    display: flex;
    gap: 30px;
    align-items: center;
}

.apollo-header-nav a,
.shop-header-nav a,
.about-header-nav a {
    text-decoration: none;
    color: #111;
    /* var(--color-text) */
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color 0.2s;
}

.apollo-header-nav a:hover,
.shop-header-nav a:hover,
.about-header-nav a:hover {
    color: #666;
    /* var(--color-muted) */
}

/* Icon Container Styling */
.apollo-header-icons,
.shop-header-icons,
.about-header-icons {
    display: flex;
    gap: 15px;
}

.apollo-header-icons a,
.shop-header-icons a,
.about-header-icons a {
    display: flex;
    align-items: center;
}

.apollo-header-icons img,
.shop-header-icons img,
.about-header-icons img {
    width: 22px;
    height: 22px;
}

/* Specific Header Styling */
.main-navigation .menu-item a,
.elementor-button-text,
.header-group-action {
    font-family: var(--header-font-family) !important;
}

.main-navigation .menu-item a {
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    /* Match shop page header style */
}

/* Header Icons Styling */
.apollo-header-icon {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.apollo-header-icon:hover {
    opacity: 0.7;
}

.site-header-account a,
.site-header-cart a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    text-decoration: none !important;
    /* Remove underline from links */
}

/* Hide old icons if they persist via other classes */
.nutreko-icon-user::before,
.nutreko-icon-shopping-bag::before,
.site-header-cart .cart-contents::before {
    content: none !important;
}

/* Ensure container alignment */
.header-group-action {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Logo Styling - Standardized across pages */
/* Works for shop/about pages (.shop-header-logo, .about-header-logo) and homepage (.apollo-header-logo, .hfe-site-logo-img, .custom-logo) */

.shop-header-logo img,
.about-header-logo img,
.apollo-header-logo img,
.hfe-site-logo-img,
.custom-logo,
.custom-logo-link img {
    width: 90px !important;
    height: auto !important;
    max-width: none !important;
    /* Override potential theme limits */
    margin-bottom: -8px;
}

/* Logo Text Styling */
.shop-header-logo span,
.about-header-logo span,
.apollo-header-logo span,
.hfe-site-logo-container::before,
.nutreko-mobile-nav .custom-logo-link::before {
    font-family: 'TestSohne', 'Sofia Sans Condensed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    letter-spacing: -1px !important;
    line-height: 1;
    color: #000;
    margin-top: -15px !important;
    /* Increase overlap between icon and text */
}

/* Specific adjustment for homepage pseudo-element text to ensure it appears correctly */
.hfe-site-logo-container::before,
.nutreko-mobile-nav .custom-logo-link::before {
    content: "APOLLO";
    /* Ensure text is present if missing */
    display: block;
    margin-top: 5px;
    /* Adjust spacing below image if stacked, or adjust via flex if side-by-side */
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    /* Adjust text logo size */
    .hfe-site-logo-container::before,
    .shop-header-logo span,
    .about-header-logo span {
        font-size: 18px !important;
        letter-spacing: -0.5px !important;
    }

    .nutreko-mobile-nav .custom-logo-link::before {
        font-size: 18px !important;
        letter-spacing: -0.5px !important;
    }

    /* Adjust icon sizes and spacing */
    .apollo-header-icon {
        width: 20px;
        height: 20px;
    }

    .site-header-account a,
    .site-header-cart a {
        padding: 0 5px;
    }

    .header-group-action {
        gap: 8px;
    }
}

@media (max-width: 480px) {

    /* Further adjustments for very small screens */
    .hfe-site-logo-container::before {
        font-size: 16px !important;
        letter-spacing: -0.5px !important;
    }
}

/* Scroll Progress Indicator */
.scroll-progress-container {
    position: fixed;
    top: 79px;
    /* Adjust based on header height, approx 80px */
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 999;
}

.scroll-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00ffff, #0000ff, #4b0082);
    width: 0%;
    transition: width 0.1s ease-out;
    box-shadow: 0 0 10px #00ffff, 0 0 20px #0000ff;
}

/* Adjust top position if header height varies on mobile */
@media (max-width: 768px) {
    .scroll-progress-container {
        top: 60px;
        /* Approximate mobile header height */
    }
}