/*
|--------------------------------------------------------------------------
| FILE PATH:
| /home/mahaupsi/public_html/assets/public/css/parents-students-awareness.css
|
| FILE PURPOSE:
| Dedicated styling for the Parents & Students Awareness page.
|
| RESPONSIVE RULE:
| - Desktop : >= 1024px
| - Tablet  : 600px - 1023px
| - Mobile  : <= 599px
|
| IMPORTANT:
| - Flexbox is used; CSS Grid is intentionally avoided.
| - Exactly ONE Desktop block, ONE Tablet block and ONE Mobile block.
| - All responsive blocks are together at the END of this file.
|--------------------------------------------------------------------------
*/


/* =========================================================
   PAGE
   ========================================================= */

.parents-students-awareness-page {
    background: var(--bg-page);
}


/* =========================================================
   HERO
   ========================================================= */

.psa-hero {
    padding: var(--space-6) 0 var(--space-4);
}


.psa-hero-card {
    max-width: 1100px;

    margin: 0 auto;
    padding: var(--space-6);

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.12),
            rgba(59, 130, 246, 0.03)
        );

    border: 1px solid rgba(59, 130, 246, 0.26);
    border-left: 5px solid var(--color-primary);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.psa-kicker {
    margin-bottom: var(--space-2);

    color: var(--color-primary);

    font-size: 0.92rem;
    font-weight: 900;

    letter-spacing: 0.02em;
}


.psa-hero-card h1 {
    max-width: 920px;

    margin: 0;

    color: var(--text-primary);

    font-size: 2.45rem;
    font-weight: 900;

    line-height: 1.25;
}


.psa-hero-card h1 strong {
    color: var(--color-primary);
}


.psa-hero-lead {
    max-width: 920px;

    margin: var(--space-4) 0 0;

    color: var(--text-secondary);

    font-size: 1.08rem;

    line-height: 1.85;
}


.psa-hero-note {
    max-width: 920px;

    margin-top: var(--space-4);
    padding: var(--space-4);

    background: var(--info-bg);
    color: var(--info-text);

    border: 1px solid var(--info-border);

    border-radius: var(--radius-md);

    line-height: 1.75;
}


.psa-hero-actions {
    display: flex;
    flex-wrap: wrap;

    margin-top: var(--space-5);
}


.psa-hero-actions .btn {
    margin-right: var(--space-3);
    margin-bottom: var(--space-3);
}


.psa-hero-support-button {
    background: #16a34a;
    color: #ffffff;

    border: 1px solid #16a34a;
}


.psa-hero-support-button:hover {
    background: #15803d;
    color: #ffffff;

    border-color: #15803d;
}


/* =========================================================
   AWARENESS POSTER
   ========================================================= */

.psa-poster-section {
    padding: 0 0 var(--space-6);
}


.psa-poster-card {
    max-width: 940px;

    margin: 0 auto;
    padding: 0;

    overflow: hidden;

    background: var(--bg-surface);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-md);
}


.psa-poster-image {
    display: block;

    width: 100%;
    height: auto;
}


.psa-poster-caption {
    padding: 12px 16px;

    color: var(--text-secondary);

    border-top: 1px solid var(--border-color);

    font-size: 0.88rem;
    font-weight: 700;

    line-height: 1.55;

    text-align: center;
}


/* =========================================================
   VISITOR COUNTER
   Same visual language as Home visitor counter
   ========================================================= */

.psa-visitor-section {
    padding: 0 0 var(--space-7);
}


.psa-visitor-counter-wrap {
    text-align: center;
}


.psa-visitor-counter {
    display: inline-flex;
    align-items: center;

    padding: 10px 14px 10px 18px;

    background: var(--bg-surface);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-pill);

    box-shadow: var(--shadow-sm);
}


.psa-visitor-counter-label {
    margin-right: 12px;

    color: var(--text-secondary);

    font-size: var(--font-sm);
    font-weight: 700;
}


.psa-visitor-counter-number {
    min-width: 34px;
    height: 34px;

    padding: 0 10px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--color-primary-soft);
    color: var(--color-primary);

    border-radius: var(--radius-pill);

    font-size: var(--font-md);
    font-weight: 900;
}




/* =========================================================
   SECTION HEADING
   ========================================================= */

.psa-section-heading {
    max-width: 900px;

    margin: 0 auto var(--space-5);

    text-align: center;
}


.psa-section-heading > span {
    display: block;

    margin-bottom: 6px;

    color: var(--color-primary);

    font-size: 0.9rem;
    font-weight: 900;
}


.psa-section-heading h2 {
    margin: 0;

    color: var(--text-primary);

    font-size: 2rem;
    font-weight: 900;

    line-height: 1.35;
}


.psa-section-heading p {
    max-width: 780px;

    margin: var(--space-3) auto 0;

    color: var(--text-secondary);

    line-height: 1.75;
}


