/* ============================================================
   NETWORK18 LEADERSHIP SUMMIT 2026
   Settings -> Custom CSS — paste here, replace everything
   Light editorial theme. Crimson hero only. No dark mode.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@800;900&family=Inter:wght@400;500;600;700&display=swap');

/* 1. PALETTE
   ---------------------------------------------------------- */
:root {
  --red:     #E4002B;
  --crimson: #CE2E3B;
  --ember:   #FF6A2C;
  --paper:   #FFFFFF;
  --band:    #F1F3F6;
  --ink:     #14131A;
  --muted:   #5C5A63;
  --line:    rgba(0,0,0,.12);
  --card:    #FFFFFF;
  --hero-a:  #CE2E3B;
  --hero-b:  #8E1420;
  --hero-tx: #FFFFFF;
}

/* 2. BACKSTAGE VARIABLE BRIDGE — light values
   ---------------------------------------------------------- */
:root {
  --text-color:                              var(--ink);
  --secondary-text-color:                    var(--muted);
  --title-text-color:                        var(--ink);
  --heading-color:                           var(--ink);
  --section-text-color:                      var(--ink);
  --section-title-text-color:                var(--ink);
  --section-secondary-text-color:            var(--muted);
  --alternate-section-text-color:            var(--ink);
  --alternate-section-title-text-color:      var(--ink);
  --alternate-section-secondary-text-color:  var(--muted);
  --banner-text-color:                       var(--hero-tx);
  --inner-banner-secondary-text-color:       rgba(255,255,255,.80);
  --number-counter-color:                    var(--ink);
  --light-border-color:                      var(--line);
}

/* 3. KILL ALL BACKSTAGE SECTION BACKGROUND-LAYERS
   Backstage paints every .background-layer with an
   editor-set gradient that covers our section backgrounds.
   Null them all here; hero + inner-banner overrides below
   (higher specificity) survive.
   ---------------------------------------------------------- */
.bs-section .background-layer {
  background: none !important;
  background-image: none !important;
}

/* 4. BASE
   ---------------------------------------------------------- */
html, body {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont,
               sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

.bs-website, .bs-variation,
.community-page-home, .community-page-agenda,
.community-page-speakers, .community-page-tickets,
.community-page-sponsors, .community-page-venue,
.bs-page-container, .page-container {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

p, li, td, label,
.markdown-contain, .markdown-contain p {
  color: var(--ink) !important;
}

/* Carousel outer wrapper — transparent container only */
.community-section-banner {
  background: transparent !important;
  padding: 0 !important;
}

/* 5. SCROLL PROGRESS BAR
   ---------------------------------------------------------- */
#n18-prog {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--red);
  z-index: 9999;
  pointer-events: none;
  transition: width .1s linear;
}

/* 6. LIVE BROADCAST TICKER
   ---------------------------------------------------------- */
#n18-ticker {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 32px;
  background: var(--red);
  overflow: hidden;
  z-index: 950;
  display: flex;
  align-items: center;
}

#n18-ticker-inner {
  display: flex;
  white-space: nowrap;
  animation: n18-ticker-scroll 32s linear infinite;
  will-change: transform;
}

@keyframes n18-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.n18-tick-item {
  display: inline-block;
  padding: 0 28px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  flex-shrink: 0;
}

.n18-tick-sep {
  color: rgba(255,255,255,.5);
  font-size: 7px;
  flex-shrink: 0;
}

/* 7. HEADER / NAV — white, clean
   ---------------------------------------------------------- */
header.bs-main-menu {
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 0 var(--line) !important;
}

/* Push nav below the 32px ticker */
header.bs-main-menu.fixed {
  top: 32px !important;
}

header a.item {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .03em !important;
  color: var(--muted) !important;
  transition: color .2s !important;
}

header a.item:hover {
  color: var(--red) !important;
}

header a.nav-active.item,
a.nav-active.item {
  background: transparent !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}

header a.item span.active-bdr {
  background: var(--red) !important;
  height: 2px !important;
}

