/*
 Theme Name:   GameDay
 Theme URI:    https://www.gamedayclothing.com/
 Description:  GeneratePress child theme for GameDay — officially licensed fan gear for every team and every league. Editorial-authority brand on a navy chassis with a powder-blue signature and gold action color.
 Author:       GameDay
 Template:     generatepress
 Version:      1.0.0
*/

/* ==========================================================================
   1. DESIGN TOKENS  (--gd-*)
   Single source of truth: every color, space, radius, shadow lives here.
   ========================================================================== */

:root {
	/* Chassis + surfaces */
	--gd-navy: #08121F;
	--gd-navy-deep: #04101F;
	--gd-bar-1: #0C1B30;   /* header/footer gradient top */
	--gd-bar-2: #081320;   /* header/footer gradient bottom */
	--gd-panel: #0C1B30;   /* dropdown / card surface */

	/* Brand accents */
	--gd-powder: #1FA0DC;       /* signature */
	--gd-powder-hi: #5BC2E7;
	--gd-gold: #FFC20E;         /* action / "the click" */
	--gd-gold-hi: #FFD24E;

	/* Ink */
	--gd-ink: #F4F7FB;
	--gd-muted: rgba(255, 255, 255, 0.82);
	--gd-muted-2: rgba(255, 255, 255, 0.6);
	--gd-line: rgba(255, 255, 255, 0.08);

	/* Type */
	--gd-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--gd-font-display: "Anton", var(--gd-font);

	/* Spacing (8px base) */
	--gd-space-1: 0.25rem;
	--gd-space-2: 0.5rem;
	--gd-space-3: 0.75rem;
	--gd-space-4: 1rem;
	--gd-space-5: 1.5rem;
	--gd-space-6: 2rem;
	--gd-space-7: 3rem;
	--gd-space-8: 4rem;

	/* Radius */
	--gd-radius-sm: 4px;
	--gd-radius: 9px;
	--gd-radius-lg: 14px;

	/* Shadow */
	--gd-shadow-lg: 0 26px 50px -18px rgba(0, 0, 0, 0.75);

	/* Motion */
	--gd-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--gd-dur: 0.22s;
}

/* ==========================================================================
   2. HEADER + PRIMARY NAVIGATION
   GameDay "Goal Line" nav: underline links (powder hover, gold active) + a
   floating-card dropdown (powder->gold top edge, gold-dot bullets).

   Selectors verified against this project's GeneratePress 3.6.1
   (assets/css/main.css):
     • nav links carry line-height:60px           -> overridden to 1 + padding
     • submenus show via :not(.toggled) li:hover>ul / li.sfHover>ul
     • mobile shows via .main-navigation.toggled ... ul ul.toggled-on
     • dropdown indicator is span.dropdown-menu-toggle inside the parent <a>

   One-time admin setup:
     • Site Identity -> Logo: upload gameday-logo-header-transparent.png
     • Appearance -> Menus: build the league menu, assign to GP "Primary".
     • Customizer -> Layout -> Primary Navigation -> Dropdowns: "Hover".
   ========================================================================== */

/* Dark header bar */
.site-header {
	background: linear-gradient(180deg, var(--gd-bar-1) 0%, var(--gd-bar-2) 100%);
	border-bottom: 0;
}

.main-navigation,
.main-navigation .inside-navigation {
	background-color: transparent;
}

/* Transparent (white-text) logo lives on this dark bar */
.site-logo img,
.site-header .header-image {
	max-height: 44px;
	width: auto;
}

/* --- Top-level links: "Goal Line" underline --- */
.main-navigation .main-nav > ul > li > a {
	position: relative;
	color: var(--gd-muted);
	font-family: var(--gd-font);
	font-weight: 700;
	font-size: 13.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1;            /* override GP's 60px */
	padding: 12px 14px;        /* GP flex-centers this in the nav bar */
	transition: color var(--gd-dur) ease;
}

.main-navigation .main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 3px;
	border-radius: 2px;
	background: var(--gd-powder);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--gd-dur) var(--gd-ease);
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus {
	color: var(--gd-ink);
}

.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li > a:focus::after,
.main-navigation .main-nav > ul > li.sfHover > a::after {
	transform: scaleX(1);
}

/* Active page — gold underline (gold elsewhere = action; here a thin marker) */
.main-navigation .main-nav > ul > li[class*="current-menu"] > a {
	color: var(--gd-ink);
}

.main-navigation .main-nav > ul > li[class*="current-menu"] > a::after {
	background: var(--gd-gold);
	transform: scaleX(1);
}

/* When a parent item's dropdown is open, the dropdown's own powder->gold accent
   is the indicator — suppress the link underline so there aren't two stacked
   lines under the parent. */
