/* ==========================================
   Dar Arabia — Compact Global Typography
   Loaded last on every page
   ========================================== */

:root {
    --dar-text-base: 13px;
    --dar-text-medium: 12px;
    --dar-text-small: 10.5px;

    --dar-heading-one-min: 29px;
    --dar-heading-one-max: 47px;

    --dar-heading-two-min: 23px;
    --dar-heading-two-max: 34px;

    --dar-heading-three: 17px;
}

/* General text */

html {
    font-size: 15px;
}

body {
    font-size: var(--dar-text-base);
    line-height: 1.75;
}

body,
button,
input,
select,
textarea {
    font-family: inherit;
}

/* Normal content */

main p,
main li,
main label,
main td,
main th,
main input,
main select,
main textarea {
    font-size: var(--dar-text-base);
}

main p {
    line-height: 1.8;
}

/* Main headings */

main h1 {
    font-size: clamp(
        var(--dar-heading-one-min),
        4.2vw,
        var(--dar-heading-one-max)
    ) !important;

    line-height: 1.25 !important;
}

main h2 {
    font-size: clamp(
        var(--dar-heading-two-min),
        3.2vw,
        var(--dar-heading-two-max)
    ) !important;

    line-height: 1.38 !important;
}

main h3 {
    font-size: var(--dar-heading-three) !important;
    line-height: 1.5 !important;
}

main h4 {
    font-size: 15px !important;
}

/* Hero text */

[class*="hero"] h1,
[class*="details-title"] {
    font-size: clamp(
        30px,
        4.4vw,
        49px
    ) !important;
}

[class*="hero"] p,
[class*="hero-description"],
[class*="hero-content"] p {
    font-size: 13px !important;
    line-height: 1.85 !important;
}

/* Section headings */

[class*="section-heading"] h2,
[class*="section-head"] h2,
[class*="content"] > h2 {
    font-size: clamp(
        23px,
        3.1vw,
        34px
    ) !important;
}

[class*="section-heading"] p,
[class*="section-head"] p {
    font-size: 12px !important;
}

/* Card titles and descriptions */

[class*="card"] h2,
[class*="card-title"] {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

[class*="card"] h3,
[class*="card-name"],
[class*="project-title"],
[class*="unit-title"],
[class*="property-title"],
[class*="news-title"] {
    font-size: 15.5px !important;
    line-height: 1.5 !important;
}

[class*="card"] p,
[class*="card-summary"],
[class*="card-description"],
[class*="description"] {
    font-size: 11.5px !important;
    line-height: 1.75 !important;
}

/* Eyebrows, labels, badges and metadata */

[class*="eyebrow"],
[class*="label"],
[class*="badge"],
[class*="status"],
[class*="date"],
[class*="meta"],
[class*="breadcrumb"],
[class*="count"],
[class*="location"],
[class*="code"] {
    font-size: 10.5px !important;
}

/* Buttons and links that behave like buttons */

button,
input[type="submit"],
input[type="button"],
[class*="button"],
[class*="-btn"],
[class*="_btn"],
[class*="action"],
[class*="details"],
[class*="submit"] {
    font-size: 11px !important;
}

/* Forms */

input,
select,
textarea {
    font-size: 12px !important;
}

input::placeholder,
textarea::placeholder {
    font-size: 11.5px;
}

form label,
[class*="form"] label,
[class*="consent"] {
    font-size: 10.5px !important;
}

/* Header and navigation */

header,
header a,
header button,
header span,
nav,
nav a,
nav button {
    font-size: 11.5px;
}

header [class*="logo"],
nav [class*="logo"] {
    font-size: inherit;
}

/* Footer */

footer,
footer p,
footer li,
footer a,
footer span,
footer label {
    font-size: 10.5px !important;
    line-height: 1.7;
}

footer h2,
footer h3,
footer h4 {
    font-size: 14px !important;
}

/* Tables */

table {
    font-size: 11.5px;
}

table th {
    font-size: 10.5px !important;
}

table td {
    font-size: 11.5px !important;
}

/* Newsletter */

.dar-newsletter-content h2 {
    font-size: clamp(
        23px,
        3.2vw,
        33px
    ) !important;
}

.dar-newsletter-content p {
    font-size: 11.5px !important;
}

.dar-newsletter-input {
    font-size: 11.5px !important;
}

.dar-newsletter-submit {
    font-size: 10.5px !important;
}

/* Partners section */

.dar-success-partners h2,
.dar-success-partners__heading h2 {
    font-size: clamp(
        23px,
        3.1vw,
        33px
    ) !important;
}

.dar-success-partners p,
.dar-success-partners__heading p {
    font-size: 11.5px !important;
}

/* Prevent excessively tiny nested text */

small,
[class*="small"],
[class*="caption"] {
    font-size: 10px !important;
}

/* Mobile */

@media (max-width: 720px) {
    :root {
        --dar-text-base: 12.5px;
        --dar-heading-one-min: 27px;
        --dar-heading-one-max: 34px;
        --dar-heading-two-min: 21px;
        --dar-heading-two-max: 27px;
        --dar-heading-three: 16px;
    }

    body {
        font-size: 12.5px;
    }

    main h1,
    [class*="hero"] h1,
    [class*="details-title"] {
        font-size: clamp(
            27px,
            8vw,
            34px
        ) !important;
    }

    main h2,
    [class*="section-heading"] h2,
    [class*="section-head"] h2 {
        font-size: clamp(
            21px,
            6vw,
            27px
        ) !important;
    }

    main h3,
    [class*="card"] h2,
    [class*="card"] h3 {
        font-size: 15px !important;
    }

    main p,
    main li,
    main label {
        font-size: 12px;
    }

    header,
    header a,
    header button,
    nav,
    nav a,
    nav button {
        font-size: 11px;
    }

    button,
    [class*="button"],
    [class*="-btn"],
    [class*="action"],
    [class*="details"] {
        font-size: 10.5px !important;
    }
}