/**
 * Header Variants
 * ===============
 * Page-type specific header overrides. Loaded AFTER global-header.css
 * to customize headers based on which template is active.
 * 
 * Part of Header CSS Architecture - see global-header.css for full diagram.
 * LOAD ORDER: global-header.css → navigation-header.css → header-variants.css
 * 
 * Page types:
 * - page-type-product-page: Blue header, smartbuild logo, navigation-header
 * - page-type-module-page: Blue header + blue nav bar
 * - page-type-pillar-page: White header with blue angled gradient, NO navigation-header
 * - page-type-addon-page: White header with blue angled gradient, NO navigation-header
 * - page-type-home-page: Blue header with animated grid
 * - page-type-news-*: White header with gray grid
 * - page-type-about-us-page: White header with gray grid
 * - page-type-connect-page: Blue header
 */

:root {
    --header-blue: #005491;
    --header-blue-light: #006997;
    --header-white: #FFFFFF;
    /* Triangle dimensions */
    --header-triangle-width: 720px;
    --header-triangle-height: 320px;
    /* How far left to shift the triangle (more negative = top corner moves left) */
    --header-triangle-left: -350px;
}

/* =============================================================================
   PRODUCT PAGE Header - Blue background (semi-transparent to show grid)
   ============================================================================= */

.page-type-product-page .site-header {
    background-color: transparent;
}

.page-type-product-page .navigation-header {
    background-color: transparent;
}

/* =============================================================================
   MODULE PAGE Header - Blue header + blue nav bar
   ============================================================================= */

.page-type-module-page .site-header {
    background-color: transparent;
}

.page-type-module-page .navigation-header {
    background-color: transparent;
}

/* Gradient mesh behind headers */
.page-type-module-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Covers Global Header (~80px) + Navigation Header (~60px) + buffer */
    height: 185px;
    /* Gradient: Solid blue at bottom (30%), fading to transparent way above (250%) */
    background: linear-gradient(0deg, #006997 30%, rgba(0, 105, 151, 0) 250%);
    z-index: 0;
    pointer-events: none;
}

/* Blue Backdrop for Home Page (Behind Grid) */
.page-type-home-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 900px;
    /* Matches Grid Height */
    background-color: #006997;
    z-index: 0;
    /* Behind Grid (6) */
    pointer-events: none;
}

/* Blue Backdrop for Product Page (Behind Grid) */
.page-type-product-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 750px;
    /* Matches Grid Height */
    background-color: #006997;
    z-index: 0;
    /* Behind Grid (6) */
    pointer-events: none;
}

/* =============================================================================
   SHARED VARIANT: Transparent Header
   Used by: Pillar, Addon, About Us, Plain (Terms/Privacy), News, News Roll
   Style: Transparent background, Hidden Nav Header, Blue Triangle Decoration
   ============================================================================= */

/* Clip overflow on transparent header pages to prevent the massive triangle from causing scroll */
/* REVERTED: Wrapper clip breaks sticky nav. Moved clip to .desktop-triangle-clipper below. */
/* .header-variant-transparent#wrapper {
    overflow: hidden;
} */


.header-variant-transparent .site-header {
    background-color: transparent;
}

.header-variant-transparent .navigation-header {
    display: none;
}



.header-variant-transparent .nav-dropdown-trigger {
    color: #4A5568;
}

.header-variant-transparent .nav-dropdown-trigger:hover {
    color: var(--header-blue);
}

/* Desktop: transparent-header pages use the color logo (mobile-logo),
   not the white desktop-logo, since there's no blue background behind it */
@media (min-width: 1025px) {
    .header-variant-transparent .header-logo-img.desktop-logo {
        display: none;
    }

    .header-variant-transparent .header-logo-img.mobile-logo {
        display: block;
        height: 28px;
        width: auto;
    }
}

/* =============================================================================
   CONNECT PAGE Header - Blue background, no nav-header
   ============================================================================= */

.page-type-connect-page .site-header {
    background-color: transparent;
}

/* Show navigation header (don't hide it) */
/* .page-type-connect-page .navigation-header {
    display: none;
} */

/* Nav colors fall back to global default (White) */

/* Blue Backdrop for Connect Page (Behind Grid - same as Home) */
.page-type-connect-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 900px;
    background-color: #006997;
    z-index: 0;
    pointer-events: none;
}

