/*
 Theme Name:   Oracsdemia English Hub
 Theme URI:    https://oracsdemia.com
 Description:  Production-ready Astra child theme for Oracsdemia English Hub — premium English coaching by Hina Khaleeq M. Mirza.
 Author:       Oracsdemia
 Author URI:   https://oracsdemia.com
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  oracsdemia-child
*/

/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {
  /* Brand palette — orange #E87722, ink, cream */
  --oe-primary: oklch(0.68 0.17 47);
  --oe-primary-fg: #fff;
  --oe-ink: oklch(0.16 0.012 60);
  --oe-cream: oklch(0.978 0.005 80);
  --oe-card: #fff;
  --contact-bgcolor: #312525;
  --oe-card-fg: oklch(0.18 0.012 60);
  --oe-border: oklch(0.9 0.012 70);
  --oe-muted: oklch(0.48 0.015 60);
  --oe-secondary-bg: oklch(0.94 0.012 70);

  /* Typography */
  --oe-font-display: "Cormorant Garamond", "Playfair Display", ui-serif, Georgia, serif;
  --oe-font-body: "DM Sans", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  /* Shadows */
  --oe-shadow-soft: 0 6px 24px -10px rgba(17,17,17,0.16);
  --oe-shadow-card: 0 14px 40px -18px rgba(17,17,17,0.22);

  /* Gradient */
  --oe-gradient-warm: linear-gradient(135deg, #e87722, #c84d00);

  /* Spacing */
  --oe-container-px: 1.25rem;
  --oe-section-py: 6rem;
  --oe-max-w: 80rem;
}

@media (min-width: 1024px) {
  :root {
    --oe-container-px: 2rem;
  }
}

/* ==========================================================================
   BASE RESETS (child-theme-scoped)
   ========================================================================== */

body.oracsdemia-home {
  background-color: var(--oe-cream);
  color: var(--oe-card-fg);
  font-family: var(--oe-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.oe-container {
  max-width: var(--oe-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--oe-container-px);
  padding-right: var(--oe-container-px);
}

.oe-section {
  padding-top: var(--oe-section-py);
  padding-bottom: var(--oe-section-py);
}

.oe-font-display {
  font-family: var(--oe-font-display);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   PILL BADGE
   ========================================================================== */

.oe-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: color-mix(in srgb, #e87722 14%, transparent);
  color: #e87722;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.oe-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--oe-gradient-warm);
  color: var(--oe-primary-fg);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--oe-font-body);
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: var(--oe-shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.oe-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: var(--oe-shadow-card);
  color: var(--oe-primary-fg);
  text-decoration: none;
}

.oe-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--oe-font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.oe-btn-outline:hover {
  background: currentColor;
  transform: translateY(-2px);
  text-decoration: none;
}

/* ==========================================================================
   CARD HOVER ANIMATION
   ========================================================================== */

.oe-card-hover {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.oe-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--oe-shadow-card);
}

/* ==========================================================================
   REVEAL ANIMATION
   ========================================================================== */

.oe-reveal {
  opacity: 0;
  transform: translateY(16px);
  animation: oe-reveal-up 0.7s ease-out forwards;
}

@keyframes oe-reveal-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */

.oe-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
}

.oe-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.oe-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(20, 18, 15, 0.95),
    rgba(28, 25, 22, 0.80),
    rgba(28, 25, 22, 0.40)
  );
  z-index: 1;
}

.oe-hero__content {
  position: relative;
  z-index: 2;
}

.oe-hero__title {
  font-family: var(--oe-font-display);
  font-size: clamp(2.8rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1.04;
  max-width: 56rem;
  margin: 0;
}

.oe-hero__title em {
  font-style: normal;
  color: #e87722;
}

.oe-hero__subtitle {
  margin-top: 1.5rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: rgba(255, 255, 255, 0.8);
  max-width: 42rem;
  line-height: 1.6;
}

.oe-hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.oe-hero__credibility {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ==========================================================================
   STATS BAR
   ========================================================================== */

.oe-stats {
  background: var(--oe-card);
  border-top: 1px solid var(--oe-border);
  border-bottom: 1px solid var(--oe-border);
}

.oe-stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}

@media (min-width: 768px) {
  .oe-stats__grid {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
  }
}

.oe-stats__number {
  font-family: var(--oe-font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  color: #e87722;
  line-height: 1;
}

.oe-stats__label {
  margin-top: 0.5rem;
  color: var(--oe-muted);
  font-size: 0.95rem;
}

@media (min-width: 768px) {
  .oe-stats__item {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
  }
  .oe-stats__label {
    margin-top: 0;
  }
}

/* ==========================================================================
   SECTION HEADERS
   ========================================================================== */

.oe-section-title {
  font-family: var(--oe-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.oe-section-subtitle {
  margin-top: 1rem;
  color: var(--oe-muted);
  font-size: 1rem;
  line-height: 1.6;
}

/* ==========================================================================
   WHY US CARDS
   ========================================================================== */

.oe-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  .oe-why-grid { grid-template-columns: repeat(2, 1fr); }
}

.oe-why-card {
  background: var(--oe-card);
  border-radius: 1rem;
  border: 1px solid var(--oe-border);
  padding: 1.75rem;
}

.oe-why-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, #e87722 10%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e87722;
  margin-bottom: 1.25rem;
  font-size: 1.35rem;
}

.oe-why-card__title {
  font-family: var(--oe-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.oe-why-card__body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--oe-muted);
  line-height: 1.6;
}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */

.oe-how {
  background: var(--oe-secondary-bg);
  border-top: 1px solid var(--oe-border);
  border-bottom: 1px solid var(--oe-border);
}

.oe-how__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 3.5rem;
}

@media (min-width: 768px) {
  .oe-how__grid { grid-template-columns: repeat(3, 1fr); }
}

.oe-step-card {
  position: relative;
  background: var(--oe-card);
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid var(--oe-border);
}

.oe-step-card__number {
  position: absolute;
  top: -1.25rem;
  left: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--oe-gradient-warm);
  color: #fff;
  font-family: var(--oe-font-display);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(232,119,34,0.35);
  font-size: 1rem;
}

.oe-step-card__icon {
  color: #e87722;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.oe-step-card__title {
  font-family: var(--oe-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}

.oe-step-card__body {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--oe-muted);
}

/* ==========================================================================
   COURSE CARDS GRID
   ========================================================================== */

.oe-courses-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .oe-courses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .oe-courses-grid { grid-template-columns: repeat(4, 1fr); }
}

.oe-course-card {
  background: var(--oe-card);
  border-radius: 1rem;
  border: 1px solid var(--oe-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.oe-course-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.oe-course-card__body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.oe-course-card__title {
  font-family: var(--oe-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.oe-course-card__desc {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--oe-muted);
  line-height: 1.55;
  flex: 1;
}

.oe-course-card__meta {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--oe-border);
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--oe-muted);
}

/* ==========================================================================
   YOUTUBE SECTION
   ========================================================================== */

.oe-youtube {
  background: var(--oe-ink);
  color: #fff;
}

.oe-youtube__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1024px) {
  .oe-youtube__grid { grid-template-columns: 2fr 1fr; }
}

.oe-youtube__featured {
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1);
}

.oe-youtube__featured img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.oe-youtube__featured:hover img {
  opacity: 0.9;
}

.oe-youtube__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.oe-youtube__play-btn {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--oe-gradient-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(232,119,34,0.4);
  transition: transform 0.3s ease;
}

.oe-youtube__featured:hover .oe-youtube__play-btn {
  transform: scale(1.1);
}

.oe-youtube__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
}

.oe-youtube__caption-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #e87722;
  margin-bottom: 0.25rem;
}

.oe-youtube__caption-title {
  font-family: var(--oe-font-display);
  font-size: 1.5rem;
  margin: 0;
}

.oe-youtube__sidebar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (min-width: 1024px) {
  .oe-youtube__sidebar { grid-template-columns: 1fr; }
}

