/* The `_base` theme (P2-T10; D8): tokens, the site chrome, typography and the content class
   allowlist (Q9). Cascade layers (tokens < base < layout < content; module stylesheets are
   unlayered, so they win), logical properties only (one file for rtl and ltr), light and dark
   schemes from the visitor's preference. The token defaults equal theme.json's "defaults"
   (ThemeBaseTest); the Owner's values come from assets/site/custom.<hash>.css (light scheme). */
@layer tokens, base, layout, content;

/* Tajawal (OFL-1.1, public_html/assets/fonts/tajawal/OFL.txt): Arabic and Latin subsets, 400 and 700. */
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/tajawal/tajawal-400-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/tajawal/tajawal-700-arabic.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/tajawal/tajawal-400-latin.woff2") 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tajawal"; font-style: normal; font-weight: 700; font-display: swap; src: url("../../fonts/tajawal/tajawal-700-latin.woff2") 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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@layer tokens {
    :root {
        color-scheme: light dark;
        --pf-primary: #0b5394;
        --pf-accent: #9a3412;
        --pf-font: "Tajawal", system-ui, sans-serif;
        --pf-bg: #ffffff;
        --pf-surface: #f5f7f9;
        --pf-text: #1f2933;
        --pf-muted: #4b5866;
        --pf-border: #d3d9df;
        --pf-danger: #a61b1b;
        --pf-success: #1e6b22;
        --pf-success-bg: #eef7ee;
        --pf-measure: 46rem;
    }
    @media (prefers-color-scheme: dark) {
        :root {
            --pf-primary: #8cb8ef;
            --pf-accent: #f6ad7b;
            --pf-bg: #121820;
            --pf-surface: #1b232d;
            --pf-text: #e6eaee;
            --pf-muted: #b3bec9;
            --pf-border: #3a4653;
            --pf-danger: #ff9b9b;
            --pf-success: #9be29f;
            --pf-success-bg: #16301a;
        }
    }
    /* P3-T11: a site forced dark (`theme.scheme` = dark, <html data-scheme="dark">; the artistic preset)
       has the dark tokens whatever the visitor's preference */
    :root[data-scheme="dark"] {
        color-scheme: dark;
        --pf-primary: #8cb8ef;
        --pf-accent: #f6ad7b;
        --pf-bg: #121820;
        --pf-surface: #1b232d;
        --pf-text: #e6eaee;
        --pf-muted: #b3bec9;
        --pf-border: #3a4653;
        --pf-danger: #ff9b9b;
        --pf-success: #9be29f;
        --pf-success-bg: #16301a;
    }
}

@layer base {
    html { -webkit-text-size-adjust: 100%; }
    body { margin: 0; font-family: var(--pf-font); line-height: 1.7; color: var(--pf-text); background: var(--pf-bg); }
    a { color: var(--pf-primary); }
    a:hover, a:focus-visible { color: var(--pf-accent); }
    :focus-visible { outline: 2px solid var(--pf-primary); outline-offset: 2px; }
    h1, h2, h3 { line-height: 1.3; }
    img { max-inline-size: 100%; block-size: auto; }
    input, select, textarea, button { font: inherit; color: inherit; }
    input[type="text"], input[type="email"], select, textarea { background: var(--pf-bg); border: 1px solid var(--pf-muted); border-radius: 4px; padding: 0.5rem; }
    button { cursor: pointer; padding: 0.5rem 1.2rem; border: 1px solid var(--pf-primary); border-radius: 4px; background: var(--pf-primary); color: var(--pf-bg); }
}

@layer layout {
    .pf-skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -10rem; padding: 0.5rem 1rem; background: var(--pf-bg); color: var(--pf-primary); border: 2px solid var(--pf-primary); z-index: 10; }
    .pf-skip:focus { inset-block-start: 1rem; }
    .pf-site-header { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: baseline; padding-block: 1rem; padding-inline: 1.5rem; border-block-end: 1px solid var(--pf-border); }
    .pf-site-name { font-weight: 700; color: inherit; text-decoration: none; }
    .pf-site-nav, .pf-site-footnav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
    .pf-main { max-inline-size: var(--pf-measure); margin-inline: auto; padding-block: 2rem; padding-inline: 1.5rem; }
    .pf-site-footer { padding-block: 1.5rem; padding-inline: 1.5rem; border-block-start: 1px solid var(--pf-border); color: var(--pf-muted); }
    .pf-muted { color: var(--pf-muted); }
    /* the profile hero's call-to-action buttons (P2-T01-F1; Executive styles them as buttons) */
    .pf-hero-cta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; padding: 0; }
    /* the home layout (P2-T10-F2, views/home/layout.php) and its newsletter call to action */
    .pf-home-section + .pf-home-section { margin-block-start: 2.5rem; }
    .pf-home-more { margin-block-start: 1rem; }
    .pf-newsletter-cta { padding-block: 1.25rem; padding-inline: 1.5rem; background: var(--pf-surface); border: 1px solid var(--pf-border); border-radius: 6px; }
    .pf-button { display: inline-block; padding-block: 0.5rem; padding-inline: 1.2rem; border-radius: 4px; background: var(--pf-primary); color: var(--pf-bg); text-decoration: none; font-weight: 700; }
    .pf-button:hover, .pf-button:focus-visible { background: var(--pf-accent); color: var(--pf-bg); }
    .pf-footer-cta { margin-block: 0 0.75rem; } /* P2-T19: the footer's newsletter line */
    /* the coming-soon page (P2-T13, core/ComingSoon.php) */
    .pf-coming-soon-main { min-block-size: 70vh; display: flex; flex-direction: column; justify-content: center; text-align: center; }
    .pf-coming-soon-lead { font-size: 1.5rem; color: var(--pf-primary); }
}

/* The content class allowlist (Q9, P1c-T06: the purifier stores classes, never style). */
@layer content {
    .align-start { text-align: start; }
    .align-center { text-align: center; }
    .align-end { text-align: end; }
    .align-justify { text-align: justify; }
    .size-sm { font-size: 0.875em; }
    .size-lg { font-size: 1.25em; }
    .float-start { float: inline-start; margin-inline-end: 1em; max-inline-size: 50%; }
    .float-end { float: inline-end; margin-inline-start: 1em; max-inline-size: 50%; }
    .embed-16x9, .embed-4x3, .embed-1x1 { position: relative; inline-size: 100%; }
    .embed-16x9 { aspect-ratio: 16 / 9; }
    .embed-4x3 { aspect-ratio: 4 / 3; }
    .embed-1x1 { aspect-ratio: 1 / 1; }
    .embed-16x9 > iframe, .embed-4x3 > iframe, .embed-1x1 > iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
    /* a form's honeypot field (FormGuard; no inline style) */
    .pf-hp { position: absolute; inset-inline-start: -9999px; inset-block-start: -9999px; }
}

/* P3-T09: the portfolio-grid layout (themes/_base/views/portfolio/grid.php) */
.pf-portfolio-grid { list-style: none; padding: 0; margin: 1rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; }
.pf-portfolio-tile a { display: block; text-decoration: none; color: inherit; }
.pf-portfolio-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.pf-portfolio-title { display: block; padding-block: .4rem; font-weight: 600; }
.pf-portfolio-figure { margin: 1rem 0; }
.pf-portfolio-figure img { max-width: 100%; height: auto; }