/* ==========================================================================
   NOVAURA — Components
   Buttons, form controls, badges, steppers. Every value comes from tokens.css.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */
.nva-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nva-s-2);
  padding: var(--nva-s-4) var(--nva-s-8);
  border: 1px solid transparent;
  font-family: var(--nva-font-body);
  font-size: var(--nva-t-small);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-button);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--nva-d-base) var(--nva-ease),
              color var(--nva-d-base) var(--nva-ease),
              border-color var(--nva-d-base) var(--nva-ease),
              opacity var(--nva-d-base) var(--nva-ease);
}

.nva-btn--primary {
  background-color: var(--nva-ink);
  color: var(--nva-on-dark);
}
.nva-btn--primary:hover { background-color: var(--nva-ink-hover); }

/* --------------------------------------------------------------------------
   Link-state hardening

   When a .nva-btn is an <a> inside page content, editorial link styles can
   otherwise recolour it — which is how a black button ended up with black
   text. These pin the colour across every link state. The selectors carry
   the extra :is() specificity deliberately, so source order cannot decide
   the outcome.
   -------------------------------------------------------------------------- */
a.nva-btn:is(:link, :visited, :hover, :focus, :active),
a.nva-btn:is(:link, :visited, :hover, :focus, :active) * {
  text-decoration: none;
}

/*
 * Every state is pinned explicitly, with two classes in the selector.
 * WooCommerce block styles and WordPress global styles both ship link rules
 * that outrank a single class, which is what left this button's label
 * unreadable. (0,3,1) here clears them without resorting to !important.
 */
a.nva-btn.nva-btn--primary:is(:link, :visited, :active) {
  background-color: var(--nva-ink);
  color: var(--nva-on-dark);
  border-color: var(--nva-ink);
  opacity: 1;
}
a.nva-btn.nva-btn--primary:is(:hover, :focus, :focus-visible) {
  /* Solid charcoal, white text — 13.5:1. */
  background-color: var(--nva-ink-hover);
  color: var(--nva-on-dark);
  border-color: var(--nva-ink-hover);
  opacity: 1;
}

a.nva-btn.nva-btn--secondary:is(:link, :visited, :active) {
  background-color: var(--nva-surface);
  color: var(--nva-ink);
  border-color: var(--nva-ink);
  opacity: 1;
}
a.nva-btn.nva-btn--secondary:is(:hover, :focus, :focus-visible) {
  background-color: var(--nva-ink-05);
  color: var(--nva-ink);
  opacity: 1;
}

a.nva-btn.nva-btn--tertiary:is(:link, :visited, :active) {
  color: var(--nva-ink);
  border-color: var(--nva-line);
  opacity: 1;
}
a.nva-btn.nva-btn--tertiary:is(:hover, :focus, :focus-visible) {
  color: var(--nva-ink);
  border-color: var(--nva-ink);
  opacity: 1;
}

a.nva-btn.nva-btn--partner:is(:link, :visited, :active) {
  background-color: var(--nva-red);
  color: var(--nva-on-dark);
  opacity: 1;
}
a.nva-btn.nva-btn--partner:is(:hover, :focus, :focus-visible) {
  background-color: var(--nva-red-hover);
  color: var(--nva-on-dark);
  opacity: 1;
}

.nva-btn:focus-visible {
  outline: 2px solid var(--nva-ink);
  outline-offset: 3px;
}

.nva-btn--secondary {
  background-color: var(--nva-surface);
  color: var(--nva-ink);
  border-color: var(--nva-ink);
}
.nva-btn--secondary:hover { background-color: var(--nva-ink-05); }

.nva-btn--tertiary {
  background-color: transparent;
  color: var(--nva-ink);
  border-color: var(--nva-line);
}
.nva-btn--tertiary:hover { border-color: var(--nva-ink); }

.nva-btn--partner {
  background-color: var(--nva-red);
  color: var(--nva-on-dark);
  border-radius: var(--nva-r-xs);
  padding: var(--nva-s-4) var(--nva-s-10);
  letter-spacing: 0.18em;
}
.nva-btn--partner:hover { background-color: var(--nva-red-hover); }

