/* ===============================================================
   HEADER v2  ·  parts/header.css
   ---------------------------------------------------------------
   Desktop:  logo BAME | menu MAJHE | button DANE
   Mobile:   logo BAME | button + burger DANE, full screen menu

   Ucchota --headH token. Ekhane koto px likhben na.
   Hamburger kokhon bondho hobe: niche 5. BREAKPOINT block.

   Sucipotro
     1. Announcement bar
     2. Header shell ar tin ta track
     3. Brand
     4. Nav link ar chevron
     5. Breakpoint
     6. Simple dropdown (mega na emon submenu)
     7. MEGA MENU
     8. Phone, CTA, burger
     9. Full screen mobile menu
   =============================================================== */


/* ===============================================================
   1. ANNOUNCEMENT BAR
   =============================================================== */
.annbar{background:var(--teal-800);color:var(--neutral-100);font-size:14px;position:relative;z-index:61}
.annbar__in{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;padding-top:9px;padding-bottom:9px;text-align:center}
.annbar a{color:var(--gold-400);text-decoration:underline;text-underline-offset:3px;font-weight:600}
@media (hover:hover){ .annbar a:hover{color:var(--white)} }
.annbar a:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}


/* ===============================================================
   2. HEADER SHELL
   =============================================================== */
.site-head{
  position:sticky;top:0;z-index:60;
  height:var(--headH);
  background:var(--head-bg);
  border-bottom:1px solid transparent;
  transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.site-head.is-stuck{
  background:var(--head-bg-stuck);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 2px 16px rgba(0,32,29,.28);
  border-bottom-color:var(--head-border);
}
/* Mega khola thakle header solid, na hole niche er panel er sathe blend kore */
.site-head.mega-open{background:var(--head-bg);box-shadow:none}

/* ALIGNMENT ER MUL LINE  <- ei ta soraben na.
   .site-head er ekta nishchito ucchota ache (--headH). Kintu tar
   bhitorer .container er height auto chilo, tai .nav er height:100%
   kono kichur sathe milto na ar sob jinis header er UPORE chole
   jeto (niche faka jayga thakto). Container ke 100% dile
   .nav 100% pay ar align-items:center ashol kaj kore. */
.site-head > .container{height:100%;display:flex;align-items:center}

/* Tin ta track: logo bame, menu majhe, action dane.
   1280px theke upore duipasher track soman (1fr), tai majher
   menu ta ASHOL optical centre e thake, CTA logo er cheye
   chowra hoyeo.
   1280px er niche jayga kom, tai auto 1fr auto. Menu tokhon
   baki jayga tar majhe boshe ar kono jinis overlap kore na. */
.nav{
  width:100%;
  height:100%;
  min-height:var(--headH);
  display:grid;align-items:center;
  grid-template-columns:auto 1fr auto;
  gap:20px;
}
@media (min-width:1280px){ .nav{grid-template-columns:1fr auto 1fr} }
.nav__left{justify-self:start;display:flex;align-items:center;height:100%;min-width:0}
.nav__mid{justify-self:center;display:flex;align-items:center;height:100%;min-width:0}
.nav__right{justify-self:end;display:flex;align-items:center;height:100%;gap:10px;min-width:0}

/* Logo MAJHE chaile ei tinta line comment theke ber korun:
.nav{grid-template-columns:1fr auto 1fr}
.nav__left{justify-self:center;grid-column:2}
.nav__mid{justify-self:start;grid-column:1}
*/


/* ===============================================================
   3. BRAND
   =============================================================== */
.brand{display:flex;align-items:center;gap:10px;color:var(--white);line-height:1;max-width:100%}
.brand__mark{
  width:32px;height:32px;border-radius:10px;flex:none;
  background:var(--head-mark-bg);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:900;font-size:16px;
  line-height:1;
}
.brand__name{
  font-family:var(--font-heading);font-weight:900;font-size:17px;letter-spacing:-.01em;
  line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Logo joto lomba e hok, header er ucchota bhangbe na.
   Chowra Theme Settings > Logo width theke ashe. */
.brand__img{max-width:100%;max-height:calc(var(--headH) - 20px);height:auto;object-fit:contain}
.brand:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:4px;border-radius:6px}


/* ===============================================================
   4. NAV LINK
   =============================================================== */
.navlinks{display:none;align-items:center;gap:4px;height:100%}
.nav__item{position:relative;height:100%;display:flex;align-items:center}
/* Mega panel puro chowra jure boshbe, tai ei item ta static */
.nav__item.has-mega{position:static}

.nav__link{
  display:inline-flex;align-items:center;gap:6px;
  height:38px;padding:0 12px;border-radius:var(--radius-sm);
  font-family:var(--font-body);font-weight:600;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--head-text);
  transition:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
  cursor:pointer;
}
@media (hover:hover){ .nav__link:hover{color:var(--head-text-hover);background:rgba(255,255,255,.08)} }
.nav__link:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

