/*
Theme Name: Sidelinews
Theme URI: https://sidelinews.com
Author: Sidelinews
Description: The Sidelinews newsroom theme: a navy scoreboard header with the gold sideline, matching the result cards, verified results at the top of the home page, stories by sport, and pages that load fast on mobile data. Made to work with SportsPress and the Newsroom Results Desk plugin.
Version: 1.4.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sidelinews
*/

/* The header, results strip, page, video band and footer sit flush against each other. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Header: navy like the result card, with the gold sideline under it. */
.sl-header {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border-bottom: 4px solid var(--wp--preset--color--gold);
}
/* The logo is shown large so it is easy to read, even with weak eyesight: about 22px lettering on laptops. */
.sl-logo {
	display: block;
	flex-shrink: 0;
	line-height: 0;
}
.sl-logo img {
	display: block;
	height: 96px;
	width: auto;
	max-width: none;
}
.sl-header .wp-block-site-logo img {
	height: 96px;
	width: auto;
}
@media (max-width: 1100px) {
	.sl-header .sl-logo img,
	.sl-header .wp-block-site-logo img {
		height: 72px;
	}
}
@media (max-width: 600px) {
	.sl-header .sl-logo img,
	.sl-header .wp-block-site-logo img {
		height: 64px;
	}
}
.sl-header .wp-block-site-title a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 700;
}
.sl-header .wp-block-navigation a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 3px solid transparent;
}
.sl-header .wp-block-navigation a:hover,
.sl-header .wp-block-navigation a:focus-visible,
.sl-header .wp-block-navigation .current-menu-item > a,
.sl-header .wp-block-navigation a[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--gold);
}
.sl-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}
.sl-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 0.75rem;
	font-size: 1.75rem;
}

/* Results strip: the card's scoreboard navy; hidden when there are no confirmed results yet. */
.sl-results {
	background: var(--wp--preset--color--panel);
}
.sl-results .nrd-rail {
	--rail-bg: var(--wp--preset--color--panel);
	/* The plugin prints a <style> tag before the strip; without this, block spacing would open a white gap under the header. */
	margin-block-start: 0;
}
.sl-results:not(:has(.nrd-rail)) {
	display: none;
}
.sl-results .nrd-rail {
	padding-block: 0.9rem 1rem;
}
.sl-results .nrd-rail__team,
.sl-results .nrd-rail__score {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-weight: 600;
}
.sl-results .nrd-rail__score {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Section headings with a "see all" link. */
.sl-section-head {
	border-top: 3px solid var(--wp--preset--color--black);
	padding-top: 0.6rem;
}
.sl-section-head h2 {
	margin: 0;
}
.sl-section-head a {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}
.sl-section-head h2 a {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* Lead story. */
.sl-lead .wp-block-post-title {
	margin-top: 0.4rem;
}
.sl-lead .wp-block-post-excerpt {
	margin-top: 0.75rem;
}
.sl-lead .wp-block-post-featured-image img,
.sl-card .wp-block-post-featured-image img {
	border-radius: 4px;
}

/* Latest list: one story per row, divided by thin lines. */
.sl-latest .wp-block-post-template > li {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 0.85rem;
}
.sl-latest .wp-block-post-template > li:first-child {
	border-top: 0;
	padding-top: 0;
}
.sl-latest .wp-block-post-title {
	margin: 0.15rem 0 0.2rem;
}

/* Story grids. */
.sl-card .wp-block-post-title {
	margin: 0.6rem 0 0.25rem;
}
.wp-block-post-title a:hover,
.wp-block-post-title a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.12em;
}

/* Stories by sport: the newest story with its picture, the next two as headlines. */
.sl-sport .wp-block-post-template > li:not(:first-child) .wp-block-post-featured-image {
	display: none;
}
.sl-sport .wp-block-post-template > li:not(:first-child) {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 0.75rem;
}
.sl-sport .wp-block-post-template > li:first-child .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: 0.6rem;
}
.sl-sport .wp-block-post-title {
	margin: 0 0 0.15rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.15;
}
.sl-sport .wp-block-post-featured-image img {
	border-radius: 4px;
}

