/*
 * S4 Learning Academy — Tutor LMS CSS Override
 * =============================================
 * Design system: Dark theme (#0A0E1A), teal (#00C4B4), gold (#F0A500)
 * Typography: Barlow Condensed (headings) + Barlow (body)
 * Source mockup: s4-academy-mockup-v1.html
 *
 * Install: WP Admin → Appearance → Customize → Additional CSS
 *   — or — via WPCode snippet (recommended for length)
 *
 * Targets: Hello Elementor theme + Tutor LMS plugin templates
 * Last updated: 2026-04-16
 */

/* =========================================
   0. WEB FONTS
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=Barlow:wght@300;400;500;600&display=swap');

/* =========================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================= */
:root {
  --s4-dark: #0A0E1A;
  --s4-darker: #060810;
  --s4-card: #141C2E;
  --s4-mid: #111827;
  --s4-teal: #00C4B4;
  --s4-teal-dim: #00A396;
  --s4-teal-glow: rgba(0,196,180,0.15);
  --s4-blue: #1A3A6B;
  --s4-gold: #F0A500;
  --s4-gold-dim: rgba(240,165,0,0.15);
  --s4-text: #E8EDF5;
  --s4-muted: #7B8CA8;
  --s4-white: #FFFFFF;
  --s4-border: rgba(0,196,180,0.15);
  --s4-border-solid: #1E2A42;
  --s4-danger: #E05555;
  --s4-success: #22C55E;
  --s4-radius: 0px;           /* sharp-edge aesthetic */
  --s4-radius-sm: 2px;
  --s4-font-heading: 'Barlow Condensed', sans-serif;
  --s4-font-body: 'Barlow', sans-serif;
  --s4-transition: 0.25s ease;
}

/* =========================================
   2. GLOBAL RESETS & BODY
   ========================================= */
html {
  scroll-behavior: smooth;
}

body,
body.tutor-lms {
  font-family: var(--s4-font-body) !important;
  background-color: var(--s4-dark) !important;
  color: var(--s4-text) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--s4-teal);
  color: var(--s4-darker);
}

a {
  color: var(--s4-teal);
  transition: color var(--s4-transition);
}

a:hover {
  color: var(--s4-teal-dim);
}

/* =========================================
   3. TYPOGRAPHY OVERRIDES
   ========================================= */
