/* ════════════════════════════════════════════════════════════
   F-House Header — v3 (cream-tint translucent + clear accent)
   ════════════════════════════════════════════════════════════ */

:root {
  /* Base tokens */
  --fh-gold:      #c8a050;
  --fh-gold-deep: #a47a0e;
  --fh-gold-lt:   #e8c66a;
  --fh-cream:     #fdfaf1;
  --fh-dark:      #1a1a2e;
  --fh-navy:      #0f3460;
  /* Extended tokens — global (used by shared utilities in style.css) */
  --fh-gray:      #f5f3ef;
  --fh-text:      #333;
  --fh-muted:     #666;
  --fh-white:     #fff;
  --fh-radius:    12px;
  --fh-shadow:    0 6px 30px rgba(0, 0, 0, 0.10);
  --fh-trans:     all 0.3s ease;
  --fh-max:       1200px;
}

/* ── KILL TOP WHITESPACE ──
   Some Astra CSS / page templates leave a top gap above #masthead.
   Force everything to the top edge. */
html, body { margin: 0 !important; padding: 0 !important; }
body.ast-hfb-header #page,
body #page,
body.ast-hfb-header .site-header,
body #masthead,
body .ast-main-header-wrap {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.ast-above-header-wrap,
.ast-above-header-section {
  display: none !important;     /* defensive: hide empty above-header rows */
}

/* ── Header shell — cream tint + blur + raised stacking ── */
#masthead,
.site-header,
.ast-main-header-wrap {
  background: linear-gradient(180deg,
              rgba(253, 250, 241, 0.94) 0%,
              rgba(255, 255, 255, 0.86) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
          backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid rgba(164, 122, 14, 0.22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 4px 24px rgba(15, 52, 96, 0.08);
  transition: background .28s ease, box-shadow .28s ease, border-color .28s ease;
  position: relative;
  z-index: 9000;        /* keep header & dropdowns above all content sections */
}

.main-header-bar,
.ast-primary-header-bar {
  background: transparent !important;
  min-height: 78px;
}

/* Sticky / scrolled — more solid, vivid shadow */
.ast-primary-header.ast-sticky-active,
.ast-header-sticked,
.ast-primary-header.ast-sticky-active #masthead,
body.ast-header-break-point .ast-main-header-wrap.ast-sticky-active {
  background: linear-gradient(180deg,
              rgba(253, 250, 241, 0.98) 0%,
              rgba(255, 255, 255, 0.95) 100%);
  border-bottom-color: rgba(164, 122, 14, 0.42);
  box-shadow: 0 8px 28px rgba(15, 52, 96, 0.13);
}

/* Stronger gold accent line under header */
.ast-main-header-wrap::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(200, 160, 80, 0.55) 18%,
              var(--fh-gold-deep) 50%,
              rgba(200, 160, 80, 0.55) 82%,
              transparent 100%);
}

/* ════════════════════════════════════════════════════════════
   LOGO + HEADER LAYOUT — căn cân đối
   Astra HFB container default padding = 0 (không như content container).
   Add padding ngang trực tiếp vào header container.
   ════════════════════════════════════════════════════════════ */

/* Add explicit padding cho header ast-container (HFB không inherit container padding) */
.site-primary-header-wrap.ast-container,
.ast-primary-header-bar .ast-container {
  padding-left: 32px !important;
  padding-right: 32px !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Section column — căn dọc, không thêm padding ngang */
.site-header-primary-section-left,
.site-header-primary-section-right {
  padding-left: 0 !important;
  padding-right: 0 !important;
  align-items: center !important;
}

/* Bỏ padding ngoài cùng của menu item cuối → mép phải menu flush với mép phải container */
.ast-builder-menu-1 .ast-nav-menu > li:last-child > a {
  padding-right: 0 !important;
}

@media (max-width: 921px) {
  .site-primary-header-wrap.ast-container,
  .ast-primary-header-bar .ast-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Branding wrapper — vertical center logo within header bar */
.ast-site-identity,
.site-branding {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  min-height: 78px;   /* match header bar min-height for proper vertical center */
}

.site-logo-img {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0;
}

.site-logo-img a.custom-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Logo image itself — override Astra inline width:81px max-width:81px */
header .custom-logo-link img,
header .custom-logo-link .custom-logo,
header img.custom-logo,
.site-header img.custom-logo,
.custom-logo,
.site-logo-img .custom-logo {
  max-height: 60px !important;
  height: 60px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle !important;
  transition: transform .25s ease, filter .25s ease;
}
.custom-logo:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 8px rgba(164, 122, 14, 0.30));
}

/* Builder layout element — strip default Astra padding */
.site-header-primary-section-left .ast-builder-layout-element {
  padding: 0 !important;
  margin: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════════════════ */

.main-header-bar .ast-nav-menu > li > a,
.ast-primary-header-bar .ast-nav-menu > li > a {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--fh-dark);
  padding: 28px 14px;
  position: relative;
  transition: color .22s ease;
}

.main-header-bar .ast-nav-menu > li > a::after,
.ast-primary-header-bar .ast-nav-menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--fh-gold), var(--fh-gold-deep));
  border-radius: 1px;
  transition: width .25s ease;
}