.oe-youtube__thumb {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  text-decoration: none;
  color: #fff;
  transition: border-color 0.3s ease;
}

.oe-youtube__thumb:hover {
  border-color: rgba(232,119,34,0.6);
  color: #fff;
  text-decoration: none;
}

.oe-youtube__thumb-img {
  aspect-ratio: 16 / 9;
  background: rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}

.oe-youtube__thumb-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.oe-youtube__thumb:hover .oe-youtube__thumb-img img {
  opacity: 1;
}

.oe-youtube__thumb-text {
  padding: 0 1rem 1rem;
}

.oe-youtube__thumb-text p {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
}

.oe-youtube__thumb-text span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.25rem;
  display: block;
}



/* ==========================================================================
   CTA SECTION
   ========================================================================== */

.oe-cta {
  background: var(--oe-ink);
  color: #fff;
}

.oe-cta__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .oe-cta__grid { grid-template-columns: 2fr 1fr; }
}

.oe-cta__title {
  font-family: var(--oe-font-display);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.oe-cta__title em {
  font-style: normal;
  color: #e87722;
}

.oe-cta__subtitle {
  margin-top: 1rem;
  color: rgba(255,255,255,0.7);
  max-width: 36rem;
}

@media (min-width: 768px) {
  .oe-cta__action { justify-self: end; }
}

.oe-cta__action .oe-btn-primary {
  padding: 1rem 2rem;
  font-size: 1rem;
}

/* ==========================================================================
   FOUNDER SECTION
   ========================================================================== */

.oe-founder__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 768px) {
  .oe-founder__grid { grid-template-columns: 2fr 3fr; }
}

.oe-founder__img {
  border-radius: 1rem;
  width: 100%;
  max-width: 28rem;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  box-shadow: var(--oe-shadow-card);
}

.oe-founder__name {
  font-family: var(--oe-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin: 0;
}

.oe-founder__bio {
  margin-top: 1.25rem;
  font-size: 1.1rem;
  color: var(--oe-muted);
  line-height: 1.7;
}

/* ==========================================================================
   SECTION HEADER ROW (title + link side-by-side)
   ========================================================================== */

.oe-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.oe-section-header__link {
  color: #e87722;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.95rem;
}

.oe-section-header__link:hover {
  text-decoration: underline;
  color: #c84d00;
}

/* ==========================================================================
   SVG ICON INLINE UTILITY
   ========================================================================== */

.oe-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oe-icon--lg {
  width: 1.75rem;
  height: 1.75rem;
}

/* ==========================================================================
   TEXT-CENTER HELPER
   ========================================================================== */

.oe-text-center {
  text-align: center;
}

.oe-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.oe-max-w-2xl {
  max-width: 42rem;
}

.oe-max-w-xl {
  max-width: 36rem;
}

/* ==========================================================================
   INTERNAL PAGES BASE
   ========================================================================== */

body.oracsdemia-theme {
  background-color: var(--oe-cream);
  color: var(--oe-card-fg);
  font-family: var(--oe-font-body);
  overflow-x: hidden;
}

#page {
  overflow-x: hidden;
}

.oe-hero {
  width: 100%;
}

.oe-hero__bg,
.oe-hero__overlay {
  width: 100%;
}

/* ==========================================================================
   CUSTOM NAVBAR
   ========================================================================== */

.oe-site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid var(--oe-border);
  box-shadow: 0 8px 20px -24px rgba(0,0,0,0.35);
}

.oe-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.75rem;
  padding: 1.5rem 0;
}

.oe-nav__brand {
  font-family: var(--oe-font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--oe-ink);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.oe-nav__brand span {
  color: #e87722;
}

.oe-nav__menu {
  display: none;
  align-items: center;
  gap: 2rem;
  flex: 1;
  justify-content: center;
}

.oe-nav__menu .oe-nav-menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: center;
  padding: 0;
  margin: 0;
}

.oe-nav__menu .oe-nav-menu li {
  margin: 0;
  padding: 0;
}

