/*
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.11.0
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. */
.mc-btn {
	display: inline-block;
	background-color: var(--mc-primary);
	color: #FFFFFF;
	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: var(--mc-accent);
	color: #FFFFFF;
}

/* 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.86;
}

/*
 * 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.2;
	color: var(--mc-text);
	opacity: 0.7;
	margin: 2px 0 0;
}

@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;
}

/*
 * 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;
}

/* 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;
	margin: 32px 0 0;
}

.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;
	}
}

/* -------------------------------------------------------------------------
 * 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.
 */
.mc-footer {
	background-color: var(--mc-surface);
	padding-top: 48px;
	padding-bottom: 24px;
	margin-top: 64px;
}

.mc-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
	width: 100%;
	margin: 0;
}

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

.mc-footer__name {
	font-family: var(--mc-font-display);
	font-size: 26px;
	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;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--mc-text);
	opacity: 0.7;
	margin: 4px 0 18px;
}

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

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

.mc-footer__heading--follow {
	margin-top: 24px;
}

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

.mc-footer__list li,
.mc-footer__social li {
	margin-bottom: 8px;
}

.mc-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

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

/*
 * Social icons — circular outline buttons. 40px is the minimum comfortable
 * touch target, and 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: 40px;
	height: 40px;
	border: 1px solid rgba(220, 233, 245, 0.28);
	border-radius: 50%;
	color: var(--mc-text);
	opacity: 0.75;
}

.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;
}

/* 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;
}

/* Full-width row carrying the 988 notice, separated from the link columns. */
.mc-footer__support {
	max-width: 1140px;
	margin: 32px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(220, 233, 245, 0.12);
}

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

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

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

.mc-support-notice {
	font-family: var(--mc-font-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--mc-text);
	opacity: 0.75;
	margin: 0;
}

.mc-support-notice a {
	color: var(--mc-accent);
	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;
}

/* -------------------------------------------------------------------------
 * 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;
}