/* =============================================================================
   BASE.CSS — Design Tokens, Reset, Typography, Global Utilities
   Amazha Organization Website
   Architecture: Semantic Variable System (Single Source of Truth)
   ============================================================================= */


/* =============================================================================
   SECTION 1: FONT IMPORTS
   ============================================================================= */

@font-face {
    font-family: "rabar004";
    src: url(../fonts/Rabar_004.ttf);
    font-display: swap;
}

@font-face {
    font-family: "rabar031";
    src: url(../fonts/Rabar_031.ttf);
    font-display: swap;
}

@font-face {
    font-family: "rabar041";
    src: url(../fonts/Rabar_041.ttf);
    font-display: swap;
}

@font-face {
    font-family: "uniqaidar";
    src: url(../fonts/UniQAIDAR_BiLaL002.ttf);
    font-display: swap;
}


/* =============================================================================
   SECTION 2: DESIGN TOKENS — LIGHT THEME (Default)
   
   Naming convention: --[category]-[role]
   Categories: surface, text, brand, border, shadow, ui
   
   HOW IT WORKS:
   All components reference ONLY these semantic tokens. When the theme
   switches to [data-theme="dark"], each token re-maps to its dark
   counterpart. No component-level overrides are needed.
   ============================================================================= */

:root {

    /* --- Surface (Background) Tokens --- */
    --surface-page: #F8F9FA;
    /* Main page canvas */
    --surface-card: #FFFFFF;
    /* Cards, modals, dropdowns */
    --surface-subtle: #EEF2F7;
    /* Alternate section stripes, inputs */
    --surface-nav: #005A9C;
    /* Navigation bar */
    --surface-nav-scrolled: rgba(0, 64, 120, 0.92);
    /* Sticky nav after scroll */
    --surface-footer: #101b28;
    /* Site footer (intentionally dark always) */
    --surface-brand: #005A9C;
    /* Brand-colored section backgrounds */
    --surface-overlay: rgba(248, 249, 250, 0.96);
    /* Mobile menu overlay */
    --surface-impact: #004680;
    /* Stat card background inside brand section */

    /* --- Text Tokens --- */
    --text-base: #212529;
    /* Primary body text */
    --text-muted: #6B7280;
    /* Secondary / supporting text */
    --text-subtle: #9CA3AF;
    /* Placeholders, timestamps */
    --text-on-dark: #FDFDFD;
    /* Text on footer / dark surfaces */
    --text-on-brand: #FDFDFD;
    /* Text on brand-colored backgrounds */
    --text-link: #005A9C;
    /* Interactive links */
    --text-link-hover: #004680;

    /* --- Brand Color Tokens --- */
    --brand: #005A9C;
    /* Primary brand color (blue) */
    --brand-hover: #004680;
    --brand-alt: #C9A84C;
    /* Secondary brand color (gold) */
    --brand-alt-hover: #B38F34;

    /* --- Border Tokens --- */
    --border: #DEE2E6;
    --border-strong: #ADB5BD;
    --border-brand: #005A9C;

    /* --- Shadow Tokens --- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.14);
    --shadow-brand: 0 4px 24px rgba(0, 90, 156, 0.15);
    --shadow-color-raw: rgba(0, 0, 0, 0.10);
    /* For box-shadow spread tricks */

    /* --- UI State Tokens --- */
    --focus-ring: #C9A84C;
    --scrollbar-thumb: #ADB5BD;
    --scrollbar-track: #F8F9FA;

    /* --- Typography Scale --- */
    --font-body: 'rabar041', 'rabar031', sans-serif;
    --font-heading: 'rabar031', sans-serif;
    --font-logo: 'uniqaidar', sans-serif;

    --fs-xs: clamp(0.7rem, 1.2vw, 0.8rem);
    --fs-sm: clamp(0.8rem, 2vw, 0.97rem);
    --fs-base: clamp(1rem, 2vw, 1.1rem);
    --fs-md: clamp(1.1rem, 2.5vw, 1.4rem);
    --fs-lg: clamp(1.5rem, 3vw, 2rem);
    --fs-xl: clamp(2rem, 5vw, 3rem);

    /* --- Spacing Scale --- */
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(0.8rem, 1.5vw, 1rem);
    --space-md: clamp(1rem, 2vw, 1.5rem);
    --space-lg: clamp(2rem, 4vw, 3rem);
    --space-xl: clamp(3rem, 6vw, 5rem);

    /* --- Layout Tokens --- */
    --header-height: 80px;
    --header-height-scrolled: 70px;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* --- Permanent (Never Change Between Themes) --- */
    --permanent-black: #121212;
    --permanent-dark: #1C1C1C;
    --permanent-white: #FDFDFD;
    --permanent-light: #F5F7FA;
}


/* =============================================================================
   SECTION 3: DESIGN TOKENS — DARK THEME
   
   Only re-mapping the tokens that need to change. Everything else
   inherits the light-theme value, which intentionally stays the same
   (e.g. brand colors, font stacks, spacing).
   ============================================================================= */

