/* Success English College — public-page shell.
   Paints every public flow (courses, articles, MCQ, seminars, quiz, pages) in
   the brand palette from css/brand.css. Pages keep their own layout; this file
   only maps their colour variables and common component classes. */
:root{
  --bg:var(--sec-paper)!important;--bg-app:var(--sec-paper)!important;
  --bg-default:var(--sec-paper)!important;--surface:#fff!important;
  --card:#fff!important;--bg-card:#fff!important;
  --primary:var(--sec-royal)!important;--primary-dark:var(--sec-royal-deep)!important;
  --primary-hover:var(--sec-royal-deep)!important;
  --accent:var(--sec-royal)!important;--accent2:var(--sec-navy)!important;
  --accent-soft:var(--sec-royal-soft)!important;--accent-light:var(--sec-royal-soft)!important;
  --primary-glow:rgba(26,36,196,.13)!important;
  --text:var(--sec-ink)!important;--ink:var(--sec-ink)!important;
  --text-primary:var(--sec-ink)!important;--text-secondary:var(--sec-muted)!important;
  --text-muted:var(--sec-muted)!important;
  --muted:var(--sec-muted)!important;--border:var(--sec-line)!important;
}
html{color-scheme:light!important}
html,body{background:var(--sec-paper)!important;color:var(--sec-ink)!important}
body{font-family:var(--sec-font)}
body>header{position:relative;z-index:1150}
.mesh,.ambient{background:var(--sec-paper)!important}.mesh::before,.mesh::after,.orb,.grain{display:none!important}

