/*======================================
 [ Responsive Typography
   Theme: Homeradar Real Estate
   Purpose: Fluid font scaling across all screen resolutions
   Breakpoints: 375px (mobile) → 1440px (desktop)
 ]
======================================*/

/*--------------------------------------------------------------
  ROOT FONT SIZE — scales the entire rem unit system.
  At 375px: 14px base. At 768px: 15px base. At 1440px: 16px base.
--------------------------------------------------------------*/
html {
    /* clamp(min, preferred, max)
       preferred = 0.875rem + 0.26vw ≈ scales smoothly between 375–1440px */
    font-size: clamp(13px, 0.8125rem + 0.26vw, 16px);
}

/*--------------------------------------------------------------
  CSS CUSTOM PROPERTIES — fluid type scale
  Usage: any element can reference these vars for consistent sizing.
--------------------------------------------------------------*/
:root {
    /* Body / base text */
    --fs-xs:    clamp(9px,  0.5rem  + 0.2vw,  11px);  /* tiny labels, badges */
    --fs-sm:    clamp(10px, 0.6rem  + 0.25vw, 12px);  /* small helper text   */
    --fs-base:  clamp(12px, 0.7rem  + 0.28vw, 14px);  /* body paragraph text */
    --fs-md:    clamp(13px, 0.75rem + 0.3vw,  15px);  /* slightly larger body */
    --fs-lg:    clamp(14px, 0.8rem  + 0.35vw, 16px);  /* sub-headings, labels */

    /* Headings */
    --fs-h6:    clamp(13px, 0.8rem  + 0.3vw,  16px);
    --fs-h5:    clamp(14px, 0.85rem + 0.35vw, 18px);
    --fs-h4:    clamp(15px, 0.9rem  + 0.45vw, 20px);
    --fs-h3:    clamp(17px, 1rem    + 0.5vw,  22px);
    --fs-h2:    clamp(19px, 1.1rem  + 0.7vw,  26px);
    --fs-h1:    clamp(22px, 1.2rem  + 1.1vw,  34px);

    /* Display / hero sizes */
    --fs-display-sm:  clamp(26px, 1.5rem  + 1.3vw,  38px);
    --fs-display-md:  clamp(30px, 1.7rem  + 1.6vw,  46px);
    --fs-display-lg:  clamp(34px, 2rem    + 2vw,    54px);
    --fs-display-xl:  clamp(40px, 2.4rem  + 3vw,    80px);

    /* Navigation */
    --fs-nav:   clamp(12px, 0.7rem  + 0.25vw, 14px);
    --fs-nav-sm: clamp(11px, 0.65rem + 0.2vw, 13px);

    /* UI elements */
    --fs-btn:   clamp(11px, 0.65rem + 0.22vw, 13px);
    --fs-badge: clamp(9px,  0.55rem + 0.18vw, 11px);
    --fs-input: clamp(12px, 0.7rem  + 0.22vw, 13px);
    --fs-label: clamp(11px, 0.65rem + 0.2vw,  13px);
}

/*--------------------------------------------------------------
  HEADINGS — apply fluid sizes globally
--------------------------------------------------------------*/
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/*--------------------------------------------------------------
  BODY TEXT
--------------------------------------------------------------*/
body {
    font-size: var(--fs-base);
}

p {
    font-size: var(--fs-base);
    line-height: clamp(18px, 1.1rem + 0.4vw, 24px);
}

/*--------------------------------------------------------------
  NAVIGATION
--------------------------------------------------------------*/
.main-menu li a,
.main-menu ul li a {
    font-size: var(--fs-nav);
}

.add-list {
    font-size: var(--fs-btn);
}

.show-reg-form {
    font-size: var(--fs-nav);
}

/*--------------------------------------------------------------
  HERO / BANNER SECTIONS
--------------------------------------------------------------*/
.hero-title h2,
.hero-listing-item h2 {
    font-size: clamp(24px, 1.5rem + 1.5vw, 46px);
    line-height: 1.15;
}

.hero-text-big {
    font-size: clamp(50px, 4vw + 2rem, 120px);
}

.hero-title h3,
.hero-title p {
    font-size: clamp(13px, 0.8rem + 0.3vw, 16px);
}

/*--------------------------------------------------------------
  SECTION TITLES (listing-title, section-title, etc.)
--------------------------------------------------------------*/
.listing-item-title a,
.listing-item-title h3 {
    font-size: var(--fs-h5);
}

.section-title h2,
.listing-title h2 {
    font-size: var(--fs-h2);
}

.section-title h4,
.listing-title h4 {
    font-size: var(--fs-h4);
}

