@font-face {font-family: 'Rock Salt';src: url('https://azopracing.com/includes/font/RockSalt-Regular.woff2') format('woff2'),url('https://azopracing.com/includes/font/RockSalt-Regular.ttf') format('truetype');font-style: normal;font-weight: 400;font-display: swap;}
@font-face {font-family: 'Protest Guerrilla';src: url('https://azopracing.com/includes/font/ProtestGuerrilla-Regular.woff2') format('woff2'),url('https://azopracing.com/includes/font/ProtestGuerrilla-Regular.ttf') format('truetype');font-style: normal;font-weight: 400;font-display: swap;}
/* CSS VARIABLES */
:root {
 /* Colors */
 --color-primary: #ff0000;--color-dark: #000;--color-light: #fff;--color-gray-darkest: #1d1d1d;--color-gray-dark: #2d2d2d;--color-gray-medium: #555555;--color-gray-light: #777777;--color-gray-lighter: #aaaaaa;--color-gray-lightest: #f9f9f9;--color-text: #333;
/* Gradients */
--gradient-dark: linear-gradient(135deg, #1d1d1d 0%, #2d2d2d 100%);--gradient-light: linear-gradient(135deg, #eeeeee 0%, #bbbbbb 100%);--gradient-light-reverse: linear-gradient(135deg, #aaaaaa 0%, #ffffff 50%);--gradient-black: linear-gradient(135deg, #000000 0%, #2d2d2d 100%);
/* Spacing */
--spacing-xs: 0.3rem;--spacing-sm: 0.5rem;--spacing-md: 1rem;--spacing-lg: 2rem;
/* Border Radius */
--border-radius-sm: 12px;--border-radius-md: 15px;
/* Shadows */
--shadow-nav: 0 2px 10px rgba(0, 0, 0, 0.3);--shadow-dropdown: 0 8px 16px rgba(0, 0, 0, 0.2);--shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
/* Text Shadows */
--text-shadow-dark: 2px 2px 4px rgba(0, 0, 0, 0.3);--text-shadow-light: 2px 2px 4px rgba(255, 255, 255, 0.8);--text-shadow-gray: 2px 2px 4px rgba(100, 100, 100, 0.3);
/* Transitions */
--transition-default: 0.3s;--transition-all: 0.4s all;
/* Typography */
--font-size-lg: 1.2rem;--font-size-xl: 1.5rem;--font-size-2xl: 1.8rem;--line-height-base: 1.6;--line-height-content: 1.8;
}
/* RESET & BASE STYLES */
* {margin: 0;padding: 0;box-sizing: border-box;}
html,body {height: 100%;}
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;line-height: var(--line-height-base);color: var(--color-text);background: var(--color-dark);min-height: 100vh;display: flex;flex-direction: column; }
/* HR */
hr {margin-top: var(--spacing-sm);border: 0;height: 2px;background: linear-gradient(to right, rgba(0, 0, 0, 0.25),rgba(0, 0, 0, 1),rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.25));}
.red {margin-top: 0;border: 0;height: 3px;background: linear-gradient(to right,rgba(255,0,0,0.05),rgba(255,0,0,1),rgba(255,0,0,1),rgba(255,0,0,0.05));}
.reverse {margin-top: var(--spacing-sm);border: 0;height: 2px;background: linear-gradient(to right,rgba(255,255,255,0.25),rgba(255,255,255,1),rgba(255,255,255,1),rgba(255,255,255,0.25));}
/* NAVIGATION */
.nav {background: var(--gradient-dark);padding: var(--spacing-md) 0;position: sticky;top: 0;z-index: 1000;box-shadow: var(--shadow-nav);height: 65px;}
.nav-container {max-width: 1200px;margin: 0 auto;padding: 0 var(--spacing-lg);display: flex;justify-content: center;align-items: center;}
.logo {color: var(--color-primary);font-size: var(--font-size-2xl);font-weight: bold;letter-spacing: 2px;}
.logo img {width: 200px;overflow: visible;}
.nav-links {display: flex;gap: var(--spacing-lg);list-style: none;letter-spacing: 2px;}
.nav-links a {color: var(--color-light);text-decoration: none;font-weight: 500;transition: color var(--transition-default);}
.nav-links a:hover,.nav-links a:focus {color: var(--color-primary);outline: none;}
.nav-links-dropdown {position: relative;}
.nav-links-dropdown-content {display: none;position: absolute;top: 50%;left: 0;background-color: #444;min-width: 400px;box-shadow: var(--shadow-dropdown);padding: var(--spacing-md);margin: 0;list-style: none;z-index: 10;border-radius: var(--border-radius-md);}
.nav-links-dropdown:hover .nav-links-dropdown-content,.nav-links-dropdown:focus-within .nav-links-dropdown-content {display: block;}
.nav-links-dropdown-content li a {display: block;padding: 5px;color: var(--color-light);}
.nav-links-dropdown-content li a:hover,.nav-links-dropdown-content li a:focus {background: #555;color: var(--color-primary);}
/* FOOTER */
footer {background: var(--gradient-black);color: var(--color-light);text-align: center;padding: var(--spacing-lg);font-size: 0.8rem;margin-top: auto;}
/* CONTAINER */
.container {max-width: 1200px;width:100%;margin: 0 auto;padding: var(--spacing-md);flex: 1;}
.wrapper {background: var(--color-light);color: var(--color-dark);border-radius: var(--border-radius-sm);padding: var(--spacing-md);margin-top:var(--cspacing-sm);margin-bottom:var(--spacing-sm);}
.header {letter-spacing: 5px;background: linear-gradient(to right, rgba(0, 0, 0, 0.05),rgba(200, 200, 200, 1),rgba(200, 200, 200, 1),rgba(0, 0, 0, 0.05));;color: var(--color-dark);display: flex;align-items: center;gap: var(--spacing-sm);margin-bottom: 0;padding-bottom: var(--spacing-sm);padding-left: var(--spacing-sm);text-shadow: var(--text-shadow-dark);border-top-right-radius: 10px;border-top-left-radius: 10px;}
.content {color: var(--color-dark);line-height: var(--line-height-content);padding: 0 var(--spacing-sm);display: block; max-width: 100%;}
.content img {max-width: 100%;}
.gold-sponsor img {width: 250px;margin-left: 10px;margin-right: 10px;}
.silver-sponsor img {width: 200px;margin-left: 10px;margin-right: 10px;}
.bronze-sponsor img {width: 175px;margin-left: 10px;margin-right: 10px;}
.product-sponsor img {width: 150px;margin-left: 10px;margin-right: 10px;}
a {color: var(--color-dark);text-decoration: none;font-weight: 500;transition: color var(--transition-default);}
a:hover, a:focus {color: var(--color-primary);}
h2 {font-size: var(--font-size-2xl);display: flex;align-items: center;gap: var(--spacing-sm);text-shadow: var(--text-shadow-dark);}
h3 {font-size: var(--font-size-xl);color: var(--color-dark);}
h4 {font-size: var(--font-size-lg);color: var(--color-dark);}
/* HOME */
.home .header-video {padding: var(--spacing-sm);text-align: center;}
.home .header-video video {max-width: 1200px;width: 100%;height: auto;z-index: 0;border-radius: var(--border-radius-md);}
.home .gold-sponsor {color: var(--color-light);text-align: center;font-family: "Protest Guerrilla";padding-bottom: var(--spacing-md);}
.home .sponsor-image {display: inline-block;vertical-align: middle;}
.home .social {display: inline-block;transition: transform var(--transition-default), box-shadow var(--transition-default);}
.home .social:hover {transform: translateY(-5px);box-shadow: var(--shadow-hover);}
.home .sponsors {background: var(--color-dark);color: var(--color-light);border-radius: var(--border-radius-sm);padding: var(--spacing-lg);text-align: center;font-family: "Protest Guerrilla";}
/* PAGE SPONSOR  */
.page .sponsors {background: var(--color-dark);color: var(--color-light);padding: var(--spacing-lg);text-align: center;}
.page .sponsors h1 {margin-bottom: var(--spacing-md);text-align: center;font-family: "Protest Guerrilla";}
.page .sponsor-image {display: inline-block;vertical-align: middle;}
/* TITLE  */
.title {background: var(--color-dark);color: var(--color-light);border-top-right-radius: 10px;border-bottom-right-radius: 10px;padding-left: 5px;margin-top: 2px;}
.map iframe {width: 100%;border: 0;display: block;}
/* YOUTUBE PLAYER */
.youtube-player {position: relative;padding-bottom: 56.23%;height: 0;overflow: hidden;max-width: 100%;background: var(--color-dark);margin: 5px;}
.youtube-player iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background: transparent;}
.youtube-player img {bottom: 0;display: block;left: 0;margin: auto;max-width: 100%;width: 100%;position: absolute;right: 0;top: 0;border: none;height: auto;cursor: pointer;transition: var(--transition-all);}
.youtube-player img:hover {filter: brightness(75%);}
.youtube-player .play {height: 200px;width: 200px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);cursor: pointer;}
/* FORMS */
form {border-radius: 5px;background-color: #f2f2f2;padding: 5px;margin: 20px auto;font-size: 1.2rem;}
label {display: block;}
input, select {width: 100%;padding: 10px;display: inline-block;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;font-size: 1.2rem;}
form.was-validated input:invalid, form.was-validated select:invalid {border: 2px dashed red;}
form.was-validated input:valid,form.was-validated select:valid {border: 2px solid green;}
.submitBtn {width: 100%;background-color: var(--color-gray-dark);color: white;padding: 5px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;}
.submitBtn:hover {background-color: var(--color-gray-darkest);}
.race-list {text-align: center;}
#loading-overlay {
  position: fixed;
  inset: 0;                 /* shorthand for top/right/bottom/left: 0 */
  background: rgba(0, 0, 0, 0.45);
  display: none;            /* hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loading-overlay.active {
  display: flex;
}

#loading-overlay .loading-box {
  background: #fff;
  padding: 20px 30px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
}

#loading-overlay .spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 4px solid #ccc;
  border-top-color: #c00;  /* AZOP red-ish if you want */
  animation: spin 0.8s linear infinite;
  margin: 0 auto 10px;
}

#loading-overlay .loading-text {
  font-size: 14px;
  font-weight: 600;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}



/* MOBILE RESPONSIVE */
@media (max-width: 1195px) {
.nav {height: auto;padding: 0.75rem 0 var(--spacing-md);position: relative;top: auto;}
.nav-container { flex-direction: column;align-items: center; }
.logo { order: -1;justify-content: center;margin-bottom: 10px; }
.logo img {max-width: 60vw;overflow: visible;}
.nav-links {flex-direction: column;flex-wrap: wrap;gap: var(--spacing-md);font-size: 0.9rem;padding: 0;align-items: center;}
.nav-links-dropdown-content {position: static;box-shadow: none;top: 100%;}
}