/* ==========================================================================
   Site-wide header (2026-11) — one navbar on every page and while scrolling.
   Loaded after stylesheet.css / custom.css from layout/master.blade.php.
   #header            = the header at the top of the page
   #header.cloned     = the copy the theme shows as a sticky bar on scroll
   Buttons use the site's original green (#57a24d).
   ========================================================================== */
:root{--hs-green:#0f4a35;--hs-green-dark:#0b3a29;--hs-navy:#10336b;--hs-navy-deep:#0b1d3a}

/* ---------- bar ---------- */
#header{background:var(--hs-navy);padding:12px 0;box-shadow:0 2px 14px rgba(0,0,0,.18)}
/* the sticky bar on scroll keeps exactly the same height and logo size as the top bar */
#header.cloned{background:var(--hs-navy)!important;padding:12px 0;box-shadow:0 4px 18px rgba(0,0,0,.25)}
#header #logo img{max-height:68px;width:auto;margin:0}
#header.cloned #logo img{max-width:none;margin:0}
/* one flexible row: logo + menu on the left, buttons on the right, never overlapping */
#header>.container{display:flex;align-items:center;justify-content:space-between;gap:16px}
#header>.container:before,#header>.container:after{display:none}
#header .left-side{flex:1 1 auto;min-width:0;width:auto;float:none;display:flex;align-items:center;min-height:52px}
#header .left-side>.clearfix{display:none}
#header .right-side{flex:0 0 auto;width:auto;float:none;display:flex;align-items:center;min-height:52px}
#header #logo{flex:0 0 auto}
#header #navigation{flex:0 1 auto;min-width:0;width:auto;margin-left:30px}
@media (min-width:993px){#header #navigation ul#responsive{display:flex;flex-wrap:nowrap}}
/* tablets/phones use the slide-out menu (menu button); never show the desktop menu in the bar */
@media (max-width:992px){#header #navigation{display:none!important}}

/* the theme switches the sticky bar off below 1240px; keep it on at every width so scrolling looks the same everywhere */
@media (max-width:1239px){#header.cloned{display:block}}

/* ---------- menu ---------- */
#header #navigation ul#responsive>li>a{color:#fff;background:transparent;font:500 15px/1.2 'DM Sans',sans-serif;text-transform:none;letter-spacing:0;padding:10px 12px;position:relative;white-space:nowrap}
#header #navigation ul#responsive>li>a:hover,
#header #navigation ul#responsive>li>a.current{color:#7cc66f;background:transparent}
#header #navigation ul#responsive>li>a.current:after{content:"";position:absolute;left:12px;right:12px;bottom:0;width:auto;height:2px;border:0;border-radius:2px;background:#7cc66f;opacity:1}
/* dropdown arrows stay visible on the dark bar */
#header #navigation ul#responsive>li>a:only-child:after{border-color:transparent}
#header #navigation ul#responsive>li>a i{color:inherit}
/* dropdown panels: unchanged white boxes, but readable */
#header #navigation ul li ul a{color:#333;text-transform:none;font-family:'DM Sans',sans-serif}
#header #navigation ul li ul a:hover,#header #navigation ul li ul a.current{color:var(--hs-green)}

/* ---------- buttons on the right ---------- */
#header .header-widget{position:static;top:0;width:auto;height:auto;display:flex;align-items:center;gap:10px}
#header .header-widget a{position:relative;top:0!important;margin:0!important;transform:none!important;float:none!important;white-space:nowrap;font-family:'DM Sans',sans-serif;line-height:1}
#header .hh-whatsapp{order:1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#25a35a;color:#fff;font-size:20px;border:1px solid rgba(255,255,255,.3)}
#header .hh-whatsapp:hover{background:#1e8c4c;color:#fff}
#header .header-widget a.button{order:2;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;width:auto!important;min-width:0!important;padding:0 16px!important;border-radius:999px;border:1px solid rgba(255,255,255,.7)!important;background:rgba(255,255,255,.04)!important;color:#fff!important;font-size:14px;font-weight:600}
#header .header-widget a.button:hover{background:rgba(255,255,255,.12)!important}
#header .header-widget a.button i{margin:0;font-size:16px;color:#fff}
#header .header-widget a.button span{display:inline!important;color:#fff;font-size:14px}
#header .header-widget a.sign-in{order:3;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;width:auto!important;min-width:0!important;padding:0 18px!important;border-radius:6px;border:0!important;background:var(--hs-green)!important;color:#fff!important;font-size:14px;font-weight:700;box-shadow:0 6px 16px rgba(0,0,0,.25)}
#header .header-widget a.sign-in{border:1px solid rgba(255,255,255,.22)!important}
#header .header-widget a.sign-in:hover{background:var(--hs-green-dark)!important}
#header .header-widget a.sign-in span{display:inline!important;color:#fff;font-size:14px}
#header .header-widget a.sign-in>i:first-child{display:none}
#header .hh-arrow{display:inline;font-size:16px;color:#fff}

/* ---------- laptops ---------- */
@media (max-width:1359px){
  #header .header-widget a.button{width:40px!important;padding:0!important;flex:0 0 40px}
  #header .header-widget a.button span{display:none!important}
}
@media (min-width:993px) and (max-width:1199px){
  #header #logo img{max-height:58px}
  #header #navigation{margin-left:16px}
  #header #navigation ul#responsive>li>a{font-size:14px;padding:10px 8px}
  #header #navigation ul#responsive>li>a.current:after{left:8px;right:8px}
  #header .header-widget a.sign-in{padding:0 14px!important}
  #header .hh-arrow{display:none}
}
/* ---------- tablets & phones (menu button) ---------- */
@media (max-width:992px){
  #header,#header.cloned{padding:10px 0}
  #header #logo img{max-height:54px}
  #header .header-widget a.sign-in span{display:none!important}
  #header .header-widget a.sign-in{width:40px!important;padding:0!important;flex:0 0 40px}
  #header .header-widget a.sign-in>i:first-child{display:inline;font-size:17px}
  #header .hh-arrow{display:none}
}
@media (max-width:640px){
  #header .header-widget{gap:8px}
  #header #logo img,#header.cloned #logo img{max-height:46px}
}

/* ---------- the old theme forces black text on the sticky bar (stylesheet.css ".sticky nav a", ".sticky .sticky-color-ch");
              keep it identical to the top header instead ---------- */
#header.sticky #navigation ul#responsive>li>a{color:#fff!important}
#header.sticky #navigation ul#responsive>li>a:hover,
#header.sticky #navigation ul#responsive>li>a.current{color:#7cc66f!important}
#header.sticky #navigation ul li ul a{color:#333!important}
#header.sticky #navigation ul li ul a:hover{color:var(--hs-green)!important}
#header.sticky .header-widget a.sticky-color-ch{color:#fff!important;border-color:rgba(255,255,255,.7)!important}