/*
 Theme Name:   TRISESTRI
 Theme URI:    http://trisestriloc.bg/
 Description:  Child theme for Astra
 Author:       Trisestri Dev
 Author URI:   http://trisestriloc.bg/
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  trisestri
 Domain Path:  /languages
 Tags:         custom, child-theme, astra
*/

/* Parent theme styles are enqueued via functions.php using wp_enqueue_style() */

/* ==========================================================================
   TRISESTRI — global design tokens
   Define once on :root so every component can reference them and a single
   change here cascades across the entire site.
   ========================================================================== */
:root {
        --trisestri-primary: rgb(72, 41, 34);       /* #482922 — brand brown */
        --trisestri-primary-rgb: 72, 41, 34;        /* raw RGB for alpha usage */
        --trisestri-on-primary: #ffffff;            /* text on primary bg */

        /* Override Astra's global palette with the brand colour.
           --ast-global-color-0 = primary, --ast-global-color-1 = hover/accent.
           This stylesheet loads after Astra's inline <style> so it wins. */
        --ast-global-color-0: var(--trisestri-primary);
        --ast-global-color-1: rgb(55, 30, 25);      /* slightly darker brown for hover */
        --ast-global-color-2: var(--trisestri-primary);
        --ast-global-color-3: var(--trisestri-primary);
}

/* Add custom TRISESTRI styles below */

