/*
 * The Mystic Verdict site chrome.
 *
 * Deployed to wp-content/uploads/mysticverdict/chrome.css and enqueued by the
 * mysticverdict-chrome mu-plugin on every front-end page.
 *
 * Contents, in order:
 *   1. palette tokens
 *   2. Kadence suppression (the CSS half of the belt and braces)
 *   3. page baseline typography
 *   4. .mv-header
 *   5. .mv-footer
 *   6. .mv-cta, the shared call to action button
 *   7. breakpoints and reduced motion
 *
 * Mobile first. No framework, no build step, no @import beyond the font sheet the
 * plugin enqueues separately.
 */

/* ---------------------------------------------------------------- 1. palette */

:root {
	--mv-primary: #8b3a62;
	--mv-primary-hover: #732a4e;
	--mv-accent: #f7a440;
	--mv-text: #2d3748;
	--mv-text-light: #718096;
	--mv-bg: #ffffff;
	--mv-bg-alt: #f8fafc;
	--mv-border: #e2e8f0;
	--mv-ink: #0f172a;
	--mv-footer-bg: #1e293b;
	--mv-footer-text: #94a3b8;
	--mv-footer-link: #cbd5e1;
	--mv-footer-rule: #334155;

	--mv-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--mv-serif: 'Merriweather', Georgia, 'Times New Roman', serif;

	/* The landing pages and any page copy written before this file existed use the
	   bare names. Aliasing them here means one palette even if a page drops its own
	   <style> block. A page that still sets its own :root simply wins, same values. */
	--primary: #8b3a62;
	--primary-hover: #732a4e;
	--accent: #f7a440;
	--text: #2d3748;
	--text-light: #718096;
	--bg: #ffffff;
	--bg-alt: #f8fafc;
	--border: #e2e8f0;
}

/* ------------------------------------------------- 2. Kadence chrome removal */

/*
 * The mu-plugin already unhooks kadence_header and kadence_footer, so on a healthy
 * install none of this matches anything. It stays as the fallback for a Kadence
 * update that renames a hook, a child theme that prints the masthead itself, or a
 * landing page that still carries its own header and footer in the post body.
 *
 * :not(.mv-header) / :not(.mv-footer) is what keeps this from hiding our own chrome.
 */

#masthead,
#main-header,
#mobile-header,
header.site-header:not(.mv-header),
#colophon,
footer.site-footer:not(.mv-footer),
#mobile-site-navigation,
#mobile-drawer,
.mobile-drawer,
.drawer-overlay,
#kt-scroll-up,
.kadence-scroll-to-top,
.entry-hero,
.page-hero-section,
.entry-hero-container-inner,
.kadence-breadcrumbs {
	display: none !important;
}

/* Kadence pads the content wrapper to clear a header that is no longer there. */
#inner-wrap > .content-wrap,
.content-area.alignfull {
	margin-top: 0;
}

/* ------------------------------------------------- 3. page baseline typography */

/*
 * The legal and editorial pages are plain <h2>/<p> HTML in the post body, so
 * whatever the theme hands them is what they get. These rules give them a readable
 * measure and rhythm on their own. Landing pages carry their own styles at higher
 * source order and are unaffected.
 */

