/* ===========================================================
   Liberty House Clinic — header styles (child theme)
   Extracted from the plugin's lhc-home.css (announce / qnb /
   sticky header / mega-nav / mega-panel / mobile drawer) so the
   LHC header renders on every child-theme page via header.php.
   Base resets and body typography are intentionally NOT copied
   here — the theme's own CSS still styles the page body. Button /
   chip / icon rules are scoped to .header so they can't restyle
   the rest of the page.
   Single source of truth for the markup lives in the plugin:
   plugins/aroham-vc-template/lhc-home/includes/header-lhc.php
   =========================================================== */

:root {
  --font-display: "Playfair Display", ui-serif, Georgia, serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --background: #ffffff;
  --foreground: #1a2235;
  --card: #ffffff;
  --card-foreground: #1a2235;
  --muted: #f3f4f7;
  --muted-foreground: #6a738a;
  --border: #e4e7ec;
  --input: #e4e7ec;

  --primary: #5d7293;
  --primary-foreground: #ffffff;
  --secondary: #8771ba;
  --secondary-foreground: #ffffff;
  --accent: #c2e3f3;
  --accent-foreground: #213044;

  --ink-deep: #1d3557;
  --surface-warm: #fafbfd;
  --surface-alt: #f6fafd;
  --gold: #c89b4a;
  --gold-foreground: #ffffff;
  --emerald-cta: #2f9c8b;
  --violet: #836dbe;
  --violet-hover: #735fa8;

  --radius: 0.75rem;
  --shadow-sm: 0 1px 2px rgba(20, 28, 47, 0.05);
  --shadow-md: 0 6px 18px -8px rgba(20, 28, 47, 0.18);
  --shadow-lg: 0 14px 30px -12px rgba(20, 28, 47, 0.22);
  --shadow-xl: 0 24px 48px -20px rgba(20, 28, 47, 0.28);
}

/* Buttons / icons / chips — scoped to the LHC header regions so the theme's own
   .btn / .icon elements on the page body are untouched. The header spans four
   sibling containers (.announce, .header, .qnb, .drawer) with no shared wrapper,
   so each utility is scoped to all of them (e.g. the qnb icons live outside
   .header and would otherwise render at full size). */