/* =============================================================================
   HOME PAGE Header - Blue background (semi-transparent to show grid)
   ============================================================================= */

.page-type-home-page .site-header {
    background-color: transparent;
}

/* =============================================================================
   Mobile Header - ALL Page Types
   ============================================================================= */

@media (max-width: 1024px) {

    /* Pillar/Addon/About/News Mobile: Solid Blue Header (mimics desktop gradient but contained) */
    /* Module & Product & Home Page Mobile: Solid Blue Header (mimics desktop gradient but contained) */
    .page-type-module-page .site-header,
    .page-type-product-page .site-header,
    .page-type-home-page .site-header {
        background-color: #006997 !important;
        position: sticky;
        top: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Pillar/Addon/About/News/Blog Mobile: White Sticky Header */
    .page-type-pillar-page .site-header,
    .page-type-addon-page .site-header,
    .page-type-about-us-page .site-header,
    .page-type-news-article .site-header,
    .page-type-blog .site-header,
    .page-type-news-article-roll .site-header,
    .page-type-no-content-404 .site-header {
        background-color: #FFFFFF !important;
        position: sticky;
        top: 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Ensure hamburger is visible on white background for these pages (since blue triangle is removed) */
    .page-type-pillar-page .hamburger-bar,
    .page-type-addon-page .hamburger-bar,
    .page-type-about-us-page .hamburger-bar,
    .page-type-news-article .hamburger-bar,
    .page-type-blog .hamburger-bar,
    .page-type-news-article-roll .hamburger-bar,
    .page-type-no-content-404 .hamburger-bar {
        background-color: #006997 !important;
    }

    /* Add Isometric Grid to Mobile Module/Product/Home Header (White Grid on Blue) */
    .page-type-module-page .site-header::after,
    .page-type-product-page .site-header::after,
    .page-type-home-page .site-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('/images/isometric-repeating-grid.svg');
        background-repeat: repeat-x;
        background-position: top center;
        opacity: 0.08;
        filter: saturate(0) brightness(10);
        /* White grid */
        z-index: -1;
        pointer-events: none;
    }

    /* Add Isometric Grid to Mobile Pillar/Addon/About/News/Blog Headers (Grey Grid on White) */
    .page-type-pillar-page .site-header::after,
    .page-type-addon-page .site-header::after,
    .page-type-about-us-page .site-header::after,
    .page-type-news-article .site-header::after,
    .page-type-blog .site-header::after,
    .page-type-news-article-roll .site-header::after,
    .page-type-no-content-404 .site-header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('/images/isometric-repeating-grid.svg');
        background-repeat: repeat-x;
        background-position: top center;
        opacity: 0.08;
        filter: none;
        /* Default Grey Grid */
        z-index: -1;
        pointer-events: none;
    }

    /* Module page needs transparency on nav header too if present */
    .page-type-module-page .navigation-header {
        background-color: transparent !important;
    }

    /* Hide navigation header on mobile for these page types to fix spacing */
    .page-type-addon-page .navigation-header,
    .page-type-news-article .navigation-header,
    .page-type-blog .navigation-header,
    .page-type-news-article-roll .navigation-header,
    .page-type-no-content-404 .navigation-header {
        display: none !important;
    }

    /* Remove the blue gradient bar (extra blue bit) on mobile module pages */
    .page-type-module-page::before,
    .page-type-pillar-page::before,
    .page-type-addon-page::before,
    .page-type-news-article::before,
    .page-type-blog::before,
    .page-type-news-article-roll::before,
    .page-type-no-content-404::before {
        display: none;
    }


    /* Ensure header-content has positioning context */
    .header-content {
        position: relative;
    }

    .mobile-menu-toggle {
        position: relative;
        z-index: 3;
    }

    .header-logo {
        position: relative;
        z-index: 1;
    }

    /* LOGO SIZING: Bifurcated Logic */

    /* Group A: Product Logos (Module, Pillar) - LARGER */
    .page-type-module-page .header-logo-img,
    .page-type-pillar-page .header-logo-img {
        height: 38px !important;
        max-height: 40px;
        width: auto;
    }

    /* Group B: SmartBuild Logo (Home, Product, Addon, News, Blog, About) - SMALLER */
    .page-type-home-page .header-logo-img,
    .page-type-product-page .header-logo-img,
    .page-type-addon-page .header-logo-img,
    .page-type-news-article .header-logo-img,
    .page-type-blog .header-logo-img,
    .page-type-about-us-page .header-logo-img,
    .page-type-news-article-roll .header-logo-img,
    .page-type-no-content-404 .header-logo-img {
        height: 24px !important;
        width: auto;
    }
}

