/**
 * cms-modern.css — Skoolly+ CMS design-system layer.
 *
 * Loaded AFTER style.css/responsive.css, on top of the legacy "RS School"
 * Bootstrap 4 + Owl Carousel + jQuery template. This file does NOT replace
 * or remove anything from that stack — Owl Carousel, Isotope, WOW.js,
 * rsmenu and royal-preloader all keep running exactly as before; this is a
 * visual skin restyling the existing markup/classes with modern
 * typography, spacing, shadows and card/button treatment.
 *
 * Colors come from CSS custom properties set on :root by main_nav.php
 * (--cms-primary/--cms-secondary/--cms-accent/--cms-link/--cms-button-text
 * — sourced from cms_get_theme(), editable via cms_theme.php). Fallback
 * values are supplied here via var(--x, fallback) so this file degrades
 * gracefully even on a page that hasn't included main_nav.php's vars yet.
 *
 * Applied to: home.php only, for now — extending this same stylesheet to
 * the rest of the site (gallery/events/notice/blog/about) is a natural,
 * low-risk follow-up once this is verified live, matching how the CMS
 * itself was rolled out page by page.
 */

/* ── Tokens ──────────────────────────────────────────────────────────── */

:root {
  --cms-primary: var(--cms-primary, #0d1b3e);
  --cms-secondary: var(--cms-secondary, #1565c0);
  --cms-accent: var(--cms-accent, #ff3115);
  --cms-link: var(--cms-link, #0d1b3e);
  --cms-button-text: var(--cms-button-text, #ffffff);

  --cms-ink: #111827;
  --cms-ink-soft: #4b5563;
  --cms-muted: #94a3b8;
  --cms-surface: #ffffff;
  --cms-surface-alt: #f7f9fc;
  --cms-border: #e7ebf1;

  --cms-radius-sm: 8px;
  --cms-radius-md: 14px;
  --cms-radius-lg: 20px;

  --cms-shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
  --cms-shadow-md: 0 10px 30px rgba(15, 23, 42, .10);
  --cms-shadow-lift: 0 18px 40px rgba(15, 23, 42, .14);

  --cms-space-1: 8px;
  --cms-space-2: 16px;
  --cms-space-3: 24px;
  --cms-space-4: 40px;

  --cms-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cms-font-head: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

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

/* ── Base typography ─────────────────────────────────────────────────── */

body {
  font-family: var(--cms-font-body) !important;
  color: var(--cms-ink) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.slider-title, .sec-title h2, .counter-title, .event-title, .course-title,
.footer-title, .toolbar-title, .team-name {
  font-family: var(--cms-font-head) !important;
  letter-spacing: -0.01em;
}

.sec-title h2 {
  font-weight: 800 !important;
  font-size: 34px !important;
  color: var(--cms-ink) !important;
  position: relative;
  padding-bottom: var(--cms-space-2);
}
.sec-title h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 4px;
  background: var(--cms-accent);
}
.sec-title.text-left h2::after,
.rs-events .sec-title h2::after { left: 0; transform: none; }
.sec-title p { color: var(--cms-ink-soft) !important; font-size: 15.5px; }

a { transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.readon2, .readon, a.readon2, a.readon,
.sl-readmore-btn, .sl-get-started-btn, .event-btn a, .news-btn a, .view-btn a {
  border-radius: var(--cms-radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  box-shadow: var(--cms-shadow-sm);
}
.readon2:hover, .readon:hover, a.readon2:hover, a.readon:hover,
.sl-readmore-btn:hover, .event-btn a:hover {
  box-shadow: var(--cms-shadow-md);
  transform: translateY(-2px);
}
.sl-get-started-btn {
  border-radius: var(--cms-radius-sm) !important;
  border: 2px solid rgba(255,255,255,.7) !important;
}

/* ── Header / Nav ────────────────────────────────────────────────────── */

.home1 .menu-area { box-shadow: var(--cms-shadow-sm); }
.home1 .rs-menu > ul > li > a {
  font-family: var(--cms-font-head) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}
.rs-header-top { background: var(--cms-surface) !important; }
.rs-toolbar { background: var(--cms-primary) !important; }
.rs-toolbar .apply-btn {
  border-radius: 999px !important;
  padding: 6px 18px !important;
  background: var(--cms-accent) !important;
  color: var(--cms-button-text) !important;
  font-weight: 700 !important;
}
.ticker-wrapper-h { border-color: rgba(255,255,255,.25) !important; }
.ticker-wrapper-h .heading { background-color: var(--cms-accent) !important; }
.ticker-wrapper-h .heading:after { border-left-color: var(--cms-accent) !important; }

/* ── Slider captions ─────────────────────────────────────────────────── */

#home-slider .slide-content {
  background: linear-gradient(0deg, rgba(13,27,62,.55), rgba(13,27,62,.15));
}
#home-slider .slider-title {
  font-weight: 800 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
#home-slider .slider-desc { font-size: 16px; }

/* ── Cards: events / streams / blog / instructor-list ───────────────── */

.event-item, .cource-item, .post-item, .instructor-list {
  border-radius: var(--cms-radius-md) !important;
  overflow: hidden;
  box-shadow: var(--cms-shadow-sm) !important;
  border: 1px solid var(--cms-border);
  transition: box-shadow .25s ease, transform .25s ease;
  background: var(--cms-surface);
}
.event-item:hover, .cource-item:hover {
  box-shadow: var(--cms-shadow-lift) !important;
  transform: translateY(-4px);
}
.event-item img, .cource-item img, .cource-img img, .event-img img {
  border-radius: 0 !important;
}
.event-title a, .course-title a { color: var(--cms-ink) !important; font-weight: 700 !important; }
.event-title a:hover, .course-title a:hover { color: var(--cms-link) !important; }
.event-date, .event-time, .event-location {
  color: var(--cms-ink-soft) !important;
}
.event-date i, .event-time i, .event-location i { color: var(--cms-accent) !important; }

/* ── Achievement counters ────────────────────────────────────────────── */

.rs-counter { background: var(--cms-surface-alt) !important; }
.counter-title { font-weight: 800 !important; color: var(--cms-ink) !important; }
.rs-counter-list {
  background: var(--cms-surface);
  border-radius: var(--cms-radius-md);
  box-shadow: var(--cms-shadow-sm);
  padding: var(--cms-space-3) var(--cms-space-2);
  text-align: center;
  border: 1px solid var(--cms-border);
}
.counter-number.plus {
  color: var(--cms-primary) !important;
  font-weight: 800 !important;
  font-family: var(--cms-font-head) !important;
}
.counter-desc {
  color: var(--cms-ink-soft) !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12.5px !important;
}

/* ── Notice/News tab block ──────────────────────────────────────────── */

.course-des-tabs .nav-link {
  border-radius: var(--cms-radius-sm) !important;
  font-weight: 700 !important;
}
.course-des-tabs .nav-link.active {
  background: var(--cms-primary) !important;
  color: #fff !important;
}
.course-des-tabs .tab-content.card {
  border-radius: var(--cms-radius-md) !important;
  border: 1px solid var(--cms-border) !important;
  box-shadow: var(--cms-shadow-sm);
}
.course-features-info {
  background: var(--cms-primary) !important;
  border-radius: var(--cms-radius-md);
}

/* ── Principal's message ─────────────────────────────────────────────── */

.rs-about-style8 .sec-title2 .sub-title {
  color: var(--cms-accent) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 13px;
}
.rs-about-style8 .img-part img {
  border-radius: var(--cms-radius-lg);
  box-shadow: var(--cms-shadow-md);
}
.rs-about-style8 .course-author { display: flex; align-items: center; gap: 14px; }
.rs-about-style8 .align-img img {
  border-radius: 50%;
  width: 64px; height: 64px; object-fit: cover;
}

/* ── About section accordion ─────────────────────────────────────────── */

.rs-accordion-style1 .card {
  border-radius: var(--cms-radius-sm) !important;
  border: 1px solid var(--cms-border) !important;
  overflow: hidden;
  margin-bottom: 8px;
}
.rs-accordion-style1 .acdn-title { font-weight: 700 !important; }

/* ── Footer ──────────────────────────────────────────────────────────── */

.rs-footer.rs-footer-style7 { background: var(--cms-primary) !important; }
.rs-footer .footer-title {
  font-family: var(--cms-font-head) !important;
  font-weight: 700 !important;
  color: #fff !important;
  position: relative;
  padding-bottom: 10px;
}
.rs-footer .footer-title::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 36px; height: 3px; border-radius: 3px;
  background: var(--cms-accent);
}
.rs-footer .about-widget p,
.rs-footer .sitemap-widget a,
.rs-footer b { color: rgba(255,255,255,.75) !important; }
.rs-footer .sitemap-widget a:hover { color: #fff !important; }
.rs-footer .recent-post-widget .post-title a { color: #fff !important; font-weight: 600 !important; }
.footer-bottom.copyright_style7 { background: rgba(0,0,0,.15) !important; }
.footer-bottom p, .footer-bottom p a { color: rgba(255,255,255,.65) !important; }
.footer-bottom p a:hover { color: #fff !important; }

/* ── Misc polish ─────────────────────────────────────────────────────── */

.rs-search-courses { box-shadow: var(--cms-shadow-md); border-radius: var(--cms-radius-md); margin-top: -30px; position: relative; z-index: 5; }
::selection { background: var(--cms-accent); color: #fff; }