/**
 * base.css — element-level defaults for the Jouman theme.
 *
 * Reset + typography + form/element defaults only. Nothing here is a component
 * and nothing here carries a `jm-` block class except the two accessibility
 * utilities at the bottom. Every value consumes a token from tokens.css.
 *
 * Selectors are deliberately kept at element-level (specificity 0,0,1) so that
 * layout.css, components.css and woocommerce.css can layer over them freely.
 */

/* ---------------------------------------------------------------------------
 * 1. Reset
 * ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl,
dd,
ol,
ul,
fieldset,
legend,
pre {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

iframe {
  max-width: 100%;
  border: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------------------
 * 2. Document
 * ------------------------------------------------------------------------- */

body {
  background-color: var(--jm-color-ground);
  color: var(--jm-color-ink);
  font-family: var(--jm-font-body);
  font-size: var(--jm-fs-base);
  font-weight: var(--jm-fw-regular);
  line-height: var(--jm-lh-body);
  text-align: start;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------------------------------------------------------------------------
 * 3. Typography
 *
 * CRITICAL — ARABIC: `letter-spacing` is NEVER set on body copy or headings.
 * Arabic is a cursive script: adding tracking pulls the glyphs apart and breaks
 * the joins between letters, producing text that is disfigured and, at small
 * sizes, genuinely hard to read. The site is Arabic-first, so tracking is
 * permitted only on the opt-in `.jm-label--latin` utility further down, which
 * exists purely for short uppercase Latin labels and must never wrap Arabic.
 * ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--jm-font-head);
  font-weight: var(--jm-fw-semi);
  line-height: var(--jm-lh-head);
  color: var(--jm-color-ink);
  text-wrap: balance;
}

h1 { font-size: var(--jm-fs-2xl); }
h2 { font-size: var(--jm-fs-xl); }
h3 { font-size: var(--jm-fs-lg); }
h4 { font-size: var(--jm-fs-md); }
h5 { font-size: var(--jm-fs-base); }
h6 {
  font-size: var(--jm-fs-sm);
  color: var(--jm-color-ink-2);
}

@media (min-width: 768px) {
  h1 { font-size: var(--jm-fs-3xl); }
  h2 { font-size: var(--jm-fs-2xl); }
  h3 { font-size: var(--jm-fs-xl); }
  h4 { font-size: var(--jm-fs-lg); }
}

p {
  text-wrap: pretty;
}

small {
  font-size: var(--jm-fs-sm);
}

strong,
b {
  font-weight: var(--jm-fw-semi);
}

/* Prices and any figures rendered with Western digits. */
[data-numeric],
.jm-numeric {
  font-variant-numeric: tabular-nums;
}

/**
 * The ONLY place tracking is allowed. Opt-in class for short uppercase Latin
 * utility labels (e.g. "NEW", "SALE"). Never apply it to Arabic content — see
 * the note at the top of this section.
 */