.announce .btn, .header .btn, .qnb .btn, .drawer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.1rem; border-radius: var(--radius); font-size: 0.95rem; font-weight: 600; border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; white-space: nowrap; }
.announce .btn--gold, .header .btn--gold, .qnb .btn--gold, .drawer .btn--gold { background: var(--gold); color: #fff; }
.announce .btn--gold:hover, .header .btn--gold:hover, .qnb .btn--gold:hover, .drawer .btn--gold:hover { background: #b48535; color: #fff; }
.drawer .btn--outline-primary { background: transparent; border-color: var(--primary); color: var(--primary); }
.drawer .btn--outline-primary:hover { background: var(--primary); color: #fff; }
.announce .icon, .header .icon, .qnb .icon, .drawer .icon { width: 1rem; height: 1rem; flex: none; }
.announce .icon-sm, .header .icon-sm, .qnb .icon-sm, .drawer .icon-sm { width: 0.875rem; height: 0.875rem; flex: none; }
.announce .icon-lg, .header .icon-lg, .qnb .icon-lg, .drawer .icon-lg { width: 1.25rem; height: 1.25rem; flex: none; }
.announce .chip, .header .chip, .qnb .chip, .drawer .chip { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 0.375rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 500; backdrop-filter: blur(4px); }
.announce .chip svg, .header .chip svg, .qnb .chip svg, .drawer .chip svg { color: var(--accent); }
/* Fallback: any LHC .icon svg with a <use> ref still gets a sane size even if a
   container above is missed — prevents the full-size SVG blow-up. */
.qnb a svg, .drawer a svg { width: 1rem; height: 1rem; flex: none; }

/* ============ Announcement bar ============ */
.announce { background: var(--ink-deep); color: #fff; font-size: 0.8125rem; }
.announce .container { display: flex; justify-content: flex-end; gap: 1.25rem; padding-block: 0.5rem; }
.announce a { font-weight: 500; opacity: 0.95; color:#FFF; }
.announce a:hover { text-decoration: underline;  color:#FFF;  opacity: 1;}

/* ============ Quick nav band (qnb) ============ */
.qnb { background: var(--ink-deep); border-bottom: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.85); font-size: 0.875rem; }
.qnb .container { display: flex; align-items: center; gap: 1rem; padding-block: 0.75rem; overflow-x: auto; scrollbar-width: none; }
.qnb .container::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .qnb .container { display: grid; grid-template-columns: repeat(4, 1fr); } }
.qnb a { display: flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; transition: color .2s; }
.qnb a:hover { color: #fff; }
.qnb a svg { color: var(--accent); }
.qnb .phone { font-weight: 600; color: var(--accent); }
/* The theme's own link colour outranks .qnb on the dark band, so the labels
   render dark-on-dark (invisible). #page-body lifts specificity above the theme
   rule with an explicit colour — no !important. */
#page-body .qnb a { color: rgba(255,255,255,0.9); }
#page-body .qnb a:hover { color: #ffffff; }
#page-body .qnb a span { color: inherit; }
#page-body .qnb .phone { color: var(--accent); }
.live-dot { position: relative; display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: #22c55e; }
.live-dot svg{margin-left:-8px;}
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; background: rgba(34,197,94,0.45); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }

/* ============ Sticky header ============ */
/* body{overflow-x:hidden} (theme) turns body into a scroll container and kills
   position:sticky; clip keeps the horizontal clipping and flow-root restores the
   BFC so floats are contained and sticky works. #page-body outranks body{}. */
#page-body { overflow-x: clip; display: flow-root; }
.header { position: sticky; top: 0; z-index: 40; background: var(--background); border-bottom: 1px solid transparent; transition: background .2s, border-color .2s, box-shadow .2s; }
.header.scrolled { background: rgba(255,255,255,1); backdrop-filter: blur(8px); border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.header-inner { display: flex; align-items: center; gap: 1rem; height: 4rem; transition: height .25s ease; }
@media (min-width: 1024px) { .header-inner { height: 84px; } .header.scrolled .header-inner { height: 72px; } }
.header .logo img { height: 2.5rem; width: auto; object-fit: contain; background: none; border: 0; box-shadow: none; transition: height .25s ease; }
.mobile .logo img { height: 50px !important; margin-top: -10px; }
.ukat-gpt-text, .ukat-gpt-mobile-text { margin-top: -5px; }
@media (min-width: 1024px) { .header .logo img { height: 65px; max-height: none; } .header.scrolled .logo img { height: 55px; } }
.nav-spacer { flex: 1; }
.mega-nav { display: none; gap: 0.125rem; }
@media (min-width: 1024px) { .mega-nav { display: flex; } }
.header-row .mega-nav { margin-inline: auto; }
.header-cta { display: none; }
@media (min-width: 1024px) { .header-cta { display: inline-flex; } }
.mega-nav__item { position: static; }
.mega-nav__link { display: inline-flex; align-items: center; padding: 0.5rem 0.625rem; font-size: 0.875rem; color: rgba(26,34,53,0.8); border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.mega-nav__item:hover .mega-nav__link,
.mega-nav__item.open .mega-nav__link { color: var(--primary); border-bottom-color: var(--gold); }
.header .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; color: var(--ink-deep); }
.header .menu-btn:hover { background: var(--muted); }
@media (min-width: 1024px) { .header .menu-btn { display: none; } }

/* ============ Mega menu panels (desktop) ============ */
.mega-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--background); border-top: 3px solid var(--gold); box-shadow: 0 12px 36px -12px rgba(29,53,87,0.35); display: none; animation: panel-in .18s ease-out; }
.header .mega-panel.open { display: block; }
@keyframes panel-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.mega-panel__inner { max-width: 80rem; margin: 0 auto; display: grid; grid-template-columns: 220px 1fr 280px; max-height: 520px; overflow: hidden; }
.mega-panel.cols .mega-panel__inner { grid-template-columns: 1fr 1fr 1fr 280px; }
.mega-panel aside.tabs { background: var(--ink-deep); padding: 1.5rem 1rem; overflow-y: auto; }
.mega-panel aside.tabs .label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.4); padding-inline: 0.5rem; margin-bottom: 0.75rem; }
.mega-panel aside.tabs button,
.mega-panel aside.tabs a { display: flex; width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; color: rgba(255,255,255,0.7); text-align: left; align-items: center; justify-content: space-between; font-size: 0.875rem; transition: background .2s, color .2s; }
.mega-panel aside.tabs button:hover,
.mega-panel aside.tabs a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.mega-panel aside.tabs button.active,
.mega-panel aside.tabs a.active { background: rgba(255,255,255,0.1); color: #fff; }
.mega-panel .content { padding: 1.5rem; overflow-y: auto; max-height: 520px; }
.mega-panel .content .group-heading { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--secondary); margin-bottom: 0.75rem; }
.mega-panel .content .col-list { display: grid; gap: 0.4rem; }
.mega-panel .content .col-list a { display: flex; justify-content: space-between; padding: 0.375rem 0; font-size: 0.875rem; color: rgba(26,34,53,0.85); border-top: 1px solid rgba(228,231,236,0.6); transition: color .2s; }
.mega-panel .content .col-list a:first-child { border-top: 0; }
.mega-panel .content .col-list a:hover { color: var(--primary); }
.mega-panel .content .col-list:has(> a:nth-child(5)),
.mega-panel .content .col-list.grid-2 { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
.mega-panel .content .col-list:has(> a:nth-child(5)) a:nth-child(2),
.mega-panel .content .col-list.grid-2 a:nth-child(2) { border-top: 0; }
.mega-panel .cta-col { background: var(--surface-warm); border-left: 1px solid var(--border); padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.mega-panel .cta-card { background: var(--ink-deep); color: #fff; padding: 1rem; border-radius: 0.75rem; }
.mega-panel .cta-card .eyebrow-w { color: rgba(255,255,255,0.5); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.25rem; }
.mega-panel .cta-card .title-w { font-family: var(--font-display); font-size: 1rem; margin-bottom: 0.75rem; }
.mega-panel .mm-callback { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; background: #fff; border: 1px solid var(--border); border-radius: 0.75rem; }
.mega-panel .mm-callback:hover { border-color: rgba(93,114,147,0.4); }
.mega-panel .mm-callback .ico { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background: var(--accent); color: var(--primary); display: grid; place-items: center; }
.mega-panel .mm-callback .txt { display: grid; gap: 0.1rem; }
.mega-panel .mm-callback .sm { font-size: 0.75rem; color: var(--muted-foreground); }
.mega-panel .mm-callback .lg { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; font-size: 0.9375rem; color: var(--primary); }
.mega-panel .mm-download { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.25rem; font-weight: 600; font-size: 0.875rem; color: var(--primary); }
.mega-panel .mm-download svg { color: var(--primary); flex: none; }
.mega-panel .mm-download:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-panel .mm-note { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 0.875rem; background: #fff; border: 1px solid var(--border); border-radius: 0.75rem; font-size: 0.8125rem; line-height: 1.4; color: var(--muted-foreground); }
.mega-panel .mm-note svg { flex: none; margin-top: 0.1rem; color: var(--secondary); }
.mega-panel .col-block { padding: 1.5rem 1.25rem; border-right: 1px solid var(--border); overflow-y: auto; max-height: 520px; }
#page-body .mega-panel .group-heading { font-size: 0.625rem !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase !important; color: var(--secondary) !important; margin-bottom: 0.75rem; }
.mega-panel .col-block .col-list { display: grid; gap: 0.4rem; }
.mega-panel .col-block .col-list a { display: flex; justify-content: space-between; align-items: center; padding: 0.375rem 0; font-size: 0.875rem; color: rgba(26,34,53,0.85); border-top: 1px solid rgba(228,231,236,0.6); transition: color .2s; }
.mega-panel .col-block .col-list a:first-child { border-top: 0; }
.mega-panel .col-block .col-list a:hover { color: var(--primary); }

/* ============ Mobile drawer ============ */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 50; }
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(85vw, 22rem); background: #fff; box-shadow: -10px 0 30px rgba(0,0,0,0.18); z-index: 60; transform: translateX(100%); transition: transform .25s ease-out; display: flex; flex-direction: column; padding: 1.5rem; overflow-y: auto; }
.drawer.open { transform: translateX(0); }
.drawer h3 { font-family: var(--font-display); color: var(--ink-deep); font-size: 1.125rem; margin-bottom: 1rem; }
.drawer-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.drawer-close:hover { background: var(--muted); }
.drawer-nav a { display: block; padding: 0.75rem 0.5rem; border-radius: 0.5rem; font-size: 1rem; color: var(--foreground); }
.drawer-nav a:hover { background: var(--muted); }

/* alignment tweak carried over from lhc-home.css */
.headseccont .alignright { justify-content: end !important; }