/*
Theme Name: Man Cave
Theme URI: https://getoutofyourmancave.com
Description: Child theme of Hello Elementor for Get Out of Your Man Cave.
Author: Rich Gorecki
Template: hello-elementor
Version: 1.32.4
Text Domain: mancave
*/

/* -------------------------------------------------------------------------
 * Fonts
 *
 * Self-hosted so no request ever reaches Google's CDN. Files come from the
 * @fontsource packages (latin subset, woff2 only), which are the same upstream
 * font binaries google-webfonts-helper serves, without version-stamped names.
 *
 * Lato has no 600 weight upstream — it ships 100/300/400/700/900. The design
 * calls for "Lato 600" as the emphasis weight, so the 700 file is declared
 * across the 600-700 range. A request for 600 resolves to a real bold face
 * instead of a browser-synthesised one.
 * --------------------------------------------------------------------- */

@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('assets/fonts/lato-latin-400-normal.woff2') format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 600 700;
	font-display: swap;
	src: url('assets/fonts/lato-latin-700-normal.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
 * Design tokens
 *
 * Every colour in the site resolves to one of these six values. Changing a
 * token here changes it everywhere, which is the whole point of the child
 * theme: one edit instead of forty.
 *
 * --mc-gold passes WCAG AA on --mc-bg for large text and UI elements only.
 * Never apply it to paragraph text.
 * --------------------------------------------------------------------- */

:root {
	--mc-bg: #0B1929;
	--mc-surface: #16273E;
	--mc-primary: #1E5FC4;
	--mc-accent: #4D96D4;
	--mc-text: #DCE9F5;
	--mc-gold: #D19018;

	--mc-font-display: 'Bebas Neue', Impact, sans-serif;
	--mc-font-body: 'Lato', system-ui, sans-serif;

	/*
	 * Single gutter value shared by the header, main content and footer.
	 * Because all three are the same 1140px container, applying the same
	 * padding to each keeps their contents on one left edge — change it here
	 * and all three move together.
	 */
	--mc-gutter: 24px;
}

/* The three page containers share one gutter. */
.site-header,
.site-main,
.mc-footer {
	padding-left: var(--mc-gutter);
	padding-right: var(--mc-gutter);
}

body {
	background-color: var(--mc-bg);
	color: var(--mc-text);
	font-family: var(--mc-font-body);
	font-size: 16px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mc-font-display);
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--mc-text);
}

/*
 * Type scale. The title carries the page; section headings sit clearly below
 * it in both size and colour, matching the existing site. An earlier version
 * set h2 to 48px, which made every section heading compete with the title.
 */
h1 {
	font-size: 48px;
}

h2 {
	font-size: 24px;
	color: var(--mc-accent);
	letter-spacing: 0.9px;
	margin-top: 36px;
}

h3 {
	font-size: 20px;
}

/* -------------------------------------------------------------------------
 * Components
 * --------------------------------------------------------------------- */

/* Eyebrow label — small uppercase accent text above headings. */
.mc-eyebrow {
	font-family: var(--mc-font-display);
	font-size: 15px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-accent);
}

/* Short rule that sits beneath section headings. */
.mc-rule {
	display: block;
	width: 52px;
	height: 3px;
	background-color: var(--mc-primary);
	border: 0;
	margin: 14px 0;
}

/*
 * Primary call to action. Gold is the site's action colour — the same value
 * JOIN THE MOVEMENT uses — so that anything clickable reads the same way
 * wherever it appears. Blue is reserved for headings and links.
 */
.mc-btn {
	display: inline-block;
	background-color: var(--mc-gold);
	color: var(--mc-bg);
	font-family: var(--mc-font-display);
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 11px 22px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
}

.mc-btn:hover,
.mc-btn:focus {
	background-color: #E5A52A;
	color: var(--mc-bg);
}

/* Gold variant — reserved for the primary signup CTA. */
.mc-btn--gold {
	background-color: var(--mc-gold);
	color: var(--mc-bg);
}

.mc-btn--gold:hover,
.mc-btn--gold:focus {
	background-color: #E5A52A;
	color: var(--mc-bg);
}

/* Surface panel — cards, form fields, footer. */
.mc-surface {
	background-color: var(--mc-surface);
}

/* -------------------------------------------------------------------------
 * Site header
 *
 * Built on the parent theme's markup rather than an Elementor template, so the
 * header is version-controlled with the rest of the design and does not depend
 * on the builder. Structure comes from Hello Elementor:
 *   #site-header > .header-inner > .site-branding + nav.site-navigation
 * --------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--mc-bg);
	border-bottom: 1px solid rgba(220, 233, 245, 0.1);
}

/* The admin bar is fixed at the top for logged-in users; offset beneath it. */
.admin-bar .site-header {
	top: 32px;
}

/*
 * The parent theme already constrains .site-header to the 1140px container,
 * so it IS the container — any horizontal padding here indents the contents
 * from an edge that is already correct. Side padding is therefore only added
 * below the container width, where the header becomes fluid.
 */
