/*
 * Footer — editorial site footer (concept: dark newsletter band + light column body).
 * Reuse unit: block style on core/group (.is-style-wpdl-footer). Consumes ONLY
 * token CSS vars (no raw hex; px only for hairlines/icon sizing that have no token).
 *
 * Layout (desktop):
 *   .wpdl-footer                     full-bleed wrapper, paper body
 *     .wpdl-footer__news             dark ink band (full width)
 *       .wpdl-footer__news-inner     constrained: text ↔ email form
 *     .wpdl-footer__body             constrained paper body
 *       .wpdl-footer__grid           4 cols: brand(+social) · SHOP · HELP · VISIT
 *       .wpdl-footer__divider
 *       .wpdl-footer__bottom         © · legal links · back-to-top (F2)
 *
 * Light variant (.is-style-wpdl-footer-light, F5): band becomes paper too.
 *
 * Tokens read: component.footer.bg/text · semantic.color.bg.base ·
 *   semantic.color.text.primary/secondary/muted · semantic.color.border.base ·
 *   semantic.color.interactive.default/hover/focus · semantic.typography.display/
 *   label/body/small · space.4/5/7/9/11/14 · duration.base · easing.default
 */

/* stylelint-disable no-descending-specificity */

/* ─── Root wrapper (paper, full-bleed) — both patterns carry .wpdl-footer ─── */

.wp-block-group.wpdl-footer {
  padding: 0;
  background-color: var(--wp--custom--semantic--color--background--canvas);
  color: var(--wp--custom--semantic--color--text--primary);
}

/* ─── Newsletter band (dark ink, full width) ──────────────────────────────── */

.wpdl-footer__news {
  background-color: var(--wp--custom--component--footer--bg);
  color: var(--wp--custom--component--footer--text);
  padding-block: var(--wp--custom--space--11);
  padding-inline: var(--wp--custom--space--7);
}

/* Light variant: band drops to paper with an accent top rule (F5). */
.is-style-wpdl-footer-light .wpdl-footer__news {
  background-color: var(--wp--custom--semantic--color--background--canvas);
  color: var(--wp--custom--semantic--color--text--primary);
  border-block-start: 0.125rem solid var(--wp--custom--semantic--color--brand--primary);
  border-block-end: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
}

.is-style-wpdl-footer-light .wpdl-footer__news-sub {
  color: var(--wp--custom--semantic--color--text--secondary);
  opacity: 1;
}

.is-style-wpdl-footer-light .wpdl-footer__news-input {
  color: var(--wp--custom--semantic--color--text--primary);
  border-block-end-color: var(--wp--custom--semantic--color--border--base);
}

.is-style-wpdl-footer-light .wpdl-footer__news-input::placeholder {
  color: var(--wp--custom--semantic--color--text--muted);
  opacity: 1;
}

.is-style-wpdl-footer-light .wpdl-footer__news-submit,
.is-style-wpdl-footer-light .wpdl-footer__toast {
  color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-footer__news-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--custom--space--9);
  max-inline-size: 72rem;
  margin-inline: auto;
}

.wpdl-footer__news-title {
  margin-block: 0 var(--wp--custom--space--4);
  font-family: var(--wp--custom--semantic--typography--display--font-family);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  font-weight: var(--wp--custom--semantic--typography--display--font-weight);
  line-height: 1.15;
  letter-spacing: var(--wp--custom--semantic--typography--display--letter-spacing);
}

.wpdl-footer__news-sub {
  margin: 0;
  max-inline-size: 34rem;
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: var(--wp--custom--semantic--typography--small--font-size);
  line-height: var(--wp--custom--semantic--typography--body--line-height);
  opacity: 0.72;
}

/* Email form — underline field + text submit (states arrive in F3). */
.wpdl-footer__news-form {
  display: flex;
  align-items: center;
  gap: var(--wp--custom--space--5);
  flex: 1 1 24rem;
  max-inline-size: 30rem;
}

.wpdl-footer__news-input {
  flex: 1;
  min-inline-size: 0;
  padding-block: var(--wp--custom--space--4);
  padding-inline: 0;
  border: none;
  border-block-end: 0.0625rem solid var(--wp--custom--semantic--color--text--muted);
  background: none;
  color: var(--wp--custom--component--footer--text);
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: var(--wp--custom--semantic--typography--body--font-size);
}

