/**
 * Header CSS Styles
 * Migrated from Perfmatters snippet #1-header.php
 *
 * Contains:
 * - Top header message styling
 * - Multicurrency dropdown styling
 * - Search icon styling
 * - Header tablet responsiveness (1000px - 1247px)
 */

/* Top Header Multicurrency */
.top-header-multicurrency select.aelia_cs_currencies {
    background-image: url("data:image/svg+xml,%3Csvg width='21' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5.379L20.621 2.5 10.5 12.621.379 2.5 2.5.379l8 8z' fill='%23FFFFFF' fill-rule='nonzero'/%3E%3C/svg%3E") !important;
}

.top-header-multicurrency {
    margin-block-start: 0px !important;
}

.blz-top-header-message {
    text-align: center !important;
}

@media (max-width: 767px) {
    .blz-top-header-message img {
        display: none;
    }
    .blz-top-header-message {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

/* Multicurrency Select Styling */
.top-header-multicurrency select {
    border: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-family: 'Josefin Sans' !important;
    padding-inline-end: 0px !important;
    padding: 0px !important;
    text-align: center;
    text-align-last: center;
}

.top-header-multicurrency option {
    text-align: left !important;
    background-color: #ffffff;
    color: #2D2D2D;
}

/* Search */
body .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    background-color: #fff !important;
}

/* Top Header */
.blz-top-header-help .kb-nav-dropdown-toggle-btn {
    display: none !important;
}

.blz-top-header-message {
    text-align: left !important;
}

/* Custom Currency Dropdown Arrow - Header Only (Exact Match) */

/* Hide the default select arrow - header only */
[data-row="top"] .currency_switch_form select.aelia_cs_currencies,
.site-header .currency_switch_form select.aelia_cs_currencies,
header .currency_switch_form select.aelia_cs_currencies {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: none !important;
    border: none;
    color: #ffffff;
    padding-right: 18px;
    cursor: pointer;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
}

/* Style the form wrapper - header only */
[data-row="top"] .currency_switch_form,
.site-header .currency_switch_form,
header .currency_switch_form {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* Add custom arrow icon - exact match to Help menu */
[data-row="top"] .currency_switch_form::after,
.site-header .currency_switch_form::after,
header .currency_switch_form::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 7px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.263604 0.263604C0.615076 -0.087868 1.18492 -0.0878679 1.5364 0.263604L6 4.72721L10.4636 0.263605C10.8151 -0.0878671 11.3849 -0.087867 11.7364 0.263605C12.0879 0.615077 12.0879 1.18493 11.7364 1.5364L6.6364 6.6364C6.46761 6.80518 6.23869 6.9 6 6.9C5.7613 6.9 5.53239 6.80518 5.3636 6.6364L0.263604 1.5364C-0.087868 1.18492 -0.0878679 0.615076 0.263604 0.263604Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

[data-row="top"] .currency_switch_form select.aelia_cs_currencies:focus,
.site-header .currency_switch_form select.aelia_cs_currencies:focus,
header .currency_switch_form select.aelia_cs_currencies:focus {
    outline: none;
}

.wp-block-kadence-navigation .menu-item-has-children>.kb-link-wrap>.kb-nav-link-content {
    padding-right: 0px !important;
}

.dgwt-wcas-search-wrapp.dgwt-wcas-layout-icon.dgwt-wcas-layout-icon-open .dgwt-wcas-search-icon {
    opacity: 1 !important;
}

.ct-toggle-close .ct-icon {
    fill: #2D2D2D !important;
}

/* ========================================
   EXTEND TABLET LAYOUT (1000px - 1247px)
   ======================================== */

@media (min-width: 1000px) and (max-width: 1247px) {

    /* Hide the entire desktop div container */
    header [data-device="desktop"],
    [data-device="desktop"] {
        display: none !important;
    }

    /* Show the entire mobile div container */
    header [data-device="mobile"],
    [data-device="mobile"],
    header [data-device="tablet"],
    [data-device="tablet"] {
        display: block !important;
    }

    /* Ensure mobile header middle row displays as flex */
    [data-device="mobile"] [data-row="middle"],
    [data-device="tablet"] [data-row="middle"] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* Show hamburger menu trigger */
    [data-device="mobile"] .ct-header-trigger,
    [data-device="tablet"] .ct-header-trigger,
    .ct-header-trigger {
        display: flex !important;
    }

    /* Show mobile toggle container */
    .ct-toggle-container {
        display: flex !important;
    }

    /* Ensure header icons are visible and aligned */
    [data-device="mobile"] [data-items],
    [data-device="tablet"] [data-items],
    .ct-header-items {
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
    }

}

/* Tablet: Off Canvas Menu Font size links */
@media (min-width: 1000px) and (max-width: 1247px) {
    .ct-panel .ct-menu-link,
    .ct-panel-inner .ct-menu-link {
        font-size: 16px !important;
        padding: 16px 0px !important;
        line-height: 18px !important;
    }
}

/* Fix: GreenShift block ID gsbp-73b791d has letter-spacing: -1px set in block attributes.
   The same block ID is reused across Shop By, Collections, and About Us mega-menus
   (due to block copying), causing the first item in each column to appear compressed.
   Task: 86ex3rjfw */
.gspb_text-id-gsbp-73b791d {
    letter-spacing: normal !important;
}

/* ==========================================================================
   Fix: Top-bar Kadence nav — "Book an Appointment" inherits 34px line-height
   from Blocksy --theme-line-height var, causing excessive gap between wrapped
   lines at mid-range desktop viewports (1248px–1350px). Task: 86ex39v58
   ========================================================================== */
.wp-block-kadence-navigation52953-cpt-id a.kb-nav-link-content {
    line-height: 1.3;
}