@media (max-width: 600px) {
    /* Keep logo same size as above 600px - override global-header.css shrink */
    /* REMOVED override to allow global shrink logic (20px) to work on small screens */
    /* .header-logo-img {
        height: 36px;
    } */
}

/* =============================================================================
   Scroll Behavior (Header becomes solid with grid)
   ============================================================================= */

/* 
 * Group A: Transparent variants turn WHITE on scroll
 * Pages: Pillar, News, News Roll, Addon, About Us, Plain
 */
/* 
 * Group A: Transparent variants turn WHITE on scroll
 * Pages: Pillar, News, News Roll, Addon, About Us, Plain
 */
.header-scrolled .page-type-pillar-page .site-header,
.header-scrolled .page-type-news-article .site-header,
.header-scrolled .page-type-news-article-roll .site-header,
.header-scrolled .page-type-addon-page .site-header,
.header-scrolled .page-type-about-us-page .site-header,
.header-scrolled .page-type-plain .site-header,
.header-scrolled .page-type-no-content-404 .site-header {
    background-color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
}

/* Add isometric grid to the white header */
.header-scrolled .page-type-pillar-page .site-header::before,
.header-scrolled .page-type-news-article .site-header::before,
.header-scrolled .page-type-news-article-roll .site-header::before,
.header-scrolled .page-type-addon-page .site-header::before,
.header-scrolled .page-type-about-us-page .site-header::before,
.header-scrolled .page-type-plain .site-header::before,
.header-scrolled .page-type-no-content-404 .site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/isometric-repeating-grid.svg');
    background-repeat: repeat-x;
    background-position: top center;
    opacity: 0.08;
    /* Subtle grey grid on white */
    z-index: -1;
    pointer-events: none;
}

/* Desktop scrolled: fix hamburger bar color for white-bg pages */
@media (min-width: 1025px) {
    .header-scrolled .page-type-pillar-page .hamburger-bar,
    .header-scrolled .page-type-addon-page .hamburger-bar,
    .header-scrolled .page-type-about-us-page .hamburger-bar,
    .header-scrolled .page-type-news-article .hamburger-bar,
    .header-scrolled .page-type-blog .hamburger-bar,
    .header-scrolled .page-type-news-article-roll .hamburger-bar,
    .header-scrolled .page-type-no-content-404 .hamburger-bar {
        background-color: #006997 !important;
    }
}

/* 
 * Group B: Blue variants stay BLUE on scroll (but ensure grid is visible/contained)
 * Pages: Module, Home, Product
 */
.header-scrolled .page-type-module-page .site-header,
.header-scrolled .page-type-home-page .site-header,
.header-scrolled .page-type-product-page .site-header,
.header-scrolled .page-type-connect-page .site-header {
    background-color: #006997 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
}

/* Add isometric grid to the blue header (White grid) */
.header-scrolled .page-type-module-page .site-header::after,
.header-scrolled .page-type-home-page .site-header::after,
.header-scrolled .page-type-product-page .site-header::after,
.header-scrolled .page-type-connect-page .site-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/isometric-repeating-grid.svg');
    background-repeat: repeat-x;
    background-position: top center;
    opacity: 0.08;
    filter: saturate(0) brightness(10);
    /* White grid */
    z-index: -1;
    pointer-events: none;
}

/* =============================================================================
   Mobile Logo Tweaks
   ============================================================================= */
@media (max-width: 480px) {

    /* Force max-height 20px for ALL logo contexts on smallest sizes - must override 1024px 24px rule */
    .page-type-home-page .header-logo-img,
    .page-type-product-page .header-logo-img,
    .page-type-pillar-page .header-logo-img,
    .page-type-addon-page .header-logo-img,
    .page-type-news-article .header-logo-img,
    .page-type-blog .header-logo-img,
    .page-type-about-us-page .header-logo-img,
    .page-type-news-article-roll .header-logo-img,
    .page-type-no-content-404 .header-logo-img {
        height: 20px !important;
        max-height: 20px !important;
        width: auto !important;
    }
}