/* =========================================================
   POINTS
   ========================================================= */

.psa-points-section {
    padding: var(--space-5) 0 var(--space-6);
}


.psa-points-list {
    max-width: 1100px;

    margin: 0 auto;
}


.psa-point-card {
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;

    width: 100%;

    margin-bottom: var(--space-4);
    padding: var(--space-5);

    background: var(--bg-surface);

    border: 1px solid var(--border-color);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);

    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        border-color 160ms ease;
}


.psa-point-card:hover {
    transform: translateY(-2px);

    border-color: rgba(59, 130, 246, 0.36);

    box-shadow: var(--shadow-md);
}


.psa-point-number {
    width: 56px;
    height: 56px;

    flex: 0 0 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-right: var(--space-4);

    background: var(--color-primary-soft);
    color: var(--color-primary);

    border-radius: 50%;

    font-size: 0.95rem;
    font-weight: 900;
}


.psa-point-content {
    min-width: 0;

    flex: 1 1 auto;
}


.psa-point-content h3 {
    margin: 0 0 var(--space-4);

    color: var(--text-primary);

    font-size: 1.3rem;
    font-weight: 850;

    line-height: 1.45;
}


.psa-provision,
.psa-impact {
    box-sizing: border-box;

    padding: var(--space-4);

    border-radius: var(--radius-md);
}


.psa-provision {
    margin-bottom: var(--space-3);

    background: var(--bg-surface-2);

    border: 1px solid var(--border-color);
}


.psa-impact {
    background: rgba(245, 158, 11, 0.08);

    border: 1px solid rgba(245, 158, 11, 0.24);
    border-left: 4px solid #f59e0b;
}


.psa-provision > strong,
.psa-impact > strong {
    display: block;

    margin-bottom: 7px;

    color: var(--text-primary);

    font-size: 0.92rem;
    font-weight: 900;
}


.psa-provision p,
.psa-impact p {
    margin: 0;

    color: var(--text-secondary);

    line-height: 1.75;
}


/* =========================================================
   POSITION
   ========================================================= */

.psa-position-section {
    padding: 0 0 var(--space-6);
}


.psa-position-card {
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;

    max-width: 1100px;

    margin: 0 auto;
    padding: var(--space-5);

    background: rgba(34, 197, 94, 0.07);

    border: 1px solid rgba(34, 197, 94, 0.24);
    border-left: 5px solid #22c55e;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.psa-position-icon {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-right: var(--space-4);

    background: rgba(34, 197, 94, 0.14);

    border-radius: 50%;

    font-size: 1.55rem;
}


.psa-position-content > span {
    display: block;

    margin-bottom: 5px;

    color: #15803d;

    font-size: 0.9rem;
    font-weight: 900;
}


.psa-position-content h2 {
    margin: 0;

    color: var(--text-primary);

    font-size: 1.55rem;
    font-weight: 900;

    line-height: 1.4;
}


.psa-position-content p {
    margin: var(--space-3) 0 0;

    color: var(--text-secondary);

    line-height: 1.75;
}


/* =========================================================
   EMAIL
   Deliberately NOT styled like the visitor pill
   ========================================================= */

.psa-email-section {
    padding: 0 0 var(--space-6);
}


.psa-email-card {
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;

    max-width: 1100px;

    margin: 0 auto;
    padding: var(--space-5);

    background: var(--bg-surface);

    border: 1px solid rgba(59, 130, 246, 0.30);
    border-left: 5px solid var(--color-primary);

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.psa-email-icon {
    width: 76px;
    height: 76px;

    flex: 0 0 76px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-right: var(--space-5);

    background: var(--color-primary-soft);

    border-radius: 50%;

    font-size: 1.75rem;
}


.psa-email-content {
    min-width: 0;

    flex: 1 1 auto;
}


.psa-email-kicker {
    display: block;

    margin-bottom: 5px;

    color: var(--color-primary);

    font-size: 0.9rem;
    font-weight: 900;
}


.psa-email-content h2 {
    margin: 0;

    color: var(--text-primary);

    font-size: 1.65rem;
    font-weight: 900;

    line-height: 1.4;
}


.psa-email-content > p {
    max-width: 820px;

    margin: var(--space-3) 0 0;

    color: var(--text-secondary);

    line-height: 1.75;
}


.psa-email-count-box {
    max-width: 720px;

    margin-top: var(--space-4);
    padding: var(--space-4);

    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.11),
            rgba(59, 130, 246, 0.03)
        );

    border: 1px solid rgba(59, 130, 246, 0.24);

    border-radius: var(--radius-md);
}


.psa-email-count-label {
    color: var(--text-primary);

    font-size: 0.92rem;
    font-weight: 800;

    line-height: 1.5;
}