.wpdl-footer__news-input::placeholder {
  color: var(--wp--custom--component--footer--text);
  opacity: 0.5;
}

.wpdl-footer__news-input:focus {
  outline: none;
  border-block-end-color: var(--wp--custom--component--footer--text);
}

.wpdl-footer__news-submit {
  flex-shrink: 0;
  padding-block: var(--wp--custom--space--4);
  padding-inline: 0;
  border: none;
  /* stylelint-disable-next-line unit-disallowed-list */
  border-block-end: 1.5px solid var(--wp--custom--semantic--color--brand--primary);
  background: none;
  color: var(--wp--custom--component--footer--text);
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: var(--wp--custom--semantic--typography--label--font-size);
  font-weight: var(--wp--custom--semantic--typography--label--font-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-footer__news-submit:hover {
  color: var(--wp--custom--semantic--color--brand--primary);
}

/* Form / toast swap — [hidden] must beat the flex display set above. */
.wpdl-footer__news-form[hidden],
.wpdl-footer__toast[hidden] {
  display: none;
}

/* Success / error toast — replaces the form in place, auto-dismisses (JS).
   Feedback hues come from tokens; the subtle fill is color-mixed from them. */
.wpdl-footer__toast {
  display: flex;
  align-items: center;
  gap: var(--wp--custom--space--4);
  flex: 1 1 24rem;
  max-inline-size: 30rem;
  padding-block: var(--wp--custom--space--5);
  padding-inline: var(--wp--custom--space--5);
  border: 0.0625rem solid transparent;
  border-radius: 0.25rem;
  color: var(--wp--custom--component--footer--text);
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: var(--wp--custom--semantic--typography--small--font-size);
  line-height: var(--wp--custom--semantic--typography--body--line-height);
}

.wpdl-footer__toast.is-success {
  border-color: var(--wp--custom--semantic--color--brand--soft);
  background-color: color-mix(in srgb, var(--wp--custom--semantic--color--brand--soft) 16%, transparent);
}

.wpdl-footer__toast.is-error {
  border-color: var(--wp--custom--semantic--color--accent--primary);
  background-color: color-mix(in srgb, var(--wp--custom--semantic--color--accent--primary) 18%, transparent);
}

.wpdl-footer__toast-icon {
  display: none;
  flex-shrink: 0;
  align-items: center;
}

.wpdl-footer__toast.is-success .wpdl-footer__toast-icon--success {
  display: inline-flex;
  color: var(--wp--custom--semantic--color--brand--soft);
}

.wpdl-footer__toast.is-error .wpdl-footer__toast-icon--error {
  display: inline-flex;
  color: var(--wp--custom--semantic--color--accent--primary);
}

/* ─── Column body (paper, constrained) ────────────────────────────────────── */

.wpdl-footer__body {
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-block-start: var(--wp--custom--space--11);
  padding-inline: var(--wp--custom--space--7);
}

.wpdl-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--wp--custom--space--9);
  padding-block-end: var(--wp--custom--space--9);
}

/* ─── Brand column ────────────────────────────────────────────────────────── */

.wpdl-footer__brand-name {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--custom--space--4);
  margin-block: 0 var(--wp--custom--space--5);
  font-family: var(--wp--custom--semantic--typography--display--font-family);
  font-size: 1.35rem;
  font-weight: var(--wp--custom--semantic--typography--display--font-weight);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--wp--custom--semantic--color--text--primary);
}