h1, h2, h3, h4, h5, h6,
.tutor-fs-4,
.tutor-fs-5,
.tutor-course-details-title,
.tutor-course-name,
.tutor-course-content-title,
.tutor-accordion-item-header,
.tutor-course-details-widget-title,
.section-title,
.elementor-heading-title {
  font-family: var(--s4-font-heading) !important;
  color: var(--s4-white) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

h1, .tutor-fs-4.tutor-fw-bold { font-weight: 800 !important; }
h2, .tutor-fs-5.tutor-fw-bold { font-weight: 700 !important; }
h3, h4, h5, h6 { font-weight: 600 !important; }

p, li, td, th, span,
.tutor-fs-6,
.tutor-fs-7 {
  font-family: var(--s4-font-body) !important;
}

.tutor-color-black {
  color: var(--s4-white) !important;
}

.tutor-color-secondary,
.tutor-color-muted {
  color: var(--s4-muted) !important;
}

/* =========================================
   4. SITE HEADER / NAV
   ========================================= */
.site-header,
.site-header.dynamic-header {
  background: rgba(6,8,16,0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--s4-border) !important;
}

.header-inner {
  background: transparent !important;
}

.site-branding .site-title a,
.site-branding .site-title {
  color: var(--s4-white) !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Elementor nav menu items */
.e-n-menu-title-text {
  color: var(--s4-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: color var(--s4-transition);
}

.e-n-menu-title-container:hover .e-n-menu-title-text,
.e-n-menu-title.e-current .e-n-menu-title-text {
  color: var(--s4-teal) !important;
}

/* =========================================
   5. SITE FOOTER
   ========================================= */
.site-footer,
.site-footer.dynamic-footer {
  background: var(--s4-darker) !important;
  border-top: 1px solid var(--s4-border) !important;
  color: var(--s4-muted) !important;
}

.site-footer a {
  color: var(--s4-teal) !important;
}

.site-footer .copyright,
.footer-inner {
  color: var(--s4-muted) !important;
  background: transparent !important;
}

/* =========================================
   6. TUTOR BUTTONS
   ========================================= */
/* Primary (teal, angled clip) */
.tutor-btn.tutor-btn-primary,
.tutor-btn-primary {
  background: var(--s4-teal) !important;
  color: var(--s4-darker) !important;
  border: none !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
  border-radius: 0 !important;
  transition: background var(--s4-transition), transform var(--s4-transition) !important;
}

.tutor-btn.tutor-btn-primary:hover,
.tutor-btn-primary:hover {
  background: var(--s4-teal-dim) !important;
  color: var(--s4-darker) !important;
  transform: translateY(-2px);
}

/* Outline */
.tutor-btn.tutor-btn-outline-primary,
.tutor-btn-outline-primary,
.tutor-course-list-btn {
  background: transparent !important;
  border: 1px solid var(--s4-teal) !important;
  color: var(--s4-teal) !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 0 !important;
  transition: all var(--s4-transition) !important;
}

.tutor-btn.tutor-btn-outline-primary:hover,
.tutor-btn-outline-primary:hover,
.tutor-course-list-btn:hover {
  background: var(--s4-teal) !important;
  color: var(--s4-darker) !important;
  border-color: var(--s4-teal) !important;
}

/* Ghost */
.tutor-btn.tutor-btn-ghost {
  color: var(--s4-teal) !important;
  background: transparent !important;
}

.tutor-btn.tutor-btn-ghost:hover {
  background: rgba(0,196,180,0.05) !important;
}

/* Link-style */
.tutor-btn.tutor-btn-link {
  color: var(--s4-teal) !important;
}

/* =========================================
   7. COURSE CARDS (archive / carousel)
   ========================================= */
.tutor-card.tutor-course-card,
.tutor-card {
  background: var(--s4-card) !important;
  border: 1px solid var(--s4-border) !important;
  border-radius: var(--s4-radius) !important;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.tutor-card.tutor-course-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--s4-teal), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  z-index: 2;
}

.tutor-card.tutor-course-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(0,196,180,0.4) !important;
}

.tutor-card.tutor-course-card:hover::before {
  transform: scaleX(1);
}

.tutor-card-body {
  background: transparent !important;
}

.tutor-card-footer {
  background: transparent !important;
  border-top: 1px solid var(--s4-border) !important;
}

/* Course card text */
.tutor-course-name a,
.tutor-course-name {
  color: var(--s4-white) !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.tutor-course-name a:hover {
  color: var(--s4-teal) !important;
}

/* Price in cards */
.tutor-item-price .price,
.list-item-price .price {
  color: var(--s4-white) !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 800 !important;
}

/* Thumbnail overlay */
.tutor-course-thumbnail img,
.tutor-card-image-top img {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.tutor-card.tutor-course-card:hover .tutor-course-thumbnail img,
.tutor-card.tutor-course-card:hover .tutor-card-image-top img {
  transform: scale(1.05);
  filter: brightness(0.85);
}

/* =========================================
   8. COURSE CAROUSEL (Elementor Tutor addon)
   ========================================= */
.etlms-course-carousel,
.etlms-carousel-loop-wrap {
  background: transparent !important;
}

.etlms-carousel-arrow {
  background: var(--s4-card) !important;
  border: 1px solid var(--s4-border) !important;
  color: var(--s4-teal) !important;
  border-radius: 0 !important;
  transition: all var(--s4-transition) !important;
}

.etlms-carousel-arrow:hover {
  background: var(--s4-teal) !important;
  color: var(--s4-darker) !important;
}

/* =========================================
   9. COURSE DETAIL PAGE
   ========================================= */
.tutor-course-details-page {
  background: transparent !important;
}

/* Course title */
.tutor-course-details-title {
  font-family: var(--s4-font-heading) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--s4-white) !important;
  text-transform: uppercase;
  letter-spacing: -0.5px;
  line-height: 1.1 !important;
}

/* Course description content */
.tutor-course-details-content,
.tutor-course-details-content p {
  color: var(--s4-text) !important;
  font-family: var(--s4-font-body) !important;
  line-height: 1.7 !important;
}

/* =========================================
   10. ENROLLMENT SIDEBAR CARD
   ========================================= */
.tutor-sidebar-card,
.tutor-card.tutor-card-md.tutor-sidebar-card {
  background: var(--s4-card) !important;
  border: 1px solid var(--s4-border) !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
}

.tutor-sidebar-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--s4-teal), var(--s4-gold), var(--s4-teal));
  z-index: 2;
}

