/*
Theme Name:   SMW Kadence Child
Theme URI:    https://sportsmedicineweekly.com
Description:  Sports Medicine Weekly child theme for Kadence. Editorial styling, sponsor slots, footer, performance tweaks. All design lives in code so it syncs with a files-only staging push.
Author:       Sports Medicine Weekly
Template:     kadence
Version:      1.3.7
Text Domain:  smw-child
*/

/* ---------- Tokens ---------- */
:root:root {
	--smw-ink: #1b2733;
	--smw-navy: #0f3b5f;
	--smw-navy-deep: #0a2842;
	--smw-green: #0e7c66;
	--smw-mist: #eef2f5;
	--smw-rule: #d6dee5;
	--smw-muted: #5b6b7a;
	--smw-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
	--smw-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Map onto Kadence's global palette so blocks and buttons follow along */
	--global-palette1: var(--smw-navy);
	--global-palette2: var(--smw-navy-deep);
	--global-palette3: var(--smw-ink);
	--global-palette4: #2c3b4a;
	--global-palette5: var(--smw-muted);
	--global-palette6: #8a99a8;
	--global-palette7: var(--smw-mist);
	--global-palette8: #f6f8fa;
	--global-palette9: #ffffff;
}

/* ---------- Base typography ---------- */
body {
	font-family: var(--smw-sans);
	color: var(--smw-ink);
	background: #fff;
}
h1, h2, h3, h4,
.entry-title,
.site-title {
	font-family: var(--smw-serif);
	color: var(--smw-ink);
	letter-spacing: -0.005em;
}
.site-title { font-weight: 700; }
.single-post .entry-title {
	font-size: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
	line-height: 1.15;
}
.single-post .entry-content {
	font-size: 1.125rem;
	line-height: 1.7;
}
.single-post .entry-content > * {
	max-width: 70ch;
}
.single-post .entry-content h2 { font-size: 1.6rem; margin-top: 2.2em; }
.single-post .entry-content h3 { font-size: 1.3rem; margin-top: 1.8em; }

a { color: var(--smw-navy); }
a:hover, a:focus { color: var(--smw-green); }
:focus-visible {
	outline: 2px solid var(--smw-green);
	outline-offset: 2px;
}

/* Lighter page background behind content boxes */
.content-bg, .entry.single-entry { box-shadow: none; }
body.single-post,
body.page { background: #fff; }

/* Empty paragraphs left in post content create stray gaps */
.entry-content p:empty { display: none; }

/* ---------- Collapsed table of contents ---------- */
.smw-toc {
	margin: 0 0 2rem;
	border-top: 1px solid var(--smw-rule);
	border-bottom: 1px solid var(--smw-rule);
	max-width: 70ch;
}
.smw-toc summary {
	cursor: pointer;
	padding: 0.75rem 0;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--smw-navy);
	list-style: none;
}
.smw-toc summary::-webkit-details-marker { display: none; }
.smw-toc summary::after { content: " \25B8"; color: var(--smw-green); }
.smw-toc[open] summary::after { content: " \25BE"; }
.smw-toc ul { margin: 0 0 1rem; padding-left: 1.2em; font-size: 0.95rem; line-height: 1.6; }

/* ---------- Editorial: disclaimer ---------- */
.smw-disclaimer,
.is-style-smw-disclaimer {
	margin: 2.5rem 0 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--smw-navy);
	background: var(--smw-mist);
	color: var(--smw-muted);
	font-size: 0.9rem;
	line-height: 1.55;
	max-width: 70ch;
}
.smw-disclaimer p { margin: 0; }

/* ---------- Editorial: key points ---------- */
.is-style-smw-key-points {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--smw-rule);
	border-top: 4px solid var(--smw-green);
	background: #fff;
}
.is-style-smw-key-points > :first-child { margin-top: 0; }
.is-style-smw-key-points > :last-child { margin-bottom: 0; }

/* ---------- Editorial: references / citations ---------- */
.is-style-smw-references,
.smw-references ol {
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--smw-muted);
	padding-left: 1.4em;
	border-top: 1px solid var(--smw-rule);
	padding-top: 1rem;
}
.is-style-smw-references li,
.smw-references li { margin-bottom: 0.5em; overflow-wrap: anywhere; }
.entry-content sup a,
.entry-content a[href^="#ref"],
.entry-content a[href^="#cite"] {
	text-decoration: none;
	font-weight: 600;
	color: var(--smw-green);
}

