/* ============================================================
   MODERN FRONTEND THEME OVERLAY — Ramom School CMS
   Loaded after style.css. Restyles: top bar, header, menu,
   dropdowns, news ticker, footer, social, copyright, back-to-top.
   Color-agnostic: works with CMS theme colors (--thm-primary etc).
   ============================================================ */

/* ---------- Base polish ---------- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection {
    background: var(--thm-primary);
    color: #fff;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #eef1f6; }
::-webkit-scrollbar-thumb {
    background: #b9c2d0;
    border-radius: 8px;
    border: 2px solid #eef1f6;
}
::-webkit-scrollbar-thumb:hover { background: var(--thm-primary); }

/* ---------- Top bar ---------- */
.top-bar {
    background-image: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.05) 45%, rgba(0,0,0,.22));
    font-size: 13px;
    letter-spacing: .2px;
    box-shadow: none;
    position: relative;
    z-index: 1000;
}
.top-bar .fa, .top-bar .fas, .top-bar .far {
    opacity: .92;
}
.top-bar li a {
    transition: opacity .25s ease;
    opacity: .95;
}
.top-bar li a:hover {
    opacity: 1;
    text-decoration: none !important;
}

/* ---------- Menu bar (stricky) ---------- */
.stricky {
    background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.06)) !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    position: relative;
    z-index: 999;
}
.stricky.stricky-fixed {
    background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.04)) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .16);
    backdrop-filter: saturate(1.4);
    -webkit-backdrop-filter: saturate(1.4);
}
#nav.navbar {
    margin-top: 14px;
    padding: 0 0 14px;
}
#nav .navbar-brand {
    display: flex;
    align-items: center;
    padding: 4px 0;
    transition: transform .3s ease;
}
#nav .navbar-brand:hover { transform: scale(1.03); }
#nav .navbar-brand img {
    max-height: 62px;
    filter: drop-shadow(0 2px 6px rgba(15,23,42,.18));
}

/* ---------- Menu links with animated underline ---------- */
#nav .nav-link {
    position: relative;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .3px;
    padding: 10px 14px !important;
    transition: color .25s ease;
}
#nav .nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--thm-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
#nav .nav-item:hover > .nav-link::after,
#nav .nav-item.active > .nav-link::after,
#nav .nav-item > .nav-link:focus-visible::after {
    transform: scaleX(1);
}
#nav .nav-item.active > .nav-link {
    color: var(--thm-primary) !important;
}
#nav .arrow:after {
    transition: transform .25s ease;
    display: inline-block;
}
#nav .nav-item.dropdown:hover .arrow:after {
    transform: rotate(180deg);
}

/* ---------- Login / dashboard button ---------- */
@media (min-width: 992px) {
    #nav .navbar-nav > li.m-login {
        display: list-item;
        visibility: visible;
    }
    #nav .m-login .btn-black {
        display: inline-flex;
        align-items: center;
        margin-left: 14px;
    }
}
#nav .m-login .btn-black,
.btn-black {
    background-image: linear-gradient(135deg, #1f2937, #0f172a);
    color: #fff;
    border: none;
    padding: 10px 26px;
    border-radius: 40px;
    font-weight: 600;
    letter-spacing: .4px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .22);
    transition: transform .25s ease, box-shadow .25s ease;
}
#nav .m-login .btn-black:hover,
.btn-black:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .30);
    color: #fff;
}

/* ---------- Dropdown menus ---------- */
#nav .dropdown-menu {
    border: none;
    border-radius: 14px;
    padding: 8px;
    min-width: 240px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18) !important;
    border-top: 3px solid var(--thm-primary);
    transform: translateY(14px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
#nav li.dropdown:hover > .dropdown-menu,
#nav li.dropdown .dropdown-menu:hover {
    transform: translateY(0);
}
#nav .dropdown-menu > .dropdown-item {
    border-radius: 9px;
    margin: 2px 0;
    border-bottom: none;
    font-size: 14px;
    font-weight: 500;
    padding: 10px 14px 10px 30px;
    transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