/* Sign-in button — red solid CTA */
.signInButton .bs-button,
header .child-btns.signInButton .bs-button {
  background: var(--red) !important;
  border: 1px solid var(--red) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  padding: 7px 18px !important;
  box-shadow: none !important;
  transition: background .2s, transform .15s,
              box-shadow .2s !important;
}

.signInButton .bs-button:hover {
  background: #c6002a !important;
  border-color: #c6002a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(228,0,43,.3) !important;
}

/* Sign-in popup */
.pw-header {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

.pw-content {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.pw-header *, .pw-content * {
  color: var(--ink) !important;
}

/* 8. N18 CSS MARK
   ---------------------------------------------------------- */
.n18-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
  line-height: 1;
  flex-shrink: 0;
}

.n18-mark-18 {
  background: var(--red);
  color: #fff;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 14px;
  line-height: 1.3;
  display: inline-block;
}

/* 9. HERO — crimson full-bleed
   ---------------------------------------------------------- */
section.main-banner {
  position: relative !important;
  overflow: hidden !important;
  padding-top: 92px !important;
  min-height: calc(100vh - 32px) !important;
}

/* Crimson gradient — overrides the global bg-layer null
   because section.main-banner has higher specificity       */
section.main-banner .background-layer {
  background-image: none !important;
  background: linear-gradient(
    155deg,
    var(--hero-a) 0%,
    var(--hero-b) 100%
  ) !important;
}

.n18-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

section.main-banner .foreground-layer {
  position: relative !important;
  z-index: 2 !important;
}

.banner-right-panel,
.ic-event-card { display: none !important; }
.ic-detail-icon { max-width: 24px !important; }

section.main-banner .banner-widget {
  padding: 60px 64px 88px !important;
  max-width: 900px !important;
}

/* Hero eyebrow */
.n18-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-bottom: 22px;
}

.n18-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: n18-pulse 2s ease-in-out infinite;
}

@keyframes n18-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); }
  60%      { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
}

/* Hero headline */
section.main-banner h1.section-head {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(46px, 8.6vw, 120px) !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  line-height: .93 !important;
  margin: 0 0 28px !important;
}

/* Accent word in headline — warm ember tone on crimson */
.n18-accent {
  color: rgba(255,210,170,1) !important;
}

/* Premium date display */
section.main-banner .bs-dtl {
  margin-bottom: 4px !important;
}

section.main-banner .bs-dtl .items {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  width: fit-content !important;
  background: rgba(0,0,0,.18) !important;
}

section.main-banner .bs-dtl .items > .item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  border-right: 1px solid rgba(255,255,255,.2) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

section.main-banner .bs-dtl .items > .item:last-child {
  border-right: none !important;
}

section.main-banner .bs-dtl .items .add-to-calendar,
section.main-banner .bs-dtl .items .add-to-calendar .item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #fff !important;
}

section.main-banner .bs-dtl time,
section.main-banner .bs-dtl .dtl-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

section.main-banner .bs-dtl .dtl-icon i,
section.main-banner .bs-dtl .theme-icon {
  color: rgba(255,210,170,.9) !important;
  font-size: 14px !important;
}

/* Hero meta chips */
.n18-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 36px;
}

.n18-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.1);
  letter-spacing: .02em;
}

.n18-chip-accent {
  color: #fff;
  font-weight: 700;
}

/* Hero CTA buttons */
section.main-banner .bs-button.primary,
section.main-banner .bs-button.st-fill,
section.main-banner .bs-button.primary.large {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--red) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  letter-spacing: .02em !important;
  transition: transform .2s, box-shadow .2s !important;
}

section.main-banner .bs-button.primary:hover,
section.main-banner .bs-button.st-fill:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.25) !important;
}

section.main-banner .bs-button:not(.primary):not(.st-fill) {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  transition: border-color .2s, background .2s,
              transform .2s !important;
}

section.main-banner .bs-button:not(.primary):not(.st-fill):hover {
  border-color: rgba(255,255,255,.9) !important;
  background: rgba(255,255,255,.12) !important;
  transform: translateY(-1px) !important;
}