.site-header {
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*
 * Logo lockup — "Get Out of Your" in accent, "Man Cave" in body colour,
 * matching the supplied artwork. Live text, not an image, so it stays sharp
 * at any zoom and screen readers announce the site name normally.
 * Markup comes from template-parts/header.php.
 */
/*
 * Line-height is set below 1 deliberately. Bebas Neue carries a lot of white
 * space above its caps, and at 54px the default leading opened a visible gap
 * between the wordmark and the tagline, breaking them into two separate
 * elements rather than one lockup.
 */
.mc-logo {
	margin: 0;
	line-height: 0.78;
}

/*
 * Tracking is tighter here than the 1.2px used for headings. Bebas Neue is
 * already condensed, and at logo size the wider heading tracking reads as
 * loose and breaks the lockup into separate words rather than one mark.
 */
.mc-logo a {
	font-family: var(--mc-font-display);
	font-size: 54px;
	letter-spacing: -0.5px;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
}

/*
 * The lockup is the largest type on the page — deliberately above the 48px
 * page title. It has to step down before it collides with the nav, so it
 * scales at two breakpoints rather than wrapping mid-wordmark.
 */
@media (max-width: 1200px) {
	.mc-logo a {
		font-size: 42px;
	}
}

@media (max-width: 1024px) {
	.mc-logo a {
		font-size: 34px;
	}
}

.mc-logo__lead {
	color: var(--mc-accent);
}

.mc-logo__mark {
	color: var(--mc-text);
}

.mc-logo a:hover .mc-logo__mark,
.mc-logo a:focus .mc-logo__mark {
	color: var(--mc-accent);
}

.mc-logo__tagline {
	font-family: var(--mc-font-body);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--mc-text);
	opacity: 0.7;
	margin: 0;
}

/*
 * Closing the gap in the lockup takes two changes, and both need the parent
 * theme's own selector depth to win the cascade.
 *
 * 1. The anchor computes a 1.2 line-height regardless of the 0.78 set on
 *    .mc-logo, which at 54px leaves ~11px of dead space under the caps.
 *    Setting it on the anchor itself removes that.
 * 2. Hello Elementor's header-footer.css sets `margin: 0` on the branding
 *    elements with five levels of specificity, so a plain .mc-logo__tagline
 *    rule is silently discarded — which is exactly what happened to an earlier
 *    attempt at this. Matching its depth is what makes the negative margin
 *    take effect.
 *
 * Measured result: the two lines sit flush, 0.3px apart.
 */
.site-header .header-inner .site-branding .mc-logo a {
	line-height: 0.85;
}

.site-header .header-inner .site-branding .mc-logo__tagline {
	margin-top: -9px;
}

@media (max-width: 1024px) {
	.mc-logo__tagline {
		font-size: 15px;
	}
}

.site-header .site-navigation ul.menu {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-header .site-navigation a {
	font-family: var(--mc-font-display);
	font-size: 18px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-text);
	opacity: 0.7;
	text-decoration: none;
	white-space: nowrap;
}

.site-header .site-navigation a:hover,
.site-header .site-navigation a:focus {
	opacity: 1;
}

/* Current page — accent colour plus an underline, so it does not rely on
   colour alone to signal position. */
.site-header .site-navigation .current-menu-item > a,
.site-header .site-navigation .current_page_item > a {
	color: var(--mc-accent);
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: 6px;
}

@media (max-width: 767px) {
	.site-header {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.site-header .header-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 0;
	}

	.site-header .site-navigation ul.menu {
		flex-wrap: wrap;
		gap: 16px;
	}

	.site-header .site-navigation a {
		font-size: 16px;
	}

	.mc-logo a {
		font-size: 30px;
	}

	.mc-logo__tagline {
		font-size: 12px;
	}

	.admin-bar .site-header {
		top: 46px;
	}
}

/* -------------------------------------------------------------------------
 * Long-form content pages
 *
 * Used by "Where Is Your Man Cave?", "The Movement" and "Rich's Story".
 * Body copy is held to a readable measure rather than the full container
 * width — long lines are the fastest way to make an essay unreadable.
 * --------------------------------------------------------------------- */

/*
 * Pages that open with their own eyebrow + heading hero suppress the parent
 * theme's page title, so there is exactly one h1 and the eyebrow sits above
 * the heading rather than below it. See inc/page-title-display.php.
 */
.mc-has-hero .page-header,
.mc-has-hero .entry-title,
.mc-has-hero h1.entry-title {
	display: none;
}

/*
 * The homepage is the exception. Its panels are all h2, so hiding the title
 * outright would leave the page with no h1 at all — bad for search engines
 * and for anyone navigating by headings. Here the title is visually hidden
 * but kept in the document.
 */
.home.mc-has-hero .page-header,
.home.mc-has-hero .entry-title,
.home.mc-has-hero h1.entry-title {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Everything sits in one left-aligned column that fills the container, which
 * is how the existing site sets these pages. An earlier version centred a
 * narrow 720px measure — good editorial practice in general, but not this
 * design, and it left the eyebrows floating inward from the body copy.
 *
 * The only element held narrower is the hero subtitle.
 */
.mc-has-hero .page-content > *,
.mc-has-hero .entry-content > * {
	margin-left: 0;
	margin-right: 0;
	max-width: none;
}

/* Hero subtitle — the standfirst under the H1, set larger and narrower. */
.mc-lede {
	font-size: 18px;
	line-height: 1.5;
	max-width: 672px;
	margin-top: 0;
	margin-bottom: 10px;
}

/* Section badge — a filled pill, distinct from the plain eyebrow label. */
.mc-badge {
	display: inline-block;
	background-color: var(--mc-primary);
	color: #FFFFFF;
	font-family: var(--mc-font-display);
	font-size: 13px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 5px 12px;
	/*
	 * Was 32px, which stacked on top of the standfirst's own bottom margin and
	 * left roughly 80px of dead space between the opening line and the first
	 * section. The gap should read as a step down, not a scroll.
	 *
	 * The 12px below is what separates the badge from the text it introduces.
	 * With no bottom margin the pill sat flush against the following line and
	 * read as part of the paragraph rather than a label for it.
	 */
	margin: 14px 0 12px;
}

.mc-steps {
	max-width: none;
}

/* Pull quote — the essay's turning points, set large in the display face. */
.mc-pullquote {
	font-family: var(--mc-font-display);
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-accent);
	text-align: center;
	margin: 48px auto;
}

/* Section divider glyph. */
.mc-divider {
	text-align: center;
	color: var(--mc-accent);
	font-size: 22px;
	margin: 48px auto 24px;
}

