/*
Theme Name:        Flux
Theme URI:         https://onlab.cloud/themes/flux
Author:            onlab
Author URI:        https://onlab.cloud
Description:       Adaptive, fluid, container-query-ready WordPress block theme. Token-driven design system built for performance. WP 6.9+.
Version:           1.0.0
Requires at least: 6.9
Tested up to:      6.9
Requires PHP:      8.1
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       flux
Tags:              full-site-editing, block-theme, fluid-typography, custom-colors, wide-blocks, woocommerce
*/

/*
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 *  Flux by onlab — Layer 1: RESET + GLOBAL BEHAVIOR
 *  All selectors are wrapped in :root :where() to produce
 *  specificity (0,0,1) so Global Styles UI always wins.
 *
 *  Placed inside @layer reset so cascade layers in flux.css
 *  can resolve specificity predictably. Older browsers that
 *  don't support @layer ignore the wrapper and fall back to
 *  the natural cascade with :root :where() approach.
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */

@layer reset {

/* ── Box model ─────────────────────────────────────────── */
:root :where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* ── Media ─────────────────────────────────────────────── */
:root :where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
  max-width: 100%;
}

:root :where(img, video) {
  height: auto;
}

/* ── Typography ────────────────────────────────────────── */
:root :where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
}

:root :where(h1, h2, h3, h4, h5, h6) {
  margin-block: 0;
  text-wrap: balance;
}

:root :where(p) {
  margin-block: 0;
  text-wrap: pretty;
}

/* ── Lists ─────────────────────────────────────────────── */
:root :where(ul, ol) {
  margin-block: 0;
  padding-inline-start: 0;
}

:root :where(li) {
  line-height: inherit;
}

/* ── Tables ────────────────────────────────────────────── */
:root :where(table) {
  border-collapse: collapse;
  width: 100%;
}

/* ── Forms ─────────────────────────────────────────────── */
:root :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:root :where(button) {
  cursor: pointer;
  border: 0;
  background: transparent;
}

/* ── HTML base ─────────────────────────────────────────── */
html {
  /* Anchor-based scroll behavior */
  scroll-behavior: smooth;
  /* Prevent layout shifts from scrollbar */
  scrollbar-gutter: stable;
  /* Smooth text on supporting platforms */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Focus management ──────────────────────────────────── */
/* Keyboard-only focus ring — low specificity, always overrideable */
:root :where(:focus-visible) {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 3px;
}

:root :where(:focus:not(:focus-visible)) {
  outline: none;
}

/* ── Transitions (motion-safe) ─────────────────────────── */
/* Only applied when the user hasn't requested reduced motion */
@media (prefers-reduced-motion: no-preference) {
  :root :where(
    a,
    button,
    .wp-element-button,
    .wp-block-button__link,
    input,
    textarea,
    select
  ) {
    transition:
      color           var(--wp--custom--motion--duration-fast, 100ms) var(--wp--custom--motion--easing-default, ease),
      background-color var(--wp--custom--motion--duration-fast, 100ms) var(--wp--custom--motion--easing-default, ease),
      border-color    var(--wp--custom--motion--duration-fast, 100ms) var(--wp--custom--motion--easing-default, ease),
      box-shadow      var(--wp--custom--motion--duration-fast, 100ms) var(--wp--custom--motion--easing-default, ease),
      outline-color   var(--wp--custom--motion--duration-fast, 100ms) var(--wp--custom--motion--easing-default, ease),
      transform       var(--wp--custom--motion--duration-fast, 100ms) var(--wp--custom--motion--easing-default, ease),
      opacity         var(--wp--custom--motion--duration-fast, 100ms) var(--wp--custom--motion--easing-default, ease);
  }
}

/* ── Reduced motion: kill all motion completely ────────── */
@media (prefers-reduced-motion: reduce) {
  :root :where(*, *::before, *::after) {
    transition-duration:        0.001ms !important;
    animation-duration:         0.001ms !important;
    animation-iteration-count:  1       !important;
    scroll-behavior:            auto    !important;
  }
}

/* ── Print basics ──────────────────────────────────────── */
@media print {
  :root :where(.wp-block-navigation, .wp-block-search) {
    display: none;
  }
  :root :where(a[href]::after) {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: var(--flux--color-muted, #555);
  }
}

} /* end @layer reset */