.nva-btn--pill { border-radius: var(--nva-r-full); }
.nva-btn--block { width: 100%; }

.nva-btn:disabled,
.nva-btn[aria-disabled="true"] {
  background-color: var(--nva-ink-10);
  color: var(--nva-ink-30);
  border-color: transparent;
  cursor: not-allowed;
}

/* Text link with travelling arrow */
.nva-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--nva-s-2);
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-button);
  color: var(--nva-ink);
}
.nva-link-arrow .nva-icon {
  transition: transform var(--nva-d-slow) var(--nva-ease);
}
.nva-link-arrow:hover .nva-icon { transform: translateX(4px); }

/* Underline that expands from the centre */
.nva-underline { position: relative; }
.nva-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transform: translateX(-50%);
  transition: width 0.4s var(--nva-ease);
}
.nva-underline:hover::after,
.nva-underline:focus-visible::after { width: 100%; }

/* Circular add button used on product cards */
.nva-btn-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--nva-r-full);
  background-color: var(--nva-ink);
  color: var(--nva-on-dark);
  transition: transform var(--nva-d-slow) var(--nva-ease);
}

/*
 * A 44x44 hit area without changing the 28px circle.
 *
 * The button is the smallest control on the most-used page, so the target
 * is expanded with a pseudo-element rather than by enlarging the circle —
 * the approved product-card appearance is untouched.
 */
.nva-btn-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.nva-btn-circle:hover { transform: scale(1.05); }

@media (min-width: 640px) {
  .nva-btn-circle { width: 36px; height: 36px; }
}

/* No invisible overlay on pointer devices, where it could block hovers. */
@media (pointer: fine) {
  .nva-btn-circle::after { display: none; }
}

/* --- Form controls ------------------------------------------------------- */
.nva-field { display: flex; flex-direction: column; gap: var(--nva-s-2); }

.nva-field__label {
  font-size: var(--nva-t-micro);
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
  color: var(--nva-ink-60);
}

.nva-input,
.nva-select,
.nva-textarea {
  width: 100%;
  /* Comfortable tap height without changing the visual proportions. */
  min-height: 44px;
  padding: var(--nva-s-3) var(--nva-s-4);
  background-color: var(--nva-surface);
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-md);
  /*
   * 16px on touch screens.
   *
   * iOS Safari zooms the whole page when a field under 16px receives focus,
   * which knocks the layout sideways mid-form. The design size is restored
   * at the pointer breakpoint below, so desktop is unchanged.
   */
  font-size: 16px;
  color: var(--nva-ink);
  transition: border-color var(--nva-d-fast) var(--nva-ease);
}
.nva-input::placeholder,
.nva-textarea::placeholder { color: var(--nva-ink-40); }

.nva-input:focus,
.nva-select:focus,
.nva-textarea:focus {
  outline: none;
  border-color: rgba(0,0,0,0.25);
}
.nva-input[aria-invalid="true"] { border-color: var(--nva-red); }

/*
 * Restore the designed type size where auto-zoom cannot happen: a device
 * with a fine pointer (mouse or trackpad). Touch devices keep 16px whatever
 * their width, so a large tablet still never zooms.
 */
@media (pointer: fine) {
  .nva-input,
  .nva-select,
  .nva-textarea {
    font-size: var(--nva-t-small);
  }
}

.nva-field__error {
  font-size: var(--nva-t-micro);
  color: var(--nva-red);
}

/* Search field — icon inside a bordered container */
.nva-search {
  display: flex;
  align-items: center;
  gap: var(--nva-s-3);
  padding: var(--nva-s-3) var(--nva-s-4);
  background-color: var(--nva-surface);
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-md);
  transition: border-color var(--nva-d-fast) var(--nva-ease);
}
.nva-search:focus-within { border-color: rgba(0,0,0,0.25); }
.nva-search__icon { flex-shrink: 0; color: var(--nva-ink-40); }
.nva-search__input {
  width: 100%;
  border: 0;
  background: transparent;
  font-size: var(--nva-t-small);
}
.nva-search__input:focus { outline: none; }