@font-face {
  font-family: 'NeueHaasUnicaW1G';
  src: local('Neue Haas Unica W1G Regular'),
     local('NeueHaasUnicaW1G-Regular'),
     url('./assets/fonts/NeueHaasUnicaW1G-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'NeueHaasUnicaW1G';
  src: local('Neue Haas Unica W1G Bold'),
     local('NeueHaasUnicaW1G-Bold'),
     url('./assets/fonts/NeueHaasUnicaW1G-Bold.otf') format('opentype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'NeueHaasUnicaW1G';
  src: local('Neue Haas Unica W1G Black'),
     local('NeueHaasUnicaW1G-Black'),
     url('./assets/fonts/NeueHaasUnicaW1G-Black.otf') format('opentype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

body,
body button,
body input,
body select,
body optgroup,
body textarea,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body a,
body p,
body li,
body dt,
body dd,
body label,
body blockquote,
body cite,
body figcaption,
body small,
body th,
body td {
  font-family: 'NeueHaasUnicaW1G', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-weight: 400;
}

/* Wishlist heart icon — force a font that includes the ♡/♥ glyphs.
   The global body button rule above sets NeueHaasUnicaW1G !important, which
   the ::before pseudo-element inherits. NeueHaasUnicaW1G lacks the heart
   character so it renders as garbled text without this override. */
.trisestri-color-wishlist__button::before,
.trisestri-color-wishlist__button.is-active::before {
  font-family: Arial, 'Segoe UI Symbol', 'Apple Color Emoji', sans-serif !important;
}

.trisestri-catalog-card .trisestri-catalog-card__details h2.trisestri-catalog-card__title,
.trisestri-catalog-card .trisestri-catalog-card__details h2.trisestri-catalog-card__title > a.trisestri-catalog-card__title-link {
  font-size: 14px;
  color: var(--trisestri-primary);
  font-weight: 700;
}

/* ── WooCommerce sorting dropdown — nicer default look ── */
.woocommerce-ordering select.orderby {
    padding: 8px 36px 8px 12px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #f9f9f9;
    color: #333;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color 0.2s;
}

.woocommerce-ordering select.orderby:hover {
    border-color: #999;
}

.woocommerce-ordering select.orderby:focus {
    outline: none;
    border-color: #333;
}

* {
    letter-spacing: -.075em;
    text-transform: none;
}

.woocommerce-js ul.products li.product a img, .woocommerce-page ul.products li.product a img {
    margin-bottom: 5px;
}

.woocommerce-js ul.products li.product .price, .woocommerce-page ul.products li.product .price {
    line-height: 1;
    margin-bottom: 0;
    font-weight: 400;
    font-size: 12px;
}

.woocommerce-js ul.products li.product .woocommerce-loop-product__title, .woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    margin-bottom: 2px;
}

/* ── Header layout fix — menu to the right ─────────────────────────────────
   Astra Customizer emits:
       @media (min-width: 922px) { .ast-container { max-width: 1240px; } }
   That rule boxes the entire .ast-container, including the one inside
   .main-header-bar. When the header container is narrower than the bar
   itself the navigation section can't stretch to the actual right edge.
   We restore full-width only inside the header so the rest of the site
   layout (content, footer) keeps its 1240 px max-width intact.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 922px) {
    .main-header-bar .ast-container,
    .main-header-bar-wrap .ast-container,
    .site-header .ast-container {
        max-width: none !important;
    }
}

/* ── Max Mega Menu — full-width panel + stacking context ───────────────────
   1. MMM's JS reads data-panel-width=".ast-primary-header-bar" and sizes the
      panel automatically — no manual width/left overrides needed.
   2. We give the header a stacking context (position + z-index) so the mega
      panel always renders above hero images, sliders, and other page sections.
   3. We reinforce the panel colours here as a CSS safety net in case the
      MMM-generated inline CSS is cached or slow to update.
   ──────────────────────────────────────────────────────────────────────── */
@media (min-width: 922px) {
    /* Header stacking context — sits above hero/slider sections.
       position: sticky/fixed (set in hero-logo.css) already creates a stacking
       context, so we only need z-index here. Do NOT add position:relative —
       it would override sticky and break the header on non-front pages. */
    .site-header,
    #masthead {
        z-index: 100000;
    }

    /* ── Top-level menu bar — white background (all pages except front page) ── */
    #mega-menu-wrap-primary {
        background-color: #ffffff !important;
    }

    /* ── Front page — transparent menu bar so hero shows through ── */
    .home #mega-menu-wrap-primary {
        background-color: transparent !important;
    }

    /* ── Top-level menu items — primary colour + generous horizontal padding ── */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        color: var(--trisestri-primary) !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        background-color: transparent !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    /* ── Front page — transparent header: white links while scrolling down or at top.
       Only when scrolling UP (header-solid) do links revert to primary colour. ── */
    body.home:not(.header-solid) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        color: #ffffff !important;
    }

    /* ── Current / active page item — 2px underline that inherits the link colour ──
       currentColor = white on the transparent front page, primary on all other pages.
       The underline disappears naturally when the hover pill kicks in. ── */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link {
        box-shadow: inset 0 -2px 0 0 currentColor !important;
        font-weight: 700 !important;
    }

    /* ── Hover / active state — subtle filled pill in brand colour ── */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
        background-color: var(--trisestri-primary) !important;
        color: #ffffff !important;
        border-radius: 4px !important;
    }

    /* ── Drop-down / mega panel — white background, brand-primary text ── */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        background-color: #ffffff !important;
        z-index: 100000 !important;
        border-top: none !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
    }

    /* Category column headers (Clothing, Accessories, Decor, Music) */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu a.mega-menu-link {
        color: var(--trisestri-primary) !important;
        transition: color 0.15s ease, padding-left 0.15s ease !important;
    }

    /* Sub-items (Hoodies, Tshirts) */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu a.mega-menu-link {
        color: var(--trisestri-primary) !important;
    }

    /* Sub-item base — enough left padding to leave room for the accent border */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
        border-left: 2px solid transparent !important;
        padding-left: 8px !important;
        transition: border-color 0.15s ease, color 0.15s ease !important;
    }

    /* Sub-item hover — accent border slides in, no opacity fade */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover {
        border-left-color: var(--trisestri-primary) !important;
        background-color: transparent !important;
        opacity: 1 !important;
    }
}