/**
 * Imaan360 - Base Styles & Layout Guard-Rails
 * Source of Truth: mockups/DESIGN_PROPOSAL.md (Option A "Sacred Noor")
 */

/* ==========================================================================
   SELF-HOSTED FONTS (@font-face)
   ========================================================================== */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../assets/fonts/Inter-Variable.woff2') format('woff2-variations'),
         local('Inter'),
         local('Segoe UI'),
         system-ui;
}

@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../assets/fonts/Amiri-Regular.woff2') format('woff2'),
         local('Amiri'),
         local('Scheherazade New'),
         serif;
}

/* ==========================================================================
   RESET & BOX SIZING
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

html body {
    font-family: var(--font-ui);
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.55;
    min-height: 100dvh;
    overflow-x: hidden;
    width: 100%;
    position: relative;
    padding-bottom: calc(var(--tab-bar-height) + var(--safe-bottom) + 32px);
    transition: background-color var(--dur-normal) var(--ease-out-quad), color var(--dur-normal) var(--ease-out-quad);
}

@media (min-width: 900px) {
    html body {
        padding-bottom: 0;
    }
}

/* ==========================================================================
   CONTAINER & OVERFLOW GUARDS (NO 100vw)
   ========================================================================== */
.page-wrapper, .site-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
    min-width: 0;
}

@media (min-width: 768px) {
    .page-wrapper, .site-container {
        padding: 0 var(--space-6);
    }
}

/* Responsive Text Wrapping */
h1, h2, h3, h4, h5, h6, p, span, a, label, li, td, th {
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Grid & Flex child min-width unconstrained guard */
.grid-child, .flex-child, .hero-grid > *, .utilities-grid > * {
    min-width: 0;
}

/* ==========================================================================
   ACCESSIBLE FOCUS RING
   ========================================================================== */
:focus-visible {
    outline: 2px solid var(--gold-primary);
    outline-offset: 3px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   TEXT ACCENTS & ARABIC TYPOGRAPHY
   ========================================================================== */
.text-gradient-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-gradient-teal {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.arabic-text {
    font-family: var(--font-arabic);
    direction: rtl;
    line-height: 1.7;
}

/* Background Canvas Layer */
#bgCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
    transition: opacity var(--dur-slow) ease;
}

@media (prefers-reduced-motion: reduce) {
    #bgCanvas {
        display: block !important;
        background: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.14) 0%, rgba(31, 122, 99, 0.18) 45%, transparent 75%) !important;
    }
}