/* Public-site additions for content that now comes from the CMS. */

/* Subject group cards link to the filtered subject directory. */
.subject-card-link { display: block; height: 100%; color: inherit; }
.subject-card-link:hover, .subject-card-link:focus { color: inherit; text-decoration: none; }
.subject-card-link:focus-visible { outline: 3px solid var(--epsa-gold); outline-offset: 4px; border-radius: 14px; }

/* Light (gold) groups keep dark text on hover, like the original Arts card. */
.subject-card.is-light:hover h4, .subject-card.is-light:hover p,
.subject-card.is-light:hover .sc-link, .subject-card.is-light:hover .sc-count { color: var(--epsa-navy); }
.subject-card.is-light .sc-icon, .subject-card.is-light .sc-count { color: #9a7600; }

/* Social links in the footer (shown only when set in Site settings). */
.footer-social { list-style: none; margin: 18px 0 0; padding: 0; display: flex; gap: 10px; }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, .1); color: #fff; transition: background .2s, color .2s;
}
.footer-social a:hover { background: var(--epsa-gold); color: var(--epsa-navy); }

/* Leadership: a line under the featured profile, then the managers in a row of four. */
.leadership-divider {
    margin: 60px 0 10px; border: 0; height: 1px;
    background: linear-gradient(90deg, transparent, #dfe5eb 12%, #dfe5eb 88%, transparent);
}
.leadership-team > [class*="col-"] { display: flex; }

/* Biography excerpts link to the full profile page. */
.profile-link { font-size: 14px; font-weight: 700; color: var(--c, var(--epsa-royal)); white-space: nowrap; }
.profile-link i { margin-left: 6px; transition: transform .3s; }
.profile-link:hover { color: var(--epsa-navy); }
.profile-link:hover i { transform: translateX(4px); }
.tc-more { margin: 14px 0 0; }
.pp-more { margin: 18px 0 0; }
.pp-more .profile-link { --c: var(--epsa-royal); font-size: 15px; }
.teacher-card h4 a, .pp-body h3 a { color: inherit; }
.teacher-card h4 a:hover, .pp-body h3 a:hover { color: var(--c, var(--epsa-royal)); }

/* Profile page */
.teacher-profile .profile-kicker {
    display: inline-block; margin-bottom: 10px; padding: 3px 12px; border-radius: 20px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--epsa-navy); background: #fff3cd;
}
.teacher-profile .profile-name { margin: 0 0 12px; font-size: 38px; font-weight: 700; line-height: 1.15; color: var(--epsa-navy); }
.teacher-profile .profile-qual { margin: -10px 0 16px; color: #6b7785; }
.teacher-profile .profile-qual i { color: var(--epsa-gold); margin-right: 4px; }
.teacher-profile .profile-subjects { text-align: left; margin: 0; }
.profile-bio { margin-top: 60px; padding-top: 40px; border-top: 1px solid #dfe5eb; scroll-margin-top: 140px; }
.profile-bio h2 { font-size: 28px; margin-bottom: 18px; color: var(--epsa-navy); }
.profile-bio p { font-size: 17px; line-height: 1.9; margin-bottom: 18px; }
.profile-bio .main-btn { margin-top: 12px; }
.muted-note { color: #6b7785; font-style: italic; }
@media (max-width: 767px) { .teacher-profile .profile-name { font-size: 30px; } }

/* Leadership portraits: three per row, photo on a transparent background. */
.leader-portrait {
    --c: var(--epsa-royal);
    display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%;
    background: transparent; text-align: center;
}
.lp-photo {
    position: relative; display: block; width: 100%; max-width: 220px; aspect-ratio: 4 / 5;
    border-radius: 14px; overflow: hidden; background: transparent;
    transition: transform .45s var(--ease-out, ease), box-shadow .45s;
}
.leader-portrait:hover .lp-photo { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(7, 41, 77, .16); }
.lp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform 1s var(--ease-out, ease); }
.leader-portrait:hover .lp-photo img { transform: scale(1.05); }
.lp-photo::after {                        /* tri-colour edge, like the menu stripe */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
    background: linear-gradient(90deg, var(--epsa-royal) 0 33.3%, var(--epsa-gold) 33.3% 66.6%, var(--epsa-green) 66.6%);
}
.lp-initials {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 56px; font-weight: 700; letter-spacing: .04em; color: var(--c);
    background: color-mix(in srgb, var(--c) 10%, transparent);
}
.lp-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 18px 12px 0; }
.lp-role { margin: 0 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.leader-portrait h4 { margin: 0 0 6px; font-size: 21px; line-height: 1.3; color: var(--epsa-navy); }
.leader-portrait h4 a { color: inherit; }
.leader-portrait h4 a:hover { color: var(--c); }
.lp-qual { margin: 0 0 4px; font-size: 13.5px; line-height: 1.6; color: #6b7785; }
.lp-body .profile-link { margin-top: auto; padding-top: 10px; }
@media (max-width: 575px) { .lp-photo { max-width: 200px; } }

/* Subjects offered in each form: one light card per form. */
.subject-forms-section { background: #fff; }
.form-card {
    height: 100%; background: #fff; border: 1px solid #e6ebf1; border-radius: 14px;
    box-shadow: 0 8px 28px rgba(7, 41, 77, .06); overflow: hidden;
    transition: transform .4s var(--ease-out, ease), box-shadow .4s;
}
.form-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(7, 41, 77, .12); }
.form-card header {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 18px 22px 14px; border-top: 4px solid var(--epsa-gold); border-bottom: 1px solid #eef1f5;
}
.form-card h3 { margin: 0; font-size: 22px; color: var(--epsa-navy); }
.form-card header span { font-size: 13px; font-weight: 600; color: #8a96a3; white-space: nowrap; }
.form-card ul { list-style: none; margin: 0; padding: 12px 22px 18px; }
.form-card li { position: relative; padding: 7px 0 7px 18px; font-size: 15px; color: #3a4a5a; border-bottom: 1px dashed #eef1f5; }
.form-card li:last-child { border-bottom: 0; }
.form-card li::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%; background: var(--epsa-green);
}
.form-cards-note { margin: 30px 0 0; font-size: 14px; color: #6b7785; }
.form-cards-note i { margin-right: 4px; color: var(--epsa-royal); }

/* Contact form: each field shows its own error underneath. */
.contact-from .field-error { margin: 6px 0 0; min-height: 0; font-size: 13.5px; line-height: 1.4; color: #c0392b; }
.contact-from .field-error:empty { display: none; }
.contact-from .has-error input, .contact-from .has-error textarea { border-color: #d64545 !important; background: #fff8f8; }
.contact-from .main-btn:disabled { opacity: .65; cursor: wait; }

/* SweetAlert on the public site */
.epsa-swal { border-radius: 16px; padding: 28px 24px 26px; font-family: inherit; }
.epsa-swal .swal2-title { font-size: 22px; color: var(--epsa-navy); }
.epsa-swal .swal2-html-container { font-size: 15.5px; line-height: 1.6; color: #5b6878; }
.epsa-swal .swal2-actions { margin-top: 20px; }
.epsa-swal .swal2-loader { border-color: var(--epsa-gold) transparent var(--epsa-gold) transparent; }
.epsa-swal .swal2-icon.swal2-success { border-color: #a3d9b8; color: var(--epsa-green); }
.epsa-swal .swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--epsa-green); }
.epsa-swal .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(30, 107, 58, .3); }

/* Floating WhatsApp chat button (bottom right). Back-to-top sits above it. */
.whatsapp-float {
    position: fixed; right: 20px; bottom: 20px; z-index: 100;
    display: flex; align-items: center; gap: 10px; text-decoration: none;
}
.whatsapp-float .wa-icon {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; font-size: 32px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45); transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-float .wa-icon::after {           /* gentle pulse to draw the eye */
    content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366;
    animation: waPulse 2.4s ease-out infinite;
}
.whatsapp-float .wa-label {
    padding: 8px 14px; border-radius: 20px; background: #fff; color: #075e54; font-size: 14px; font-weight: 700;
    box-shadow: 0 6px 20px rgba(7, 41, 77, .15); white-space: nowrap;
    opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
.whatsapp-float:hover .wa-icon, .whatsapp-float:focus-visible .wa-icon { transform: scale(1.08); box-shadow: 0 12px 30px rgba(37, 211, 102, .55); }
.whatsapp-float:hover .wa-label, .whatsapp-float:focus-visible .wa-label { opacity: 1; transform: none; }
.whatsapp-float:focus-visible { outline: none; }
.whatsapp-float:focus-visible .wa-icon { outline: 3px solid var(--epsa-gold); outline-offset: 3px; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .whatsapp-float .wa-icon::after { animation: none; } }
.back-to-top { bottom: 92px !important; right: 29px !important; }
@media (max-width: 575px) {
    .whatsapp-float { right: 14px; bottom: 14px; }
    .whatsapp-float .wa-icon { width: 52px; height: 52px; font-size: 28px; }
    .whatsapp-float .wa-label { display: none; }
    .back-to-top { bottom: 78px !important; right: 20px !important; }
}
@media print { .whatsapp-float { display: none; } }

/* School fees */
.fee-card {
    position: relative; height: 100%; padding: 36px 30px 32px; text-align: center; background: #fff;
    border: 1px solid #e6ebf1; border-radius: 16px; box-shadow: 0 8px 28px rgba(7, 41, 77, .06);
    transition: transform .4s var(--ease-out, ease), box-shadow .4s;
}
.fee-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(7, 41, 77, .13); }
.fee-card.is-featured { border-color: var(--epsa-gold); box-shadow: 0 14px 38px rgba(255, 198, 0, .18); }
.fee-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 16px;
    border-radius: 16px; font-size: 24px; color: var(--epsa-navy); background: #fff4cc;
}
.fee-card h3 { margin: 0 0 12px; font-size: 20px; color: var(--epsa-navy); }
.fee-amount { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--epsa-navy); }
.fee-period { margin: 6px 0 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--epsa-green); }
.fee-note {
    display: inline-block; margin-top: 16px; padding: 4px 12px; border-radius: 20px;
    font-size: 13px; font-weight: 600; color: var(--epsa-royal); background: #eaf1fb;
}
.fees-foot { margin-top: 40px; text-align: center; }
.fees-foot p { max-width: 640px; margin: 0 auto 20px; color: #6b7785; }

.fees-box { margin-top: 30px; padding: 26px 28px; border-radius: 12px; background: #fff; border: 1px solid #e6ebf1; box-shadow: 0 6px 22px rgba(7, 41, 77, .06); }
.fees-box h4 { margin: 0 0 14px; font-size: 19px; color: var(--epsa-navy); }
.fees-box h4 i { margin-right: 6px; color: var(--epsa-green); }
.fees-box ul { list-style: none; margin: 0; padding: 0; }
.fees-box li { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px dashed #e3e9ef; }
.fees-box li:first-child { border-top: 0; padding-top: 4px; }
.fb-name { font-weight: 600; color: #34495e; }
.fb-amount { font-weight: 800; color: var(--epsa-navy); text-align: right; white-space: nowrap; }
.fees-box small { display: block; font-size: 12.5px; font-weight: 500; color: #8a96a3; }
.reg-aside .fees-box { margin-top: 0; margin-bottom: 30px; }
@media (max-width: 575px) { .fee-amount { font-size: 30px; } }
.fee-group + .fee-group { margin-top: 50px; }
.fee-group-title {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 0;
    font-size: 20px; color: var(--epsa-navy);
}
.fee-group-title i { color: var(--epsa-green); }
.fb-group { margin: 16px 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--epsa-green); }
.fb-group i { margin-right: 4px; }
.fees-box h4 + .fb-group { margin-top: 0; }

/* Home › community: the featured leader's welcome remarks above the link cards */
.community-leader { margin: 10px 0 50px; text-align: left; }
.community-leader .pp-text + .pp-text { margin-top: 16px; }