/**
 * myLogbook base layer — Zone 0.
 *
 * Deliberate departure from the old theme's approach: the old CSS reset
 * neutralized h1-h6 to look like plain text everywhere (font-size/weight:
 * inherit), relying on utility classes for visual distinction — which
 * worked for hand-built template markup but silently broke WordPress's
 * native Heading block (real post content), undetected for months.
 *
 * Here, real elements are styled directly and correctly by default.
 * Utility classes still exist for deliberate overrides, but nothing
 * *requires* a class just to not look like broken plain text — in the
 * editor, in post content, or anywhere else.
 */

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

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

body {
  margin: 0;
  background-color: var(--ml-bg-page);
  color: var(--ml-text-primary);
  font-family: var(--ml-font-sans);
  font-size: var(--ml-text-base);
  font-weight: 400;
  line-height: var(--ml-leading-normal);
  transition: background-color var(--ml-dur-base) var(--ml-ease), color var(--ml-dur-base) var(--ml-ease);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ml-font-sans);
  color: var(--ml-text-primary);
  font-weight: 700;
  line-height: var(--ml-leading-tight);
  margin: 0 0 var(--ml-space-sm);
}

h1 { font-size: var(--ml-text-4xl); font-weight: 800; }
h2 { font-size: var(--ml-text-2xl); }
h3 { font-size: var(--ml-text-xl); }
h4 { font-size: var(--ml-text-lg); font-weight: 600; }
h5 { font-size: var(--ml-text-base); font-weight: 600; }
h6 { font-size: var(--ml-text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ml-text-secondary); }

p {
  margin: 0 0 var(--ml-space-md);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--ml-accent);
  text-decoration: none;
}

a:hover {
  color: var(--ml-accent-hover);
  text-decoration: underline;
}

:focus-visible {
  outline: none;
  box-shadow: var(--ml-focus-ring);
  border-radius: var(--ml-radius-sm);
}

ul, ol {
  margin: 0 0 var(--ml-space-md);
  padding-inline-start: 1.25em;
}

li {
  margin-bottom: var(--ml-space-3xs);
}

img, svg {
  max-width: 100%;
  display: block;
}

hr {
  border: none;
  border-top: 1px solid var(--ml-border);
  margin: var(--ml-space-lg) 0;
}

table {
  border-collapse: collapse;
  width: 100%;
}

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

/* italic already exists as a real font style for Plus Jakarta Sans —
   no synthetic/oblique fallback needed, unlike the old Metrophobic idea */
::selection {
  background-color: var(--ml-accent-bg);
  color: var(--ml-accent-text);
}

/* Standard WP accessibility utility — visually hidden but still reachable
   by screen readers. Not provided automatically on the front end by WP
   core (only in wp-admin), so themes need to define it themselves. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ---- Arabic-script default + utility classes ----
   Bound to :lang(ar) — actual Arabic-tagged content — deliberately NOT to
   [dir="rtl"]. Direction and language are different concerns: the RTL
   toggle mirrors layout and may still be showing English content, and
   forcing Scheherazade New onto Latin text there would look wrong.
   :lang(ar) only fires where content is actually marked as Arabic
   (<html lang="ar">, or a specific element's lang="ar" attribute). */
:lang(ar) {
  font-family: var(--ml-font-arabic-default);
}

/* Manual overrides for deliberate per-element use regardless of the
   surrounding page's language/direction — e.g. a pull-quote in Amiri
   inside an otherwise-Tajawal article. */
.ml-font-amiri { font-family: var(--ml-font-arabic-amiri); }
.ml-font-tajawal { font-family: var(--ml-font-arabic-tajawal); }
.ml-font-scheherazade { font-family: var(--ml-font-arabic-scheherazade); }
.ml-font-elmessiri { font-family: var(--ml-font-arabic-elmessiri); }