.mc-attribution {
	text-align: center;
	font-family: var(--mc-font-body);
	font-size: 15px;
	font-weight: 600;
	color: var(--mc-text);
	opacity: 0.8;
}

/* Attributed quote block. */
.mc-quote {
	border-left: 3px solid var(--mc-primary);
	border-radius: 0;
	background-color: var(--mc-surface);
	padding: 22px 26px;
	margin: 36px auto;
}

.mc-quote p {
	font-family: var(--mc-font-body);
	font-size: 18px;
	line-height: 1.5;
	font-style: italic;
	margin: 0 0 10px;
}

.mc-quote cite {
	font-family: var(--mc-font-display);
	font-size: 14px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-accent);
	font-style: normal;
}

/* Numbered three-column belief / step list. */
.mc-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin: 36px auto 48px;
	max-width: 1000px;
}

.mc-step__num {
	display: block;
	font-family: var(--mc-font-display);
	font-size: 48px;
	line-height: 1;
	color: var(--mc-accent);
	margin-bottom: 8px;
}

.mc-step h3 {
	font-size: 22px;
	margin: 0 0 10px;
}

.mc-step p {
	font-family: var(--mc-font-body);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* One column on phones — three columns of body copy is unreadable there. */
@media (max-width: 767px) {
	.mc-steps {
		grid-template-columns: 1fr;
	}

	.mc-pullquote {
		font-size: 26px;
	}
}

/* -------------------------------------------------------------------------
 * Blog archive, search and single post
 *
 * Templates live at home.php, archive.php, search.php and single.php, with the
 * shared pieces in inc/blog-helpers.php.
 * --------------------------------------------------------------------- */

.mc-archive__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	/*
	 * Column gap only. The standfirst wraps onto its own row, and a 40px row
	 * gap would drop it well clear of the heading it belongs to; its own
	 * margin-top handles that spacing instead.
	 */
	column-gap: 40px;
	row-gap: 0;
	flex-wrap: wrap;
	padding: 8px 0 28px;
	border-bottom: 1px solid rgba(220, 233, 245, 0.12);
	margin-bottom: 36px;
}

.mc-archive__intro {
	flex: 1 1 460px;
}

/*
 * The standfirst takes the whole header row and holds one line on a desktop
 * screen.
 *
 * min() does the work: 18px is the ceiling, 1.72vw the fallback. The sentence
 * measures about 51x its font-size in Lato, so 1.72vw keeps it just inside the
 * 1140px container as the window narrows, shrinking the type instead of
 * wrapping it. Below 767px that would push the text under 13px, so the media
 * query restores a readable 16px and lets it wrap over two or three lines,
 * which is the right answer on a phone anyway.
 */
.mc-archive__description {
	flex: 1 1 100%;
	max-width: none;
	font-size: min(18px, 1.72vw);
	line-height: 1.5;
	margin: 8px 0 0;
}

@media (max-width: 767px) {
	.mc-archive__description {
		font-size: 16px;
	}
}

/* Search field. */
.mc-search {
	display: flex;
	gap: 8px;
	flex: 0 1 340px;
}

.mc-search__field {
	flex: 1 1 auto;
	background-color: var(--mc-surface);
	border: 1px solid rgba(220, 233, 245, 0.15);
	color: var(--mc-text);
	font-family: var(--mc-font-body);
	font-size: 15px;
	padding: 10px 14px;
	min-width: 0;
}

.mc-search__field::placeholder {
	color: rgba(220, 233, 245, 0.45);
}

.mc-search__submit {
	background-color: var(--mc-primary);
	color: #FFFFFF;
	font-family: var(--mc-font-display);
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	border: 0;
	padding: 10px 18px;
	cursor: pointer;
}

.mc-search__submit:hover,
.mc-search__submit:focus {
	background-color: var(--mc-accent);
}

/* Category pill. */
.mc-pill {
	display: inline-block;
	background-color: var(--mc-primary);
	color: #FFFFFF;
	font-family: var(--mc-font-display);
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	padding: 4px 10px;
	text-decoration: none;
}

.mc-pill:hover,
.mc-pill:focus {
	background-color: var(--mc-accent);
	color: #FFFFFF;
}

/* Post list — text left, image right. */
.mc-post-list {
	display: flex;
	flex-direction: column;
	gap: 44px;
}

.mc-post {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 36px;
	align-items: center;
	padding-bottom: 44px;
	border-bottom: 1px solid rgba(220, 233, 245, 0.1);
}

.mc-post:last-child {
	border-bottom: 0;
}

.mc-post__title {
	font-size: 34px;
	line-height: 1.05;
	color: var(--mc-text);
	margin: 10px 0 6px;
}

.mc-post__title a {
	color: inherit;
	text-decoration: none;
}

.mc-post__title a:hover,
.mc-post__title a:focus {
	color: var(--mc-accent);
}

.mc-post__meta {
	font-family: var(--mc-font-body);
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	opacity: 0.7;
	margin: 0 0 12px;
}

.mc-post__excerpt {
	font-size: 16px;
	line-height: 1.55;
	margin: 0 0 20px;
}

.mc-post__media img {
	display: block;
	width: 100%;
	height: auto;
}

.mc-empty {
	font-size: 17px;
	opacity: 0.75;
}

/* Single post. */
.mc-single__header {
	padding: 8px 0 24px;
}

.mc-single__title {
	font-size: 48px;
	line-height: 1.02;
	margin: 12px 0 8px;
}

/*
 * Article hero. The featured image sits behind the headline block, ghosted back
 * far enough that Bebas Neue at 48px clears WCAG AA against the darkest part of
 * any photograph. Two layers do the work: a flat wash of the page background at
 * high opacity, and a gradient that deepens towards the bottom where the meta
 * line sits. Relying on the image alone would make legibility a matter of which
 * photograph happened to be uploaded.
 */
