/* ==========================================================================
   THUI — Base  (light reset + base typography)

   SCOPE — the defect this file used to have:

   Every rule here was keyed on `.thui`, but the document body carries
   `thc-ui` (header.php: body_class( 'thc-ui' )). Nothing on any rendered page
   ever matched, so the design system's base layer was inert site-wide: bare
   `<a>`, `<button>`, `<input>` and `<table>` fell back to the UA stylesheet and
   rendered in Times New Roman / Arial, with no focus ring and no box-sizing.
   That is what made WooCommerce, and every other plugin's markup, read as
   default WordPress rather than as Travel Hub.

   The scope is now `.thui, .thc-ui` and every selector is wrapped in `:where()`,
   which contributes ZERO specificity. So this layer reaches the whole document
   yet can never win against a component rule - `.thcx-foot a`, `.thui-btn`,
   `.thh-*` and every existing homepage selector keep their exact cascade
   position. It sets a floor, not a ceiling.
   ========================================================================== */

:where(.thui, .thc-ui), :where(.thui, .thc-ui) *,
:where(.thui, .thc-ui) *::before, :where(.thui, .thc-ui) *::after { box-sizing: border-box; }

:where(.thui, .thc-ui) {
  font-family: var(--thui-font-sans);
  color: var(--thui-color-text);
  font-size: var(--thui-fs-base);
  line-height: var(--thui-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(.thui, .thc-ui) :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--thui-font-display);
  color: var(--thui-color-ink);
  line-height: var(--thui-lh-tight);
  letter-spacing: var(--thui-ls-tight);
  margin: 0;
}
:where(.thui, .thc-ui) :where(p) { margin: 0; }
:where(.thui, .thc-ui) :where(a) { color: var(--thui-color-primary-ink); text-decoration: none; transition: color var(--thui-dur-fast) var(--thui-ease); }
:where(.thui, .thc-ui) :where(a):hover { color: var(--thui-color-primary); }
/* Fluid images. `display` is deliberately NOT set here: forcing block on every
   image site-wide breaks icons that are meant to sit inline inside text. */
:where(.thui, .thc-ui) :where(img) { max-inline-size: 100%; block-size: auto; }

/* Form controls do not inherit type from the document by UA default. This is
   the single rule that stops plugin-rendered inputs, selects, textareas and
   buttons - WooCommerce's above all - from rendering in the browser's serif. */
:where(.thui, .thc-ui) :where(input, select, textarea, button, optgroup) {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
:where(.thui, .thc-ui) :where(button) { background: none; border: 0; }

/* Tables: a readable default so plugin tables are never raw UA tables. */
:where(.thui, .thc-ui) :where(table) { border-collapse: collapse; inline-size: 100%; }

/* Accessible focus - one consistent ring everywhere */
/* `[tabindex]:not([tabindex="-1"])`: WooCommerce moves focus to its notice
   container (a div with tabindex="-1") after a cart action so screen readers
   announce it. That is not a keyboard stop, but it still matched the ring and
   drew a 3px amber outline around the whole success notice on checkout. Only
   genuinely focusable things get the ring. */
:where(.thui, .thc-ui) :where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--thui-color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

:where(.thui, .thc-ui) ::selection { background: var(--thui-amber); color: var(--thui-color-accent-ink); }

/* Screen-reader-only text.

   This rule belongs to the theme, not to a plugin. It used to arrive from
   WooCommerce's woocommerce.css, which loaded on every route including the
   homepage - so once that stylesheet is dequeued in favour of the Travel Hub
   WooCommerce layer, nothing hides `.screen-reader-text` any more and the skip
   link renders as visible body text at the top of every page. Defining it here,
   in the layer that loads site-wide, is what keeps that from happening.

   Not wrapped in :where() - visually-hidden must not lose to a stray rule. */
.screen-reader-text:not(:focus):not(:active) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* RTL: components use logical properties; this flips text alignment defaults */
:where([dir="rtl"]) :where(.thui, .thc-ui) { text-align: right; }