/*
Theme Name:   Divi Child — NerdSports
Description:  NerdSports customisations on top of Divi 5. Layouts live in Divi Theme Builder; this file holds custom CSS.
Author:       NerdSports
Template:     Divi
Version:      0.2.0
Text Domain:  divi-child
*/

/* ------------------------------------------------------------------ tokens
   Palette "Signal". Neutrals carry the page; the accent is used sparingly (chips, markers,
   links, focus). Dark values apply when the OS prefers dark, unless the visitor picked light
   (html[data-theme]) with the header toggle. */
:root {
	--ns-bg: #f1f2f4;
	--ns-surface: #ffffff;
	--ns-surface-2: #f1f2f4;
	--ns-text: #16181d;
	--ns-muted: #5e636e;
	--ns-line: #dde0e5;
	--ns-shadow: 0 1px 2px rgba(22, 24, 29, .07);
	--ns-accent: #c2410c;
	--ns-accent-text: #b23a0a;
	--ns-on-accent: #ffffff;
	--ns-spark: #24292f;
	--ns-radius: 12px;
	--ns-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ns-wrap: 1240px;
	--ns-gutter: 16px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--ns-bg: #0e1014;
		--ns-surface: #171a20;
		--ns-surface-2: #1f232a;
		--ns-text: #e8eaed;
		--ns-muted: #9aa0aa;
		--ns-line: #2a2e36;
		--ns-shadow: none;
		--ns-accent: #ff7a3d;
		--ns-accent-text: #ff9a66;
		--ns-on-accent: #1a0c04;
		--ns-spark: #ff7a3d;
		color-scheme: dark;
	}
}
:root[data-theme="dark"] {
	--ns-bg: #0e1014;
	--ns-surface: #171a20;
	--ns-surface-2: #1f232a;
	--ns-text: #e8eaed;
	--ns-muted: #9aa0aa;
	--ns-line: #2a2e36;
	--ns-shadow: none;
	--ns-accent: #ff7a3d;
	--ns-accent-text: #ff9a66;
	--ns-on-accent: #1a0c04;
	--ns-spark: #ff7a3d;
	color-scheme: dark;
}
@media (min-width: 768px) {
	:root { --ns-gutter: 28px; }
}

/* ------------------------------------------------------------------ base (overrides Divi defaults) */
body,
#page-container,
#main-content,
#et-main-area {
	background-color: var(--ns-bg);
	color: var(--ns-muted);
}
body {
	font-family: var(--ns-font);
	font-size: 16px;
	line-height: 1.55;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--ns-text);
	font-family: var(--ns-font);
}
a { color: inherit; }
a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--ns-accent-text);
	outline-offset: 2px;
	border-radius: 2px;
}
/* Divi's own rules (.et_pb_section, .et_pb_row, .et_flex_column…) are single-class selectors in
   generated CSS that loads later, so ns- overrides are prefixed with the Divi class they target. */
/* Home is one section per block (top stories, then one per league) so they can be reordered. */
.et_pb_section.ns-home {
	padding: 40px 0 0;
	background-color: transparent;
}
.et_pb_section.ns-home-top { padding-top: 24px; }
.et_pb_section.ns-home:last-of-type { padding-bottom: 56px; }
/* Every ns- row is a full-width, gutter-padded wrapper instead of Divi's 80% / 1080px row. */
.et_pb_section.ns-header .et_pb_row,
.et_pb_section.ns-footer .et_pb_row,
.et_pb_section.ns-home .et_pb_row {
	width: 100%;
	max-width: var(--ns-wrap);
	padding: 0 var(--ns-gutter);
	margin: 0 auto;
}
.et_pb_section.ns-header .et_pb_column,
.et_pb_section.ns-footer .et_pb_column,
.et_pb_section.ns-home .et_pb_column {
	width: 100%;
	margin: 0;
}
.et_pb_section.ns-header .et_pb_module,
.et_pb_section.ns-footer .et_pb_module,
.et_pb_section.ns-home .et_pb_module {
	margin-bottom: 0;
}
.et_pb_section.ns-header ul,
.et_pb_section.ns-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.et_pb_section.ns-header li,
.et_pb_section.ns-footer li { list-style: none; }
/* Divi 5 flex sections/columns/groups add their own gaps; spacing here is set explicitly. */
.et_pb_section.ns-header,
.et_pb_section.ns-footer,
.et_pb_section.ns-home,
.et_pb_section.ns-header .et_pb_row,
.et_pb_section.ns-footer .et_pb_row,
.et_pb_section.ns-home .et_pb_row {
	gap: 0;
}
.ns-home .et_pb_text_inner p:last-child,
.ns-footer .et_pb_text_inner p:last-child { padding-bottom: 0; }

