/**
 * header.css
 * Brand overrides for Astra's Header Builder output.
 *
 * Astra generates its own dynamic CSS (via wp_add_inline_style) for header
 * colours and fonts set in the Customizer. This file loads after that dynamic
 * CSS and applies the Domaine Porta visual identity to Astra's native classes.
 *
 * CSS custom properties are defined in style.css :root and must be used here.
 * Never hardcode colour, font, or spacing values.
 *
 * Astra class reference (confirmed from source):
 *   .main-header-bar             — primary header row div
 *   .ast-primary-header-bar      — same element, Astra-specific class
 *   .site-primary-header-wrap    — inner container (wraps the grid columns)
 *   .ast-site-identity           — logo / site title component
 *   .site-title a                — text logo link (before image is uploaded)
 *   .custom-logo                 — image logo <img> (WordPress standard)
 *   .main-header-menu            — navigation <ul>
 *   .menu-link                   — nav link <a> (Astra's class, not .nav-link)
 *   .current-menu-item           — WP active-page class on <li>
 *   .current-menu-ancestor       — WP active-ancestor class on <li>
 *   .ast-site-header-cart        — WooCommerce cart icon widget
 *   .ast-mobile-header-wrap      — mobile header wrapper (#ast-mobile-header)
 *   .ast-menu-toggle             — mobile hamburger button
 *   .ast-header-break-point      — body class added at mobile breakpoint
 *
 * @package astra-child
 */

/* ── Sticky behavior ────────────────────────────────────────────────────── */

/*
 * #masthead is the Astra <header> element (confirmed: always carries .site-header).
 * position: sticky keeps it pinned at the viewport top while the user scrolls,
 * without removing it from document flow (unlike position: fixed).
 * Page content therefore flows naturally below — no padding or spacer hack needed.
 *
 * z-index: 100 places it above the /domaine sticky anchor nav (z-index: 99)
 * and all page content, but well below the WP admin bar (z-index: 99999).
 *
 * The box-shadow is permanent rather than scroll-triggered (which would require JS).
 * It is subtle enough to read as intentional at the top of any page, and more
 * visually useful as the header floats above scrolled content.
 *
 * Compatibility: body { overflow-x: hidden } in base.css is axis-specific and
 * does not prevent vertical position: sticky in any current browser.
 */
#masthead {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.08);
}

/*
 * The WP admin bar is position: fixed at top: 0 (32px on desktop, 46px on
 * screens ≤ 782px). WordPress core adds margin-top to <body> when logged in.
 * Offsetting #masthead top by the admin bar height makes it stick just below it
 * rather than behind it. Public visitors are unaffected — body.admin-bar is only
 * present for logged-in users with the admin bar enabled.
 */
body.admin-bar #masthead {
  top: 32px;
}

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

/* ── Header bar ─────────────────────────────────────────────────────────── */

/* Apply brand background and a hairline separator on the primary header row. */
.main-header-bar {
  background-color: var(--color-bg);
  border-bottom: 1px solid rgba(26, 26, 26, 0.08);
}

/* Ensure the inner grid row is vertically centred and has breathing room. */
.main-header-bar .site-primary-header-wrap.ast-container {
  min-height: 72px;
  align-items: center;
}

/* ── Site identity — text logo (before image is uploaded) ───────────────── */

/*
 * Astra outputs the site title inside .ast-site-identity → .site-title → <a>.
 * Style it as a heading-font (Marcellus) wordmark in brand burgundy.
 * Once an image logo is uploaded in Customizer → Logo, the <a> becomes an
 * image link and these text rules become irrelevant — only the img rules below
 * will apply.
 */
.ast-site-identity .site-title a,
.ast-site-identity .site-title a:visited {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-accent);
  letter-spacing: 0.02em;
  text-decoration: none;
}

.ast-site-identity .site-title a:hover,
.ast-site-identity .site-title a:focus {
  color: var(--color-gold-text);
  text-decoration: none;
}

/* ── Site identity — image logo ─────────────────────────────────────────── */

/*
 * Cap the logo image height so it never overflows the 80px header.
 * Width: auto preserves aspect ratio.
 * The logo retina srcset WordPress generates will handle HiDPI displays.
 */
.ast-site-identity .custom-logo {
  max-height: 52px;
  width: auto;
  display: block;
}

