/* base.css — reset, RTL typography, shared primitives */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }

html[dir="rtl"] body {
  font-family: var(--font-body-ar);
  color: var(--color-foreground);
  background: var(--color-background);
  line-height: 1.7;
  font-size: 16px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading-ar);
  color: var(--color-primary);
  line-height: 1.2;
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

a { color: var(--color-primary); text-decoration: none; transition: color var(--dur-micro) var(--ease); }
/* Buttons own their text color — keep the generic link hover off them so the text
   never collapses into the button's hover background (e.g. .btn-primary / a.button). */
a:not(.btn):not(.button):hover { color: var(--color-primary-hover); }

img, video { max-width: 100%; display: block; }
ul { list-style: none; padding: 0; }

button { font: inherit; cursor: pointer; border: none; background: none; }

:focus-visible { outline: 2px solid var(--color-accent-strong); outline-offset: 2px; }

/* Visually-hidden until focused (WP-compatible) */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip-to-content link (WCAG 2.4.1) — visible only when focused */
.skip-link { position: fixed; inset-block-start: var(--space-sm); inset-inline-start: -9999px;
  z-index: 1000; background: var(--color-primary); color: var(--color-on-primary);
  padding: 10px 18px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-weight: 600; }
.skip-link:focus { inset-inline-start: var(--space-sm); color: var(--color-on-primary); }

/* Bidi safety: isolate LTR runs (currency, SKU, measurements) inside RTL flow so digits + ₪ don't reorder */
.price, .woocommerce-Price-amount, .pdp-sizeguide-inner th, .pdp-sizeguide-inner td { unicode-bidi: isolate; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-lg); }
.section { padding-block: var(--space-3xl); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: var(--space-sm);
  padding: 12px 28px; border-radius: var(--radius-sm); font-weight: 600;
  transition: all var(--dur-micro) var(--ease); cursor: pointer; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover { background: var(--color-primary-hover); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-accent); }
.btn-outline:hover { border-color: var(--color-accent-hover); background: var(--color-muted); }

/* Rose-gold hairline */
.hairline { height: 1px; background: var(--color-accent); border: 0; opacity: 0.6; }

/* Reduced motion: GSAP also checks this in JS */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}