/* Sidebar pricing */
.tutor-course-sidebar-card-pricing .tutor-fs-4 {
  font-family: var(--s4-font-heading) !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--s4-white) !important;
}

/* =========================================
   11. CURRICULUM / ACCORDION
   ========================================= */
.tutor-accordion {
  border: 1px solid var(--s4-border) !important;
  border-radius: 0 !important;
  overflow: hidden;
}

.tutor-accordion-item {
  background: var(--s4-card) !important;
  border-bottom: 1px solid var(--s4-border) !important;
}

.tutor-accordion-item:last-child {
  border-bottom: none !important;
}

.tutor-accordion-item-header {
  background: var(--s4-card) !important;
  color: var(--s4-white) !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none !important;
  padding: 16px 20px !important;
  transition: background var(--s4-transition) !important;
}

.tutor-accordion-item-header:hover,
.tutor-accordion-item-header.is-active {
  background: rgba(0,196,180,0.05) !important;
}

.tutor-accordion-item-header::after {
  color: var(--s4-teal) !important;
}

.tutor-accordion-item-body {
  background: var(--s4-darker) !important;
}

.tutor-accordion-item-body-content {
  background: transparent !important;
}

/* Lesson list items inside curriculum */
.tutor-course-content-list-item {
  border-bottom: 1px solid rgba(0,196,180,0.08) !important;
  padding: 10px 20px !important;
  transition: background var(--s4-transition) !important;
}

.tutor-course-content-list-item:hover {
  background: rgba(0,196,180,0.03) !important;
}

.tutor-course-content-list-item:last-child {
  border-bottom: none !important;
}

.tutor-course-content-list-item-title {
  color: var(--s4-text) !important;
}

.tutor-course-content-list-item a:hover .tutor-course-content-list-item-title {
  color: var(--s4-teal) !important;
}

.tutor-course-content-list-item-duration {
  color: var(--s4-muted) !important;
}

/* Lock icon for locked lessons */
.tutor-course-content-list-item-status {
  color: var(--s4-muted) !important;
}

/* Lesson type icons (video, document) */
.tutor-course-content-list-item-icon {
  color: var(--s4-teal) !important;
}

/* =========================================
   12. RATINGS & STARS
   ========================================= */
.tutor-ratings-stars .tutor-icon-star-bold {
  color: var(--s4-gold) !important;
}

.tutor-ratings-stars .tutor-icon-star-line {
  color: var(--s4-border-solid) !important;
}

.tutor-ratings-average {
  color: var(--s4-white) !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 800 !important;
}

.tutor-ratings-count,
.tutor-total-rating-count {
  color: var(--s4-muted) !important;
}

/* =========================================
   13. REVIEW CARDS
   ========================================= */
.tutor-review-card {
  background: var(--s4-card) !important;
  border: 1px solid var(--s4-border) !important;
  border-radius: 0 !important;
}

/* =========================================
   14. COURSE DETAIL TABS
   ========================================= */
.tutor-course-details-tab .tutor-nav-link,
.tutor-course-details-tab .tutor-tab-item a {
  color: var(--s4-muted) !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid transparent !important;
  transition: all var(--s4-transition) !important;
}

.tutor-course-details-tab .tutor-nav-link:hover,
.tutor-course-details-tab .tutor-nav-link.is-active,
.tutor-course-details-tab .tutor-tab-item.is-active a {
  color: var(--s4-teal) !important;
  border-bottom-color: var(--s4-teal) !important;
}

/* =========================================
   15. COURSE WIDGETS (sidebar meta)
   ========================================= */
.tutor-course-details-widget {
  background: var(--s4-card) !important;
  border: 1px solid var(--s4-border) !important;
  border-radius: 0 !important;
  padding: 24px !important;
}

.tutor-course-details-widget-title {
  color: var(--s4-white) !important;
  font-family: var(--s4-font-heading) !important;
}