/*
 * Hide the site title text when an image logo is present.
 * The Site Title must remain set in WP Admin → Settings → General (it feeds
 * og:site_name and the Organization JSON-LD schema), but it should not render
 * visually alongside the logo in the header.
 */
.ast-site-identity .site-title {
  display: none;
}

/* ── Primary navigation links ────────────────────────────────────────────── */

/*
 * Astra's Header Builder injects an inline <style> tag via wp_add_inline_style()
 * targeting .ast-builder-menu-1 .menu-item > .menu-link with its customizer
 * accent colour. This selector has identical specificity (0,3,0) to our class
 * selectors below but loads AFTER enqueued stylesheets in <head>, so it wins.
 *
 * Fix: prefix every colour rule with #masthead (ID selector = specificity 1,0,0).
 * (1,3,0) beats Astra's (0,3,0) without needing !important.
 * All other nav properties (font, padding, transition) remain class-only since
 * Astra does not override them.
 */

/* Base link style — Inter, small caps variant, body-text colour. */
.main-header-menu .menu-item > .menu-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  transition: color var(--duration-fast) ease;
}

#masthead .main-header-menu .menu-item > .menu-link {
  color: var(--color-text);
}

/* Hover and keyboard-focus state */
#masthead .main-header-menu .menu-item:hover > .menu-link,
#masthead .main-header-menu .menu-item.focus > .menu-link {
  color: var(--color-accent);
}

/* Active page — current page and any ancestor of it */
#masthead .main-header-menu .current-menu-item > .menu-link,
#masthead .main-header-menu .current-menu-ancestor > .menu-link {
  color: var(--color-accent);
}

/* ── Language switcher « FR · DE · EN » (audit 07-006) ───────────────────── */

/*
 * Last item of the main and mobile menus (inc/language-switcher.php). Not a
 * .menu-link: three short links in one item, set like the menu links (same
 * font, tracking, colours) but smaller and lighter, so they read as a utility,
 * not a page. Hidden with the menu on the distraction-free checkout; the footer
 * copy stays (components.css). Prints nothing while French is the only public
 * language.
 */
.porta-lang-item {
  display: flex;
  align-items: center;
}

.porta-lang--menu {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
}

#masthead .porta-lang--menu .porta-lang__link {
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

#masthead .porta-lang--menu .porta-lang__link:hover {
  color: var(--color-accent);
}

#masthead .porta-lang--menu .porta-lang__current {
  color: var(--color-accent);
}

.porta-lang--menu .porta-lang__sep {
  color: var(--color-text-light);
}

.porta-lang abbr {
  border: 0;
  text-decoration: none;
  cursor: default;
}

/* ── WooCommerce cart icon ───────────────────────────────────────────────── */

/*
 * WooCommerce cart widget — brand override.
 *
 * Astra's Header Builder outputs the cart as:
 *   div.ast-site-header-cart
 *     a (the cart link, with WC/Astra blue background by default)
 *       div.ast-cart-menu-wrap
 *         [svg/img icon] + [span.count]
 *
 * WooCommerce's own stylesheet and Astra's inline customizer CSS both inject
 * a blue background-color (typically #0073aa or #046BD2) on the link/wrapper.
 * We reset every candidate to transparent with !important because Astra
 * injects its inline <style> after all enqueued files — normal specificity
 * cannot win; !important on a class selector is the correct tool here.
 */
.ast-site-header-cart,
.ast-site-header-cart a,
.ast-site-header-cart a:hover,
.ast-site-header-cart a:focus,
.ast-header-woo-cart,
.ast-header-woo-cart a,
.ast-site-header-cart .ast-cart-menu-wrap,
.ast-header-woo-cart .ast-cart-menu-wrap {
  background: none !important; /* the shorthand also clears background-color */
  border: none !important;
  box-shadow: none !important;
}

/*
 * Icon color override.
 * Astra uses .ast-addon-cart-wrap and renders the bag as
 * <i class="astra-icon ast-icon-shopping-bag" data-cart-total="N">
 * The SVG inherits `color` via currentColor.
 */
.ast-site-header-cart a,
.ast-site-header-cart .ast-addon-cart-wrap,
.ast-site-header-cart .ast-site-header-cart-li,
.ast-site-header-cart .astra-icon,
.ast-site-header-cart .ast-icon {
  color: var(--color-text) !important;
}

.ast-site-header-cart a:hover .ast-addon-cart-wrap,
.ast-site-header-cart a:hover .astra-icon,
.ast-site-header-cart a:hover .ast-icon {
  color: var(--color-accent) !important;
}