/* ---------- Author box (Kadence's built-in box) ---------- */
.entry-author {
	border-top: 1px solid var(--smw-rule);
	border-bottom: 1px solid var(--smw-rule);
	padding: 1.5rem 0;
	margin-top: 2.5rem;
}
.entry-author-name { font-family: var(--smw-serif); font-size: 1.15rem; }
.entry-author-description { color: var(--smw-muted); font-size: 0.95rem; }

/* ---------- Sponsor slots (render only when a widget is placed) ---------- */
.smw-sponsor {
	margin: 2rem auto;
	padding: 1rem 1.25rem;
	border: 1px solid var(--smw-rule);
	background: #fff;
	max-width: 70ch;
}
.smw-sponsor__label {
	display: block;
	font-size: 0.75rem;
	color: var(--smw-muted);
	margin-bottom: 0.5rem;
}
.smw-sponsor img { max-width: 100%; height: auto; }
.smw-sponsor--footer {
	max-width: var(--global-content-width, 1290px);
	text-align: center;
}

/* ---------- Header mark ---------- */
.site-branding a.brand {
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 0.65rem;
}
.site-branding a.brand .site-title-wrap { width: auto; margin: 0; }
.site-branding a.brand::before {
	content: "";
	flex: none;
	width: 52px;
	height: 52px;
	background: url("images/smw-mark.svg") center / contain no-repeat;
}
@media (max-width: 767px) {
	.site-branding a.brand::before { width: 42px; height: 42px; }
	.site-branding .site-title { font-size: 1.15rem; }
}

/* ---------- Header search icon (Kadence default was near-invisible gray) ---------- */
.search-toggle-open,
.search-toggle-open .search-toggle-icon,
.mobile-toggle-open-container .menu-toggle-open {
	color: var(--smw-ink) !important;
	opacity: 1;
}
.search-toggle-open .kadence-svg-iconset svg { width: 1.15em; height: 1.15em; }
.search-toggle-open:hover,
.search-toggle-open:focus { color: var(--smw-green) !important; }

/* Ivory Search's menu icon (the one actually in the SMW menu) */
.is-menu a,
.is-menu a:hover { color: var(--smw-ink) !important; }
.is-menu svg { width: 18px !important; height: 18px !important; }
.is-menu svg path,
.is-menu svg circle { fill: var(--smw-ink) !important; }
.is-menu a:hover svg path,
.is-menu a:focus svg path { fill: var(--smw-green) !important; }

/* Primary menu: larger, darker */
.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--smw-ink);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover { color: var(--smw-green); }
.is-menu svg { width: 21px !important; height: 21px !important; }

/* Category and tag archives: reader is already in the topic, so drop the per-card category line */
.archive .loop-entry .entry-taxonomies,
.archive .loop-entry .category-links { display: none; }

/* Mobile menu drawer: navy background, all items readable.
   (The active item, e.g. Body Regions on the homepage, was navy-on-black.) */
#mobile-drawer .drawer-inner,
.popup-drawer .drawer-inner { background: var(--smw-navy-deep); }
.mobile-navigation ul li > a,
.mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap > a,
.mobile-navigation ul li.current-menu-item > a,
.mobile-navigation ul li.current-menu-item > .drawer-nav-drop-wrap > a,
.mobile-navigation ul li.current-menu-ancestor > .drawer-nav-drop-wrap > a,
.mobile-navigation .drawer-sub-toggle,
.popup-drawer .drawer-header .drawer-toggle {
	color: #ffffff !important;
}
.mobile-navigation ul li > a:hover,
.mobile-navigation ul li > .drawer-nav-drop-wrap > a:hover { color: #7fd8c4 !important; }
.mobile-navigation ul ul li > a { color: #dbe4ec !important; }

/* ---------- Similar Posts carousel: arrows sat on top of card titles ---------- */
.entry-related .splide__arrows,
.entry-related .splide__arrow { display: none; }
.entry-related .splide__pagination { position: static; margin-top: 1rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--smw-navy-deep); }
.site-footer,
.site-footer a,
.site-footer .footer-html { color: #dbe4ec; }
.site-footer a:hover, .site-footer a:focus { color: #fff; }
.smw-footer-links a { margin: 0 0.6em; }


/* =========================================================
   Homepage (front-page.php)
   ========================================================= */
.smw-home.content-area { margin-top: 1.5rem; }
.smw-home .site-main { padding: 0 0 3rem; }
@media (max-width: 767px) { .smw-home.content-area { margin-top: 0.75rem; } }
.smw-home a { text-decoration: none; }
.smw-home .smw-card__title a { color: var(--smw-ink); }
.smw-home .smw-card__title a:hover,
.smw-home .smw-card__title a:focus { color: var(--smw-navy); text-decoration: underline; text-underline-offset: 3px; }

.smw-card { margin: 0; }
.smw-card__media { display: block; overflow: hidden; background: var(--smw-mist); aspect-ratio: 16 / 10; }
.smw-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.smw-card__section {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--smw-green);
	margin-bottom: 0.35rem;
}
.smw-card__title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 0.4rem; }
.smw-card__excerpt { color: var(--smw-muted); font-size: 1rem; line-height: 1.55; margin: 0 0 0.6rem; }
.smw-card__date { font-size: 0.8rem; color: var(--smw-muted); }

/* Homepage strapline (visible H1) */
.smw-strap {
	font-family: var(--smw-serif);
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
	font-weight: 400;
	font-style: italic;
	color: var(--smw-muted);
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--smw-rule);
}