/* Custom checkbox */
.nva-check {
  display: flex;
  align-items: flex-start;
  gap: var(--nva-s-3);
  cursor: pointer;
  transition: opacity var(--nva-d-fast) var(--nva-ease);
}
.nva-check:hover { opacity: 0.8; }
.nva-check__box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid var(--nva-ink-20);
  border-radius: var(--nva-r-sm);
  background-color: var(--nva-surface);
  transition: background-color var(--nva-d-fast) var(--nva-ease),
              border-color var(--nva-d-fast) var(--nva-ease);
}
.nva-check[aria-checked="true"] .nva-check__box,
.nva-check input:checked + .nva-check__box {
  background-color: var(--nva-ink);
  border-color: var(--nva-ink);
}
.nva-check__mark { opacity: 0; color: var(--nva-on-dark); }
.nva-check[aria-checked="true"] .nva-check__mark,
.nva-check input:checked + .nva-check__box .nva-check__mark { opacity: 1; }
.nva-check__text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--nva-ink-55);
}

/* --- Quantity stepper ---------------------------------------------------- */
.nva-stepper { display: inline-flex; align-items: center; }
.nva-stepper__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--nva-line);
  color: var(--nva-ink);
  transition: background-color var(--nva-d-fast) var(--nva-ease);
}
.nva-stepper__btn:hover { background-color: var(--nva-surface-muted); }
.nva-stepper__btn--minus {
  border-right: 0;
  border-radius: var(--nva-r-md) 0 0 var(--nva-r-md);
}
.nva-stepper__btn--plus {
  border-left: 0;
  border-radius: 0 var(--nva-r-md) var(--nva-r-md) 0;
}
.nva-stepper__value {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 44px;
  border-block: 1px solid var(--nva-line);
  border-inline: 0;
  text-align: center;
  font-size: var(--nva-t-body);
  font-weight: var(--nva-w-semi);
  font-variant-numeric: tabular-nums;
  background-color: transparent;
}
.nva-stepper__value:focus { outline: none; }

/* --- Status badges ------------------------------------------------------- */
.nva-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--nva-s-1) var(--nva-s-3);
  border: 1px solid transparent;
  border-radius: var(--nva-r-full);
  font-size: 0.625rem;
  font-weight: var(--nva-w-semi);
  text-transform: uppercase;
  letter-spacing: var(--nva-ls-label);
}
.nva-badge--pending   { background: var(--nva-pending-bg);   color: var(--nva-pending-fg); }
.nva-badge--approved  { background: var(--nva-approved-bg);  color: var(--nva-approved-fg); }
.nva-badge--neutral   { background: var(--nva-neutral-bg);   color: var(--nva-neutral-fg); }
.nva-badge--delivered { background: var(--nva-delivered-bg); color: var(--nva-delivered-fg); border-color: var(--nva-delivered-line); }
.nva-badge--transit   { background: var(--nva-transit-bg);   color: var(--nva-transit-fg);   border-color: var(--nva-transit-line); }
.nva-badge--success   { background: var(--nva-success-bg);   color: var(--nva-success-fg); }

/* --- Card shell ---------------------------------------------------------- */
.nva-card {
  background-color: var(--nva-surface);
  border: 1px solid var(--nva-line);
  border-radius: var(--nva-r-md);
  transition: box-shadow var(--nva-d-slow) var(--nva-ease);
}
.nva-card--lg { border-radius: var(--nva-r-xl); }
.nva-card:hover { box-shadow: var(--nva-shadow-card-hover); }