/*
 * .ast-addon-cart-wrap has a 2px blue border from Astra's customizer inline CSS.
 * Replace with a neutral tone that matches the header border.
 */
.ast-site-header-cart .ast-addon-cart-wrap {
  border-color: rgba(26, 26, 26, 0.15) !important;
}

/*
 * Cart count badge: Astra outputs it as .astra-icon::after using
 * data-cart-total attribute (content: attr(data-cart-total)).
 * Override the blue background with brand burgundy.
 */
.ast-site-header-cart .astra-icon::after {
  background-color: var(--color-accent) !important;
}

/* Cart item-count badge — remains burgundy */
.ast-site-header-cart .count,
.ast-header-woo-cart .count {
  background-color: var(--color-accent) !important;
  color: var(--color-white) !important;
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* ── Mobile header ───────────────────────────────────────────────────────── */

/* Keep brand background on the mobile bar. */
.ast-mobile-header-wrap .main-header-bar {
  background-color: var(--color-bg);
}

/* Exactly --header-height (80px) at every width the menu button shows: the
   logo grows from 46 to 52px at 768px and the bar followed it to 82–85px,
   so the heroes' « screen minus header » was off by a few pixels (09-018). */
#ast-mobile-header .ast-primary-header-bar {
  height: var(--header-height);
  min-height: 0;
  box-sizing: border-box;
}

/*
 * Hamburger / close button — brand dark text color.
 * Astra's inline customizer CSS overrides color, so !important is required.
 * The lines are drawn as SVG paths or CSS bars inheriting currentColor.
 */
.ast-menu-toggle,
.menu-toggle {
  color: var(--color-text) !important;
  background: transparent !important;
  border: none !important;
}

/* A tap leaves no dotted outline on the menu button (Astra's :focus style,
   audit 09-029); keyboard focus keeps the burgundy ring (base.css). Escape
   does not close Astra's mobile menu — accepted (the button stays next to
   it, and focus never leaves the menu's reach); recorded in CLAUDE.md. */
#masthead .menu-toggle:focus:not(:focus-visible) {
  outline: none !important;
}

/* 44px touch targets (audit 09-011): the menu button was 40px, the cart 39px.
   The drawn icons do not change. */