/* Stack cards: small thumbnail beside the headline */
.smw-card--stack { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0.9rem; align-items: start; }
.smw-card--stack .smw-card__media { aspect-ratio: 1 / 1; }
@media (min-width: 1025px) { .smw-card--stack { grid-template-columns: 110px minmax(0, 1fr); } }

/* Top: lead + stack */
.smw-top { display: grid; gap: 1.75rem; }
.smw-card--lead .smw-card__body { padding-top: 1rem; }
.smw-card--lead .smw-card__title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); line-height: 1.15; }
.smw-top__stack { display: grid; gap: 0; }
.smw-card--stack { padding: 1rem 0; border-top: 1px solid var(--smw-rule); }
.smw-card--stack:first-child { border-top: 0; padding-top: 0; }
.smw-card--stack .smw-card__title { font-size: 1.2rem; }

/* Body region index */
.smw-regions {
	scroll-margin-top: 90px;
	margin: 3.5rem 0 1rem;
	padding: 1.5rem 0;
	border-top: 3px solid var(--smw-navy);
	border-bottom: 1px solid var(--smw-rule);
}
.smw-regions__title { font-size: 1.1rem; margin: 0 0 1rem; }
.smw-regions__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem 1.5rem;
}
.smw-regions__list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--smw-rule);
	color: var(--smw-ink);
}
.smw-regions__name { font-family: var(--smw-serif); font-size: 1.15rem; }
.smw-regions__count { font-size: 0.8rem; color: var(--smw-muted); white-space: nowrap; }
.smw-regions__list a:hover .smw-regions__name,
.smw-regions__list a:focus .smw-regions__name { color: var(--smw-green); }

/* Section titles */
.smw-section-title { font-size: 1.35rem; margin: 0 0 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--smw-rule); }
.smw-section-title a { color: var(--smw-ink); }

/* Latest grid */
.smw-latest { margin: 2.5rem 0; }
.smw-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.smw-card--grid .smw-card__body { padding-top: 0.75rem; }

/* Topic rails */
.smw-rails { display: grid; gap: 2.5rem; margin-top: 3rem; }
.smw-card--rail-first .smw-card__body { padding: 0.75rem 0 0.5rem; }
.smw-card--rail { padding: 0.75rem 0; border-top: 1px solid var(--smw-rule); }
.smw-card--rail .smw-card__title { font-size: 1.02rem; }
.smw-card--rail .smw-card__section { display: none; }
.smw-rail__more { display: inline-block; margin-top: 0.75rem; font-size: 0.9rem; font-weight: 600; }

/* Sponsor slot on homepage spans the content width */
.smw-sponsor--home { max-width: none; margin: 2.5rem 0 0; }

@media (min-width: 600px) {
	.smw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.smw-regions__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.smw-rails { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
	.smw-top { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 2.5rem; }
	.smw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.smw-regions__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.smw-rails { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.single-post .entry-content { font-size: 1.0625rem; }
	.smw-sponsor { margin: 1.5rem 0; }
}

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

/* ---------- Sponsored content (1.3.7) ---------- */
a.smw-sponsored-label {
	display: inline-block;
	padding: 0.1em 0.5em;
	border-radius: 3px;
	background: var(--smw-mist);
	color: var(--smw-navy-deep);
	font-weight: 600;
	text-decoration: none;
}
.smw-sponsor-note {
	margin: 0 0 1.5em;
	padding: 0.75em 1em;
	border-left: 3px solid var(--smw-green);
	background: var(--smw-mist);
	font-size: 0.9em;
	color: var(--smw-ink);
}
.smw-sponsor-note p { margin: 0; }