/* ------------------------------------------------------------------ header */
.et_pb_section.ns-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 0;
	background: var(--ns-surface);
	border-top: 4px solid var(--ns-spark);
	box-shadow: 0 1px 0 var(--ns-line);
}
.admin-bar .ns-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ns-header { top: 0; } }
.et_pb_column.ns-header-col {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	min-height: 64px;
}
.ns-logo { flex: 0 0 auto; }
.ns-logo img { height: 40px; width: auto; max-width: none; }
.ns-header-nav { margin-left: auto; }
.ns-header-tools .et_pb_code_inner { display: flex; align-items: center; gap: 4px; }

.ns-nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ns-nav-list > li { position: relative; }
.ns-nav-list a { display: block; padding: 10px 12px; color: var(--ns-text); font-weight: 600; font-stretch: 105%; }
.ns-nav-list a:hover { color: var(--ns-accent-text); }
.ns-nav-list .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 3px 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.ns-nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	display: none;
	min-width: 200px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--ns-surface);
	border: 1px solid var(--ns-line);
	border-radius: var(--ns-radius);
	box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
}
.ns-nav-list li:hover > .sub-menu,
.ns-nav-list li:focus-within > .sub-menu { display: block; }
.ns-nav-list .sub-menu a { padding: 8px 16px; font-weight: 500; }

.ns-social { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.ns-social a,
.ns-theme-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--ns-text);
}
.ns-social a:hover,
.ns-theme-toggle:hover { background: var(--ns-surface-2); color: var(--ns-accent-text); }
.ns-theme-toggle { border: 0; background: none; cursor: pointer; padding: 0; }
.ns-theme-toggle .ns-icon-sun { display: none; }
.ns-theme-toggle[aria-pressed="true"] .ns-icon-sun { display: block; }
.ns-theme-toggle[aria-pressed="true"] .ns-icon-moon { display: none; }

.et_pb_section.ns-header .ns-pills-row { padding: 0; max-width: none; border-top: 1px solid var(--ns-line); }
.ns-pills ul {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 10px var(--ns-gutter);
	overflow-x: auto;
	scrollbar-width: none;
}
.ns-pills ul::-webkit-scrollbar { display: none; }
.ns-pills a {
	display: block;
	white-space: nowrap;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--ns-surface-2);
	color: var(--ns-text);
	font-weight: 600;
	font-size: 15px;
}
.ns-pills a:hover { background: var(--ns-accent); color: var(--ns-on-accent); }

@media (max-width: 959px) {
	.ns-header-nav { display: none; }
	.ns-header-tools { margin-left: auto; }
}
@media (min-width: 960px) {
	.et_pb_section.ns-header .ns-pills-row { display: none; }
}

/* ------------------------------------------------------------------ cards (loop items) */
.et_pb_group.ns-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	height: 100%;
	overflow: hidden;
	background: var(--ns-surface);
	border: 1px solid var(--ns-line);
	border-radius: var(--ns-radius);
	box-shadow: var(--ns-shadow);
}
/* The image link is stretched over the whole card, so the card is one big link target. */
.et_pb_group.ns-card { position: relative; }
/* Divi makes the image module and its wrapper position:relative, which would trap the overlay
   inside the image; the card must be the overlay's containing block. */