#nav .dropdown-menu a.dropdown-item:before {
    left: 14px;
    top: 15px;
    color: var(--thm-primary);
    opacity: .55;
    transition: opacity .2s ease;
}
#nav .dropdown-menu > .dropdown-item:hover {
    padding-left: 34px;
}
#nav .dropdown-menu a.dropdown-item:hover:before {
    opacity: 1;
}

/* ---------- Mobile menu ---------- */
#nav .navbar-toggler {
    border: 1.5px solid rgba(0,0,0,.12) !important;
    border-radius: 9px;
    padding: 7px 11px !important;
    color: #313131;
    transition: background .25s ease;
}
#nav .navbar-toggler:hover {
    background: rgba(0,0,0,.05);
}
@media (max-width: 991.98px) {
    #nav {
        margin-top: 8px;
        padding-bottom: 8px;
        position: relative;
    }
    #nav .navbar-collapse {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 1050;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 18px 45px rgba(15, 23, 42, .22);
        padding: 16px 14px;
        margin-top: 0;
        max-height: 70vh;
        overflow-y: auto;
        border: 1px solid rgba(15, 23, 42, .06);
    }
    #nav .navbar-collapse.show {
        animation: menuSlideDown .3s ease;
    }
    #nav .nav-link {
        padding: 12px 14px !important;
        border-radius: 9px;
    }
    #nav .nav-link::after { display: none; }
    #nav .nav-item:hover > .nav-link,
    #nav .nav-item.active > .nav-link {
        background: rgba(0, 0, 0, .05);
        color: var(--thm-primary) !important;
    }
    #nav .dropdown-menu {
        box-shadow: none !important;
        transform: none;
        border-top: none;
        border-left: 2.5px solid var(--thm-primary);
        border-radius: 0 12px 12px 0;
        margin: 0 0 6px 8px;
        background: #f8fafc;
        opacity: 1;
        visibility: visible;
        position: static;
        display: none;
    }
    #nav li.dropdown.open > .dropdown-menu,
    #nav li.dropdown:hover > .dropdown-menu {
        display: block;
    }
    #nav .m-login .btn-black {
        margin-top: 10px;
        width: 100%;
    }
}
@keyframes menuSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Latest news ticker ---------- */
.latest--news {
    background-image: linear-gradient(90deg, #0a1226 0%, #16244d 55%, #0a1226 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.latest--news .latest-title {
    background-image: linear-gradient(135deg, var(--thm-primary), var(--thm-hover, var(--thm-primary)));
    border-radius: 0 0 12px 12px;
    padding: 6px 16px;
    font-weight: 700;
    letter-spacing: .6px;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .35);
    margin-right: 18px;
}
.latest--news .latest-title i {
    animation: boltPulse 2.2s ease-in-out infinite;
    display: inline-block;
}
@keyframes boltPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.86); }
}
.latest--news .news-updates-list a {
    opacity: .95;
    transition: opacity .2s ease;
}
.latest--news .news-updates-list a:hover { opacity: 1; }
.latest--news .date-text {
    color: #9ae6a8;
    background: rgba(74, 222, 128, .12);
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 12px;
}
.latest--news .current-date .date-now {
    color: rgba(255, 255, 255, .82);
    padding: 2px 10px;
    border-radius: 20px;
}