.oe-nav__menu .oe-nav-menu a {
  color: var(--oe-muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.25s ease;
}

.oe-nav__menu .oe-nav-menu a:hover,
.oe-nav__menu .oe-nav-menu .current-menu-item > a {
  color: #e87722;
}

.oe-nav__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.oe-nav__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--oe-primary, #F97316); /* Sets SVG stroke to Oracdemia Orange */
    background: transparent; /* Removes the harsh white background */
    border: 1px solid var(--oe-border, #333333); /* Subtle dark border */
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.oe-nav__toggle:hover,
.oe-nav__toggle:focus {
    background: rgba(249, 115, 22, 0.1); /* Subtle orange glow on hover */
    border-color: var(--oe-primary, #F97316);
    outline: none;
}

.oe-nav__mobile {
  display: none;
  border-top: 1px solid var(--oe-border);
  background: #fff;
}

.oe-nav__mobile.is-open {
  display: block;
}

.oe-nav__mobile .oe-nav-menu {
  list-style: none;
  margin: 0;
  padding: 1rem 0;
  display: grid;
  gap: 0.75rem;
}

.oe-nav__mobile .oe-nav-menu a {
  color: var(--oe-card-fg);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
}

.oe-nav__cta {
  display: none;
}

.oe-nav__cta .oe-btn-primary {
  padding: 0.55rem 1.25rem;
  font-size: 0.9rem;
}

@media (min-width: 1024px) {
  .oe-nav__menu { display: flex; }
  .oe-nav__cta { display: inline-flex; }
  .oe-nav__toggle { display: none; }
}

@media (min-width: 768px) {
  .oe-nav__cta { display: inline-flex; }
}

.oe-page {
  min-height: 60vh;
}

.oe-page-hero {
  position: relative;
  overflow: hidden;
  background: var(--oe-ink);
  color: #fff;
}

.oe-page-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(232,119,34,0.35), transparent 60%);
  opacity: 0.6;
}

.oe-page-hero__content {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 6rem;
}

.oe-page-hero__title {
  font-family: var(--oe-font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0;
}

.oe-page-hero__subtitle {
  margin-top: 1.25rem;
  color: rgba(255,255,255,0.7);
  max-width: 44rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.oe-section--soft {
  background: var(--oe-secondary-bg);
  border-top: 1px solid var(--oe-border);
  border-bottom: 1px solid var(--oe-border);
}

.oe-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.oe-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .oe-grid-2 { grid-template-columns: repeat(2, 1fr); }
  .oe-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.oe-layout-two {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.oe-layout-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .oe-layout-two { grid-template-columns: 1.4fr 1fr; }
  .oe-layout-sidebar { grid-template-columns: 1fr 320px; }
}

.oe-card {
  background: var(--contact-bgcolor);
  border: 1px solid var(--oe-border);
  border-radius: 1rem;
  padding: 1.75rem;
  box-shadow: var(--oe-shadow-soft);
}

.oe-card--tight { padding: 1.25rem; }

.oe-card__title {
  font-family: var(--oe-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}

.oe-muted {
  color: var(--oe-muted);
}

.oe-prose {
  line-height: 1.75;
  font-size: 1rem;
}

.oe-prose p { margin: 0 0 1rem; }
.oe-prose h2,
.oe-prose h3 {
  font-family: var(--oe-font-display);
  margin: 2rem 0 0.75rem;
}
.oe-prose ul {
  margin: 0 0 1.25rem 1.25rem;
}

/* ==========================================================================
   BLOG
   ========================================================================== */

.oe-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .oe-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

.oe-blog-card {
  background: var(--oe-card);
  border: 1px solid var(--oe-border);
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.oe-blog-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.oe-blog-card__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.oe-blog-card__title {
  font-family: var(--oe-font-display);
  font-size: 1.25rem;
  margin: 0;
}

.oe-sidebar-card {
  background: var(--oe-card);
  border: 1px solid var(--oe-border);
  border-radius: 1rem;
  padding: 1.5rem;
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.oe-form label {
  font-size: 0.9rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.5rem;
}

.oe-form input,
.oe-form textarea,
.oe-form select {
  width: 100%;
  border: 1px solid var(--oe-border);
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: var(--oe-font-body);
  background: #fff;
}

.oe-form input:focus,
.oe-form textarea:focus,
.oe-form select:focus {
  outline: none;
  border-color: #e87722;
  box-shadow: 0 0 0 3px rgba(232,119,34,0.18);
}

/* ==========================================================================
   MEDIA
   ========================================================================== */

.oe-media-frame {
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--oe-border);
}

/* ==========================================================================
   SUMMER CAMP INTERACTIVE
   ========================================================================== */

.oe-summer-wrap {
  background: #fdfcf9;
}

.oe-summer-progress {
  display: grid;
  gap: 0.75rem;
}

.oe-summer-progress__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.oe-summer-progress__bar span {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--oe-border);
}

.oe-summer-progress__bar span.is-active {
  background: #e87722;
}

.oe-summer-step {
  display: none;
}

.oe-summer-step.is-active {
  display: block;
}

.oe-summer-card {
  border: 2px solid var(--oe-border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  background: #fff;
  transition: all 0.3s ease;
  text-align: left;
  cursor: pointer;
}

.oe-summer-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  background: #fff; /* Reset any broken global hover backgrounds */
}

.oe-summer-card.is-selected {
  border-color: var(--oe-primary, #e87722);
  background-color: rgba(232, 119, 34, 0.03);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.oe-summer-card.is-selected .oe-pill {
  background-color: var(--oe-primary, #e87722);
  color: #fff;
  border-color: var(--oe-primary, #e87722);
}

/* Badge Text Toggle */
.oe-select-badge__selected {
  display: none;
}

.oe-summer-card.is-selected .oe-select-badge__default {
  display: none;
}

.oe-summer-card.is-selected .oe-select-badge__selected {
  display: inline;
}

.oe-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border: 2px solid var(--oe-border);
  border-radius: 1rem;
  padding: 1.25rem;
  background: #fff;
}

.oe-toggle.is-active {
  border-color: #e87722;
  background: color-mix(in srgb, #e87722 6%, #fff);
}

.oe-toggle__switch {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--oe-border);
  position: relative;
  transition: background 0.2s ease;
}

.oe-toggle__switch::after {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.oe-toggle.is-active .oe-toggle__switch {
  background: #e87722;
}

.oe-toggle.is-active .oe-toggle__switch::after {
  transform: translateX(20px);
}

.oe-receipt {
  border: 1px solid var(--oe-border);
  border-radius: 1.25rem;
  padding: 2rem;
  background: #fff;
  box-shadow: var(--oe-shadow-soft);
}

.oe-hidden {
  display: none !important;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.oe-site-footer {
  background-color: var(--oe-ink);
  color: var(--oe-cream);
  margin-top: 6rem;
}

.oe-site-footer__main {
  padding-top: 4rem;
  padding-bottom: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .oe-site-footer__main {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .oe-site-footer__main {
    grid-template-columns: repeat(5, 1fr);
  }
}

.oe-site-footer__col--brand {
  grid-column: span 2;
}

@media (min-width: 1024px) {
  .oe-site-footer__col--brand {
    grid-column: span 1;
  }
}

.oe-site-footer__brand-title {
  font-family: var(--oe-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.oe-site-footer__brand-title span {
  color: #e87722; /* primary */
}

.oe-site-footer__brand-desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.75rem;
  line-height: 1.625;
}

.oe-site-footer__title {
  font-family: var(--oe-font-display);
  font-size: 1.125rem;
  margin-bottom: 1rem;
  margin-top: 0;
  font-weight: 600;
}

.oe-site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.oe-site-footer__list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.oe-site-footer__list a:hover {
  color: #e87722;
}

.oe-site-footer__list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.oe-site-footer__list-item--top {
  align-items: flex-start;
}

.oe-site-footer__icon {
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.oe-site-footer__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.oe-site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.oe-site-footer__social-link:hover {
  background-color: #e87722;
}

.oe-site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.oe-site-footer__bottom-inner {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   PDF LIST SHORTCODE
   ========================================================================== */

.oe-pdf-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.oe-pdf-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background-color: var(--oe-ink);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  text-decoration: none;
  transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
  color: var(--oe-cream);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.oe-pdf-item:hover {
  transform: translateY(-3px);
  border-color: #e87722;
  background-color: color-mix(in srgb, var(--oe-ink) 95%, #fff);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.oe-pdf-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s ease;
}

.oe-pdf-item:hover .oe-pdf-item__icon {
  color: #e87722;
}

.oe-pdf-item__title {
  flex: 1;
  font-family: var(--oe-font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.oe-pdf-item__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.3s ease, transform 0.3s ease;
}

.oe-pdf-item:hover .oe-pdf-item__arrow {
  color: #e87722;
  transform: translateX(4px);
}

/* ==========================================================================
   TESTIMONIALS — BENTO GRID  (ported from React)
   Cinematic dark glassmorphism with the exact React 6-column bento layout.
   ========================================================================== */

/* Section-level dark background */
.oe-testimonials-section {
  background: var(--oe-ink);
  color: #fff;
}

/* Override pill & title colours inside the dark section */
.oe-testimonials-section .oe-pill {
  background: rgba(232, 119, 34, 0.14);
  color: #e87722;
}

.oe-testimonials-section .oe-section-title {
  color: var(--oe-cream);
}

/* ── Bento grid ────────────────────────────────────────────────────────── */

.oe-testimonials-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .oe-testimonials-bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, auto);
  }

  /* Top row: 3 cards */
  .oe-tcard--0, .oe-tcard--1, .oe-tcard--2 { grid-column: span 2; }
  
  /* Bottom row: 2 centered cards */
  .oe-tcard--3, .oe-tcard--4 { grid-column: span 3; }
}

/* ── Individual card ───────────────────────────────────────────────────── */

.oe-tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(22, 22, 26, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 1rem;
  padding: 1.75rem;
  overflow: hidden;
  z-index: 1;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.oe-tcard:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 119, 34, 0.45);
  box-shadow:
    0 14px 36px rgba(232, 119, 34, 0.14),
    0 0 0 1px rgba(232, 119, 34, 0.12);
}

/* Shimmer highlight on hover (glassmorphism refraction) */
.oe-tcard__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(232, 119, 34, 0.06) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
}

.oe-tcard:hover .oe-tcard__shimmer {
  opacity: 1;
}

/* ── Quote icon ────────────────────────────────────────────────────────── */

.oe-tcard__quote-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: #e87722;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

/* ── Stars ──────────────────────────────────────────────────────────────── */

.oe-tcard__stars {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 1rem;
}

/* ── Quote text ─────────────────────────────────────────────────────────── */

.oe-tcard__text {
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.65;
  margin: 0;
  flex: 1;
  font-size: 1rem;
}

/* ── Author ─────────────────────────────────────────────────────────────── */

.oe-tcard__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
}

.oe-tcard__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(232, 119, 34, 0.15);
  color: #e87722;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--oe-font-display);
  font-size: 0.9rem;
  flex-shrink: 0;
  border: 1px solid rgba(232, 119, 34, 0.18);
}

.oe-tcard__name {
  font-weight: 600;
  font-size: 0.875rem;
  color: #fff;
}

.oe-tcard__tag {
  font-size: 0.75rem;
  color: #e87722;
  margin-top: 0.1rem;
}

/* ==========================================================================
   SUMMER CAMP UPGRADES
   ========================================================================== */



/* Feature Cards */
.oe-feature-card {
  background-color: rgba(22, 22, 26, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.25rem;
  padding: 2rem;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.oe-feature-card:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 119, 34, 0.5);
  box-shadow: 0 10px 30px rgba(232, 119, 34, 0.15);
}
.oe-feature-card__icon {
  margin-bottom: 1.25rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(232, 119, 34, 0.1);
  border-radius: 50%;
}
.oe-feature-card h3 {
  font-family: var(--oe-font-display);
  color: #fff;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.oe-feature-card p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

/* Accordions */
.oe-accordion {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.oe-accordion__trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
  background: none;
  border: none;
  color: #fff;
  font-family: var(--oe-font-display);
  font-size: 1.2rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease;
}
.oe-accordion__trigger:hover {
  color: #e87722;
}
.oe-accordion__icon {
  transition: transform 0.4s ease;
  color: rgba(255, 255, 255, 0.5);
}
.oe-accordion__trigger[aria-expanded="true"] .oe-accordion__icon {
  transform: rotate(180deg);
  color: #e87722;
}
.oe-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.oe-accordion__inner {
  padding-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* Micro-Animations */
.oe-observe-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.oe-observe-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}



/* ==========================================================================
   SINGLE POST / DARK PAGES
   ========================================================================== */

.oe-dark-page {
  background-color: var(--oe-ink) !important;
  color: #e2e8f0;
}

.oe-single-hero {
  position: relative;
  padding: 6rem 0 3rem;
  text-align: center;
}

.oe-single-hero__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top center, rgba(232,119,34,0.15), transparent 70%);
  pointer-events: none;
}

.oe-single-hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

.oe-single-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.oe-single-date {
  color: #e87722;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.oe-single-title {
  font-family: var(--oe-font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

.oe-single-image-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.oe-single-image {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
  border-radius: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.oe-single-content {
  max-width: 800px;
  margin: 0 auto;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #e2e8f0;
}

.oe-single-content p {
  margin-bottom: 1.5rem;
}

.oe-single-content h1,
.oe-single-content h2,
.oe-single-content h3 {
  font-family: var(--oe-font-display);
  color: #fff;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  line-height: 1.3;
}

.oe-single-content h2 {
  font-size: 2.25rem;
  color: var(--oe-primary, #e87722);
}

.oe-single-content h3 {
  font-size: 1.75rem;
}

.oe-single-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 2rem 0;
}

.oe-single-content a {
  color: var(--oe-primary, #e87722);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.oe-single-content a:hover {
  color: #fff;
}

/* ==========================================================================
   NUCLEAR BLOG ARCHIVE OVERRIDE
   ========================================================================== */

.oe-dark-blog-container {
  background-color: var(--oe-ink, #0a0a0a) !important;
  min-height: 100vh;
  padding: 6rem 0;
}

.oe-dark-blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .oe-dark-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .oe-dark-blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.oe-dark-blog-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  height: 100%;
}

.oe-dark-blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232, 119, 34, 0.4);
  box-shadow: 0 15px 35px rgba(232, 119, 34, 0.1);
}

.oe-dark-blog-card__image-link {
  display: block;
  overflow: hidden;
}

.oe-dark-blog-card__image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.oe-dark-blog-card:hover .oe-dark-blog-card__image {
  transform: scale(1.05);
}

.oe-dark-blog-card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.oe-dark-blog-card__title {
  margin: 0 0 1rem 0;
  font-family: var(--oe-font-display);
  font-size: 1.5rem;
  line-height: 1.3;
}

.oe-dark-blog-card__title a {
  color: var(--oe-primary, #e87722) !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.oe-dark-blog-card__title a:hover {
  color: #fff !important;
}

.oe-dark-blog-card__excerpt {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
}

.oe-dark-blog-card__footer {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 1.25rem;
}

.oe-dark-blog-card__read-more {
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.oe-dark-blog-card__read-more:hover {
  color: var(--oe-primary, #e87722) !important;
}

/* ==========================================================================
   ABOUT PAGE ISOLATED STYLES
   ========================================================================== */

.oe-page-about {
  background-color: var(--oe-ink);
}

.oe-about-container {
  max-width: 1200px;
  margin: 0 auto;
}

.oe-about-hero {
  padding-top: 8rem;
  padding-bottom: 4rem;
  text-align: center;
}

.oe-about-quote {
  font-family: var(--oe-font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--oe-primary, #e87722);
  line-height: 1.3;
  max-width: 900px;
  margin: 0 auto 3rem;
  font-weight: 500;
  border-left: none;
  padding: 0;
}

.oe-about-narrative {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.oe-about-narrative p {
  color: var(--oe-text-light, rgba(255, 255, 255, 0.85));
  font-size: 1.125rem;
  line-height: 1.8;
  margin: 0;
}

/* Why Us Grid specifically for About Page */
.oe-about-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .oe-about-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.oe-about-why-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.25rem;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.oe-about-why-card:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 119, 34, 0.4);
  box-shadow: 0 10px 30px rgba(232, 119, 34, 0.1);
}

.oe-about-why-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: color-mix(in srgb, #e87722 15%, transparent);
  color: #e87722;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.oe-about-why-title {
  font-family: var(--oe-font-display);
  color: #fff;
  font-size: 1.35rem;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.oe-about-why-body {
  color: var(--oe-text-light, rgba(255, 255, 255, 0.75));
  line-height: 1.7;
  font-size: 1rem;
  margin: 0;
}

/* ==========================================================================
   TEACHER PAGE ISOLATED STYLES
   ========================================================================== */

.oe-teacher-spotlight {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.5rem;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

@media (min-width: 768px) {
  .oe-teacher-spotlight {
    grid-template-columns: 2fr 3fr;
    padding: 3rem;
  }
}

.oe-teacher-spotlight__image-wrap {
  width: 100%;
}

.oe-teacher-spotlight__image {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: 500px;
  object-fit: cover;
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.oe-teacher-spotlight__name {
  font-family: var(--oe-font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.oe-teacher-spotlight__bio {
  color: var(--oe-text-light, rgba(255, 255, 255, 0.75));
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2rem;
}

.oe-teacher-spotlight__credentials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .oe-teacher-spotlight__credentials {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

.oe-teacher-spotlight__credential-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.oe-teacher-spotlight__credential-card svg {
  color: var(--oe-primary, #e87722);
  flex-shrink: 0;
}

.oe-teacher-spotlight__credential-card span {
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
}

.oe-teacher-spotlight__social {
  display: flex;
  gap: 0.75rem;
}

.oe-teacher-spotlight__social a {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--oe-text-light, rgba(255, 255, 255, 0.75));
  transition: all 0.2s ease;
}

.oe-teacher-spotlight__social a:hover {
  border-color: var(--oe-primary, #e87722);
  color: var(--oe-primary, #e87722);
}


/* ==========================================================================
   TEACHER CARDS (Grid Items) STYLES & TYPOGRAPHY FIXES
   ========================================================================== */

.oe-teacher-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.5rem;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.oe-teacher-card:hover {
  transform: translateY(-5px);
  border-color: rgba(232, 119, 34, 0.4);
}

.oe-teacher-card__image-wrap {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--oe-surface, #1e1e1e);
}

.oe-teacher-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.oe-teacher-card:hover .oe-teacher-card__image {
  transform: scale(1.05);
}

.oe-teacher-card__content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.oe-teacher-card__role {
  margin-bottom: 0.5rem;
  align-self: flex-start;
}

.oe-teacher-card__title {
  font-family: var(--oe-font-display);
  font-size: 1.5rem;
  color: #FFFFFF;
  margin-top: 0.5rem;
  line-height: 1.3;
}

.oe-teacher-card__bio {
  color: #E5E5E5;
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  margin-top: 0.75rem;
  flex: 1;
}

.oe-teacher-card__specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1rem;
}

.oe-teacher-card__specialty-tag {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #E5E5E5;
}

.oe-teacher-card__social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.oe-teacher-card__social a {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E5E5E5;
  transition: all 0.2s ease;
}

.oe-teacher-card__social a:hover {
  border-color: var(--oe-primary, #e87722);
  color: var(--oe-primary, #e87722);
}

/* Global Typography override for specific teacher components to ensure #E5E5E5 */
.oe-teacher-spotlight__bio,
.oe-teacher-spotlight__credential-card span,
.oe-teacher-spotlight__social a {
  color: #E5E5E5 !important;
  letter-spacing: 0.01em;
  line-height: 1.7;
}

.oe-teacher-spotlight__name {
  color: #FFFFFF !important;
}


/* ==========================================================================
   PAYMENT PAGE STYLES
   ========================================================================== */

.oe-page-payment {
	background-color: var(--oe-ink);
}

.oe-payment-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 4rem;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

@media (min-width: 992px) {
	.oe-payment-container {
		grid-template-columns: 1fr 1fr;
		gap: 6rem;
		align-items: flex-start;
	}
}

.oe-payment-subtitle {
	color: #E5E5E5;
	font-size: 1.125rem;
	line-height: 1.7;
	margin-bottom: 2.5rem;
	max-width: 500px;
}

/* Glassmorphism Bank Card */
.oe-bank-card {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 1.5rem;
	padding: 2.5rem;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.oe-bank-card__row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.oe-bank-card__row:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.oe-bank-card__label {
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.oe-bank-card__value {
	color: #FFFFFF;
	font-size: 1.25rem;
	font-family: var(--oe-font-display);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.oe-bank-card__copy-wrapper {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.oe-copy-btn {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	color: #E5E5E5;
	cursor: pointer;
	padding: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.oe-copy-btn:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--oe-primary, #e87722);
	border-color: var(--oe-primary, #e87722);
}

/* Form Styles */
.oe-payment-form-wrapper {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 1.5rem;
	padding: 3rem;
}

.oe-form-group {
	margin-bottom: 1.75rem;
}

.oe-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.oe-form-row {
		grid-template-columns: 1fr 1fr;
	}
}

.oe-form-group label {
	display: block;
	color: #E5E5E5;
	font-size: 0.95rem;
	margin-bottom: 0.75rem;
	font-weight: 500;
}

.oe-payment-form input,
.oe-payment-form select {
	width: 100%;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
	color: #FFFFFF;
	padding: 1rem 1.25rem;
	font-size: 1rem;
	transition: all 0.3s ease;
	outline: none;
}

.oe-payment-form input:focus,
.oe-payment-form select:focus {
	border-color: var(--oe-primary, #e87722);
	background: rgba(232, 119, 34, 0.05);
	box-shadow: 0 0 0 4px rgba(232, 119, 34, 0.1);
}

.oe-payment-form input::placeholder {
	color: rgba(255, 255, 255, 0.2);
}

/* Highlight TID Field */
.oe-form-group--highlight label {
	color: var(--oe-primary, #e87722);
}

.oe-form-group--highlight input {
	border-color: rgba(232, 119, 34, 0.3);
}

.oe-payment-submit {
	width: 100%;
	padding: 1.25rem;
	font-size: 1.1rem;
	margin-top: 1rem;
	text-align: center;
	background-color: #F97316;
	color: #FFFFFF;
	border: none;
	border-radius: 0.75rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.oe-payment-submit:hover {
	background-color: #ea580c;
}

/* Success & Error Messages */
.oe-payment-error {
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
	color: #fca5a5;
	padding: 1rem;
	border-radius: 0.75rem;
	margin-bottom: 2rem;
	font-size: 0.95rem;
}

.oe-payment-success {
	text-align: center;
	padding: 2rem 0;
}

.oe-payment-success__icon {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 2rem;
}

.oe-payment-success h2 {
	font-family: var(--oe-font-display);
	color: #FFFFFF;
	font-size: 2rem;
	margin-bottom: 1rem;
}

.oe-payment-success p {
	color: #E5E5E5;
	line-height: 1.7;
	font-size: 1.1rem;
}

/* Fix dropdown styling for dark theme */
.oe-payment-form select option {
	background-color: var(--oe-ink, #000);
	color: #fff;
}

/* ==========================================================================
   FORCE FIX TEACHER TYPOGRAPHY
   ========================================================================== */
body .oe-teacher-spotlight p.oe-teacher-spotlight__bio,
body .oe-teacher-card p.oe-teacher-card__bio,
body .oe-teacher-spotlight p,
body .oe-teacher-card p,
.oe-teacher-spotlight__credential-card span,
.oe-teacher-card__specialty-tag,
.oe-teacher-spotlight__social a,
.oe-teacher-card__social a {
  color: #E5E5E5 !important;
}

body .oe-teacher-spotlight h2.oe-teacher-spotlight__name,
body .oe-teacher-card h3.oe-teacher-card__title,
body .oe-teacher-spotlight h2,
body .oe-teacher-card h3 {
  color: #FFFFFF !important;
}

/* ==========================================================================
   SUMMER CAMP: DARK CINEMATIC & GLASSMORPHISM OVERRIDES
   ========================================================================== */

body .oe-summer-wrap {
  background-color: var(--oe-ink);
}

body .oe-summer-card,
body .oe-receipt,
body #oe-register {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 1.5rem !important;
  padding: 1.5rem;
  text-align: left;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  color: #E5E5E5;
}

body .oe-summer-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(232, 119, 34, 0.4) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body .oe-summer-card.is-selected {
  border-color: var(--oe-primary, #e87722) !important;
  background: rgba(232, 119, 34, 0.05) !important;
  box-shadow: 0 0 20px rgba(232, 119, 34, 0.15) !important;
}

body .oe-summer-card .oe-card__title {
  color: #FFFFFF !important;
}

body .oe-summer-card strong {
  color: #FFFFFF;
}

body .oe-toggle {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 1rem !important;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #E5E5E5;
  cursor: pointer;
  transition: all 0.3s ease;
}

body .oe-toggle:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

body .oe-toggle.is-active {
  border-color: var(--oe-primary, #e87722) !important;
  background: rgba(232, 119, 34, 0.05) !important;
}

body .oe-toggle__switch {
  width: 2.75rem;
  height: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  position: relative;
  transition: background 0.3s ease;
}

body .oe-toggle__switch::after {
  content: '';
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1.25rem;
  height: 1.25rem;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

body .oe-toggle.is-active .oe-toggle__switch {
  background: var(--oe-primary, #e87722);
}

body .oe-toggle.is-active .oe-toggle__switch::after {
  transform: translateX(1.25rem);
}

body .oe-receipt {
  padding: 2.5rem !important;
}

body .oe-receipt strong,
body .oe-receipt .oe-font-display {
  color: #FFFFFF !important;
}

body .oe-receipt #oe-total {
  color: var(--oe-primary, #e87722) !important;
}

/* Form overrides inside #oe-register */
body #oe-register input,
body #oe-register textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  color: #FFFFFF;
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
  transition: all 0.3s ease;
  outline: none;
  margin-top: 0.5rem;
}

body #oe-register input:focus,
body #oe-register textarea:focus {
  border-color: var(--oe-primary, #e87722);
  background: rgba(232, 119, 34, 0.05);
  box-shadow: 0 0 0 4px rgba(232, 119, 34, 0.1);
}

body #oe-register label {
  color: #E5E5E5;
  font-size: 0.95rem;
  font-weight: 500;
}


/* ==========================================================================
   SUMMER CAMP PAGE (PORTED FROM REACT)
   ========================================================================== */
.oe-summer-camp-page {
	background-color: #000000; /* Dark cinematic */
	min-height: 100vh;
	color: #E5E5E5;
	font-family: inherit;
}

.oe-summer-camp-page .sc-container {
	max-width: 64rem;
	margin: 0 auto;
	padding: 3rem 1.5rem;
}

.oe-summer-camp-page .text-white {
	color: #FFFFFF;
}

.oe-summer-camp-page .text-center {
	text-align: center;
}

.oe-summer-camp-page .sc-header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.oe-summer-camp-page .sc-pill {
	display: inline-block;
	padding: 0.35rem 1rem;
	border-radius: 999px;
	background: rgba(249, 115, 22, 0.1);
	color: #F97316;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.75rem;
	border: 1px solid rgba(249, 115, 22, 0.2);
}

.oe-summer-camp-page .sc-title {
	font-family: var(--oe-font-display, inherit);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	line-height: 1.1;
	color: #FFFFFF;
	margin: 0;
	letter-spacing: -0.02em;
}

.oe-summer-camp-page .sc-primary-text {
	color: #F97316;
}

.oe-summer-camp-page .sc-subtitle {
	margin-top: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
	font-size: 1.125rem;
}

.oe-summer-camp-page .sc-progress {
	margin-bottom: 2.5rem;
}

.oe-summer-camp-page .sc-progress-header {
	display: flex;
	justify-content: space-between;
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 0.5rem;
}

.oe-summer-camp-page .sc-progress-bars {
	display: flex;
	gap: 0.5rem;
}

.oe-summer-camp-page .sc-bar {
	height: 0.5rem;
	flex: 1;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	transition: background-color 0.3s ease;
}

.oe-summer-camp-page .sc-bar.is-active {
	background: #F97316;
}

.oe-summer-camp-page .sc-progress-labels {
	display: none;
	justify-content: space-between;
	margin-top: 0.75rem;
	font-size: 0.75rem;
}

@media (min-width: 768px) {
	.oe-summer-camp-page .sc-progress-labels {
		display: flex;
	}
}

.oe-summer-camp-page .sc-progress-labels span {
	color: rgba(255, 255, 255, 0.5);
}

.oe-summer-camp-page .sc-progress-labels span.is-active {
	color: #FFFFFF;
}

.oe-summer-camp-page .sc-progress-labels span.is-current {
	font-weight: 600;
	color: #F97316;
}

.oe-summer-camp-page .sc-step {
	display: none;
	animation: fadeIn 0.3s ease-out;
}

.oe-summer-camp-page .sc-step.is-active {
	display: block;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.oe-summer-camp-page .sc-h2 {
	font-family: var(--oe-font-display, inherit);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: #FFFFFF;
	margin: 0;
}

.oe-summer-camp-page .sc-h3 {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.5);
	margin-bottom: 1rem;
	margin-top: 0;
}

.oe-summer-camp-page .sc-p {
	color: rgba(255, 255, 255, 0.6);
	margin-top: 0.25rem;
}

.oe-summer-camp-page .sc-grid {
	display: grid;
	gap: 1rem;
	margin-top: 2rem;
}

@media (min-width: 640px) {
	.oe-summer-camp-page .sc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.oe-summer-camp-page .sc-course-card {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 2px solid rgba(255, 255, 255, 0.05);
	border-radius: 1rem;
	padding: 1.5rem;
	text-align: left;
	cursor: pointer;
	position: relative;
	transition: all 0.3s ease;
	color: #E5E5E5;
	display: block;
	width: 100%;
}

.oe-summer-camp-page .sc-course-card:hover {
	border-color: rgba(249, 115, 22, 0.4);
}

.oe-summer-camp-page .sc-course-card.is-selected {
	border-color: #F97316;
	background: rgba(249, 115, 22, 0.05);
	box-shadow: 0 4px 20px rgba(249, 115, 22, 0.15);
}

.oe-summer-camp-page .sc-course-check {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: #F97316;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(0.8);
	transition: all 0.2s ease;
}

.oe-summer-camp-page .sc-course-card.is-selected .sc-course-check {
	opacity: 1;
	transform: scale(1);
}

.oe-summer-camp-page .sc-course-title {
	font-size: 1.125rem;
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.oe-summer-camp-page .sc-bold {
	font-weight: 700;
}

.oe-summer-camp-page .sc-medium {
	font-weight: 500;
}

.oe-summer-camp-page .sc-muted {
	color: rgba(255, 255, 255, 0.5);
}

.oe-summer-camp-page .sc-course-meta {
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 0.75rem;
	display: grid;
	gap: 0.25rem;
}

.oe-summer-camp-page .sc-course-fees {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.875rem;
	display: grid;
	gap: 0.25rem;
}

.oe-summer-camp-page .sc-fee-row {
	display: flex;
	justify-content: space-between;
}

.oe-summer-camp-page .sc-xs {
	font-size: 0.75rem;
}

.oe-summer-camp-page .sc-actions {
	margin-top: 2rem;
	display: flex;
}

.oe-summer-camp-page .sc-actions.right {
	justify-content: flex-end;
}

.oe-summer-camp-page .sc-actions.split {
	justify-content: space-between;
}

.oe-summer-camp-page .sc-actions.center {
	justify-content: center;
}

.oe-summer-camp-page .sc-btn-primary {
	background: #F97316;
	color: #FFFFFF;
	border: none;
	border-radius: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}

.oe-summer-camp-page .sc-btn-primary:hover:not(:disabled) {
	background: #ea580c;
}

.oe-summer-camp-page .sc-btn-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.oe-summer-camp-page .sc-btn-outline {
	background: transparent;
	color: #E5E5E5;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0.5rem;
	padding: 0.75rem 1.5rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s;
}

.oe-summer-camp-page .sc-btn-outline:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.4);
}

.oe-summer-camp-page .sc-discount-grid {
	display: grid;
	gap: 2rem;
	margin-top: 2rem;
}

@media (min-width: 1024px) {
	.oe-summer-camp-page .sc-discount-grid {
		grid-template-columns: 1fr 360px;
	}
}

.oe-summer-camp-page .sc-discount-card {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(12px);
	border: 2px solid rgba(255, 255, 255, 0.05);
	border-radius: 1rem;
	padding: 1.25rem;
	margin-bottom: 1rem;
	transition: all 0.3s;
}

.oe-summer-camp-page .sc-discount-card.is-active {
	border-color: #F97316;
	background: rgba(249, 115, 22, 0.05);
}

.oe-summer-camp-page .sc-discount-card.auto-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.oe-summer-camp-page .sc-discount-card.is-disabled {
	opacity: 0.5;
}

.oe-summer-camp-page .sc-dc-trigger {
	width: 100%;
	background: transparent;
	border: none;
	color: inherit;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	text-align: left;
}

.oe-summer-camp-page .sc-dc-switch-wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.oe-summer-camp-page .sc-dc-pct {
	font-size: 1.125rem;
	font-weight: 700;
	color: #F97316;
}

.oe-summer-camp-page .sc-switch {
	width: 2.75rem;
	height: 1.5rem;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	position: relative;
	transition: background 0.3s;
}

.oe-summer-camp-page .sc-discount-card.is-active .sc-switch {
	background: #F97316;
}

.oe-summer-camp-page .sc-switch-knob {
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	width: 1.25rem;
	height: 1.25rem;
	background: #FFFFFF;
	border-radius: 50%;
	transition: transform 0.3s;
}

.oe-summer-camp-page .sc-discount-card.is-active .sc-switch-knob {
	transform: translateX(1.25rem);
}

.oe-summer-camp-page .sc-dc-expanded {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.oe-summer-camp-page .sc-dc-expanded input {
	width: 5rem;
	padding: 0.5rem;
	background: rgba(0,0,0,0.2);
	border: 1px solid rgba(255,255,255,0.2);
	color: white;
	border-radius: 0.375rem;
	margin-top: 0.5rem;
	outline: none;
}

.oe-summer-camp-page .sc-summary {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 1rem;
	padding: 1.5rem;
	height: max-content;
}

@media (min-width: 1024px) {
	.oe-summer-camp-page .sc-summary {
		position: sticky;
		top: 6rem;
	}
}

.oe-summer-camp-page .sc-summary-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #FFFFFF;
	margin-bottom: 1rem;
	margin-top: 0;
}

.oe-summer-camp-page .sc-sl {
	padding-bottom: 0.75rem;
	margin-bottom: 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.oe-summer-camp-page .sc-sl-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.6);
	margin-top: 0.25rem;
}

.oe-summer-camp-page .sc-discount-color {
	color: #22c55e;
}

.oe-summer-camp-page .sc-summary-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 0.75rem;
	margin-top: 0.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.oe-summer-camp-page .sc-total-val {
	font-size: 1.5rem;
	font-weight: 700;
	color: #F97316;
}

/* Receipt */
.oe-summer-camp-page .sc-receipt {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 1rem;
	padding: 2rem;
	max-width: 42rem;
	margin: 2rem auto 0;
	box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

@media (min-width: 768px) {
	.oe-summer-camp-page .sc-receipt {
		padding: 2.5rem;
	}
}

.oe-summer-camp-page .sc-receipt-header {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 1.5rem;
}

.oe-summer-camp-page .sc-receipt-logo {
	font-family: var(--oe-font-display, inherit);
	font-size: 1.875rem;
	font-weight: 700;
	color: #F97316;
}

.oe-summer-camp-page .sc-receipt-meta {
	text-align: right;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
}

.oe-summer-camp-page .sc-receipt-body {
	padding: 1.5rem 0;
}

.oe-summer-camp-page .sc-rl {
	margin-bottom: 1rem;
}

.oe-summer-camp-page .sc-rl-row {
	display: flex;
	justify-content: space-between;
	font-size: 0.875rem;
	margin-bottom: 0.35rem;
}

.oe-summer-camp-page .sc-receipt-footer {
	border-top: 2px solid rgba(255, 255, 255, 0.1);
	padding-top: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.oe-summer-camp-page .sc-total-label {
	font-weight: 700;
	font-size: 1.125rem;
	color: #FFFFFF;
}

.oe-summer-camp-page .sc-receipt-discounts {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px dashed rgba(255, 255, 255, 0.2);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.6);
}

/* Form */
.oe-summer-camp-page .sc-form-wrap {
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 1rem;
	padding: 1.5rem;
	margin-top: 2rem;
}

@media (min-width: 768px) {
	.oe-summer-camp-page .sc-form-wrap {
		padding: 2rem;
	}
}

.oe-summer-camp-page .sc-form-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.oe-summer-camp-page .sc-form-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.oe-summer-camp-page .sc-field label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: #FFFFFF;
	margin-bottom: 0.5rem;
}

.oe-summer-camp-page .sc-field.full {
	grid-column: 1 / -1;
}

.oe-summer-camp-page .sc-req {
	color: #F97316;
}

.oe-summer-camp-page .sc-field input,
.oe-summer-camp-page .sc-field textarea {
	width: 100%;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.5rem;
	color: #FFFFFF;
	padding: 0.65rem 1rem;
	font-size: 0.875rem;
	outline: none;
	transition: all 0.2s;
	box-sizing: border-box;
}

.oe-summer-camp-page .sc-field input:focus,
.oe-summer-camp-page .sc-field textarea:focus {
	border-color: #F97316;
	box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
}

.oe-summer-camp-page .sc-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.oe-summer-camp-page .sc-badge {
	background: rgba(249, 115, 22, 0.1);
	color: #F97316;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 500;
}

.oe-summer-camp-page .sc-reg-total {
	font-family: var(--oe-font-display, inherit);
	font-size: 1.5rem;
	font-weight: 700;
	color: #F97316;
}

/* Success */
.oe-summer-camp-page .sc-success-box {
	text-align: center;
	max-width: 36rem;
	margin: 3rem auto;
}

.oe-summer-camp-page .sc-success-icon {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
}

@media print {
	.no-print { display: none !important; }
	.print-receipt { border: none !important; box-shadow: none !important; padding: 0 !important; }
}


:root {
  /* Synced from React Dark Mode */
  --oe-bg-main: #262321;
  --oe-bg-card: #302E2D;
  --oe-text-primary: #F6F5F2;
  --oe-text-secondary: #B3B3B3;
  --oe-accent: #E87722;
}

body {
  background-color: var(--oe-bg-main) !important;
  color: var(--oe-text-secondary) !important;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
  color: var(--oe-text-primary) !important;
}

body p, body span, body li, body a {
  color: var(--oe-text-secondary) !important;
}

body .oe-teacher-section h1, body .oe-teacher-section h2, body .oe-teacher-section h3, body .oe-teacher-section h4, body .oe-teacher-section h5, body .oe-teacher-section h6,
body .oe-page-teachers h1, body .oe-page-teachers h2, body .oe-page-teachers h3, body .oe-page-teachers h4, body .oe-page-teachers h5, body .oe-page-teachers h6,
body .oe-teacher-spotlight h1, body .oe-teacher-spotlight h2, body .oe-teacher-spotlight h3, body .oe-teacher-spotlight h4, body .oe-teacher-spotlight h5, body .oe-teacher-spotlight h6,
body .oe-teacher-card h1, body .oe-teacher-card h2, body .oe-teacher-card h3, body .oe-teacher-card h4, body .oe-teacher-card h5, body .oe-teacher-card h6 {
  color: var(--oe-text-primary) !important;
}

body .oe-teacher-section p, body .oe-teacher-section span, body .oe-teacher-section li, body .oe-teacher-section a,
body .oe-page-teachers p, body .oe-page-teachers span, body .oe-page-teachers li, body .oe-page-teachers a,
body .oe-teacher-spotlight p, body .oe-teacher-spotlight span, body .oe-teacher-spotlight li, body .oe-teacher-spotlight a,
body .oe-teacher-card p, body .oe-teacher-card span, body .oe-teacher-card li, body .oe-teacher-card a {
  color: var(--oe-text-secondary) !important;
}

/* ==========================================================================
   SMART CONTEXT-AWARE DESIGN SYSTEM
   Intelligently cascades text colors based on the container's background tone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CONTEXT: LIGHT CONTAINERS (White/Light Backgrounds)
   Flip the CSS variables so all children natively inherit dark text.
   -------------------------------------------------------------------------- */
.oe-site-header,
.oe-nav__mobile,
.oe-feature-card,
.oe-why-us-card,
.oe-why-card,
.oe-step-card,
.oe-course-card,
.wpforms-container-full.light-bg /* Example target for white forms */ {
  --oe-text-primary: #1A1A1A;
  --oe-text-secondary: #333333;
}

/* --------------------------------------------------------------------------
   CONTEXT: DARK CONTAINERS (Dark/Ink Backgrounds)
   Explicitly declare dark containers to ensure they use light text.
   -------------------------------------------------------------------------- */
.oe-how,
.oe-page-hero,
.oe-card,
.oe-isolated-form-wrapper {
  --oe-text-primary: #F6F5F2;
  --oe-text-secondary: #B3B3B3;
}

/* --------------------------------------------------------------------------
   UNIVERSAL TYPOGRAPHY APPLICATION
   Elements blindly inherit whatever variable context they are inside.
   -------------------------------------------------------------------------- */
.oe-site-header a, .oe-nav__mobile a, .oe-nav__brand,
.oe-feature-card h1, .oe-feature-card h2, .oe-feature-card h3, .oe-feature-card h4, .oe-feature-card h5, .oe-feature-card h6,
.oe-why-us-card h1, .oe-why-us-card h2, .oe-why-us-card h3, .oe-why-us-card h4, .oe-why-us-card h5, .oe-why-us-card h6,
.oe-why-card h1, .oe-why-card h2, .oe-why-card h3, .oe-why-card h4, .oe-why-card h5, .oe-why-card h6,
.oe-step-card h1, .oe-step-card h2, .oe-step-card h3, .oe-step-card h4, .oe-step-card h5, .oe-step-card h6,
.oe-course-card h1, .oe-course-card h2, .oe-course-card h3, .oe-course-card h4, .oe-course-card h5, .oe-course-card h6,
.oe-how h1, .oe-how h2, .oe-how h3, .oe-how h4, .oe-how h5, .oe-how h6,
.oe-card h1, .oe-card h2, .oe-card h3, .oe-card h4, .oe-card h5, .oe-card h6,
.oe-isolated-form-wrapper h1, .oe-isolated-form-wrapper h2, .oe-isolated-form-wrapper h3, .oe-isolated-form-wrapper h4, .oe-isolated-form-wrapper h5, .oe-isolated-form-wrapper h6 {
  color: var(--oe-text-primary) !important;
}

.oe-feature-card p, .oe-feature-card span:not(.oe-pill), .oe-feature-card li,
.oe-why-us-card p, .oe-why-us-card span:not(.oe-pill), .oe-why-us-card li,
.oe-why-card p, .oe-why-card span:not(.oe-pill), .oe-why-card li,
.oe-step-card p, .oe-step-card span:not(.oe-pill), .oe-step-card li,
.oe-course-card p, .oe-course-card span:not(.oe-pill), .oe-course-card li,
.oe-how p, .oe-how span:not(.oe-pill), .oe-how li,
.oe-card p, .oe-card span:not(.oe-pill), .oe-card li,
.oe-isolated-form-wrapper p, .oe-isolated-form-wrapper span:not(.oe-pill), .oe-isolated-form-wrapper li {
  color: var(--oe-text-secondary) !important;
}

/* Keep Accent Colors for Icons & Links */
.oe-site-header a:hover, .oe-nav__mobile a:hover,
.oe-why-card svg, .oe-step-card svg {
  color: var(--oe-accent) !important;
}

/* --------------------------------------------------------------------------
   FORM ELEMENTS (Intelligently inheriting Context)
   -------------------------------------------------------------------------- */
.oe-isolated-form-wrapper label,
.oe-card.oe-form label {
  color: var(--oe-text-primary) !important;
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
}

.oe-isolated-form-wrapper input:not([type=submit]),
.oe-isolated-form-wrapper select,
.oe-isolated-form-wrapper textarea,
.oe-card.oe-form input:not([type=submit]),
.oe-card.oe-form select,
.oe-card.oe-form textarea {
  color: var(--oe-text-primary) !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.oe-isolated-form-wrapper input:not([type=submit]):focus,
.oe-isolated-form-wrapper select:focus,
.oe-isolated-form-wrapper textarea:focus,
.oe-card.oe-form input:not([type=submit]):focus,
.oe-card.oe-form select:focus,
.oe-card.oe-form textarea:focus {
  border-color: var(--oe-accent) !important;
  background-color: rgba(249, 115, 22, 0.05) !important;
  outline: none;
}


/* ==========================================================================
   SPECIFIC FIX FOR COURSE CARDS ONLY (Courses Page)
   ========================================================================== */
.oe-courses-grid .oe-card {
    background-color: #ffffff !important;
}

.oe-courses-grid .oe-card h1, 
.oe-courses-grid .oe-card h2, 
.oe-courses-grid .oe-card h3, 
.oe-courses-grid .oe-card p, 
.oe-courses-grid .oe-card span,
.oe-courses-grid .oe-card .oe-muted,
.oe-courses-grid .oe-card .duration,
.oe-courses-grid .oe-card .price {
    color: #1A1A1A !important; 
}


/* --- PREMIUM DARK MODE FIX FOR FORMS (CONTACT & ENROLL) --- */

/* Make the form container/card dark */
.wpforms-container, 
.wpforms-container-full,
.page-template-page-contact .card,
.page-template-page-enroll .card {
    background-color: #0A0A0A !important; /* Deep cinematic dark */
    border: 1px solid #222222 !important; /* Subtle border */
    border-radius: 12px !important;
    padding: 30px !important;
}

/* Form Labels & Headings (Light Text) */
.wpforms-container .wpforms-field-label,
.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-title {
    color: #E5E5E5 !important;
}

/* Inputs, Selects, & Textareas (Dark inputs, light text) */
.wpforms-container input[type=text],
.wpforms-container input[type=email],
.wpforms-container input[type=tel],
.wpforms-container input[type=number],
.wpforms-container select,
.wpforms-container textarea {
    background-color: #111111 !important; /* Slightly lighter dark for inputs */
    color: #FFFFFF !important;
    border: 1px solid #333333 !important;
    border-radius: 6px !important;
}

/* Input Focus State (Cinematic Orange Glow) */
.wpforms-container input:focus,
.wpforms-container textarea:focus,
.wpforms-container select:focus {
    border-color: #F97316 !important;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.3) !important;
    outline: none !important;
}

/* Placeholder Text */
.wpforms-container input::placeholder,
.wpforms-container textarea::placeholder {
    color: #666666 !important;
}


/* ==========================================================================
   DARK BACKGROUND FIX FOR CONTACT & ENROLL PAGE CONTAINERS
   ========================================================================== */
.page-template-page-contact .oe-card,
.page-template-page-enroll .oe-card {
    background-color: var(--oe-bg-main, #0A0A0A) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px;
}


/* --- MOBILE HAMBURGER MENU FIX --- */

/* Reset the button background and force visibility */
button.menu-toggle, 
.navbar-toggler, 
.mobile-menu-button {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Target the SVG or Font Icon inside the toggle */
button.menu-toggle svg, 
.navbar-toggler svg,
button.menu-toggle i,
button.menu-toggle span {
    fill: #F97316 !important; /* Oracdemia Orange */
    stroke: #F97316 !important;
    color: #F97316 !important;
}

/* Remove the blue hover/focus effect */
button.menu-toggle:hover, 
button.menu-toggle:focus,
button.menu-toggle:active,
.navbar-toggler:hover,
.navbar-toggler:focus {
    background-color: transparent !important;
    outline: none !important;
    opacity: 0.8 !important;
}

/* --- Astra Blog Grid & Dark Cinematic Override --- */

/* 1. Grid Layout for Blog Archive */
.ast-row,
.blog-layout-1,
.ast-separate-container .ast-article-post {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 30px !important;
}

/* 2. Card Styling */
.ast-article-inner,
.blog .post {
    background-color: #0A0A0A !important;
    border: 1px solid #222222 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
}

/* Add padding back to content area */
.ast-article-inner > .entry-content,
.ast-article-inner > .entry-header,
.ast-article-inner > .entry-meta,
.ast-article-inner > .ast-excerpt-container {
    padding: 0 24px !important;
}

.ast-article-inner > .entry-header {
    padding-top: 24px !important;
}

.ast-article-inner > .entry-content,
.ast-article-inner > .ast-excerpt-container {
    padding-bottom: 24px !important;
}

/* 3. Image Visibility & Styling */
.ast-blog-featured-section,
.post-thumb {
    display: block !important;
    width: 100% !important;
}

.ast-blog-featured-section img,
.post-thumb img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
}

/* 4. Typography */
.ast-article-inner .entry-title a,
.blog .post .entry-title a {
    color: #F97316 !important;
    text-decoration: none !important;
}

.ast-article-inner .entry-content p,
.ast-article-inner .entry-summary p,
.ast-article-inner .ast-excerpt-container p,
.blog .post .entry-content p {
    color: #A3A3A3 !important;
}

/* 5. Hover Effect */
.ast-article-inner:hover,
.blog .post:hover {
    border-color: #F97316 !important;
    transform: translateY(-5px) !important;
}

/* --- Select Dropdown Options Fix --- */
#course_interest option {
    background-color: #111111 !important;
    color: #ffffff !important;
}

/* --- Course Buttons Hover Fix (For White Cards) --- */
.oe-course-card .oe-btn-outline,
.oe-btn-outline {
    background-color: transparent !important;
    border: 1px solid #F97316 !important;
    color: #F97316 !important;
    border-radius: 6px !important;
    transition: all 0.3s ease-in-out !important;
}

.oe-course-card .oe-btn-outline:hover, 
.oe-course-card .oe-btn-outline:focus,
.oe-btn-outline:hover, 
.oe-btn-outline:focus {
    background-color: #F97316 !important;
    border-color: #F97316 !important;
    color: #ffffff !important;
}