[data-theme="dark"] {

    /* --- Surface Re-maps --- */
    --surface-page: #0D1117;
    --surface-card: #161B22;
    --surface-subtle: #1C2433;
    --surface-nav: #13192A;
    --surface-nav-scrolled: rgba(13, 17, 23, 0.94);
    --surface-footer: #060C12;
    --surface-brand: #003D6B;
    --surface-overlay: rgba(13, 17, 23, 0.97);
    --surface-impact: #002D52;

    /* --- Text Re-maps --- */
    --text-base: #E6EDF3;
    --text-muted: #8B949E;
    --text-subtle: #6E7681;
    --text-on-dark: #E6EDF3;
    --text-on-brand: #E6EDF3;
    --text-link: #58A6FF;
    --text-link-hover: #79B8FF;

    /* --- Brand Re-maps (accessible on dark surfaces) --- */
    --brand: #4FA3E3;
    --brand-hover: #3688C8;
    --brand-alt: #E0C265;
    --brand-alt-hover: #C9A84C;

    /* --- Border Re-maps --- */
    --border: #21262D;
    --border-strong: #30363D;
    --border-brand: #4FA3E3;

    /* --- Shadow Re-maps --- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.75);
    --shadow-brand: 0 4px 24px rgba(79, 163, 227, 0.12);
    --shadow-color-raw: rgba(0, 0, 0, 0.50);

    /* --- UI State Re-maps --- */
    --focus-ring: #E0C265;
    --scrollbar-thumb: #30363D;
    --scrollbar-track: #0D1117;
}


/* =============================================================================
   SECTION 3B: INITIALIZATION TRANSITION SUPPRESSION
   
   The <head> IIFE adds .no-transitions to <html> before the body renders.
   This prevents three classes of load-time visual glitches:
   
     1. The active nav-link underline animating from scaleX(0) → scaleX(1)
        on every page load (transition is defined at the element level, not
        just on :hover, so it fires during initial class application).
   
     2. Theme tokens transitioning if the resolved theme differs from the
        CSS default (e.g. dark mode users seeing a brief light flash).
   
     3. Any other transition that fires between "default CSS state" and
        "JS-resolved correct state" during the initialization window.
   
   main.js removes .no-transitions inside a double-rAF at the very end of
   DOMContentLoaded, after all init functions have run and the browser has
   committed the correct first frame.
   ============================================================================= */

html.no-transitions *,
html.no-transitions *::before,
html.no-transitions *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
}


/* =============================================================================
   SECTION 3C: LANGUAGE FOUC PREVENTION
   
   The body stays invisible until language.js calls setLanguage(), which
   adds the .lang-loaded class to <body>. This ensures the first visible
   paint is always in the user's correct language — no text swap is ever
   seen regardless of which language is stored in localStorage.
   
   IMPORTANT: This works because translations.js is loaded BEFORE
   language.js in every HTML page's <script> block. setLanguage() is
   called from initLanguageSystem() during DOMContentLoaded, which fires
   well under 100ms on this static site.
   
   noscript fallback: If JS fails entirely, the body remains hidden.
   This is acceptable for a JS-dependent application. If you want a
   no-JS fallback, add: <noscript><style>body{visibility:visible}</style>
   </noscript> to each HTML file's <head>.
   ============================================================================= */

body:not(.lang-loaded) {
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

body.lang-loaded {
    opacity: 1;
}


/* =============================================================================
   SECTION 4: LTR TYPOGRAPHY OVERRIDE
   Kurdish/Arabic fonts don't render in LTR context. Switch to system stack.
   ============================================================================= */

html[dir="ltr"] body,
html[dir="ltr"] input,
html[dir="ltr"] button,
html[dir="ltr"] textarea,
html[dir="ltr"] select {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}



/* =============================================================================
   SECTION 5: GLOBAL RESET
   ============================================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
    direction: rtl;
    background-color: var(--surface-page);
    color-scheme: light;
}

[data-theme="dark"] html,
html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: 1.7;
    background-color: var(--surface-page);
    color: var(--text-base);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-base), color var(--transition-base);
    overflow-x: hidden;
}


body.no-scroll {
    overflow: hidden;
}


/* --- Selective text selection --- */
body,
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
li {
    -webkit-user-select: text;
    user-select: text;
}

a,
button,
i,
img,
svg {
    -webkit-user-select: none;
    user-select: none;
}


/* --- Element defaults --- */
ul,
ol {
    list-style: none;
}

a,
button {
    text-decoration: none;
    color: inherit;
    outline: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

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

main {
    flex-grow: 1;
}


/* --- Layout utility --- */
.container {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
}


/* --- Focus visible (keyboard nav) --- */
:is(a, button):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}


/* =============================================================================
   SECTION 6: GLOBAL LTR OVERRIDES (Text direction)
   ============================================================================= */

html[dir="ltr"] body,
html[dir="ltr"] p,
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3,
html[dir="ltr"] h4,
html[dir="ltr"] h5,
html[dir="ltr"] h6,
html[dir="ltr"] span,
html[dir="ltr"] li,
html[dir="ltr"] a {
    text-align: left;
    direction: ltr;
}

html[dir="ltr"] p,
html[dir="ltr"] li,
html[dir="ltr"] h1,
html[dir="ltr"] h2,
html[dir="ltr"] h3 {
    unicode-bidi: isolate;
}

html[dir="ltr"] .section-title {
    text-align: center;
}


/* =============================================================================
   SECTION 7: SCROLLBAR STYLING
   ============================================================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}


/* =============================================================================
   SECTION 8: SECTION LAYOUT UTILITY
   Used to stripe alternate sections without hard-coding colors.
   ============================================================================= */

.section-alt {
    background-color: var(--surface-subtle);
}

.section-brand {
    background-color: var(--surface-brand);
}

.section-card {
    background-color: var(--surface-card);
}


/* =============================================================================
   SECTION 9: SHARED SECTION TITLE UTILITY
   ============================================================================= */

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 5vw, 2.25rem);
    color: var(--brand);
    text-align: center;
    margin-bottom: var(--space-lg);
}