/* 9a. HERO LOAD ANIMATION
   ---------------------------------------------------------- */
@keyframes n18-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

section.main-banner.n18-anim-ready .n18-eyebrow,
section.main-banner.n18-anim-ready h1.section-head,
section.main-banner.n18-anim-ready .bs-dtl,
section.main-banner.n18-anim-ready .n18-chips,
section.main-banner.n18-anim-ready .bs-btn-wgt {
  opacity: 0;
}

body.n18-loaded section.main-banner .n18-eyebrow {
  animation: n18-rise .9s cubic-bezier(.2,.7,.2,1) 0s both;
}
body.n18-loaded section.main-banner h1.section-head {
  animation: n18-rise .9s cubic-bezier(.2,.7,.2,1) .15s both;
}
body.n18-loaded section.main-banner .bs-dtl {
  animation: n18-rise .9s cubic-bezier(.2,.7,.2,1) .30s both;
}
body.n18-loaded section.main-banner .n18-chips {
  animation: n18-rise .9s cubic-bezier(.2,.7,.2,1) .45s both;
}
body.n18-loaded section.main-banner .bs-btn-wgt {
  animation: n18-rise .9s cubic-bezier(.2,.7,.2,1) .60s both;
}

/* 10. INNER BANNER — crimson for all inner pages
   ---------------------------------------------------------- */
section.inner-banner {
  position: relative !important;
  overflow: hidden !important;
  padding-top: 92px !important;
  padding-bottom: 60px !important;
}

section.inner-banner .background-layer {
  background-image: none !important;
  background: linear-gradient(
    155deg,
    var(--hero-a) 0%,
    var(--hero-b) 100%
  ) !important;
}

section.inner-banner .foreground-layer {
  position: relative !important;
  z-index: 2 !important;
}

section.inner-banner h1,
section.inner-banner h2 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(38px, 5.5vw, 72px) !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 0 0 10px !important;
}

section.inner-banner h5,
section.inner-banner .section-sub-title {
  font-family: 'Inter', sans-serif !important;
  color: rgba(255,255,255,.80) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

section.inner-banner .bs-button {
  border: 1px solid rgba(255,255,255,.5) !important;
  background: transparent !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  transition: border-color .2s, background .2s,
              transform .15s !important;
}

section.inner-banner .bs-button:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.9) !important;
  transform: translateY(-1px) !important;
}

/* 11. ALL SECTIONS — light base
   ---------------------------------------------------------- */
.bs-section {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

.bs-section.alternative-background {
  background: var(--band) !important;
}

.bs-section h3.section-title,
.bs-section h2.section-title {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  line-height: 1.05 !important;
}

.bs-section h5.section-sub-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
}

/* Section kicker — red uppercase label above heading */
.n18-kicker {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 14px;
}

/* 12. ABOUT / DESCRIPTION SECTION
   ---------------------------------------------------------- */
.community-section-description {
  background: var(--paper) !important;
}

.community-section-description .foreground-layer {
  display: grid !important;
  grid-template-columns: 1fr 360px !important;
  gap: 80px !important;
  align-items: start !important;
  padding: 80px 64px !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.n18-about-left p,
.community-section-description p {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  color: var(--muted) !important;
  line-height: 1.65 !important;
}

/* Stat card */
.n18-stat-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px;
  position: sticky;
  top: 100px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
}

.n18-stat-row {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.n18-stat-row:first-child { padding-top: 0; }
.n18-stat-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.n18-stat-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(52px, 5.5vw, 72px);
  color: var(--ink);
  letter-spacing: -.035em;
  line-height: 1;
  min-width: 100px;
}

.n18-stat-suf { color: var(--red); }

.n18-stat-lbl {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.6;
  padding-top: 10px;
}

/* 13. SPEAKERS
   ---------------------------------------------------------- */
.community-section-speakers {
  background: var(--band) !important;
}