.psa-email-count-number {
    display: block;

    margin-top: 6px;

    color: var(--color-primary);

    font-size: 2.35rem;
    font-weight: 950;

    line-height: 1.2;
}




.psa-email-actions {
    display: flex;
    flex-wrap: wrap;

    margin-top: var(--space-4);
}


.psa-email-actions .btn {
    margin-right: var(--space-3);
    margin-bottom: var(--space-3);
}


/* =========================================================
   SUPPORT
   ========================================================= */

.psa-support-section {
    padding: 0 0 var(--space-6);
}


.psa-support-card {
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;

    max-width: 1100px;

    margin: 0 auto;
    padding: var(--space-5);

    background: var(--bg-surface);

    border: 1px solid rgba(34, 197, 94, 0.24);
    border-left: 5px solid #22c55e;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.psa-support-icon {
    width: 68px;
    height: 68px;

    flex: 0 0 68px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-right: var(--space-4);

    background: rgba(34, 197, 94, 0.12);

    border-radius: 50%;

    font-size: 1.6rem;
}


.psa-support-content {
    min-width: 0;

    flex: 1 1 auto;
}


.psa-support-content > span {
    display: block;

    margin-bottom: 5px;

    color: #15803d;

    font-size: 0.9rem;
    font-weight: 900;
}


.psa-support-content h2 {
    margin: 0;

    color: var(--text-primary);

    font-size: 1.55rem;
    font-weight: 900;
}


.psa-support-content p {
    max-width: 820px;

    margin: var(--space-3) 0 0;

    color: var(--text-secondary);

    line-height: 1.7;
}


.psa-support-note {
    margin-bottom: var(--space-4) !important;

    font-size: 0.88rem;
}


/* =========================================================
   SHARE
   ========================================================= */

.psa-share-section {
    padding: 0 0 var(--space-6);
}


.psa-share-card {
    box-sizing: border-box;

    display: flex;
    align-items: flex-start;

    max-width: 1100px;

    margin: 0 auto;
    padding: var(--space-5);

    background:
        linear-gradient(
            135deg,
            rgba(168, 85, 247, 0.10),
            rgba(168, 85, 247, 0.025)
        );

    border: 1px solid rgba(168, 85, 247, 0.25);
    border-left: 5px solid #a855f7;

    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}


.psa-share-icon {
    width: 68px;
    height: 68px;

    flex: 0 0 68px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-right: var(--space-4);

    background: rgba(168, 85, 247, 0.12);

    border-radius: 50%;

    font-size: 1.55rem;
}


.psa-share-content {
    min-width: 0;

    flex: 1 1 auto;
}


.psa-share-content > span {
    display: block;

    margin-bottom: 5px;

    color: #9333ea;

    font-size: 0.9rem;
    font-weight: 900;
}


.psa-share-content h2 {
    margin: 0;

    color: var(--text-primary);

    font-size: 1.55rem;
    font-weight: 900;

    line-height: 1.4;
}


.psa-share-content p {
    max-width: 820px;

    margin: var(--space-3) 0 0;

    color: var(--text-secondary);

    line-height: 1.7;
}


.psa-share-actions {
    display: flex;
    flex-wrap: wrap;

    margin-top: var(--space-4);
}


.psa-share-actions .btn {
    margin-right: var(--space-3);
    margin-bottom: var(--space-3);
}


.psa-whatsapp-button {
    background: #16a34a;
    color: #ffffff;

    border: 1px solid #16a34a;
}


.psa-whatsapp-button:hover {
    background: #15803d;
    color: #ffffff;

    border-color: #15803d;
}


.psa-share-status {
    max-width: 700px;

    margin-top: var(--space-2);
    padding: 10px 12px;

    background: rgba(34, 197, 94, 0.10);
    color: var(--text-primary);

    border: 1px solid rgba(34, 197, 94, 0.24);

    border-radius: var(--radius-md);

    font-size: 0.9rem;
    font-weight: 700;
}


/* =========================================================
   INFORMATION NOTE
   ========================================================= */

.psa-information-section {
    padding: 0 0 var(--space-7);
}


.psa-information-note {
    max-width: 1100px;

    margin: 0 auto;
    padding: var(--space-4);

    background: var(--info-bg);
    color: var(--info-text);

    border: 1px solid var(--info-border);

    border-radius: var(--radius-lg);

    font-size: 0.9rem;

    line-height: 1.7;
}


/* =========================================================
   DARK THEME
   ========================================================= */

:root[data-theme="dark"] .psa-hero-card {
    background:
        linear-gradient(
            135deg,
            rgba(59, 130, 246, 0.16),
            rgba(59, 130, 246, 0.04)
        );

    border-color: rgba(96, 165, 250, 0.30);
    border-left-color: var(--color-primary);
}