.et_pb_image.ns-card-img,
.ns-card-img .et_pb_image_wrap,
.ns-card-img a { position: static; }
.ns-card-img a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ns-card-img a:focus-visible { outline: none; }
.et_pb_group.ns-card:has(a:focus-visible) { outline: 3px solid var(--ns-accent-text); outline-offset: 2px; }
/* Featured images: always the whole image, letterboxed on black, never cropped. */
.ns-card-img,
.ns-card-img .et_pb_image_wrap { display: block; width: 100%; margin: 0; }
.ns-card-img .et_pb_image_wrap {
	aspect-ratio: 16 / 9;
	background: #000;
}
.ns-card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.et_pb_group.ns-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px 16px; }
.et_pb_group.ns-card-body > .et_pb_module { width: 100%; }
.et_pb_group.ns-card-body > .et_pb_text.ns-chip { width: auto; }
.ns-card-title .et_pb_module_heading,
.ns-card-title h1, .ns-card-title h2, .ns-card-title h3 {
	margin: 0;
	padding: 0;
	color: var(--ns-text);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
}
.ns-card:hover .ns-card-title h2,
.ns-card:hover .ns-card-title h3 { color: var(--ns-accent-text); }
.ns-card-date,
.ns-card-date p { color: var(--ns-muted); font-size: 14px; }
.ns-card-excerpt p { color: var(--ns-muted); max-width: 62ch; }
.ns-chip p,
.ns-chip .et_pb_text_inner {
	display: inline-block;
	padding: 4px 10px 3px;
	border-radius: 999px;
	background: var(--ns-accent);
	color: var(--ns-on-accent);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}
.ns-chip p { padding: 0; background: none; }

/* ------------------------------------------------------------------ home */
.et_pb_section.ns-home .ns-mosaic { display: grid; gap: 18px; }
.et_pb_section.ns-home .ns-mosaic .et_pb_column { width: auto; }
.et_pb_column.ns-pair-col { display: grid; gap: 18px; align-content: start; }
.ns-card-lead .et_pb_group.ns-card-body { padding: 16px 18px 20px; gap: 8px; }
.ns-card-lead .ns-card-title h2 {
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.1;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -.015em;
}
.ns-card-side .ns-card-title h3 { font-size: 19px; }
@media (min-width: 600px) and (max-width: 959px) {
	.et_pb_column.ns-pair-col { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
	.et_pb_section.ns-home .ns-mosaic { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
	/* The side stories share the lead story's height so the column has no empty space below. */
	.et_pb_column.ns-pair-col { grid-auto-rows: 1fr; align-content: stretch; }
	.et_pb_group.ns-card-side { display: grid; grid-template-columns: 44% 1fr; align-items: center; }
	.ns-card-side .et_pb_group.ns-card-body { padding: 12px 16px; }
}

.et_pb_section.ns-home .ns-hub-head { margin-bottom: 14px; }
.et_pb_column.ns-hub-head-col { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.ns-hub-title h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	font-size: 26px;
	font-weight: 800;
	font-stretch: 112%;
}
.ns-hub-title h2::before {
	content: "";
	width: 6px;
	height: 24px;
	border-radius: 3px;
	background: var(--ns-accent);
}
.ns-hub-more a { color: var(--ns-accent-text); font-weight: 600; white-space: nowrap; }
.ns-hub-more a:hover { text-decoration: underline; }

/* League rails: swipe on phones, four across on desktop. */
.et_pb_section.ns-home .et_pb_column.ns-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 16px;
	width: auto;
	margin: 0 calc(-1 * var(--ns-gutter));
	padding: 0 var(--ns-gutter) 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: var(--ns-gutter);
}
.ns-rail > .ns-card { scroll-snap-align: start; }
@media (min-width: 600px) { .et_pb_section.ns-home .et_pb_column.ns-rail { grid-auto-columns: 42%; } }
@media (min-width: 960px) {
	.et_pb_section.ns-home .et_pb_column.ns-rail { grid-auto-columns: calc((100% - 48px) / 4); margin: 0; padding: 0 0 6px; }
}

/* ------------------------------------------------------------------ single post
   Reading column 720px; the featured image runs wider (960px) so scorecards stay legible. */
.et_pb_section.ns-single {
	padding: 32px 0 0;
	background-color: transparent;
	gap: 0;
}
.et_pb_section.ns-single .et_pb_row {
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--ns-gutter);
	gap: 0;
}
.et_pb_section.ns-single .et_pb_column { width: 100%; margin: 0; }
.et_pb_section.ns-single .et_pb_module { margin-bottom: 0; }
.et_pb_section.ns-single .ns-article-head,
.et_pb_section.ns-single .ns-article-body { max-width: calc(720px + 2 * var(--ns-gutter)); }
.et_pb_section.ns-single .ns-article-figure { max-width: calc(960px + 2 * var(--ns-gutter)); margin-top: 24px; }
.et_pb_section.ns-single .ns-article-body { margin-top: 28px; }

