/* =============================================================================
   Aamal Aljoud — Redesign Base Layer
   -----------------------------------------------------------------------------
   Global typography, container system and RTL foundations for the public site.
   Loaded after legacy CSS, so the few global rules here intentionally win.
   Everything else is namespaced under .aj-* to avoid touching legacy blocks.
   ========================================================================== */

/* ------------------------------------------------------------------ document */

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

body {
    font-family: var(--aj-font);
    font-size: var(--aj-fs-body);
    font-weight: var(--aj-fw-regular);
    line-height: var(--aj-lh-normal);
    color: var(--aj-text);
    background-color: var(--aj-page);
    text-align: start;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The legacy theme sets a horizontal scrollbar loose on a few pages.
   Containing it here keeps the new shell from inheriting the problem. */
body {
    overflow-x: clip;
}

/* --------------------------------------------------------------- typography */

.aj-display,
.aj-h1,
.aj-h2,
.aj-h3,
.aj-h4 {
    font-family: var(--aj-font);
    font-weight: var(--aj-fw-bold);
    color: var(--aj-text);
    line-height: var(--aj-lh-tight);
    letter-spacing: var(--aj-ls-tight);
    margin: 0;
}

.aj-display {
    font-size: var(--aj-fs-display);
}
.aj-h1 {
    font-size: var(--aj-fs-h1);
}
.aj-h2 {
    font-size: var(--aj-fs-h2);
}
.aj-h3 {
    font-size: var(--aj-fs-h3);
    line-height: var(--aj-lh-snug);
}
.aj-h4 {
    font-size: var(--aj-fs-h4);
    line-height: var(--aj-lh-snug);
}

.aj-body-lg {
    font-size: var(--aj-fs-body-lg);
    line-height: var(--aj-lh-relaxed);
    color: var(--aj-text-secondary);
}
.aj-body {
    font-size: var(--aj-fs-body);
    line-height: var(--aj-lh-normal);
}
.aj-sm {
    font-size: var(--aj-fs-sm);
}
.aj-caption {
    font-size: var(--aj-fs-caption);
    line-height: var(--aj-lh-snug);
    color: var(--aj-text-muted);
}

.aj-text-secondary {
    color: var(--aj-text-secondary);
}
.aj-text-muted {
    color: var(--aj-text-muted);
}
.aj-text-accent {
    color: var(--aj-accent);
}

/* ---------------------------------------------------------------- container */

.aj-container {
    width: 100%;
    max-width: var(--aj-container-max);
    margin-inline: auto;
    padding-inline: var(--aj-container-pad);
}

.aj-container--narrow {
    max-width: var(--aj-container-narrow);
}

.aj-container--wide {
    max-width: 1440px;
}

/* Full-bleed helper for hero/imagery. Uses margin-inline so it stays correct
   in RTL and never introduces the 100vw scrollbar bug. */
.aj-bleed {
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}

/* ------------------------------------------------------------------ section */

.aj-section {
    padding-block: var(--aj-section-y);
}

.aj-section--tight {
    padding-block: calc(var(--aj-section-y) * 0.6);
}

.aj-section--surface {
    background-color: var(--aj-surface);
}
.aj-section--muted {
    background-color: var(--aj-surface-muted);
}
.aj-section--band {
    background-color: var(--aj-surface-band);
}

/* -------------------------------------------------------------------- links */

.aj-link {
    color: var(--aj-accent);
    text-decoration: none;
    transition: color var(--aj-duration-fast) var(--aj-ease);
}

.aj-link:hover,
.aj-link:focus-visible {
    color: var(--aj-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------------- focus */

.aj-shell :focus-visible,
.aj-shell a:focus-visible,
.aj-shell button:focus-visible,
.aj-shell input:focus-visible,
.aj-shell select:focus-visible,
.aj-shell textarea:focus-visible {
    outline: 2px solid var(--aj-accent);
    outline-offset: 2px;
    border-radius: var(--aj-radius-sm);
}

/* -------------------------------------------------------------- utilities */

.aj-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link — visible only when focused */
.aj-skip-link {
    position: absolute;
    inset-inline-start: var(--aj-space-4);
    inset-block-start: -100px;
    z-index: var(--aj-z-modal);
    padding: var(--aj-space-2) var(--aj-space-4);
    background: var(--aj-accent);
    color: var(--aj-text-inverse);
    border-radius: var(--aj-radius-sm);
    font-weight: var(--aj-fw-medium);
    transition: inset-block-start var(--aj-duration) var(--aj-ease);
}

.aj-skip-link:focus {
    inset-block-start: var(--aj-space-4);
    color: var(--aj-text-inverse);
}

.aj-stack > * + * {
    margin-block-start: var(--aj-space-4);
}

.aj-flow {
    display: flex;
    align-items: center;
    gap: var(--aj-space-3);
}

/* -------------------------------------------------------------------- icons */

.aj-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--aj-icon-md);
    height: var(--aj-icon-md);
    line-height: 0;
    vertical-align: middle;
}

.aj-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: var(--aj-icon-stroke);
    display: block;
}

.aj-icon--xs {
    width: var(--aj-icon-xs);
    height: var(--aj-icon-xs);
}
.aj-icon--sm {
    width: var(--aj-icon-sm);
    height: var(--aj-icon-sm);
}
.aj-icon--lg {
    width: var(--aj-icon-lg);
    height: var(--aj-icon-lg);
}
.aj-icon--xl {
    width: var(--aj-icon-xl);
    height: var(--aj-icon-xl);
}

/* Directional icons must follow the writing direction. */
[dir="rtl"] .aj-icon--flip svg {
    transform: scaleX(-1);
}

/* Before Lucide replaces the placeholder there is nothing to paint. */
.aj-icon [data-lucide] {
    display: block;
}

/* ------------------------------------------------------------------ images */

.aj-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.aj-img--cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}