/*
Theme Name: Sportiz
Template: kadence
Description: Sportiz look on top of Kadence. Brand colours, headline type, quotes, sources.
Version: 1.0.6
*/

:root {
	/* Kadence reads its whole colour scheme from these. */
	--global-palette1: #ff4d1a; /* accent: links, buttons, tags */
	--global-palette2: #e03a0b; /* accent hover */
	--global-palette3: #0b0f19; /* headlines */
	--global-palette4: #1f2937; /* body text */
	--global-palette5: #4b5563;
	--global-palette6: #9ca3af;
	--global-palette7: #eef0f3; /* page background */
	--global-palette8: #f6f7f9;
	--global-palette9: #ffffff; /* cards */

	--sp-ink: #0b0f19;
	--sp-accent: #ff4d1a;
	--sp-head: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--sp-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
	font-family: var(--sp-body);
	background: var(--global-palette7);
}

h1, h2, h3, h4,
.entry-title,
.site-title {
	font-family: var(--sp-head);
	font-weight: 700;
	letter-spacing: 0.005em;
	line-height: 1.08;
}

/* ---------- header ---------- */

.site-main-header-wrap .site-header-row-container-inner,
.site-top-header-wrap .site-header-row-container-inner,
#mobile-header .site-header-row-container-inner {
	background: var(--sp-ink);
}

.site-branding .site-title {
	color: #fff;
	font-size: 34px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	position: relative;
	padding-bottom: 2px;
}

.site-branding .site-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 38%;
	height: 4px;
	background: var(--sp-accent);
}

/* Kadence hides the title on tablets by default; the name is our logo, so always show it. */
#mobile-header .site-branding .site-title.vs-md-false {
	display: block !important;
}

.site-branding .site-description {
	color: #9ca3af;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a,
.header-navigation .header-menu-container > ul > li > a {
	color: #fff;
	font-family: var(--sp-head);
	font-size: 18px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	color: var(--sp-accent);
}

.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:hover {
	color: #fff;
}

/* ---------- article cards (home, categories) ---------- */

.loop-entry.type-post {
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(11, 15, 25, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.loop-entry.type-post:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(11, 15, 25, 0.10);
}

.loop-entry .entry-title {
	font-size: 26px;
}

.loop-entry .entry-title a {
	color: var(--sp-ink);
}

.loop-entry .entry-title a:hover {
	color: var(--sp-accent);
}

.entry-taxonomies .category-links a,
.entry-meta .category-links a {
	display: inline-block;
	background: var(--sp-accent);
	color: #fff !important;
	font-family: var(--sp-head);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 2px 8px;
	border-radius: 3px;
	margin: 0 4px 4px 0;
}

/* ---------- single article ---------- */

.single .entry-header .entry-title {
	font-size: clamp(34px, 5vw, 54px);
}

.single .entry-content {
	font-size: 18px;
	line-height: 1.7;
}

.single .entry-content h2 {
	font-size: 30px;
	margin-top: 1.6em;
}

.entry-content blockquote {
	border-left: 5px solid var(--sp-accent);
	background: #fff7f4;
	margin: 1.6em 0;
	padding: 18px 24px;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	color: var(--sp-ink);
}

.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* Opening photo collage: 1–4 named tiles. Built from real <img>s so it reflows on phones. */
.entry-content .sportiz-hero {
	margin: 0 0 1.6em;
}

.sportiz-hero-grid {
	display: grid;
	gap: 4px;
	height: clamp(220px, 46vw, 400px);
	border-radius: 8px;
	overflow: hidden;
	background: var(--sp-ink);
}

.sportiz-hero-2 .sportiz-hero-grid {
	grid-template-columns: 1fr 1fr;
}

.sportiz-hero-3 .sportiz-hero-grid {
	grid-template-columns: 1.3fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.sportiz-hero-3 .sportiz-hero-tile:first-child {
	grid-row: span 2;
}

.sportiz-hero-4 .sportiz-hero-grid {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.sportiz-hero-tile {
	position: relative;
	min-height: 0;
	overflow: hidden;
}

.entry-content .sportiz-hero-tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 10%;
	margin: 0;
}

.sportiz-hero-name {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 3px 9px 3px 8px;
	border-left: 3px solid var(--sp-accent);
	background: rgba(11, 15, 25, 0.82);
	color: #fff;
	font-family: var(--sp-head);
	font-size: clamp(13px, 1.9vw, 17px);
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.entry-content .sportiz-hero figcaption {
	font-size: 12px;
	line-height: 1.5;
	color: var(--global-palette5);
	margin-top: 6px;
}

/* In-article photos: a little smaller than full height so they sit well on phones. */
.entry-content .sportiz-photo {
	margin: 1.6em auto;
	max-width: 640px;
}

.entry-content .sportiz-photo img {
	width: 100%;
	height: clamp(240px, 62vw, 380px);
	object-fit: cover;
	object-position: center 8%;
	border-radius: 6px;
}

.entry-content .sportiz-photo figcaption {
	font-size: 12px;
	color: var(--global-palette5);
	margin-top: 6px;
}

.entry-content .sportiz-video {
	margin: 1.8em 0;
}

.entry-content .sportiz-video figcaption {
	font-size: 14px;
	font-weight: 600;
	color: var(--sp-ink);
	margin-top: 8px;
}

.sportiz-sources h2 + ul + h2 {
	margin-top: 14px !important;
}

.sportiz-sources {
	margin-top: 2.4em;
	padding: 16px 20px;
	border-top: 3px solid var(--sp-ink);
	background: var(--global-palette8);
	font-size: 15px;
}

.sportiz-sources h2 {
	font-size: 20px !important;
	margin: 0 0 8px !important;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.sportiz-sources ul {
	margin: 0;
	padding-left: 18px;
}

/* ---------- contact form ---------- */

.sportiz-form {
	max-width: 620px;
}

.sportiz-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}

.sportiz-form input[type="text"],
.sportiz-form input[type="email"],
.sportiz-form select,
.sportiz-form textarea {
	width: 100%;
	font: inherit;
	padding: 10px 12px;
	border: 1px solid #cfd4dc;
	border-radius: 6px;
	background: #fff;
}

.sportiz-form button {
	font-family: var(--sp-head);
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: var(--sp-accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 10px 26px;
	cursor: pointer;
}

.sportiz-form button:hover {
	background: var(--global-palette2);
}

.sportiz-hp {
	position: absolute !important;
	left: -9999px !important;
}

.sportiz-form-err {
	color: #b42318;
	font-weight: 600;
}

.sportiz-form-ok {
	padding: 14px 18px;
	background: #ecfdf3;
	border-left: 4px solid #12b76a;
}

/* ---------- footer ---------- */

.site-footer .site-footer-row-container-inner {
	background: var(--sp-ink);
	color: #9ca3af;
}

.site-footer a {
	color: #fff;
}

.site-footer a:hover {
	color: var(--sp-accent);
}