/* Active page: rong + underline. Sudhu rong e bhorsha kora jabe na. */
.nav__item.current-menu-item > .nav__link,
.nav__item.current_page_item > .nav__link,
.nav__item.current-menu-ancestor > .nav__link,
.nav__item.current-menu-parent > .nav__link{
  color:var(--head-text-hover);
  box-shadow:inset 0 -2px 0 var(--head-text-hover);
}

.nav__chev{display:inline-flex;transition:transform var(--dur) var(--ease);opacity:.8}
.nav__link[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__link[aria-expanded="true"]{color:var(--gold-400);background:rgba(255,255,255,.08)}


/* ===============================================================
   5. BREAKPOINT  <- hamburger EKHANE bondho hoy
   =============================================================== */
@media (min-width:768px){
  .brand__mark{width:34px;height:34px}
  .brand__name{font-size:18px}
}
@media (min-width:1024px){
  .navlinks{display:flex}
}
@media (min-width:1024px){
  .nav__link{padding:0 9px;font-size:12.5px}
}
@media (min-width:1280px){
  .navlinks{gap:6px}
  .nav__link{padding:0 13px;font-size:13px}
}
@media (min-width:1440px){
  .brand__name{font-size:19px}
  .brand__mark{width:38px;height:38px;font-size:18px}
  .nav__link{padding:0 16px}
}
@media (max-height:700px){
  .brand__mark{width:28px;height:28px;font-size:14px}
  .brand__name{font-size:16px}
}

/* --- 5.1 ALIGNMENT GUARD (desktop + tablet + mobile) ---------------
   Header er protyekta jinis ek e optical line e boshbe. Notun kono
   element add korle o ei tinta line tar khayal rakhbe. */
.nav > *{align-self:center}
.nav__right > *{flex:none}
.nav__left .brand{align-items:center}
/* Choto phone e logo ar burger er majhe minimum fak */
@media (max-width:479px){
  .nav{gap:12px}
  .brand__name{font-size:16px}
}
@media (min-width:480px) and (max-width:1023px){
  .nav{gap:14px}
}


/* ===============================================================
   6. SIMPLE DROPDOWN  (mega na emon submenu)
   =============================================================== */
.drop{
  position:absolute;top:100%;left:0;min-width:240px;
  background:var(--white);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  box-shadow:var(--shadow-drop);
  padding:8px;margin-top:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  z-index:5;
}
.nav__item.has-drop.is-open > .drop{opacity:1;visibility:visible;transform:none}
.drop .nav__item{display:block;height:auto;position:relative}
.drop .nav__link{
  display:block;width:100%;height:auto;padding:10px 12px;
  color:var(--teal-700);text-transform:none;letter-spacing:0;
  font-size:15px;font-weight:600;
}
@media (hover:hover){ .drop .nav__link:hover{background:var(--teal-tint);color:var(--teal-700)} }
.drop .nav__link:focus-visible{outline-color:var(--focus-ring)}


/* ===============================================================
   7. MEGA MENU
   ---------------------------------------------------------------
   Header er niche puro chowra ekta panel. Content Service ar
   Industry post type theke apna apni ashe, inc/nav-mega.php.
   =============================================================== */
.navscrim{
  position:fixed;left:0;right:0;top:0;bottom:0;
  background:rgba(0,32,29,.45);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease);
  z-index:-1;
}
body.mega-open .navscrim{opacity:1}

