/* ==========================================================================
   Wild Kiwi - native Breakdance build OVERLAY
   Loads on top of wk-redesign.css, and ONLY on pages listed in wk_native_pages().
   Nothing here can reach the live pages.

   Why this file exists: when the wk-* classes are carried by Breakdance
   Container elements instead of plain divs, Breakdance's own element CSS
   applies - display:flex, row direction, align-items:center, auto width -
   which shrink-wraps children. These rules re-assert the intended box model.

   Everything is scoped under body.wk-native so it cannot leak.
   ========================================================================== */

/* Inner containers stretch to their parent.
   .wk-shell is deliberately NOT in this list: it carries the page measure, and
   a width:100% here outranks it on specificity and pushes the page full-bleed. */
body.wk-native .wk-menu__inner,
body.wk-native .wk-cat,
body.wk-native .wk-cat__head,
body.wk-native .wk-item {
  display: block;
  width: 100%;
  max-width: none;
  align-items: normal;
}

/* Only the display is normalised here; the measure stays in the base file. */
/* Do NOT set display on .wk-shell - it is shared by the header bar, the chip
   row and the footer grid, all of which need their own display. Target the
   one native container that actually needs normalising instead. */
body.wk-native .wk-hero__inner,
body.wk-native .wk-book__inner,
body.wk-native .wk-reviews__inner,
body.wk-native .wk-reviews__mount { display: block; }

/* The native build wraps each section in Breakdance chrome that outranks the
   shortcode-era classes, so the booking CTA has to restate two things:
   'body.wk-redesign .bde-section' (0,2,1) sets the ink background over .wk-book,
   and '.bde-section .section-container' forces text-align:left between the
   section and our container, so centring never reaches the children. */
body.wk-native .bde-section.wk-book { background: var(--wk-slate); }
body.wk-native .wk-book .section-container { text-align: center; }
body.wk-native .wk-book .wk-actions { justify-content: center; }
body.wk-native .wk-head__row { display: flex; align-items: center; }

body.wk-native .wk-item__top { display: flex; width: 100%; align-items: baseline; }
body.wk-native .wk-item__leader { flex: 1 1 auto; display: block; align-self: auto; }
body.wk-native .wk-item__price { flex: 0 0 auto; }

/* PostsLoop already builds a responsive grid from items_per_row. Do NOT grid
   the loop wrapper as well - that nests two grids and quarters the column
   width (1032 -> 486 -> 233px). Style Breakdance's own grid instead. */
body.wk-native .wk-items-native { display: block; }
body.wk-native .wk-items-native .bde-loop-grid {
  column-gap: clamp(2rem, 4vw, 3.75rem);
  margin-top: 1.75rem;
}
body.wk-native .wk-items-native .bde-loop-item { display: block; }

@media (max-width: 560px) {
  body.wk-native .wk-items-native .bde-loop-grid { margin-top: 1.1rem; }
}

/* The base file gives every .bde-section the ink background at two-class
   specificity, which outranks .wk-hero's background-image. Restore it here. */
body.wk-native .wk-hero {
  background-image: url("https://wildkiwidistillery.com/wp-content/uploads/2024/10/wk_bg_dist.webp");
  background-size: cover;
  background-position: center 40%;
  background-color: var(--wk-ink);
}

/* Breakdance's Button puts our class on an outer wrapper and renders the real
   anchor inside it, so colour and padding have to reach the descendant. */
/* Scoped to .wk-actions: the header's own .wk-btn is a plain anchor built by
   the shortcode, not a Breakdance Button, and must keep its base styling. */
/* Only the Breakdance Button needs neutralising: it is a DIV wrapper with the
   real anchor inside. Shortcode buttons (e.g. [wk_book]) are plain anchors that
   carry .wk-btn themselves and must keep their base styling, or they render as
   dark text on a dark background with no button at all. */
body.wk-native .wk-actions :not(a).wk-btn { padding: 0; border: 0; background: none; }
body.wk-native .wk-actions .wk-btn > a,
body.wk-native .wk-actions .wk-btn .bde-button {
  display: inline-flex; align-items: center;
  font-family: var(--wk-display); font-weight: 600;
  font-size: .95rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .85rem 1.6rem; border-radius: 2px; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .18s ease, background-color .18s ease;
}
body.wk-native .wk-actions .wk-btn--primary > a { background: var(--wk-amber); color: #17130A; }
body.wk-native .wk-actions .wk-btn--primary > a:hover { background: #ffd047; transform: translateY(-2px); }
body.wk-native .wk-actions .wk-btn--ghost > a { border-color: rgba(184,115,51,.55); color: var(--wk-bone); }
body.wk-native .wk-actions .wk-btn--ghost > a:hover { border-color: var(--wk-copper); background: rgba(184,115,51,.12); transform: translateY(-2px); }