.main-navigation .main-nav > ul > li.menu-item-has-children:hover > a::after,
.main-navigation .main-nav > ul > li.menu-item-has-children:focus-within > a::after,
.main-navigation .main-nav > ul > li.menu-item-has-children.sfHover > a::after {
	transform: scaleX(0);
}

/* Dropdown indicator chevron */
.main-navigation .main-nav .dropdown-menu-toggle {
	color: var(--gd-powder-hi);
	transition: transform var(--gd-dur) var(--gd-ease);
}

.main-navigation .main-nav > ul > li:hover > a .dropdown-menu-toggle,
.main-navigation .main-nav > ul > li.sfHover > a .dropdown-menu-toggle {
	transform: rotate(180deg);
}

/* --- Dropdown: floating card --- */
.main-navigation .main-nav ul ul {
	background: var(--gd-panel);
	border: 1px solid var(--gd-line);
	border-radius: var(--gd-radius-lg);
	box-shadow: var(--gd-shadow-lg);
	width: auto;
	min-width: 226px;
	padding: 9px;
}

/* powder -> gold accent edge */
.main-navigation .main-nav ul ul::before {
	content: "";
	position: absolute;
	top: 0;
	left: 18px;
	right: 18px;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: linear-gradient(90deg, var(--gd-powder), var(--gd-gold));
}

.main-navigation .main-nav ul ul li a {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--gd-muted);
	font-family: var(--gd-font);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: normal;
	padding: 11px 14px;
	border-radius: var(--gd-radius);
	transition: background 0.18s ease, color 0.18s ease;
}

/* gold-dot bullet */
.main-navigation .main-nav ul ul li a::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	transition: background 0.18s ease, transform 0.18s ease;
}

.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li a:focus,
.main-navigation .main-nav ul ul li[class*="current-menu"] > a {
	color: var(--gd-ink);
	background: rgba(255, 255, 255, 0.05);
}

.main-navigation .main-nav ul ul li a:hover::before,
.main-navigation .main-nav ul ul li a:focus::before,
.main-navigation .main-nav ul ul li[class*="current-menu"] > a::before {
	background: var(--gd-gold);
	transform: scale(1.25);
}

/* --- Mobile (.toggled): flatten the card into the stacked menu --- */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle .mobile-menu {
	color: var(--gd-ink);
}

.main-navigation.toggled .main-nav ul ul {
	position: static;
	width: 100%;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: rgba(255, 255, 255, 0.03);
}

.main-navigation.toggled .main-nav ul ul::before {
	display: none;
}

.main-navigation.toggled .main-nav > ul > li > a::after {
	display: none;
}

/* ==========================================================================
   3. SITE FOOTER
   Rendered by partials/site-footer.php (wired in inc/footer.php, which removes
   GP's default footer + "Built with GeneratePress"). Navy — bookends the
   header. Uses GP's .grid-container so it aligns with header + content.
   ========================================================================== */

.gd-footer {
	position: relative;
	background: linear-gradient(180deg, var(--gd-bar-1) 0%, var(--gd-navy-deep) 100%);
	color: var(--gd-muted-2);
}

/* powder -> gold top accent — cohesion with header dropdown + OG card */
.gd-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--gd-powder), var(--gd-gold));
}

.gd-footer__inner {
	padding-top: var(--gd-space-8);
	padding-bottom: 0;
	padding-inline: 40px;
}

.gd-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.3fr;
	gap: var(--gd-space-7);
}

.gd-footer__logo {
	height: 40px;
	width: auto;
	display: block;
	margin-bottom: var(--gd-space-5);
}

.gd-footer__blurb {
	font-size: 0.875rem;
	line-height: 1.65;
	max-width: 34ch;
	margin: 0;
}

.gd-footer__colh {
	color: var(--gd-ink);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 var(--gd-space-4);
}

.gd-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--gd-space-3);
}

.gd-footer__col a {
	color: var(--gd-muted-2);
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.18s ease;
}

.gd-footer__col a:hover,
.gd-footer__col a:focus {
	color: var(--gd-powder-hi);
}

.gd-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--gd-space-3);
	margin-top: var(--gd-space-7);
	padding: var(--gd-space-5) 0 var(--gd-space-6);
	border-top: 1px solid var(--gd-line);
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
}

.gd-footer__legal a {
	color: var(--gd-muted-2);
	text-decoration: none;
	margin-left: var(--gd-space-5);
}

.gd-footer__legal a:hover,
.gd-footer__legal a:focus {
	color: var(--gd-ink);
}

@media (max-width: 768px) {
	.gd-footer__inner {
		padding-inline: var(--gd-space-5);
	}

	.gd-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: var(--gd-space-6);
	}

	.gd-footer__brand {
		grid-column: 1 / -1;
	}

	.gd-footer__bottom {
		justify-content: flex-start;
	}

	.gd-footer__legal a {
		margin-left: 0;
		margin-right: var(--gd-space-5);
	}
}