/*
Theme Name: CoverMyRun
Theme URI: https://covermyrun.com
Author: CoverMyRun
Author URI: https://covermyrun.com
Description: Presentation layer for CoverMyRun. Provides the site header, footer and content styling so every page matches the operator network. Works alongside the CoverMyRun plugin, which supplies the landing page, launch preview and operator area.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: covermyrun
*/

:root {
	--cmr-navy: #0b1b34;
	--cmr-ink: #1a2b45;
	--cmr-muted: #5b6b83;
	--cmr-blue: #1e6bff;
	--cmr-blue-soft: #e8f0ff;
	--cmr-cyan: #06b6d4;
	--cmr-green: #10b981;
	--cmr-green-soft: #e4f8f1;
	--cmr-gold: #ffc44a;
	--cmr-line: #e5eaf2;
	--cmr-bg: #f6f9fd;
	--cmr-shadow: 0 1px 2px rgba(11,27,52,.04), 0 8px 28px rgba(11,27,52,.07);
	--cmr-shadow-lg: 0 20px 60px rgba(11,27,52,.14);
	--cmr-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: #fff;
	color: var(--cmr-ink);
	font-family: var(--cmr-font);
	font-size: 16.5px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0; }
img { max-width: 100%; height: auto; }

.cmr-site-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .cmr-site-wrap { padding: 0 18px; } }

.cmr-skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--cmr-navy); color: #fff; padding: 12px 18px; z-index: 300;
}
.cmr-skip:focus { left: 0; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 3px solid rgba(30,107,255,.45);
	outline-offset: 2px;
}

/* ---------- Buttons. Colours forced so nothing can blank a label. ---------- */
.cmr-btn, a.cmr-btn, button.cmr-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	border: 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 15px;
	line-height: 1.2; padding: 13px 22px; border-radius: 11px; text-decoration: none;
	transition: background .18s ease, transform .18s ease;
}
.cmr-btn-primary, a.cmr-btn-primary, button.cmr-btn-primary {
	background: var(--cmr-blue) !important; color: #fff !important;
	box-shadow: 0 6px 18px rgba(30,107,255,.28);
}
.cmr-btn-primary:hover, a.cmr-btn-primary:hover, button.cmr-btn-primary:hover {
	background: #1558da !important; color: #fff !important; transform: translateY(-1px);
}
.cmr-btn-ghost, a.cmr-btn-ghost, button.cmr-btn-ghost {
	background: #fff !important; color: var(--cmr-navy) !important; border: 1px solid var(--cmr-line);
}
.cmr-btn-ghost:hover, a.cmr-btn-ghost:hover { border-color: #c8d5e8; }
.cmr-btn-sm { padding: 9px 15px; font-size: 13.5px; border-radius: 9px; }
@media (prefers-reduced-motion: reduce) { .cmr-btn:hover { transform: none; } }

/* ---------- Header ---------- */
.cmr-site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.93);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--cmr-line);
}
.admin-bar .cmr-site-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .cmr-site-header { top: 46px; } }

.cmr-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 76px; }
.cmr-brand { display: block; text-decoration: none; flex: 0 0 auto; line-height: 0; }
/* Equal specificity on every display rule so none cancels another. */
.cmr-brand img.cmr-logo-full,
.cmr-brand img.cmr-logo-mark { width: auto; max-width: 100%; }
.cmr-brand img.cmr-logo-full { display: block; height: 40px; }
.cmr-brand img.cmr-logo-mark { display: none; height: 38px; }
@media (max-width: 430px) {
	.cmr-brand img.cmr-logo-full { display: none; }
	.cmr-brand img.cmr-logo-mark { display: block; }
}
.cmr-header-right { display: flex; align-items: center; gap: 12px; }
.cmr-header-who { font-size: 14px; color: var(--cmr-muted); }
@media (max-width: 560px) {
	.cmr-header-inner { height: 64px; }
	.cmr-brand img.cmr-logo-full, .cmr-brand img.cmr-logo-mark { height: 34px; }
	.cmr-header-who { display: none; }
	.cmr-header-right .cmr-btn { font-size: 13.5px; padding: 11px 15px; }
}

