/* ===========================================================
   ROSEBANK INTERNATIONAL ACADEMY — CORE STYLESHEET
   Mobile-first. Colors come from CSS variables set in header.php
   (pulled from the settings table, derived from the school logo).
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
    --primary: #152B6B;
    --secondary: #D22B2B;
    --accent: #F5A623;
    --text-dark: #1a1a1a;
    --text-light: #6b7280;
    --bg-grey: #f7f7fa;
    --white: #ffffff;
    --radius: 10px;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --container: 1200px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
    font-family:'Montserrat', system-ui, -apple-system, sans-serif;
    color:var(--text-dark);
    line-height:1.6;
    overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block;}
a{text-decoration:none; color:inherit;}
.container{max-width:var(--container); margin:0 auto; padding:0 1.25rem;}

/* ---------- Buttons ---------- */
.btn{
    display:inline-block; padding:0.75rem 1.5rem; border-radius:var(--radius);
    font-weight:600; font-size:0.95rem; transition:transform .15s, box-shadow .15s;
    border:2px solid transparent; cursor:pointer;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.btn-primary{background:var(--primary); color:#fff;}
.btn-accent{background:var(--accent); color:#1a1a1a;}
.btn-outline{border-color:var(--primary); color:var(--primary);}
.btn-whatsapp{background:#25D366; color:#fff;}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:100; background:#fff; box-shadow:0 4px 24px rgba(15,23,42,0.08);}
.header-top{background:linear-gradient(90deg, var(--primary), #0d1b4c); color:#fff; font-size:0.78rem;}
.header-top-inner{display:flex; justify-content:space-between; padding:0.5rem 0; flex-wrap:wrap; gap:0.5rem;}
.header-top-inner a{color:#fff; opacity:0.9; transition:opacity .15s;}
.header-top-inner a:hover{opacity:1;}
.contact-line span{margin-right:1.5rem; letter-spacing:0.01em;}
.social-line a{margin-left:0.85rem; font-weight:500;}

.header-main{display:flex; align-items:center; justify-content:space-between; padding:0.6rem 1rem; gap:0.75rem; border-bottom:1px solid #f0f1f5;}
.brand{display:flex; align-items:center; gap:0.6rem; min-width:0; flex-shrink:0; overflow:hidden;}
.brand-logo{
    height:auto; width:auto; max-height:40px; max-width:130px;
    object-fit:contain; flex-shrink:0; display:block;
}
.brand-text{min-width:0;}
.brand-text strong{
    display:block; color:var(--primary); font-size:0.98rem; font-weight:800;
    line-height:1.25; letter-spacing:-0.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-text small{
    display:block; color:var(--secondary); font-size:0.66rem; font-style:italic; font-weight:600;
    text-transform:uppercase; letter-spacing:0.05em; margin-top:0.1rem;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.main-nav{display:none; gap:1.5rem; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.main-nav a{
    font-weight:600; color:var(--text-dark); font-size:0.9rem; padding:0.5rem 0;
    position:relative; letter-spacing:0.01em;
}
.main-nav a::after{
    content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
    background:var(--secondary); transition:width .2s ease;
}
.main-nav a:hover{color:var(--primary);}
.main-nav a:hover::after{width:100%;}
.dropdown{position:relative;}
.dropdown-menu{display:none; position:absolute; top:100%; left:0; background:#fff; box-shadow:0 8px 30px rgba(15,23,42,0.12); border-radius:8px; padding:0.5rem 0; min-width:170px; border-top:3px solid var(--secondary);}
.dropdown:hover .dropdown-menu{display:block;}
.dropdown-menu a{display:block; padding:0.55rem 1.1rem; font-size:0.88rem;}
.dropdown-menu a::after{display:none;}
.dropdown-menu a:hover{background:var(--bg-grey);}

/* Parent/Student and Staff/Teacher portal links stand apart from the
   regular content nav — a divider, then solid accent-colored pills with
   icons, so they read as a distinct "log in" zone rather than blending
   into the list of content pages the way plain outline links would. */
.nav-divider{width:1px; height:22px; background:#e5e7eb; margin:0 0.25rem;}
.nav-portal-link{
    display:inline-flex !important; align-items:center; gap:0.35rem;
    font-size:0.78rem !important; font-weight:800 !important; padding:0.5rem 1rem !important;
    border:none; border-radius:20px; background:var(--accent); color:var(--primary) !important;
    white-space:nowrap; box-shadow:0 2px 10px rgba(245,166,35,0.4);
    transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.nav-portal-link::after{display:none;}
.nav-portal-link:hover{background:var(--primary); color:#fff !important; transform:translateY(-1px); box-shadow:0 6px 16px rgba(21,43,107,0.35);}

.header-actions{display:flex; align-items:center; gap:0.6rem; flex-shrink:0;}
.header-actions .btn{padding:0.6rem 1.1rem; font-size:0.85rem; font-weight:700; letter-spacing:0.01em; white-space:nowrap;}
.mobile-nav-ctas{display:none;}

/* Animated hamburger → X */
.mobile-menu-toggle{
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    background:var(--bg-grey); border:none; border-radius:8px; cursor:pointer;
    width:42px; height:42px; flex-shrink:0; transition:background .15s;
}
.mobile-menu-toggle:hover{background:#eceef3;}
.mobile-menu-toggle span{width:20px; height:2px; background:var(--primary); border-radius:2px; transition:transform .2s ease, opacity .2s ease;}
.mobile-menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.mobile-menu-toggle.active span:nth-child(2){opacity:0;}
.mobile-menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:399px){
    .brand-logo{max-height:32px; max-width:96px;}
}

@media (max-width:699px){
    .header-top{display:none;}
}

@media (max-width:959px){
    .desktop-cta{display:none;}
    .brand-text{display:none;}
    .brand-logo{max-height:42px; max-width:140px;}
}

@media (min-width:960px){
    .main-nav{display:flex;}
    .mobile-menu-toggle{display:none;}
    .header-main{padding:0.9rem 1.25rem;}
    .brand-logo{max-height:56px; max-width:210px;}
    .brand-text strong{font-size:1.2rem; max-width:none;}
    .brand-text small{font-size:0.74rem; max-width:none;}
}

@media (min-width:960px) and (max-width:1199px){
    .main-nav{gap:0.85rem;}
    .main-nav a{font-size:0.82rem;}
    .nav-divider{margin:0;}
    .nav-portal-link{padding:0.4rem 0.7rem !important; font-size:0.7rem !important;}
    .header-actions .btn{padding:0.5rem 0.8rem; font-size:0.78rem;}
}

.main-nav.open{
    display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0;
    background:#fff; padding:0.5rem 0 1rem; box-shadow:0 12px 30px rgba(15,23,42,0.15);
    border-radius:0 0 12px 12px; max-height:85vh; overflow-y:auto;
}
.main-nav.open a{padding:0.85rem 1.25rem; border-bottom:1px solid #f3f4f6; font-size:0.95rem;}
.main-nav.open a::after{display:none;}
.main-nav.open .nav-divider{width:auto; height:1px; background:#e5e7eb; margin:0.5rem 1.25rem;}
.main-nav.open .nav-portal-link{
    align-self:flex-start; margin:0.35rem 1.25rem; border-bottom:none !important;
}
.main-nav.open .dropdown-menu{
    display:block; position:static; box-shadow:none; border-top:none; border-radius:0;
    background:var(--bg-grey); padding:0;
}
.main-nav.open .dropdown-menu a{padding-left:2.25rem; font-size:0.88rem; border-bottom:1px solid #e5e7eb;}
.mobile-nav-ctas{
    display:flex; flex-direction:column; gap:0.6rem; padding:1rem 1.25rem 0.25rem;
}
.mobile-nav-ctas .btn{text-align:center;}
body.nav-open{overflow:hidden;}

/* ---------- Hero ---------- */
.hero-slider{position:relative; min-height:60vh; overflow:hidden; background:var(--primary);}
.hero-slide{
    position:relative; min-height:60vh; background-size:cover; background-position:center; background-repeat:no-repeat;
    display:flex; align-items:center; opacity:0; transition:opacity .6s ease; position:absolute; inset:0;
}
.hero-slide.active{opacity:1; position:relative;}
.hero-placeholder{background:linear-gradient(135deg, var(--primary), var(--secondary)); color:#fff;}
.hero-overlay{position:absolute; inset:0; background:rgba(10,15,40,0.45);}
.hero-content{position:relative; z-index:2; color:#fff; max-width:640px; padding:3rem 1.25rem;}
.hero-content h1{font-size:1.9rem; margin-bottom:0.75rem; line-height:1.25;}
.hero-content p{margin-bottom:1.25rem; font-size:1rem;}
.hero-dots{position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:3;}
.dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.5); cursor:pointer;}
.dot.active{background:#fff;}
.admin-hint{position:absolute; bottom:0.5rem; right:1rem; font-size:0.7rem; color:rgba(255,255,255,0.7); z-index:3;}
@media (min-width:768px){
    .hero-content h1{font-size:2.8rem;}
    .hero-slide{background-size:contain; background-color:var(--primary); min-height:70vh;}
}

/* ---------- Sections ---------- */
.section{padding:3.5rem 0;}
.section-grey{background:var(--bg-grey);}
.section-heading{text-align:center; margin-bottom:2rem;}
.eyebrow{color:var(--secondary); font-weight:700; text-transform:uppercase; font-size:0.8rem; letter-spacing:0.08em;}
.section-heading h2{color:var(--primary); font-size:1.6rem; margin-top:0.4rem;}

.two-col{display:grid; grid-template-columns:1fr; gap:2rem; align-items:center;}
@media (min-width:800px){ .two-col{grid-template-columns:1fr 1fr;} }
.about-image img{border-radius:var(--radius); box-shadow:var(--shadow);}

.card-grid{display:grid; grid-template-columns:1fr; gap:1.5rem;}
@media (min-width:600px){ .card-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .card-grid{grid-template-columns:repeat(3,1fr);} }

.school-card, .news-card{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .15s;}
.school-card:hover, .news-card:hover{transform:translateY(-4px);}
.school-card img, .news-card img{height:180px; object-fit:cover; width:100%;}
.school-card-body, .news-card-body{padding:1.1rem;}
.link-arrow{color:var(--primary); font-weight:600; font-size:0.9rem;}

.feature-grid{display:grid; grid-template-columns:1fr; gap:1.5rem;}
@media (min-width:600px){ .feature-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:960px){ .feature-grid{grid-template-columns:repeat(4,1fr);} }
.feature-item{background:#fff; border-left:4px solid var(--accent); border-radius:8px; padding:1.25rem; box-shadow:var(--shadow);}
.feature-item h3{color:var(--primary); margin-bottom:0.5rem; font-size:1.05rem;}

.facility-card{text-align:center; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
.facility-card img{height:150px; object-fit:cover;}
.facility-card h4{padding:0.75rem;}

.event-card{display:flex; gap:1rem; background:#fff; padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow); align-items:center;}
.event-date{background:var(--primary); color:#fff; padding:0.6rem 0.9rem; border-radius:8px; font-weight:700; text-align:center; min-width:64px;}

.testimonial-grid{display:grid; grid-template-columns:1fr; gap:1.5rem;}
@media (min-width:768px){ .testimonial-grid{grid-template-columns:repeat(3,1fr);} }
.testimonial-card{background:#fff; padding:1.5rem; border-radius:var(--radius); box-shadow:var(--shadow);}
.testimonial-card strong{display:block; margin-top:0.75rem; color:var(--primary);}
.testimonial-card span{font-size:0.85rem; color:var(--text-light);}

.cta-band{background:var(--secondary); color:#fff; text-align:center; padding:3rem 1.25rem;}
.cta-band h2{margin-bottom:1.25rem; font-size:1.5rem;}

.map-embed iframe{width:100%; min-height:280px; border:0; border-radius:var(--radius);}

/* ---------- Footer ---------- */
.site-footer{background:#0d1b4c; color:#e5e7eb; padding-top:3rem;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:2rem; padding-bottom:2rem;}
@media (min-width:768px){ .footer-grid{grid-template-columns:repeat(4,1fr);} }
.footer-grid h4{color:#fff; margin-bottom:0.85rem;}
.footer-grid a{display:block; margin-bottom:0.5rem; color:#cbd5e1; font-size:0.9rem;}
.footer-social a{display:inline-block; margin-right:0.75rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); padding:1rem 0; text-align:center; font-size:0.8rem; color:#94a3b8;}

.back-to-top{
    position:fixed; bottom:1.5rem; right:1.5rem; width:44px; height:44px; border-radius:50%;
    background:var(--primary); color:#fff; border:none; font-size:1.1rem; cursor:pointer;
    display:none; box-shadow:var(--shadow); z-index:50;
}
.back-to-top.visible{display:block;}

/* ---------- Rich text / inner pages ---------- */
.rich-text p{margin-bottom:1rem;}
.rich-text ul, .rich-text ol{margin:0 0 1rem 1.25rem;}
.page-hero{background:linear-gradient(135deg, var(--primary), #0d1b4c); color:#fff; padding:3rem 0; text-align:center;}
.page-hero h1{font-size:1.9rem; margin-top:0.4rem;}
.page-hero .eyebrow{color:var(--accent);}
.info-list{list-style:none;}
.info-list li{padding:0.5rem 0; border-bottom:1px solid #e5e7eb; display:flex; gap:0.5rem;}
.info-list li strong{min-width:140px; color:var(--primary);}

/* ---------- Forms (admissions / contact) ---------- */
.form-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.75rem; max-width:760px; margin:0 auto;}
.form-row{display:grid; grid-template-columns:1fr; gap:1rem;}
@media (min-width:640px){ .form-row.cols-2{grid-template-columns:1fr 1fr;} }
.form-success{background:#dcfce7; color:#166534; padding:0.85rem 1rem; border-radius:8px; margin-bottom:1.25rem; font-size:0.9rem;}
.section-title-block{margin:1.5rem 0 0.75rem; font-weight:700; color:var(--primary); font-size:0.95rem; text-transform:uppercase; letter-spacing:0.04em;}

/* ---------- News / Gallery listings ---------- */
.filter-bar{display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:2rem;}
.filter-bar a{padding:0.4rem 0.9rem; border-radius:20px; background:#fff; border:1px solid #e5e7eb; font-size:0.85rem;}
.filter-bar a.active, .filter-bar a:hover{background:var(--primary); color:#fff; border-color:var(--primary);}
.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0.75rem;}
@media (min-width:640px){ .gallery-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:960px){ .gallery-grid{grid-template-columns:repeat(4,1fr);} }
.gallery-grid img{border-radius:8px; height:160px; object-fit:cover; width:100%; cursor:pointer; transition:opacity .15s;}
.gallery-grid img:hover{opacity:0.85;}
.empty-state{text-align:center; padding:3rem 1rem; color:var(--text-light);}

/* ---------- Admin tables ---------- */
.admin-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:1.25rem; margin-bottom:1.5rem; overflow-x:auto;}
.admin-table{width:100%; border-collapse:collapse; font-size:0.88rem; min-width:640px;}
.admin-table th{text-align:left; padding:0.6rem 0.75rem; background:var(--bg-grey); color:var(--primary); font-size:0.78rem; text-transform:uppercase;}
.admin-table td{padding:0.6rem 0.75rem; border-bottom:1px solid #eef0f3; vertical-align:top;}
.badge{padding:0.2rem 0.6rem; border-radius:12px; font-size:0.75rem; font-weight:600;}
.badge-new{background:#dbeafe; color:#1e40af;}
.badge-contacted{background:#fef3c7; color:#92400e;}
.badge-processing{background:#e0e7ff; color:#3730a3;}
.badge-accepted{background:#dcfce7; color:#166534;}
.badge-rejected{background:#fee2e2; color:#991b1b;}
.badge-completed{background:#f3f4f6; color:#374151;}
.badge-unread{background:#fee2e2; color:#991b1b;}
.badge-read{background:#f3f4f6; color:#6b7280;}
.admin-filters{display:flex; gap:0.6rem; margin-bottom:1rem; flex-wrap:wrap;}
.admin-filters select, .admin-filters input{padding:0.5rem 0.75rem; border:1px solid #d1d5db; border-radius:8px; font-size:0.85rem;}
.icon-btn{background:none; border:none; cursor:pointer; color:var(--primary); font-size:0.85rem; font-weight:600;}
.pagination{display:flex; gap:0.4rem; margin-top:1rem;}
.pagination a{padding:0.4rem 0.75rem; border:1px solid #e5e7eb; border-radius:6px; font-size:0.85rem;}
.pagination a.active{background:var(--primary); color:#fff; border-color:var(--primary);}

/* ---------- Admin (login + dashboard shared) ---------- */
.admin-body{background:var(--bg-grey); font-family:'Montserrat', system-ui, sans-serif; min-height:100vh;}
.admin-login-wrap{display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1.5rem;}
.admin-login-card{background:#fff; padding:2.25rem; border-radius:var(--radius); box-shadow:var(--shadow); max-width:380px; width:100%;}
.admin-login-card h1{color:var(--primary); font-size:1.3rem; margin-bottom:0.3rem;}
.admin-login-card p{color:var(--text-light); font-size:0.9rem; margin-bottom:1.5rem;}
.form-group{margin-bottom:1rem;}
.form-group label{display:block; font-size:0.85rem; font-weight:600; margin-bottom:0.35rem;}
.form-group input, .form-group select, .form-group textarea{
    width:100%; padding:0.65rem 0.85rem; border:1px solid #d1d5db; border-radius:8px; font-size:0.95rem;
}
.form-error{background:#fee2e2; color:#991b1b; padding:0.65rem 0.85rem; border-radius:8px; font-size:0.85rem; margin-bottom:1rem;}

.admin-layout{display:flex; min-height:100vh;}
.admin-sidebar{width:230px; background:var(--primary); color:#fff; padding:1.5rem 0; flex-shrink:0; display:none;}
.admin-sidebar a{display:block; padding:0.6rem 1.5rem; color:#cbd5e1; font-size:0.9rem;}
.admin-sidebar a:hover, .admin-sidebar a.active{background:rgba(255,255,255,0.08); color:#fff;}
@media (min-width:800px){ .admin-sidebar{display:block;} }
.admin-main{flex:1; padding:1.5rem;}
.admin-topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem;}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
@media (min-width:700px){ .stat-grid{grid-template-columns:repeat(4,1fr);} }
.stat-card{background:#fff; padding:1.25rem; border-radius:var(--radius); box-shadow:var(--shadow);}
.stat-card .num{font-size:1.6rem; font-weight:700; color:var(--primary);}
.stat-card .label{font-size:0.8rem; color:var(--text-light);}