/*--------------------------------------------------------------
  PROPERTY CARDS
--------------------------------------------------------------*/
.listing-item h3 a {
    font-size: var(--fs-h5);
}

.listing-item-category a,
.listing-item-address a {
    font-size: var(--fs-sm);
}

.listing-item-price,
.price-item strong {
    font-size: var(--fs-lg);
}

.listing-item-category span,
.listing-item-category a span {
    font-size: var(--fs-xs);
}

/*--------------------------------------------------------------
  BUTTONS
--------------------------------------------------------------*/
.btn,
.color-btn,
.button,
.add-list,
.subscribe-btn {
    font-size: var(--fs-btn);
}

/*--------------------------------------------------------------
  FORMS & INPUTS
--------------------------------------------------------------*/
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
textarea,
select,
.custom-form input,
.custom-form textarea,
.custom-form select {
    font-size: var(--fs-input);
}

input::placeholder,
textarea::placeholder {
    font-size: var(--fs-input);
}

label,
.custom-form label {
    font-size: var(--fs-label);
}

/*--------------------------------------------------------------
  BADGES, TAGS, LABELS
--------------------------------------------------------------*/
.listing-item-category,
.cat-item span,
.ft-list-badge,
.property-tag,
.type-tag {
    font-size: var(--fs-badge);
}

/*--------------------------------------------------------------
  WIDGET / SIDEBAR TEXT
--------------------------------------------------------------*/
.widget-posts-descr h4,
.widget-posts-descr h4 a {
    font-size: var(--fs-base);
}

.widget-posts-descr .geodir-category-location a {
    font-size: var(--fs-sm);
}

.widget-posts-descr-price {
    font-size: var(--fs-base);
}

/*--------------------------------------------------------------
  FOOTER
--------------------------------------------------------------*/
.footer-title {
    font-size: var(--fs-h5);
}

.footer-item a,
.footer-list li a,
.subfooter-nav li a {
    font-size: var(--fs-base);
}

.footer-social li a {
    font-size: var(--fs-lg);
}

/*--------------------------------------------------------------
  DASHBOARD
--------------------------------------------------------------*/
.dashboard-title-item {
    font-size: clamp(13px, 0.8rem + 0.3vw, 18px);
}

.dashboard-stats h4 {
    font-size: clamp(13px, 0.75rem + 0.3vw, 17px);
}

.dashboard-stats-count {
    font-size: clamp(18px, 1rem + 0.5vw, 26px);
}

.dasboard-widget-title h5 {
    font-size: var(--fs-h5);
}

.user-profile-menu h3 {
    font-size: var(--fs-sm);
}

.user-profile-menu li a {
    font-size: var(--fs-base);
}

/*--------------------------------------------------------------
  BLOG CONTENT
--------------------------------------------------------------*/
.blog-post-content {
    font-size: var(--fs-md);
}

.blog-post-content h2 { font-size: var(--fs-h2); }
.blog-post-content h3 { font-size: var(--fs-h3); }
.blog-post-content h4 { font-size: var(--fs-h4); }
.blog-post-content h5 { font-size: var(--fs-h5); }
.blog-post-content h6 { font-size: var(--fs-h6); }

/*--------------------------------------------------------------
  TABS & MENUS
--------------------------------------------------------------*/
.tabs-menu li a,
.header-modal .tabs-menu li a {
    font-size: var(--fs-nav-sm);
}

.header-opt-modal-item h4 {
    font-size: var(--fs-base);
}

/*--------------------------------------------------------------
  MEDIA QUERIES — breakpoint overrides (cascade on top of clamp)
  These handle edge cases where clamp() alone isn't sufficient.
--------------------------------------------------------------*/

/* ── Large Desktop (≥ 1440px) ────────────────────────────── */
@media only screen and (min-width: 1440px) {
    :root {
        --fs-h1:          38px;
        --fs-h2:          28px;
        --fs-h3:          24px;
        --fs-display-xl:  90px;
    }

    .hero-title h2,
    .hero-listing-item h2 {
        font-size: 50px;
    }
}

/* ── Standard Desktop (1200px – 1439px) — default clamp values apply ── */

/* ── Laptop / Medium Desktop (1070px – 1199px) ──────────── */
@media only screen and (max-width: 1199px) {
    :root {
        --fs-h1:    clamp(20px, 1.1rem + 1vw, 30px);
        --fs-h2:    clamp(17px, 1rem   + 0.7vw, 24px);
        --fs-display-lg: clamp(28px, 1.6rem + 1.5vw, 44px);
    }
}

