/* ************************************************
 Migration overrides for the static (HTML/CSS/JS)
 build of the Alwataniah Syrian National School site.
 Keeps the original look, adds bilingual visibility
 rules and a few static-only tweaks.
 ************************************************ */

/* Language visibility toggle.
   Both AR and EN copies live in the DOM; body class chooses which is shown. */
html.no-js .lang-en,
body.i18n-ar .lang-en,
.i18n-ar .lang-en {
    display: none !important;
}
body.i18n-en .lang-ar,
.i18n-en .lang-ar {
    display: none !important;
}

/* Language switch button (replaces Drupal's region-lang menu) */
.lang {
    display: inline-block;
    vertical-align: middle;
}
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: white;
    font-family: GESSUniqueLight, AdventProBold;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.25s, border-color 0.25s;
    text-decoration: none;
}
.lang-switch:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}
.lang-switch .flag {
    width: 18px;
    height: 12px;
    object-fit: cover;
    display: inline-block;
}

/* The original CSS opacity:0 hides text until JS scroll-anim shows it.
   In the static build we want everything visible by default — JS still
   plays the reveal once on scroll-into-view, but if JS is slow/disabled
   nothing should stay invisible. */
.no-anim .abouttext h2,
.no-anim .abouttext .content,
.no-anim .aboutimage,
.no-anim .lastnewsmaintitle,
.no-anim .newsimage1,
.no-anim .newsimage2,
.no-anim .newstitle,
.no-anim .newscontent,
.no-anim .lastphotosalbumsmaintitle,
.no-anim .ablumcontent {
    opacity: 1 !important;
    margin-right: 0 !important;
    display: block !important;
}

/* Card backgrounds + per-card icon since we replaced the Drupal-managed
   per-card image fields with static images shipped in /images. */
.part {
    background-color: #1a1a1a;
}

/* Footer background fallback (when footer.jpg is missing or slow) */
#section8 {
    background-color: #2a2a2a;
}

/* A few small fixes that the original Drupal site relied on header
   markup to provide — neutral selectors so we don't break the original
   selectors. */
body {
    background: #ffffff;
}
.copyright {
    direction: ltr;
}
body.i18n-ar .copyright {
    direction: rtl;
}

/* Make the headercontactsocial usable on the static build */
.headercontactsocial .socialicon {
    height: 1.5vw;
    min-height: 18px;
}

/* Inline contact info styling for the footer block */
.footercontact .content p {
    margin: 4px 0;
}
.footercontact .content a {
    color: white;
}

/* Ensure menu overlay doesn't get blocked by other stacking */
.menulayer,
.menulayermobile {
    pointer-events: auto;
}

/* Menu trigger hidden (overlay nav not in scope for the static build).
   Uses !important because main.js sets inline display via fontSizeBydeviceWidth(). */
.menu.menunew,
.menumobile {
    display: none !important;
}
.menulayer,
.menulayermobile {
    display: none !important;
}

/* Mobile header: with the hamburger removed, give login/enroll the freed space */
@media (max-width: 1024px) {
    .headermobile .rightbar {
        width: 80% !important;
        text-align: end;
    }
    .headermobile .logintitle {
        padding: 1% 2% !important;
        margin: 0 !important;
        border-color: rgba(255, 255, 255, 0.18);
    }
    .headermobile .loginlink {
        font-size: 12px !important;
        white-space: nowrap;
    }
    .headermobile .lang {
        margin: 0 8px !important;
    }
}
@media (max-width: 484px) {
    .headermobile .logo {
        width: 22%;
    }
    .headermobile .rightbar {
        width: 75% !important;
    }
    .headermobile .logintitle {
        padding: 1% 1.5% !important;
    }
    .headermobile .loginlink {
        font-size: 11px !important;
    }
}

/* Hide "Useful Links" footer column entirely */
.footercontent.footerlinks {
    display: none !important;
}
/* Re-balance remaining two footer columns to fill the space */
#section8 .footercontent.footeradvice {
    width: 60% !important;
}
#section8 .footercontent.footercontact {
    width: 35% !important;
}

/* Slider title — give a base style so first paint isn't ugly */
.slidertitle {
    line-height: 1.7;
    padding: 12px 18px;
    background: rgba(0, 0, 0, 0.25);
}
body.i18n-en .slidertitle {
    text-align: left;
    text-align-last: left;
}

/* Subtle improvement: make .content readable inside dark sections */
#section8 .footercontent .content {
    color: white;
    line-height: 1.7;
}
#section8 .footercontent h2 {
    color: #ed1c24;
    font-size: 14px;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Fix: news section had display:none on .newscontent which JS slides
   down on scroll. If the section is already in the viewport on load
   (short page on a tall screen), nothing reveals it. Force-show after
   a generous delay. */
.section[state="active"] .newscontent,
.section[state="active"] .newstitle {
    display: block;
}

/* Section 6 album carousel container offset for static build */
#section6 {
    padding-bottom: 6%;
}

/* ============ WELCOME POPUP ============
   Lifted verbatim from page--front.tpl.php inline <style>.
   JS animates .popupinside height from 0 to 70vh on window.load. */
.popuplayer {
    position: fixed;
    z-index: 400;
    background: rgba(49, 49, 49, 0.65);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
}
.popupinside {
    width: 40%;
    display: inline-block;
    margin-top: 15vh;
    background: rgb(182, 182, 182);
    height: 0vh;
    color: white;
    border-radius: 6px;
    font-family: GESSUniqueLight, AdventProBold;
    position: relative;
    overflow: hidden;
}
.poptitle {
    padding: 1.5% 0%;
    font-size: 18px;
    background: rgb(119, 120, 120);
    font-family: GESSUniqueBold, AdventProBold;
}
.popbody {
    text-align: right;
    overflow-y: auto;
    height: 54vh;
    padding: 0% 3%;
    direction: rtl;
    margin: 3% 3%;
    font-size: 14px;
    line-height: 1.9;
}
body.i18n-en .popbody {
    direction: ltr;
    text-align: left;
}
.popbody::-webkit-scrollbar { width: 0.5em; }
.popbody::-webkit-scrollbar-thumb {
    background-color: rgb(119, 120, 120);
    -webkit-box-shadow: inset 0 0 6px rgb(59, 59, 59);
}
.popbody::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 7px rgb(0, 0, 0);
}
.popclose {
    cursor: pointer;
    background: rgb(119, 120, 120);
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 1% 0;
    font-family: GESSUniqueBold, AdventProBold;
    letter-spacing: 1px;
}
.popclose:hover { background: rgb(95, 96, 96); }

@media (max-width: 1024px) {
    .popupinside { width: 70%; }
}
@media (max-width: 484px) {
    .popupinside { width: 90%; }
    .popbody { font-size: 13px; height: 50vh; }
}