.wpdl-footer__mark {
  flex-shrink: 0;
  color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-footer__tagline {
  margin-block: 0 var(--wp--custom--space--7);
  max-inline-size: 22rem;
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: var(--wp--custom--semantic--typography--small--font-size);
  line-height: var(--wp--custom--semantic--typography--body--line-height);
  color: var(--wp--custom--semantic--color--text--secondary);
}

/* core/social-links (is-style-logos-only) — buyer-editable icons.
   Icons are monochrome (currentColor); we size + colour them to the footer. */
.wpdl-footer__social.wp-block-social-links {
  gap: var(--wp--custom--space--5);
}

.wpdl-footer__social .wp-social-link {
  color: var(--wp--custom--semantic--color--text--primary);
  transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-footer__social .wp-social-link:hover,
.wpdl-footer__social .wp-social-link:focus-within {
  color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-footer__social .wp-block-social-link-anchor {
  padding: 0;
}

.wpdl-footer__social .wp-social-link svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* ─── Link + contact columns ──────────────────────────────────────────────── */

/* Heading is a <button> (accordion toggle on mobile); on desktop it reads as a
   plain label with the content always shown. */
.wpdl-footer__col-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  inline-size: 100%;
  margin-block: 0 var(--wp--custom--space--5);
  padding: 0;
  border: none;
  background: none;
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: var(--wp--custom--semantic--typography--label--font-size);
  font-weight: var(--wp--custom--semantic--typography--label--font-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--custom--semantic--color--text--primary);
  cursor: default;
}

.wpdl-footer__col-chevron {
  display: none; /* desktop: no toggle affordance */
  flex-shrink: 0;
  transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-footer__col-content {
  display: block; /* desktop: always open */
}

/* Link columns are inline core/navigation blocks (buyer-editable). Style the
   rendered nav markup to read like the old footer link list. */
ul.wpdl-footer__nav {
  gap: var(--wp--custom--space--4);
}

.wpdl-footer__nav .wp-block-navigation-item__content,
.wpdl-footer__contact {
  font-family: var(--wp--custom--semantic--typography--body--font-family);
  font-size: var(--wp--custom--semantic--typography--small--font-size);
  line-height: var(--wp--custom--semantic--typography--body--line-height);
  color: var(--wp--custom--semantic--color--text--secondary);
  text-decoration: none;
}

.wpdl-footer__nav .wp-block-navigation-item__content {
  padding: 0;
  transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-footer__nav .wp-block-navigation-item__content:hover {
  color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-footer__contact {
  font-style: normal;
}

.wpdl-footer__contact p {
  margin-block: 0 var(--wp--custom--space--4);
}

.wpdl-footer__contact a:hover {
  color: var(--wp--custom--semantic--color--brand--primary);
}

/* ─── Divider + bottom bar (refined in F2) ────────────────────────────────── */

.wpdl-footer__divider {
  max-inline-size: 72rem;
  margin-inline: auto;
  border: none;
  border-block-start: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
}

.wpdl-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--custom--space--5);
  max-inline-size: 72rem;
  margin-inline: auto;
  padding-block: var(--wp--custom--space--7);
  padding-inline: var(--wp--custom--space--7);
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: var(--wp--custom--semantic--typography--label--font-size);
  color: var(--wp--custom--semantic--color--text--muted);
}

.wpdl-footer__bottom a {
  color: var(--wp--custom--semantic--color--text--muted);
  text-decoration: none;
  transition: color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-footer__bottom a:hover {
  color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-footer__bottom-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--custom--space--7);
}

.wpdl-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--custom--space--5);
}

/* Back-to-top pill */
.wpdl-footer__top {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--custom--space--4);
  padding-block: var(--wp--custom--space--4);
  padding-inline: var(--wp--custom--space--5);
  border: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
  border-radius: var(--wp--custom--radius--sm, 0.5rem);
  background: none;
  color: var(--wp--custom--semantic--color--text--muted);
  font-family: var(--wp--custom--semantic--typography--label--font-family);
  font-size: var(--wp--custom--semantic--typography--label--font-size);
  font-weight: var(--wp--custom--semantic--typography--label--font-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--wp--custom--duration--base) var(--wp--custom--easing--default),
    border-color var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

.wpdl-footer__top:hover {
  color: var(--wp--custom--semantic--color--brand--primary);
  border-color: var(--wp--custom--semantic--color--brand--primary);
}

.wpdl-footer__top:focus-visible {
  outline: 0.125rem solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 0.125rem;
}

/* ─── Focus states ────────────────────────────────────────────────────────── */

.wpdl-footer__nav .wp-block-navigation-item__content:focus-visible,
.wpdl-footer__contact a:focus-visible,
.wpdl-footer__social .wp-block-social-link-anchor:focus-visible,
.wpdl-footer__bottom a:focus-visible,
.wpdl-footer__col-heading:focus-visible,
.wpdl-footer__news-submit:focus-visible {
  outline: 0.125rem solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 0.125rem;
  border-radius: 0.125rem;
}

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

@media (width < 64em) {
  /* Tighten the dark band once it stacks — desktop 64px padding + 48px gap
     read as oversized on a narrow column. */
  .wpdl-footer__news {
    padding-block: var(--wp--custom--space--9);
  }

  .wpdl-footer__news-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--custom--space--7);
  }

  .wpdl-footer__news-form {
    inline-size: 100%;
    max-inline-size: none;

    /* Reset the desktop `flex: 1 1 24rem`. Once .news-inner is a column the
       24rem flex-basis lands on the VERTICAL axis and inflates the form to
       384px — the empty void. Pin it to its content height instead. */
    flex: 0 0 auto;
  }

  .wpdl-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--custom--space--7);
  }
}

