/* ==========================================================================
   MX-5 Cup History — Mazda Motorsports theme
   Loaded AFTER css/w3.css. Styles the public front end (index.php) fully;
   also carries a couple of site-wide rules (button shape/interaction,
   base typography) that reach admin screens loaded into #mainLoad since
   they share this page. Admin panel button COLORS are untouched on
   purpose -- green/red/orange still mean Save/Delete/Cancel there.
   ========================================================================== */

:root{
	--mz-red:        #C8102E;
	--mz-red-dark:   #96051D;
	--mz-red-bright: #E4002B;
	--mz-black:      #0B0B0C;
	--mz-charcoal:   #1B1B1E;
	--mz-grey:       #6B6B6E;
	--mz-grey-line:  #d9d9d9;
	--mz-off-white:  #F5F5F6;
	--mz-white:      #FFFFFF;

	/* Real height of the fixed nav (black bar + red divider + white
	   action bar) with room to spare. w3.css's own .w3-modal rule
	   assumes a 100px navbar via a hardcoded padding-top -- our nav is
	   taller than that now, so anything using that default (every
	   w3-modal popup: Help, Edit Driver, Edit Event, Edit Track) ends up
	   with its top edge hidden behind the nav. Revisit this number if
	   the nav's own height changes again. */
	--mz-nav-clear: 12em;
}

body{
	font-family: "Inter", sans-serif;
	color: var(--mz-charcoal);
	background: var(--mz-white);
}
h1,h2,h3,h4,h5,h6{
	font-family: "Rajdhani", "Inter", sans-serif;
	letter-spacing: 0.04em;
	font-weight: 700;
}

/* -------------------- Navbar -------------------- */
.w3-top{
	/* w3.css only gives this z-index:1, which is easy for other stacked
	   content (hero caption, modals, etc.) to accidentally out-rank.
	   Pin it explicitly so the sticky nav always wins while scrolling. */
	z-index: 1000 !important;
}
/* Every popup in the admin panel (Help, Edit Driver, Edit Event, Edit
   Track) is a .w3-modal. w3.css hardcodes padding-top:100px on that
   class (with even smaller 30px/50px versions at narrow breakpoints) --
   all sized for a much shorter navbar than this one. Overriding
   unconditionally here (it comes later in the cascade than w3.css, so
   this wins at every breakpoint without needing to be repeated inside
   media queries) so modal content actually starts below the nav instead
   of partly behind it. */
.w3-modal{
	padding-top: var(--mz-nav-clear) !important;
}
#myNavbar{
	background: var(--mz-black) !important;
	border-bottom: 4px solid var(--mz-red);
}
#myNavbar .logo{
	height: 2.6em;
}
#myNavbar .w3-bar-item.w3-button{
	font-family: "Rajdhani", "Inter", sans-serif;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--mz-off-white);
}
#myNavbar .w3-bar-item.w3-button:hover{
	color: var(--mz-red-bright) !important;
	background: rgba(255,255,255,0.06) !important;
}
#myNavbar a.-signBtn{
	color: var(--mz-red-bright) !important;
}

/* action-strip under the navbar (Drivers / Events / Tracks / Import) */
.mz-actionbar{
	background: var(--mz-off-white);
	border-bottom: 1px solid var(--mz-grey-line);
	padding-top: 0.3em;
	padding-bottom: 0.3em;
}
/* Styled to match the plain text links in the black top nav (SIGN-IN /
   ABOUT / CONTACT) -- same shape and hover behavior, just inverted for
   this bar's light background: dark text at rest instead of light text,
   and a dark hover tint instead of a light one. */
.-fbtn{
	width: auto;
	min-width: 0;
	padding: 14px 22px;
	font-size: 1em;
	letter-spacing: 0.06em;
	border: none !important;
	background: transparent !important;
	color: var(--mz-charcoal) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	transition: color .12s ease, background .12s ease;
}
.-fbtn:hover{
	color: var(--mz-red-bright) !important;
	background: rgba(0,0,0,.06) !important;
	box-shadow: none !important;
	transform: none !important;
}
/* mz-btn-red / mz-btn-outline no longer carry their own fill/border --
   the action bar is now unified plain-text links like the main nav, so
   these are kept only so the markup's class list doesn't need editing. */
.mz-btn-red, .mz-btn-outline{
	background: transparent !important;
	border: none !important;
}

