/* ==========================================================
   KIAN DEZH - GLOBAL PAGE FRAME & READABLE TYPOGRAPHY
   مرحله 01: عرض 90٪ صفحه + تایپوگرافی پرتر
   نکته: این فایل باید بعد از تمام CSSها و بعد از <style> داخلی صفحات لود شود.
   ========================================================== */

:root {
    --kd-page-side-gap: 5vw;
    --kd-page-width: calc(100vw - (var(--kd-page-side-gap) * 2));
    --kd-page-max-width: none;
    --kd-readable-font-size: clamp(16.5px, 1.04vw, 18.5px);
    --kd-readable-small-size: clamp(15px, .95vw, 16.5px);
    --kd-readable-line-height: 2.15;
    --kd-section-title-size: clamp(32px, 2.7vw, 48px);
    --kd-section-subtitle-size: clamp(18px, 1.35vw, 24px);
    --kd-card-title-size: clamp(20px, 1.45vw, 28px);
    --kd-button-font-size: clamp(15px, .98vw, 17px);
}

/* =========================
   GLOBAL CONTENT WIDTH
   ========================= */

html body .container,
html body .inner-page .container,
html body .kd-footer-shell,
html body .about-wrap,
html body .ceo-message-wrap,
html body .project-intro-wrap,
html body .gallery-rows-head,
html body .gallery-row-header,
html body .gallery-viewport,
html body .cultural-bridge-grid,
html body .cultural-program-grid,
html body .hotel-intro-grid,
html body .restaurant-intro-grid,
html body .restaurant-story-grid,
html body .bazaar-intro-grid,
html body .residence-intro-grid,
html body .residence-story-grid,
html body .golf-intro-grid,
html body .golf-showcase-grid,
html body .contact-intro-grid,
html body .contact-main-grid,
html body .kd-request-shell,
html body .kd-request-intro-grid,
html body .kd-request-form-layout,
html body .kd-request-service-grid {
    width: var(--kd-page-width) !important;
    max-width: var(--kd-page-max-width) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

html body .section-heading,
html body .hotel-section-head,
html body .restaurant-section-head,
html body .bazaar-section-head,
html body .residence-section-head,
html body .golf-section-head,
html body .kd-request-form-head,
html body .contact-map-box,
html body .cultural-cta-card,
html body .hotel-cta-box,
html body .restaurant-cta-box,
html body .bazaar-cta-box,
html body .residence-cta-box,
html body .golf-cta-box {
    width: 100% !important;
    max-width: none !important;
}

html body main p,
html body main li,
html body .about-body,
html body .about-highlight,
html body .project-intro-lead,
html body .project-intro-body p,
html body .section-heading p,
html body .cultural-card-content p,
html body .cultural-program-text p,
html body .cultural-cta-card p,
html body .hotel-intro-text p,
html body .hotel-section-head p,
html body .hotel-cta-box p,
html body .restaurant-intro-text p,
html body .restaurant-story-text p,
html body .restaurant-section-head p,
html body .restaurant-cta-box p,
html body .bazaar-intro-text p,
html body .bazaar-intro-note,
html body .bazaar-section-head p,
html body .bazaar-cta-box p,
html body .residence-intro-text p,
html body .residence-story-text p,
html body .residence-section-head p,
html body .residence-cta-box p,
html body .golf-intro-text p,
html body .golf-showcase-text p,
html body .golf-section-head p,
html body .golf-cta-box p,
html body .contact-intro-text p,
html body .contact-map-content p,
html body .kd-request-intro-card p,
html body .kd-request-note-card p,
html body .kd-request-summary p,
html body .page-bottom-video-content p,
html body .hotel-bottom-video-content p,
html body .home-tourism-content p {
    max-width: none !important;
    font-size: var(--kd-readable-font-size) !important;
    line-height: var(--kd-readable-line-height) !important;
    font-weight: 500 !important;
}

html body .inner-kicker,
html body .section-kicker,
html body .kd-request-kicker,
html body .gallery-row-title,
html body .gallery-rows-desc,
html body .kd-form-hint,
html body .contact-field-hint,
html body .contact-info-item p,
html body .kd-contact-text,
html body .kd-footer-links a,
html body .kd-footer-bottom {
    font-size: var(--kd-readable-small-size) !important;
    line-height: 2 !important;
}

/* =========================
   HEADINGS
   ========================= */

html body main h2,
html body .about-title,
html body .gallery-rows-title,
html body .section-heading h2,
html body .hotel-section-head h2,
html body .restaurant-section-head h2,
html body .bazaar-section-head h2,
html body .residence-section-head h2,
html body .golf-section-head h2,
html body .kd-request-form-head h2,
html body .contact-map-content h2,
html body .page-bottom-video-content h2,
html body .hotel-bottom-video-content h2,
html body .home-tourism-content h2 {
    font-size: var(--kd-section-title-size) !important;
    line-height: 1.45 !important;
    font-weight: 850 !important;
}

html body main h3,
html body .ceo-message-title,
html body .cultural-card-content h3,
html body .hotel-room-content h3,
html body .restaurant-feature-card h3,
html body .bazaar-feature-card h3,
html body .residence-feature-card h3,
html body .golf-feature-card h3,
html body .kd-service-card h3,
html body .contact-side-card h3,
html body .kd-footer-title {
    font-size: var(--kd-card-title-size) !important;
    line-height: 1.65 !important;
    font-weight: 800 !important;
}

html body .about-subtitle,
html body .project-intro-header h2,
html body .cultural-cta-card h2,
html body .hotel-cta-box h2,
html body .restaurant-cta-box h2,
html body .bazaar-cta-box h2,
html body .residence-cta-box h2,
html body .golf-cta-box h2 {
    font-size: var(--kd-section-subtitle-size) !important;
    line-height: 1.7 !important;
}

/* =========================
   GRIDS SHOULD FILL THE NEW WIDTH
   ========================= */

html body .cultural-cards,
html body .hotel-signature-grid,
html body .hotel-rooms-grid,
html body .hotel-gallery-grid,
html body .hotel-features-grid,
html body .restaurant-feature-grid,
html body .restaurant-gallery-grid,
html body .restaurant-benefits-grid,
html body .bazaar-feature-grid,
html body .residence-feature-grid,
html body .residence-gallery-grid,
html body .residence-benefits-grid,
html body .golf-feature-grid,
html body .golf-gallery-grid,
html body .golf-training-features,
html body .contact-info-list,
html body .kd-footer-grid {
    width: 100% !important;
    max-width: none !important;
}

/* =========================
   BUTTONS / FORM CONTROLS
   ========================= */

html body main a,
html body main button,
html body main input,
html body main select,
html body main textarea,
html body .kd-submit-btn,
html body .contact-form-footer button,
html body .form-footer button,
html body .home-tourism-cta,
html body .page-bottom-video-content>a,
html body .hotel-bottom-video-content>a {
    font-size: var(--kd-button-font-size) !important;
}

html body main input,
html body main select,
html body main textarea {
    line-height: 1.9 !important;
}

/* =========================
   HOME PAGE SPECIFIC WIDTH FIXES
   ========================= */

html body .hero-content {
    padding-right: var(--kd-page-side-gap) !important;
    padding-left: var(--kd-page-side-gap) !important;
}

html body .hero-text {
    max-width: min(640px, 48vw) !important;
}

html body .hero-text h1 {
    font-size: clamp(34px, 3.4vw, 58px) !important;
    line-height: 1.65 !important;
    font-weight: 800 !important;
}

html body .hero-text p {
    font-size: clamp(16px, 1.05vw, 19px) !important;
    line-height: 2.1 !important;
}

html body .about-body {
    width: 100% !important;
}

html body .menu-link strong {
    font-size: clamp(17px, 1.15vw, 21px) !important;
}

/* =========================
   INNER HERO KEEPS 5% ALIGNMENT
   ========================= */

html[dir="rtl"] body>header.inner-hero-header>.inner-hero-content,
html[lang="fa"] body>header.inner-hero-header>.inner-hero-content,
html[lang="fa-IR"] body>header.inner-hero-header>.inner-hero-content {
    right: var(--kd-page-side-gap) !important;
    left: auto !important;
}

html[dir="ltr"] body>header.inner-hero-header>.inner-hero-content,
html[lang="en"] body>header.inner-hero-header>.inner-hero-content,
html[lang="en-US"] body>header.inner-hero-header>.inner-hero-content,
html[lang="en-GB"] body>header.inner-hero-header>.inner-hero-content {
    left: var(--kd-page-side-gap) !important;
    right: auto !important;
}

html body>header.inner-hero-header>.inner-hero-content {
    max-width: min(900px, 62vw) !important;
}

html body>header.inner-hero-header>.inner-hero-content h1 {
    font-size: clamp(48px, 5.2vw, 84px) !important;
}

html body>header.inner-hero-header>.inner-hero-content p {
    max-width: min(780px, 58vw) !important;
    font-size: clamp(17px, 1.18vw, 21px) !important;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px) {
    :root {
        --kd-page-side-gap: 24px;
        --kd-page-width: calc(100vw - 48px);
        --kd-readable-font-size: clamp(15.5px, 3.7vw, 17px);
        --kd-readable-small-size: clamp(13.8px, 3.45vw, 15.2px);
        --kd-section-title-size: clamp(28px, 6.5vw, 42px);
        --kd-section-subtitle-size: clamp(20px, 5vw, 28px);
        --kd-card-title-size: clamp(18px, 4.6vw, 24px);
    }

    html body .about-wrap,
    html body .ceo-message-wrap,
    html body .project-intro-wrap,
    html body .gallery-rows-head,
    html body .gallery-row-header,
    html body .gallery-viewport,
    html body .cultural-bridge-grid,
    html body .cultural-program-grid,
    html body .hotel-intro-grid,
    html body .restaurant-intro-grid,
    html body .restaurant-story-grid,
    html body .bazaar-intro-grid,
    html body .residence-intro-grid,
    html body .residence-story-grid,
    html body .golf-intro-grid,
    html body .golf-showcase-grid,
    html body .contact-intro-grid,
    html body .contact-main-grid,
    html body .kd-request-shell,
    html body .kd-request-intro-grid,
    html body .kd-request-form-layout,
    html body .kd-request-service-grid {
        width: var(--kd-page-width) !important;
        max-width: none !important;
    }

    html body .hero-text,
    html body>header.inner-hero-header>.inner-hero-content,
    html body>header.inner-hero-header>.inner-hero-content p {
        max-width: var(--kd-page-width) !important;
    }
}

@media (max-width: 520px) {
    :root {
        --kd-page-side-gap: 18px;
        --kd-page-width: calc(100vw - 36px);
    }
}