#masthead .menu-toggle {
  min-width: var(--tap-size);
  min-height: var(--tap-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#masthead .ast-site-header-cart a.cart-container {
  min-width: var(--tap-size);
  min-height: var(--tap-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
 * SVG inside the hamburger button.
 * Astra sets an explicit fill (its blue accent) on .ast-mobile-svg via its
 * inline customizer CSS — this overrides the svg fill="currentColor" attribute.
 * We must override fill directly on both the SVG and its path children.
 * Selector uses .menu-toggle (the actual class) not .ast-menu-toggle (not present).
 */
.menu-toggle svg,
.menu-toggle svg path,
.ast-menu-toggle svg,
.ast-menu-toggle svg path {
  fill: var(--color-text) !important;
  color: var(--color-text) !important;
  stroke: none !important;
}

.ast-menu-toggle .menu-toggle-icon,
.ast-menu-toggle .menu-toggle-icon::before,
.ast-menu-toggle .menu-toggle-icon::after {
  background-color: var(--color-text) !important;
}

.ast-menu-toggle:hover,
.menu-toggle:hover {
  color: var(--color-accent) !important;
}

.menu-toggle:hover svg,
.menu-toggle:hover svg path,
.ast-menu-toggle:hover svg,
.ast-menu-toggle:hover svg path {
  fill: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.ast-menu-toggle:hover .menu-toggle-icon,
.ast-menu-toggle:hover .menu-toggle-icon::before,
.ast-menu-toggle:hover .menu-toggle-icon::after {
  background-color: var(--color-accent) !important;
}

/*
 * Off-canvas or dropdown nav panel background + shadow.
 * .ast-header-break-point is added to <body> at Astra's mobile breakpoint
 * (default 921px). The nav slides in/out of .main-header-bar-navigation.
 * Shadow matches the domaine anchor nav dropdown for visual consistency.
 */
.ast-header-break-point .main-header-bar-navigation {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ast-header-break-point .main-header-bar-navigation .main-header-menu {
  background-color: var(--color-bg);
}

/* Mobile nav links — stacked, with a light divider between items. */
.ast-header-break-point .main-header-menu .menu-item > .menu-link {
  color: var(--color-text);
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-bg-alt);
}

.ast-header-break-point .main-header-menu .menu-item:hover > .menu-link,
.ast-header-break-point .main-header-menu .menu-item.focus > .menu-link,
.ast-header-break-point .main-header-menu .current-menu-item > .menu-link,
.ast-header-break-point .main-header-menu .current-menu-ancestor > .menu-link {
  color: var(--color-accent);
}

/* Mobile menu: the switcher is the last row, left-aligned and padded like the
   links above it. */
.ast-header-break-point .main-header-menu .porta-lang-item {
  align-items: flex-start; /* Astra stacks menu items as flex columns */
}

.ast-header-break-point .main-header-menu .porta-lang--menu {
  padding: 0.75rem 1.25rem;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Slightly taller header on larger screens. */
@media (min-width: 768px) {
  .main-header-bar .site-primary-header-wrap.ast-container {
    min-height: 80px;
  }
}

/* ── Mini-cart panel ─────────────────────────────────────────────────────── */

/*
 * Loaded here (header.css = global) rather than woocommerce.css (commerce pages
 * only) because the cart icon lives in the header on every page. Without these
 * styles on editorial pages (contact, agenda, domaine …) the slide-out panel
 * falls back to plain browser-default links and layout.
 */

/*
 * Mini-cart item layout.
 * WooCommerce renders: <a class="remove">×</a> <a><img/>name</a> <span.quantity>
 * The remove link is first in DOM and flows inline, overlapping the product name.
 * Fix: position:relative on <li>, position:absolute on .remove (top-right),
 * and padding-right on the <li> so the name text never reaches the × area.
 */
.woocommerce-mini-cart-item {
  position: relative;
  padding-right: 1.75rem !important;
}

.woocommerce-mini-cart-item .remove {
  position: absolute;
  top: 0.25rem;
  right: 0;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}

.woocommerce-mini-cart-item .remove:hover {
  color: var(--color-accent);
}

/* Product thumbnail — object-fit contain so bottle is never cropped.
 * Astra sets object-fit:cover on mini-cart images — !important required. */
.woocommerce-mini-cart-item img {
  width: 56px !important;
  height: 56px !important;
  object-fit: contain !important;
  background: var(--color-white);
  border-radius: var(--border-radius);
  flex-shrink: 0;
}

/* Subtotal row — prevent "Sous-total :" wrapping to two lines */
.woocommerce-mini-cart__total {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  border-top: 1px solid var(--color-bg-alt);
  padding-top: 1rem;
  margin-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.woocommerce-mini-cart__total strong {
  white-space: nowrap;
}

/* Bottle details on ONE line (owner S9-Q15, audit 02-022): « 70 cl · 2024 »
   in small grey text, instead of Astra's indented list with a grey rule and
   one line per label and per value. */
.ast-site-header-cart .woocommerce-mini-cart-item dl.variation {
  display: block !important;
  margin: 0.125rem 0 0.25rem !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-text-light);
}

.ast-site-header-cart .woocommerce-mini-cart-item dl.variation dt,
.ast-site-header-cart .woocommerce-mini-cart-item dl.variation dd,
.ast-site-header-cart .woocommerce-mini-cart-item dl.variation p {
  display: inline !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-weight: 400 !important;
}

.ast-site-header-cart .woocommerce-mini-cart-item dl.variation dd:not(:last-of-type)::after {
  content: ' · ';
}

/* The labels (« Contenu : », « Millésime : ») stay for screen readers only:
   in the 280px panel « 70 cl · 2025 » reads on one line, a year and a size
   need no caption. */
.ast-site-header-cart .woocommerce-mini-cart-item dl.variation dt {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Mini-cart action buttons — inside the button system since audit 02-022
 * (owner S9-Q15): « Voir le panier » is a 1px burgundy hairline (the
 * --hairline role; the old 2px beige ghost border was invisible on white),
 * « Commander » the solid primary; « Voir mon compte » a text link below,
 * as on the cart page. Full width, stacked, 44px.
 */
.woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.woocommerce-mini-cart__buttons .button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap-size);
  padding: 0.5rem 1rem !important;
  line-height: 1.15 !important;
  font-family: var(--font-body);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--border-radius);
  transition: background-color var(--duration) ease, border-color var(--duration) ease, color var(--duration) ease;
  box-sizing: border-box;
}

/* « Voir le panier » — hairline. Full border shorthand: .ast-site-header-cart
   a:hover { border: none !important } (0,2,1) also resets border-style. */
.woocommerce-mini-cart__buttons .wc-forward:not(.checkout),
.woocommerce-mini-cart__buttons .wc-forward:not(.checkout):focus {
  background: transparent !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.woocommerce-mini-cart__buttons .wc-forward:not(.checkout):hover {
  background: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-white) !important;
}

/* « Commander » — solid primary. !important: Astra overrides .woocommerce a.button. */
.woocommerce-mini-cart__buttons .checkout,
.woocommerce-mini-cart__buttons .checkout:focus {
  background-color: var(--color-accent) !important;
  border: 1px solid var(--color-accent) !important;
  color: var(--color-white) !important;
}

.woocommerce-mini-cart__buttons .checkout:hover {
  background-color: var(--color-accent-dark) !important;
  border: 1px solid var(--color-accent-dark) !important;
  color: var(--color-white) !important;
}

.woocommerce-mini-cart__buttons .checkout:active {
  background-color: var(--color-accent-pressed) !important;
  border: 1px solid var(--color-accent-pressed) !important;
}

/* « Voir mon compte » — a text link (the <a> is plain since 02-022). The 21px
   side padding matches Astra's on .woocommerce-mini-cart__buttons. */
.porta-mini-cart__account {
  margin: 0.25rem 0 0.75rem;
  padding: 0 21px;
  text-align: center;
}

.ast-site-header-cart .porta-mini-cart__account a {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--tap-size-link);
  font-size: var(--text-sm);
  color: var(--color-text-light) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.ast-site-header-cart .porta-mini-cart__account a:hover {
  color: var(--color-accent) !important;
}

/* ── Scroll to top button ─────────────────────────────────────────────────── */
/*
 * Astra's built-in scroll-to-top button. Enabled/disabled in
 * Appearance → Customize → Scroll To Top.
 * Astra's customizer sets colors via inline style — !important required.
 */

#ast-scroll-top {
  background-color: var(--color-accent) !important;
  border-radius: var(--border-radius) !important;
  border: none !important;
}

#ast-scroll-top:hover,
#ast-scroll-top:focus {
  background-color: var(--color-accent-dark) !important;
  border: none !important;
}