/* -------------------- Sidebar (mobile menu) -------------------- */
#mySidebar{
	background: var(--mz-black) !important;
	width: 260px;
}
#mySidebar .w3-bar-item{
	font-family: "Rajdhani", "Inter", sans-serif;
	letter-spacing: 0.05em;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
#mySidebar .w3-bar-item:hover{
	background: var(--mz-red) !important;
	color: var(--mz-white) !important;
}

/* -------------------- Hero -------------------- */
.hedimage{
	position: relative;
	/* z-index:0 here creates a NEW stacking context scoped to this element,
	   so .mz-hero-caption's z-index below is only ever compared against
	   its own siblings inside .hedimage/.mainimage -- it can no longer
	   "leak out" and out-rank the fixed navbar's z-index while scrolling. */
	z-index: 0;
}
.mainimage{
	position: relative;
	z-index: 0;
}
.mainimage::after,
.hedimage::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11,11,12,.15) 0%, rgba(11,11,12,.75) 100%);
}
.mz-hero-caption{
	position: absolute;
	left: 0; right: 0; bottom: 1.5em;
	z-index: 2;
	text-align: center;
	color: var(--mz-white);
}
.mz-hero-caption h1{
	font-size: 2.4em;
	margin: 0;
	text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.mz-hero-caption p{
	margin: .3em 0 0;
	font-size: 1.1em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mz-off-white);
}

/* -------------------- Section headings -------------------- */
.hedblue{
	color: var(--mz-red) !important;
	font-family: "Rajdhani", "Inter", sans-serif !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.mz-section-title{
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--mz-black);
	position: relative;
	padding-bottom: 0.4em;
}
.mz-section-title::after{
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	background: var(--mz-red);
	margin: 0.4em auto 0;
}

/* -------------------- Info cards (Drivers/Events blurbs) -------------------- */
.mz-card{
	background: var(--mz-white);
	border: 1px solid var(--mz-grey-line);
	border-top: 4px solid var(--mz-red);
	border-radius: 4px;
	padding: 1.6em 1.8em;
	box-shadow: 0 2px 10px rgba(0,0,0,.06);
	height: 100%;
}
.mz-card h3{
	margin-top: 0;
}
.mz-card p{
	color: var(--mz-grey);
	margin-bottom: 0;
}

/* -------------------- About -------------------- */
.mz-about{
	background: var(--mz-off-white);
}

/* -------------------- Contact -------------------- */
.mz-contact{
	background: var(--mz-black);
	color: var(--mz-white);
}
.mz-contact .mz-section-title{
	color: var(--mz-white);
}
.mz-contact input.w3-input{
	background: var(--mz-charcoal);
	color: var(--mz-white);
	border: 1px solid #3a3a3d !important;
}
.mz-contact input.w3-input::placeholder{
	color: #9a9a9d;
}
.mz-contact input.w3-input:focus{
	border-color: var(--mz-red) !important;
	outline: none;
}
.mz-contact button[type="submit"]{
	background: var(--mz-red) !important;
	letter-spacing: 0.05em;
	font-weight: 700;
}
.mz-contact button[type="submit"]:hover{
	background: var(--mz-red-bright) !important;
}

/* -------------------- Footer -------------------- */
footer.mz-footer{
	background: var(--mz-black) !important;
	color: #b8b8ba !important;
	border-top: 3px solid var(--mz-red);
	font-size: 0.85em;
	letter-spacing: 0.03em;
}

/* ==========================================================================
   Global button modernization
   Applies to EVERY .w3-button / .w3-btn on the page -- including admin
   screens (drivers/events/tracks/import/sign-in) since they're loaded into
   #mainLoad on this same document. Color is untouched here (Save/Delete/
   Cancel/Edit meaning across the admin panel is fully preserved) -- but
   typeface IS forced to Rajdhani, uppercase, on every button, including
   ones inside admin_*.php that set their own font-family (e.g. the
   -dName-classed Search/Clear/Help/+Add buttons) -- hence !important here.
   ========================================================================== */
