/* George Dale - site theme: forest green night game.
   Palette lives in Global Styles (post 103); these are the pieces global styles
   cannot express - selection, scrollbar, ornaments, football icons.
   The stadium background lives in stadium.css. Accents are used ONE at a time, never blended. */

:root {
	--gd-base:       #0d2818;   /* centre of the field */
	--gd-base-glow:  #1a4a2e;
	--gd-surface:    #153823;
	--gd-border:     #2d5a3f;
	--gd-contrast:   #ffffff;
	--gd-contrast-2: #a8c4b4;
	--gd-accent-2:   var(--gd-contrast-2);

	/* Accents. Yellow and orange are safe as small text on the greens; red and
	   blue only as fills, bars, borders and icons; purple only as ornament. */
	--gd-accent-red:    #e63946;
	--gd-accent-orange: #f77f00;
	--gd-accent-yellow: #fcbf49;
	--gd-accent-blue:   #1d7fbb;
	--gd-accent-purple: #7b2cbf;
	--gd-loss:          #c1121f;

	/* Cards: a solid yellow hairline plus a soft warm spill, as if lit from the
	   stadium lights above - three low-opacity yellow layers and a dark drop. */
	--gd-card-border: 1px solid var(--gd-accent-yellow);
	--gd-glow:
		0 0 10px color-mix(in srgb, var(--gd-accent-yellow) 20%, transparent),
		0 0 28px color-mix(in srgb, var(--gd-accent-yellow) 8%, transparent),
		0 -6px 22px -10px color-mix(in srgb, var(--gd-accent-yellow) 22%, transparent),
		0 12px 28px rgba(0, 0, 0, 0.45);

	/* Icon glyphs. They are painted through CSS masks, so the stroke colour
	   baked into each SVG is irrelevant - every icon renders in currentColor. */
	--gd-football:  url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23c9a961%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cellipse%20cx=%2212%22%20cy=%2212%22%20rx=%229.5%22%20ry=%225.5%22%20transform=%22rotate%28-45%2012%2012%29%22/%3E%3Cpath%20d=%22M7.6%2016.4%2016.4%207.6%22/%3E%3Cpath%20d=%22M9.7%2014.3l1.5%201.5M11.7%2012.3l1.5%201.5M13.7%2010.3l1.5%201.5%22/%3E%3C/svg%3E");
	--gd-helmet:    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23c9a961%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M20%2013.5a8%208%200%201%200-16%200v1a3%203%200%200%200%203%203h1.5%22/%3E%3Cpath%20d=%22M4.4%2014.6h9.8a2.6%202.6%200%200%201%202.6%202.6v.6%22/%3E%3Cpath%20d=%22M10%2018.2h6.8%22/%3E%3C/svg%3E");
	--gd-goalposts: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23c9a961%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2021v-9%22/%3E%3Cpath%20d=%22M5.5%2012h13%22/%3E%3Cpath%20d=%22M5.5%2012V3.4%22/%3E%3Cpath%20d=%22M18.5%2012V3.4%22/%3E%3Cpath%20d=%22M8.6%2021h6.8%22/%3E%3C/svg%3E");
	--gd-whistle:   url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%229%22%20cy=%2214%22%20r=%225%22/%3E%3Cpath%20d=%22M9%209h11.5v4.2h-6.9%22/%3E%3Ccircle%20cx=%229%22%20cy=%2214%22%20r=%221.4%22/%3E%3Cpath%20d=%22M5.6%2010.3%203.6%206.6%22/%3E%3C/svg%3E");
	--gd-jersey:    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M8.6%203.5%204%205.6%202.4%2010.2l3.2%201.3L7%209.4v11.1h10V9.4l1.4%202.1%203.2-1.3L20%205.6l-4.6-2.1a3.4%203.4%200%200%201-6.8%200z%22/%3E%3Cpath%20d=%22M9.3%2014h1.3M11.35%2014h1.3M13.4%2014h1.3%22/%3E%3C/svg%3E");
	--gd-yardline:  url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23c9a961%22%20stroke-width=%221.4%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M4.4%203.2v17.6%22/%3E%3Cpath%20d=%22M19.6%203.2v17.6%22/%3E%3Ctext%20x=%2212%22%20y=%2215.6%22%20text-anchor=%22middle%22%20font-family=%22Georgia%2Cserif%22%20font-size=%229.5%22%20fill=%22%23c9a961%22%20stroke=%22none%22%3E50%3C/text%3E%3C/svg%3E");
}

/* ---- background ------------------------------------------------------------ */
/* The page background is the stadium scene (stadium.css + stadium.svg, printed
   by gd-site-theme.php on wp_body_open). body keeps its flat --gd-base colour
   from Global Styles as the fallback underneath it. */

