/* ================================================================
   HCMC Dental — Header CSS v3
   inc/header.css

   Layered baseline (small file, ~150 lines):
     1. Utility bar (dark, 1 row, trust strip + language)
     2. Astra primary header (logo + menu + CTAs)
     3. Standalone CTAs (WhatsApp + Book + burger)

   Mega menu / mobile drawer styling lives in inc/nav.css.
   ================================================================ */

/* ── 1. Utility bar ────────────────────────────────────────────── */
#hcmc-util {
  position: relative;
  z-index: var(--hcmc-z-util);
  background: var(--hcmc-navy);
  color: #cbd5e1;
  font-family: var(--hcmc-font-body);
  font-size: var(--hcmc-text-xs);
  line-height: 1;
}
.hcmc-util__inner {
  max-width: var(--ast-normal-container-width, 1240px);
  margin: 0 auto;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hcmc-space-4);
}
.hcmc-util__trust {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.hcmc-util__trust strong { color: #f1f5f9; font-weight: 700; }
.hcmc-util__sep         { color: #475569; }
.hcmc-util__pill {
  background: rgba(14,165,233,.14);
  color: #7dd3fc;
  padding: 3px 8px;
  border-radius: var(--hcmc-radius-full);
  border: 1px solid rgba(14,165,233,.25);
  font-size: 10.5px;
  letter-spacing: .03em;
}
.hcmc-util__hours {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hcmc-util__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #475569;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
}
.hcmc-util__hours.is-open .hcmc-util__led {
  background: #22c55e;
  animation: hcmc-pulse 2s infinite;
}
@keyframes hcmc-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) {
  .hcmc-util__hours .hcmc-util__led { animation: none; }
}
.hcmc-util__lang { display: flex; gap: 6px; flex-shrink: 0; }
.hcmc-util__lang a {
  color: #94a3b8;
  text-decoration: none;
  padding: 3px 8px;
  border-radius: var(--hcmc-radius-sm);
  font-weight: 500;
  transition: color var(--hcmc-transition-fast), background var(--hcmc-transition-fast);
}
.hcmc-util__lang a:hover     { color: #f1f5f9; background: rgba(255,255,255,.06); }
.hcmc-util__lang a.is-active { color: #f8fafc; background: rgba(255,255,255,.10); }

/* Hide mid-priority info on small screens */
@media (max-width: 768px) {
  .hcmc-util__inner       { padding: 7px 14px; gap: 8px; }
  .hcmc-util__trust       { font-size: 10.5px; gap: 6px; flex: 1; }
  .hcmc-util__trust > :nth-child(n+5) { display: none; }   /* keep first 4 chips */
}
@media (max-width: 480px) {
  .hcmc-util__trust > :nth-child(n+3) { display: none; }   /* show pill + 1 fact */
}

/* ── 2. Astra primary header tweaks ─────────────────────────────── */
.ast-primary-header-bar {
  background: var(--hcmc-white);
  box-shadow: var(--hcmc-shadow-xs);
  transition: box-shadow var(--hcmc-transition-base);
}
body.hcmc-sticky .ast-primary-header-bar { box-shadow: var(--hcmc-shadow-sm); }

.site-title,
.site-branding .site-title a {
  font-family: var(--hcmc-font-heading);
  color: var(--hcmc-dark);
  letter-spacing: -.01em;
}

/* Make logo larger on mobile without expanding header height */
@media (max-width: 921px) {
  .hcmc-dental .site-logo-img img {
    transform: scale(1.22);
    transform-origin: left center;
  }
}

/* ── 3. Standalone CTAs (rendered as <li.hcmc-cta-wrap> after the menu) ─ */
/* Strip menu styling from the <li> wrapper */
.main-header-menu .hcmc-cta-wrap,
#ast-hf-menu-1 .hcmc-cta-wrap {
  list-style: none;
  margin: 0 0 0 8px;
  padding: 0;
  display: inline-flex;
  align-items: center;
}
.main-header-menu .hcmc-cta-wrap > a,
.hcmc-cta-wrap::before { display: none !important; }

.hcmc-cta-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hcmc-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-family: var(--hcmc-font-heading);
  font-weight: 700;
  font-size: 12px;
  min-height: 36px;
  text-decoration: none;
  border-radius: var(--hcmc-radius-full);
  white-space: nowrap;
  transition: transform var(--hcmc-transition-fast),
              box-shadow var(--hcmc-transition-fast),
              background var(--hcmc-transition-fast);
}
.hcmc-cta--wa {
  background: linear-gradient(135deg, #25D366 0%, #15803d 100%);
  color: #fff;
  box-shadow: var(--hcmc-shadow-cta);
}
.hcmc-cta--wa:hover { transform: translateY(-1px); box-shadow: var(--hcmc-shadow-cta-hover); color: #fff; }
.hcmc-cta--book {
  background: var(--hcmc-primary);
  color: #fff;
  box-shadow: var(--hcmc-shadow-primary);
}
.hcmc-cta--book:hover { background: var(--hcmc-primary-dark); transform: translateY(-1px); color: #fff; }

/* Hamburger (fixed top-right on mobile, hidden on desktop) */
.hcmc-burger {
  display: none;
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: calc(var(--hcmc-z-overlay) + 2);
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  background: var(--hcmc-white);
  border: 1px solid var(--hcmc-border);
  border-radius: var(--hcmc-radius-md);
  box-shadow: var(--hcmc-shadow-sm);
  cursor: pointer;
  transition: background var(--hcmc-transition-fast), box-shadow var(--hcmc-transition-fast);
}
.hcmc-burger:hover { box-shadow: var(--hcmc-shadow-md); }
.hcmc-burger__bar {
  display: block;
  height: 2px;
  background: var(--hcmc-dark);
  border-radius: 2px;
  margin: 4px 0;
  transition: transform var(--hcmc-transition-base), opacity var(--hcmc-transition-base);
}

/* ── 4. Mobile-first hide/show of CTAs ─────────────────────────── */
@media (max-width: 992px) {
  /* Hide the in-menu CTA strip on mobile — drawer already has WA + Book */
  .main-header-menu .hcmc-cta-wrap,
  #ast-hf-menu-1   .hcmc-cta-wrap { display: none; }
  .hcmc-burger                    { display: block; }
}
@media (min-width: 993px) {
  .hcmc-burger { display: none; }
}

.hcmc-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}