.jm-label--latin {
  font-size: var(--jm-fs-xs);
  font-weight: var(--jm-fw-semi);
  line-height: var(--jm-lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------------------------
 * 4. Links
 * ------------------------------------------------------------------------- */

a {
  color: var(--jm-color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--jm-transition);
}

a:hover {
  color: var(--jm-color-accent-hover);
}

a:not([class]) {
  text-decoration-color: var(--jm-color-line);
}

/* ---------------------------------------------------------------------------
 * 5. Lists, quotes, rules, code
 * ------------------------------------------------------------------------- */

ul:not([class]),
ol:not([class]) {
  padding-inline-start: var(--jm-space-5);
}

li + li {
  margin-block-start: var(--jm-space-1);
}

dt {
  font-weight: var(--jm-fw-semi);
}

dd {
  margin-inline-start: var(--jm-space-5);
}

blockquote {
  border-inline-start: 2px solid var(--jm-color-olive);
  padding-inline-start: var(--jm-space-4);
  color: var(--jm-color-ink-2);
}

hr {
  border: 0;
  border-block-start: 1px solid var(--jm-color-line);
  margin-block: var(--jm-space-6);
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--jm-fs-sm);
}

code {
  background-color: var(--jm-color-surface-2);
  border-radius: var(--jm-radius);
  padding-inline: var(--jm-space-1);
}

pre {
  background-color: var(--jm-color-surface-2);
  border: 1px solid var(--jm-color-line);
  border-radius: var(--jm-radius);
  padding: var(--jm-space-4);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

/* ---------------------------------------------------------------------------
 * 6. Tables
 * ------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
}

caption {
  text-align: start;
  color: var(--jm-color-muted);
  font-size: var(--jm-fs-sm);
  padding-block-end: var(--jm-space-2);
}

th,
td {
  text-align: start;
  padding: var(--jm-space-3);
  border-block-end: 1px solid var(--jm-color-line-soft);
  vertical-align: top;
}

thead th {
  background-color: var(--jm-color-surface-2);
  font-weight: var(--jm-fw-semi);
  color: var(--jm-color-ink);
  border-block-end-color: var(--jm-color-line);
}

/* ---------------------------------------------------------------------------
 * 7. Forms
 *
 * Touch targets are at least 44px tall. Corners stay sharp (--jm-radius).
 * ------------------------------------------------------------------------- */

label {
  display: inline-block;
  font-size: var(--jm-fs-sm);
  font-weight: var(--jm-fw-medium);
  color: var(--jm-color-ink-2);
  margin-block-end: var(--jm-space-2);
}

fieldset {
  border: 1px solid var(--jm-color-line);
  border-radius: var(--jm-radius);
  padding: var(--jm-space-4);
}

legend {
  padding-inline: var(--jm-space-2);
  font-weight: var(--jm-fw-semi);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
  inline-size: 100%;
  min-block-size: 44px;
  padding-block: var(--jm-space-2);
  padding-inline: var(--jm-space-3);
  background-color: var(--jm-color-surface);
  color: var(--jm-color-ink);
  border: 1px solid var(--jm-color-line);
  border-radius: var(--jm-radius);
  line-height: var(--jm-lh-head);
  transition: border-color var(--jm-transition), background-color var(--jm-transition);
}

textarea {
  min-block-size: 8rem;
  resize: vertical;
}

select {
  cursor: pointer;
}

input::placeholder,
textarea::placeholder {
  color: var(--jm-color-muted);
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--jm-color-olive);
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--jm-color-surface-2);
  color: var(--jm-color-muted);
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  min-block-size: 0;
  accent-color: var(--jm-color-accent);
  cursor: pointer;
}

/* Element-level button defaults. The `.jm-btn` component in components.css
 * builds on top of these. */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-block-size: 44px;
  padding-block: var(--jm-space-2);
  padding-inline: var(--jm-space-5);
  background-color: var(--jm-color-accent);
  color: var(--jm-color-on-accent);
  font-family: var(--jm-font-body);
  font-weight: var(--jm-fw-semi);
  line-height: var(--jm-lh-head);
  border: 1px solid transparent;
  border-radius: var(--jm-radius);
  cursor: pointer;
  transition: background-color var(--jm-transition), border-color var(--jm-transition), color var(--jm-transition);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background-color: var(--jm-color-accent-hover);
}

button:disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled {
  background-color: var(--jm-color-oos);
  color: var(--jm-color-surface);
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * 8. Focus
 * ------------------------------------------------------------------------- */

:focus-visible {
  outline: var(--jm-focus-width) solid var(--jm-color-focus);
  outline-offset: var(--jm-focus-offset);
  border-radius: var(--jm-radius);
}

/* Never remove the ring; only suppress the default one for mouse users. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------------------------------------------------------------------------
 * 9. Motion preference
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* override author + Woo core animations */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
 * 10. Accessibility utilities
 * ------------------------------------------------------------------------- */

/* WordPress-standard screen reader text. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  block-size: 1px;
  inline-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.screen-reader-text:focus {
  background-color: var(--jm-color-surface);
  clip-path: none;
  color: var(--jm-color-accent);
  display: block;
  font-size: var(--jm-fs-sm);
  font-weight: var(--jm-fw-semi);
  block-size: auto;
  inset-inline-start: var(--jm-space-3);
  inset-block-start: var(--jm-space-3);
  line-height: normal;
  padding: var(--jm-space-3) var(--jm-space-4);
  text-decoration: none;
  inline-size: auto;
  z-index: 100000;
}

/* Skip link to #jm-content — hidden until it receives focus. */
.jm-skip-link {
  position: absolute;
  inset-inline-start: var(--jm-space-3);
  inset-block-start: calc(var(--jm-space-3) * -1);
  transform: translateY(-200%);
  z-index: 100000;
  padding: var(--jm-space-3) var(--jm-space-4);
  background-color: var(--jm-color-surface);
  color: var(--jm-color-accent);
  font-size: var(--jm-fs-sm);
  font-weight: var(--jm-fw-semi);
  text-decoration: none;
  border: 1px solid var(--jm-color-line);
  border-radius: var(--jm-radius);
  box-shadow: var(--jm-shadow-md);
}

.jm-skip-link:focus,
.jm-skip-link:focus-visible {
  inset-block-start: var(--jm-space-3);
  transform: none;
}