/* --- Icons --------------------------------------------------------------- */
.nva-icon {
  display: inline-block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.nva-icon--sm { width: 15px; height: 15px; }
.nva-icon--xs { width: 13px; height: 13px; }
.nva-icon--lg { width: 22px; height: 22px; }
.nva-icon--bold { stroke-width: 2; }

/* --------------------------------------------------------------------------
   Editorial content
   Applied to the_content() output on pages and posts, so block-editor
   content inherits the type system instead of browser defaults.
   -------------------------------------------------------------------------- */
.nva-prose {
  max-width: var(--nva-w-prose);
  margin-top: var(--nva-s-8);
  font-size: var(--nva-t-body);
  line-height: var(--nva-lh-relaxed);
  color: var(--nva-ink-muted);
}

.nva-prose > * + * { margin-top: var(--nva-s-5); }

.nva-prose h2,
.nva-prose h3,
.nva-prose h4 {
  margin-top: var(--nva-s-10);
  color: var(--nva-ink);
}
.nva-prose h2 { font-size: var(--nva-t-section-sm); }
.nva-prose h3 { font-size: 1.5rem; }
.nva-prose h4 { font-size: 1.125rem; font-family: var(--nva-font-body); font-weight: var(--nva-w-semi); }

/* Editorial links. Buttons are excluded — a .nva-btn dropped into page
   content is a button, not a prose link, and must keep its own styling. */
/* WooCommerce's own buttons (.button, .checkout-button) must be excluded
   too. Without this the prose rule wins at (0,3,1) over
   .wc-proceed-to-checkout a.checkout-button (0,2,1) and paints the label
   black — on a black button. */
.nva-prose a:not(.nva-btn):not(.nva-btn-circle):not(.button):not(.checkout-button) {
  color: var(--nva-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: opacity var(--nva-d-base) var(--nva-ease);
}
.nva-prose a:not(.nva-btn):not(.nva-btn-circle):not(.button):not(.checkout-button):hover { opacity: 0.65; }

.nva-prose ul,
.nva-prose ol { padding-left: var(--nva-s-6); }
.nva-prose ul { list-style: disc; }
.nva-prose ol { list-style: decimal; }
.nva-prose li + li { margin-top: var(--nva-s-2); }

.nva-prose blockquote {
  padding-left: var(--nva-s-6);
  border-left: 1px solid var(--nva-line);
  font-family: var(--nva-font-heading);
  font-size: 1.25rem;
  color: var(--nva-ink);
}

.nva-prose img { border-radius: var(--nva-r-md); }

.nva-prose hr {
  height: 1px;
  border: 0;
  background-color: var(--nva-line);
  margin-block: var(--nva-s-10);
}

/* --- Search results ------------------------------------------------------ */
.nva-search-results {
  margin-top: var(--nva-s-8);
  border-top: 1px solid var(--nva-line);
}
.nva-search-results li { border-bottom: 1px solid var(--nva-line); }
.nva-search-results a {
  display: block;
  padding-block: var(--nva-s-5);
  font-size: var(--nva-t-lead);
  font-weight: var(--nva-w-medium);
  color: var(--nva-ink);
  transition: opacity var(--nva-d-base) var(--nva-ease);
}
.nva-search-results a:hover { opacity: 0.6; }

/* --- WooCommerce content wrapper ----------------------------------------- */
/* Product styling lands in Phases 4 and 5. This only reserves the space. */
.nva-woo { padding-block: var(--nva-section-y); }


/* ==========================================================================
   Shared touch targets

   Applied on touch devices only, so desktop hit areas and hover behaviour
   are exactly as before. Sizes are effective hit areas, not visual changes.
   ========================================================================== */
@media (pointer: coarse) {

  .nva-btn,
  button.nva-btn,
  a.nva-btn,
  .nva-auth__submit,
  .nva-psetup__submit {
    min-height: 44px;
  }

  /* Small icon-only controls get their target expanded, not their artwork. */
  .nva-icon-btn,
  .nva-close,
  [data-nva-dismiss] {
    position: relative;
  }

  .nva-icon-btn::after,
  .nva-close::after,
  [data-nva-dismiss]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
  }
}


/* ==========================================================================
   Shared tablet tier (768px)

   Deliberately minimal. Page-specific tablet layouts — Checkout, Cart, Shop,
   Product — are later batches; these are only the shared primitives that
   were still using phone sizing at 768px.
   ========================================================================== */
@media (min-width: 768px) {

  /* Buttons regain their desktop proportions before the 1024px tier. */
  .nva-btn { padding-inline: var(--nva-s-6); }

  /* Form rows can pair up once there is room for two comfortable columns. */
  .nva-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--nva-s-4);
  }
}