/* Sport pages: results, fixtures and tables above the stories. */
.sl-hub .nrd-rail {
	--rail-bg: var(--wp--preset--color--panel);
	border-radius: 6px;
	padding: 0.9rem 1rem 1rem;
	margin-block-start: 0;
}
.sl-hub__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--40);
}
.sl-hub__cols h2 {
	font-size: var(--wp--preset--font-size--x-large);
	border-top: 3px solid var(--wp--preset--color--black);
	padding-top: 0.6rem;
	margin: 0 0 0.5rem;
}
.nrd-competitions {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nrd-competitions li {
	border-top: 1px solid var(--wp--preset--color--line);
	padding: 0.7rem 0;
	font-weight: 600;
}
.nrd-competitions li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.nrd-competitions a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.nrd-competitions a:hover,
.nrd-competitions a:focus-visible {
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
}
.sl-hub__stories {
	border-top: 3px solid var(--wp--preset--color--black);
	padding-top: 0.6rem;
	margin-top: var(--wp--preset--spacing--50) !important;
}

/* Watch and listen band. */
.sl-watch {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}
.sl-watch h2 {
	color: var(--wp--preset--color--white);
}
.sl-watch a {
	color: var(--wp--preset--color--gold);
}
.sl-watch .nrd-videos {
	margin-top: 0;
}

/* Support Sidelinews band (home page, above the footer). */
.sl-support {
	background: var(--wp--preset--color--mist);
	border-top: 4px solid var(--wp--preset--color--gold);
}
.sl-support .nrd-support__title {
	font-size: var(--wp--preset--font-size--x-large, 1.75rem);
}
.sl-support .nrd-support__way {
	background: var(--wp--preset--color--white);
}

/* Follow on WhatsApp (footer and under stories). */
.sl-follow-wa {
	margin: 0 0 0.9rem;
}
.sl-follow-wa a,
.sl-share .sl-share__follow {
	display: inline-block;
	padding: 0.5rem 0.95rem;
	border-radius: 4px;
	background: #25d366;
	color: #0b2e17;
	font-weight: 700;
	text-decoration: none;
}
.sl-follow-wa a:hover,
.sl-follow-wa a:focus-visible,
.sl-share .sl-share__follow:hover,
.sl-share .sl-share__follow:focus-visible {
	background: #1ebe5a;
	color: #0b2e17;
}
.sl-share .sl-share__follow {
	border-color: #25d366;
	margin-left: auto;
}

/* Article. */
.sl-byline {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}
.sl-share {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 2rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	align-items: center;
}
.sl-share span {
	font-weight: 600;
	margin-right: 0.25rem;
}
.sl-share a {
	display: inline-block;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
}
.sl-share a:hover,
.sl-share a:focus-visible {
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--blue);
}
.sl-share .sl-share__whatsapp {
	background: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}
.sl-share .sl-share__whatsapp:hover,
.sl-share .sl-share__whatsapp:focus-visible {
	background: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* SportsPress tables and lists (the theme declares SportsPress support, so these are the only table styles). */
.sp-template {
	margin-bottom: 1.75rem;
}
.sp-template .sp-table-caption,
.sp-template h4.sp-table-caption {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--black);
	background: none;
	border: 0;
	border-top: 3px solid var(--wp--preset--color--black);
	margin: 0;
	padding: 0.5rem 0 0.5rem;
}
.sp-data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.4;
}
.sp-data-table th {
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	background: var(--wp--preset--color--mist);
	text-align: left;
	white-space: nowrap;
}
.sp-data-table th,
.sp-data-table td {
	padding: 0.6rem 0.65rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: middle;
}
.sp-data-table a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	font-weight: 600;
}
.sp-data-table a:hover,
.sp-data-table a:focus-visible {
	color: var(--wp--preset--color--blue);
	text-decoration: underline;
}
.sp-data-table td.data-time a,
.sp-data-table td.data-results a {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wp--preset--color--black);
	font-variant-numeric: tabular-nums;
}
.sp-data-table td.data-date a {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}
.sp-data-table .data-time,
.sp-data-table .data-results,
.sp-data-table .data-day {
	text-align: center;
}
.sp-data-table .data-home {
	text-align: right;
}
.sp-template-container,
.sp-table-wrapper,
.sp-scrollable-table-wrapper {
	overflow-x: auto;
}
.sp-template-event-performance .sp-data-table td:first-child {
	white-space: nowrap;
}

