/**
 * Location: /assets/css/header.css
 * Purpose:
 * - Responsive header styling for desktop/tablet/mobile.
 * - Desktop: single-row middlebar (Left+Center+Right).
 * - Tablet/Mobile: wraps to 2 rows (Row1: Left+Right, Row2: Center full width).
 * - Tablet/Mobile: Offcanvas -> Logo order.
 * - Navbar always visible; centered on all devices.
 * - Endpoint blur line on non-home + non-blog-main pages (printed by PHP).
 * - Search bar (BRAND ORANGE): border 2px, radius 25px, button orange + white icon (no text).
 *
 * Related PHP:
 * - /template-parts/header/header.php
 *
 * Linkage/Loader:
 * - Enqueued by: /inc/features/header/header.php (frontend only).
 */

/* =============================
   Variables
============================= */
:root{
  --stm-brand-orange: #ff7a00;
}

/* =============================
   Base
============================= */
.stm-header{
  position: relative;
  background: #fff;
  z-index: 50;
}
.stm-header *{ box-sizing: border-box; }

/* Endpoint (clean line + subtle fade, NO blur filter) */
.stm-header__endpoint{
  height: 1px;
  background: rgba(0,0,0,0.12);
  opacity: 1;
  filter: none;            /* ✅ IMPORTANT: remove blur */
  position: relative;
}

.stm-header__endpoint::after{
  content: "";
  display: block;
  height: 10px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0));
  pointer-events: none;
}


/* =============================
   Topbar
============================= */
.stm-header .stm-topbar{
  border-bottom: 1px solid #e5e5e5;
  font-size: 12px;
  line-height: 1;
}
.stm-header .stm-topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
}
.stm-header .stm-topbar__menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.stm-header .stm-topbar__item{ margin: 0; padding: 0; }

