/* ------------------------------------------------------------------
   Design tokens
   Palette matches the approved homepage reference: blue + yellow
   primaries, soft pink accent, pastel section backgrounds.
------------------------------------------------------------------ */
:root {
    --blue-900: #1B3A63;
    --blue-700: #1E63A8;
    --blue-600: #1E88E5;
    --blue-100: #EAF4FF;

    --pink-600: #F0508C;
    --pink-500: #F5729E;
    --pink-100: #FDEDF3;

    --yellow-500: #FFC845;
    --yellow-100: #FFF6DF;

    --purple-600: #8B5CF6;
    --purple-100: #EDE9FE;

    --green-600: #16A34A;
    --green-100: #E3F6EA;

    --orange-100: #FFE8DC;

    --gray-900: #1F2933;
    --gray-600: #5B6572;
    --gray-400: #8A94A3;
    --gray-100: #F5F7FA;
    --white: #FFFFFF;

    --font-family: "Vazirmatn", "Tahoma", sans-serif;

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-pill: 999px;

    --shadow-card: 0 10px 30px rgba(27, 58, 99, 0.08);
    --shadow-card-hover: 0 16px 40px rgba(27, 58, 99, 0.14);

    --container-width: 1220px;
    --header-height: 76px;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* One continuous dreamy atmosphere behind the whole page (hero keeps its
   own opaque photo on top, so this only shows through the sections below
   it) instead of every section sitting on flat white. Kept extremely
   light/soft on purpose — readability over decoration. Fixed attachment
   so the glows read as one atmosphere rather than repeating per-section. */
body {
    margin: 0;
    font-family: var(--font-family);
    background:
        radial-gradient(640px 420px at 88% 6%, rgba(173, 220, 255, 0.30), transparent 70%),
        radial-gradient(520px 400px at 6% 24%, rgba(255, 195, 224, 0.22), transparent 70%),
        radial-gradient(560px 430px at 92% 58%, rgba(170, 240, 210, 0.20), transparent 70%),
        radial-gradient(520px 420px at 8% 82%, rgba(214, 200, 255, 0.18), transparent 70%),
        linear-gradient(180deg, #EFF8FF 0%, #F8F4FF 35%, #FFF7FA 68%, #FFFDF8 100%);
    background-attachment: fixed, fixed, fixed, fixed, fixed;
    background-repeat: no-repeat;
    color: var(--gray-900);
    direction: rtl;
    text-align: right;
    line-height: 1.8;
    overflow-x: hidden;
}

@media (max-width: 767px) {
    /* Fixed-attachment gradients can jank alongside mobile browser chrome
       resizing on scroll; scroll with the page there instead. */
    body {
        background-attachment: scroll, scroll, scroll, scroll, scroll;
    }
}

img,
svg {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4, p {
    margin: 0;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 768px) {
    .container {
        padding: 0 32px;
    }
}

.icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.section {
    padding: 48px 0;
}

@media (min-width: 1024px) {
    .section {
        padding: 72px 0;
    }
}

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--blue-900);
}

.section-subtitle {
    margin-top: 6px;
    color: var(--gray-600);
    font-size: 0.95rem;
}

@media (min-width: 768px) {
    .section-title {
        font-size: 1.9rem;
    }
}

.link-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--blue-700);
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}

.link-more .icon {
    width: 18px;
    height: 18px;
}

/* ===== Site-wide Django messages (Stage 7.9) ===== */
.site-messages {
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.site-message {
    padding: 12px 18px;
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
}

.site-message--success {
    background: rgba(76, 201, 148, 0.14);
    color: #1F9D6C;
}

.site-message--error {
    background: rgba(214, 51, 108, 0.1);
    color: #D6336C;
}

.site-message--info {
    background: var(--blue-100);
    color: var(--blue-700);
}

.site-message--warning {
    background: rgba(255, 193, 7, 0.16);
    color: #B8860B;
}