/* =========================================================
   Science Oasis Schools — shared identity (header, footer, tokens)
   Loaded by MasterEn.Master after the vendor theme.
   Primary green sampled from the emblem (#154A20).
   All component classes are prefixed "os-" so they never clash with
   the Bootstrap/EduAdmin classes still used by the inner pages.
   ========================================================= */
:root {
    --os-green: #154a20;
    --os-green-900: #0b2912;
    --os-green-700: #1f6230;
    --os-green-100: #e3ece4;
    --os-sand: #d8b26a;
    --os-sand-200: #f1e4c6;
    --os-cream: #f7f3ea;
    --os-ink: #0f2414;
    --os-muted: #5d6b60;
    --os-line: #d9dfd6;
    --os-r: 28px;
    --os-ease: cubic-bezier(.2,.8,.2,1);
    --os-f-head: 'Alexandria', sans-serif;
    --os-f-body: 'IBM Plex Sans Arabic', 'Alexandria', sans-serif;
}

html { scroll-behavior: smooth; overflow-x: clip; }
body.os { background: var(--os-cream); color: var(--os-ink); overflow-x: clip; }
body.os, .os p, .os li, .os a, .os label, .os input, .os textarea, .os select, .os button, .os td, .os th {
    font-family: var(--os-f-body) !important;
}
.os h1, .os h2, .os h3, .os h4, .os h5, .os h6 { font-family: var(--os-f-head) !important; }

/* Hide the template cookie banner (was in the old master) */
#gdpr-cookie-message { display: none !important; }