.et_pb_column.ns-article-head-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ns-chip-links .et_pb_text_inner { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-chip-links a {
	display: inline-block;
	padding: 4px 10px 3px;
	border-radius: 999px;
	background: var(--ns-accent);
	color: var(--ns-on-accent);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
}
.ns-chip-links a:hover { filter: brightness(1.1); }
.ns-article-title h1 {
	margin: 0;
	padding: 0;
	color: var(--ns-text);
	font-size: clamp(30px, 5vw, 48px);
	line-height: 1.08;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -.015em;
}
.ns-article-meta p { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ns-muted); font-size: 15px; }
.ns-byline { color: var(--ns-text); font-weight: 600; }

/* Featured image: whole image, never cropped; caption/credit as real text beneath. */
.ns-featured,
.ns-featured .et_pb_image_wrap { display: block; width: 100%; margin: 0; }
.ns-featured .et_pb_image_wrap { background: #000; border-radius: var(--ns-radius); overflow: hidden; }
.ns-featured img { display: block; width: 100%; height: auto; }
.ns-figcaption,
.ns-article-content figcaption {
	margin: 10px 0 0;
	padding: 0;
	color: var(--ns-muted);
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
}
.et_pb_column.ns-article-figure-col { gap: 0; }
.et_pb_code.ns-featured-caption:has(.et_pb_code_inner:empty) { display: none; }

/* Article body: block content written by the app (paragraphs, headings, figures). */
.ns-article-content {
	color: var(--ns-text);
	font-size: 18px;
	line-height: 1.7;
}
.ns-article-content p { padding: 0; margin: 0 0 1.1em; }
.ns-article-content h2,
.ns-article-content h3 {
	margin: 1.6em 0 .5em;
	padding: 0;
	line-height: 1.2;
	font-weight: 800;
	font-stretch: 108%;
}
.ns-article-content h2 { font-size: 26px; }
.ns-article-content h3 { font-size: 21px; }
.ns-article-content a { color: var(--ns-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.ns-article-content ul,
.ns-article-content ol { margin: 0 0 1.1em 1.2em; padding: 0; }
.ns-article-content li { margin-bottom: .4em; }
.ns-article-content blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 18px;
	border-left: 4px solid var(--ns-accent);
	color: var(--ns-text);
	font-size: 20px;
}
.ns-article-content figure,
.ns-article-content .wp-block-image { margin: 1.8em 0; }
.ns-article-content figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: #000;
}
.ns-article-content .wp-block-image.aligncenter,
.ns-article-content .wp-block-image .aligncenter { margin-left: auto; margin-right: auto; }
.ns-article-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ns-article-content th,
.ns-article-content td { padding: 8px 10px; border-bottom: 1px solid var(--ns-line); text-align: left; }

.et_pb_section.ns-single-more { padding: 48px 0 56px; }
.et_pb_section.ns-single-more .et_pb_row { max-width: var(--ns-wrap); }
.et_pb_section.ns-single-more .ns-hub-head { margin-bottom: 14px; }
.et_pb_section.ns-single-more .et_pb_column.ns-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 16px;
	width: auto;
	margin: 0 calc(-1 * var(--ns-gutter));
	padding: 0 var(--ns-gutter) 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: var(--ns-gutter);
}
@media (min-width: 600px) { .et_pb_section.ns-single-more .et_pb_column.ns-rail { grid-auto-columns: 42%; } }
@media (min-width: 960px) {
	.et_pb_section.ns-single-more .et_pb_column.ns-rail { grid-auto-columns: calc((100% - 48px) / 4); margin: 0; padding: 0 0 6px; }
}

