/* =====================================================
   ORAM Next Gen Festival 2026 — Rebrand v4
   Dark editorial · Wix Madefor Display · #E8440A
   ===================================================== */

/* === Design Tokens === */
:root {
  --red:        #E8440A;
  --red-dark:   #C93800;
  --pink:       #E91E8C;
  --dark:       #0C0C0C;
  --dark2:      #141414;
  --dark3:      #1C1C1C;
  --pale:       #EBF4FA;
  --grey:       #EBF4FA;
  --text:       #F8F8F6;
  --mu:         rgba(248,248,246,0.55);
  --bd:         rgba(255,255,255,0.07);
  --font-heading: 'Wix Madefor Display', system-ui, sans-serif;
  /* Keep muted dark so light sections stay readable */
  --muted:      #666;
}

/* === Base === */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
body {
  background: var(--dark) !important;
  color: var(--text) !important;
}

/* === Typography — headings === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
}

/* =====================================================
   LIGHT SECTION OVERRIDES
   Applies to: class="light-section" AND inline pale/grey bg
   ===================================================== */

/* Background */
.light-section { background: var(--pale) !important; }

/* Headings */
.light-section h1, .light-section h2, .light-section h3, .light-section h4,
.light-section .section-h, .light-section .section-title, .light-section .focus-h,
.light-section .newsletter-h, .light-section .page-hero h1,
[style*="var(--pale)"] h1, [style*="var(--pale)"] h2, [style*="var(--pale)"] h3,
[style*="var(--grey)"] h1, [style*="var(--grey)"] h2, [style*="var(--grey)"] h3
{ color: #111 !important; }

/* Overlines / labels */
.light-section .overline, .light-section .s-or,
[style*="var(--grey)"] .overline, [style*="var(--pale)"] .overline
{ color: var(--red) !important; }

/* Section title & sub */
.light-section .section-title, [style*="var(--grey)"] .section-title, [style*="var(--pale)"] .section-title { color: #111 !important; }
.light-section .section-sub, [style*="var(--grey)"] .section-sub, [style*="var(--pale)"] .section-sub { color: #555 !important; }

/* Body text */
.light-section p, .light-section li,
.light-section .section-body, .light-section .focus-p,
.light-section .newsletter-body, .light-section .section-sub,
[style*="var(--grey)"] p, [style*="var(--pale)"] p,
[style*="var(--grey)"] li, [style*="var(--pale)"] li
{ color: #444 !important; }

/* Strong & span text */
.light-section strong { color: #111 !important; }

/* Form inputs — white on pale bg */
.light-section .form-input,
[style*="var(--pale)"] .form-input,
[style*="var(--grey)"] .form-input {
  background: white !important;
  border-color: rgba(0,0,0,0.15) !important;
  color: #111 !important;
}
.light-section .form-input::placeholder,
[style*="var(--pale)"] .form-input::placeholder,
[style*="var(--grey)"] .form-input::placeholder
{ color: rgba(0,0,0,0.3) !important; }

/* Outline buttons on pale bg */
.light-section .btn-outline,
[style*="var(--pale)"] .btn-outline,
[style*="var(--grey)"] .btn-outline {
  border-color: rgba(0,0,0,0.25) !important;
  color: #111 !important;
}
.light-section .btn-outline:hover,
[style*="var(--pale)"] .btn-outline:hover,
[style*="var(--grey)"] .btn-outline:hover {
  background: #111 !important;
  color: white !important;
  border-color: #111 !important;
}

/* Details/FAQ on pale bg */
.light-section details { background: white !important; border-color: rgba(0,0,0,0.08) !important; }
.light-section details summary { color: #111 !important; }
.light-section details[open] summary { color: var(--red) !important; }
.light-section details p { color: #555 !important; }

/* === Navigation — layout (shared across all pages) === */
#navbar {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 100 !important;
  padding: 1rem 1.5rem !important;
}
@media (min-width: 1024px) {
  #navbar { padding: 1.1rem 3rem !important; }
}

.nav-inner {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#nav-logo { height: 36px !important; display: block !important; }
@media (min-width: 768px) { #nav-logo { height: 42px !important; } }

.nav-left { display: flex !important; align-items: center !important; gap: 1rem !important; }
.nav-date { display: none !important; font-size: 0.68rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #F8F8F6 !important; padding-left: 1rem !important; border-left: 1px solid rgba(255,255,255,0.35) !important; white-space: nowrap !important; }
@media (min-width: 768px) { .nav-date { display: block !important; } }

.nav-links {
  display: none !important;
  align-items: center !important;
  gap: 2rem !important;
}
@media (min-width: 1024px) { .nav-links { display: flex !important; } }

.nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

#mobile-ticket-btn { display: inline-block !important; }
#nav-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important; height: 38px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}
@media (min-width: 1024px) {
  #mobile-ticket-btn { display: none !important; }
  #nav-toggle { display: none !important; }
}

#mobile-nav {
  display: none;
  position: absolute !important;
  top: 100% !important; left: 0 !important; right: 0 !important;
  padding: 1rem 1.5rem 1.5rem !important;
}
#mobile-nav.open { display: block !important; }
.mobile-link {
  display: block !important;
  padding: 0.875rem 0 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  text-decoration: none !important;
}

/* === Navigation — always dark glass === */
#navbar {
  background: rgba(12,12,12,0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid var(--bd) !important;
  box-shadow: none !important;
}
#navbar.scrolled {
  background: rgba(12,12,12,0.96) !important;
  box-shadow: none !important;
}

/* Keep logo visible on dark nav always */
#nav-logo { filter: none !important; }

.nav-link {
  color: rgba(248,248,246,0.55) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.nav-link:hover { color: var(--text) !important; opacity: 1 !important; }
.nav-link.active { color: var(--red) !important; }
#navbar.scrolled .nav-link { color: rgba(248,248,246,0.55) !important; }

.btn-tickets {
  display: inline-block !important;
  background: var(--red) !important;
  color: white !important;
  padding: 0.6rem 1.25rem !important;
  border-radius: 2px !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
}
.btn-tickets:hover { background: var(--red-dark) !important; color: white !important; }

#nav-toggle { color: rgba(248,248,246,0.7) !important; }
#navbar.scrolled #nav-toggle { color: rgba(248,248,246,0.7) !important; }

#mobile-nav {
  background: var(--dark2) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6) !important;
  border-top: 1px solid var(--bd) !important;
}
.mobile-link {
  color: rgba(248,248,246,0.75) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}

/* === Buttons === */
.btn-primary {
  background: var(--red) !important;
  border-radius: 2px !important;
}
.btn-primary:hover { background: var(--red-dark) !important; }

.btn-outline {
  border-radius: 2px !important;
  border-color: rgba(248,248,246,0.3) !important;
  color: var(--text) !important;
}
.btn-outline:hover {
  background: var(--text) !important;
  color: var(--dark) !important;
  border-color: var(--text) !important;
}

.btn-ghost-white { border-radius: 2px !important; }

/* "view all photos" button */
button[onclick*="openLightbox"] {
  border-radius: 2px !important;
  border-color: rgba(255,255,255,0.25) !important;
}

/* === Stats bar — orange === */
.stat-bar { background: var(--red) !important; }
.stat-num { color: white !important; }
.stat-lbl { color: rgba(255,255,255,0.65) !important; }

/* === Section labels & headings === */
.overline { color: var(--red) !important; }
.section-title { color: var(--text) !important; }
.section-sub { color: rgba(248,248,246,0.55) !important; }

/* === Page hero (inner pages) === */
.page-hero {
  background: var(--dark2) !important;
  border-bottom: 1px solid var(--bd) !important;
}

/* === Overview cards === */
.overview-card {
  background: var(--dark3) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--text) !important;
}
.overview-card-label { color: rgba(248,248,246,0.45) !important; }
.overview-card-num { color: var(--text) !important; }

/* === Speaker cards === */
.speaker-card {
  background: var(--dark3) !important;
  border-color: var(--bd) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.speaker-name { color: var(--text) !important; }
.speaker-role { color: rgba(248,248,246,0.45) !important; }
.speaker-tag {
  background: rgba(232,68,10,0.15) !important;
  color: var(--red) !important;
  border-radius: 2px !important;
}
.speaker-photo { background: var(--dark2) !important; }

/* === Focus area cards === */
.focus-card { border-radius: 4px !important; }

/* === Benefit items === */
.benefit-item {
  background: var(--dark3) !important;
  border-radius: 4px !important;
  border: 1px solid var(--bd) !important;
  box-shadow: none !important;
}
.benefit-title { color: var(--text) !important; }
.benefit-desc { color: rgba(248,248,246,0.55) !important; }
.benefit-icon {
  background: rgba(232,68,10,0.15) !important;
  border-radius: 2px !important;
  color: var(--red) !important;
}
/* Benefit items on light sections */
.light-section .benefit-item,
[style*="var(--pale)"] .benefit-item,
[style*="var(--grey)"] .benefit-item {
  background: white !important;
  border-color: rgba(0,0,0,0.08) !important;
}
.light-section .benefit-title,
[style*="var(--pale)"] .benefit-title,
[style*="var(--grey)"] .benefit-title { color: #111 !important; }
.light-section .benefit-desc,
[style*="var(--pale)"] .benefit-desc,
[style*="var(--grey)"] .benefit-desc { color: #555 !important; }

/* === Partners section === */
.partners-dark { background: var(--dark3) !important; }
.partner-placeholder {
  background: rgba(255,255,255,0.05) !important;
  border-radius: 4px !important;
  color: rgba(248,248,246,0.25) !important;
}

/* === Form inputs === */
.form-input {
  background: var(--dark3) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: var(--text) !important;
  border-radius: 2px !important;
}
.form-input:focus { border-color: var(--red) !important; outline: none !important; }
.form-input::placeholder { color: rgba(248,248,246,0.3) !important; }

/* === Stay connected section === */
.stay { background: var(--dark2) !important; }

/* === Footer === */
footer {
  background: #080808 !important;
  border-top: 1px solid var(--bd) !important;
}
.footer-heading { color: rgba(248,248,246,0.6) !important; }
.footer-links a { color: rgba(248,248,246,0.4) !important; }
.footer-links a:hover { color: var(--red) !important; }
.footer-logo { opacity: 0.65 !important; }
.footer-desc { color: rgba(248,248,246,0.4) !important; }
.footer-bottom { border-top-color: rgba(255,255,255,0.07) !important; }
.social-links a { color: rgba(248,248,246,0.4) !important; }

/* === Lightbox === */
.lightbox-overlay { background: rgba(0,0,0,0.95) !important; }
.lightbox-close,
.lightbox-nav { background: rgba(255,255,255,0.08) !important; border-radius: 2px !important; }
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255,255,255,0.18) !important; }

/* === Gallery border-radius === */
div[onclick*="openLightbox"] { border-radius: 4px !important; }

/* === Timetable === */
.timetable-slot, .slot-card, .session-card {
  background: var(--dark3) !important;
  border-radius: 4px !important;
  border-color: rgba(255,255,255,0.07) !important;
}
.timetable-label, .time-badge, .time-header span { color: rgba(248,248,246,0.45) !important; }

/* === Filter buttons — dark backgrounds === */
.filter-btn {
  background: transparent !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(248,248,246,0.55) !important;
  border-radius: 2px !important;
}
.filter-btn:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.filter-btn.active {
  border-radius: 2px !important;
  color: white !important;
}

/* Filter buttons on light/pale sections */
[style*="var(--grey)"] .filter-btn,
[style*="var(--pale)"] .filter-btn,
.light-section .filter-btn {
  border-color: rgba(0,0,0,0.18) !important;
  color: #444 !important;
  background: transparent !important;
}
[style*="var(--grey)"] .filter-btn:hover,
[style*="var(--pale)"] .filter-btn:hover,
.light-section .filter-btn:hover {
  background: rgba(0,0,0,0.06) !important;
  color: #111 !important;
  border-color: rgba(0,0,0,0.35) !important;
}
[style*="var(--grey)"] .filter-btn.active,
[style*="var(--pale)"] .filter-btn.active,
.light-section .filter-btn.active {
  color: white !important;
}

/* === Ticket cards === */
.ticket-card {
  background: var(--dark3) !important;
  border-radius: 4px !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}
.ticket-name, .ticket-price { color: var(--text) !important; }
.ticket-desc { color: rgba(248,248,246,0.55) !important; }

/* === FAQ / details === */
details {
  background: var(--dark3) !important;
  border-color: rgba(255,255,255,0.07) !important;
  border-radius: 4px !important;
}
details summary { color: var(--text) !important; }
details[open] summary { color: var(--red) !important; }
details p { color: rgba(248,248,246,0.6) !important; }

/* === Updates / blog cards === */
.update-card {
  background: var(--dark3) !important;
  border-color: rgba(255,255,255,0.07) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.update-title { color: var(--text) !important; }
.update-excerpt { color: rgba(248,248,246,0.55) !important; }
.update-tag {
  background: rgba(232,68,10,0.15) !important;
  color: var(--red) !important;
  border-radius: 2px !important;
}

/* === Partner tier cards === */
.tier-card {
  background: var(--dark3) !important;
  border-radius: 4px !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}
.tier-name, .tier-price { color: var(--text) !important; }
.tier-desc { color: rgba(248,248,246,0.55) !important; }

/* === About / team cards === */
.team-card, .value-card, .manifesto-card {
  background: var(--dark3) !important;
  border-radius: 4px !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}

/* === Legal pages === */
.legal-content h2,
.legal-content h3 { color: var(--text) !important; }
.legal-content p,
.legal-content li { color: rgba(248,248,246,0.65) !important; }

/* Tailwind grey text classes — ensure readability on dark backgrounds */
h1, h2, h3 { color: var(--text) !important; }
.text-gray-700, .prose p, .prose li { color: var(--text) !important; }
.text-gray-500 { color: rgba(248,248,246,0.65) !important; }
.text-gray-400 { color: rgba(248,248,246,0.5) !important; }

/* === Program / timetable slot details === */
.slot-domain,
.slot-meta { color: rgba(248,248,246,0.45) !important; }
.slot-title { color: var(--text) !important; }

/* === Tailwind white background overrides === */
.bg-white { background: var(--dark3) !important; }

/* === Homepage hero === */
.hero {
  background: var(--dark) !important;
}

/* Hero badge — sharp, new style */
.hero-badge {
  background: rgba(232,68,10,0.12) !important;
  border: 1px solid rgba(232,68,10,0.3) !important;
  border-radius: 2px !important;
  color: var(--red) !important;
}
.hero-dot { background: var(--red) !important; }

/* Stat bar — white text on orange bg */
.stat-num { color: white !important; }
.stat-lbl { color: rgba(255,255,255,0.65) !important; }

/* Section/content border-radius — sharp corners everywhere */
.section-card,
.info-card,
.card { border-radius: 4px !important; }

/* Outline button in light sections */
[style*="var(--grey)"] .btn-outline,
[style*="var(--pale)"] .btn-outline {
  border-color: rgba(0,0,0,0.25) !important;
  color: #111 !important;
}
[style*="var(--grey)"] .btn-outline:hover,
[style*="var(--pale)"] .btn-outline:hover {
  background: #111 !important;
  color: white !important;
}

/* Scrolled nav stays dark — override any white bg from page CSS */
#navbar { transition: background 0.35s !important; }