/*
Theme Name: MajorMorale Child
Theme URI: https://majormorale.com/
Author: Tosha Manke / Major Morale
Description: Site-specific child theme for MajorMorale.com.
Version: 1.6.2
Template: majormorale-base
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: majormorale-child
*/

/*
IMPORTANT:
Keep site-specific CSS changes here so the parent theme can be updated later
without overwriting your customizations.
*/

:root {
	/* Typography */
	--mm-display-font: "cooper-black-std", "Cooper Black", "Cooper Black Std", Georgia, "Times New Roman", serif;
	--mm-heading-font: "Bitter", Georgia, "Times New Roman", serif;

	/*
	 * Elementor Global Colors are the single source of truth.
	 * These aliases keep the parent theme compatible with the Elementor palette.
	 * The fallback hex values match the current Elementor globals.
	 */
	--mm-page-bg: var(--e-global-color-1e9e8dc, #E9E0CD);
	--mm-surface: var(--e-global-color-23304c8, #ffffff);
	--mm-text: var(--e-global-color-text, #171717);
	--mm-link: var(--e-global-color-a66b0db, #A13E35);
	--mm-border: var(--e-global-color-282dba4, #D8CFBD);
	--mm-olive: var(--e-global-color-primary, #35420F);
	--mm-home-green: var(--e-global-color-primary, #35420F);
	--mm-olive-dark: var(--e-global-color-secondary, #232D0B);
	--mm-gold: var(--e-global-color-accent, #F0C83A);
	--mm-home-gold: var(--e-global-color-accent, #F0C83A);
	--mm-cream: var(--e-global-color-c5bb4e6, #F6F0E3);
}

/* Elementor content should be allowed to reach full width when its container is set that way. */
.elementor-page .site-main,
.elementor-page .entry-content {
	margin: 0;
	padding: 0;
}

/* Common card language for ordinary theme content outside Elementor. */
.mm-post-card,
.widget {
	background: var(--e-global-color-23304c8, #ffffff);
	border-radius: 12px;
}

/* Keep this file for all future MajorMorale-specific CSS. */


/* Cooper Black for theme-owned display text.
   Elementor widget typography remains controlled by Elementor when explicitly set. */
.site-title,
.main-navigation a,
.widget-title,
.page-title,
.entry-title {
	font-family: var(--mm-display-font);
	font-weight: 400;
}


/* Theme-owned colors follow Elementor Global Colors. */
body {
	background: var(--e-global-color-1e9e8dc, #e9e0cd);
	color: var(--e-global-color-text, #171717);
}

body a {
	color: var(--e-global-color-primary, #35420f);
}


/* ==========================================================
   ELEMENTOR HEADER
========================================================= */

/*
 * The global Elementor header has one theme-owned outer height at every
 * viewport width: 95px normally and 55px after .is-scrolled is applied.
 * Elementor still controls which individual elements are visible at each
 * breakpoint. The fixed outer heights keep the header/background transition
 * consistent on desktop, tablet, and mobile.
 */
.mm-site-header {
	position: relative;
	z-index: 10010;
	width: 100%;
	height: 95px !important;
	min-height: 95px !important;
	overflow: visible;
	transition:
		height var(--mm-header-sticky-transition, 650ms) ease-in-out,
		min-height var(--mm-header-sticky-transition, 650ms) ease-in-out;
}

.mm-site-header.is-scrolled {
	height: 55px !important;
	min-height: 55px !important;
}

/*
 * When the sticky header is enabled, the Customizer CSS switches #masthead
 * to position:fixed so its 95px -> 55px animation cannot reflow the page.
 * This spacer preserves the header's original 95px place in the document
 * only at the top of the page, eliminating the little page "shake" while
 * the fixed header visually shrinks.
 */
.mm-header-flow-spacer {
	display: none;
	width: 100%;
	height: 95px;
	min-height: 95px;
	pointer-events: none;
}

/* Make the Elementor wrapper chain follow #masthead instead of preserving an
 * intrinsic height from the saved template. */
.mm-header-template,
.mm-header-template__content,
.mm-header-template__content > .elementor {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: visible;
	transition: height var(--mm-header-sticky-transition, 650ms) ease-in-out;
}

/* Force the first Elementor section/container—the element that normally owns
 * the header background—to follow the 95px -> 55px wrapper height. */
.mm-header-template__content > .elementor > .e-con:first-child,
.mm-header-template__content > .elementor > .elementor-section:first-child,
.mm-header-template__content > .elementor > .elementor-section-wrap,
.mm-header-template__content > .elementor > .elementor-section-wrap > .elementor-section:first-child {
	height: 100% !important;
	min-height: 0 !important;
	box-sizing: border-box;
	transition:
		height var(--mm-header-sticky-transition, 650ms) ease-in-out,
		min-height var(--mm-header-sticky-transition, 650ms) ease-in-out,
		padding-top var(--mm-header-sticky-transition, 650ms) ease-in-out,
		padding-bottom var(--mm-header-sticky-transition, 650ms) ease-in-out;
}

/* ==========================================================
   HEADER CONTENT SHRINKING
========================================================= */

/*
 * The theme owns the 95px -> 55px outer-header transition. These rules also
 * reproduce the smooth content shrink that was previously embedded in the
 * Elementor header HTML.
 *
 * Current-site automatic targets:
 *   - Elementor logo widget d7a9c6f
 *   - #primary-menu dog-tag navigation
 *
 * Reusable Elementor classes are supported too:
 *   - mm-header-logo  (add to any replacement/alternate logo widget)
 *   - mm-header-menu  (add to any replacement/alternate menu wrapper)
 */

.mm-site-header {
	--mm-header-content-transition: var(--mm-header-sticky-transition, 650ms);
	--mm-header-content-ease: ease-in-out;
}

/* Let the Elementor background container ease its padding while the theme
 * changes the outer height. */
.mm-site-header .mm-header-template__content > .elementor > .e-con:first-child,
.mm-site-header .mm-header-template__content > .elementor > .elementor-section:first-child,
.mm-site-header .mm-header-template__content > .elementor > .elementor-section-wrap > .elementor-section:first-child {
	transition:
		height var(--mm-header-content-transition) var(--mm-header-content-ease),
		min-height var(--mm-header-content-transition) var(--mm-header-content-ease),
		padding-top var(--mm-header-content-transition) var(--mm-header-content-ease),
		padding-bottom var(--mm-header-content-transition) var(--mm-header-content-ease);
}

.mm-site-header.is-scrolled .mm-header-template__content > .elementor > .e-con:first-child,
.mm-site-header.is-scrolled .mm-header-template__content > .elementor > .elementor-section:first-child,
.mm-site-header.is-scrolled .mm-header-template__content > .elementor > .elementor-section-wrap > .elementor-section:first-child {
	padding-top: 3px !important;
	padding-bottom: 3px !important;
}

/* -------------------------
   LOGO + DOG TAGS
   Same rules at every viewport width.
------------------------- */
.mm-site-header .elementor-element-d7a9c6f,
.mm-site-header .mm-header-logo {
	width: 500px;
	height: 100px;
	margin-bottom: -14px;
	overflow: visible;
	transition:
		width var(--mm-header-content-transition) var(--mm-header-content-ease),
		height var(--mm-header-content-transition) var(--mm-header-content-ease),
		margin-bottom var(--mm-header-content-transition) var(--mm-header-content-ease);
}

.mm-site-header .elementor-element-d7a9c6f > .elementor-widget-container,
.mm-site-header .mm-header-logo > .elementor-widget-container {
	width: 500px;
	height: 100px;
	margin-bottom: -13px !important;
	overflow: visible;
	transition:
		width var(--mm-header-content-transition) var(--mm-header-content-ease),
		height var(--mm-header-content-transition) var(--mm-header-content-ease),
		margin-bottom var(--mm-header-content-transition) var(--mm-header-content-ease);
}

.mm-site-header .elementor-element-d7a9c6f a,
.mm-site-header .mm-header-logo a {
	display: block;
	width: 500px;
	height: 100px;
	transition:
		width var(--mm-header-content-transition) var(--mm-header-content-ease),
		height var(--mm-header-content-transition) var(--mm-header-content-ease);
}

.mm-site-header .elementor-element-d7a9c6f img,
.mm-site-header .mm-header-logo img {
	display: block;
	width: 500px !important;
	height: 100px !important;
	max-width: none !important;
	position: relative;
	top: 0;
	transform: translateY(7px) scale(1);
	transform-origin: left center;
	transition: transform var(--mm-header-content-transition) var(--mm-header-content-ease);
	will-change: transform;
	backface-visibility: hidden;
}

.mm-site-header.is-scrolled .elementor-element-d7a9c6f,
.mm-site-header.is-scrolled .mm-header-logo {
	width: 300px;
	height: 55px;
	margin-bottom: 0;
}

.mm-site-header.is-scrolled .elementor-element-d7a9c6f > .elementor-widget-container,
.mm-site-header.is-scrolled .mm-header-logo > .elementor-widget-container {
	width: 300px;
	height: 55px;
	margin-bottom: -10px !important;
}

.mm-site-header.is-scrolled .elementor-element-d7a9c6f a,
.mm-site-header.is-scrolled .mm-header-logo a {
	width: 300px;
	height: 55px;
}

.mm-site-header.is-scrolled .elementor-element-d7a9c6f img,
.mm-site-header.is-scrolled .mm-header-logo img {
	transform: translateY(-17px) scale(.60);
}

.mm-site-header #primary-menu,
.mm-site-header .mm-header-menu {
	transform: scale(1);
	transform-origin: right center;
	transition: transform var(--mm-header-content-transition) var(--mm-header-content-ease);
	will-change: transform;
	backface-visibility: hidden;
}

.mm-site-header.is-scrolled #primary-menu,
.mm-site-header.is-scrolled .mm-header-menu {
	transform: scale(.80);
}

/* Optional helper class for any Elementor item that should visually shrink
 * with the header. It works at every viewport width. */
.mm-site-header .mm-header-shrink {
	transform: scale(1);
	transition: transform var(--mm-header-sticky-transition, 650ms) ease-in-out;
	will-change: transform;
	backface-visibility: hidden;
}

.mm-site-header.is-scrolled .mm-header-shrink {
	transform: scale(.78);
}

.mm-site-header .mm-header-shrink--left {
	transform-origin: left center;
}

.mm-site-header .mm-header-shrink--center {
	transform-origin: center center;
}

.mm-site-header .mm-header-shrink--right {
	transform-origin: right center;
}

/* The mobile hamburger is theme-owned behavior, so let it compact along with
 * the 55px sticky header automatically. */
.mm-site-header .mm-mobile-menu-toggle {
	transition:
		transform var(--mm-header-sticky-transition, 650ms) ease-in-out,
		background-color .2s ease,
		border-color .2s ease;
	transform-origin: right center;
}

.mm-site-header.is-scrolled .mm-mobile-menu-toggle {
	transform: scale(.64);
}

.mm-header-fallback {
	display: flex;
	height: 100%;
	min-height: 0;
	padding: 12px 20px;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: var(--e-global-color-1e9e8dc, #E9E0CD);
	color: var(--e-global-color-text, #171717);
	text-align: center;
}

.mm-header-fallback a {
	font-family: var(--mm-display-font);
	font-size: 28px;
	text-decoration: none;
}

.mm-header-fallback span {
	font-size: 13px;
}

/* ==========================================================
   MOBILE POPOUT MENU
========================================================== */

/*
 * Keep the existing panel position, open/close animation and close button.
 * This section only controls the menu's appearance.
 */


/* ----------------------------------------------------------
   PANEL / WRAPPERS
---------------------------------------------------------- */
.mm-mobile-menu-search {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 10px 16px;
	background-color: var(--mm-surface);
}

.mm-mobile-menu-search .asl_w {
	width: 100% !important;
	max-width: none !important;
}
.mm-mobile-menu-panel,
.mm-mobile-menu-panel > .elementor-widget-container,
.mm-mobile-menu-panel .elementor-shortcode,
.mm-mobile-menu-panel .mm-elementor-menu,
.mm-mobile-menu-panel .mm-elementor-menu--mobile {
	box-sizing: border-box;
	background-color: var(--mm-surface) !important;
}


/* ----------------------------------------------------------
   MENU RESET
---------------------------------------------------------- */

.mm-mobile-menu-panel ul {
	display: block !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;

	background: transparent !important;
}


/*
 * Completely reset the old row styling.
 * This removes the horizontal lines that were extending
 * from the text toward the right side of the panel.
 */

.mm-mobile-menu-panel li {
	display: block !important;

	position: relative !important;

	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	float: none !important;

	overflow: visible !important;

	border: 0 !important;
	background: transparent !important;
}


/* Kill any old decorative leader-line/pseudo-element styling. */

.mm-mobile-menu-panel li::before,
.mm-mobile-menu-panel li::after,
.mm-mobile-menu-panel li > a::before,
.mm-mobile-menu-panel li > a::after {
	content: none !important;
	display: none !important;
}


/* ----------------------------------------------------------
   TOP-LEVEL ROWS
---------------------------------------------------------- */

.mm-mobile-menu-panel > .elementor-widget-container
	.mm-elementor-menu > ul > li,

.mm-mobile-menu-panel
	.mm-elementor-menu--mobile > ul > li,

.mm-mobile-menu-panel
	#mobile-menu > li {
	border-bottom: 1px solid var(--mm-border) !important;
}


.mm-mobile-menu-panel
	#mobile-menu > li:last-child,

.mm-mobile-menu-panel
	.mm-elementor-menu > ul > li:last-child,

.mm-mobile-menu-panel
	.mm-elementor-menu--mobile > ul > li:last-child {
	border-bottom: 0 !important;
}


/* ----------------------------------------------------------
   ALL LINKS — BASIC RESET
---------------------------------------------------------- */

.mm-mobile-menu-panel li > a,
.mm-mobile-menu-panel li > a:visited {
	display: block !important;

	position: relative !important;

	box-sizing: border-box !important;

	width: 100% !important;
	max-width: none !important;

	height: auto !important;
	min-height: 0 !important;

	margin: 0 !important;

	overflow: visible !important;

	background-image: none !important;

	text-align: left !important;
	text-decoration: none !important;

	white-space: normal !important;

	transform: none !important;
}


/* ----------------------------------------------------------
   TOP-LEVEL LINKS
---------------------------------------------------------- */

.mm-mobile-menu-panel > .elementor-widget-container
	.mm-elementor-menu > ul > li > a,

.mm-mobile-menu-panel
	.mm-elementor-menu--mobile > ul > li > a,

.mm-mobile-menu-panel
	#mobile-menu > li > a {
	padding: 14px 10px !important;

	background-color: var(--mm-surface) !important;

	color: var(--mm-text) !important;

	font-family: var(--mm-heading-font);
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;

	text-transform: uppercase !important;

	transition:
		background-color .18s ease,
		color .18s ease,
		padding-left .18s ease;
}


/* Hover / keyboard focus */

.mm-mobile-menu-panel
	.mm-elementor-menu > ul > li > a:hover,

.mm-mobile-menu-panel
	.mm-elementor-menu > ul > li > a:focus-visible,

.mm-mobile-menu-panel
	.mm-elementor-menu--mobile > ul > li > a:hover,

.mm-mobile-menu-panel
	.mm-elementor-menu--mobile > ul > li > a:focus-visible,

.mm-mobile-menu-panel
	#mobile-menu > li > a:hover,

.mm-mobile-menu-panel
	#mobile-menu > li > a:focus-visible {
	padding-left: 20px !important;

	background-color: var(--mm-cream) !important;

	color: var(--mm-link) !important;
}
.mm-mobile-menu-panel > .elementor-widget-container .mm-elementor-menu > ul > li.current-menu-item > a, .mm-mobile-menu-panel .mm-elementor-menu--mobile > ul > li.current-menu-item > a, .mm-mobile-menu-panel #mobile-menu > li.current-menu-item > a {
    background-color: var(--mm-cream) !important;
    pointer-events: none;
}


/* ----------------------------------------------------------
   CURRENT PAGE
---------------------------------------------------------- */

.mm-mobile-menu-panel
	.current-menu-item > a,

.mm-mobile-menu-panel
	.current-menu-ancestor > a {
	background-color: var(--mm-cream) !important;

	color: var(--mm-olive) !important;


}


/* ----------------------------------------------------------
   SUBMENU
---------------------------------------------------------- */

.mm-mobile-menu-panel .sub-menu {
	display: block !important;

	position: static !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	background-color: var(--mm-surface) !important;

	border: 0 !important;

	box-shadow: none !important;

	opacity: 1 !important;
	visibility: visible !important;

	transform: none !important;
}


/* Submenu dividers */

.mm-mobile-menu-panel .sub-menu > li {
	border-top: 1px solid var(--mm-border) !important;
}


/* Submenu links */

.mm-mobile-menu-panel .sub-menu > li > a,
.mm-mobile-menu-panel .sub-menu > li > a:visited {
	padding: 11px 20px 11px 20px !important;

	background-color: var(--mm-surface) !important;

	color: var(--mm-text) !important;

	font-family: var(--mm-heading-font);
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;

	text-transform: none !important;
}


/* Submenu hover */

.mm-mobile-menu-panel .sub-menu > li > a:hover,
.mm-mobile-menu-panel .sub-menu > li > a:focus-visible {
	padding-left: 43px !important;

	background-color: var(--mm-cream) !important;

	color: var(--mm-link) !important;
}

/* ==========================================================
   NATIVE FOOTER
========================================================= */

.mm-native-footer {
	width: 100%;
	margin-top: 0;
	padding-top: var(--mm-footer-pad-top);
	padding-bottom: var(--mm-footer-pad-bottom);
	background: var(--mm-footer-bg);
	border-top: var(--mm-footer-border-width) var(--mm-footer-border-style) var(--mm-footer-border-color);
	box-shadow: var(--mm-footer-shadow);
	color: var(--mm-footer-text);
	text-align: var(--mm-footer-align);
}

.mm-native-footer__inner {
	display: flex;
	width: min(calc(100% - 32px), var(--mm-footer-max-width));
	margin-inline: auto;
	flex-direction: column;
	gap: var(--mm-footer-row-gap);
}

.mm-native-footer__navigation,
.mm-native-footer__copyright {
	margin: 0;
	padding: 0;
}

.mm-native-footer__menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: var(--mm-footer-justify);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--mm-footer-menu-font-size);
}

.mm-native-footer__menu li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.mm-native-footer__menu li + li::before {
	margin-inline: 7px;
	color: var(--mm-footer-text);
}

.mm-native-footer a,
.mm-native-footer a:visited {
	color: var(--mm-footer-link);
	text-decoration: none;
}

.mm-native-footer a:hover,
.mm-native-footer a:focus-visible {
	color: var(--mm-footer-link-hover);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mm-native-footer__copyright {
	font-size: var(--mm-footer-copy-font-size);
	line-height: 1.45;
}

.mm-native-footer__copyright > * + * {
	margin-left: .25em;
}

@media (max-width: 480px) {
	.mm-native-footer__inner {
		width: min(calc(100% - 20px), var(--mm-footer-max-width));
	}
}


/* ==========================================================
   WHITE CONTENT + SIDEBAR PAGE TEMPLATE
========================================================= */

/*
 * Select "White Content + Sidebar" in the Page Template setting when a page
 * needs a white content panel beside the site's normal Main Sidebar.
 */
.mm-white-sidebar-layout {
	align-items: start;
}

body .mm-white-sidebar-content.site-main {
	min-width: 0;
	margin: 0;
	padding: clamp(20px, 3vw, 32px);
	background: var(--mm-surface);
	border: 1px solid var(--mm-border);
	border-radius: 12px;
	box-shadow: var(--mm-shadow);
}

.mm-white-sidebar-content .entry-content {
	margin: 0;
}

.mm-white-sidebar-content .entry-content > :first-child {
	margin-top: 0;
}

.mm-white-sidebar-content .entry-content > :last-child {
	margin-bottom: 0;
}

.mm-white-sidebar-layout.mm-white-sidebar-layout--no-sidebar {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 950px) {
	body .mm-white-sidebar-content.site-main {
		padding: clamp(18px, 4vw, 28px);
	}
}

@media (max-width: 480px) {
	body .mm-white-sidebar-content.site-main {
		padding: 18px;
		border-radius: 10px;
	}
}


/* ==========================================================
   WHITE CONTENT - NO SIDEBAR PAGE TEMPLATE
========================================================= */

/*
 * Select "White Content - No Sidebar" when a page needs one centered
 * white content panel and no sidebar.
 */
.mm-white-content-layout {
	display: block;
}

body .mm-white-content-panel.site-main {
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: clamp(20px, 3vw, 32px);
	background: var(--mm-surface);
	border: 1px solid var(--mm-border);
	border-radius: 12px;
	box-shadow: var(--mm-shadow);
}

.mm-white-content-panel .entry-content {
	margin: 0;
}

.mm-white-content-panel .entry-content > :first-child {
	margin-top: 0;
}

.mm-white-content-panel .entry-content > :last-child {
	margin-bottom: 0;
}

@media (max-width: 950px) {
	body .mm-white-content-panel.site-main {
		padding: clamp(18px, 4vw, 28px);
	}
}

@media (max-width: 480px) {
	body .mm-white-content-panel.site-main {
		padding: 18px;
		border-radius: 10px;
	}
}