/* ---------- Footer ---------- */
.cmr-site-footer { background: var(--cmr-navy); color: #93a9c8; padding: 36px 0; font-size: 14px; margin-top: auto; }
.cmr-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.cmr-site-footer a { color: #93a9c8; text-decoration: none; }
.cmr-site-footer a:hover { color: #fff; }
.cmr-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.cmr-site-footer img.cmr-logo-full { display: block; height: 36px; width: auto; }

/* ---------- Content pages: terms, privacy, anything else ---------- */
.cmr-page { padding: 56px 0 84px; }
.cmr-page-inner { max-width: 760px; margin: 0 auto; }
.cmr-page h1 { font-size: 40px; font-weight: 800; margin-bottom: 10px; }
@media (max-width: 640px) { .cmr-page h1 { font-size: 30px; } }
.cmr-page .cmr-page-meta {
	font-size: 13px; color: var(--cmr-muted);
	padding-bottom: 22px; margin-bottom: 30px; border-bottom: 2px solid var(--cmr-ink);
}
.cmr-entry h1 { font-size: 34px; font-weight: 800; margin: 44px 0 14px; }
.cmr-entry h2 {
	font-size: 23px; font-weight: 700; margin: 40px 0 12px;
	padding-top: 22px; border-top: 1px solid var(--cmr-line);
}
.cmr-entry h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.cmr-entry h3 { font-size: 17.5px; font-weight: 700; margin: 26px 0 8px; }
.cmr-entry p { margin: 0 0 16px; color: #33455e; }
.cmr-entry ul, .cmr-entry ol { margin: 0 0 18px; padding-left: 22px; color: #33455e; }
.cmr-entry li { margin-bottom: 8px; }
.cmr-entry strong { color: var(--cmr-ink); font-weight: 700; }
.cmr-entry a { color: var(--cmr-blue); text-underline-offset: 2px; }
.cmr-entry hr { border: 0; border-top: 1px solid var(--cmr-line); margin: 34px 0; }
.cmr-entry em { color: var(--cmr-muted); }
.cmr-entry code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .88em; background: var(--cmr-bg); padding: 2px 6px; border-radius: 4px;
}
.cmr-entry table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; }
.cmr-entry th, .cmr-entry td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--cmr-line); }
.cmr-entry th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cmr-muted); }
.cmr-table-scroll { overflow-x: auto; }

/* ---------- 404 ---------- */
.cmr-404 { text-align: center; padding: 100px 0 120px; }
.cmr-404 .code { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--cmr-blue); }
.cmr-404 h1 { font-size: 40px; font-weight: 800; margin: 14px 0 14px; }
.cmr-404 p { color: var(--cmr-muted); font-size: 17px; max-width: 460px; margin: 0 auto 30px; }

html, body { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.cmr-site-main { flex: 1 0 auto; }

/* ---------- Header navigation ----------
   Four controls in a clear ladder: browse, browse, sign in, convert.
   Every colour is forced, because block themes set link colours globally. */
.cmr-header-nav { display: flex; align-items: center; gap: 10px; margin-left: auto; margin-right: 10px; }

.cmr-header-nav a,
.cmr-signin-link {
	display: inline-flex;
	align-items: center;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	padding: 10px 16px;
	border-radius: 10px;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background .18s ease, border-color .18s ease;
}

/* Browse links: soft blue pills, quieter than the two on the right. */
.cmr-header-nav a {
	background: var(--cmr-blue-soft) !important;
	color: #1450c8 !important;
	border: 1px solid transparent;
}
.cmr-header-nav a:hover {
	background: #d8e6ff !important;
	color: #103fa3 !important;
}

/* Sign in: outlined, so it reads as an action without competing. */
.cmr-signin-link {
	background: #fff !important;
	color: var(--cmr-navy) !important;
	border: 1px solid #c8d5e8;
}
.cmr-signin-link:hover {
	background: var(--cmr-bg) !important;
	border-color: #a9bed8;
	color: var(--cmr-navy) !important;
}

@media (max-width: 1040px) { .cmr-header-nav { display: none; } }
.cmr-header-right { margin-left: 0; gap: 10px; }
@media (max-width: 1040px) { .cmr-header-right { margin-left: auto; } }
/* The sign in control stays visible at every width: on a phone it is the only
   route to the operator area from the header. */
@media (max-width: 560px) { .cmr-signin-link { font-size: 13px; padding: 9px 13px; } }
@media (max-width: 380px) { .cmr-signin-link { font-size: 12.5px; padding: 9px 11px; } }

/* ---------- Phone refinements ----------
   Tap targets at 44px, and a short register label so the button never wraps. */
.cmr-label-short { display: none; }
.cmr-register-btn { white-space: nowrap; }

@media (max-width: 620px) {
	.cmr-label-long { display: none; }
	.cmr-label-short { display: inline; }
	.cmr-header-inner { height: 68px; }
	.cmr-header-right { gap: 8px; }
	.cmr-header-right .cmr-btn,
	.cmr-signin-link { min-height: 44px; padding-top: 0; padding-bottom: 0; }
	.cmr-brand { min-height: 44px; display: flex; align-items: center; }
}

/* Footer links are a real tap target on a phone, not 15px of text. */
@media (max-width: 700px) {
	.cmr-footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
	.cmr-footer-links { flex-direction: column; gap: 0; width: 100%; }
	.cmr-footer-links a { display: block; padding: 11px 0; min-height: 44px; }
}

/* ---------- Signed in account control ----------
   The company name is a link back to the operator area, not a label. */
.cmr-account-link { max-width: 220px; gap: 7px; }
.cmr-account-link .cmr-label-long {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; display: inline-block;
}
.cmr-account-link::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%;
	background: var(--cmr-green); flex: 0 0 7px;
}
.cmr-signout-btn { white-space: nowrap; }
@media (max-width: 620px) {
	.cmr-account-link { max-width: none; }
	/* Specificity trap: the rule above is (0,2,0) and the global short label
	   swap is (0,1,0), so the long name would win here without this. */
	.cmr-account-link .cmr-label-long { display: none; }
	.cmr-account-link .cmr-label-short { display: inline; }
	.cmr-signout-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
}