/**
 * Memphis Noticias — Mobile navigation (mn4 "Mobile Navigation Build Guide").
 * Activates ONLY at <=767px (Elementor Mobile tier). Desktop chrome is untouched.
 * Three coordinated pieces off the one shared header: masthead collapse + hamburger drawer
 * (source = nav menu 46) + a fixed bottom tab bar. Live element-IDs stand in for the guide's
 * container classes (those are stripped on this site); the drawer/burger/tab-bar classes render
 * because they live inside HTML output, not Elementor containers.
 */

/* Hidden above the mobile tier (and by default until the breakpoint kicks in). */
#mnburgerw,
.mn-mobnav,
.mn-mobnav__backdrop,
.mn-tabbar { display: none; }

@media ( max-width: 767px ) {

	/* ── 01 · Masthead reflow ───────────────────────────────────────────── */
	.elementor-element-mnnavcel { display: none !important; }   /* desktop nav strip */
	.elementor-element-mnctrce0 { display: none !important; }   /* centered dateline */
	.mn-weather__meta           { display: none !important; }   /* keep just icon + temp */

	.elementor-element-mnmastin {
		display: grid !important;
		grid-template-columns: 1fr auto auto;   /* logo · weather · burger */
		align-items: center;
		gap: 16px !important;
		padding: 12px 20px !important;
	}

	/* Pin the header on mobile so the burger stays reachable and the drawer drops below it. */
	.elementor-element-mnhdrwrp { position: sticky; top: 0; z-index: 50; background: var(--mn-paper, #fff); }
	body.is-menu-open .elementor-element-mnhdrwrp { z-index: 120; }

	/* Reserve space for the fixed tab bar so nothing is hidden + no layout shift. */
	body { padding-bottom: calc( 64px + env( safe-area-inset-bottom, 0px ) ); }

	/* ── 02 · Hamburger (right slot of the masthead) ────────────────────── */
	#mnburgerw { display: flex; align-items: center; justify-content: flex-end; }
	/* Doubled class (0,2,0) beats the kit's ink-button rule, else the burger fills dark. */
	.mn-mast__burger.mn-mast__burger {
		display: inline-flex; align-items: center; justify-content: center;
		width: 44px; height: 44px; padding: 0; margin: 0;
		background: none !important; border: 0; border-radius: 0; box-shadow: none;
		min-width: 0; -webkit-appearance: none; appearance: none;
		cursor: pointer; -webkit-tap-highlight-color: transparent;
	}

	.mn-mast__burger-box { position: relative; width: 28px; height: 18px; }
	.mn-mast__burger-box span {
		position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px;
		background: rgba( 35, 22, 20, .7 );
		transition: transform .22s, opacity .18s, top .22s;
	}
	.mn-mast__burger-box span:nth-child(1) { top: 0; }
	.mn-mast__burger-box span:nth-child(2) { top: 7.5px; }
	.mn-mast__burger-box span:nth-child(3) { top: 15px; }
	body.is-menu-open .mn-mast__burger-box span:nth-child(1) { top: 7.5px; transform: rotate( 45deg ); }
	body.is-menu-open .mn-mast__burger-box span:nth-child(2) { opacity: 0; }
	body.is-menu-open .mn-mast__burger-box span:nth-child(3) { top: 7.5px; transform: rotate( -45deg ); }

	/* ── 02 · Drawer (below header; max-height leaves tab bar — intentional, Build QA 2026-07-22) ── */
	.mn-mobnav {
		display: block;
		position: fixed; top: var( --mn-mobhdr-h, 64px ); left: 0; right: 0;
		width: 100%; max-width: 100%;
		max-height: calc( 100vh - var( --mn-mobhdr-h, 70px ) - 70px );
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		background: var( --mn-paper, #fff ); border-top: 1px solid var( --mn-rule, #DAD6CD );
		box-shadow: 0 24px 30px -16px rgba( 0, 0, 0, .28 );
		opacity: 0; visibility: hidden; transform: translateY( -8px );
		transition: opacity .2s, transform .2s, visibility .2s;
		z-index: 110;
	}
	body.is-menu-open .mn-mobnav { opacity: 1; visibility: visible; transform: translateY( 0 ); }

	.mn-mobnav__list { list-style: none; margin: 0; padding: 0; }
	.mn-mobnav__list li { margin: 0; }
	.mn-mobnav a {
		display: block; padding: 15px 20px;
		font-family: var( --mn-sans ); font-weight: 700; font-size: 13px;
		letter-spacing: .08em; text-transform: uppercase; color: var( --mn-ink );
		text-decoration: none; border-bottom: 1px solid var( --mn-rule, #DAD6CD );
	}
	.mn-mobnav .current-menu-item > a,
/* 	.mn-mobnav .current_page_item > a { box-shadow: inset 4px 0 0 var( --mn-yellow ); } */
	.mn-mobnav a:hover, 
	.mn-mobnav .current_page_item > a { 
		box-shadow: inset 4px 0 0 var( --mn-yellow );
		background: var(--cream-light); 
	}
	/* Dropdown sections (e.g. Recursos, Sobre nosotros) list their children sentence case, indented.
	   A <ul> is display:block by default, so with JS off the sub-menus stay visible and every link
	   remains reachable (progressive enhancement). */
	.mn-mobnav .sub-menu { list-style: none; margin: 0; padding: 0; }
	.mn-mobnav .sub-menu a {
		padding-left: 38px; font-weight: 600; font-size: 15px;
		letter-spacing: .02em; text-transform: none; color: var( --mn-muted );
	}

	/* Accordion: once mn-mobile-nav.js marks the drawer, top-level sections start collapsed and
	   open on tap. Top-level items must not be expanded by default. */
	.mn-mobnav--accordion .menu-item-has-children > .sub-menu { display: none; }
	.mn-mobnav--accordion .menu-item-has-children.is-open > .sub-menu { display: block; }
	/* Caret affordance on parent rows; rotates down when the section is open. */
	.mn-mobnav--accordion .menu-item-has-children > a { position: relative; padding-right: 52px; }
	.mn-mobnav--accordion .menu-item-has-children > a::after {
		content: ""; position: absolute; right: 22px; top: 50%; margin-top: -6px;
		width: 9px; height: 9px;
		border-right: 2px solid var( --mn-muted, #5E524D );
		border-bottom: 2px solid var( --mn-muted, #5E524D );
		transform: rotate( 45deg ); transition: transform .2s;
	}
	.mn-mobnav--accordion .menu-item-has-children.is-open > a::after {
		margin-top: -2px; transform: rotate( -135deg );
	}
	.mn-mobnav__lang { display: flex; justify-content: center; padding: 16px 20px 20px; border-top: 1px solid var( --mn-rule, #DAD6CD ); }

	/* Dim backdrop behind the open drawer; tap to close. */
	.mn-mobnav__backdrop {
		display: block; position: fixed; inset: 0; background: rgba( 20, 12, 8, .38 );
		opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; z-index: 40;
	}
	.mn-mobnav__backdrop.is-open { opacity: 1; visibility: visible; }

	/* ── 03 · Bottom tab bar (fixed, four slots) ───────────────────────── */
	/* z-index above sticky archive toolbars (e.g. events .evatoolbar = 101) so the
	   fixed bottom nav never slides under them on scroll. */
	.mn-tabbar {
		display: grid; grid-template-columns: repeat( 4, 1fr );
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
		background: #fff; border-top: 1px solid var( --mn-rule, #DAD6CD );
		box-shadow: 0 -8px 24px -14px rgba( 0, 0, 0, .3 );
		padding-bottom: env( safe-area-inset-bottom, 0px );
		transition: transform .18s ease;
		will-change: transform;
	}
	/* Auto-hide while scrolling (mn-mobile-nav.js) — slide fully off-screen incl. shadow; back up on stop. */
	.mn-tabbar.is-scroll-hidden { transform: translateY( 120% ); }
	/* Doubled class (0,2,0) so the <button> "Menú" slot isn't filled by the kit ink-button rule. */
	.mn-tabbar__item.mn-tabbar__item {
		position: relative; display: flex; flex-direction: column;
		align-items: center; justify-content: center; gap: 4px;
		min-height: 56px; padding: 8px 4px; margin: 0;
		background: none !important; border: 0; border-radius: 0; box-shadow: none;
		-webkit-appearance: none; appearance: none; cursor: pointer;
		text-decoration: none; color: var( --mn-muted ); font-family: var( --mn-sans );
		-webkit-tap-highlight-color: transparent;
	}

	.mn-tabbar__icon { display: inline-flex; }
	.mn-tabbar__icon i { font-size: 21px; line-height: 1; color: rgba( 35, 22, 20, .64 ); }
	.mn-tabbar__item.is-active .mn-tabbar__icon i { color: var( --mn-ink ); }
	.mn-tabbar__label { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: var( --mn-muted ); }
	.mn-tabbar__item.is-active .mn-tabbar__label { color: var( --mn-ink ); }
	.mn-tabbar__item.is-active::before {
		content: ""; position: absolute; top: 0; left: 50%; transform: translateX( -50% );
		width: 26px; height: 3px; background: var( --mn-yellow ); border-radius: 0 0 3px 3px;
	}
}