/* ================================================
   Professional Education Theme Override
   Tones down colors for a clean, trustworthy look
   Inspired by: Khan Academy, Coursera, edX
   Applied site-wide via mega-nav.js
   ================================================ */

/* ── Global color overrides ── */

/* Hero sections across all pages */
.hero-section,
.programs-hero,
.dash-hero,
.article-hero {
  background: linear-gradient(135deg, #1e2a4a 0%, #2d4a7a 100%) !important;
}

/* Section headers with gradients */
.educator-hero,
.section-hero {
  background: linear-gradient(135deg, #1e2a4a 0%, #2d4a7a 100%) !important;
}

/* Badges and highlights */
.hero-badge,
.blog-tag {
  background: #e8f4fd;
  color: #1e2a4a;
  font-weight: 600;
  border: 1px solid #b8d4e8;
}

/* Title highlight: Soft blue instead of gold */
.hero-title-highlight,
.highlight {
  color: #a8d4f0 !important;
}

/* Stats numbers */
.hero-stat-num {
  color: #a8d4f0;
}

.hero-stat {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ── Sticky Note: Professional card ── */
.sticky-note {
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: none;
  border-radius: 12px;
  font-family: inherit;
}

.sticky-note:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.sticky-note-title {
  font-family: inherit;
  font-size: 1.5rem;
  color: #1e2a4a;
  text-shadow: none;
}

.sticky-note-message {
  font-family: inherit;
  color: #4a5568;
}

.sticky-note-highlight {
  background: #f0f7ff;
  border: 1px solid #b8d4e8;
  border-style: solid;
  animation: none;
}

.sticky-note-offer {
  color: #2d4a7a;
  font-size: 1.1rem;
}

.sticky-note-urgency {
  color: #c53030;
  font-weight: 600;
  animation: none;
}

.sticky-note-btn {
  background: #2d4a7a;
  border-color: #2d4a7a;
  border-radius: 8px;
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(45, 74, 122, 0.2);
}

.sticky-note-btn:hover {
  background: #1e2a4a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 74, 122, 0.3);
}

.sticky-note-back,
.sticky-note-corner {
  display: none;
}

/* Disable bouncy animations */
.sticky-note-pin {
  animation: none;
}
.sticky-note-emoji {
  animation: none;
  font-size: 2.5rem;
}

/* ── CTA sections ── */
.cta-final,
.demo-cta {
  background: linear-gradient(135deg, #1e2a4a 0%, #2d4a7a 100%) !important;
}

/* ── Cards and sections ── */
.card,
.program-card,
.benefit-card,
.blog-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
}

.blog-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ── Buttons: Professional navy instead of bright colors ── */
.btn-warning,
.cta-button.primary,
.demo-btn {
  background: #2d4a7a !important;
  border-color: #2d4a7a !important;
  color: #fff !important;
}

.btn-warning:hover,
.cta-button.primary:hover,
.demo-btn:hover {
  background: #1e2a4a !important;
  border-color: #1e2a4a !important;
}

.btn-success {
  background: #2d6b4f !important;
  border-color: #2d6b4f !important;
}

/* ── Section backgrounds: Subtle ── */
.local-seo-section,
.enhanced-section:nth-child(even) {
  background: #f8fafc;
}

/* ── Overlay stats ── */
.overlay-stats {
  background: rgba(30, 42, 74, 0.88);
}

/* ── Author styling ── */
.author-avatar {
  border-color: #b8d4e8;
}

.author-name {
  color: #1e2a4a;
}

/* ── Skip to content ── */
.skip-to-content:focus {
  background: #1e2a4a;
  color: #fff;
  outline: 3px solid #2d4a7a;
}

/* ── Gallery hero ── */
.gallery-hero {
  background: linear-gradient(135deg, #1e2a4a 0%, #2d4a7a 100%) !important;
}

/* ── Footer trust bar: Subtler ── */
.footer-trust-bar {
  background: #f8fafc;
}

/* ── Tutorials page specific ── */
.programs-hero .hero-content-center h1,
.programs-hero .hero-title {
  color: #fff;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .hero-section,
  .programs-hero,
  .dash-hero {
    padding: 2rem 1rem;
  }
}