/* ==========================================================================
   HAMSSA NEWS - COMPLETE LUXURY EDITORIAL CSS (STYLE ENGINE & FALLBACKS)
   ========================================================================== */

:root {
    --color-primary: #b0004a;
    --color-primary-container: #d81b60;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #fff2f3;
    --color-inverse-primary: #ffb2bf;
    --color-primary-fixed: #ffd9de;
    --color-primary-fixed-dim: #ffb2bf;

    --color-secondary: #5e5d69;
    --color-secondary-container: #e1deec;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #62616d;
    --color-secondary-fixed: #e3e1ef;
    --color-secondary-fixed-dim: #c7c5d3;

    --color-tertiary: #a02661;
    --color-tertiary-container: #c0407a;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #fff3f5;
    --color-tertiary-fixed: #ffd9e4;

    --color-background: #faf8ff;
    --color-on-background: #131b2e;
    --color-surface: #faf8ff;
    --color-on-surface: #131b2e;
    --color-on-surface-variant: #5a4044;

    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f2f3ff;
    --color-surface-container: #eaedff;
    --color-surface-container-high: #e2e7ff;
    --color-surface-container-highest: #dae2fd;
    --color-inverse-surface: #283044;
    --color-inverse-on-surface: #eef0ff;

    --color-outline: #8e6f74;
    --color-outline-variant: #e3bdc3;
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;

    --spacing-gutter-sm: 1rem;
    --spacing-gutter: 1.5rem;
    --spacing-margin-mobile: 1rem;
    --spacing-margin: 2rem;
    --spacing-space-xs: 0.25rem;
    --spacing-space-sm: 0.5rem;
    --spacing-space-md: 1rem;
    --spacing-space-lg: 1.5rem;
    --spacing-space-xl: 2.5rem;
    --spacing-space-2xl: 4rem;

    --color-brand-cream: #f7f8f2;
}

.bg-brand-cream {
    background-color: #f7f8f2 !important;
}

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

html {
    scroll-behavior: smooth;
    direction: rtl;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-on-surface);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 28px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Editorial Typography */
h1, h2, h3, h4, h5, h6, .font-serif-editorial, .font-display-hero, .font-headline-xl, .font-headline-lg, .font-headline-md, .font-headline-sm {
    font-family: 'Noto Serif', serif;
}