@media (width < 40em) {
  .wpdl-footer__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .wpdl-footer__brand {
    padding-block-end: var(--wp--custom--space--7);
  }

  /* Link columns collapse into a tap-to-open accordion (48px rows). */
  .wpdl-footer__col {
    border-block-start: 0.0625rem solid var(--wp--custom--semantic--color--border--base);
  }

  .wpdl-footer__col-heading {
    min-block-size: 3rem;
    margin-block: 0;
    cursor: pointer;
  }

  .wpdl-footer__col-chevron {
    display: inline-flex;
  }

  .wpdl-footer__col-heading[aria-expanded="true"] .wpdl-footer__col-chevron {
    transform: rotate(180deg);
  }

  .wpdl-footer__col-content {
    display: none;
    padding-block-end: var(--wp--custom--space--5);
  }

  .wpdl-footer__col-heading[aria-expanded="true"] + .wpdl-footer__col-content {
    display: block;
  }

  .wpdl-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ─── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .wpdl-footer__news-submit,
  .wpdl-footer__social .wp-social-link,
  .wpdl-footer__nav .wp-block-navigation-item__content,
  .wpdl-footer__bottom a,
  .wpdl-footer__top,
  .wpdl-footer__col-chevron {
    transition: none;
  }
}

/* stylelint-enable no-descending-specificity */

/* ── Full-dark footer — match Figma (entire footer #1f261f, light text) ──────
   Figma fleur-homepage/footer is one continuous dark panel; the default
   editorial two-tone (dark band + paper body) is overridden here. */
.wp-block-group.wpdl-footer {
  background-color: var(--wp--custom--component--footer--bg);
  color: var(--wp--custom--component--footer--text);
}

.wpdl-footer__brand-name,
.wpdl-footer__nav .wp-block-navigation-item__content,
.wpdl-footer__contact,
.wpdl-footer__contact a,
.wpdl-footer__bottom,
.wpdl-footer__bottom a {
  color: var(--wp--custom--component--footer--text);
}

/* Secondary / de-emphasised text → translucent light */
.wpdl-footer__tagline,
.wpdl-footer__col-heading,
.wpdl-footer__legal {
  color: color-mix(in srgb, var(--wp--custom--component--footer--text) 70%, transparent);
}

/* Hovers → gold accent (Figma) */
.wpdl-footer__nav .wp-block-navigation-item__content:hover,
.wpdl-footer__contact a:hover,
.wpdl-footer__bottom a:hover {
  color: var(--wp--custom--semantic--color--accent--secondary);
}

/* Divider + social icons on dark */
.wpdl-footer__divider {
  border-color: color-mix(in srgb, var(--wp--custom--component--footer--text) 18%, transparent);
}

.wpdl-footer__social .wp-social-link {
  color: var(--wp--custom--component--footer--text);
}

/* ── Newsletter relocated INTO the brand column (Figma layout) ───────────────
   Drop the full-width band styling; stack title/sub/form vertically at column
   width. Colours already inherit the dark footer text. */
.wpdl-footer__brand .wpdl-footer__news {
  background: none;
  padding: 0;
  margin-block-start: var(--wp--custom--space--6);
}

.wpdl-footer__brand .wpdl-footer__news-inner {
  flex-direction: column;
  align-items: stretch;
  gap: var(--wp--custom--space--4);
  max-inline-size: none;
  margin-inline: 0;
}

.wpdl-footer__brand .wpdl-footer__news-form {
  flex: 1 1 auto;
  max-inline-size: none;
  inline-size: 100%;
}

.wpdl-footer__brand .wpdl-footer__news-title {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
}

.wpdl-footer__brand .wpdl-footer__news-sub {
  max-inline-size: none;
}