.tutor-course-details-widget-list li {
  color: var(--s4-text) !important;
  border-bottom: 1px solid rgba(0,196,180,0.08) !important;
}

/* =========================================
   16. INSTRUCTOR SECTION
   ========================================= */
.tutor-course-details-instructors .tutor-avatar-text {
  color: var(--s4-white) !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 700 !important;
}

.tutor-avatar {
  border: 2px solid var(--s4-border) !important;
}

/* =========================================
   17. LOGIN / REGISTRATION MODAL
   ========================================= */
.tutor-modal-overlay {
  background: rgba(6,8,16,0.85) !important;
  backdrop-filter: blur(6px);
}

.tutor-modal-content,
.tutor-modal-content-white {
  background: var(--s4-card) !important;
  border: 1px solid var(--s4-border) !important;
  border-radius: 0 !important;
  color: var(--s4-text) !important;
}

.tutor-modal-content .tutor-modal-close-o {
  color: var(--s4-muted) !important;
}

.tutor-modal-content .tutor-modal-close-o:hover {
  color: var(--s4-teal) !important;
}

/* =========================================
   18. FORM INPUTS
   ========================================= */
.tutor-form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  background: var(--s4-darker) !important;
  border: 1px solid var(--s4-border-solid) !important;
  color: var(--s4-text) !important;
  font-family: var(--s4-font-body) !important;
  border-radius: var(--s4-radius-sm) !important;
  transition: border-color var(--s4-transition) !important;
}

.tutor-form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--s4-teal) !important;
  box-shadow: 0 0 0 3px rgba(0,196,180,0.1) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--s4-muted) !important;
}

.tutor-form-check-input {
  border-color: var(--s4-border-solid) !important;
}

.tutor-form-check-input:checked {
  background-color: var(--s4-teal) !important;
  border-color: var(--s4-teal) !important;
}

/* =========================================
   19. BREADCRUMBS
   ========================================= */
.tutor-breadcrumb,
.tutor-course-details-header nav {
  color: var(--s4-muted) !important;
}

.tutor-breadcrumb a {
  color: var(--s4-teal) !important;
}

/* =========================================
   20. SCROLLBAR (Webkit)
   ========================================= */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--s4-darker);
}

::-webkit-scrollbar-thumb {
  background: var(--s4-border-solid);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--s4-teal-dim);
}

/* =========================================
   21. BOOKMARK BUTTON
   ========================================= */
.tutor-course-bookmark .tutor-iconic-btn,
.save-bookmark-btn {
  color: var(--s4-muted) !important;
  border-color: var(--s4-border) !important;
}

.tutor-course-bookmark .tutor-iconic-btn:hover,
.save-bookmark-btn:hover {
  color: var(--s4-gold) !important;
  border-color: var(--s4-gold) !important;
}

/* =========================================
   22. TUTOR CONTAINER / LAYOUT BACKGROUNDS
   ========================================= */
.tutor-container,
.tutor-wrap,
.tutor-page-wrap,
.tutor-dashboard-content-inner,
.tutor-single-course-sidebar {
  background: transparent !important;
}

/* Alternate section background */
.tutor-course-details-widget-col-2 {
  background: transparent !important;
}

/* =========================================
   23. SHARE / SOCIAL BUTTONS
   ========================================= */
.tutor-course-share-btn {
  color: var(--s4-muted) !important;
  border-color: var(--s4-border) !important;
}

.tutor-course-share-btn:hover {
  color: var(--s4-teal) !important;
  border-color: var(--s4-teal) !important;
}

/* =========================================
   24. STUDENT DASHBOARD
   ========================================= */
.tutor-dashboard-left-menu,
.tutor-dashboard-nav {
  background: var(--s4-card) !important;
  border-right: 1px solid var(--s4-border) !important;
}

.tutor-dashboard-left-menu a,
.tutor-dashboard-nav a {
  color: var(--s4-muted) !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all var(--s4-transition) !important;
}

.tutor-dashboard-left-menu a:hover,
.tutor-dashboard-left-menu a.active,
.tutor-dashboard-nav a:hover,
.tutor-dashboard-nav a.active {
  color: var(--s4-teal) !important;
  background: rgba(0,196,180,0.05) !important;
}