/* ------------------------------------------------------------------ archives (category, league, team, author) */
.et_pb_section.ns-archive {
	padding: 24px 0 0;
	background-color: transparent;
	gap: 0;
}
.et_pb_section.ns-archive:last-of-type { padding-bottom: 56px; }
.et_pb_section.ns-archive .et_pb_row {
	width: 100%;
	max-width: var(--ns-wrap);
	margin: 0 auto;
	padding: 0 var(--ns-gutter);
	gap: 0;
}
.et_pb_section.ns-archive .et_pb_column { width: 100%; margin: 0; }
.et_pb_section.ns-archive .et_pb_module { margin-bottom: 0; }
.et_pb_section.ns-archive-top { padding-top: 32px; }
.et_pb_column.ns-archive-head-col { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.ns-archive-title h1 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-size: clamp(30px, 5vw, 44px);
	line-height: 1.05;
	font-weight: 800;
	font-stretch: 112%;
}
.ns-archive-title h1::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: .9em;
	border-radius: 4px;
	background: var(--ns-accent);
}
.ns-league-nav ul { padding: 0; margin: 0; flex-wrap: wrap; }
.ns-league-nav a { background: var(--ns-surface); border: 1px solid var(--ns-line); }
.ns-league-nav a[aria-current="page"] { background: var(--ns-accent); border-color: var(--ns-accent); color: var(--ns-on-accent); }
.et_pb_code.ns-archive-leagues:has(.et_pb_code_inner:empty) { display: none; }

.et_pb_section.ns-archive .et_pb_column.ns-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
@media (min-width: 600px) { .et_pb_section.ns-archive .et_pb_column.ns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .et_pb_section.ns-archive .et_pb_column.ns-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.et_pb_section.ns-archive .ns-pagination-row { margin-top: 32px; }
.ns-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ns-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--ns-surface);
	border: 1px solid var(--ns-line);
	color: var(--ns-text);
	font-weight: 600;
}
.ns-pagination a.page-numbers:hover { border-color: var(--ns-accent); color: var(--ns-accent-text); }
.ns-pagination .page-numbers.current { background: var(--ns-accent); border-color: var(--ns-accent); color: var(--ns-on-accent); }
.ns-pagination .page-numbers.dots { background: none; border: 0; }
.ns-pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* ------------------------------------------------------------------ footer */
.et_pb_section.ns-footer {
	padding: 40px 0 24px;
	background: var(--ns-surface);
	border-top: 1px solid var(--ns-line);
	color: var(--ns-muted);
	font-size: 15px;
}
.et_pb_column.ns-foot-col { display: grid; gap: 28px; }
@media (min-width: 768px) { .et_pb_column.ns-foot-col { grid-template-columns: 2fr 1fr 1fr; } }
.ns-foot-logo img { height: 44px; width: auto; margin-bottom: 10px; }
.ns-foot-links { columns: 2; list-style: none; margin: 0; padding: 0; }
.ns-foot-links a { display: block; padding: 4px 0; color: var(--ns-text); font-weight: 600; }
.ns-foot-links a:hover { color: var(--ns-accent-text); }
.ns-foot-label p { margin: 0 0 8px; color: var(--ns-text); font-weight: 700; }
.et_pb_section.ns-footer .ns-foot-legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--ns-line); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}