/* ICPC Mini Visual Brand Guide - March 2026 */
:root {
  --icpc-blue: #4c83c3;
  --icpc-gold: #fdba12;
  --icpc-red: #b22c1b;
  --icpc-indigo: #004275;
  --icpc-black: #000000;
  --icpc-white: #ffffff;
  --icpc-blue-75: #79a2d2;
  --icpc-blue-25: #d2e0f0;
  --icpc-gold-25: #fff0c4;
  --icpc-red-25: #eccac6;
  --icpc-indigo-10: #e6ecf1;
  --navy: var(--icpc-indigo) !important;
  --navy-2: #00365f !important;
  --ink: var(--icpc-black) !important;
  --cyan: var(--icpc-blue) !important;
  --cyan-bright: var(--icpc-blue-75) !important;
  --coral: var(--icpc-red) !important;
  --acid: var(--icpc-gold) !important;
  --teal: var(--icpc-blue) !important;
  --paper: var(--icpc-white) !important;
  --cream: var(--icpc-white) !important;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace !important;
}

html,
body {
  background: var(--icpc-white) !important;
  color: var(--icpc-black) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

body :focus-visible {
  outline: 3px solid var(--icpc-gold) !important;
  outline-offset: 3px !important;
}

body h1,
body h2,
body h3,
body h4,
body strong,
body b {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

.micro,
.eyebrow,
.section-kicker,
.event-top,
.event-copy > p,
.brand-wordmark,
.subpage-stage,
.content-marker,
.icpc-event-kicker,
.resource-result > span,
.resource-list small,
footer h3,
footer > div > span {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace !important;
  letter-spacing: .09em !important;
}

.scroll-progress span {
  background: linear-gradient(90deg, var(--icpc-blue), var(--icpc-gold), var(--icpc-red)) !important;
}

.site-header,
.site-header.subpage-header {
  background: var(--icpc-white) !important;
  color: var(--icpc-indigo) !important;
  border-bottom: 1px solid var(--icpc-blue-25) !important;
  box-shadow: 0 8px 28px rgba(0, 66, 117, .08) !important;
}

.site-header::before {
  background: linear-gradient(90deg, var(--icpc-blue) 0 33.333%, var(--icpc-gold) 33.333% 66.666%, var(--icpc-red) 66.666%) !important;
  content: "" !important;
  display: block !important;
  height: 4px !important;
  inset: 0 0 auto !important;
  position: absolute !important;
}

.site-header::after {
  background: transparent !important;
}

.site-header .brand img,
.subpage-header .official-logo {
  filter: brightness(0) saturate(100%) invert(21%) sepia(45%) saturate(2335%) hue-rotate(176deg) brightness(86%) contrast(103%) !important;
  opacity: 1 !important;
}

.site-header .brand-divider {
  background: var(--icpc-blue-25) !important;
}

.site-header .brand-wordmark,
.site-header nav a,
.site-header .subpage-desktop-nav a,
.site-header .search-trigger,
.site-header .global-search-trigger {
  color: var(--icpc-indigo) !important;
}

.site-header nav a:hover,
.site-header nav a[aria-current],
.site-header .subpage-desktop-nav a:hover,
.site-header .subpage-desktop-nav a[aria-current] {
  color: var(--icpc-red) !important;
}

.site-header nav a::after,
.site-header .subpage-desktop-nav a::after {
  background: var(--icpc-gold) !important;
}

.site-header .search-trigger,
.site-header .global-search-trigger {
  background: var(--icpc-white) !important;
  border: 1px solid var(--icpc-blue) !important;
  border-radius: 5px !important;
}

.nav-cta,
.subpage-nav-cta {
  background: var(--icpc-indigo) !important;
  border: 1px solid var(--icpc-indigo) !important;
  border-radius: 5px !important;
  color: var(--icpc-white) !important;
}

.nav-cta:hover,
.subpage-nav-cta:hover {
  background: var(--icpc-gold) !important;
  border-color: var(--icpc-gold) !important;
  color: var(--icpc-black) !important;
}

.deadline-banner {
  background: var(--icpc-blue) !important;
  color: var(--icpc-white) !important;
  border: 0 !important;
}

.deadline-banner .deadline-dot {
  background: var(--icpc-gold) !important;
  box-shadow: 0 0 0 5px rgba(253, 186, 18, .22) !important;
}

.deadline-banner .deadline-status,
.deadline-banner > a {
  background: var(--icpc-gold) !important;
  border-color: var(--icpc-gold) !important;
  border-radius: 5px !important;
  color: var(--icpc-black) !important;
}

.hero,
.subpage-hero {
  background: var(--icpc-indigo) !important;
  color: var(--icpc-white) !important;
}

.hero::before,
.subpage-hero::before {
  background:
    linear-gradient(135deg, transparent 44%, rgba(255,255,255,.055) 44% 50%, transparent 50%) 0 0 / 54px 54px,
    linear-gradient(45deg, transparent 44%, rgba(255,255,255,.055) 44% 50%, transparent 50%) 27px 0 / 54px 54px !important;
  content: "" !important;
  inset: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  position: absolute !important;
}

.hero::after,
.subpage-hero::after {
  background: linear-gradient(90deg, var(--icpc-blue) 0 33.333%, var(--icpc-gold) 33.333% 66.666%, var(--icpc-red) 66.666%) !important;
  bottom: 0 !important;
  content: "" !important;
  height: 12px !important;
  left: 0 !important;
  position: absolute !important;
  right: 0 !important;
  top: auto !important;
}

.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  opacity: .45 !important;
}

.orb-one {
  background: rgba(76, 131, 195, .34) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.orb-two {
  background: rgba(178, 44, 27, .24) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.hero .eyebrow,
.subpage-hero .eyebrow,
.hero h1 em,
.subpage-hero h1 em {
  color: var(--icpc-gold) !important;
}

.hero .eyebrow span,
.subpage-hero .eyebrow span {
  background: var(--icpc-gold) !important;
}

.hero h1,
.subpage-hero h1 {
  color: var(--icpc-white) !important;
  letter-spacing: -.045em !important;
}

.hero .lede,
.subpage-hero-copy > p {
  color: rgba(255,255,255,.88) !important;
}

.button,
.subpage-hero-search,
.event-link,
.resource-finder__controls button,
.feedback-panel button,
.progress-dashboard__actions button {
  border-radius: 5px !important;
}

.button-primary,
.subpage-hero-search {
  background: var(--icpc-gold) !important;
  border-color: var(--icpc-gold) !important;
  color: var(--icpc-black) !important;
}

.button-ghost {
  border-color: rgba(255,255,255,.7) !important;
  color: var(--icpc-white) !important;
}

.hero-panel {
  background: var(--icpc-white) !important;
  border: 0 !important;
  border-radius: 6px 6px 44px 6px !important;
  box-shadow: 14px 14px 0 var(--icpc-blue) !important;
  color: var(--icpc-black) !important;
}

.hero-panel::before {
  background: linear-gradient(90deg, var(--icpc-blue), var(--icpc-gold), var(--icpc-red)) !important;
}

.hero-panel .micro,
.hero-panel h2,
.hero-panel .status,
.hero-panel .goal-card,
.hero-panel .goal-card small,
.hero-panel .goal-card strong {
  color: var(--icpc-black) !important;
}

.hero-panel .status i {
  background: var(--icpc-blue) !important;
}

.goal-card {
  border-color: var(--icpc-blue-25) !important;
  border-radius: 5px !important;
}

.goal-card:hover,
.goal-card.active {
  background: var(--icpc-gold-25) !important;
  border-color: var(--icpc-gold) !important;
}

.goal-number {
  border-color: var(--icpc-blue) !important;
  color: var(--icpc-indigo) !important;
}

.audience-strip {
  border-top-color: rgba(255,255,255,.34) !important;
}

.events-section {
  background: var(--icpc-white) !important;
  color: var(--icpc-black) !important;
}

.events-section .section-kicker,
.events-section .section-heading h2,
.events-section .text-link {
  color: var(--icpc-indigo) !important;
}

.events-section .section-kicker {
  border-color: var(--icpc-blue) !important;
}

.event-card {
  border: 0 !important;
  border-radius: 6px 6px 38px 6px !important;
  box-shadow: 0 14px 32px rgba(0,66,117,.13) !important;
}

.event-card.featured {
  background: var(--icpc-blue) !important;
  color: var(--icpc-white) !important;
}

.event-card.world {
  background: var(--icpc-gold) !important;
  color: var(--icpc-black) !important;
}

.event-card.community-event {
  background: var(--icpc-red) !important;
  color: var(--icpc-white) !important;
}

.event-card .pill {
  border-radius: 3px !important;
}

.event-card.featured .pill,
.event-card.community-event .pill {
  background: var(--icpc-white) !important;
  color: var(--icpc-indigo) !important;
}

.event-card.world .pill {
  background: var(--icpc-indigo) !important;
  color: var(--icpc-white) !important;
}

.event-card.featured .code-window {
  background: var(--icpc-indigo) !important;
  border-radius: 4px !important;
}

.event-card .event-link {
  background: var(--icpc-white) !important;
  border-color: transparent !important;
  color: var(--icpc-black) !important;
}

.resources,
.icpc-content-shell,
.subpage-next {
  background: var(--icpc-white) !important;
}

.resources h2 em,
.resource-shortcuts a,
.icpc-content a,
.subpage-next a {
  color: var(--icpc-blue) !important;
}

.button-dark,
.resource-finder__controls,
.progress-dashboard__actions button:nth-child(2),
.feedback-panel button {
  background: var(--icpc-indigo) !important;
  color: var(--icpc-white) !important;
}

.resource-list > a,
.resource-result,
.learning-plan-grid article,
.progress-dashboard__routes article {
  background: var(--icpc-white) !important;
  border: 1px solid var(--icpc-blue-25) !important;
  border-radius: 5px !important;
  box-shadow: 0 10px 24px rgba(0,66,117,.07) !important;
}

.resource-list > a:nth-child(3n+1),
.resource-result:nth-child(3n+1),
.learning-plan-grid article:nth-child(3n+1) {
  border-top: 5px solid var(--icpc-blue) !important;
}

.resource-list > a:nth-child(3n+2),
.resource-result:nth-child(3n+2),
.learning-plan-grid article:nth-child(3n+2) {
  border-top: 5px solid var(--icpc-gold) !important;
}

.resource-list > a:nth-child(3n),
.resource-result:nth-child(3n),
.learning-plan-grid article:nth-child(3n) {
  border-top: 5px solid var(--icpc-red) !important;
}

.resource-list > a:hover,
.resource-result:hover,
.learning-plan-grid article:hover {
  border-color: var(--icpc-blue) !important;
  transform: translateY(-4px) !important;
}

.resource-icon {
  background: var(--icpc-indigo-10) !important;
  border-radius: 4px !important;
  color: var(--icpc-indigo) !important;
}

.subpage-code {
  background: var(--icpc-white) !important;
  border: 0 !important;
  border-radius: 5px 5px 34px 5px !important;
  box-shadow: 12px 12px 0 var(--icpc-gold) !important;
  color: var(--icpc-black) !important;
}

.subpage-code small,
.subpage-code code,
.subpage-code code span {
  color: var(--icpc-black) !important;
}

.resource-finder__controls {
  border-radius: 5px !important;
}

.resource-finder__controls input,
.resource-finder__controls select,
.feedback-panel input,
.feedback-panel select,
.feedback-panel textarea {
  border: 2px solid var(--icpc-blue-25) !important;
  border-radius: 4px !important;
}

.resource-finder__controls input:focus,
.resource-finder__controls select:focus,
.feedback-panel input:focus,
.feedback-panel select:focus,
.feedback-panel textarea:focus {
  border-color: var(--icpc-gold) !important;
}

.progress-dashboard,
.feedback-panel {
  background: var(--icpc-indigo-10) !important;
  border-color: var(--icpc-blue) !important;
  border-radius: 6px !important;
}

.progress-dashboard__actions button:first-child {
  background: var(--icpc-gold) !important;
  color: var(--icpc-black) !important;
}

.progress-dashboard__actions button:last-child {
  border-color: var(--icpc-red) !important;
  color: var(--icpc-red) !important;
}

.final-cta {
  background: var(--icpc-indigo) !important;
}

.final-cta::before {
  background:
    linear-gradient(135deg, transparent 44%, rgba(255,255,255,.055) 44% 50%, transparent 50%) 0 0 / 54px 54px,
    linear-gradient(45deg, transparent 44%, rgba(255,255,255,.055) 44% 50%, transparent 50%) 27px 0 / 54px 54px !important;
  content: "" !important;
  inset: 0 !important;
  opacity: 1 !important;
  position: absolute !important;
}

.final-cta h2 em {
  color: var(--icpc-gold) !important;
}

.cta-signal i {
  border-color: var(--icpc-blue) !important;
}

footer {
  background: var(--icpc-black) !important;
  color: var(--icpc-white) !important;
  border-top: 10px solid var(--icpc-blue) !important;
}

footer::before {
  background: linear-gradient(90deg, var(--icpc-blue) 0 33.333%, var(--icpc-gold) 33.333% 66.666%, var(--icpc-red) 66.666%) !important;
  content: "" !important;
  height: 5px !important;
  left: 0 !important;
  position: absolute !important;
  right: 0 !important;
  top: -10px !important;
}

footer .brand img,
footer .official-logo {
  filter: brightness(0) invert(1) !important;
}

footer h3,
footer > div > span,
footer .footer-links > span,
footer .footer-connect > span {
  color: var(--icpc-gold) !important;
}

footer a:hover {
  color: var(--icpc-gold) !important;
}

.socials a,
.footer-social a {
  border-color: rgba(255,255,255,.44) !important;
  border-radius: 4px !important;
}

@media (max-width: 980px) {
  .site-header .mobile-menu {
    background: var(--icpc-white) !important;
    border-color: var(--icpc-blue-25) !important;
    color: var(--icpc-indigo) !important;
  }

  .site-header .mobile-menu a,
  .site-header .mobile-search-trigger {
    color: var(--icpc-indigo) !important;
  }

  .site-header .mobile-menu-cta {
    background: var(--icpc-indigo) !important;
    color: var(--icpc-white) !important;
  }

  .menu-toggle span {
    background: var(--icpc-indigo) !important;
  }
}

@media (max-width: 720px) {
  .event-card.featured .code-window {
    display: none !important;
  }

  .event-card.featured {
    min-height: 510px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}