/* ---------- Inner pages: re-skin the template to the emblem palette ---------- */
.theme-primary a:hover, .theme-primary a:focus { color: var(--os-green-700); }
.theme-primary .text-primary, .main-color { color: var(--os-green) !important; }
.text-fade, .side-color { color: var(--os-muted) !important; }
.theme-primary .bg-primary { background-color: var(--os-green) !important; color: #fff; }
.bg-dark, .bg-dark3 { background-color: var(--os-green-900) !important; color: #fff !important; }
.theme-primary .btn-primary {
    background-color: var(--os-green); border-color: var(--os-green); color: #fff; border-radius: 999px;
}
.theme-primary .btn-primary:hover, .theme-primary .btn-primary:focus {
    background-color: var(--os-sand) !important; border-color: var(--os-sand) !important; color: var(--os-green-900) !important;
}
form p { margin-bottom: 10px; text-align: unset !important; }

/* ---------- Buttons ---------- */
.os a.os-btn, .os .os-btn {
    display: inline-flex; align-items: center; gap: .6em; background: var(--os-green); color: #fff;
    padding: .7em 1.4em; border-radius: 999px; font-family: var(--os-f-head) !important; font-weight: 500;
    font-size: .95rem; line-height: 1.4; transition: color .35s var(--os-ease); position: relative;
    overflow: hidden; isolation: isolate; border: 0; text-decoration: none; white-space: nowrap;
}
.os .os-btn::before {
    content: ""; position: absolute; inset: 0; background: var(--os-sand); transform: translateY(101%);
    transition: transform .4s var(--os-ease); z-index: -1; border-radius: inherit;
}
.os a.os-btn:hover, .os a.os-btn:focus { color: var(--os-green-900); }
.os .os-btn:hover::before { transform: none; }
.os .os-btn-lg { padding: .95em 1.8em; font-size: 1.05rem; }
.os a.os-btn-sand { background: var(--os-sand); color: var(--os-green-900); }
.os .os-btn-sand::before { background: #fff; }
.os-arrow { display: inline-block; transition: transform .35s var(--os-ease); }
.os .os-btn:hover .os-arrow { transform: translateX(-5px); }
[dir="ltr"] .os-arrow { transform: scaleX(-1); }
[dir="ltr"] .os .os-btn:hover .os-arrow { transform: scaleX(-1) translateX(-5px); }
.os a.os-ghost {
    display: inline-flex; align-items: center; gap: .5em; font-family: var(--os-f-head) !important; font-weight: 500;
    font-size: .95rem; padding: .6em 1.2em; border-radius: 999px; border: 1.5px solid var(--os-green);
    color: var(--os-green); transition: .3s; text-decoration: none; white-space: nowrap;
}
.os a.os-ghost:hover { background: var(--os-green); color: #fff; }
.os a.os-ghost.os-light { border-color: rgba(255,255,255,.5); color: #fff; }
.os a.os-ghost.os-light:hover { background: #fff; color: var(--os-green); }

/* ---------- Header ---------- */
.os-header {
    position: fixed; top: 16px; inset-inline: 16px; z-index: 1000; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; padding: 8px 10px; padding-inline-start: 16px;
    background: rgba(247,243,234,.82); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(21,74,32,.1); border-radius: 999px; transition: top .4s var(--os-ease), box-shadow .4s var(--os-ease);
}
.os-header.os-scrolled { box-shadow: 0 10px 40px -12px rgba(11,41,18,.25); top: 10px; }
.os a.os-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.os-brand img { width: 42px; height: 50px; object-fit: contain; mix-blend-mode: multiply; }
.os-brand span { display: flex; flex-direction: column; line-height: 1.2; }
.os-brand b { font-family: var(--os-f-head); font-size: 1.05rem; color: var(--os-green); }
.os-brand small { font-size: .68rem; color: var(--os-muted); letter-spacing: .02em; }

.os-menu-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.os-menu-list > li { position: relative; }
.os .os-menu-list a {
    display: flex; align-items: center; gap: 6px; font-family: var(--os-f-head) !important; font-size: .88rem;
    padding: .55em .85em; border-radius: 999px; color: var(--os-ink); text-decoration: none; white-space: nowrap; transition: .25s;
}
.os .os-menu-list > li > a:hover, .os .os-menu-list > li.os-open > a { background: var(--os-green-100); color: var(--os-green); }
.os-chev { font-size: .6rem; opacity: .6; transition: transform .3s; }
.os-dd:hover .os-chev, .os-dd.os-open .os-chev { transform: rotate(180deg); }
.os-dd-menu {
    position: absolute; top: calc(100% + 12px); inset-inline-start: 0; min-width: 240px; list-style: none; margin: 0;
    padding: 8px; background: #fff; border-radius: 20px; box-shadow: 0 24px 50px -20px rgba(11,41,18,.35);
    border: 1px solid var(--os-line); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .3s var(--os-ease);
}
.os-dd-menu::before { content: ""; position: absolute; inset: -14px 0 auto 0; height: 14px; }
.os-dd:hover > .os-dd-menu, .os-dd.os-open > .os-dd-menu { opacity: 1; visibility: visible; transform: none; }
.os .os-dd-menu a { border-radius: 12px; padding: .6em .9em; font-size: .88rem; white-space: normal; text-align: start !important; justify-content: flex-start; }
.os .os-dd-menu a:hover { background: var(--os-cream); color: var(--os-green); }
.os-menu-extra { display: none; }

.os-tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.os a.os-lang {
    font-family: var(--os-f-head) !important; font-size: .8rem; font-weight: 700; height: 40px; padding: 0 14px;
    display: inline-flex; align-items: center; border-radius: 999px; border: 1.5px solid var(--os-line); color: var(--os-ink); text-decoration: none;
}
.os a.os-lang:hover { border-color: var(--os-green); color: var(--os-green); }
.os-account { display: flex; gap: 4px; }
.os .os-account a { font-family: var(--os-f-head) !important; font-size: .85rem; color: var(--os-green); padding: .4em .7em; text-decoration: none; }
.os-burger {
    display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--os-green); cursor: pointer;
    flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0;
}
.os-burger i { display: block; width: 18px; height: 2px; background: #fff; transition: .3s; }
.os-header.os-menu-open .os-burger i:first-child { transform: translateY(4px) rotate(45deg); }
.os-header.os-menu-open .os-burger i:last-child { transform: translateY(-4px) rotate(-45deg); }
.os-hidden-ctl { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Drawer mode (tablets & phones) */
@media (max-width: 1279px) {
    .os-burger { display: flex; }
    .os-menu {
        position: absolute; top: calc(100% + 10px); inset-inline: 0; background: var(--os-cream); border-radius: 26px;
        padding: 14px; box-shadow: 0 24px 60px -20px rgba(11,41,18,.4); max-height: calc(100vh - 110px); overflow-y: auto;
        opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .35s var(--os-ease);
    }
    .os-header.os-menu-open .os-menu { opacity: 1; visibility: visible; transform: none; }
    .os-menu-list { flex-direction: column; align-items: stretch; }
    .os .os-menu-list a { font-size: 1rem; padding: .75em 1em; justify-content: space-between; }
    .os-dd-menu {
        position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: transparent;
        padding: 0 12px; display: none; min-width: 0;
    }
    .os-dd:hover > .os-dd-menu { display: none; }
    .os-dd.os-open > .os-dd-menu { display: block; }
    .os-dd:hover .os-chev { transform: none; }
    .os-dd.os-open .os-chev { transform: rotate(180deg); }
    .os-menu-extra { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 12px; padding: 14px 16px 4px; border-top: 1px solid var(--os-line); font-size: .9rem; color: var(--os-muted); }
    .os-menu-extra i { color: var(--os-green); margin-inline-end: 6px; }
    .os-account { display: none; }
}
.os a.os-lang-m { display: none; }
@media (max-width: 640px) {
    .os-header { inset-inline: 10px; top: 10px; }
    .os .os-tools a.os-lang { display: none; }
    .os .os-header a.os-btn { padding: .6em 1.1em; font-size: .85rem; }
    .os-brand small { display: none; }
    .os .os-menu-extra a.os-lang-m { display: inline-flex; }
}

/* ---------- Floating buttons ---------- */
.os-rail {
    position: fixed; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); z-index: 900; display: flex; flex-direction: column;
    gap: 8px; padding: 8px; background: rgba(247,243,234,.85); backdrop-filter: blur(10px); border-radius: 999px; border: 1px solid var(--os-line);
}
.os .os-rail a {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--os-green); font-size: .95rem; transition: .3s; text-decoration: none;
}
.os .os-rail a:hover { background: var(--os-green); color: var(--os-sand); }
.os a.os-whatsapp {
    position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 900; width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center; background: #25d366; color: #fff; font-size: 1.7rem; text-decoration: none;
    box-shadow: 0 14px 30px -10px rgba(37,211,102,.7); transition: transform .3s var(--os-ease);
}
.os a.os-whatsapp:hover { transform: scale(1.08); color: #fff; }
@media (max-width: 900px) { .os-rail { display: none; } }

/* ---------- Footer ---------- */
.os-foot { background: var(--os-green-900); color: rgba(247,243,234,.8); padding: 90px 6vw 30px; position: relative; overflow: hidden; }
.os-foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: 40px; position: relative; z-index: 1; }
.os-foot-logo { width: 84px; height: 96px; background: var(--os-cream); border-radius: 20px 20px 42px 42px; display: grid; place-items: center; margin-bottom: 18px; }
.os-foot-logo img { width: 60px; mix-blend-mode: multiply; }
.os .os-foot-brand h4 { color: var(--os-cream); font-size: 1.1rem; margin: 0 0 4px; }
.os-foot-brand small { display: block; font-size: .8rem; opacity: .6; margin-bottom: 14px; }
.os-foot-about { font-size: .9rem; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.os .os-foot h5 { font-size: 1rem; color: var(--os-sand); margin: 0 0 18px; }
.os .os-foot-grid a { display: block; padding: 4px 0; color: rgba(247,243,234,.8); text-decoration: none; transition: .25s; }
.os .os-foot-grid a:hover { color: var(--os-sand); padding-inline-start: 6px; }
.os-foot-contact { list-style: none; margin: 0 0 20px; padding: 0; }
.os-foot-contact li { display: flex; gap: 12px; padding: 5px 0; font-size: .92rem; }
.os-foot-contact i { color: var(--os-sand); margin-top: 6px; width: 14px; }
.os-socials { display: flex; flex-wrap: wrap; gap: 10px; }
.os .os-socials a {
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; padding: 0;
    border: 1px solid rgba(247,243,234,.2); transition: .3s;
}
.os .os-socials a:hover { background: var(--os-sand); color: var(--os-green-900); border-color: var(--os-sand); padding: 0; }
.os-foot-bottom {
    margin-top: 60px; padding-top: 24px; border-top: 1px solid rgba(247,243,234,.12); font-size: .85rem; position: relative; z-index: 1;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.os .os-foot-bottom a { color: rgba(247,243,234,.6); text-decoration: none; }
.os .os-foot-bottom a:hover { color: var(--os-sand); }
.os-foot-rays { position: absolute; width: 700px; height: 455px; color: #fff; opacity: .04; bottom: -90px; inset-inline-start: -120px; pointer-events: none; }
@media (max-width: 1000px) { .os-foot-grid { grid-template-columns: 1fr 1fr; } }
.os a.os-lang-m { display: none; }
@media (max-width: 640px) {
    .os-foot { padding: 70px 16px 90px; }
    .os-foot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .os *, .os *::before, .os *::after { animation: none !important; transition: none !important; }
}