.mc-single__hero {
	position: relative;
	background-size: cover;
	background-position: center;
	margin: 0;
	/*
	 * Content sits near the top of the hero rather than pinned to the bottom,
	 * so the title, byline and category are visible without scrolling and the
	 * body copy starts sooner. The bottom padding is what keeps the image
	 * showing beneath the text block.
	 *
	 * The band was 320px tall with 56px of bottom padding, which left roughly
	 * 130px of empty photograph between the byline and the first section badge
	 * — enough that the article looked like it started twice. 180px keeps a
	 * visible strip of image under the text and brings the badge to within
	 * 19px of the byline, which reads as one block rather than two.
	 */
	padding: 40px 32px 16px;
	display: flex;
	align-items: flex-start;
	min-height: 180px;
}

.mc-single__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(11, 25, 41, 0.55), rgba(11, 25, 41, 0.92)),
		rgba(11, 25, 41, 0.35);
}

.mc-single__hero-inner {
	position: relative;
	width: 100%;
}

.mc-single__media {
	margin: 0 0 32px;
}

.mc-single__media img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.mc-single__hero {
		padding: 28px 20px 14px;
		min-height: 175px;
	}
}

/*
 * Share row at the foot of an article.
 *
 * A hairline above it separates the article from the things that come after it
 * — sharing, then comments — without the weight of a full section break.
 */
.mc-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	margin: 28px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(220, 233, 245, 0.12);
}

.mc-share__heading {
	font-family: var(--mc-font-display);
	font-size: 15px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-accent);
	margin: 0;
}

.mc-share__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * End-of-article star. Marks the finish without a repeated byline.
 */
.mc-endmark {
	color: var(--mc-gold);
	font-size: 20px;
	text-align: center;
	margin: 40px 0 0;
}

/*
 * Article body runs the full container width, matching the rest of the site.
 * An earlier version held it to a 720px measure — better typographic practice
 * in the abstract, but it fought the design and left the body copy visibly
 * narrower than everything around it.
 *
 * The container itself is already fluid below 1140px, so this stays responsive
 * without a media query: the text reflows with the page rather than being
 * pinned to a fixed measure.
 */
.mc-single__content {
	max-width: none;
}

.mc-single__content p {
	font-size: 17px;
	line-height: 1.65;
}

.mc-comments {
	max-width: none;
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid rgba(220, 233, 245, 0.12);
}

.mc-comments input[type="text"],
.mc-comments input[type="email"],
.mc-comments input[type="url"],
.mc-comments textarea {
	background-color: var(--mc-surface);
	border: 1px solid rgba(220, 233, 245, 0.15);
	color: var(--mc-text);
	font-family: var(--mc-font-body);
	padding: 10px 14px;
	width: 100%;
	max-width: 100%;
}

.mc-comments .submit {
	background-color: var(--mc-gold);
	color: var(--mc-bg);
	font-family: var(--mc-font-display);
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	border: 0;
	padding: 11px 22px;
	cursor: pointer;
}

.mc-comments .comment-list {
	list-style: none;
	padding: 0;
}

/* Pagination. */
.mc-archive .nav-links {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 40px;
}

.mc-archive .nav-links .page-numbers {
	font-family: var(--mc-font-display);
	font-size: 15px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-text);
	border: 1px solid rgba(220, 233, 245, 0.22);
	padding: 8px 14px;
	text-decoration: none;
}

.mc-archive .nav-links .page-numbers.current,
.mc-archive .nav-links .page-numbers:hover {
	background-color: var(--mc-accent);
	border-color: var(--mc-accent);
	color: var(--mc-bg);
}

@media (max-width: 767px) {
	.mc-post {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.mc-post__media {
		order: -1;
	}

	.mc-post__title {
		font-size: 26px;
	}

	.mc-single__title {
		font-size: 32px;
	}

	.mc-search {
		flex: 1 1 100%;
	}
}

/* -------------------------------------------------------------------------
 * Homepage carousel
 *
 * Markup is a plain list of panels; assets/js/carousel.js turns it into a
 * slider. Without JavaScript the panels simply stack and remain readable,
 * which is why the overflow and transform rules only apply once the script
 * has added .is-enhanced.
 * --------------------------------------------------------------------- */

.mc-carousel {
	position: relative;
	margin: 0 0 56px;
}

.mc-carousel.is-enhanced {
	overflow: hidden;
}

/*
 * The track is a <ul>, so the browser's default list padding must be cleared
 * or every slide sits 40px inside the carousel and misaligns with the rest of
 * the page.
 */
.mc-carousel__track {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-carousel.is-enhanced .mc-carousel__track {
	display: flex;
	transition: transform 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.mc-carousel.is-enhanced .mc-carousel__track {
		transition: none;
	}
}

.mc-carousel.is-enhanced .mc-carousel__slide {
	flex: 0 0 100%;
	min-width: 100%;
}

/*
 * Slides carry a ghosted background image, as on the existing site. The image
 * is set inline from the slide's data-image attribute; everything else is
 * handled here so a slide without an image still renders correctly on the flat
 * surface colour.
 *
 * The ::before wash is what makes the text legible. Slide copy is large and
 * light, and photographs vary wildly in brightness, so the overlay is deep
 * enough to guarantee contrast rather than tuned to any one picture.
 */
.mc-carousel__slide {
	position: relative;
	background-color: var(--mc-surface);
	background-size: cover;
	background-position: center;
	padding: 78px 48px 56px;
	min-height: 340px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.mc-carousel__slide[data-image]::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(22, 39, 62, 0.94) 0%,
		rgba(22, 39, 62, 0.86) 55%,
		rgba(22, 39, 62, 0.72) 100%
	);
}

/* Lift the copy above the wash. */
.mc-carousel__slide > * {
	position: relative;
}

.mc-carousel__eyebrow {
	font-family: var(--mc-font-display);
	font-size: 15px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-accent);
	margin: 0 0 8px;
}

