/* — Import Vazirmatn Font — */
@import url(‘https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;700&display=swap’);

/* — Main Container & Typography — */
.reportage-container {
font-family: ‘Vazirmatn’, Tahoma, sans-serif;
direction: rtl;
text-align: right;
background-color: #ffffff;
max-width: 900px;
margin: 20px auto;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 78, 92, 0.1);
border: 1px solid #e0e0e0;
line-height: 1.9;
color: #333;
overflow: hidden; /* Ensures box-shadow and radius work together */
}

/* — Headings (H1, H2, H3) — */
.reportage-container h1 {
font-size: 2.2rem; /* 35px */
font-weight: 700;
color: #005f73; /* A deep, professional teal */
text-align: center;
margin-bottom: 25px;
line-height: 1.4;
}

.reportage-container h2 {
font-size: 1.8rem; /* 29px */
font-weight: 700;
color: #0a9396; /* A slightly lighter teal */
margin-top: 40px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 3px solid #94d2bd;
}

.reportage-container h3 {
font-size: 1.4rem; /* 22px */
font-weight: 600;
color: #005f73;
margin-top: 30px;
margin-bottom: 15px;
}

/* — Paragraphs & Links — */
.reportage-container p {
font-size: 1rem; /* 16px */
font-weight: 400;
margin-bottom: 20px;
text-align: justify;
}

.reportage-container a {
color: #0077b6; /* A clear, trustworthy blue */
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border-bottom: 1px dashed #0077b6;
}

.reportage-container a:hover {
color: #003459;
background-color: #e6f7ff;
text-decoration: none;
border-bottom: 1px solid #003459;
}

/* — Educational Table — */
.educational-table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 0.95rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
border-radius: 8px;
overflow: hidden; /* For border-radius on table */
}

.educational-table th,
.educational-table td {
padding: 15px 18px;
border: 1px solid #ddd;
text-align: right;
}

.educational-table th {
background-color: #005f73;
color: #ffffff;
font-weight: 700;
font-size: 1.1rem;
}

.educational-table tr:nth-child(even) {
background-color: #f8fcfd;
}

.educational-table tr:hover {
background-color: #eefbff;
}

.educational-table td:first-child {
font-weight: 600;
color: #005f73;
}

/* — Infographic/Steps Replacement — */
.steps-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 25px;
text-align: center;
}

.step-card {
background-color: #fdfdfd;
border: 2px solid #94d2bd;
border-radius: 10px;
padding: 20px;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.step-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 78, 92, 0.1);
border-color: #0a9396;
}

.step-card-icon {
font-size: 2.5rem;
color: #0a9396;
margin-bottom: 10px;
}

.step-card h4 {
font-size: 1.2rem;
font-weight: 700;
color: #005f73;
margin: 10px 0;
}

.step-card p {
font-size: 0.9rem;
color: #555;
text-align: center;
line-height: 1.7;
}

/* — Responsive Design — */
@media (max-width: 768px) {
.reportage-container {
padding: 20px;
margin: 10px;
box-shadow: 0 5px 15px rgba(0, 78, 92, 0.05);
}

.reportage-container h1 {
font-size: 1.8rem; /* 29px */
}

.reportage-container h2 {
font-size: 1.5rem; /* 24px */
}

.reportage-container h3 {
font-size: 1.2rem; /* 19px */
}

.steps-container {
grid-template-columns: 1fr; /* Stack cards on mobile */
}

.educational-table th,
.educational-table td {
padding: 12px;
}

.educational-table {
font-size: 0.9rem;
}
}