:root[data-theme="dark"] .psa-impact {
    background: rgba(245, 158, 11, 0.09);

    border-color: rgba(245, 158, 11, 0.26);
}


:root[data-theme="dark"] .psa-position-card,
:root[data-theme="dark"] .psa-support-card {
    border-color: rgba(34, 197, 94, 0.28);
}


:root[data-theme="dark"] .psa-share-card {
    border-color: rgba(192, 132, 252, 0.30);
}


:root[data-theme="dark"] .psa-position-content > span,
:root[data-theme="dark"] .psa-support-content > span {
    color: #86efac;
}


:root[data-theme="dark"] .psa-share-content > span {
    color: #d8b4fe;
}


/* =========================================================
   DESKTOP
   >= 1024px
   ========================================================= */

@media (min-width: 1024px) {

    .psa-hero-card,
    .psa-points-list,
    .psa-position-card,
    .psa-email-card,
    .psa-support-card,
    .psa-share-card,
    .psa-information-note {
        max-width: 1100px;
    }


    .psa-point-card {
        padding: var(--space-5);
    }


    .psa-email-content,
    .psa-support-content,
    .psa-share-content,
    .psa-position-content {
        padding-top: 2px;
    }

}


/* =========================================================
   TABLET
   600px - 1023px
   ========================================================= */

@media (min-width: 600px) and (max-width: 1023px) {

    .psa-hero {
        padding-top: var(--space-5);
    }


    .psa-hero-card {
        padding: var(--space-5);
    }


    .psa-hero-card h1 {
        font-size: 2rem;
    }


    .psa-section-heading h2 {
        font-size: 1.65rem;
    }


    .psa-point-card {
        padding: var(--space-4);
    }


    .psa-email-icon {
        width: 64px;
        height: 64px;

        flex-basis: 64px;

        margin-right: var(--space-4);
    }

}


/* =========================================================
   MOBILE
   <= 599px
   ========================================================= */

@media (max-width: 599px) {

    .psa-hero {
        padding:
            var(--space-4)
            0
            var(--space-3);
    }


    .psa-hero-card {
        padding: var(--space-4);

        border-left-width: 4px;

        border-radius: var(--radius-md);
    }


    .psa-hero-card h1 {
        font-size: 1.55rem;

        line-height: 1.4;
    }


    .psa-hero-lead {
        font-size: 0.98rem;

        line-height: 1.75;
    }


    .psa-hero-note {
        padding: var(--space-3);

        font-size: 0.9rem;
    }


    .psa-hero-actions,
    .psa-email-actions,
    .psa-share-actions {
        display: block;
    }


    .psa-hero-actions .btn,
    .psa-email-actions .btn,
    .psa-share-actions .btn {
        width: 100%;

        margin-right: 0;
        margin-bottom: var(--space-3);

        justify-content: center;
    }


    .psa-visitor-counter {
        padding: 8px 11px 8px 13px;
    }


    .psa-visitor-counter-label {
        margin-right: 8px;

        font-size: 0.82rem;
    }


    .psa-visitor-counter-number {
        min-width: 32px;
        height: 32px;

        padding: 0 8px;
    }




    .psa-points-section {
        padding-top: var(--space-4);
    }


    .psa-section-heading {
        margin-bottom: var(--space-4);
    }


    .psa-section-heading h2 {
        font-size: 1.4rem;
    }


    .psa-section-heading p {
        font-size: 0.92rem;
    }


    .psa-point-card,
    .psa-position-card,
    .psa-email-card,
    .psa-support-card,
    .psa-share-card {
        display: block;

        padding: var(--space-4);

        border-left-width: 4px;

        border-radius: var(--radius-md);
    }


    .psa-point-number {
        width: 44px;
        height: 44px;

        margin: 0 0 var(--space-3);

        flex-basis: 44px;
    }


    .psa-point-content h3 {
        font-size: 1.1rem;
    }


    .psa-provision,
    .psa-impact {
        padding: var(--space-3);
    }


    .psa-provision p,
    .psa-impact p {
        font-size: 0.92rem;
    }


    .psa-position-icon,
    .psa-email-icon,
    .psa-support-icon,
    .psa-share-icon {
        width: 52px;
        height: 52px;

        margin: 0 0 var(--space-3);

        font-size: 1.3rem;
    }


    .psa-position-content h2,
    .psa-email-content h2,
    .psa-support-content h2,
    .psa-share-content h2 {
        font-size: 1.3rem;
    }


    .psa-email-count-box {
        padding: var(--space-3);
    }


    .psa-email-count-number {
        font-size: 2rem;
    }


    .psa-support-content > .btn {
        width: 100%;

        justify-content: center;
    }


    .psa-information-note {
        padding: var(--space-3);

        border-radius: var(--radius-md);

        font-size: 0.84rem;
    }

}