/**
 * Responsive Typography با CSS clamp()
 * تایپوگرافی روان و responsive برای تمام سایزها
 */

/* ====================================
   CSS Variables با clamp()
   ==================================== */
:root {
    /* Headings */
    --heading-1: clamp(1.75rem, 4vw + 0.5rem, 3rem);      /* 28px - 48px */
    --heading-2: clamp(1.5rem, 3vw + 0.5rem, 2.25rem);    /* 24px - 36px */
    --heading-3: clamp(1.25rem, 2.5vw + 0.25rem, 1.875rem); /* 20px - 30px */
    --heading-4: clamp(1.125rem, 2vw + 0.25rem, 1.5rem);  /* 18px - 24px */
    
    /* Body Text */
    --body-text: clamp(0.875rem, 1.5vw, 1rem);            /* 14px - 16px */
    --body-text-large: clamp(1rem, 1.75vw, 1.125rem);     /* 16px - 18px */
    --body-text-small: clamp(0.75rem, 1.25vw, 0.875rem);  /* 12px - 14px */
    
    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
}

/* ====================================
   اعمال Typography به المان‌ها
   ==================================== */

/* Hero Title */
.hero-title,
h1.hero-title {
    font-size: var(--heading-1) !important;
    line-height: var(--line-height-tight) !important;
}

/* Section Titles */
h2.section-title,
.section-title {
    font-size: var(--heading-2) !important;
    line-height: var(--line-height-tight) !important;
}

h3.section-subtitle {
    font-size: var(--heading-3) !important;
    line-height: var(--line-height-normal) !important;
}

/* Body Text */
p,
.body-text {
    font-size: var(--body-text) !important;
    line-height: var(--line-height-normal) !important;
}

/* ====================================
   Landing Page Hero
   ==================================== */
.landing-hero h2 {
    font-size: var(--heading-1) !important;
    line-height: var(--line-height-tight) !important;
}

.landing-hero h3 {
    font-size: var(--heading-3) !important;
    line-height: var(--line-height-relaxed) !important;
}

/* ====================================
   Services, Gallery, Reviews Headers
   ==================================== */
section header h1,
section header h2 {
    font-size: var(--heading-2) !important;
}

/* ====================================
   Menu Items (Header Navigation)
   ==================================== */
.header-menu-right li a,
.header-menu-left li a {
    font-size: clamp(0.75rem, 1.25vw, 0.875rem) !important; /* 12px - 14px */
}

/* ====================================
   Cards and Boxes
   ==================================== */
.card h2,
.card h3 {
    font-size: var(--heading-4) !important;
    line-height: var(--line-height-normal) !important;
}

.card p {
    font-size: var(--body-text) !important;
    line-height: var(--line-height-relaxed) !important;
}

/* ====================================
   Food Boxes
   ==================================== */
.food-box h5 {
    font-size: clamp(1rem, 2vw, 1.25rem) !important; /* 16px - 20px */
}

/* ====================================
   Footer
   ==================================== */
footer h2,
.footer-container h2 {
    font-size: var(--heading-3) !important;
}

footer p,
footer h5,
.footer-container p,
.footer-container h5 {
    font-size: var(--body-text-small) !important;
    line-height: var(--line-height-relaxed) !important;
}

/* ====================================
   Buttons و CTAs
   ==================================== */
button,
.button,
.btn,
a.button {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important; /* 14px - 16px */
}

/* ====================================
   Mobile Drawer Menu
   ==================================== */
.drawer ul li a {
    font-size: clamp(0.875rem, 2vw, 1rem) !important; /* 14px - 16px */
}

.drawer h2 {
    font-size: var(--heading-3) !important;
}

/* ====================================
   Package Title
   ==================================== */
.package-title {
    font-size: var(--heading-2) !important;
    line-height: var(--line-height-loose) !important;
}

/* ====================================
   Reviews Section
   ==================================== */
.reviews-slider h5 {
    font-size: var(--heading-4) !important;
}

.reviews-slider p {
    font-size: var(--body-text-small) !important;
    line-height: var(--line-height-relaxed) !important;
}

/* ====================================
   Service Items
   ==================================== */
.service-item p {
    font-size: clamp(0.875rem, 1.5vw, 1.25rem) !important; /* 14px - 20px */
    line-height: var(--line-height-normal) !important;
}

/* ====================================
   Responsive Adjustments
   ==================================== */

/* موبایل کوچک */
@media (max-width: 480px) {
    :root {
        --heading-1: clamp(1.5rem, 6vw, 2rem);
        --heading-2: clamp(1.25rem, 5vw, 1.75rem);
    }
}

/* تبلت */
@media (min-width: 768px) and (max-width: 1023px) {
    :root {
        --heading-1: clamp(2rem, 4.5vw, 2.5rem);
        --heading-2: clamp(1.75rem, 3.5vw, 2rem);
    }
}

/* Desktop بزرگ */
@media (min-width: 1536px) {
    :root {
        --heading-1: 3rem;    /* 48px */
        --heading-2: 2.25rem; /* 36px */
        --heading-3: 1.875rem; /* 30px */
        --body-text: 1rem;    /* 16px */
    }
}

/* ====================================
   Fallback برای مرورگرهای قدیمی
   ==================================== */
@supports not (font-size: clamp(1rem, 2vw, 2rem)) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    p { font-size: 1rem; }
}