/*
Theme Name: Codeillusion
Theme URI: https://example.com/codeillusion
Author: Codeillusion
Author URI: https://example.com
Description: A Bootstrap 5 WordPress theme for AI coding courses, blog posts, and 1 to 1 coaching.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codeillusion
*/

:root {
  --ci-purple: #7c3aed;
  --ci-purple-dark: #4c1d95;
  --ci-purple-soft: #ede9fe;
  --ci-ink: #171321;
  --ci-muted: #6b6478;
  --ci-line: #e8e2f4;
  --ci-surface: #ffffff;
  --ci-surface-alt: #fbf9ff;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ci-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--ci-surface);
}

a {
  color: var(--ci-purple);
}

a:hover,
a:focus {
  color: var(--ci-purple-dark);
}

.site-header {
  border-bottom: 1px solid rgba(124, 58, 237, 0.12);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.navbar-brand {
  color: var(--ci-purple-dark);
  font-weight: 800;
  letter-spacing: 0;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--ci-purple);
}

.navbar .nav-link {
  color: var(--ci-ink);
  font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .current-menu-item > .nav-link,
.navbar .current_page_item > .nav-link {
  color: var(--ci-purple);
}

.btn-primary,
.wp-block-button__link {
  --bs-btn-bg: var(--ci-purple);
  --bs-btn-border-color: var(--ci-purple);
  --bs-btn-hover-bg: var(--ci-purple-dark);
  --bs-btn-hover-border-color: var(--ci-purple-dark);
  --bs-btn-focus-shadow-rgb: 124, 58, 237;
  --bs-btn-active-bg: var(--ci-purple-dark);
  --bs-btn-active-border-color: var(--ci-purple-dark);
}

.btn-outline-primary {
  --bs-btn-color: var(--ci-purple);
  --bs-btn-border-color: var(--ci-purple);
  --bs-btn-hover-bg: var(--ci-purple);
  --bs-btn-hover-border-color: var(--ci-purple);
  --bs-btn-focus-shadow-rgb: 124, 58, 237;
  --bs-btn-active-bg: var(--ci-purple-dark);
  --bs-btn-active-border-color: var(--ci-purple-dark);
}

.text-primary {
  color: var(--ci-purple) !important;
}

.bg-primary-subtle {
  background-color: var(--ci-purple-soft) !important;
}

.hero-section {
  position: relative;
  overflow: hidden;
  padding: 7rem 0 5rem;
  color: #fff;
  background:
    linear-gradient(115deg, rgba(35, 15, 78, 0.95), rgba(91, 33, 182, 0.86)),
    url("https://images.unsplash.com/photo-1555066931-4365d14bab8c?auto=format&fit=crop&w=1800&q=80") center / cover;
}

.hero-section::after {
  position: absolute;
  inset: auto 0 0;
  height: 9rem;
  content: "";
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--ci-surface));
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  margin-bottom: 1.25rem;
  color: #f6f1ff;
  font-size: 0.86rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.hero-title {
  max-width: 720px;
  font-size: clamp(2.55rem, 6vw, 5rem);
  font-weight: 850;
  line-height: 0.96;
}

.hero-lead {
  max-width: 640px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 1.18rem;
}

.pricing-strip {
  position: relative;
  z-index: 2;
  margin-top: -2.25rem;
}

.pricing-item {
  height: 100%;
  padding: 1.4rem;
  background: var(--ci-surface);
  border: 1px solid var(--ci-line);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(76, 29, 149, 0.1);
}

.section-pad {
  padding: 4.5rem 0;
}

.section-kicker {
  color: var(--ci-purple);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.feature-list {
  display: grid;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.feature-list li {
  padding: 1rem 1.1rem;
  background: var(--ci-surface-alt);
  border: 1px solid var(--ci-line);
  border-radius: 8px;
}

.post-card {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--ci-line);
  border-radius: 8px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.post-card:hover {
  border-color: rgba(124, 58, 237, 0.42);
  box-shadow: 0 18px 36px rgba(76, 29, 149, 0.12);
  transform: translateY(-3px);
}

.post-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ci-purple-soft);
}

.post-card .card-title a {
  color: var(--ci-ink);
  text-decoration: none;
}

.post-card .card-title a:hover,
.post-card .card-title a:focus {
  color: var(--ci-purple);
}

.post-meta {
  color: var(--ci-muted);
  font-size: 0.9rem;
}

.page-hero {
  padding: 4.5rem 0;
  background: linear-gradient(135deg, var(--ci-purple-soft), #ffffff);
  border-bottom: 1px solid var(--ci-line);
}

.pagination {
  --bs-pagination-color: var(--ci-purple);
  --bs-pagination-hover-color: var(--ci-purple-dark);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(124, 58, 237, 0.2);
  --bs-pagination-active-bg: var(--ci-purple);
  --bs-pagination-active-border-color: var(--ci-purple);
}

.nav-links,
.page-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  padding-left: 0;
  list-style: none;
}

.page-numbers li {
  list-style: none;
}

.page-numbers a,
.page-numbers span,
.nav-links .page-numbers {
  display: inline-flex;
  min-width: 2.5rem;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.8rem;
  color: var(--ci-purple);
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 8px;
}

.page-numbers .current,
.nav-links .current {
  color: #fff;
  background: var(--ci-purple);
  border-color: var(--ci-purple);
}

.site-footer {
  color: rgba(255, 255, 255, 0.78);
  background: var(--ci-purple-dark);
}

.site-footer a {
  color: #fff;
}

.single-post-content img,
.page-content img {
  max-width: 100%;
  height: auto;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767.98px) {
  .hero-section {
    padding: 5.5rem 0 4.25rem;
  }

  .section-pad {
    padding: 3.25rem 0;
  }

  .pricing-strip {
    margin-top: -1.5rem;
  }
}