/*
 * The post slide's title is a link; it should read as the heading, not as body
 * copy that happens to be blue.
 */
.mc-carousel__slide--post .mc-carousel__title a {
	color: var(--mc-text);
	text-decoration: none;
}

.mc-carousel__slide--post .mc-carousel__title a:hover,
.mc-carousel__slide--post .mc-carousel__title a:focus {
	color: var(--mc-accent);
}

.mc-carousel__meta {
	font-family: var(--mc-font-body);
	font-size: 14px;
	opacity: 0.75;
	margin: 10px 0 0;
}

.mc-carousel__title {
	font-family: var(--mc-font-display);
	font-size: 52px;
	line-height: 0.95;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--mc-text);
	margin: 0;
}

.mc-carousel__subtitle {
	font-family: var(--mc-font-display);
	font-size: 26px;
	line-height: 1.05;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-accent);
	margin: 4px 0 0;
}

.mc-carousel__body {
	font-family: var(--mc-font-body);
	font-size: 17px;
	line-height: 1.55;
	max-width: 620px;
	margin: 18px 0 26px;
}

/*
 * Controls overlay the top of the slide as one centred cluster, rather than
 * sitting in their own band below it. This keeps the carousel a single object
 * and stops the controls competing with the section that follows.
 *
 * Two consequences handled here: the carousel needs a positioning context, and
 * the slides need top padding so their copy starts below the controls instead
 * of behind them.
 */
.mc-carousel {
	position: relative;
}

.mc-carousel__controls {
	position: absolute;
	top: 14px;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 0;
	padding: 0 18px;
}

/*
 * A translucent fill so the buttons stay legible once ghosted photographs sit
 * behind them. Transparent circles vanish against a light patch of image.
 */
.mc-carousel__arrow,
.mc-carousel__pause {
	background-color: rgba(11, 25, 41, 0.55);
}

.mc-carousel__arrow {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(220, 233, 245, 0.28);
	border-radius: 50%;
	background: transparent;
	color: var(--mc-text);
	font-size: 16px;
	cursor: pointer;
	line-height: 1;
}

.mc-carousel__arrow:hover,
.mc-carousel__arrow:focus {
	background-color: var(--mc-accent);
	border-color: var(--mc-accent);
	color: var(--mc-bg);
}

.mc-carousel__dots {
	display: flex;
	gap: 8px;
}

.mc-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(220, 233, 245, 0.3);
	cursor: pointer;
}

.mc-carousel__dot.is-current {
	background-color: var(--mc-accent);
}

/* Pause / play. Auto-rotation is only acceptable if it can be stopped. */
.mc-carousel__pause {
	width: 40px;
	height: 40px;
	border: 1px solid rgba(220, 233, 245, 0.28);
	border-radius: 50%;
	background: transparent;
	color: var(--mc-text);
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

.mc-carousel__pause:hover,
.mc-carousel__pause:focus {
	background-color: var(--mc-accent);
	border-color: var(--mc-accent);
	color: var(--mc-bg);
}

/* -------------------------------------------------------------------------
 * Latest post panel
 * --------------------------------------------------------------------- */

.mc-latest {
	background-color: var(--mc-surface);
	padding: 48px;
	margin-bottom: 56px;
}

.mc-latest__inner {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 40px;
	align-items: center;
}

.mc-latest__title {
	font-size: 34px;
	line-height: 1.05;
	margin: 6px 0 8px;
	color: var(--mc-text);
}

.mc-latest__title a {
	color: inherit;
	text-decoration: none;
}

.mc-latest__title a:hover {
	color: var(--mc-accent);
}

.mc-latest__meta {
	font-family: var(--mc-font-body);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.7;
	margin: 0 0 12px;
}

.mc-latest__excerpt {
	font-size: 16px;
	line-height: 1.55;
	margin: 0 0 22px;
}

.mc-latest__media img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	.mc-carousel__slide {
		padding: 36px 24px;
		min-height: 0;
	}

	.mc-carousel__title {
		font-size: 34px;
	}

	.mc-carousel__subtitle {
		font-size: 20px;
	}

	.mc-latest,
	.mc-latest__inner {
		padding: 0;
		grid-template-columns: 1fr;
	}

	.mc-latest {
		padding: 28px 24px;
	}

	.mc-latest__title {
		font-size: 26px;
	}
}

/* -------------------------------------------------------------------------
 * Site footer
 *
 * Markup lives in template-parts/footer.php, which overrides the parent
 * theme's version.
 * --------------------------------------------------------------------- */

/*
 * Same as the header: the parent theme constrains .site-footer to the 1140px
 * container, so horizontal padding here would indent the columns relative to
 * the page content above them.
 */
/*
 * The footer sits on --mc-bg, the same colour as the header and the page
 * behind it. It previously used --mc-surface, which made it read as a separate
 * panel bolted to the bottom; matching the header instead bookends the page
 * with one continuous colour and lets the top border above the 988 notice do
 * the separating.
 */
.mc-footer {
	background-color: var(--mc-bg);
	padding-top: 40px;
	padding-bottom: 20px;
	margin-top: 64px;
}

.mc-footer__inner {
	display: grid;
	/* Brand, then three equal link columns: Explore, About, Follow. */
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	width: 100%;
	margin: 0;
}

.mc-footer__tagline {
	font-family: var(--mc-font-display);
	font-size: 20px;
	line-height: 1.1;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-text);
	margin: 0 0 10px;
}

.mc-footer__name {
	font-family: var(--mc-font-display);
	font-size: 26px;
	line-height: 1.05;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--mc-accent);
	margin: 0;
}