.w3-btn, .w3-button{
	font-family: "Rajdhani", "Inter", sans-serif !important;
	text-transform: uppercase;
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: 0.03em;
	box-shadow: 0 1px 2px rgba(0,0,0,.14);
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.w3-btn:hover, .w3-button:hover{
	filter: brightness(1.08);
	box-shadow: 0 6px 14px rgba(0,0,0,.20);
	transform: translateY(-1px);
}
.w3-btn:active, .w3-button:active{
	filter: brightness(0.93);
	box-shadow: 0 1px 2px rgba(0,0,0,.14);
	transform: translateY(0);
}
.w3-btn:focus-visible, .w3-button:focus-visible{
	outline: 2px solid var(--mz-red);
	outline-offset: 2px;
}
.w3-button:disabled, .w3-btn:disabled{
	transform: none;
	box-shadow: none;
	filter: none;
}
/* Tiny inline "EDIT" buttons in admin list rows -- keep the lift subtle
   since they sit inside dense table rows. */
.w3-tiny.w3-button:hover{

	transform: translateY(-1px) scale(1.02);
}

/* ==========================================================================
   Admin search/filter bars (Drivers / Events / Tracks "next nav")
   The .w3-container.w3-center div is the search/filter row at the top of
   each of those three pages (Import uses a different form layout, handled
   separately below). Scoped to this specific container so it never touches
   the Save/Cancel/Delete/Confirm buttons in modals, or the Edit/Use File
   buttons elsewhere -- those keep their existing semantic colors.
   ========================================================================== */

/* Page-identity header bands. Previously these three pages reused the
   plain w3-green/w3-blue/w3-grey utility classes (also reused by modal
   headers elsewhere) -- moved to dedicated classes so these can be
   recolored without touching any modal. Also replaces the old fixed
   height:7em/padding-top:3em (sized for the old small buttons) with
   auto-height + real padding -- extra padding-top specifically so the
   control row isn't crammed against the top edge of the colored band. */
.mz-page-header{
	height: auto;
	padding: 2.2em 1em 1.3em;
}
.mz-hdr-drivers{ background: var(--mz-red) !important; }
.mz-hdr-events{ background: var(--mz-grey) !important; }
.mz-hdr-tracks{ background: var(--mz-charcoal) !important; }

.w3-container.w3-center{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.9em;
	padding: 0.4em 0;
}
/* Search / Clear / Help / +Add Event / +Add Track -- sized and styled
   to feel like the plain-text links in the public action bar (auto
   width instead of a fixed 12vw, no fill/border/shadow/lift at rest)
   rather than big solid boxes. Colors are inverted from the action bar
   (light text instead of dark) since these sit on dark/saturated page
   headers (red/grey/charcoal) instead of a light background. */
.w3-container.w3-center .w3-button.w3-sand,
.w3-container.w3-center .w3-button.w3-amber,
.w3-container.w3-center .w3-button.w3-blue{
	width: auto !important;
	min-width: 0 !important;
	padding: 10px 18px !important;
	background: transparent !important;
	color: var(--mz-off-white) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	letter-spacing: 0.06em;
}
.w3-container.w3-center .w3-button.w3-sand:hover,
.w3-container.w3-center .w3-button.w3-amber:hover,
.w3-container.w3-center .w3-button.w3-blue:hover{
	background: rgba(255,255,255,.10) !important;
	color: var(--mz-red-bright) !important;
	box-shadow: none !important;
	transform: none !important;
}
/* LName / mxYear text search fields -- same dark panel + red focus
   accent as the inputs in the public Contact ("SEND MESSAGE") form. */
.w3-container.w3-center input.w3-input{
	background: var(--mz-charcoal) !important;
	color: var(--mz-white) !important;
	border: 1px solid #3a3a3d !important;
	border-radius: 0 !important;
	width: 220px;
}
.w3-container.w3-center input.w3-input::placeholder{
	color: #9a9a9d;
}
.w3-container.w3-center input.w3-input:focus{
	border-color: var(--mz-red) !important;
	outline: none;
}
/* Dropdowns everywhere -- de-rounded to match the now-rectangular
   buttons instead of the old 16px pill shape. */
select.w3-round-xlarge{
	border-radius: 0 !important;
}

/* Import page's select fields (myEvent/myType/myFinal) are already
   rectangular -- just bring the focus state in line with the rest of
   the modernized form fields. */
#importForm select.w3-select:focus,
#importForm input.w3-input:focus{
	border-color: var(--mz-red) !important;
	outline: none;
}

/* -------------------- Small screens -------------------- */
@media (max-width: 600px){
	.-fbtn{
		width: 100%;
		margin-bottom: 0.5em;
	}
	.mz-hero-caption h1{
		font-size: 1.5em;
	}
}