.community-section-speakers .li-item {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  transition: transform .25s, border-color .25s,
              box-shadow .25s !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.community-section-speakers .li-item:hover {
  transform: translateY(-5px) !important;
  border-color: var(--red) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.12) !important;
}

.community-section-speakers .li-item .speaker-name,
.community-section-speakers .li-item .name,
.community-section-speakers .li-item h5 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  font-size: 16px !important;
}

.community-section-speakers .li-item .designation,
.community-section-speakers .li-item p {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}

/* 14. AGENDA — all white, full specificity
   ---------------------------------------------------------- */
.community-section-agendaLayout {
  background: var(--paper) !important;
}

.bs-agenda-tab.btn-type,
.bs-track-filter-tab {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
}

.bs-agenda-tab.btn-type *,
.bs-track-filter-tab * {
  color: var(--ink) !important;
}

.bs-timeline,
.bs-timeline.card-view,
.bs-timeline.card-view.default,
.bs-timeline.card-view.default.tt-default {
  background: var(--paper) !important;
}

.timeline-item,
.timeline-item.ember-view {
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line) !important;
  /* Remove any old reveal transform */
  opacity: 1 !important;
  transform: none !important;
}

/* Day tabs */
.bs-tab-menu .nav-item,
a.nav-item {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: var(--paper) !important;
  transition: color .2s, border-color .2s,
              background .2s !important;
  cursor: pointer !important;
}

.bs-tab-menu .nav-item:hover {
  color: var(--red) !important;
  border-color: var(--red) !important;
}

.bs-tab-menu .nav-item.active,
a.nav-item.active {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

/* Day-switcher / timezone */
.day-switcher-menu, .time-zone {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}

.day-switcher-menu *, .time-zone * {
  color: var(--ink) !important;
}

/* Track filter pills */
.bs-track-filter-tab .bs-label,
.bs-label.pilled {
  background: var(--paper) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
  transition: all .2s !important;
  cursor: pointer !important;
}

.bs-track-filter-tab .bs-label:hover {
  border-color: var(--red) !important;
  color: var(--red) !important;
}

.bs-track-filter-tab .bs-label.active,
.bs-label.pilled.active {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}

/* Session time column */
.bs-timeline .timeline-sticky h5 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  color: var(--red) !important;
  letter-spacing: -.01em !important;
  white-space: nowrap !important;
}

/* Session row */
.bs-timeline .timeline-content {
  background: transparent !important;
  border: none !important;
  padding: 20px 16px !important;
  transition: background .15s !important;
}

.bs-timeline .timeline-content:hover {
  background: rgba(228,0,43,.04) !important;
  cursor: pointer !important;
}

.bs-timeline .timeline-content .session-name,
.bs-timeline .timeline-content a.session-name {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: color .2s !important;
}

.bs-timeline .timeline-content:hover .session-name,
.bs-timeline .timeline-content:hover a.session-name {
  color: var(--red) !important;
}

/* Session label pill */
.bs-timeline .session-lbl .bs-label {
  background: rgba(228,0,43,.08) !important;
  color: var(--red) !important;
  border-color: transparent !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
}