/* keep real content above the texture layer */
.wp-site-blocks { position: relative; z-index: 1; }

/* ---- selection + scrollbar ------------------------------------------------- */
::selection { background: var(--gd-accent-yellow); color: var(--gd-base); }

html { scrollbar-width: thin; scrollbar-color: var(--gd-border) var(--gd-base); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gd-base); }
::-webkit-scrollbar-thumb { background: var(--gd-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gd-accent-2); }

/* the team wheel is a light surface; leave its own scrollbar alone */
#gd-team-wheel { scrollbar-color: #c9c9c9 #ffffff; }

/* ---- focus rings: 2px accent, readable on the dark ground ------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:not(#gd-team-wheel):focus-visible {
	outline: 2px solid var(--gd-accent-yellow);
	outline-offset: 2px;
}

/* ---- links: underline on hover only ---------------------------------------- */
.wp-site-blocks a:where(:not(.wp-block-button__link)) { text-decoration: none; }
.wp-site-blocks a:where(:not(.wp-block-button__link)):hover { text-decoration: underline; }

/* ---- buttons --------------------------------------------------------------- */
.wp-block-button__link {
	background-color: var(--gd-surface);
	color: var(--gd-contrast);
	border: 1px solid var(--gd-accent-yellow);
	border-radius: 2px;
	letter-spacing: 0.04em;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--gd-accent-yellow);
	color: var(--gd-base);
}

/* ---- football icon utilities ----------------------------------------------- */
/* <span class="gd-icon gd-icon--whistle"></span> paints in the surrounding
   text colour, so an icon picks up the accent of the section it sits in. */
.gd-icon {
	display: block;
	width: 24px;
	height: 24px;
	background-color: currentColor;
	-webkit-mask: var(--gd-i) center / contain no-repeat;
	        mask: var(--gd-i) center / contain no-repeat;
}
.gd-icon--football  { --gd-i: var(--gd-football); }
.gd-icon--helmet    { --gd-i: var(--gd-helmet); }
.gd-icon--goalposts { --gd-i: var(--gd-goalposts); }
.gd-icon--yardline  { --gd-i: var(--gd-yardline); }
.gd-icon--whistle   { --gd-i: var(--gd-whistle); }
.gd-icon--jersey    { --gd-i: var(--gd-jersey); }
.gd-icon--sm { width: 16px; height: 16px; }
.gd-icon--lg { width: 32px; height: 32px; }

/* ---- section separator: football between two fading hairlines --------------- */
/* The hairlines are the separator's own background; the football is ::before,
   masked and painted in currentColor. Each separator wears one accent, cycling
   yellow > red > orange > blue > purple down the page. */
.wp-block-separator:not(.gd-hairline) {
	border: 0 !important;
	height: 22px;
	width: 200px;
	max-width: 200px;
	margin: 2.5rem auto;
	background:
		linear-gradient(90deg, transparent, var(--gd-border)) left center / 66px 1px no-repeat,
		linear-gradient(90deg, var(--gd-border), transparent) right center / 66px 1px no-repeat;
	position: relative;
	opacity: 0.9;
	color: var(--gd-accent-yellow);
}
.wp-block-separator:not(.gd-hairline)::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 22px;
	height: 22px;
	margin-left: -11px;
	background-color: currentColor;
	-webkit-mask: var(--gd-football) center / contain no-repeat;
	        mask: var(--gd-football) center / contain no-repeat;
}
.wp-block-separator:not(.gd-hairline):nth-of-type(5n+2) { color: var(--gd-accent-red); }
.wp-block-separator:not(.gd-hairline):nth-of-type(5n+3) { color: var(--gd-accent-orange); }
.wp-block-separator:not(.gd-hairline):nth-of-type(5n+4) { color: var(--gd-accent-blue); }
.wp-block-separator:not(.gd-hairline):nth-of-type(5n+5) { color: var(--gd-accent-purple); }

/* ---- team page header pattern ---------------------------------------------- */
/* the page template also prints wp:post-title; on team pages the designed
   header below is the real title, so hide the duplicate (scoped via :has) */
body:has(.gd-team-header) .wp-block-post-title { display: none; }

.gd-team-header { text-align: center; }
.gd-team-header .gd-icon { margin: 0 auto 14px; color: var(--gd-accent-yellow); }
.gd-team-header .gd-overline {
	color: var(--gd-contrast-2);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 12px;
	line-height: 1.4;
	margin: 0 0 8px;
}
.gd-team-header h1 { margin: 0; }
.wp-block-separator.gd-hairline {
	border: 0 !important;
	height: 1px;
	width: 40px;
	max-width: 40px;
	margin: 18px auto 0;
	background: var(--gd-accent-yellow);
	opacity: 0.9;
}