/* League tables: numbers centred, points in bold. The page title already names the table, so its own caption is hidden there. */
/* On phones, F and A make way so P to Pts fit without sideways scrolling. */
.sp-league-table th:not(.data-name),
.sp-league-table td:not(.data-name) {
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.sp-league-table td.data-pts {
	font-weight: 700;
	color: var(--wp--preset--color--black);
}
.single-sp_table .sp-template-league-table .sp-table-caption {
	display: none;
}
@media (max-width: 480px) {
	.sp-league-table .data-f,
	.sp-league-table .data-a {
		display: none;
	}
	.sp-league-table th,
	.sp-league-table td {
		padding: 0.55rem 0.3rem;
	}
}

/* Cricket, tennis and leaders (Results Desk 0.8). */
.nrd-table-note {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0.5rem 0 0;
}
.nrd-cricket-table td.data-nrr,
.nrd-cricket-table th.data-nrr {
	white-space: nowrap;
}
.nrd-scorecard {
	margin: 1.5rem 0;
}
.nrd-scorecard h3 {
	margin: 1.25rem 0 0.5rem;
	font-size: var(--wp--preset--font-size--large);
}
.nrd-scorecard .sp-data-table {
	margin-bottom: 0.75rem;
}
.nrd-scorecard .sp-data-table td:not(.data-name),
.nrd-scorecard .sp-data-table th:not(.data-name) {
	text-align: center;
	width: 3.5rem;
	font-variant-numeric: tabular-nums;
}
.nrd-sets-table tr.is-win td {
	font-weight: 700;
	color: var(--wp--preset--color--black);
}
.sl-hub__leaders,
.sl-hub__season {
	margin-top: var(--wp--preset--spacing--40);
	border-top: 3px solid var(--wp--preset--color--black);
}
.sl-hub__season > h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin: 0.6rem 0 0.25rem;
}
.sl-hub__leaders .nrd-leaders > h2 {
	font-size: var(--wp--preset--font-size--x-large);
}
@media (max-width: 480px) {
	.nrd-cricket-table .data-t,
	.nrd-cricket-table .data-nr {
		display: none;
	}
}

/* Match page: the scoreboard already shows the teams, so SportsPress's own "Team vs Team" line goes. */
main:has(.nrd-board) .sp-template-event-logos {
	display: none;
}

/* Footer. */
.sl-footer {
	background: var(--wp--preset--color--navy);
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.9375rem;
}
.sl-footer .sl-logo img,
.sl-footer .wp-block-site-logo img {
	height: 80px;
	width: auto;
}
.sl-footer h2 {
	color: var(--wp--preset--color--white);
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}
.sl-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.sl-footer a:hover,
.sl-footer a:focus-visible {
	color: var(--wp--preset--color--gold);
}
.sl-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 2;
}
/* Partners strip: white tiles so every sponsor's logo shows in its own colours. */
.sl-footer .sl-partners {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 1.5rem;
	margin-top: 1rem;
	margin-bottom: 1.5rem;
}
.sl-footer .sl-partners h2 {
	color: var(--wp--preset--color--gold);
}
.sl-footer .sl-partners a:hover,
.sl-footer .sl-partners a:focus-visible {
	color: var(--wp--preset--color--navy);
}
.sl-footer .sl-footer__base {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 1rem;
	font-size: var(--wp--preset--font-size--small);
}

/* Keyboard focus that shows on every background. */
:where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

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