.mc-footer__role {
	font-family: var(--mc-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--mc-text);
	opacity: 0.7;
	margin: 2px 0 12px;
}

.mc-footer__copyright {
	font-family: var(--mc-font-body);
	font-size: 13px;
	line-height: 1.3;
	color: var(--mc-text);
	opacity: 0.6;
	margin: 0;
}

.mc-footer__heading {
	font-family: var(--mc-font-display);
	font-size: 15px;
	line-height: 1.1;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-accent);
	margin: 0 0 8px;
}

.mc-footer__list,
.mc-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mc-footer__list li,
.mc-footer__social li {
	margin-bottom: 4px;
	line-height: 1.35;
}

/*
 * The four social marks sit in a 2x2 block under the Follow heading.
 *
 * One per line made the Follow column four rows deep against three in Explore
 * and About, which set the height of the whole footer for the sake of one
 * column. Two by two keeps it to two rows and squares off next to its
 * neighbours. max-content columns mean the block is only as wide as the two
 * circles, not the full grid track.
 *
 * The network names stay screen-reader only; the marks are recognisable, and
 * naming them would make this column twice the width of the others.
 */
.mc-footer__social {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 8px;
	margin-top: 4px;
}

.mc-footer__social li {
	margin-bottom: 0;
}

/*
 * 34px circles. The icon inherits colour through currentColor, so the hover
 * state needs no separate rule per network.
 */
.mc-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(220, 233, 245, 0.28);
	border-radius: 50%;
	color: var(--mc-text);
	opacity: 0.75;
	text-decoration: none;
}

.mc-social:hover,
.mc-social:focus {
	color: var(--mc-bg);
	background-color: var(--mc-accent);
	border-color: var(--mc-accent);
	opacity: 1;
	text-decoration: none;
}

.mc-social svg {
	display: block;
	flex: 0 0 auto;
}

/*
 * The network name. Hidden visually so the row stays compact, but still in the
 * DOM — an unlabelled icon link announces itself as nothing at all otherwise.
 */
.mc-social__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Accessible label for icon-only links. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mc-footer a {
	font-family: var(--mc-font-body);
	font-size: 14px;
	color: var(--mc-text);
	opacity: 0.75;
	text-decoration: none;
}

.mc-footer a:hover,
.mc-footer a:focus {
	color: var(--mc-accent);
	opacity: 1;
	text-decoration: underline;
}

/*
 * Bottom row carries the 988 notice on its own.
 *
 * The social icons lived here for a while, sharing the row with the notice.
 * They are back in the footer's link columns under a FOLLOW heading, where
 * they sit alongside Explore and About as one of the things the footer offers
 * rather than as an afterthought pinned to the crisis line.
 */
.mc-footer__support {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	max-width: 1140px;
	margin: 20px auto 0;
	padding-top: 14px;
	border-top: 1px solid rgba(220, 233, 245, 0.12);
}

.mc-footer__support .mc-support-notice {
	flex: 1 1 420px;
}


@media (max-width: 767px) {
	.mc-footer__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.mc-footer {
		padding-top: 36px;
		padding-bottom: 20px;
	}
}

/* -------------------------------------------------------------------------
 * Crisis support notice
 * --------------------------------------------------------------------- */

/*
 * The 988 notice is set in gold.
 *
 * The token comment warns against gold on paragraph text, and that caution is
 * right for long-form copy — but measured against --mc-bg this pairing is
 * 6.5:1, comfortably past the 4.5:1 AA threshold for body text. The 0.75
 * opacity the line used to carry is dropped rather than kept: fading it would
 * pull the contrast back under AA, and of everything in the footer this is the
 * line that should be easiest to read, not the quietest.
 */
.mc-support-notice {
	font-family: var(--mc-font-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--mc-gold);
	margin: 0;
}

/*
 * The phone number inherits the gold and keeps its underline, which is what
 * marks it as a link now that colour alone no longer distinguishes it from the
 * sentence around it.
 */
.mc-support-notice a,
.mc-footer .mc-support-notice a:hover,
.mc-footer .mc-support-notice a:focus {
	color: var(--mc-gold);
	/*
	 * .mc-footer a fades every footer link to 0.75 and .mc-footer a:hover
	 * recolours it to the accent blue. Both have to be answered here, or the
	 * notice loses its contrast at rest and turns blue on hover.
	 */
	opacity: 1;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * WooCommerce
 * --------------------------------------------------------------------- */

.mc-price-free {
	font-family: var(--mc-font-display);
	font-size: 24px;
	letter-spacing: 1.2px;
	color: var(--mc-gold);
}

.woocommerce ul.products li.product {
	background-color: var(--mc-surface);
	padding: 0 0 18px;
}

.woocommerce ul.products li.product .mc-card-eyebrow,
.woocommerce ul.products li.product .posted_in {
	display: block;
	font-family: var(--mc-font-display);
	font-size: 13px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-accent);
	padding: 14px 18px 0;
}

.woocommerce ul.products li.product h2 {
	font-size: 22px;
	padding: 0 18px;
}

.woocommerce ul.products li.product .price {
	padding: 0 18px;
	color: var(--mc-text);
}

.mc-amazon-links {
	font-family: var(--mc-font-body);
	font-size: 14px;
	color: var(--mc-text);
	opacity: 0.8;
	margin-top: 14px;
}

