/*
 * Mokawala Design Foundation V1
 * Scope: base rendering, multilingual typography, logical layout, accessibility, responsive foundation.
 * Languages: Arabic (RTL), French (LTR), English (LTR).
 */

:root {
  --mkw-page-pad: var(--wp--custom--layout--page-pad-mobile, 16px);
  --mkw-grid-gap: var(--wp--custom--layout--grid-gap-mobile, 16px);
}

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

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

html[dir="rtl"] {
  direction: rtl;
}

html[dir="ltr"] {
  direction: ltr;
}

body {
  margin: 0;
  min-block-size: 100vh;
  background: var(--wp--preset--color--canvas, #F7F4EF);
  color: var(--wp--preset--color--ink, #171717);
  font-family: var(--wp--preset--font-family--latin, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--wp--preset--font-size--body-latin, 16px);
  font-weight: 400;
  line-height: 1.6;
  text-align: start;
  overflow-wrap: break-word;
}

html:lang(fr) body,
html:lang(en) body {
  font-family: var(--wp--preset--font-family--latin, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--wp--preset--font-size--body-latin, 16px);
  line-height: 1.6;
}

html:lang(ar) body {
  font-family: var(--wp--preset--font-family--arabic, "IBM Plex Sans Arabic", "Noto Sans Arabic", Arial, sans-serif);
  font-size: var(--wp--preset--font-size--body-arabic, 17px);
  line-height: 1.7;
}

:where([lang|="ar"]) {
  font-family: var(--wp--preset--font-family--arabic, "IBM Plex Sans Arabic", "Noto Sans Arabic", Arial, sans-serif);
}

:where([lang|="fr"], [lang|="en"]) {
  font-family: var(--wp--preset--font-family--latin, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

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

input,
textarea {
  text-align: start;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-inline-size: 100%;
}

img,
picture,
video,
canvas {
  block-size: auto;
}

a {
  color: var(--wp--preset--color--ink, #171717);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

a:hover {
  color: var(--wp--preset--color--accent, #F25A24);
}

:focus-visible {
  outline: 3px solid var(--wp--preset--color--accent, #F25A24);
  outline-offset: 3px;
}

::selection {
  background: var(--wp--preset--color--accent-soft, #FFF0E9);
  color: var(--wp--preset--color--ink, #171717);
}

h1,
h2,
h3 {
  margin-block-start: 0;
  color: var(--wp--preset--color--ink, #171717);
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: 36px;
  line-height: 1.12;
}

h2 {
  font-size: 28px;
  line-height: 1.18;
}

h3 {
  font-size: 22px;
  line-height: 1.24;
}

html:lang(ar) h1,
html:lang(ar) h2,
html:lang(ar) h3 {
  line-height: 1.3;
}

.mkw-display {
  margin-block-start: 0;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

html:lang(ar) .mkw-display {
  line-height: 1.2;
}

p,
li {
  text-wrap: pretty;
}

.mkw-container {
  inline-size: min(
    calc(100% - (2 * var(--mkw-page-pad))),
    var(--wp--custom--layout--product-max, 1240px)
  );
  margin-inline: auto;
}

.mkw-reading {
  inline-size: min(100%, var(--wp--custom--layout--reading-max, 760px));
  margin-inline: auto;
}

.mkw-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--mkw-grid-gap);
}

.mkw-sr-only {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mkw-sr-only:focus {
  position: static !important;
  inline-size: auto !important;
  block-size: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

@media (min-width: 768px) {
  :root {
    --mkw-page-pad: var(--wp--custom--layout--page-pad-tablet, 24px);
    --mkw-grid-gap: var(--wp--custom--layout--grid-gap-tablet, 20px);
  }

  .mkw-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  :root {
    --mkw-page-pad: var(--wp--custom--layout--page-pad-desktop, 32px);
    --mkw-grid-gap: var(--wp--custom--layout--grid-gap-desktop, 24px);
  }

  h1 {
    font-size: var(--wp--preset--font-size--h1, 44px);
  }

  h2 {
    font-size: var(--wp--preset--font-size--h2, 32px);
  }

  h3 {
    font-size: var(--wp--preset--font-size--h3, 24px);
  }

  .mkw-display {
    font-size: var(--wp--preset--font-size--display, 56px);
  }

  .mkw-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

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