/*
 Theme Name:   NDN Bricks Child
 Theme URI:    https://bricksbuilder.io/
 Description:  Reusable Bricks child-theme boilerplate by NDN.
 Author:       NDN
 Template:     bricks
 Version:      1.0.3
 Text Domain:  ndn-bricks-child
*/

/* Native Bricks fields own motion. Preference queries and outline-offset have
   no equivalent per-element native controls; keep these accessibility guards here. */
body.home #brx-content :is(a, button):focus-visible,
#brx-header a:focus-visible,
#brx-footer a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

/* Input-only focus: Bricks' native outline setting also affects links/buttons. */
body.bricks-is-frontend #brx-content :is(
  input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"]),
  select,
  textarea
):focus {
  outline: 1px solid var(--lajeng-muted);
  outline-offset: 2px;
}

/* Touch devices retain native press feedback without a persistent hover lift. */
@media (hover: none) {
  body.home #brx-content :is(a, button, img, #home-coffee-card, #home-detail-card):hover:not(:active),
  #brx-header a:hover:not(:active),
  #brx-footer a:hover:not(:active) {
    transform: none;
  }
}

/* User preference must override the ID-specific native hover/active transforms.
   Simple Animation supplies its own reduced-motion entrance safeguard. */
@media (prefers-reduced-motion: reduce) {
  body.home #brx-content :is(a, button, img, #home-coffee-card, #home-detail-card),
  #brx-header a,
  #brx-footer a {
    transition: none !important;
    transform: none !important;
  }
}

/* Generic commerce defaults inherit the site palette. Edit values in Bricks colors. */
:root {
  --ndn-color-ink: var(--lajeng-commerce-ink);
  --ndn-color-accent: var(--lajeng-commerce-accent);
  --ndn-color-line: var(--lajeng-commerce-line);
  --ndn-color-paper: var(--lajeng-commerce-paper);
  --ndn-color-heading: var(--lajeng-commerce-heading);
  --ndn-color-white: var(--lajeng-surface);
  --ndn-color-focus: var(--lajeng-commerce-focus);
  --ndn-color-control-border: var(--lajeng-commerce-control-border);
  --ndn-color-text-muted: var(--lajeng-commerce-text-muted);
  --ndn-color-feedback: var(--lajeng-commerce-feedback);
  --ndn-color-cart-meta: var(--lajeng-commerce-cart-meta);
  --ndn-color-remove: var(--lajeng-commerce-remove);
  --ndn-color-dialog: var(--lajeng-commerce-dialog);
  --ndn-color-checkout-muted: var(--lajeng-commerce-checkout-muted);
  --ndn-color-price-muted: var(--lajeng-commerce-price-muted);
  --ndn-color-card-border: var(--lajeng-commerce-card-border);
  --ndn-color-image-background: var(--lajeng-commerce-image-background);
  --ndn-color-option-muted: var(--lajeng-commerce-option-muted);
  --ndn-color-selected: var(--lajeng-surface-soft);
  --ndn-color-placeholder: var(--lajeng-commerce-placeholder);
  --ndn-color-danger: var(--lajeng-danger);
  --ndn-color-mini-line: var(--lajeng-commerce-mini-line);
  --ndn-color-mini-muted: var(--lajeng-commerce-mini-muted);
  --ndn-color-mini-feedback: var(--lajeng-commerce-mini-feedback);
  --ndn-color-placeholder-text: var(--lajeng-commerce-placeholder-text);
  --ndn-color-preview-border: var(--lajeng-commerce-preview-border);
  --ndn-color-quantity-border: var(--lajeng-field-border);
  --ndn-color-quantity-text: var(--lajeng-ink);
  --ndn-color-quantity-divider: var(--lajeng-divider);
  --ndn-color-quantity-focus: var(--lajeng-brand);
  --ndn-color-store-accent: var(--lajeng-accent);
  --ndn-color-shadow-soft: var(--lajeng-commerce-shadow-soft);
  --ndn-color-shadow-dialog: var(--lajeng-commerce-shadow-dialog);
  --ndn-color-overlay: var(--lajeng-overlay);
}