.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--mega-bg);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 48px rgba(0,32,29,.22);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur);
  z-index:4;
  max-height:calc(100vh - var(--headH) - 20px);
  overflow-y:auto;
}
/* JS load na hole panel bondho thake. nav.js init e hidden soriye dey. */
.mega[hidden],.navscrim[hidden]{display:none}
.nav__item.has-mega.is-open > .mega{opacity:1;visibility:visible;transform:none}

.mega__in{
  display:grid;grid-template-columns:1fr;gap:28px;
  padding-top:32px;padding-bottom:32px;
}
@media (min-width:1200px){
  .mega__in{grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding-top:40px;padding-bottom:40px}
}

/* --- Bam pasher list --- */
.mega__main{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:900px){  .mega__main{grid-template-columns:1fr 1fr;gap:24px 32px} }
@media (min-width:1400px){ .mega__main{grid-template-columns:1fr 1fr 1fr} }

.mega__gname{
  font-family:var(--font-body);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-accent);
  padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid var(--border-subtle);
}
.mega__list{display:grid;gap:2px}

.mega__item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:12px;
  padding:10px;border-radius:var(--radius-md);
  transition:background-color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .mega__item:hover{background:var(--white)} }
.mega__item:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-2px}

.mega__ico{
  width:38px;height:38px;border-radius:10px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--teal-tint);color:var(--teal-700);
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
@media (hover:hover){ .mega__item:hover .mega__ico{background:var(--orange-tint);color:var(--orange-700)} }

.mega__txt{min-width:0}
.mega__t{display:block;font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--teal-700);line-height:1.3}
.mega__d{display:block;font-size:13px;line-height:1.45;color:var(--text-muted);margin-top:3px}
.mega__arrow{color:var(--orange-700);opacity:0;transform:translateX(-4px);transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);margin-top:9px}
@media (hover:hover){ .mega__item:hover .mega__arrow{opacity:1;transform:none} }

/* --- Dan pasher promo column --- */
.mega__side{
  background:var(--mega-side-bg);color:var(--neutral-100);
  border-radius:var(--radius-lg);padding:24px;
  align-self:start;
}
.mega__sidee{font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-400);margin-bottom:10px}
.mega__sideh{font-family:var(--font-heading);font-weight:800;font-size:19px;line-height:1.2;color:var(--white);letter-spacing:-.02em}
.mega__sidet{font-size:14px;line-height:1.55;color:var(--neutral-100);margin:10px 0 18px}
.mega__side .btn{min-height:46px}
.mega__all{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-weight:700;font-size:14px;color:var(--gold-400);
}
@media (hover:hover){ .mega__all:hover{color:var(--white)} }
.mega__all:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}


/* ===============================================================
   8. PHONE, CTA, BURGER
   ---------------------------------------------------------------
   Ei tinta r display niyom EKHANE, section 5 e na. Karon base
   rule ta pore ashe, tai porer ta e jite jay.
   =============================================================== */
.nav__phone{display:none;align-items:center;gap:7px;color:var(--white);font-weight:600;font-size:14px;white-space:nowrap}
@media (hover:hover){ .nav__phone:hover{color:var(--gold-400)} }
.nav__phone:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px;border-radius:4px}

