/*
 * BesaPharm site header styles.
 */

/* Montserrat is the site face. It is enqueued in inc/enqueue.php with
 * preconnect, not @import-ed here — an @import inside a stylesheet is
 * render-blocking, serialises behind this file, and made the webfont depend on
 * this one file loading. The weights loaded are 300–800; a weight that is not
 * loaded renders as the nearest one that is, silently, which is why 300 headings
 * were previously coming out looking like 400. */

:root {
  /* ---------- Brand ----------
   * These no longer carry their own values. Every one resolves through
   * tokens.css, which is the single source of truth for the whole theme —
   * previously this file kept a parallel palette that disagreed with
   * tokens.css on accent, text, border and surface.
   */
  /* brand → accent, brand-hover → accent-hover: eflow's pair is #000000
   * lifting to #111111 on hover. Mapping brand onto --oxa-primary instead
   * would make it #111111 too and collapse the hover to no change at all. */
  --bp-brand:        var(--oxa-accent);        /* #000000 */
  --bp-brand-hover:  var(--oxa-accent-hover);  /* #111111 — was #3d3d3d */
  --bp-brand-ink:    var(--oxa-on-primary);    /* #ffffff */
  --bp-accent:       var(--oxa-accent);        /* #000000 — was #e11d48 */

  /* Legacy names, kept as aliases so any rule still spelling them keeps working. */
  --bp-green:        var(--bp-brand);
  --bp-green-dark:   var(--bp-brand-hover);
  --bp-announce-bg:  var(--bp-brand);

  --bp-text:         var(--oxa-text);      /* #43454b — was #111827 */
  --bp-muted:        var(--oxa-muted);
  --bp-border:       var(--oxa-border);    /* was #e5e7eb */
  --bp-surface:      var(--oxa-surface);   /* was #f3f4f6 */
  --bp-bg:           var(--oxa-bg);
  --bp-pill-radius:  var(--oxa-radius-pill);

  /* Header design — overridden per-site from Appearance → Header. */
  --bp-hdr-pad:        12px;
  --bp-hdr-row:        60px;   /* 60 + 12 + 12 = the reference's 84px header */
  --bp-hdr-logo-h:     60px;   /* renders 78.75 x 60 from the 105x80 source */
  --bp-hdr-logo-h-mobile: 40px;
  --bp-hdr-gap:        32px;
  --bp-hdr-bg:         var(--oxa-header-bg);      /* #ffffff */
  --bp-hdr-border:     var(--oxa-border);
  --bp-hdr-border-w:   0px;
  /* Body ink, not --oxa-header-fg. The reference's #9aa0a7 is the colour on the
   * header *container*, which its menu links then override; reading the audit
   * line as "the menu is #9aa0a7" made the nav render far lighter than the
   * reference's, which is dark. */
  --bp-hdr-nav-fg:     var(--oxa-text);           /* #43454b */
  --bp-hdr-nav-hover:  var(--oxa-accent-hover);   /* #111111 */
  /* Red, not the site's black accent: this token colours the "Blej 1, Merr 1
   * FALAS" menu item and the cart badge, both of which are meant to catch the
   * eye. Scoped to the header, so buttons elsewhere stay black. */
  --bp-hdr-accent:     #ff0000;
  --bp-hdr-nav-size:   14px;
  --bp-hdr-nav-weight: 500;
  --bp-hdr-nav-pad:    10px;
  --bp-hdr-nav-offset: 12px;
  --bp-hdr-icon:       22px;
  --bp-hdr-icon-fg:    #111827;
}

@media (max-width: 1024px) { .bp-site-header { display: none; } }