.main-header-bar .ast-nav-menu > li:hover > a,
.ast-primary-header-bar .ast-nav-menu > li:hover > a,
.main-header-bar .ast-nav-menu > li.current-menu-item > a,
.ast-primary-header-bar .ast-nav-menu > li.current-menu-item > a,
.main-header-bar .ast-nav-menu > li.current-menu-ancestor > a,
.ast-primary-header-bar .ast-nav-menu > li.current-menu-ancestor > a {
  color: var(--fh-gold-deep);
}

.main-header-bar .ast-nav-menu > li:hover > a::after,
.ast-primary-header-bar .ast-nav-menu > li:hover > a::after,
.main-header-bar .ast-nav-menu > li.current-menu-item > a::after,
.ast-primary-header-bar .ast-nav-menu > li.current-menu-item > a::after,
.main-header-bar .ast-nav-menu > li.current-menu-ancestor > a::after,
.ast-primary-header-bar .ast-nav-menu > li.current-menu-ancestor > a::after {
  width: 70%;
}

/* ── Dropdown sub-menu — keep above hero/sections (which create new stacking contexts) ── */
.main-header-bar .ast-nav-menu .sub-menu,
.ast-primary-header-bar .ast-nav-menu .sub-menu,
.main-header-menu .sub-menu,
ul.sub-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-top: 2px solid var(--fh-gold-deep);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 12px 32px rgba(15, 52, 96, 0.20);
  overflow: hidden;
  z-index: 9999 !important;
  position: absolute;
}

/* Parent <li> needs to allow children to float above */
.main-header-bar .ast-nav-menu li,
.ast-primary-header-bar .ast-nav-menu li {
  position: relative;
  z-index: auto;
}
.main-header-bar .ast-nav-menu li:hover,
.main-header-bar .ast-nav-menu li:focus-within {
  z-index: 9999;
}

.main-header-bar .ast-nav-menu .sub-menu li a,
.ast-primary-header-bar .ast-nav-menu .sub-menu li a {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-transform: none;
  color: var(--fh-dark);
  padding: 11px 18px;
  transition: color .2s ease, padding-left .2s ease, background .2s ease;
}

.main-header-bar .ast-nav-menu .sub-menu li a:hover,
.ast-primary-header-bar .ast-nav-menu .sub-menu li a:hover {
  color: var(--fh-gold-deep);
  background: rgba(253, 246, 227, 0.85);
  padding-left: 24px;
}

/* ── Mobile hamburger accent ── */
.ast-mobile-menu-trigger-fill,
.ast-button-wrap .ast-mobile-menu-trigger svg {
  color: var(--fh-gold-deep);
}

/* ── Mobile responsive ── */
@media (max-width: 921px) {
  #masthead,
  .site-header,
  .ast-main-header-wrap {
    background: rgba(253, 250, 241, 0.98);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .site-header-primary-section-left {
    padding-left: 16px !important;
  }
  .site-header-primary-section-right {
    padding-right: 16px !important;
  }
}