/* =========================================
   25. LESSON / SPOTLIGHT MODE
   ========================================= */
.tutor-lesson-sidebar,
.tutor-spotlight-sidebar {
  background: var(--s4-card) !important;
  border-left: 1px solid var(--s4-border) !important;
}

.tutor-lesson-sidebar .tutor-accordion-item-header {
  background: var(--s4-card) !important;
}

.tutor-lesson-content,
.tutor-spotlight-content {
  background: var(--s4-dark) !important;
  color: var(--s4-text) !important;
}

/* Lesson top bar */
.tutor-lesson-topbar,
.tutor-spotlight-header {
  background: rgba(6,8,16,0.95) !important;
  border-bottom: 1px solid var(--s4-border) !important;
}

/* =========================================
   26. CERTIFICATE BADGE
   ========================================= */
.tutor-course-certificate-meta {
  color: var(--s4-gold) !important;
}

/* =========================================
   27. PROGRESS BAR
   ========================================= */
.tutor-progress-bar {
  background: var(--s4-border-solid) !important;
  border-radius: 2px !important;
}

.tutor-progress-value {
  background: linear-gradient(90deg, var(--s4-teal), var(--s4-teal-dim)) !important;
  border-radius: 2px !important;
}

/* =========================================
   28. COMING SOON OVERLAY
   ========================================= */
.tutor-coming-soon-wrapper {
  background: rgba(10,14,26,0.9) !important;
  color: var(--s4-muted) !important;
  font-family: var(--s4-font-heading) !important;
}

/* =========================================
   29. PAGINATION
   ========================================= */
.tutor-pagination .page-numbers {
  background: var(--s4-card) !important;
  border: 1px solid var(--s4-border) !important;
  color: var(--s4-muted) !important;
  border-radius: 0 !important;
  font-family: var(--s4-font-heading) !important;
  font-weight: 700 !important;
  transition: all var(--s4-transition) !important;
}

.tutor-pagination .page-numbers:hover,
.tutor-pagination .page-numbers.current {
  background: var(--s4-teal) !important;
  border-color: var(--s4-teal) !important;
  color: var(--s4-darker) !important;
}

/* =========================================
   30. BORDER TOP ACCENTS
   ========================================= */
/* Teal top-line on hover for generic bordered elements */
.tutor-border-top-light {
  border-color: var(--s4-border) !important;
}

/* =========================================
   31. ELEMENTOR WIDGET OVERRIDES
   ========================================= */
.elementor-widget-container {
  color: var(--s4-text) !important;
}

.elementor-widget-text-editor {
  color: var(--s4-text) !important;
}

.elementor-divider .e-divider-base {
  border-color: var(--s4-border) !important;
}

/* =========================================
   32. HELLO ELEMENTOR THEME SPECIFICS
   ========================================= */
.page-header {
  background: transparent !important;
}

.page-header h1 {
  color: var(--s4-white) !important;
  font-family: var(--s4-font-heading) !important;
}

/* =========================================
   33. GOLD ACCENT UTILITY CLASS
   Optional: add class "s4-gold-accent" to any
   Elementor widget or Tutor element for the
   gold treatment.
   ========================================= */
.s4-gold-accent {
  color: var(--s4-gold) !important;
}

.s4-gold-accent-border {
  border-color: rgba(240,165,0,0.3) !important;
}

.s4-gold-accent-bg {
  background: var(--s4-gold-dim) !important;
}

/* =========================================
   34. LEVEL BADGES (add via Tutor course tags
       or custom field + CSS class)
   ========================================= */
.s4-level-foundation {
  background: rgba(0,196,180,0.15);
  color: var(--s4-teal);
  border: 1px solid rgba(0,196,180,0.3);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  display: inline-block;
}

.s4-level-professional {
  background: rgba(240,165,0,0.15);
  color: var(--s4-gold);
  border: 1px solid rgba(240,165,0,0.3);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  display: inline-block;
}

.s4-level-advanced {
  background: rgba(200,50,50,0.15);
  color: var(--s4-danger);
  border: 1px solid rgba(200,50,50,0.3);
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  display: inline-block;
}

/* =========================================
   35. PRINT STYLES
   ========================================= */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .site-header, .site-footer, .tutor-sidebar-card {
    display: none !important;
  }
}