/* Quiet for mouse clicks; keyboard focus gets the branded ring below —
   Astra's own dotted #ast-scroll-top:focus style needs the !important. */
#ast-scroll-top:focus:not(:focus-visible) {
  outline: none !important;
}

#ast-scroll-top:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px;
}

/* ── Distraction-free checkout ─────────────────────────────────────────── */

/*
 * On /commande the main menu (desktop) and the hamburger (mobile) are hidden;
 * the logo (link home) and the cart icon stay. Every menu link is an exit at
 * the moment of paying — an enclosed checkout is the standard recommendation
 * of checkout usability research, and Shopify's default. Decided 2026-10-04.
 *
 * .porta-checkout-focus is added by porta_checkout_focus_body_class()
 * (inc/checkout.php) on the checkout only — never on the order
 * confirmation, where the customer should be free to browse again.
 *
 * !important: Astra's header builder sets display on these elements with
 * equally specific selectors in its own inline CSS.
 */
.porta-checkout-focus #masthead .ast-builder-menu-1,
.porta-checkout-focus #masthead .ast-builder-menu-mobile,
.porta-checkout-focus #masthead [data-section="section-header-mobile-trigger"] {
  display: none !important;
}

/* ── Menu button up to 1239px (design review B7-1, audit 09-030) ─────────────
 * inc/header.php moves Astra's header breakpoint from 921px to 1239px (the
 * body class and Astra's script follow the filter), but the Header Builder
 * prints its desktop/mobile switch with the tablet breakpoint fixed at
 * 921.99px / 922px. Between 922px and 1239px the full menu wrapped onto two
 * rows (183px); this shows the mobile header there instead. 1240px, not
 * 1239px: Astra tests (max-width: 1239.99px), which Chrome rounds to 1240px
 * (layout units of 1/64px) — the same quirk makes it switch at 922px, not
 * 921px. Keep the two numbers in
 * step with porta_header_break_point(). */
@media (min-width: 922px) and (max-width: 1240px) {
  #ast-desktop-header {
    display: none;
  }

  #ast-mobile-header {
    display: block;
  }
}