/*
Theme Name: Schools Question & CBT Portal
Description: Custom theme for the multi-school question/CBT portal, matching the approved landing page design. Built to pair with the Schools CBT Engine plugin.
Version: 1.0.0
Author: RIGS / James
*/

:root{
    --navy:#1f3d3a;
    --navy-light:#2f5850;
    --paper:#f6f7f5;
    --card:#ffffff;
    --line:#dde3e0;
    --text:#1c2624;
    --muted:#5f6d69;
    --accent:#e0654a;
    --accent-dark:#c14e35;
    --ok:#2f7a5c;
    --font-head:'Georgia', 'Times New Roman', serif;
    --font-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
body{
    margin:0; font-family:var(--font-body); background:var(--paper); color:var(--text);
}
a{ color:inherit; }
img{ max-width:100%; }

/* ---------- Top bar ---------- */
.topbar{
    background:var(--navy); color:#fff; padding:14px 24px;
    display:flex; align-items:center; justify-content:space-between;
    font-size:14px;
}
.topbar .brand{ font-family:var(--font-head); font-size:19px; letter-spacing:.3px; color:#fff; text-decoration:none; display:flex; align-items:center; gap:8px;}
.topbar nav a{ color:#cfd8ef; text-decoration:none; margin-left:18px; font-size:13px;}

/* ---------- Shared bits used on inner pages too ---------- */
.label-eyebrow{
    font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--accent-dark);
    font-weight:700; margin-bottom:6px;
}
.page-title{ font-family:var(--font-head); font-size:26px; margin:0 0 4px; color:var(--navy);}
.page-sub{ color:var(--muted); font-size:14px; margin-bottom:26px;}
.card{
    background:var(--card); border:1px solid var(--line); border-radius:10px; padding:24px;
    margin-bottom:18px;
}
.btn{
    background:var(--navy); color:#fff; border:none; padding:11px 20px; border-radius:6px;
    font-size:14px; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block;
}
.btn.gold{ background:var(--accent); color:#2b1c04;}
.btn.outline{ background:transparent; color:var(--navy); border:1px solid var(--navy);}
.btn.ghost{
    background:transparent; color:#fff; border:1px solid #4a6b63; padding:13px 26px; font-size:14.5px;
    border-radius:6px; font-weight:600; text-decoration:none;
}
.lock-note{
    display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid var(--line);
    border-radius:10px; padding:16px 18px; max-width:560px; margin:26px auto 0; text-align:left;
    font-size:13px; color:var(--muted); line-height:1.6;
}

/* ---------- Hero (landing page) ---------- */
.hero{
    background:linear-gradient(180deg, var(--navy) 0%, var(--navy-light) 100%);
    color:#fff; padding:64px 24px 72px; text-align:center;
}
.hero .eyebrow{
    font-size:12px; text-transform:uppercase; letter-spacing:1.6px; color:#9fc9be; font-weight:700;
    margin-bottom:14px;
}
.hero h1{
    color:#fff; font-size:38px; max-width:640px; margin:0 auto 14px; line-height:1.25;
    font-family:var(--font-head);
}
.hero p{ color:#cfe0da; font-size:15px; max-width:520px; margin:0 auto 30px; line-height:1.6;}
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.hero .btn.gold{ padding:13px 26px; font-size:14.5px;}

/* ---------- Public content sections ---------- */
.public-section{ max-width:920px; margin:0 auto; padding:56px 24px; }
.public-section h2{ font-family:var(--font-head); font-size:22px; color:var(--navy); margin:0 0 8px;}
.public-section .lede{ color:var(--muted); font-size:14px; margin-bottom:28px; max-width:560px;}
.feature-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;}
.feature-card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px;}
.feature-card .ficon{ font-size:22px; margin-bottom:12px;}
.feature-card h3{ font-size:15px; margin:0 0 8px; color:var(--navy);}
.feature-card p{ font-size:13px; color:var(--muted); line-height:1.6; margin:0;}
.public-section.alt{ background:#eef1f7; }
.steps{ display:flex; gap:0; }
.step{ flex:1; padding:0 18px 0 0;}
.step .snum{
    width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;
    margin-bottom:12px;
}
.step h4{ font-size:14px; margin:0 0 6px; color:var(--navy);}
.step p{ font-size:12.5px; color:var(--muted); line-height:1.5; margin:0;}
.public-footer{
    background:var(--navy); color:#cfe0da; text-align:center; padding:26px 24px; font-size:12.5px;
}

/* ---------- Generic inner page wrapper (dashboard-style pages) ---------- */
.sce-page-wrap{ max-width:920px; margin:0 auto; padding:32px 24px 60px; }
.badge-school{
    display:inline-flex; align-items:center; gap:8px; background:#eef1f7; border-radius:20px;
    padding:5px 12px; font-size:12.5px; color:var(--navy); font-weight:600; margin-bottom:18px;
}
.dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); display:inline-block; }

/* ---------- Responsive ---------- */
@media (max-width: 720px){
    .feature-grid{ grid-template-columns:1fr; }
    .steps{ flex-direction:column; gap:20px;}
    .hero h1{ font-size:28px; }
}