.stm-header .stm-topbar__link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #222;
}
.stm-header .stm-topbar__link:hover{ color: #000; }

.stm-header .stm-topbar__icon{
  width: 18px;
  height: 18px;
  display: inline-block;
  background: var(--stm-topbar-icon) center/contain no-repeat;
  border-radius: 999px;
}

/* Left: icon only */
.stm-header .stm-topbar__link--left .stm-topbar__text{ display: none; }

/* Right: icon + text */
.stm-header .stm-topbar__text{
  font-size: 12px;
  color: #222;
}

@media (max-width: 1023px){
  .stm-header .stm-topbar.stm-topbar--hide-tablet{ display: none; }
}
@media (max-width: 767px){
  .stm-header .stm-topbar.stm-topbar--hide-mobi{ display: none; }
}

/* =============================
   Middlebar layout
============================= */
.stm-header .stm-middlebar{
  border-bottom: 1px solid #efefef;
}
.stm-header .stm-middlebar__inner{
  padding: 24px 0;
}
.stm-header .stm-middlebar__layout{
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap; /* desktop: single row */
}

/* columns (desktop) */
.stm-header .stm-middlebar__left{
  flex: 0 0 auto;
  min-width: 240px;
}
.stm-header .stm-middlebar__center{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
}
.stm-header .stm-middlebar__right{
  flex: 0 0 auto;
  min-width: 240px;
  display: flex;
  justify-content: flex-end;
}

/* Center wrap */
.stm-header .stm-middlebar__centerwrap{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Left content */
.stm-header .stm-mb-left{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Desktop requirement: Logo then Offcanvas */
.stm-header .stm-mb-left__logo{ order: 1; }
.stm-header .stm-mb-left__togglewrap{ order: 2; }

.stm-header .stm-logo-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.stm-header .stm-logo-link img{
  max-height: 42px;
  width: auto;
  height: auto;
  display: block;
}
.stm-header .stm-site-name{
  font-size: 18px;
  color: #111;
}

/* Actions */
.stm-header .stm-mb-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
}
.stm-header .stm-mb-action{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #111;
  padding: 8px 10px;
  border-radius: 10px;
}
.stm-header .stm-mb-action:hover{ background: rgba(0,0,0,0.04); }

.stm-header .stm-mb-action__icon{
  width: 18px;
  height: 18px;
  display: inline-block;
  background: var(--stm-mb-ico) center/contain no-repeat;
}
.stm-header .stm-mb-action__label{
  font-size: 12px;
  font-weight: 600;
}
.stm-header .stm-mb-action--mobi{ display: none; }

/* =============================
   Search (BRAND ORANGE)
   Desktop: 700px centered
============================= */
.stm-header .stm-mb-search{
  position: relative;
  width: 700px;      /* ✅ desktop fixed */
  max-width: 100%;
  margin: 0 auto;    /* ✅ centered */
}
.stm-header .stm-mb-search__inner{
  display: flex;
  align-items: center;
  width: 100%;
  border: 2px solid var(--stm-brand-orange);
  border-radius: 25px;
  overflow: hidden;
  background: #fff;
  min-height: 46px;
}

/* Category block (desktop) */
.stm-header .stm-mb-search__cat{
  flex: 0 0 210px;
  border-right: 2px solid rgba(255,122,0,0.22);
}
.stm-header .stm-mb-search__select{
  width: 100%;
  border: 0;
  outline: none;
  background: #fff;
  padding: 11px 44px 11px 12px;
  font-size: 13px;
  line-height: 1.2;
  height: 46px;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, #111 50%),
    linear-gradient(135deg, #111 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Input */
.stm-header .stm-mb-search__input{
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  padding: 12px 12px;
  font-size: 14px;
  height: 46px;
}

/* Button */
.stm-header .stm-mb-search__btn{
  flex: 0 0 auto;
  border: 0;
  background: var(--stm-brand-orange);
  color: #fff;
  padding: 0 16px;
  min-width: 56px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.stm-header .stm-mb-search__btn:hover{ opacity: 0.92; }

.stm-header .stm-mb-search__btnIcon{
  width: 18px;
  height: 18px;
  display: inline-block;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 104.472 10.03l4.249 4.249 1.414-1.414-4.249-4.249A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 4a6 6 0 104.472 10.03l4.249 4.249 1.414-1.414-4.249-4.249A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Live dropdown (kept) */
.stm-header .stm-mb-search__dropdown{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.10);
  overflow: hidden;
  z-index: 60;
}
.stm-header .stm-mb-search__dropdownHead{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid #f1f1f1;
}
.stm-header .stm-mb-search__close{
  border: 0;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.stm-header .stm-mb-search__results{
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

/* =============================
   Tablet + Mobile (<=1023px)
============================= */
@media (max-width: 1023px){
  .stm-header .stm-middlebar__inner{ padding: 22px 0; }

  .stm-header .stm-middlebar__layout{
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }

  /* Row1 */
  .stm-header .stm-middlebar__left{
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
  }
  .stm-header .stm-middlebar__right{
    flex: 0 0 auto;
    min-width: 0;
    order: 2;
  }

  /* Row2: search full width */
  .stm-header .stm-middlebar__center{
    flex: 0 0 100%;
    min-width: 0;
    order: 3;
    justify-content: stretch;
  }
  .stm-header .stm-middlebar__centerwrap{
    width: 100%;
    justify-content: stretch;
  }

  .stm-header .stm-mb-search{
    width: 100%;
    max-width: none;
  }

  /* Offcanvas -> Logo */
  .stm-header .stm-mb-left__togglewrap{ order: 1; }
  .stm-header .stm-mb-left__logo{ order: 2; }

  /* Actions: icon-only */
  .stm-header .stm-mb-action{ padding: 7px 9px; }
  .stm-header .stm-mb-action__icon{ width: 17px; height: 17px; }
  .stm-header .stm-mb-action__label{ display: none; }

  /* Category hidden */
  .stm-header .stm-mb-search__cat{ display: none; }

  /* Search height */
  .stm-header .stm-mb-search__inner{ min-height: 44px; }
  .stm-header .stm-mb-search__input{ height: 44px; font-size: 14px; }
  .stm-header .stm-mb-search__btn{ min-height: 44px; min-width: 52px; }

  /* Toggle boost (kept) */
  .stm-header .stm-mb-left__togglewrap button,
  .stm-header .stm-mb-left__togglewrap .stm-offcanvas-toggle,
  .stm-header .stm-mb-left__togglewrap .stm-oc-toggle{
    transform: scale(1.15);
    transform-origin: left center;
  }
}

@media (max-width: 767px){
  .stm-header .stm-middlebar__inner{ padding: 20px 0; }
  .stm-header .stm-logo-link img{ max-height: 36px; }

  .stm-header .stm-mb-action--mobi{ display: inline-flex; }
  .stm-header .stm-mb-actions{ gap: 8px; }

  .stm-header .stm-mb-left__togglewrap button,
  .stm-header .stm-mb-left__togglewrap .stm-offcanvas-toggle,
  .stm-header .stm-mb-left__togglewrap .stm-oc-toggle{
    transform: scale(1.18);
  }
}

/* =============================
   Navbar
============================= */
.stm-header .stm-navbar{
  background: #fff;
  border-bottom: 1px solid #efefef; /* ✅ navbar bottom line */
}
.stm-header .stm-navbar__inner{
  padding: 10px 0;
  display: flex;
  justify-content: center; /* ✅ forces nav area centered */
}

/* Keep menu visible (minimal, safe) */
.stm-header .stm-header-nav{
  display: flex !important;
  justify-content: center;
  width: 100%;
}

/* Menu UL */
.stm-header ul.stm-primary-menu,
.stm-header #stm-primary-menu{
  list-style: none;
  margin: 0 auto;
  padding: 6px 10px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 8px;

  overflow: hidden;
}

/* Links */
.stm-header ul.stm-primary-menu a,
.stm-header #stm-primary-menu a{
  text-decoration: none;
  color: #111;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 10px;
  border-radius: 10px;
  line-height: 1.1;
}
.stm-header ul.stm-primary-menu a:hover,
.stm-header #stm-primary-menu a:hover{
  background: rgba(0,0,0,0.04);
}

/* Tablet */
@media (max-width: 1023px){
  .stm-header .stm-navbar__inner{ padding: 8px 0; }

  .stm-header ul.stm-primary-menu,
  .stm-header #stm-primary-menu{
    gap: 5px;
    padding: 6px 8px;
  }

  .stm-header ul.stm-primary-menu a,
  .stm-header #stm-primary-menu a{
    font-size: 13px;
    padding: 8px 8px;
  }
}

/* Mobile */
@media (max-width: 767px){
  .stm-header ul.stm-primary-menu,
  .stm-header #stm-primary-menu{
    gap: 5px;
    padding: 6px 8px;
  }

  .stm-header ul.stm-primary-menu a,
  .stm-header #stm-primary-menu a{
    font-size: 13px;
    padding: 8px 8px;
  }
}

