/* ========================================
   1. GLOBAL & FONT ENHANCEMENTS (Readability/Aesthetics)
   ======================================== */

:root {
    /* Define a modern, accessible color palette */
    --primary-color: #007bff; /* A modern blue for primary actions */
    --secondary-color: #6c757d; /* Subtle gray for secondary text/elements */
    --text-dark: #212529; /* Dark text for contrast */
    --border-color: #dee2e6; /* Light border color */
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.08); /* Soft shadow for depth */
}

body {
    font-family: "Lalezar", sans-serif; /* Ensure LaleZar is loaded and prioritized */
    color: var(--text-secondary);
    line-height: 1.75; /* Increased line-height for better readability (especially for Persian) */
    direction: rtl; /* Essential for Persian content */
    text-align: right;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary-dark);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 700; /* Stronger headings */
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
    color: #0056b3; /* Slightly darker on hover */
    text-decoration: underline;
}

/* ========================================
   2. MODERN LAYOUT & DEPTH (Aesthetics)
   ======================================== */

/* Apply soft card-like styling to major content sections */
.card, .widget, .section-box { /* Adjust these selectors as needed */
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-light);
    padding: 20px;
    margin-bottom: 25px;
}

/* Buttons should be crisp and interactive */
button, .button {
    padding: 10px 24px;
    border-radius: 50px; /* Fully rounded pill shape */
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.button-primary {
    background-color: var(--primary-color);
    color: white;
}

.button-primary:hover {
    background-color: #0056b3;
    transform: translateY(-1px); /* Subtle lift effect */
}

/* ========================================
   3. SMOOTH TRANSITIONS & HOVER EFFECTS (Aesthetics/Modernity)
   ======================================== */

/* Apply smooth transitions to common interactive elements */
input[type="text"], input[type="email"], textarea {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus, textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Focus ring effect */
    outline: none;
}

/* ========================================
   4. RESPONSIVENESS (Mobile-First Approach via Media Queries)
   ======================================== */

/* Default styles above are generally mobile-friendly (mobile-first).
   These are for wider screens (tablets and desktops). */
@media (min-width: 768px) {
    .container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Example: Adjust header navigation for desktop */
    .main-nav ul {
        display: flex;
        justify-content: flex-end;
        gap: 30px; /* Spacing between links */
    }
}

@media (max-width: 767px) {
    /* Mobile adjustments for better touch targets and less clutter */
    body {
        padding-left: 0;
        padding-right: 0;
    }
    
    h1 {
        font-size: 2rem; /* Slightly smaller main header on mobile */
    }

    button, .button {
        width: 100%; /* Full width buttons on small screens for easier tapping */
        margin-bottom: 10px;
    }
}