.mc-amazon-links a {
	color: var(--mc-accent);
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Single product page
 * --------------------------------------------------------------------- */

/*
 * The category name above the title. Reuses the .mc-eyebrow treatment from the
 * blog so a product and a post announce themselves the same way, but drops the
 * large margin the standalone eyebrow carries.
 */
.mc-product__eyebrow {
	margin: 0 0 6px;
}

/*
 * Signed copies and bulk orders. Deliberately quieter than the Amazon line
 * above it — these are for the small number of readers who want them, and
 * competing with ADD TO CART would cost more sales than it wins.
 */
.mc-product__secondary {
	font-family: var(--mc-font-body);
	font-size: 14px;
	margin-top: 8px;
}

.mc-product__secondary a {
	color: var(--mc-text);
	opacity: 0.75;
	text-decoration: underline;
}

.mc-product__secondary a:hover,
.mc-product__secondary a:focus {
	color: var(--mc-accent);
	opacity: 1;
}

.mc-product__secondary span {
	opacity: 0.4;
	margin: 0 4px;
}

/*
 * Send to Kindle instructions, shown only on downloadable products. Set apart
 * from the description so it reads as practical help rather than sales copy.
 */
.mc-kindle-note {
	background-color: var(--mc-surface);
	border-left: 3px solid var(--mc-gold);
	padding: 14px 18px;
	margin-top: 24px;
}

.mc-kindle-note p {
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Checkout and cart buttons
 *
 * WooCommerce's block checkout ships its own button styling in bright pink,
 * which belongs to no part of this palette. The colour is not a plain
 * background either: the block sets `background-color: currentColor` and then
 * forces the label to white, so overriding `background-color` alone leaves the
 * border and any focus ring pink. Both `color` and `background-color` have to
 * be set, and the label recoloured back to white afterwards.
 *
 * !important is load-bearing here rather than lazy — the block stylesheet is
 * enqueued after the theme and carries higher specificity than a class
 * selector can reach without it.
 * --------------------------------------------------------------------- */

.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
	background-color: var(--mc-gold) !important;
	color: var(--mc-bg) !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-family: var(--mc-font-display);
	font-size: 16px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	cursor: pointer;
}

/*
 * The label sits in its own element and inherits the block's own colour rule,
 * so it needs recolouring independently of the button.
 */
.wc-block-components-button__text,
.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
	color: var(--mc-bg) !important;
}

.wc-block-components-button:not(.is-link):hover,
.wc-block-components-button:not(.is-link):focus,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	background-color: #E5A52A !important;
	color: var(--mc-bg) !important;
}

/*
 * Spinners and the loading state inherit currentColor, which would otherwise
 * turn white-on-white while the order is being placed.
 */
.wc-block-components-button .wc-block-components-spinner::before {
	border-top-color: #FFFFFF;
}

/* Legal links beneath the copyright line. Quiet by design — required to be
 * present and findable, not to draw attention away from the site's content. */
.mc-footer__legal {
	font-family: var(--mc-font-body);
	font-size: 13px;
	margin: 8px 0 0;
	opacity: 0.6;
}

.mc-footer__legal a {
	color: var(--mc-text);
	text-decoration: underline;
}

.mc-footer__legal a:hover,
.mc-footer__legal a:focus {
	color: var(--mc-accent);
}

.mc-footer__legal span {
	margin: 0 6px;
}

/* The blog listing's eyebrow doubles as its <h1>, so it needs the heading
 * element reset back to eyebrow proportions rather than 48px. */
.mc-archive__eyebrow {
	/*
	 * Sized with clamp() so it scales with the viewport instead of stepping at
	 * breakpoints: 22px on a narrow phone, up to 34px on a wide screen, fluid
	 * between. No media query needed and nothing to keep in sync.
	 */
	font-size: clamp(22px, 3.2vw, 34px);
	line-height: 1.05;
	margin: 0 0 10px;
	text-transform: uppercase;
}

/* Blog listing heading. Sized to match the article <h1> so the archive and a
 * post read as the same level of page. */
.mc-archive__title {
	font-size: 48px;
	line-height: 1.02;
	margin: 8px 0 12px;
}

/* -------------------------------------------------------------------------
 * Cookie consent banner
 *
 * Fixed to the bottom so it never covers the header or a product's Add to Cart
 * button. Deliberately plain: this is a question to answer and dismiss, not a
 * piece of the design.
 * --------------------------------------------------------------------- */

.mc-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background-color: var(--mc-surface);
	border-top: 1px solid rgba(220, 233, 245, 0.15);
	padding: 16px var(--mc-gutter);
}

.mc-consent__text {
	font-family: var(--mc-font-body);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	max-width: 62ch;
}

.mc-consent__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}

/*
 * Decline is a real button, not a link buried in small print. Both choices
 * should be equally easy to make.
 */
.mc-consent__decline {
	background: none;
	border: 1px solid rgba(220, 233, 245, 0.35);
	color: var(--mc-text);
	font-family: var(--mc-font-display);
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	padding: 10px 20px;
	cursor: pointer;
}

.mc-consent__decline:hover,
.mc-consent__decline:focus {
	border-color: var(--mc-accent);
	color: var(--mc-accent);
}

/*
 * Long-form headings share the body's left edge. Nothing here is centred —
 * an earlier version of this page inherited centring from the block editor's
 * default alignment on some blocks, which left headings and copy on different
 * axes.
 */
