body {
	background: url('../img/sma_bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
	color: #ECBB30;
	font-family: 'Inter', sans-serif;
	font-size: 16px;
	padding-top: 80px;
	
	/* stops page wiggle in iOS Safari */
	overflow-x: hidden;

}

/* NAV */

.sma-navbar {
	text-align: center;
	font-family: 'Lato', sans-serif;
	text-transform: uppercase;
	letter-spacing: 5px;
	font-size:18px;
	background-color: #0C0905;

}

.sma-border {
  border-bottom: none !important;
  background-image: url('../img/sma_navbar_border.png');
  background-repeat: no-repeat;
  background-position: bottom center; 
  background-size: 100% auto; 
  padding-bottom: 10px; 
}

.sma-navbar .nav-link, .nav-link:visited {
	color: #ECBB30;
}

.sma-navbar .nav-link:hover {
	color: #f0f0ff;
}

.sma-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(236, 187, 58, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* LINK */

a, a:visited {
color:#FEE991;
}

a:hover {
text-decoration:none;
}



/* HEADERS */

h1, h2, h3 {
	font-family: 'Playfair Display SC', serif;
  	background: -webkit-linear-gradient(#FEE991, #905402);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;	
	letter-spacing: 0px;
	font-variant: small-caps;	
	text-transform: uppercase;
}

h1 {
	font-size: 96px;
}

h2 {
	font-size: 48px;
}

h3 {
	font-size: 36px;
}

/* BUTTONS */

.btn {
	background: #ECBB30;
	border-radius: 20px;
	padding:12px 28px 12px 28px;
	font-family: 'Inter', sans-serif;
	font-weight: bold;
	font-size: 16px;
	color:#000;		
	text-transform: uppercase;
}

.btn:visited {
	color:#000;
}

.btn-twitch {
	background: #9146ff;
}

.btn-twitch:link, .btn-twitch:visited {
	color: #f0f0ff;
	border: none;
}

.btn-twitch:hover {
	color: #772CE8;
}

/* HORIZONTAL RULE */

.divider {
	border: 0; 
	height: 140px; 
	background: url("../img/sma_divider.png") no-repeat center; 
  	opacity: 1.0;
}

.divider-small {
	border: 0; 
	height: 60px; 
	background: url("../img/sma_divider_small.png") no-repeat center; 
	opacity: 1.0;
}



/* SMA */

.sma-event-details {
	font-family: 'Playfair Display', serif;
	font-size: 30px; 
	line-height: 36px; 
}

.sma-event-host {
	font-family: 'Playfair Display SC', serif;
	text-transform:uppercase; 
	line-height: 24px; 
	font-size: 18px;
	letter-spacing: 4px;
}

.sma-category-sponsor {
	font-family: 'Playfair Display SC', serif;
	font-size:14px;
	text-transform: uppercase;
}

.sma-category-description {
	font-family: 'Inter', sans-serif;
}


/* CARDS */

.card {
	font-family: 'Inter', serif;
	background-color: #111;
	border: 1px solid #905402;
	color: #f0f0ff;
	transition: all 0.2s ease;
}

.card:hover {
	background-color: #252525;
	transform: translateY(-5px);
	border-color: #ECBB30;
}

.card-nominee {
	font-size:16px;
}

.card-nominee-link, .card-nominee-link:visited {
	color:#9146ff;
	font-size:12px;
	text-decoration: none;
	text-transform: uppercase;
}

.card-nominee-link:hover {
	color: #f0f0ff;
}

/* Force all cards to match the tallest card in the row */
.row.row-cols-3 .col,
.row.row-cols-md-4 .col,
.row.row-cols-lg-6 .col {
    display: flex;
}

.card {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Ensure images don't distort but take up the same space */
.card-img-top {
    height: 160px; /* Adjust this value to fit your design */
    object-fit: cover;
}

/* Make the card body expand to fill the remaining space */
.card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* This keeps the text/input at the bottom */
}

/* NEW COMPLEMENTARY GREEN LOGIC */
.btn-check:checked + .card {
	border-color: #2ecc71;
	background-color: #1e4d2b;
	/* Deep Forest Green */
	color: #ffffff;
	box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
}
.voted-grey {
	filter: grayscale(1);
	opacity: 0.6;
	pointer-events: none;
}

/* WINNER HIGHLIGHT — results page */
.winner-card {
	position: relative;
	width: 100%;
}
.winner-card .card {
	border-color: #ECBB30;
	background-color: #2a1f00;
	box-shadow: 0 0 20px rgba(236, 187, 48, 0.45);
	color: #ffffff;
}
.winner-badge {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translateX(-50%);
	background: #ECBB30;
	color: #000;
	font-family: 'Inter', sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 3px 10px;
	border-radius: 10px;
	z-index: 1;
	white-space: nowrap;
}

/* FOOTER */

footer {
	font-size: 14px; 
}

footer a, a:visited {
	color:#ECBB30;
}

/* Autocomplete on write-ins */

/* 1. The main dropdown container */
.ui-autocomplete {
    position: absolute;
    z-index: 9999 !important; /* Forces it above Bootstrap cards */
    background: #18181b !important; /* Dark Twitch-style background */
    border: 1px solid #3f3f46 !important;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
    padding: 5px 0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* 2. Individual result items */
.ui-menu-item {
    list-style: none;
}

.ui-menu-item .ui-menu-item-wrapper {
    display: block;
    padding: 8px 15px;
    color: #efeff1;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    border: none !important;
}

/* 3. The "Hover" or "Selected" state */
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background-color: #9146ff !important; /* Twitch Purple */
    color: #ffffff !important;
    margin: 0 !important;
    border: none !important;
}

/* 4. Hide the annoying 'Helper' text jQuery UI adds to the bottom of the page */
.ui-helper-hidden-accessible {
    display: none !important;
}

/* Update your existing .ui-menu-item style or add this */
.ui-menu-item .ui-menu-item-wrapper {
    display: flex !important;
    align-items: center;
    padding: 10px 15px !important;
}

.ui-menu-item img {
    border: 1px solid #444;
    object-fit: cover;
}

.faq h3 { font-size: 30px; }
.faq p {

margin-bottom:40px;

}

/* MEDIA QUERIES */

@media (max-width: 992px) {

	.card-nominee {font-size: 13px;}

}

@media (max-width: 576px) {

	body {font-size: 16px;}
	h1 {font-size: 54px;}
	h2 {font-size: 42px;}
	h3 {font-size: 30px;}
	.card-nominee {font-size: 12px;}
	.sma-category-description {font-size: 16px; line-height:18px;}	
	
	.sma-event-details {
		font-size: 30px; 
		line-height: 36px; 
		font-variant: small-caps;
	}

	.sma-event-host {
		text-transform:uppercase; 
		line-height: 24px; 
		font-size: 12px;
		letter-spacing: 4px;
	}

}