/* ── Tablet Landscape (800px – 1069px) ──────────────────── */
@media only screen and (max-width: 1070px) {
    :root {
        --fs-h1:         clamp(18px, 1rem + 1vw, 26px);
        --fs-h2:         clamp(16px, 0.9rem + 0.8vw, 22px);
        --fs-display-md: clamp(24px, 1.4rem + 1.4vw, 38px);
        --fs-display-lg: clamp(22px, 1.3rem + 1.2vw, 34px);
    }

    .hero-title h2,
    .hero-listing-item h2 {
        font-size: clamp(20px, 1.2rem + 1.5vw, 36px);
        line-height: 1.2;
    }

    .hero-text-big {
        font-size: clamp(40px, 3vw + 1.5rem, 80px);
    }

    body, p {
        font-size: clamp(12px, 0.7rem + 0.25vw, 14px);
    }
}

/* ── Tablet Portrait (564px – 799px) ────────────────────── */
@media only screen and (max-width: 800px) {
    :root {
        --fs-h1:         clamp(18px, 1.1rem + 1.5vw, 26px);
        --fs-h2:         clamp(16px, 1rem   + 1vw,   22px);
        --fs-h3:         clamp(15px, 0.9rem + 0.8vw, 19px);
        --fs-h4:         clamp(14px, 0.85rem + 0.6vw, 17px);
        --fs-display-sm: clamp(22px, 1.3rem + 1.5vw, 32px);
        --fs-display-md: clamp(22px, 1.3rem + 1.5vw, 32px);
        --fs-display-lg: clamp(20px, 1.2rem + 1.2vw, 28px);
        --fs-display-xl: clamp(30px, 2vw + 1rem, 52px);
    }

    .hero-title h2,
    .hero-listing-item h2 {
        font-size: clamp(18px, 1rem + 2vw, 30px);
        line-height: 1.25;
    }

    .hero-text-big {
        font-size: clamp(30px, 2vw + 1rem, 60px);
    }

    .section-title h2,
    .listing-title h2 {
        font-size: clamp(16px, 1rem + 1vw, 22px);
    }

    h1 { font-size: var(--fs-h1); }
    h2 { font-size: var(--fs-h2); }
    h3 { font-size: var(--fs-h3); }
    h4 { font-size: var(--fs-h4); }
}

/* ── Mobile (≤ 563px) ────────────────────────────────────── */
@media only screen and (max-width: 564px) {
    :root {
        --fs-h1:          clamp(17px, 4.5vw, 24px);
        --fs-h2:          clamp(15px, 4vw,   21px);
        --fs-h3:          clamp(14px, 3.5vw, 18px);
        --fs-h4:          clamp(13px, 3.2vw, 16px);
        --fs-h5:          clamp(12px, 3vw,   15px);
        --fs-h6:          clamp(11px, 2.8vw, 14px);
        --fs-base:        clamp(11px, 2.8vw, 13px);
        --fs-md:          clamp(11px, 2.8vw, 13px);
        --fs-display-sm:  clamp(18px, 5vw,   26px);
        --fs-display-md:  clamp(18px, 5vw,   26px);
        --fs-display-lg:  clamp(18px, 5vw,   26px);
        --fs-display-xl:  clamp(24px, 7vw,   40px);
        --fs-nav:         clamp(11px, 2.8vw, 13px);
        --fs-btn:         clamp(11px, 2.8vw, 12px);
        --fs-input:       clamp(11px, 2.8vw, 13px);
    }

    .hero-title h2,
    .hero-listing-item h2 {
        font-size: clamp(16px, 5vw, 26px);
        line-height: 1.3;
    }

    .hero-text-big {
        font-size: clamp(24px, 8vw, 48px);
    }

    body, p {
        font-size: clamp(11px, 2.8vw, 13px);
        line-height: 1.6;
    }

    h1 { font-size: var(--fs-h1); }
    h2 { font-size: var(--fs-h2); }
    h3 { font-size: var(--fs-h3); }
    h4 { font-size: var(--fs-h4); }
    h5 { font-size: var(--fs-h5); }
    h6 { font-size: var(--fs-h6); }
}

/* ── Very Small Mobile (≤ 375px) ────────────────────────── */
@media only screen and (max-width: 375px) {
    :root {
        --fs-h1:    clamp(15px, 4.5vw, 20px);
        --fs-h2:    clamp(14px, 4vw,   18px);
        --fs-h3:    clamp(13px, 3.5vw, 16px);
        --fs-h4:    clamp(12px, 3.2vw, 15px);
        --fs-base:  clamp(11px, 3vw,   13px);
    }

    .hero-title h2 {
        font-size: clamp(15px, 4.5vw, 22px);
    }
}