/* =========================================================
   DESKTOP LOCK (>=1024px)
========================================================= */
@media (min-width: 1024px){

  /* ✅ Header-only width variable (PERMANENT FIX)
     - Sets header boxed width to 1350px
     - Does NOT affect pages/blog/shop containers because it is scoped to .stm-header only */
  .stm-header{
    --stm-header-container: 1350px;
  }

  /* Do NOT add padding here (header-width module already adds padding on container) */
  .stm-header .stm-middlebar__inner{
    padding-left: 0;
    padding-right: 0;
  }

  /* Force grid on the LAYOUT wrapper */
  .stm-header .stm-middlebar__layout{
    display:grid !important;
    grid-template-columns: minmax(240px,1fr) 700px minmax(240px,1fr);
    align-items:center;
    column-gap:14px;
  }

  /* Make items fill their grid columns */
  .stm-header .stm-middlebar__left,
  .stm-header .stm-middlebar__right{
    width:100%;
    min-width:0;
  }

  /* Left content starts, right content ends */
  .stm-header .stm-middlebar__left{ justify-self:stretch; }
  .stm-header .stm-middlebar__right{ justify-self:stretch; }

  .stm-header .stm-middlebar__right{
    display:flex;
    justify-content:flex-end;
  }

  /* Center fixed and centered */
  .stm-header .stm-middlebar__center{
    width:700px;
    justify-self:center;
  }
  .stm-header .stm-middlebar__centerwrap{
    width:700px;
    justify-content:center;
  }

  /* Search exact size */
  .stm-header .stm-mb-search{
    width:700px;
    max-width:700px;
    margin:0 auto;
  }
}
@media (min-width: 1024px){
  .stm-header .custom-logo{
    max-height: 45px;
    width: auto;
    height: auto;
  }
}

/* Tablet + Mobile logo vertical fix */
@media (max-width: 1023px){
  .stm-header .stm-mb-left{ align-items: center; }
  .stm-header .stm-logo-link{ display: flex; align-items: center; }
  .stm-header .stm-logo-link img{
    display: block;
    margin-top: -15px;
  }
}

/* Mobile action icons */
@media (max-width: 767px){
  .stm-header .stm-mb-action--mobi{
    border: 1px solid rgba(0,0,0,0.12);
    background: #fff;
    border-radius: 10px;

    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .stm-header .stm-mb-action--mobi:hover{
    background: rgba(0,0,0,0.04);
  }
}

@media (max-width:1023px){
  .stm-header .stm-middlebar__inner{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* =========================================================
   Header container width (Variable-Based) — PROPER METHOD
========================================================= */
@media (min-width: 1024px){

  /* Boxed mode: use header-specific width, fallback to global container */
  .stm-header[data-stm-header-mode="boxed"] .stm-container{
    max-width: var(--stm-header-container, var(--stm-container,1500px));
  }

  /* Full mode: header stretches full width */
  .stm-header[data-stm-header-mode="full"] .stm-container{
    max-width: none;
  }
}