/* 
* Typography and Spacing Refinements for Nursil Website
* Enhancing readability and visual hierarchy
*/

/* ===== TYPOGRAPHY REFINEMENTS ===== */
:root {
    /* Font weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Letter spacing */
    --letter-spacing-tight: -0.03em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;
    
    /* Line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.8;
    --line-height-looser: 2;
}

/* Base Typography Refinements */
body {
    font-feature-settings: "liga", "kern";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: var(--line-height-normal);
}

/* Heading Refinements */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    margin-bottom: calc(var(--spacing-md) * 1.2);
}

h1 {
    font-size: clamp(4.5rem, 8vw, 8rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

h2 {
    font-size: clamp(3.5rem, 6vw, 5.6rem);
    font-weight: var(--font-weight-bold);
}

h3 {
    font-size: clamp(2.5rem, 4vw, 3.6rem);
    font-weight: var(--font-weight-semibold);
}

h4 {
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: var(--font-weight-semibold);
}

/* Paragraph Refinements */
p {
    font-size: clamp(1.6rem, 2vw, 1.8rem);
    line-height: var(--line-height-loose);
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-light);
}

.hero-subtitle {
    font-size: clamp(1.8rem, 2.5vw, 2.2rem);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: calc(var(--spacing-xl) * 1.2);
}

.section-subtitle {
    font-size: clamp(1.6rem, 2vw, 1.8rem);
    line-height: var(--line-height-normal);
    max-width: 800px;
    margin: -20px auto calc(var(--spacing-xl) * 1.2);
    color: var(--color-text-muted);
}

/* Button Text Refinements */
.btn {
    font-size: 1.6rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    padding: 1.6rem 3.2rem;
}

/* Navigation Refinements */
.nav-link {
    font-size: 1.6rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
}

.language-toggle a {
    font-size: 1.4rem;
    font-weight: var(--font-weight-medium);
}

/* Service Card Refinements */
.service-title {
    font-size: 2.4rem;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
    letter-spacing: var(--letter-spacing-tight);
}

.service-description {
    font-size: 1.6rem;
    line-height: var(--line-height-loose);
    color: var(--color-text-muted);
}

.service-link {
    font-size: 1.5rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
}

/* Stats Refinements */
.stat-number {
    font-size: clamp(4rem, 6vw, 6rem);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.stat-label {
    font-size: 1.8rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-normal);
}

/* Form Label Refinements */
.form-group label {
    font-size: 1.6rem;
    font-weight: var(--font-weight-regular);
}

.form-group input:focus ~ label,
.form-group textarea:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
    font-size: 1.2rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-wide);
}

/* Footer Refinements */
.footer-info p {
    font-size: 1.5rem;
    line-height: var(--line-height-normal);
}

.footer-bottom p {
    font-size: 1.4rem;
    letter-spacing: var(--letter-spacing-normal);
}

/* ===== SPACING REFINEMENTS ===== */

/* Section Spacing */
section {
    padding: calc(var(--spacing-xxl) * 1.5) 0;
}

section:first-of-type {
    padding-top: 0;
}

/* Container Refinements */
.container {
    padding: 0 max(var(--spacing-md), 4vw);
    max-width: 1440px;
}

/* Header Spacing */
.navbar {
    padding: calc(var(--spacing-md) * 1.2) 0;
}

.header.scrolled .navbar {
    padding: calc(var(--spacing-sm) * 1.2) 0;
}

.nav-list {
    gap: calc(var(--spacing-lg) * 1.2);
}

/* Hero Spacing */
.hero-content {
    padding: calc(var(--spacing-xl) * 1.5) 0;
}

.hero-title {
    margin-bottom: calc(var(--spacing-xl) * 1.2);
}

.hero-buttons {
    gap: calc(var(--spacing-md) * 1.2);
}

/* Card Spacing */
.service-card {
    padding: calc(var(--spacing-xl) * 1.2);
}

.service-icon {
    margin-bottom: calc(var(--spacing-lg) * 1.2);
}

.service-title {
    margin-bottom: calc(var(--spacing-sm) * 1.2);
}

/* Grid Spacing */
.services-grid,
.stats-grid {
    gap: calc(var(--spacing-lg) * 1.2);
}

.about-content,
.tahadi-content,
.contact-content {
    gap: calc(var(--spacing-xl) * 1.2);
}