/* ---- footer: hairline + centred helmet ------------------------------------- */
footer.wp-block-template-part {
	padding-top: 28px;
}
footer.wp-block-template-part::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 20px;
	background-color: var(--gd-accent-yellow);
	-webkit-mask: var(--gd-helmet) center / contain no-repeat;
	        mask: var(--gd-helmet) center / contain no-repeat;
	opacity: 0.85;
}

/* ---- reading cards: body text never sits bare on the stadium ------------------ */
/* Same lit-card language as the stats, games and rankings cards. Pages whose
   main already holds a card component (team pages, Power Rankings) are left
   alone so cards never nest; their loose headings are handled separately. */
main.wp-block-group:not(:has(.gd-team-stats, .gd-power-rankings)),
.wp-block-post-content > .gd-team-header,
footer.wp-block-template-part > .wp-block-group {
	background: var(--gd-surface);
	border: var(--gd-card-border);
	border-radius: 4px;
	box-shadow: var(--gd-glow);
	box-sizing: border-box;
	padding: 32px;
	margin-left: auto;
	margin-right: auto;
}
main.wp-block-group:not(:has(.gd-team-stats, .gd-power-rankings)) {
	max-width: 900px;
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}
/* the team header card lines up with the stats card below it (760px + padding) */
.wp-block-post-content > .gd-team-header {
	max-width: calc(760px + 4.4rem + 2px);
	padding: 28px 2.2rem 32px;
}
footer.wp-block-template-part > .wp-block-group {
	max-width: 1000px;
	margin-bottom: 2.5rem;
	/* the template part sets 104px top/bottom padding inline */
	padding: 28px 32px 24px !important;
}
/* inside a card the card's own padding does the job of the theme's page gutter */
main.wp-block-group:not(:has(.gd-team-stats, .gd-power-rankings)) .has-global-padding {
	padding-left: 0;
	padding-right: 0;
}
main.wp-block-group:not(:has(.gd-team-stats, .gd-power-rankings)) .alignfull {
	margin-left: 0;
	margin-right: 0;
}
/* page body copy: a size up and airier now that it reads as a card */
main.wp-block-group:not(:has(.gd-team-stats, .gd-power-rankings)) p {
	font-size: 18px;
	line-height: 1.65;
}
/* George's orange paragraphs (#dd720f, set inline in the editor) move to the
   palette's orange: same idea, 4.9:1 on the card instead of 4.0:1 */
main.wp-block-group p[style*="#dd720f"],
main.wp-block-group p[style*="#dd720f"] a {
	color: var(--gd-accent-orange) !important;
}
/* footer: tighter rhythm inside its card. The empty middle spacer column goes,
   so the three link groups keep their row instead of stacking at 1000px. */
footer.wp-block-template-part .wp-block-columns { margin-bottom: 1rem; }
footer.wp-block-template-part .wp-block-column:nth-child(2):not(:has(*)) { display: none; }
footer.wp-block-template-part .wp-block-column:last-child { flex-basis: 70% !important; }
footer.wp-block-template-part .wp-block-columns + .wp-block-group { padding-top: 16px !important; }
footer.wp-block-template-part .wp-block-site-tagline { color: var(--gd-contrast-2); }

/* headings that sit directly on the stadium get a dark halo instead of a box */
.wp-block-post-title,
.gd-team-header .gd-overline {
	text-shadow: 0 0 4px var(--gd-base), 0 0 12px var(--gd-base), 0 1px 2px rgba(0, 0, 0, 0.8);
}

@media (max-width: 782px) {
	main.wp-block-group:not(:has(.gd-team-stats, .gd-power-rankings)),
	.wp-block-post-content > .gd-team-header,
	footer.wp-block-template-part > .wp-block-group {
		padding: 20px;
	}
	main.wp-block-group:not(:has(.gd-team-stats, .gd-power-rankings)),
	footer.wp-block-template-part > .wp-block-group {
		margin-left: 12px;
		margin-right: 12px;
	}
	main.wp-block-group:not(:has(.gd-team-stats, .gd-power-rankings)) p { font-size: 17px; }
}

/* ---- nav: a small muted football before each link, yellow on hover ---------- */
.wp-block-navigation .wp-block-navigation-item__content::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 6px;
	vertical-align: -1px;
	background-color: var(--gd-contrast-2);
	-webkit-mask: var(--gd-football) center / contain no-repeat;
	        mask: var(--gd-football) center / contain no-repeat;
	transition: background-color 0.15s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover::before,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible::before {
	background-color: var(--gd-accent-yellow);
}