/* =========================
BASE
========================= */

body{
font-family:system-ui;
background:#0f1115;
color:#f4f6fb;

}
a {
  color: white;
}
a:visited,
a:active {
  color: white;
  text-decoration: none; /* optional */
}
a:hover {
  color: gold;
  text-decoration: none; /* optional */
}
/* =========================
HEADER
========================= */

.top{
max-width:720px;
margin:0 auto 30px auto;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}


.top h1{
margin-bottom:8px;
}

header.top {
  display: block;color:#ffffff;
}

header.top h1 {
  display: block;
}

.meta{
color:#9aa3b2;
font-size:14px;
}
#eventTitle {
  font-size: clamp(22px, 5vw, 40px);
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 25px;
  text-transform: uppercase;
  line-height: 1.15;
  text-align:center;
}
#eventTitle {
color:#ffffff;
  word-break: break-word;
}

/* =========================
EVENT LIST
========================= */

.events-container{
display:flex;
flex-direction:column;
max-width:720px;
margin:0 auto;
min-height:800px;
gap:20px;
}

/* =========================
EVENT CARD
========================= */
.event-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin:0px 0px 6px 0px;
}
.event-meta {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.35;
}
.event-card{
background:#171a21;
border-radius:10px;
padding:22px;
border:1px solid #262b36;
box-shadow:0 4px 14px rgba(0,0,0,.4);
text-align:center;
}

.event-name{
font-size:18px;
font-weight:600;
margin-bottom:6px;
}

.event-date{
color:#9aa3b2;
font-size:14px;
margin-bottom:4px;
}

.event-location{
font-size:13px;
color:#9aa3b2;
margin-bottom:14px;
}

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

.event-actions{
margin-top:10px;
}

button{
padding:7px 12px;
border:none;
border-radius:4px;
cursor:pointer;
margin:4px;
font-size:13px;
width:auto!important;
}
.btn-register{
background:#b5b5b5;
width:160px!important;
}
.btn-interested{
background:#b5b5b5;
}

.btn-planning{
background:#b38b00;
}

.btn-registered{
background:#0a7c2f;
color:white;
}

/* =========================
ATTENDANCE
========================= */

.event-roster-toggle{
margin-top:10px;
font-size:13px;
color:#9aa3b2;
cursor:pointer;
}

.event-roster{
margin-top:10px;
font-size:14px;
text-align:left;
}

.roster-group{
font-weight:600;
margin-top:10px;
margin-bottom:4px;
color:#9aa3b2;
}

.roster-row{
padding:4px 0;
border-bottom:1px solid #262b36;
}

/* =========================
MODAL
========================= */

.modal{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.7);
display:flex;
align-items:center;
justify-content:center;
z-index:1000;
}

.modal.hidden{
display:none;
}

.modal-card{
background:#171a21;
padding:20px;
border-radius:8px;
width:320px;
max-width:90%;
border:1px solid #262b36;
}

#wrestlerSearch{
width:100%;
padding:8px;
margin-bottom:10px;
background:#0f1115;
border:1px solid #262b36;
color:#fff;
}

/* =========================
SEARCH RESULTS
========================= */

.search-result{
padding:8px;
border-bottom:1px solid #262b36;
cursor:pointer;
}

.search-result:hover{
background:#222;
}

.add-wrestler{
margin-top:10px;
font-size:13px;
color:#9aa3b2;
}

.add-wrestler a{
color:#4da3ff;
text-decoration:none;
}

.hidden{
display:none;
}

.portal-link{
color:#4da3ff;
text-decoration:none;
font-weight:500;
}

.portal-link:hover{
text-decoration:underline;
}

#event-meta {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.35;
}
#landing {

 background: radial-gradient(
    circle at 50% 0%,
    rgba(177,18,38,.15),
    transparent 60%
 
  );
}

.event-top{
display:flex;
gap:18px;
align-items:center;
margin-bottom:10px;
}

.event-flyer img{

height:115px;
object-fit:cover;
border-radius:6px;
cursor:pointer;
transition:transform .2s;
}

.event-flyer img:hover{
transform:scale(1.05);
}
.event-thumb{
  width:140px;
  height:140px;
  flex-shrink:0;
  border-radius:6px;
  overflow:hidden;
}

.event-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.event-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
}
.event-info{text-align:left;
flex:1;
}

.event-link{
display:inline-block;
margin-top:6px;
color:#7fb7ff;
font-size:14px;
text-decoration:none;
}

.event-link:hover{
text-decoration:underline;
}
#lightbox{
position:fixed;
inset:0;
background:rgba(0,0,0,.85);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

#lightbox img{
max-width:90%;
max-height:90%;
border-radius:10px;
}