/* Session meta / duration */
.bs-timeline .session-dtl h5,
.bs-timeline .session-dtl,
.bs-timeline .time-duration {
  color: var(--muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
}

/* Session description */
.bs-timeline .session-desc,
.bs-timeline .session-desc p {
  color: var(--muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* Lower-third broadcast labels */
.n18-lower-third {
  display: inline-flex;
  align-items: center;
  margin-bottom: 5px;
}

.n18-session-tag {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  padding-left: 9px;
  border-left: 2px solid var(--red);
  line-height: 1;
}

/* 15. FEATURED SESSIONS
   ---------------------------------------------------------- */
.community-section-featuredSessions {
  background: var(--band) !important;
}

.featured-session-card .bs-frame,
.bs-frame.featured-session {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
  transition: border-color .2s, transform .2s,
              box-shadow .2s !important;
  color: var(--ink) !important;
}

.featured-session-card .bs-frame:hover,
.bs-frame.featured-session:hover {
  border-color: var(--red) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.1) !important;
}

.featured-session-card .bs-frame *,
.bs-frame.featured-session * {
  color: var(--ink) !important;
}

/* 16. SPONSORS
   ---------------------------------------------------------- */
.community-section-sponsors,
.community-section-sponsorList {
  background: var(--band) !important;
  color: var(--ink) !important;
}

/* Semantic UI flip-cards (Backstage sponsor tiles) */
.ui.shape, .sides,
.slide.face.side,
.slide.face.side.ember-view {
  background: var(--card) !important;
  color: var(--ink) !important;
}

.ui.shape *, .sides *, .slide.face.side * {
  color: var(--ink) !important;
}

.community-section-sponsors [class*="sponsor"],
.community-section-sponsorList [class*="sponsor"],
.community-section-sponsors .list-item,
.community-section-sponsorList .list-item {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  transition: border-color .2s, transform .2s,
              box-shadow .2s !important;
  cursor: pointer !important;
}

.community-section-sponsors [class*="sponsor"]:hover,
.community-section-sponsorList .list-item:hover {
  border-color: var(--red) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.1) !important;
}

/* 17. TICKETS
   ---------------------------------------------------------- */
.community-section-ticketClass {
  background: var(--paper) !important;
}

.community-section-ticketClass .ui.shape,
.community-section-ticketClass .sides,
.community-section-ticketClass .slide.face.side {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
}

.community-section-ticketClass p,
.community-section-ticketClass span,
.community-section-ticketClass h4,
.community-section-ticketClass h5 {
  color: var(--ink) !important;
}

/* 18. VENUE
   ---------------------------------------------------------- */
.community-section-eventVenue {
  background: var(--paper) !important;
}

.community-section-eventVenue [class*="map"],
.community-section-eventVenue [class*="venue"],
.community-section-eventVenue .venue-card,
.community-section-eventVenue .venue-info {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
}

.community-section-eventVenue p,
.community-section-eventVenue span,
.community-section-eventVenue h4,
.community-section-eventVenue h5 {
  color: var(--ink) !important;
  font-family: 'Inter', sans-serif !important;
}

/* 19. CONTACT / GET IN TOUCH
   ---------------------------------------------------------- */
.community-section-getInTouch {
  background: var(--band) !important;
}

.community-section-getInTouch h3.section-title,
.community-section-getInTouch h2.section-title {
  color: var(--ink) !important;
}

.community-section-getInTouch h5.section-sub-title {
  color: var(--muted) !important;
}

/* Form card */
.community-section-getInTouch .bs-frame {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.07) !important;
}

.community-section-getInTouch .form-head {
  padding: 24px 24px 20px !important;
  border-bottom: 1px solid var(--line) !important;
}

.community-section-getInTouch .form-head h5.head {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  color: var(--ink) !important;
  letter-spacing: -.01em !important;
}

.community-section-getInTouch .form-head .sub-head {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
}

.community-section-getInTouch .bs-form {
  padding: 24px !important;
}

.community-section-getInTouch label {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}

/* Submit button */
.community-section-getInTouch .bs-button.primary,
.community-section-getInTouch .bs-button.large.primary {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  border-radius: 5px !important;
  letter-spacing: .02em !important;
  transition: background .2s, transform .15s,
              box-shadow .2s !important;
}

.community-section-getInTouch .bs-button.primary:hover {
  background: #c6002a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 24px rgba(228,0,43,.28) !important;
}

/* 20. FOOTER — dark cap
   ---------------------------------------------------------- */
.community-section-footer,
.bs-section.community-section-footer {
  background: var(--ink) !important;
  color: #fff !important;
}

/* N18 mark in dark footer — white text */
.community-section-footer .n18-mark {
  color: #fff !important;
}

.community-section-footer p,
.community-section-footer span,
.community-section-footer a,
.community-section-footer li {
  color: rgba(255,255,255,.60) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}

