/**
 * Global shell components.
 *
 * Loaded only when the shell renders something (see inc/class-shell.php).
 */

/* ---------------------------------------------------------------------------
 * Announcement bar.
 *
 * Responsive strategy, from DESIGN.md section 8.1:
 *
 *   Desktop — all items on one centred row, separated by a small dot.
 *   Mobile  — a horizontally scrollable, snap-aligned row showing one item at
 *             a time under the USER's control.
 *
 * No auto-rotation and no JavaScript. Auto-rotation would put essential policy
 * information behind animation, which the spec forbids, and would fail
 * `prefers-reduced-motion`. Every item stays in the DOM at every width, so a
 * screen reader always reads the complete list even when only one is visible.
 * ------------------------------------------------------------------------- */

/* A narrow olive ribbon: policy reassurance, not a second navigation bar. */
.af-announce {
  background: var(--af-surface-promo);
  color: var(--af-color-ivory);
  font-family: var(--af-font-ui);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------------------------------------
 * Integration override: WoodMart's banner shell.
 *
 * Two values cannot be corrected in PHP. WoodMart builds them into generated
 * inline CSS from theme settings, bypassing the `woodmart_option` filter:
 *
 *   .wd-hb        { background-color: rgb(184,237,28) }   a lime green that is
 *                                                         in no part of the
 *                                                         AbayaFemme palette
 *   :root         { --wd-hb-opt-h: 90px }   150px under 1024px — sized for the
 *                                           three-line holiday paragraph that
 *                                           used to live here, leaving ~48px of
 *                                           empty coloured band around our
 *                                           single-line bar
 *
 * Both are overridden on a descendant so they win by proximity and specificity
 * rather than by source order, which a cache plugin is free to change.
 * ------------------------------------------------------------------------- */

.wd-hb-wrapp.wd-display {
  /* Let the bar's own content define the height. */
  --wd-hb-opt-h: auto;
}

.wd-hb-wrapp .wd-hb {
  /* Must match .af-announce, or WoodMart's shell shows a darker edge around the bar. */
  background-color: var(--af-surface-promo);
  background-image: none;
}

/* The bar fills the banner shell edge to edge; WoodMart's container padding
 * would otherwise leave a strip of banner ground either side. */
.wd-hb-wrapp .wd-hb > .container {
  padding: 0;
  max-width: none;
}

/* ---------------------------------------------------------------------------
 * Integration override: suppress the duplicated static shipping promise.
 *
 * WoodMart's header top bar carries the same promise twice as hand-typed text —
 * "Livraison OFFERTE en France pour toute commande à partir de 49€" — once in a
 * desktop column and once in a mobile column. Our bar is now the single dynamic
 * source, so leaving them would state the policy twice, and the static copies
 * are exactly the kind of hardcoded value that goes stale (the desktop one's
 * class is still named after the previous brand: `livraisonhijabpascher`).
 *
 * Both selectors come from classes persisted in the `whb_header_943376` option
 * and verified stable across requests. The second is a header-builder instance
 * ID rather than an authored name, which is the fragile part: if the owner
 * rebuilds that element the ID changes and the duplicate reappears. That fails
 * visibly, not silently, and only until AF-UI-002 rebuilds the header properly.
 *
 * The promo element (BIENVENUE10) and the social icons in the same bar are
 * deliberately left alone — they are not duplicated by our bar.
 *
 * Nothing is deleted. Both elements remain in the option, and because this rule
 * ships in shell.css — which only loads while the policy bar renders — disabling
 * the bar restores them automatically.
 * ------------------------------------------------------------------------- */
.wd-header-text.livraisonhijabpascher,          /* desktop column */
.wd-header-text.whb-7n3s38kwo1n06r9wk4zn {      /* mobile column  */
  display: none;
}

.af-announce__list {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;

  /* Mobile: one item per viewport, user-scrolled, snapping so an item is never
   * left half-visible. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.af-announce__list::-webkit-scrollbar {
  display: none;
}

.af-announce__item {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.45rem;
  /* WoodMart gives every `li` a 10px bottom margin (`:is(ul,ol) li{margin-bottom:var(--li-mb)}`).
   * On a flex row that margin joins the line's cross size, so a 46px band measured 56px. */
  margin: 0;
  padding: 0.45rem 1rem;
  text-align: center;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.af-announce__item > svg,
.af-announce__link > svg {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

.af-announce__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
}

.af-announce__link:hover,
.af-announce__link:focus-visible {
  text-decoration-thickness: 2px;
}

/* Focus ring needs to be visible against the dark ground: the shared
 * --af-color-focus blue does not carry enough contrast on the olive ground. */
.af-announce__link:focus-visible {
  outline-color: var(--af-color-sand);
}

@media (min-width: 1100px) {
  .af-announce__list {
    width: 100%;
    justify-content: space-between;
    padding-inline: clamp(1.5rem, 3.25vw, 4.5rem);
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .af-announce__item {
    flex: 0 1 auto;
    min-height: 2.45rem;
    padding-block: 0;
    padding-inline: 0;
    white-space: nowrap;
  }

}