/* base.css — self-hosted fonts, typography defaults, links, focus, skip link */

/* Font URLs carry ?v= — bump it whenever a font file changes so browsers cannot reuse an old copy.
   Almarai — primary font (titles, subtitles, interface labels). SIL Open Font License 1.1 (/fonts/ofl-almarai.txt).
   Almarai ships 300/400/700/800 only, so the site uses 400 and 700 in this face. */
@font-face {
    font-family: "Almarai";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/almarai-400-arabic.woff2?v=2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}

@font-face {
    font-family: "Almarai";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/almarai-400-latin.woff2?v=2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Almarai";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/almarai-700-arabic.woff2?v=2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}

@font-face {
    font-family: "Almarai";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/almarai-700-latin.woff2?v=2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Sans Arabic — secondary font (normal text only). SIL Open Font License 1.1 (/fonts/ofl-ibm-plex-sans-arabic.txt).
   Google Fonts subsets: the Latin files load only when Latin glyphs are rendered; unused weights never download. */
@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-arabic-400-arabic.woff2?v=2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-arabic-400-latin.woff2?v=2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-arabic-500-arabic.woff2?v=2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-arabic-500-latin.woff2?v=2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-arabic-700-arabic.woff2?v=2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}

@font-face {
    font-family: "IBM Plex Sans Arabic";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/ibm-plex-sans-arabic-700-latin.woff2?v=2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--header-size) + var(--space-md));
}

body {
    font-size: var(--fs-md);
    font-weight: 400;
    line-height: var(--lh-body);
}

:lang(ar) { line-height: var(--lh-body); }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--lh-heading);
    color: var(--color-heading);
    text-wrap: balance;
}

h1 { font-size: clamp(var(--fs-2xl), 5vw, var(--fs-4xl)); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

strong, b { font-weight: 700; }

p:not([class]) a:not([class]) {
    color: var(--color-accent-deep);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

::selection {
    background-color: var(--color-surface-gold);
    color: var(--color-heading);
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
    border-radius: var(--radius-focus);
}

.skip-link {
    font-family: var(--font-heading);
    position: absolute;
    inset-block-start: var(--space-sm);
    inset-inline-start: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--radius-soft);
    font-size: var(--fs-sm);
    font-weight: 700;
    z-index: var(--z-skip);
    transform: translateY(-200%);
    transition: transform var(--transition-base);
}

.skip-link:focus { transform: translateY(0); }

@media (min-width: 768px) {
    body { font-size: var(--fs-lg); }
}

@media (min-width: 992px) {
    html { scroll-padding-block-start: calc(var(--header-size-lg) + var(--space-md)); }
}