.community-section-footer a:hover {
  color: #fff !important;
}

/* Social icons in footer */
a.circular.social,
.community-section-footer a.circular.social,
.community-section-footer [class*="social"] a {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 50% !important;
  transition: background .2s, border-color .2s !important;
}

a.circular.social *,
.community-section-footer a.circular.social *,
.community-section-footer [class*="social"] a * {
  color: rgba(255,255,255,.65) !important;
}

a.circular.social:hover,
.community-section-footer [class*="social"] a:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
}

a.circular.social:hover * { color: #fff !important; }

/* Body social icons (about section, etc.) */
.community-section-banner a.circular.social {
  background: rgba(0,0,0,.06) !important;
  border: 1px solid var(--line) !important;
}

.community-section-banner a.circular.social * {
  color: var(--ink) !important;
}

.community-section-banner a.circular.social:hover {
  background: var(--red) !important;
  border-color: var(--red) !important;
}

.community-section-banner a.circular.social:hover * {
  color: #fff !important;
}

/* 21. GLOBAL FORM FIELDS
   ---------------------------------------------------------- */
.bs-input, input.bs-input, textarea.bs-input,
.iti__tel-input, input[class*="bs-"] {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  border-radius: 6px !important;
}

.bs-input::placeholder,
.iti__tel-input::placeholder {
  color: var(--muted) !important;
}

.bs-input:focus, .iti__tel-input:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(228,0,43,.1) !important;
  outline: none !important;
}

/* Phone flag dropdown */
.iti__dropdown-content {
  background: var(--card) !important;
  border-color: var(--line) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
}

.iti__country { color: var(--ink) !important; }

.iti__country:hover {
  background: var(--band) !important;
}

/* 22. GLOBAL BUTTONS + HOVER EFFECTS
   ---------------------------------------------------------- */
.bs-button {
  transition: transform .2s, box-shadow .2s,
    background .2s, border-color .2s, color .2s !important;
  cursor: pointer !important;
}

/* Primary red CTA outside hero */
.bs-button.primary:not(.link):not([class*="view-btn"]):not(.transparent) {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
  border-radius: 5px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

.bs-button.primary:not(.link):not([class*="view-btn"]):not(.transparent):hover {
  background: #c6002a !important;
  border-color: #c6002a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 34px rgba(228,0,43,.28) !important;
}

/* 23. FOCUS-VISIBLE
   ---------------------------------------------------------- */
*:focus-visible {
  outline: 2px solid var(--red) !important;
  outline-offset: 3px !important;
}

/* 24. REDUCED MOTION
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  #n18-ticker-inner { animation: none !important; }
  .n18-dot { animation: none !important; }
  section.main-banner.n18-anim-ready * {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* 25. MOBILE 768px
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  #n18-ticker { height: 26px; }
  .n18-tick-item { font-size: 9px; padding: 0 14px; }

  header.bs-main-menu.fixed { top: 26px !important; }

  section.main-banner {
    padding-top: 74px !important;
    min-height: auto !important;
    padding-bottom: 48px !important;
  }

  section.main-banner .banner-widget {
    padding: 36px 24px 56px !important;
    max-width: 100% !important;
  }

  .community-section-description .foreground-layer {
    grid-template-columns: 1fr !important;
    padding: 48px 24px !important;
    gap: 40px !important;
  }

  .n18-stat-card { position: static; }

  section.main-banner .bs-dtl .items {
    flex-direction: column !important;
    width: 100% !important;
  }

  section.main-banner .bs-dtl .items > .item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.2) !important;
  }

  section.main-banner .bs-dtl .items > .item:last-child {
    border-bottom: none !important;
  }
}

/* 26. MOBILE 480px
   ---------------------------------------------------------- */
@media (max-width: 480px) {
  section.main-banner h1.section-head {
    font-size: clamp(38px, 12vw, 56px) !important;
  }
  .n18-stat-num { font-size: 50px; min-width: 80px; }
  section.main-banner .banner-widget {
    padding: 24px 16px 40px !important;
  }
}