/* Al-Jathnan core bundle. Generated from unchanged token/base/typography/global CSS. */

/* ===== tokens.css ===== */
/* =========================================================
 * Al-Jathnan — Design Tokens
 * Navy + Gold premium identity
 * ======================================================= */
:root{

    /* ---------- Colors: Navy (أساسي) ---------- */
    --aj-navy:           #0A2540;
    --aj-navy-deep:      #061829;
    --aj-navy-soft:      #133E66;
    --aj-navy-black:     #030D18;

    /* ---------- Colors: Blue (CTA ثانوي) ---------- */
    --aj-blue:           #1E5FA8;
    --aj-blue-bright:    #2E7DD1;
    --aj-blue-soft:      #E8F0FA;

    /* ---------- Colors: Gold (Accent) ---------- */
    --aj-gold:           #C9A961;
    --aj-gold-deep:      #A88945;
    --aj-gold-bright:    #DDBA70;
    --aj-gold-soft:      #F5EDDC;

    /* ---------- Colors: Neutrals ---------- */
    --aj-cream:          #FAF7F2;
    --aj-cream-warm:     #F4EEE4;
    --aj-cream-deep:     #EBE3D5;

    --aj-charcoal:       #2C2C2C;
    --aj-charcoal-soft:  #2F4154;
    --aj-muted:          #536579;
    --aj-muted-light:    #7C8996;
    --aj-text:           #2F4154;
    --aj-text-soft:      #465A6E;
    --aj-text-muted:     #627386;
    --aj-hero-gold:      #B47B18;

    --aj-white:          #FFFFFF;
    --aj-black:          #0A0A0A;

    /* ---------- Colors: Semantic ---------- */
    --aj-success:        #2D7A4F;
    --aj-warning:        #D68A2E;
    --aj-error:          #C43D3D;

    /* ---------- Borders ---------- */
    --aj-line:           rgba(10, 37, 64, 0.08);
    --aj-line-strong:    rgba(10, 37, 64, 0.16);
    --aj-line-gold:      rgba(201, 169, 97, 0.28);
    --aj-line-dark:      rgba(255, 255, 255, 0.10);

    /* ---------- Surfaces ---------- */
    --aj-surface-light:  var(--aj-cream);
    --aj-surface-blush:  var(--aj-gold-soft);
    --aj-surface-brand:  var(--aj-navy);
    --aj-surface-dark:   var(--aj-navy-deep);

    /* ---------- Typography ---------- */
    --aj-font-display:  "Tajawal", Tahoma, Arial, sans-serif;
    --aj-font-body:     "Tajawal", Tahoma, Arial, sans-serif;

    --aj-weight-regular:   400;
    --aj-weight-medium:    500;
    --aj-weight-semibold:  600;
    --aj-weight-bold:      700;
    --aj-weight-extrabold: 800;

    /* ---------- Font Sizes (Fluid) ---------- */
    --aj-text-xs:     0.75rem;    /* 12px */
    --aj-text-sm:     0.875rem;   /* 14px */
    --aj-text-base:   1rem;       /* 16px */
    --aj-text-md:     1rem;       /* 16px */
    --aj-text-lg:     1.125rem;   /* 18px */
    --aj-text-xl:     1.25rem;    /* 20px */

    --aj-heading-sm:  clamp(1.25rem, 1.8vw, 1.5rem);      /* 20-24 */
    --aj-heading-md:  clamp(1.4rem, 2vw, 1.7rem);         /* 22-27 */
    --aj-heading-lg:  clamp(1.75rem, 2.6vw, 2.25rem);     /* 28-36 */
    --aj-display:     clamp(2.15rem, 3.4vw, 3rem);        /* 34-48 */

    /* ---------- Line Heights ---------- */
    --aj-leading-tight:   1.20;
    --aj-leading-heading: 1.30;
    --aj-leading-body:    1.85;
    --aj-leading-relaxed: 1.95;

    /* ---------- Containers ---------- */
    --aj-container-narrow:  760px;
    --aj-container:         1200px;
    --aj-container-wide:    1360px;
    --aj-gutter:            clamp(24px, 3.5vw, 56px);

    /* ---------- Spacing (8px scale) ---------- */
    --aj-space-1:   4px;
    --aj-space-2:   8px;
    --aj-space-3:   12px;
    --aj-space-4:   16px;
    --aj-space-5:   24px;
    --aj-space-6:   32px;
    --aj-space-7:   40px;
    --aj-space-8:   56px;
    --aj-space-9:   72px;
    --aj-space-10:  96px;
    --aj-space-11:  128px;
    --aj-space-12:  160px;

    --aj-section-space:     clamp(64px, 7vw, 104px);
    --aj-section-space-sm:  clamp(48px, 5vw, 80px);

    /* ---------- Radius ---------- */
    --aj-radius-xs:    8px;
    --aj-radius-sm:    12px;
    --aj-radius:       18px;
    --aj-radius-lg:    28px;
    --aj-radius-xl:    40px;
    --aj-radius-pill:  999px;

    /* ---------- Shadows ---------- */
    --aj-shadow-xs:    0 2px 8px rgba(10, 37, 64, 0.04);
    --aj-shadow-sm:    0 8px 24px rgba(10, 37, 64, 0.06);
    --aj-shadow:       0 16px 48px rgba(10, 37, 64, 0.10);
    --aj-shadow-lg:    0 28px 72px rgba(10, 37, 64, 0.14);
    --aj-shadow-xl:    0 40px 100px rgba(10, 37, 64, 0.18);
    --aj-shadow-gold:  0 12px 32px rgba(201, 169, 97, 0.22);

    /* ---------- Motion ---------- */
    --aj-ease:          cubic-bezier(0.22, 1, 0.36, 1);
    --aj-ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
    --aj-duration-fast: 180ms;
    --aj-duration:      320ms;
    --aj-duration-slow: 600ms;

    /* ---------- Z-Index ---------- */
    --aj-z-header:      100;
    --aj-z-modal:       1000;
    --aj-z-toast:       2000;
}