.mc-single__content h1,
.mc-single__content h2,
.mc-single__content h3,
.mc-single__content h4,
.mc-single__content p,
.mc-single__content ul,
.mc-single__content ol {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

/* The end-of-article star stays centred — it is a mark, not a heading. */
.mc-single__content .mc-divider,
.mc-single__content .mc-endmark {
	text-align: center;
}

/* Byline on the hero: author, date and read time. */
.mc-single__hero .mc-post__meta {
	font-family: var(--mc-font-body);
	font-size: 15px;
	opacity: 0.85;
	margin: 12px 0 0;
}

/*
 * The article body shares the hero's inset, so the title, byline and copy all
 * sit on one left edge. Previously the hero carried 32px of internal padding
 * while the body sat flush to the container, leaving the headline visibly
 * indented from the text beneath it.
 *
 * Both values are kept in one place so they cannot drift apart.
 */
.mc-single__content,
.mc-comments {
	padding-left: 32px;
	padding-right: 32px;
}

/*
 * Page heroes crop from near the bottom of the image rather than the middle.
 *
 * The Where Is Your Man Cave photo is 16:9 and the hero band is 180px in a
 * 1092px container, so `cover` throws away about two thirds of the height.
 * Centred, that cut left the figure on the lower edge, half out of frame.
 * 68% raises him to sit alongside the headline, which is where the eye expects
 * the subject of the picture to be.
 *
 * The value is tied to the 180px band height — change one and re-check the
 * other, because the percentage refers to the overflow, not the image. A
 * shorter band means more overflow, so the percentage goes DOWN, not up.
 *
 * Scoped to pages so blog post heroes, whose images are framed differently,
 * keep centring.
 */
.page .mc-single__hero {
	background-position: center 68%;
}

/* The category label above the title. */
.mc-single__kicker {
	margin: 0 0 8px;
}

/* The pill now leads the hero, so its spacing sits below it, not above. */
.mc-single__hero-inner .mc-pill {
	display: inline-block;
	margin: 0 0 10px;
}

@media (max-width: 767px) {
	/* Matches the hero's narrower mobile padding. */
	.mc-single__content,
	.mc-comments {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* The article body opens flush against the hero. */
.mc-single__content > *:first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Forms
 *
 * Built in the theme rather than Elementor (see inc/forms.php). The existing
 * .elementor-field-group rules above still apply to any Elementor form that
 * survives; these cover the theme's own.
 * --------------------------------------------------------------------- */

.mc-form {
	max-width: 640px;
}

.mc-form__title {
	margin-top: 0;
}

.mc-field {
	margin-bottom: 18px;
}

.mc-field__label,
.mc-field__group .mc-field__label {
	display: block;
	font-family: var(--mc-font-display);
	font-size: 13px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-text);
	opacity: 0.85;
	margin-bottom: 6px;
}

/* Gold, not red: this marks a requirement, it does not report an error. */
.mc-field__req {
	color: var(--mc-gold);
}

.mc-input {
	width: 100%;
	background-color: var(--mc-surface);
	border: 1px solid rgba(220, 233, 245, 0.15);
	color: var(--mc-text);
	font-family: var(--mc-font-body);
	font-size: 16px;
	padding: 12px 14px;
	border-radius: 0;
}

.mc-input:focus {
	outline: 2px solid var(--mc-accent);
	outline-offset: 1px;
	border-color: var(--mc-accent);
}

.mc-input::placeholder {
	color: rgba(220, 233, 245, 0.45);
}

.mc-field__group {
	border: 0;
	margin: 0;
	padding: 0;
}

.mc-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--mc-font-body);
	font-size: 15px;
	line-height: 1.45;
	margin-bottom: 8px;
	cursor: pointer;
}

.mc-choice input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.mc-form__notice {
	font-size: 14px;
	line-height: 1.55;
	opacity: 0.8;
	background-color: var(--mc-surface);
	border-left: 3px solid var(--mc-gold);
	padding: 12px 16px;
	margin: 24px 0;
}

.mc-form__required {
	font-size: 13px;
	opacity: 0.6;
	margin-top: 12px;
}

/*
 * Honeypot. Moved off-screen rather than display:none, because some bots skip
 * fields that are explicitly hidden but will still fill one they can "see".
 */
.mc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Result notices shown after the post/redirect/get round trip. */
.mc-notice {
	padding: 14px 18px;
	margin-bottom: 24px;
	border-left: 3px solid var(--mc-accent);
	background-color: var(--mc-surface);
}

.mc-notice--ok {
	border-left-color: var(--mc-gold);
}

.mc-notice--bad {
	border-left-color: #E06C5B;
}

.mc-notice p {
	margin: 0;
}

@media (max-width: 767px) {
	.mc-form {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
 * Elementor form fields
 * --------------------------------------------------------------------- */

.elementor-field-group .elementor-field {
	background-color: var(--mc-surface);
	border: 1px solid rgba(220, 233, 245, 0.15);
	color: var(--mc-text);
	font-family: var(--mc-font-body);
	padding: 12px 14px;
}

.elementor-field-group > label {
	font-family: var(--mc-font-display);
	font-size: 13px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-text);
	opacity: 0.85;
	margin-bottom: 6px;
}

.elementor-field-group .elementor-field::placeholder {
	color: rgba(220, 233, 245, 0.45);
}

/* -------------------------------------------------------------------------
 * Bulk order live summary panel
 * --------------------------------------------------------------------- */

.mc-summary {
	background-color: var(--mc-surface);
	padding: 22px;
}

.mc-summary__progress {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

.mc-summary__bar {
	height: 4px;
	width: 0;
	background-color: var(--mc-primary);
	transition: width 0.25s ease;
	flex: 1 1 auto;
}

.mc-summary__pct {
	font-family: var(--mc-font-display);
	font-size: 13px;
	letter-spacing: 0.9px;
	color: var(--mc-accent);
	flex: 0 0 auto;
}

.mc-summary__title {
	font-size: 22px;
	margin: 0 0 12px;
}

.mc-summary__row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(220, 233, 245, 0.1);
}

.mc-summary__label {
	font-family: var(--mc-font-display);
	font-size: 13px;
	letter-spacing: 0.9px;
	text-transform: uppercase;
	color: var(--mc-accent);
}

.mc-summary__value {
	font-family: var(--mc-font-body);
	font-size: 14px;
	color: var(--mc-text);
	text-align: right;
}

.mc-summary__empty {
	font-family: var(--mc-font-body);
	font-size: 14px;
	color: var(--mc-text);
	opacity: 0.6;
	margin: 0;
}