.navbar,.topbar,.navigation,.nav{
  background:rgba(255,255,255,.97)!important;color:var(--sec-ink)!important;
  border-color:var(--sec-line)!important;box-shadow:0 5px 22px rgba(16,50,77,.06)!important;
  backdrop-filter:blur(14px)!important;
}
.brand,.logo-wrap,.nav-brand,.navigation a,.nav-links a{color:var(--sec-ink)!important}
.nav-links a:hover,.nav-links a.on,.nav-links a.active{color:var(--sec-royal)!important;background:var(--sec-royal-soft)!important}
.nav-links a::after{background:var(--sec-green)!important}
.logo-badge,.logo-fallback{background:var(--sec-royal)!important;color:#fff!important}

.card,.glass,.panel,.form-card,.table-card,.modal-box,.mbox,.empty,.drow{
  background:#fff!important;color:var(--sec-ink)!important;
  border-color:var(--sec-line)!important;box-shadow:var(--sec-shadow)!important;
  backdrop-filter:none!important;
}
h1,h2,h3,h4,h5,h6,.title,.t{color:var(--sec-navy)!important}
p,.sub,.desc,.meta,.d,.lbl,.muted{color:var(--sec-muted)!important}
input,select,textarea,.f-input{
  background:#fff!important;color:var(--sec-ink)!important;border-color:#d6dce8!important;
}
input:focus,select:focus,textarea:focus,.f-input:focus{
  border-color:var(--sec-royal)!important;box-shadow:0 0 0 3px rgba(26,36,196,.12)!important;outline:none!important;
}
.btn,.btn-nav,.btn-lg,.tute-btn,button[type="submit"],input[type="submit"]{
  background:var(--sec-royal)!important;color:#fff!important;border-color:var(--sec-royal)!important;
  box-shadow:0 8px 20px rgba(26,36,196,.20)!important;
}
.btn:hover,.btn-nav:hover,.btn-lg:hover,.tute-btn:hover,button[type="submit"]:hover{
  background:var(--sec-royal-deep)!important;border-color:var(--sec-royal-deep)!important;
}
.btn.ghost,.btn-outline,.back{
  background:#fff!important;color:var(--sec-navy)!important;border:1px solid var(--sec-line)!important;box-shadow:none!important;
}
.btn.green,.btn.g,.btn-lg.green{background:var(--sec-green-ink)!important;border-color:var(--sec-green-ink)!important;color:#fff!important}
.top a,.price,.price-tag,.sec-title{color:var(--sec-royal)!important}
.bankbox{background:var(--sec-paper-2)!important;color:var(--sec-ink)!important}
.video-box,.poster{background:var(--sec-navy-deep)!important}.poster:hover .poster-play{background:var(--sec-royal)!important;border-color:var(--sec-royal)!important}
.pl-item.active{background:var(--sec-royal-soft)!important}.pl-item.active .pl-num{background:var(--sec-royal)!important}.pl-item.active .pl-title{color:var(--sec-royal)!important}

/* Dark bands (home contact panel, footer) keep light copy even though the
   shell turns headings and paragraphs dark everywhere else. */
.sec-dark,.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4,.sec-dark small{color:#fff!important}
.sec-dark p{color:#c9d5ea!important}
.contact-section .contact-copy,.contact-section .contact-copy small,.contact-section .contact-copy h2{color:#fff!important}
.contact-section .contact-copy p{color:#c9d5ea!important}
.contact-section .contact-details a{color:#fff!important;text-decoration:none!important}
.contact-section .contact-details a:hover{color:#8ff096!important}

/* Links js/public-shell.js adds to pages that only have a minimal header. */
.ol-quick-nav{display:flex;align-items:center;gap:6px;margin-left:auto}
.ol-quick-nav a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:10px;color:var(--sec-ink)!important;font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap}
.ol-quick-nav a:hover,.ol-quick-nav a[aria-current="page"]{background:var(--sec-royal-soft)!important;color:var(--sec-royal)!important}
.ol-nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--sec-line)!important;border-radius:11px;background:#fff!important;color:var(--sec-ink)!important;box-shadow:none!important;align-items:center;justify-content:center;font-size:22px;cursor:pointer}
.ol-nav-toggle span{display:block;width:20px;height:2px;background:currentColor;position:relative;border-radius:5px}
.ol-nav-toggle span::before,.ol-nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;border-radius:5px}
.ol-nav-toggle span::before{top:-6px}.ol-nav-toggle span::after{top:6px}
.ol-standalone-header{height:66px;padding:10px 5%;display:flex;align-items:center;gap:14px;background:#fff;border-bottom:1px solid var(--sec-line);box-shadow:0 5px 22px rgba(16,50,77,.06);position:fixed;top:0;left:0;right:0;z-index:1150}
body.ol-has-standalone{padding-top:66px!important}
.ol-standalone-brand{display:flex;align-items:center;gap:10px;font:700 20px/1 var(--sec-display);text-transform:uppercase;color:var(--sec-royal)!important;text-decoration:none}
.ol-standalone-brand img{height:38px;width:auto}
.ol-inline-header{position:relative;z-index:10}

@media(max-width:900px){
  .ol-nav-toggle{display:inline-flex}
  .ol-quick-nav{display:none;position:absolute;top:calc(100% + 1px);left:12px;right:12px;z-index:1000;padding:12px;background:#fff;border:1px solid var(--sec-line);border-radius:14px;box-shadow:0 18px 42px rgba(16,50,77,.16);flex-direction:column;align-items:stretch}
  .ol-quick-nav.is-open{display:flex}
  .ol-quick-nav a{padding:13px 15px;font-size:14px}
  .navlinks{display:none!important;position:absolute;top:100%;left:12px;right:12px;z-index:1000;padding:12px!important;background:#fff!important;border:1px solid var(--sec-line);border-radius:14px;box-shadow:0 18px 42px rgba(16,50,77,.16);flex-direction:column;align-items:stretch!important;gap:3px!important;font-size:14px!important}
  .navlinks.is-open{display:flex!important}
  .navlinks a{display:block;padding:12px 14px!important;border-radius:10px;font-size:14px!important}
  header .nav{position:relative}
  .navbar,.topbar,.navigation{min-height:64px!important;padding-left:16px!important;padding-right:16px!important}
  .navbar,.topbar,.navigation{position:relative}
  .nav-links{background:#fff!important;border-color:var(--sec-line)!important;gap:4px!important}
  .nav-links.open{display:flex!important}
  .nav-links li{display:block!important;width:100%!important}
  .nav-links li a{display:block!important;width:100%!important;padding:12px 14px!important;line-height:1.35!important}
  .card,.glass,.panel{box-shadow:var(--sec-shadow-sm)!important}
}
@media(max-width:520px){
  .navbar .btn,.topbar .nav-right>.btn{padding:9px 12px!important;font-size:12px!important}
  .container,.wrap{padding-left:16px!important;padding-right:16px!important}
}