/* ---------- Footer ---------- */
.footer-area {
    position: relative;
    overflow: hidden;
}
.footer-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(10, 18, 38, .36) 0%, rgba(10, 18, 38, .20) 45%, rgba(10, 18, 38, .58) 100%);
    pointer-events: none;
}
.footer-area > .container {
    position: relative;
    z-index: 1;
}
.footer-area h4 {
    font-weight: 700;
    letter-spacing: .4px;
    padding-bottom: 16px;
}
.footer-area h4::after {
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background-image: linear-gradient(90deg, var(--thm-primary), rgba(255,255,255,.25));
}
.footer-area .footer-logo img {
    filter: drop-shadow(0 3px 10px rgba(0,0,0,.35));
}
.footer-area .footer-dec {
    line-height: 1.75;
    opacity: .92;
}
.footer-area .address-list li i {
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    transition: background .25s ease, transform .25s ease;
}
.footer-area .address-list li:hover i {
    background: var(--thm-primary);
    transform: translateY(-3px);
}
.footer-area .address-list li.address i {
    background-image: linear-gradient(135deg, var(--thm-primary), rgba(255,255,255,.18));
}
.footer-area .quick-links li a,
.footer-area li a {
    transition: padding-left .22s ease, opacity .22s ease;
    display: inline-block;
}
.footer-area .quick-links li a .fa,
.footer-area .quick-links li a .fas {
    transition: transform .22s ease;
}
.footer-area .quick-links li a:hover .fa,
.footer-area .quick-links li a:hover .fas {
    transform: translateX(4px);
}
.footer-area .footer-select .select2-container--default .select2-selection--single {
    border-radius: 10px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    height: 42px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
    transition: border-color .25s ease, background .25s ease;
}
.footer-area .footer-select .select2-container--default:hover .select2-selection--single {
    border-color: var(--thm-primary);
    background: rgba(255, 255, 255, .12);
}
.footer-area .footer-select .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #eef2fa;
    line-height: 40px;
    padding-left: 14px;
    padding-right: 40px;
}
.footer-area .footer-select .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    width: 36px;
}
.footer-area .footer-select .select2-container--default .select2-selection__arrow b {
    border-color: #eef2fa transparent transparent transparent;
}
.footer-area .footer-select .select2-container--default.select2-container--open .select2-selection__arrow b {
    border-color: transparent transparent #eef2fa transparent;
}
.select2-container--default .select2-dropdown {
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 14px 32px rgba(15, 23, 42, .18);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--thm-primary);
    color: #fff;
}

/* ---------- Social icons (brand hovers) ---------- */
.social li a {
    width: 38px;
    height: 38px;
    line-height: 36px;
    border-radius: 50%;
    font-size: 15px;
    margin-right: 8px;
    margin-bottom: 6px;
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.social li a:hover {
    transform: translateY(-4px);
    border-color: transparent;
}
.social li a .fa-facebook-f:hover, .social li a:has(.fa-facebook-f):hover { background: #1877f2; }
.social li a:has(.fa-twitter):hover { background: #1da1f2; }
.social li a:has(.fa-youtube):hover { background: #ff0000; }
.social li a:has(.fa-google-plus-g):hover { background: #db4437; }
.social li a:has(.fa-linkedin-in):hover { background: #0a66c2; }
.social li a:has(.fa-instagram):hover {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social li a:has(.fa-pinterest-p):hover { background: #e60023; }

/* ---------- Copyright bar ---------- */
.copyright {
    border-top: 1px solid rgba(255,255,255,.09);
    letter-spacing: .5px;
    font-size: 13.5px;
}
.copyright a { transition: color .2s ease; }

/* ---------- Back to top ---------- */
.back-to-top {
    width: 46px;
    height: 46px;
    line-height: 48px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, var(--thm-primary), var(--thm-hover, var(--thm-primary)));
    box-shadow: 0 10px 24px rgba(15, 23, 42, .30);
    transition: bottom .3s ease, opacity .3s ease, transform .25s ease, box-shadow .25s ease;
}
.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, .38);
}

/* ---------- WhatsApp button polish ---------- */
.whatsapp-popup .whatsapp-button {
    box-shadow: 0 8px 20px rgba(37, 211, 102, .45);
    transition: transform .25s ease, box-shadow .25s ease;
}
.whatsapp-popup .whatsapp-button:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 26px rgba(37, 211, 102, .55);
}

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
    #nav .nav-link::after,
    #nav .dropdown-menu,
    .social li a,
    .back-to-top,
    .latest--news .latest-title i {
        transition: none !important;
        animation: none !important;
    }
}