/* ============================================================
   Chemist2U — Site header styles
   Self-contained: brand variables, the Inter webfont, and every
   rule the header markup needs. Scoped under .c2u-header so it
   won't collide with existing theme styles (the :root variables
   are global but namespaced --c2u-*).

   Ivory Search brings its own CSS for the search form; we only
   provide a positioning wrapper (.c2u-header__search).

   ============================================================ */


:root {
  --c2u-red:        #D92050;  /* Caring Red — actions & accent */
  --c2u-red-deep:   #C01B47;  /* hover/press */
  --c2u-red-soft:   #FBE3E6;  /* pink tint surface */
  --c2u-navy:       #0C344A;  /* Thoughtful Blue — ink */
  --c2u-muted:      #5A6B78;
  --c2u-line:       #E6E6E6;
  --font-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --shadow-md:      0 6px 20px rgba(12,52,74,.10);
}


/* ── Shell ──────────────────────────────────────────────────────────────────── */

.c2u-header,
.c2u-header * { box-sizing: border-box; }

.c2u-header {
  position: sticky; top: 0; z-index: 99999;
  background: #ffffff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c2u-line);
  font-family: var(--font-body);
}

.c2u-header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px;
  padding: 16px 56px;
  max-width: 1440px; margin: 0 auto;
}

.c2u-logo { display: block; flex-shrink: 0; }
.c2u-logo img { height: 28px; width: auto; display: block; }


/* ── WP admin bar offset (logged-in users only) ────────────────────────────── */

.admin-bar .c2u-header { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .c2u-header { top: 46px; }
}


/* ── Desktop nav + dropdown ─────────────────────────────────────────────────── */

.c2u-nav { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }

.c2u-nav-item {
  font: 500 14px/1 var(--font-body); color: var(--c2u-navy);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: color .18s ease;
}
.c2u-nav-item:hover { color: var(--c2u-red); }

.c2u-has-dd { position: relative; }
.c2u-dd-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.c2u-chevron { transition: transform .2s ease; }
.c2u-has-dd:hover .c2u-chevron { transform: rotate(180deg); }

/* invisible bridge so the pointer can travel from label to menu without dropping */
.c2u-has-dd::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 100%; height: 16px;
}

.c2u-dd {
  position: absolute; top: calc(100% + 14px); left: -14px;
  min-width: 210px; padding: 8px;
  background: #fff; border: 1px solid var(--c2u-line); border-radius: 14px;
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.c2u-has-dd:hover .c2u-dd {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.c2u-dd a {
  font: 500 14px/1 var(--font-body); color: var(--c2u-navy);
  text-decoration: none; padding: 12px 14px; border-radius: 10px;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.c2u-dd a:hover { background: var(--c2u-red-soft); color: var(--c2u-red); }


/* ── Desktop right: Ivory Search + account icon ─────────────────────────────── */

.c2u-header-right {
  display: flex; align-items: center; gap: 14px;
  min-width: 0; flex-shrink: 1;
}

/* Ivory Search wrapper — controls width within the flex layout.
   The plugin's own CSS handles the form's internal styling.        */
.c2u-header__search {
  flex-shrink: 1;
  min-width: 0;
  width: 240px;
}
.c2u-header__search form {
  width: 100%;
}

.c2u-header-user {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c2u-navy); cursor: pointer; text-decoration: none;
  transition: color .18s ease;
}
.c2u-header-user:hover { color: var(--c2u-red); }


/* ── Mobile icon cluster (search · account · menu) — desktop-hidden ────────── */

.c2u-header-mobile { display: none; align-items: center; gap: 4px; }

.c2u-header-mobile button,
.c2u-header-mobile a {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: var(--c2u-navy); border-radius: 10px;
  text-decoration: none;
}
.c2u-header-mobile button:hover,
.c2u-header-mobile a:hover { background: rgba(12,52,74,0.06); }


/* ── Mobile search drop-down bar ────────────────────────────────────────────────
   Absolutely anchored to the bottom of the sticky bar so it floats OVER the page
   content (rather than pushing it down). overflow:hidden clips the panel during
   the slide animation; JS switches to overflow:visible once open so Ivory Search
   autocomplete results aren't clipped. */

.c2u-msearch {
  display: none; overflow: hidden; max-height: 0;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  transition: max-height .25s ease;
}
.c2u-msearch.is-open {
  max-height: 76px;
  border-top: 1px solid var(--c2u-line);
  box-shadow: 0 18px 28px -16px rgba(12, 52, 74, 0.22);
}
.c2u-msearch .c2u-header__search {
  width: auto;
  margin: 12px 20px;
}


/* ── Mobile nav — drops down below the bar ──────────────────────────────────── */

.c2u-mobile-menu {
  display: none;
  overflow: hidden;
  max-height: 0;
  position: absolute; top: 100%; left: 0; right: 0;
  padding: 0 20px;
  background: #fff;
  transition: max-height .3s ease;
}
.c2u-mobile-menu.is-open {
  max-height: min(480px, calc(100vh - 56px));
  overflow-y: auto;
  border-top: 1px solid var(--c2u-line);
  box-shadow: 0 18px 28px -16px rgba(12, 52, 74, 0.22);
}

.c2u-mobile-menu nav {
  display: flex; flex-direction: column;
  padding-top: 4px; padding-bottom: 16px;
}
.c2u-mobile-menu nav > a {
  font: 600 20px/1 var(--font-body); color: var(--c2u-navy);
  text-decoration: none; padding: 17px 4px;
}

.c2u-mobile-menu__sub {
  display: flex; flex-direction: column;
  padding: 4px 0 8px 16px;
}
.c2u-mobile-menu__sub a {
  font: 500 16px/1 var(--font-body); color: var(--c2u-muted);
  text-decoration: none; padding: 12px 4px;
}


/* ─────────────────────────────────────────────────────────────────────────
   TABLET + MOBILE (≤980px)
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .c2u-nav,
  .c2u-header-right  { display: none; }
  .c2u-header-mobile { display: flex; }
  .c2u-msearch       { display: block; }
  .c2u-mobile-menu   { display: block; }
  .c2u-header-bar    { padding: 12px 32px; }
}


/* ── MOBILE (≤767px) ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .c2u-header-bar { padding: 10px 20px; }
}