/* ===== base.css ===== */
/* =========================================================
 * Al-Jathnan — Base Reset + RTL
 * Low-specificity foundation
 * ======================================================= */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 100px;
}

body.aj-site {
    margin: 0;
    padding: 0;
    direction: inherit;
    text-align: start;
    background: var(--aj-cream);
    color: var(--aj-charcoal);
    font-family: var(--aj-font-body);
    font-size: var(--aj-text-base);
    font-weight: var(--aj-weight-regular);
    line-height: var(--aj-leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* =========================================================
 * Low-specificity element defaults
 * Components/modules must always be able to override these.
 * ======================================================= */

:where(body.aj-site) ::selection {
    background: var(--aj-gold);
    color: var(--aj-navy-deep);
}

:where(body.aj-site) :where(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-family: var(--aj-font-display);
    font-weight: var(--aj-weight-extrabold);
    line-height: var(--aj-leading-heading);
    color: var(--aj-navy);
    text-wrap: balance;
}

:where(body.aj-site) p {
    margin: 0;
    text-wrap: pretty;
}

:where(body.aj-site) :where(img, picture, svg, video) {
    display: block;
    max-width: 100%;
    height: auto;
}

:where(body.aj-site) a {
    color: inherit;
    text-decoration: none;
    transition: color var(--aj-duration-fast) var(--aj-ease-soft);
}

:where(body.aj-site) :where(button, input, textarea, select) {
    font: inherit;
    color: inherit;
}

:where(body.aj-site) button {
    cursor: pointer;
    border: 0;
    background: none;
}

:where(body.aj-site) :where(input, textarea, select) {
    direction: inherit;
    text-align: start;
}

:where(body.aj-site) :where(input::placeholder, textarea::placeholder) {
    color: var(--aj-muted-light);
    opacity: 1;
}

:where(body.aj-site) :focus-visible {
    outline: 3px solid rgba(201, 169, 97, 0.4);
    outline-offset: 4px;
    border-radius: var(--aj-radius-xs);
}

:where(body.aj-site) main {
    display: block;
}

/* IMPORTANT: zero specificity so module list spacing always wins. */
:where(body.aj-site) :where(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(body.aj-site) strong {
    font-weight: var(--aj-weight-bold);
}

/* Screen reader text */
.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    clip: auto !important;
    width: auto;
    height: auto;
    margin: 12px;
    padding: 12px 18px;
    overflow: visible;
    z-index: 99999;
    background: var(--aj-white);
    color: var(--aj-navy);
    border-radius: var(--aj-radius-xs);
    box-shadow: var(--aj-shadow);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
 * Astra Isolation
 * Intentional high specificity: Astra is hierarchy only.
 * ======================================================= */

body.aj-site #page,
body.aj-site .site,
body.aj-site .site-content,
body.aj-site .content-area,
body.aj-site .site-main,
body.aj-site .ast-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.aj-site #primary,
body.aj-site #primary.aj-main {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

body.aj-site .ast-separate-container,
body.aj-site .ast-plain-container {
    background: transparent !important;
}

body.aj-site #ast-scroll-top,
body.aj-site .ast-scroll-to-top-right,
body.aj-site .ast-scroll-to-top-left {
    display: none !important;
}

body.aj-home .entry-header,
body.aj-home .entry-title {
    display: none !important;
}


/* ===== typography.css ===== */

/* =========================================================
 * Tajawal enforcement
 * Keep the primary site typeface consistent on desktop/mobile.
 * Component-specific display faces (e.g. KENYA) can still override this.
 * ======================================================= */
body.aj-site,
body.aj-site .elementor{
    font-family:"Tajawal",Tahoma,Arial,sans-serif!important;
}
body.aj-site :where(h1,h2,h3,h4,h5,h6,p,a,li,button,input,textarea,select,label,small,blockquote),
body.aj-site .elementor :where(h1,h2,h3,h4,h5,h6,p,a,li,button,input,textarea,select,label,small,blockquote){
    font-family:"Tajawal",Tahoma,Arial,sans-serif!important;
}
/* =========================================================
 * Al-Jathnan — Reference Typography System
 * Matches the calmer scale of the supplied legacy reference.
 * Arabic: Tajawal, no letter-spacing.
 * All headings: line-height 1.3.
 * ======================================================= */
body.aj-site{font-family:var(--aj-font-body);font-size:16px;font-weight:500;line-height:1.75;font-kerning:normal;font-synthesis:none;font-feature-settings:"kern" 1,"liga" 1;color:var(--aj-text)}
body.aj-site :where(button,input,select,textarea){font-family:var(--aj-font-body)}
body.aj-site :where(h1,h2,h3,h4,h5,h6,.aj-display,.aj-section-title){font-family:var(--aj-font-display);font-weight:600;line-height:1.3;letter-spacing:0;word-spacing:0;color:var(--aj-navy);text-wrap:pretty}
body.aj-site :where(h1,.aj-display){font-size:var(--aj-display)}
body.aj-site :where(h2,.aj-section-title){font-size:var(--aj-heading-lg)}
body.aj-site h3{font-size:var(--aj-heading-md)}
body.aj-site h4{font-size:var(--aj-heading-sm)}
body.aj-site h5{font-size:var(--aj-text-xl)}
body.aj-site h6{font-size:var(--aj-text-lg)}
body.aj-site :where(p,li,blockquote){font-family:var(--aj-font-body);font-size:var(--aj-text-base);font-weight:500;line-height:1.75;letter-spacing:0;word-spacing:0;color:var(--aj-text)}
body.aj-site .aj-lead{max-width:720px;font-size:var(--aj-text-lg);line-height:1.8;color:var(--aj-text-soft)}
body.aj-site :where(.aj-eyebrow,.aj-kicker,[class$="__eyebrow"]){font-family:var(--aj-font-body);font-size:var(--aj-text-sm);font-weight:600;line-height:1.5;letter-spacing:0;word-spacing:0}
body.aj-site :where(.aj-accent,.aj-display em,.aj-section-title em){color:var(--aj-gold);font-style:normal;font-weight:inherit}
body.aj-site small{font-family:var(--aj-font-body);font-size:var(--aj-text-sm);line-height:1.6;color:var(--aj-text-soft)}
html:not([dir="rtl"]) body.aj-site :where(h1,h2,h3,h4,h5,h6,.aj-display,.aj-section-title){letter-spacing:-.01em}
html:not([dir="rtl"]) body.aj-site :where(p,li,blockquote){line-height:1.7}
@media(max-width:767px){body.aj-site :where(h1,.aj-display){font-size:clamp(1.95rem,7vw,2.4rem)}body.aj-site :where(h2,.aj-section-title){font-size:clamp(1.55rem,5.5vw,1.95rem)}body.aj-site h3{font-size:1.35rem}body.aj-site h4{font-size:1.15rem}body.aj-site :where(p,li,blockquote){font-size:.95rem;line-height:1.72}body.aj-site .aj-lead{font-size:1rem}}
@media(max-width:420px){body.aj-site :where(h1,.aj-display){font-size:1.85rem}body.aj-site :where(h2,.aj-section-title){font-size:1.5rem}}


/* ===== global.css ===== */
/* =========================================================
 * Al-Jathnan — Global Components & Utilities
 * ======================================================= */

/* ---------- Containers ---------- */
.aj-container {
    width: min(calc(100% - (var(--aj-gutter) * 2)), var(--aj-container));
    margin-inline: auto;
}

.aj-container--wide {
    width: min(calc(100% - (var(--aj-gutter) * 2)), var(--aj-container-wide));
    margin-inline: auto;
}

.aj-container--narrow {
    width: min(calc(100% - (var(--aj-gutter) * 2)), var(--aj-container-narrow));
    margin-inline: auto;
}

/* ---------- Sections ---------- */
.aj-section {
    position: relative;
    padding-block: var(--aj-section-space);
}

.aj-section--compact {
    padding-block: var(--aj-section-space-sm);
}

.aj-section--no-top {
    padding-block-start: 0;
}

.aj-section--no-bottom {
    padding-block-end: 0;
}

/* ---------- Surfaces ---------- */
.aj-surface--light {
    background: var(--aj-cream);
    color: var(--aj-charcoal);
}

.aj-surface--warm {
    background: var(--aj-cream-warm);
    color: var(--aj-charcoal);
}

.aj-surface--gold-soft {
    background: var(--aj-gold-soft);
    color: var(--aj-navy);
}

.aj-surface--brand {
    background: var(--aj-navy);
    color: var(--aj-white);
}

.aj-surface--dark {
    background: var(--aj-navy-deep);
    color: var(--aj-white);
}

/* Dark surface: قلّب ألوان النصوص */
.aj-surface--brand h1,
.aj-surface--brand h2,
.aj-surface--brand h3,
.aj-surface--brand h4,
.aj-surface--brand .aj-display,
.aj-surface--brand .aj-section-title,
.aj-surface--dark h1,
.aj-surface--dark h2,
.aj-surface--dark h3,
.aj-surface--dark h4,
.aj-surface--dark .aj-display,
.aj-surface--dark .aj-section-title {
    color: var(--aj-white);
}

.aj-surface--brand p,
.aj-surface--brand li,
.aj-surface--dark p,
.aj-surface--dark li {
    color: rgba(255, 255, 255, 0.78);
}

.aj-surface--brand .aj-eyebrow,
.aj-surface--dark .aj-eyebrow {
    color: var(--aj-gold-bright);
}

/* ---------- Buttons ---------- */
.aj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding-inline: 28px;
    border: 1.5px solid transparent;
    border-radius: var(--aj-radius-pill);
    font-family: var(--aj-font-body);
    font-size: var(--aj-text-base);
    font-weight: var(--aj-weight-bold);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform var(--aj-duration) var(--aj-ease),
        background-color var(--aj-duration-fast) var(--aj-ease-soft),
        border-color var(--aj-duration-fast) var(--aj-ease-soft),
        color var(--aj-duration-fast) var(--aj-ease-soft),
        box-shadow var(--aj-duration) var(--aj-ease);
}

.aj-btn:hover {
    transform: translateY(-2px);
}

.aj-btn:active {
    transform: translateY(0);
}

.aj-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Primary — Navy */
.aj-btn--primary,
a.aj-btn--primary,
a.aj-btn--primary:visited {
    background: var(--aj-navy);
    color: var(--aj-white);
    box-shadow: 0 12px 30px rgba(10, 37, 64, 0.22);
}

.aj-btn--primary:hover,
a.aj-btn--primary:hover,
a.aj-btn--primary:focus {
    background: var(--aj-navy-soft);
    color: var(--aj-white);
    box-shadow: 0 16px 40px rgba(10, 37, 64, 0.28);
}

/* Gold */
.aj-btn--gold,
a.aj-btn--gold,
a.aj-btn--gold:visited {
    background: var(--aj-gold);
    color: var(--aj-navy-deep);
    box-shadow: var(--aj-shadow-gold);
}

.aj-btn--gold:hover,
a.aj-btn--gold:hover,
a.aj-btn--gold:focus {
    background: var(--aj-gold-bright);
    color: var(--aj-navy-deep);
}

/* Ghost */
.aj-btn--ghost,
a.aj-btn--ghost,
a.aj-btn--ghost:visited {
    border-color: var(--aj-line-strong);
    background: transparent;
    color: var(--aj-navy);
}

.aj-btn--ghost:hover,
a.aj-btn--ghost:hover,
a.aj-btn--ghost:focus {
    border-color: var(--aj-navy);
    background: var(--aj-white);
    color: var(--aj-navy);
}

/* Ghost Light — على خلفية داكنة */
.aj-btn--ghost-light,
a.aj-btn--ghost-light,
a.aj-btn--ghost-light:visited {
    border-color: rgba(255, 255, 255, 0.28);
    background: transparent;
    color: var(--aj-white);
}

.aj-btn--ghost-light:hover,
a.aj-btn--ghost-light:hover,
a.aj-btn--ghost-light:focus {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
    color: var(--aj-white);
}

/* WhatsApp — أخضر */
.aj-btn--whatsapp,
a.aj-btn--whatsapp,
a.aj-btn--whatsapp:visited {
    background: #25D366;
    color: var(--aj-white);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.28);
}

.aj-btn--whatsapp:hover,
a.aj-btn--whatsapp:hover,
a.aj-btn--whatsapp:focus {
    background: #1EBE5D;
    color: var(--aj-white);
}

/* ---------- Button Sizes ---------- */
.aj-btn--sm {
    min-height: 44px;
    padding-inline: 20px;
    font-size: var(--aj-text-sm);
}

.aj-btn--lg {
    min-height: 62px;
    padding-inline: 36px;
    font-size: var(--aj-text-md);
}

/* ---------- Utilities ---------- */
.aj-text-center { text-align: center; }
.aj-text-right  { text-align: right; }
.aj-text-left   { text-align: left; }

.aj-relative { position: relative; }
.aj-absolute { position: absolute; }
.aj-hidden   { display: none !important; }
.aj-sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* ---------- Section Header (مشترك بين السكشنات) ---------- */
.aj-section-head {
    max-width: 780px;
    margin-inline: auto;
    margin-bottom: clamp(40px, 5vw, 64px);
    text-align: center;
}

.aj-section-head--right {
    margin-inline: 0;
    text-align: right;
}

.aj-section-head .aj-eyebrow {
    justify-content: center;
}

.aj-section-head--right .aj-eyebrow {
    justify-content: flex-start;
}

.aj-section-head .aj-lead {
    margin-inline: auto;
    margin-top: 18px;
}

.aj-section-head--right .aj-lead {
    margin-inline: 0;
}

/* ---------- Divider / Rule ---------- */
.aj-rule {
    width: 100%;
    height: 1px;
    background: var(--aj-line);
    border: 0;
    margin: 0;
}

.aj-rule--gold {
    background: linear-gradient(90deg, transparent, var(--aj-gold), transparent);
    height: 2px;
    max-width: 80px;
    margin-inline: auto;
}

/* ---------- Card Base ---------- */
.aj-card {
    position: relative;
    background: var(--aj-white);
    border: 1px solid var(--aj-line);
    border-radius: var(--aj-radius);
    padding: clamp(24px, 3vw, 36px);
    transition:
        transform var(--aj-duration) var(--aj-ease),
        box-shadow var(--aj-duration) var(--aj-ease),
        border-color var(--aj-duration-fast) var(--aj-ease-soft);
}

.aj-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--aj-shadow);
    border-color: var(--aj-line-gold);
}

/* ---------- Pattern / Decoration ---------- */
.aj-pattern-gold {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(201, 169, 97, 0.08), transparent 40%),
        radial-gradient(circle at 75% 70%, rgba(201, 169, 97, 0.06), transparent 45%);
}

/* ---------- Responsive Padding ---------- */
@media (max-width: 767px) {
    .aj-section-head {
        margin-bottom: 32px;
    }
    .aj-btn {
        min-height: 50px;
        padding-inline: 22px;
        font-size: var(--aj-text-sm);
    }
    .aj-btn--lg {
        min-height: 56px;
        padding-inline: 28px;
        font-size: var(--aj-text-base);
    }
}