.nav__cta{display:none;min-height:40px;padding:0 14px;font-size:13px;white-space:nowrap}
.btn.ghost.nav__cta2{display:none;min-height:40px;padding:0 14px;font-size:13px;white-space:nowrap;color:var(--white);border-color:rgba(255,255,255,.5);background:transparent}
@media (hover:hover){ .btn.ghost.nav__cta2:hover{background:rgba(255,255,255,.1);border-color:var(--white)} }

.burger{
  width:44px;height:44px;flex:none;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:transparent;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);
  cursor:pointer;
}
.burger i{width:18px;height:2px;background:var(--white);border-radius:2px}
.burger:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

/* Choto phone e sudhu logo + burger. 480px theke button o dekhabe. */
@media (min-width:480px){ .nav__cta{display:inline-flex} }
@media (min-width:1280px){ .btn.ghost.nav__cta2{display:inline-flex} }
/* Phone number 1700px theke.
   Keno 1700: container 1320px e cap kora, 1700px theke seta
   1560px hoy. Tar age menu + logo + phone + button ek line e
   1208px er bhitore ate na.
   Apnar menu choto hole (3-4 ta item) ei number ta 1280 e
   namate paren. Namanor por 1280, 1440 ar 1600 e test korun. */
@media (min-width:1700px){ .nav__phone{display:inline-flex} }
@media (min-width:1024px){
  .nav__cta{min-height:42px;padding:0 18px;font-size:14px}
  .burger{display:none}      /* <- hamburger EKHANE bondho hoy */
}

/* ===============================================================
   9. FULL SCREEN MOBILE MENU
   =============================================================== */
.mnav{
  position:fixed;inset:0;z-index:80;
  background:var(--teal-800);
  display:flex;flex-direction:column;
  overscroll-behavior:contain;
}
.mnav[hidden]{display:none}
body.menu-open{overflow:hidden}

.mnav__top{flex:none;height:var(--headH);border-bottom:1px solid rgba(255,255,255,.16)}
.mnav__topin{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.mnav__close{
  width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--white);
  border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);cursor:pointer;
}
@media (hover:hover){ .mnav__close:hover{background:rgba(255,255,255,.1)} }
.mnav__close:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

.mnav__body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 0 24px}

.mnav__list{display:block}
.mnav__item{border-bottom:1px solid rgba(255,255,255,.14)}
.mnav__row{display:flex;align-items:center;gap:8px}
.mnav__link{
  flex:1;display:flex;align-items:center;gap:10px;
  padding:16px 0;color:var(--white);
  font-family:var(--font-body);font-weight:600;font-size:16px;
  letter-spacing:.08em;text-transform:uppercase;
}
.mnav__link:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:-3px}
.mnav__item.current-menu-item > .mnav__row > .mnav__link{color:var(--gold-400)}

.mnav__tog{
  width:44px;height:44px;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:var(--white);
  border:0;border-radius:var(--radius-sm);cursor:pointer;
  transition:transform var(--dur) var(--ease),background-color var(--dur-fast) var(--ease);
}
.mnav__tog[aria-expanded="true"]{background:var(--gold-400);color:var(--teal-900);transform:rotate(45deg)}
.mnav__tog:focus-visible{outline:3px solid var(--focus-ring-inverse);outline-offset:2px}

.mnav__sub{padding:2px 0 12px}
.mnav__sub[hidden]{display:none}
.mnav__sub .mnav__item{border-bottom:0}
.mnav__link--sub{
  padding:11px 0;font-size:14px;font-weight:500;
  text-transform:none;letter-spacing:0;color:var(--neutral-100);
}
.mnav__ico{
  width:32px;height:32px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.1);color:var(--gold-400);
}
.mnav__link--all{padding:11px 0;font-size:13px;color:var(--gold-400);text-transform:none;letter-spacing:0;font-weight:700}

.mnav__foot{
  flex:none;padding:18px 0 24px;
  border-top:1px solid rgba(255,255,255,.16);
  background:var(--teal-900);
}
.mnav__phone{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--gold-400);font-weight:700;font-size:17px}

@media (min-width:1024px){ .mnav{display:none !important} }