/* ══════════════════════════════════════════════════
   IBM Plex Sans Arabic — @font-face declarations
   Path is relative to this CSS file location:
   assets/css/style.css → fonts/ is assets/css/fonts/
══════════════════════════════════════════════════ */

@font-face {
    font-family: 'IBMPlexSansArabic';
    src: url('fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBMPlexSansArabic';
    src: url('fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBMPlexSansArabic';
    src: url('fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBMPlexSansArabic';
    src: url('fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ══════════════════════════════════════════════════
   GLOBAL FONT APPLICATION
   400 Regular  → body text, paragraphs, descriptions
   500 Medium   → nav links, labels, captions, badges
   600 SemiBold → h3–h6, card titles, section subtitles
   700 Bold     → h1–h2, hero titles, page headings
══════════════════════════════════════════════════ */

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

html {
    font-family: 'IBMPlexSansArabic', 'Tahoma', 'Arial', sans-serif;
}

body {
    font-family: 'IBMPlexSansArabic', 'Tahoma', 'Arial', sans-serif;
    font-weight: 400;          /* Regular — default body */
    font-size: 1rem;
    line-height: 1.75;
    background: #f6f7fb;
    color: #1c1f26;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Headings ── */
h1, .h1 {
    font-weight: 700;          /* Bold */
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h2, .h2 {
    font-weight: 700;          /* Bold */
    line-height: 1.25;
    letter-spacing: -0.015em;
}

h3, .h3 {
    font-weight: 600;          /* SemiBold */
    line-height: 1.35;
}

h4, .h4,
h5, .h5,
h6, .h6 {
    font-weight: 600;          /* SemiBold */
    line-height: 1.4;
}

/* ── Body text ── */
p, li, td, th, blockquote {
    font-weight: 400;          /* Regular */
}

/* ── Navigation & interactive labels ── */
.navbar-brand-title,
.nav-link,
.navbar-nav .nav-link,
label,
.form-label,
.btn,
button,
.badge,
.card-kicker,
.hero-badge,
.hero-stat-lbl,
.sec-label,
.adm-nav-label,
.adm-brand-sub,
.contact-label,
.feat-text,
.card-tag,
.adm-badge,
.stat-label,
.form-text {
    font-weight: 500;          /* Medium */
}

/* ── Card titles & subheadings ── */
.card-title,
.card-title-fixed,
.card-title-2,
.section-title,
.sec-heading-text h2,
.adm-card-title,
.feat-title,
.value-title,
.contact-label,
.hero-stat-num,
.pull-quote-text {
    font-weight: 600;          /* SemiBold */
}

/* ── Hero / page-level headings ── */
.hero-title,
.hero-brand-title,
.navbar-brand-title,
.adm-brand-title,
.stat-num,
.about-hero .hero-title,
.sec-title,
.display-4,
.display-5,
.display-6 {
    font-weight: 700;          /* Bold */
}

/* ── Utility overrides matching Bootstrap fw-* ── */
.fw-normal  { font-weight: 400 !important; }
.fw-medium  { font-weight: 500 !important; }
.fw-semibold{ font-weight: 600 !important; }
.fw-bold,
.fw-bolder  { font-weight: 700 !important; }

/* ══════════════════════════════════════════════════
   LEGACY COMPONENT STYLES (kept as-is)
══════════════════════════════════════════════════ */

.hero-box {
    background: linear-gradient(135deg, #111827, #334155);
    color: #fff;
    border-radius: 28px;
    padding: 48px 28px;
    overflow: hidden;
}

.section-card,
.product-card,
.admin-card {
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.section-card img,
.product-card img,
.slide-image,
.product-gallery-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.product-gallery-image {
    height: 420px;
    border-radius: 20px;
}

.card-title-2 {
    font-size: 1.05rem;
    font-weight: 600;          /* SemiBold — updated from 700 */
    min-height: 52px;
}

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

.admin-sidebar {
    min-height: 100vh;
    background: #111827;
}

.admin-sidebar a {
    color: #cbd5e1;
    text-decoration: none;
    display: block;
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 8px;
    font-weight: 500;          /* Medium — updated */
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
    background: #1f2937;
    color: #fff;
}

.login-wrap {
    min-height: 100vh;
}