.bp-site-header {
  background: var(--bp-hdr-bg, #ffffff) !important;
  color: var(--bp-text);
  font-family: var(--oxa-font-sans);
  border-bottom: var(--bp-hdr-border-w, 0px) solid var(--bp-hdr-border, #e5e7eb);
}

.bp-container {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Align the header content box with the page content column
 * (cart / shop / single-product main column = 1280px, flush — matches the
 * breadcrumb, page title and cart table). Scoped to the header so the footer
 * and announcement bar keep their own widths. */
.bp-site-header .bp-container {
  max-width: 1280px;
  padding-inline: 0;
}

/* ---------- Announcement bar ----------
 * One line of text that travels the full width of the bar and reverses when it
 * reaches an edge (`alternate` on an infinite animation = a bounce).
 *
 * The travel distance is "track width minus text width", which CSS alone can't
 * express: a percentage inside translateX() resolves against the element's own
 * width, never the parent's. So bp-announce-bounce reads it from
 * --bp-bounce-dist, which main.js measures and rewrites on resize. The calc()
 * fallback keeps the text moving if that JS never runs — it just overshoots by
 * the width of the scrollbar.
 */
/* Paint and padding come from Appearance → Announcement Bar, which sets
 * --bp-announce-* on the element itself; the values below are only fallbacks. */
.bp-announcement {
  background: var(--bp-announce-bg, #000000);
  color: var(--bp-announce-fg, #ffffff);
  font-family: var(--oxa-font-sans);
  font-size: var(--bp-announce-size, 16px);
  line-height: 1.5;
  font-weight: var(--bp-announce-weight, 600);
  /* Padding on all four sides. The inline padding also insets the bounce: the
   * marquee is the flex child, so its clientWidth (which the JS measures) already
   * excludes it — no change needed in main.js. */
  padding-block: var(--bp-announce-pad-y, 12px);
  padding-inline: var(--bp-announce-pad-x, 12px);
  /* The bouncing line is absolutely positioned and the marquee only stretches,
   * so neither contributes any height. Without this the bar collapses to its
   * padding and the text is clipped away. box-sizing is border-box, so the
   * padding is inside this figure. */
  min-height: calc(var(--bp-announce-size, 16px) * 1.5 + var(--bp-announce-pad-y, 12px) * 2);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.bp-announcement--uppercase { text-transform: uppercase; }
.bp-announcement__marquee {
  position: relative;
  flex: 1;
  /* stretch, not height:100% — the bar is min-height'd, so a percentage height
   * would resolve against an indefinite parent and collapse to zero. */
  align-self: stretch;
  overflow: hidden;
}
.bp-announcement__bounce {
  position: absolute;
  top: 50%;
  left: 0;
  margin: 0;
  white-space: nowrap;
  will-change: transform;
  transform: translate(0, -50%);
  animation: bp-announce-bounce var(--bp-bounce-dur, 14s) linear infinite alternate;
}
@keyframes bp-announce-bounce {
  from { transform: translate(0, -50%); }
  to   { transform: translate(var(--bp-bounce-dist, calc(100vw - 100%)), -50%); }
}
.bp-announcement__sep { opacity: 0.55; margin-inline: 0.5rem; }

/* Motion is the whole point of this bar, so when it's unwelcome fall back to
 * plain centred text rather than to a stationary line pinned at the left edge. */
@media (prefers-reduced-motion: reduce) {
  .bp-announcement__marquee {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bp-announcement__bounce {
    position: static;
    animation: none;
    transform: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---------- Single header row ----------
 * Logo, nav and the three icon actions all sit on one line; the old second
 * "nav row" is gone, so bp-headroom.js no-ops (it guards on a null .bp-header-nav). */
.bp-header-main { padding-block: var(--bp-hdr-pad); }
/* auto | 5fr | 1fr mirrors the reference: the logo takes what it needs, the menu
 * gets the bulk of the row, the icons keep a fixed slot at the right. */
.bp-header-main__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 5fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--bp-hdr-gap);
  min-height: var(--bp-hdr-row);
}
.bp-header-main__inner .bp-nav { min-width: 0; }
.bp-site-header--upper .bp-nav__item > a { text-transform: uppercase; }

/* Logo */
.bp-logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
/* max-height, not height: a logo smaller than the cap keeps its natural size
 * instead of being stretched. */
.bp-logo__img {
  max-height: var(--bp-hdr-logo-h);
  width: auto; height: auto; object-fit: contain; display: block;
}
/* Shown only when no logo image is set in the Customizer. */
.bp-logo__text {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--bp-text); line-height: 1; white-space: nowrap;
}

/* Search — an inline field that grows out of the icon beside it, rather than a
 * bar dropped under the whole header. `hidden` alone would be overridden by the
 * display:flex below, so it is re-asserted. */
/* Out of the flex flow: the nav leaves about 100px before the icons, and a
 * 190px field in the row squeezed all three icons to zero width. Anchored to
 * the icon cluster instead, it opens leftwards over the end of the nav and
 * nothing else moves. */
.bp-search {
  /* In the row, not over it: the menu stays readable and the field takes the
   * gap between the nav and the icons. Narrow on purpose — the reference
   * truncates its own placeholder at about this width. */
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 0.4rem;
  /* Does not give up its width: the nav yields the ~40px instead, which it can
   * afford from the spacing between its items. */
  flex: 0 0 auto;
}
.bp-search[hidden] { display: none; }
.bp-search__input {
  /* Sized to the placeholder rather than picked by eye: "Kërkoni për ..."
   * measures 101px in this face, plus 4px of padding each side. Narrower than
   * this and the text is cut mid-character. */
  width: 115px;
  min-width: 0;
  height: 34px;
  padding: 0 0.25rem;
  border: 0;
  /* A rule under the text, not a box around it: the field is a guest in the
   * icon row and a bordered pill would out-shout the icons next to it. */
  border-bottom: 1px solid var(--bp-border, #d5d7dd);
  border-radius: 0;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--bp-text);
  outline: none;
  transition: border-color 0.2s ease;
}
.bp-search__input:focus { border-bottom-color: var(--bp-brand, #111111); }
.bp-search__input::placeholder { color: var(--bp-muted); }
.bp-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

@media (max-width: 480px) {
  .bp-search__input { width: 120px; }
}

/* Header actions */
/* Tight: the three controls read as one cluster, as in the reference. */
/* Dropped 15px so the icon glyphs centre on the menu text rather than floating
 * above it. Measured: nav text runs 93..111 and the glyph 76..98, so the two
 * centres were 15px apart. Offset rather than padding, so nothing else in the
 * row shifts. */
.bp-header-actions {
  position: relative;
  top: 15px;
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
}
/* The icons keep their size whatever else is in the row. */
.bp-header-actions > .bp-icon-btn,
.bp-header-actions > .bp-auth-wrap { flex: 0 0 auto; }

/* Icon actions — plain icons, no pill. */
.bp-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--bp-hdr-icon) + 18px);
  height: calc(var(--bp-hdr-icon) + 18px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--bp-hdr-icon-fg, #111827);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: color 0.15s ease;
}
.bp-icon-btn:hover,
.bp-icon-btn:focus-visible { color: var(--bp-hdr-nav-hover, #111111); }
.bp-icon-btn svg { width: var(--bp-hdr-icon); height: var(--bp-hdr-icon); }
.bp-header-actions { justify-content: flex-end; }

/* The account icon stays exactly as it is under the pointer — no colour shift,
 * no menu. Stated after the rule above so it wins on source order, and it
 * leaves :focus-visible alone: a keyboard user still needs to see where they
 * are. The dropdown that used to hang off .bp-auth-wrap is gone from
 * header.php along with its styles; the icon is a link to /my-account/ now. */
.bp-icon-btn.bp-auth:hover { color: var(--bp-hdr-icon-fg, #111827); }

/* The cart button is icon-only. WooCommerce caches the fragment markup in
 * sessionStorage, so a visitor can still be served the old icon+price pill from
 * before that fragment was rewritten — which would make the header row two lines
 * tall again. Hiding it here means no cached markup can change the layout. */
.bp-cart__amount { display: none !important; }

/* Cart count rides on the bare icon, so it inverts to read against the page. */
.bp-cart__count {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  border-radius: 9999px;
  /* Its own red, not the accent token: the badge is #ef4444 while the
   * "Blej 1, Merr 1 FALAS" menu item stays the brighter #ff0000. */
  background: var(--bp-hdr-badge, #ef4444);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ---------- Secondary nav row ---------- */
.bp-header-nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.bp-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 0;
  /* Optical nudge. The menu box and the logo box are already centred on each
   * other to within a pixel; this shifts the text down so it reads as level
   * against this particular logo's artwork. Set to 0 for pure box centring. */
  position: relative;
  top: var(--bp-hdr-nav-offset, 0px);
}
.bp-nav__item > a,
.bp-nav__trigger {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding-inline: var(--bp-hdr-nav-pad); height: var(--bp-hdr-row);
  font-size: var(--bp-hdr-nav-size); font-weight: var(--bp-hdr-nav-weight);
  color: var(--bp-hdr-nav-fg, #43454b);
  text-decoration: none; white-space: nowrap; transition: color 0.2s ease;
}
/* No color change on hover — keep the same #333333 */
.bp-nav__item > a:hover,
.bp-nav__item:hover > a,
.bp-nav__trigger:hover { color: var(--bp-hdr-nav-hover, #111111); }
/* Full opacity: the caret is drawn in its own colour in bp-nav.css, and a 0.5
 * fade there made pure black render as mid-grey regardless of the colour set. */
.bp-nav__caret { display: inline-flex; align-items: center; opacity: 1; transition: transform 0.2s ease; }
/* Add the CSS class "is-accent" to a menu item in Appearance → Menus to colour
 * it — that is how the "Blej 1, Merr 1 FALAS" item reads red. */
.bp-nav__item.is-accent > a,
.bp-nav__item.is-accent:hover > a { color: var(--bp-hdr-accent, #000000); }
/* Whether the arrow flips while its dropdown is open is a setting — the
 * reference leaves it pointing down throughout, so the default angle is 0. */
.bp-nav__item--has-children:hover .bp-nav__caret,
.bp-nav__item--has-children:focus-within .bp-nav__caret {
  transform: rotate(var(--bp-hdr-caret-rotate, 0deg));
}

/* First nav item sits flush-left with the logo / content edge */
.bp-nav__list > .bp-nav__item:first-child > a,
.bp-nav__list > .bp-nav__item:first-child .bp-nav__trigger {
  padding-left: 0;
}

/* Meta blocks */
.bp-header-meta { display: flex; align-items: center; gap: 1.5rem; }
.bp-meta-block { display: flex; align-items: center; gap: 0.625rem; }
.bp-meta-block__icon { display: flex; align-items: center; color: #333333; }
.bp-meta-block__img { display: block; width: 28px; height: 28px; object-fit: contain; }
.bp-meta-block__text {
  display: flex; flex-direction: column; gap: 0.125rem;
  font-family: var(--oxa-font-sans);
}
.bp-meta-block__top { font-size: 13px; color: #333333; }
.bp-meta-block__bottom { font-size: 16px; font-weight: 600; color: #333333; }
.bp-meta-block__bottom--phone,
.bp-meta-block__bottom--phone:hover,
.bp-meta-block__bottom--phone:focus {
  color: #333333;
  text-decoration: none;
  opacity: 1;
}