.font-body-lg, .font-body-md, .font-body-sm, .font-label-lg, .font-label-md, .font-label-sm, .font-sans-modern {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Font Sizes matching Design System */
.text-headline-xl {
    font-size: 36px !important;
    line-height: 52px !important;
    font-weight: 700 !important;
}

.text-headline-lg {
    font-size: 28px !important;
    line-height: 42px !important;
    font-weight: 700 !important;
}

.text-headline-md {
    font-size: 22px !important;
    line-height: 34px !important;
    font-weight: 600 !important;
}

.text-headline-sm {
    font-size: 18px !important;
    line-height: 28px !important;
    font-weight: 600 !important;
}

.text-body-lg {
    font-size: 18px !important;
    line-height: 32px !important;
    font-weight: 400 !important;
}

.text-body-md {
    font-size: 15px !important;
    line-height: 28px !important;
    font-weight: 400 !important;
}

.text-body-sm {
    font-size: 13px !important;
    line-height: 22px !important;
    font-weight: 400 !important;
}

.text-label-lg {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 600 !important;
}

.text-label-md {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600 !important;
}

.text-label-sm {
    font-size: 11px !important;
    line-height: 14px !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .text-headline-xl {
        font-size: 26px !important;
        line-height: 38px !important;
    }
    .text-headline-lg {
        font-size: 22px !important;
        line-height: 32px !important;
    }
}

/* Color Utilities (Fallback & Native) */
.bg-primary { background-color: #b0004a !important; }
.text-primary { color: #b0004a !important; }
.border-primary { border-color: #b0004a !important; }

.bg-primary-container { background-color: #d81b60 !important; }
.text-primary-container { color: #d81b60 !important; }

.text-on-primary { color: #ffffff !important; }
.text-on-primary-container { color: #fff2f3 !important; }

.bg-background { background-color: #faf8ff !important; }
.text-on-background { color: #131b2e !important; }

.bg-surface-container-lowest { background-color: #ffffff !important; }
.bg-surface-container-low { background-color: #f2f3ff !important; }
.bg-surface-container { background-color: #eaedff !important; }
.bg-surface-container-high { background-color: #e2e7ff !important; }
.bg-surface-container-highest { background-color: #dae2fd !important; }

.text-on-surface { color: #131b2e !important; }
.text-on-surface-variant { color: #5a4044 !important; }

.bg-inverse-surface { background-color: #283044 !important; }
.text-inverse-on-surface { color: #eef0ff !important; }

.text-secondary { color: #5e5d69 !important; }
.bg-secondary { background-color: #5e5d69 !important; }
.text-secondary-fixed { color: #e3e1ef !important; }
.bg-secondary-fixed { background-color: #e3e1ef !important; }

.bg-tertiary { background-color: #a02661 !important; }
.text-tertiary { color: #a02661 !important; }
.bg-tertiary-container { background-color: #c0407a !important; }
.text-tertiary-container { color: #c0407a !important; }
.text-primary-fixed { color: #ffd9de !important; }

/* Custom Spacing Utilities */
.px-margin-mobile { padding-left: 1rem !important; padding-right: 1rem !important; }
@media (min-width: 768px) {
    .md\:px-margin { padding-left: 2rem !important; padding-right: 2rem !important; }
}

.p-space-xs { padding: 0.25rem !important; }
.p-space-sm { padding: 0.5rem !important; }
.p-space-md { padding: 1rem !important; }
.p-space-lg { padding: 1.5rem !important; }
.p-space-xl { padding: 2.5rem !important; }
.p-space-2xl { padding: 4rem !important; }

.py-space-xs { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-space-sm { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-space-md { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-space-lg { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-space-xl { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.py-space-2xl { padding-top: 4rem !important; padding-bottom: 4rem !important; }

.pt-space-sm { padding-top: 0.5rem !important; }
.pt-space-md { padding-top: 1rem !important; }
.pt-space-lg { padding-top: 1.5rem !important; }
.pt-space-xl { padding-top: 2.5rem !important; }
.pt-space-2xl { padding-top: 4rem !important; }

.pb-space-xs { padding-bottom: 0.25rem !important; }
.pb-space-sm { padding-bottom: 0.5rem !important; }
.pb-space-md { padding-bottom: 1rem !important; }
.pb-space-lg { padding-bottom: 1.5rem !important; }
.pb-space-xl { padding-bottom: 2.5rem !important; }

.mb-space-xs { margin-bottom: 0.25rem !important; }
.mb-space-sm { margin-bottom: 0.5rem !important; }
.mb-space-md { margin-bottom: 1rem !important; }
.mb-space-lg { margin-bottom: 1.5rem !important; }
.mb-space-xl { margin-bottom: 2.5rem !important; }
.mb-space-2xl { margin-bottom: 4rem !important; }

.mt-space-sm { margin-top: 0.5rem !important; }
.mt-space-md { margin-top: 1rem !important; }
.mt-space-lg { margin-top: 1.5rem !important; }
.mt-space-xl { margin-top: 2.5rem !important; }
.mt-space-2xl { margin-top: 4rem !important; }

.my-space-md { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.gap-space-xs { gap: 0.25rem !important; }
.gap-space-sm { gap: 0.5rem !important; }
.gap-space-md { gap: 1rem !important; }
.gap-space-lg { gap: 1.5rem !important; }
.gap-space-xl { gap: 2.5rem !important; }
.gap-space-2xl { gap: 4rem !important; }

.ml-space-md { margin-left: 1rem !important; }
.mr-space-md { margin-right: 1rem !important; }

/* Roundedness */
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-full { border-radius: 9999px !important; }

/* Ticker Marquee Animation */
@keyframes marqueeRTL {
    0% { transform: translateX(0%); }
    100% { transform: translateX(50%); }
}

.animate-marquee {
    display: inline-flex;
    animation: marqueeRTL 28s linear infinite;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Material Symbols Outlined */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

/* Article Content Typography */
.article-content {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 2.1;
    color: #1a1a24;
}

.article-content p {
    margin-bottom: 1.75rem;
}

.article-content h2 {
    font-family: 'Noto Serif', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #131b2e;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e1deec;
}

.article-content blockquote {
    margin: 2rem 0;
    padding: 1.25rem 2rem;
    border-right: 4px solid #d81b60;
    background: #f2f3ff;
    border-radius: 0.5rem;
    font-family: 'Noto Serif', serif;
    font-size: 1.25rem;
    line-height: 1.9;
    color: #3f0016;
    font-style: italic;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 1.5rem auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.article-content a {
    color: #b0004a;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
}

.article-content a:hover {
    color: #d81b60;
}

/* Editorial Fallback Gradient */
.editorial-fallback-bg {
    background: linear-gradient(135deg, #131b2e 0%, #283044 50%, #464651 100%);
    position: relative;
    overflow: hidden;
}

.editorial-fallback-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(216, 27, 96, 0.18) 0%, transparent 60%);
    pointer-events: none;
}

/* Line Clamps */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}