/* Minimal styles — rely on Bootstrap utilities wherever possible */
.section {
    margin: 80px 0;
}
/* Modal tweaks (small inputs) */
#hackathonModal .modal-body { padding: 1rem; }
#hackathonModal .participant h6 { font-size: 1rem; margin-bottom: .5rem; }
#hackathonModal .form-control-sm { padding: .35rem .5rem; font-size: .95rem; }
#hackathonModal .participant + .participant { margin-top: .5rem; }

/* Small helper for two-column sections — prefer Bootstrap row/col; this is a tiny helper */
.hackathon-two-col { display:grid; grid-template-columns: 1fr 320px; gap: 2rem; align-items:start; }

/* Image slot helpers: responsive aspect boxes for placeholders and content images */
/* .image-slot { position: relative; overflow: hidden; display: block; background: linear-gradient(180deg,#f8f9fb,#ffffff); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.image-slot::before { content: ''; display: block; width: 100%; }
.image-slot--square::before { padding-top: 100%; }
.image-slot--landscape::before { padding-top: 56.25%; /* 16:9 */ }
/* .image-slot img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; } */
.image-slot--placeholder { display: flex; align-items: center; justify-content: center; color: #6b6b6b; font-size: .95rem; border: 1px dashed rgba(0,0,0,0.06); } */

/* Team / gallery grid helper */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.team-grid .image-slot { height: 160px; }

@media (max-width:575px){ .image-slot { border-radius: 6px; } .team-grid .image-slot { height: 120px; } }


/* Alternating section backgrounds to improve flow */
.hackathon-page .section{ padding-top: 1.5rem; padding-bottom: 1.5rem; } /* instead of 5 */
@media (max-width: 768px){
  .hackathon-page .section{ padding-top: 1rem; padding-bottom: 1rem; }
}
.hackathon-page .section:nth-of-type(odd) { background: #ffffff; }
.hackathon-page .section:nth-of-type(even) { background: #fbf9fc; }

/* Accent panel for key sections */
.hackathon-page .section.bg-accent { background: linear-gradient(180deg, rgba(111,68,166,0.03), rgba(255,255,255,0)); border-top: 1px solid rgba(111,68,166,0.06); }

/* Stronger visual divider for major sections */
/* .hackathon-page .section + .section { border-top: 1px solid rgba(0,0,0,0.03); } */

/* Make headings stand out slightly more in these panels */
.hackathon-page .section h2, .hackathon-page .section h3 { color: #5b3690; }


.hackathon-page
{font-size:18px;}
/* Optional: left accent bar for highlighted sections */
.hackathon-page .section.highlight-left { position: relative; }
.hackathon-page .section.highlight-left::before { content: ''; position: absolute; left: 0; top: 1.25rem; bottom: 1.25rem; width: 6px; background: linear-gradient(180deg,#6f44a6,#c87de2); border-radius: 3px; }

/* Small helper to keep content width comfortable */
.hackathon-page .container { max-width: 980px; }


/* Section background + spacing for 'What Happens After Hackathon Day' */
.bg-what{ background: linear-gradient(180deg, rgba(247,244,252,1), rgba(255,255,255,1)); border-top: 1px solid rgba(111,68,166,0.05); }
.bg-what .container{ max-width:900px; }
.bg-what .col-md-12{ padding-top: 1rem; padding-bottom:1rem; }
.bg-what h3{ margin-bottom: .8rem; }
.bg-what p, .bg-what ul{ margin-bottom: .9rem; font-size:1rem; line-height:1.6; }
.bg-what ul li{ margin-bottom: .6rem; }

/* ------------------------------------------------------------------
   Hackathon page specific styles moved here from template-hackathon.php
   Notes: Kept minimal overrides and prefer Bootstrap utilities where
   possible. Remove or tweak further only in this file.
   ------------------------------------------------------------------ */

:root{
  --hackathon-gradient-start: #ff6b60; /* warm coral */
  --hackathon-gradient-end: #9b45d1;   /* vivid purple */
  --hackathon-accent-2: #c8ea2a;       /* neon lime (slightly muted) */
  --hackathon-accent: #6f44a6;
  --hackathon-accent-dark: #5b3690;
  --hackathon-accent-rgb: 111,68,166;
  --hackathon-accent-contrast: #ffffff;
}


/* Hero */
.hero{ position: relative; padding-top:5rem; padding-bottom:5rem; overflow: hidden; background-image: url('../images/adminhack-hero-bg-only-2560x1200.png'); background-size: cover; background-position:center; background-blend-mode: overlay; }
/* .hero::before{ content: ''; position:absolute; left:0; top:0; bottom:0; width:58%; background: linear-gradient(90deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 35%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.0) 100%); z-index:1; }
.hero::after{ content: ''; position: absolute; top: 0; right: -8%; width: 48%; height: 100%; background: rgba(255,255,255,0.06); transform: skewX(-20deg); pointer-events: none; z-index:0; } */
.hero .container{ position: relative; z-index: 2; }
.hero h1.display-4, .hero p, .hero .lead { color: #ffffff; text-shadow: 0 8px 28px rgba(0,0,0,0.5); }
.hero h1.display-4{ font-weight:900; letter-spacing:-0.01em; font-size:3.4rem; }
@media (min-width:1200px){ .hero h1.display-4{ font-size:4.2rem; } }
.hero .hero-lead{ font-size:1.15rem; opacity:0.95; }

/* Hero illustration / hex */
.hero-hex-wrap{ width:360px; height:360px; position:relative; background:#fff; -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%); clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%); box-shadow: 0 12px 38px rgba(0,0,0,0.32); margin-left:auto; }
.hero-hex{ position:absolute; left:13px; top:13px; right:13px; bottom:13px; background-size:cover; background-position:center; -webkit-clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%); clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%); box-shadow: 0 12px 38px rgba(0,0,0,0.32); z-index:3; }
@media (max-width:1199px){ .hero-hex-wrap{ width:280px; height:280px; } .hero-hex{ left:10px; top:10px; right:10px; bottom:10px; } }
@media (max-width:991px){ .hero-hex-wrap, .hero-hex{ display:none; } }

/* Buttons */
.hero .btn-primary{ background: var(--hackathon-accent-2); color:#111; border:none; font-weight:700; }
.hero .btn-primary:hover{ background: #c8ea2a; color:#111; transform:translateY(-2px); box-shadow: 0 8px 20px rgba(200,234,42,0.12); }
.btn-outline-secondary{ border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-outline-secondary:hover{ background: rgba(255,255,255,0.06); color: #fff; }

/* Headings */
h1.display-4, h2, h3, h4 { color: var(--hackathon-accent); }
h1.display-4{ font-weight:700; }
.lead{ font-size:1.125rem; color:#333; }

/* Section heading underline */
.section h3, .section h2{ margin-bottom:1rem; display:inline-block; position:relative; }
.section h2::after, .section h3::after{ content: ''; display:block; width:56px; height:4px; background:var(--hackathon-accent); margin-top:0.8rem; margin-left:0; border-radius:2px; }
.section .text-center h2, .section .text-center h3 { display:inline-block; }

/* Lists and bullets */
ul.ps-3 { list-style: none; padding-left: 1rem; }
ul.ps-3 li::before{ content: '•'; color: var(--hackathon-accent); display:inline-block; width:1.2em; margin-left:-1.2em; }

/* Links */
a { color: var(--hackathon-accent); }
a:hover, a:focus{ color: var(--hackathon-accent-dark); text-decoration: none; }

/* Keep sponsor-placeholder removed in favour of .image-slot helpers */

/* Small helpers — prefer Bootstrap utilities where possible */
@media (max-width:575px){ .display-4{ font-size:2rem; } }

.hack-subnav{
  position: sticky;
  top: 0;                 /* set to header height if needed */
  z-index: 1020;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.04);
}

.hack-subnav nav a{
  font-size: .95rem;
  font-weight: 500;
  padding: .45rem .85rem;
  border-radius: 999px;
}
.hack-subnav nav a:hover{ background: rgba(0,0,0,.04); }

.hack-subnav__link{
  display:inline-block;
  padding:.45rem .85rem;
  border-radius:999px;
  text-decoration:none;
  line-height:1.2;
}

.hack-subnav__link:hover{
  text-decoration:none;
  background: rgba(0,0,0,.05);
}

.hack-subnav__link--strong{
  font-weight:600;
}
.hack-apply{
  color: #fff;
  background: linear-gradient(135deg, rgba(10,37,64,.92), rgba(90,24,154,.88));
}
.hack-apply a, .hack-apply p, .hack-apply li, .hack-apply h2{ color:#fff; }
.hack-apply .btn-outline-primary{ border-color: rgba(255,255,255,.6); color:#fff; }

.hackathon-page .hero .bg-opacity-10{ background: rgba(255,255,255,.16) !important; }

@media (max-width: 768px){
  #apply .btn-lg{ width:100%; }
}

.hack-statements__wrap{
  background: rgba(0,0,0,.02);
}

.hack-statement{
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.06);
}

.hack-statement p{
  font-size: 1.02rem;
  line-height: 1.35;
}

.maxw-720{ max-width: 720px; }

.bg-tint{ background: rgba(139, 139, 139, 0.02); } /* very pale tint so hero stays special */

.hack-step{
  position: relative;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: .9rem 0; /* airy vertical spacing */
}

.hack-dot{
  position:absolute;
  left: .45rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hack-dot span{
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
  opacity: .85;
}

.hack-step-content{
  padding-left: 1.6rem; /* ensures text clears the dot */
}

/* Inner gradient panel */
.hack-waves__panel{
  background: linear-gradient(90deg, #ff6b60 0%, #9b45d1 100%);
  min-height: 360px; /* tweak as needed */
}

/* Title underline */
.hack-waves__rule{
  height: 2px;
  background: rgba(255,255,255,.75);
  width: 100%;
  margin-top: .75rem;
}

/* Vertical dividers on desktop */
@media (min-width: 992px){
  .hack-waves__divider{
    border-left: 2px solid rgba(255,255,255,.55);
    padding-left: 2rem;
  }
}

/* Mobile: use subtle horizontal separation instead */
@media (max-width: 991.98px){
  .hack-waves__divider{
    border-top: 1px solid rgba(255,255,255,.35);
    padding-top: 1.25rem;
  }
}

/* remove the old full-height line */
/* .hack-timeline__list::before{ ... } */

.hack-timeline__list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.hack-timeline__list li{
  position: relative;
  padding-left: 42px;
  padding-top: 8px;
  padding-bottom: 18px;
}

/* dot */
.hack-timeline__list li::before{
  content:"";
  position:absolute;
  left:4px;
  top:12px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#6f44a6;
  box-shadow:0 0 0 4px rgba(111,68,166,.12);
}

/* line segment */
.hack-timeline__list li::after{
  content:"";
  position:absolute;
  left:10px;         /* dot centre */
  top:28px;          /* dot top + dot height + small gap */
  bottom:-18px;      /* <-- extend down to reach next dot */
  width:2px;
  background:rgba(111,68,166,.35);
}

.hack-timeline__list li:last-child::after{
  display:none;
}


/* contained “mini hero” band */
.hack-mini-hero__inner{
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem; /* rounded-4 feel */
  padding: 4.25rem 1.5rem; /* lots of space */
  background: linear-gradient(135deg, var(--hackathon-gradient-start), rgba(155,69,209,.92));
  box-shadow: 0 22px 55px rgba(0,0,0,.16);
}

@media (min-width: 992px){
  .hack-mini-hero__inner{ padding: 5.25rem 2rem; }
}

/* subtle globe / latitude lines */
.hack-mini-hero__inner::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(circle at 70% 50%, rgba(255,255,255,.14), transparent 58%),
    radial-gradient(circle at 40% 30%, rgba(255,255,255,.10), transparent 52%),
    repeating-radial-gradient(circle at 70% 55%,
      rgba(255,255,255,.10) 0 1px,
      transparent 1px 24px);
  opacity:.35;
  transform: rotate(-6deg);
  pointer-events:none;
}

/* soft “sweep” highlight, optional but nice */
.hack-mini-hero__inner::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-30%;
  width:85%;
  height:220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  transform: rotate(18deg);
  opacity:.35;
  pointer-events:none;
}

/* keep text crisp above overlays */
.hack-mini-hero__inner h4{
  position: relative;
  z-index: 1;
  letter-spacing: .2px;
}

footer .title{
  color: #fff !important;
}