.tahadi-features {
    gap: calc(var(--spacing-md) * 1.2);
    margin-bottom: calc(var(--spacing-lg) * 1.2);
}

/* Form Spacing */
.form-group {
    margin-bottom: calc(var(--spacing-md) * 1.2);
}

.form-group input,
.form-group textarea {
    padding: 1.8rem 2rem;
}

/* Footer Spacing */
.footer {
    padding: calc(var(--spacing-xl) * 1.2) 0 var(--spacing-md);
}

.footer-content {
    margin-bottom: calc(var(--spacing-lg) * 1.2);
}

.footer-social {
    gap: calc(var(--spacing-md) * 1.2);
}

.footer-bottom {
    padding-top: calc(var(--spacing-md) * 1.2);
}

/* ===== VISUAL HIERARCHY REFINEMENTS ===== */

/* Section Title Refinements */
.section-title {
    margin-bottom: calc(var(--spacing-md) * 1.5);
    position: relative;
}

.section-title::after {
    bottom: -12px;
    height: 4px;
    width: 60px;
}

/* Card Hierarchy */
.service-card {
    display: flex;
    flex-direction: column;
}

.service-icon {
    margin-bottom: var(--spacing-md);
}

.service-title {
    margin-bottom: var(--spacing-sm);
}

.service-description {
    flex-grow: 1;
    margin-bottom: var(--spacing-md);
}

/* Feature Item Hierarchy */
.feature-item {
    padding: var(--spacing-md);
}

.feature-item i {
    margin-bottom: var(--spacing-xs);
    font-size: 2.6rem;
}

.feature-item span {
    font-weight: var(--font-weight-medium);
    font-size: 1.5rem;
}

/* ===== RESPONSIVE TYPOGRAPHY ===== */
@media screen and (max-width: 1280px) {
    :root {
        --spacing-xxl: 56px;
    }
}

@media screen and (max-width: 1024px) {
    :root {
        --spacing-xxl: 48px;
    }
    
    .hero-title {
        margin-bottom: var(--spacing-xl);
    }
    
    .hero-subtitle {
        margin-bottom: var(--spacing-lg);
    }
}

@media screen and (max-width: 768px) {
    :root {
        --spacing-xxl: 40px;
        --spacing-xl: 32px;
        --spacing-lg: 24px;
        --spacing-md: 16px;
        --spacing-sm: 12px;
        --spacing-xs: 8px;
    }
    
    section {
        padding: var(--spacing-xxl) 0;
    }
    
    .section-title {
        margin-bottom: var(--spacing-lg);
        font-size: 3.2rem;
    }
    
    .section-subtitle {
        margin-bottom: var(--spacing-lg);
        font-size: 1.8rem;
    }
    
    h1 {
        font-size: clamp(3.6rem, 7vw, 5.4rem);
    }
    
    h2 {
        font-size: clamp(2.8rem, 5vw, 3.6rem);
    }
    
    h3 {
        font-size: clamp(2.2rem, 4vw, 2.8rem);
    }
    
    .hero-title {
        font-size: 4.2rem;
        line-height: 1.1;
        margin-bottom: var(--spacing-md);
    }
    
    .hero-subtitle {
        font-size: 1.8rem;
        line-height: 1.4;
        margin-bottom: var(--spacing-lg);
    }
}

@media screen and (max-width: 576px) {
    :root {
        --spacing-xxl: 32px;
        --spacing-xl: 24px;
        --spacing-lg: 20px;
        --spacing-md: 14px;
        --spacing-sm: 10px;
        --spacing-xs: 6px;
    }
    
    .service-card,
    .about-text,
    .about-contact,
    .tahadi-info,
    .contact-form-container {
        padding: var(--spacing-md);
    }
    
    .hero-title {
        margin-bottom: var(--spacing-lg);
    }
    
    .hero-subtitle {
        margin-bottom: var(--spacing-md);
        font-size: 1.7rem;
    }
    
    .btn {
        padding: 1.2rem 2.4rem;
        font-size: 1.5rem;
    }
    
    .service-title {
        font-size: 2.2rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .service-description {
        font-size: 1.5rem;
    }
}

@media screen and (max-width: 480px) {
    :root {
        --spacing-xxl: 28px;
        --spacing-xl: 22px;
    }
    
    section {
        padding: var(--spacing-xxl) 0;
    }
    
    .section-title {
        font-size: 2.8rem;
    }
    
    .section-subtitle {
        font-size: 1.6rem;
    }
}