body.mv-chrome {
	margin: 0;
	background: var(--mv-bg-alt);
	color: var(--mv-text);
	font-family: var(--mv-sans);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

.mv-chrome .entry-content {
	color: var(--mv-text);
}

.mv-chrome .entry-content h1,
.mv-chrome .entry-content h2 {
	font-family: var(--mv-serif);
	color: var(--mv-ink);
	font-weight: 700;
	line-height: 1.32;
}

.mv-chrome .entry-content h1 {
	font-size: 30px;
	margin: 0 0 18px;
}

.mv-chrome .entry-content h2 {
	font-size: 23px;
	margin: 38px 0 14px;
}

.mv-chrome .entry-content h3 {
	font-size: 19px;
	font-weight: 600;
	color: #1e293b;
	margin: 26px 0 10px;
}

.mv-chrome .entry-content p,
.mv-chrome .entry-content li {
	font-size: 17px;
	line-height: 1.7;
}

.mv-chrome .entry-content p {
	margin: 0 0 20px;
}

.mv-chrome .entry-content ul,
.mv-chrome .entry-content ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.mv-chrome .entry-content li {
	margin-bottom: 8px;
}

.mv-chrome .entry-content a:not(.mv-cta):not(.mv-link-btn) {
	color: var(--mv-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mv-chrome .entry-content a:not(.mv-cta):not(.mv-link-btn):hover,
.mv-chrome .entry-content a:not(.mv-cta):not(.mv-link-btn):focus {
	color: var(--mv-primary-hover);
}

.mv-chrome .entry-content strong {
	color: var(--mv-ink);
}

.mv-chrome .entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
}

.mv-chrome .entry-content th,
.mv-chrome .entry-content td {
	border: 1px solid var(--mv-border);
	padding: 10px 12px;
	text-align: left;
	vertical-align: top;
}

.mv-chrome .entry-content th {
	background: var(--mv-bg-alt);
	font-weight: 600;
	color: var(--mv-ink);
}

.mv-chrome .entry-content hr {
	border: 0;
	border-top: 1px solid var(--mv-border);
	margin: 32px 0;
}

/* ------------------------------------------------------------- 4. the header */

/*
 * An editorial masthead, not a logo bar, and it carries no links at all. Every link
 * in a header above a paid landing page is an exit that is not the call to action.
 *
 * Not sticky, deliberately. The landing pages already pin a call to action to the
 * bottom of a phone screen, and a second fixed bar at the top would take a fifth of
 * a 640px viewport and never give it back. A masthead is a trust signal that has to
 * be seen once, so it scrolls away with everything else.
 *
 * Height: 58px on desktop, about 52px under 600px wide. The 3px accent rule is part
 * of that, and it is the only ornament.
 */

.mv-header {
	background: var(--mv-bg);
	border-top: 3px solid var(--mv-accent);
	border-bottom: 1px solid var(--mv-border);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mv-header__inner {
	max-width: 1080px;
	margin: 0 auto;
	padding: 8px 16px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.mv-wordmark {
	font-family: var(--mv-serif);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.2px;
	color: var(--mv-ink);
}

.mv-wordmark__mark {
	color: var(--mv-primary);
}

.mv-header__tagline {
	font-family: var(--mv-sans);
	font-size: 9px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--mv-text-light);
}

/* ------------------------------------------------------------- 5. the footer */

/*
 * This one does carry links. The policy pages have to be reachable from every page
 * for the ad review, and a reader who wants to know who wrote this deserves the same.
 * Small type, muted colour, nothing here competes with the call to action above it.
 */

.mv-footer {
	background: var(--mv-footer-bg);
	color: var(--mv-footer-text);
	font-family: var(--mv-sans);
	font-size: 13px;
	line-height: 1.7;
	/* The deep bottom padding is room for the fixed call to action the landing pages
	   pin to the bottom of a phone screen. It sits over the last line otherwise. */
	padding: 34px 16px 96px;
}

.mv-footer__inner {
	max-width: 820px;
	margin: 0 auto;
}

.mv-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin: 0 0 18px;
	padding: 0 0 16px;
	list-style: none;
	border-bottom: 1px solid var(--mv-footer-rule);
}

.mv-footer__links li {
	margin: 0;
}

.mv-footer__links a {
	color: var(--mv-footer-link);
	text-decoration: none;
	font-weight: 500;
	/* 44px of vertical target on a phone without pushing the row apart on desktop. */
	display: inline-block;
	padding: 4px 0;
}

.mv-footer__links a:hover,
.mv-footer__links a:focus {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mv-footer p {
	margin: 0 0 14px;
}

.mv-footer strong {
	color: var(--mv-footer-link);
	font-weight: 600;
}

.mv-footer__fine {
	color: #8ba0b8;
}

.mv-footer__publisher {
	margin-top: 22px;
	padding-top: 16px;
	border-top: 1px solid var(--mv-footer-rule);
	color: #7e8ea6;
}

.mv-footer__publisher span {
	display: block;
}

/* --------------------------------------------------------- 6. the CTA button */

/*
 * Shared by every page that asks for the click. Self-contained, so dropping the
 * class on an <a> or a <button> is all it takes.
 */

.mv-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 30px;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--mv-primary);
	color: #ffffff;
	font-family: var(--mv-sans);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.2px;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 10px;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(139, 58, 98, 0.28);
	transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
	/* Two passes and it stops. An animation that never ends reads as a banner ad and
	   the eye filters it out inside ten seconds. */
	animation: mv-cta-cue 1.5s ease-in-out 1.1s 2 both;
}

a.mv-cta,
a.mv-cta:visited,
.mv-chrome .entry-content a.mv-cta {
	color: #ffffff;
	text-decoration: none;
}

.mv-cta:hover,
.mv-cta:focus {
	background: var(--mv-primary-hover);
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(139, 58, 98, 0.34);
}

.mv-cta:focus-visible {
	outline: 3px solid var(--mv-accent);
	outline-offset: 3px;
}

.mv-cta:active {
	transform: translateY(0);
	background: var(--mv-primary-hover);
	box-shadow: 0 3px 8px rgba(139, 58, 98, 0.3);
}

.mv-cta--amber {
	background: var(--mv-accent);
	color: #1a202c;
	box-shadow: 0 6px 16px rgba(247, 164, 64, 0.4);
}

a.mv-cta--amber,
a.mv-cta--amber:visited,
.mv-chrome .entry-content a.mv-cta--amber {
	color: #1a202c;
}

.mv-cta--amber:hover,
.mv-cta--amber:focus,
.mv-cta--amber:active {
	background: #f59e0b;
	color: #1a202c;
}

.mv-cta--block {
	display: flex;
	width: 100%;
}

@keyframes mv-cta-cue {
	0%,
	100% {
		box-shadow: 0 6px 16px rgba(139, 58, 98, 0.28);
	}
	50% {
		box-shadow: 0 6px 22px rgba(247, 164, 64, 0.5), 0 0 0 5px rgba(247, 164, 64, 0.2);
	}
}

/* --------------------------------------------- 7. breakpoints, reduced motion */

@media (min-width: 600px) {
	.mv-header__inner {
		padding: 14px 24px;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
	}

	.mv-wordmark {
		font-size: 21px;
	}

	.mv-header__tagline {
		font-size: 11px;
		letter-spacing: 1.6px;
	}

	.mv-footer {
		padding: 44px 24px 52px;
	}

	body.mv-chrome {
		font-size: 18px;
	}

	.mv-chrome .entry-content h1 {
		font-size: 34px;
	}

	.mv-chrome .entry-content h2 {
		font-size: 25px;
	}

	.mv-chrome .entry-content p,
	.mv-chrome .entry-content li {
		font-size: 18px;
	}

	.mv-cta {
		font-size: 19px;
		padding: 16px 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mv-cta {
		animation: none;
		transition: background-color 0.18s ease;
	}

	.mv-cta:hover,
	.mv-cta:focus,
	.mv-cta:active {
		transform: none;
	}
}

/* ---------------------------------------------------------------- page title

   Kadence's entry hero is suppressed, so the h1 on a legal or editorial page comes
   from the chrome plugin instead. The landing pages and the front page carry their
   own h1 in the post body and never reach this. */

.mv-page-title {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 20px 0;
}

.mv-page-title h1 {
  margin: 0;
  font-family: Merriweather, Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  line-height: 1.2;
  color: var(--mv-text, var(--text, #2d3748));
  letter-spacing: -0.01em;
}

@media (max-width: 600px) {
  .mv-page-title {
    padding: 24px 16px 0;
  }
}

/* ---------------------------------------------------------------- content gap

   Kadence pads the top of the content area for a page title it is no longer
   rendering, which left a band of empty background under the masthead. On a phone
   that band is pure cost, it pushes the call to action down for nothing. */

.mv-chrome #inner-wrap,
.mv-chrome .content-area,
.mv-chrome .content-container {
  padding-top: 0;
  margin-top: 0;
}

.mv-chrome .entry-content > *:first-child {
  margin-top: 0;
}

/* ---------------------------------------------------------------- phone hero

   On a 390x740 phone the hero has to end with a visible call to action. The
   serif h1 at its desktop size ate five lines and pushed the button under the
   fold, so it steps down below 600px and the rhythm tightens with it. */

@media (max-width: 600px) {
  .mv-home .mv-hero h1,
  .mv-page-title h1 {
    font-size: 1.6rem;
    line-height: 1.22;
  }

  .mv-home .mv-hero .mv-deck {
    font-size: 0.975rem;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .mv-home .mv-hero .mv-eyebrow {
    margin-bottom: 6px;
  }

  .mv-home .mv-verdict {
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 0.95rem;
  }
}