/* LNTA Mobile — tap targets, minimum text size, overflow guard.

   Audited at 375px across the homepage, Vision & Mission, Destinations,
   16 Tribal Masks, Tourism Investment and the TDF page. The good news from
   that audit: **nothing overflows** and no embed, image or table breaks the
   viewport, so the site is structurally sound on a phone.

   What it did find, on every page, was links too small to hit reliably.
   Measured heights: the "Language" toggle 15px, "Read More" on a news card
   17px, breadcrumb links 20px, footer menu links 21px, the mask name
   headings 27px, "Learn More" on the audience cards 36px. The commonly
   used minimum is 44px, which is roughly the pad of an adult fingertip.

   Everything here is confined to screens 991px and under, so the desktop
   layout is untouched. Padding does the work rather than height, so the
   text keeps its size and only the hit area grows. */

@media (max-width: 991px) {

	/* ---------- The slide-out menu ---------- */

	/* The logo block was 337px of an 844px screen — 40% of the phone gone
	   before the first menu item, so the menu opened with Home near the
	   middle of the screen and most of the site below the fold. The logo
	   itself was rendered at the full 267px width of the panel. */
	.th-menu-area .mobile-logo {
		padding: 22px 0 18px !important;
		background-color: #ffffff !important;
		border-bottom: 1px solid #e6e8de;
	}

	.th-menu-area .mobile-logo img {
		width: 116px !important;
		height: auto !important;
	}

	/* The close button sat 14px outside the panel, over the dark overlay,
	   at 33px square and in the theme demo's slate blue. */
	.th-menu-wrapper .th-menu-area > .th-menu-toggle {
		top: 14px !important;
		right: 14px !important;
		left: auto !important;
		width: 44px !important;
		height: 44px !important;
		background-color: #225321 !important;
		border-radius: 10px;
		color: #ffffff !important;
	}

	/* Links were the same demo slate blue as the close button. */
	.th-mobile-menu ul li a {
		color: #14181f !important;
		font-weight: 600;
	}

	.th-mobile-menu > ul > li > a {
		border-bottom: 1px solid #eef0e8 !important;
	}

	.th-mobile-menu ul li.active > a,
	.th-mobile-menu ul li a:hover {
		color: #225321 !important;
	}

	/* The submenu arrow is a Font Awesome glyph inside the link, so the
	   whole 46px row toggles it — it only needed the brand colour. */
	.th-mobile-menu ul li a::after {
		color: #225321 !important;
	}

	/* Second-level items, indented and a shade lighter so the hierarchy
	   reads at a glance. */
	.th-mobile-menu ul .sub-menu li a {
		padding-left: 16px !important;
		font-weight: 500;
		color: #4b5563 !important;
	}

	/* ---------- Header and breadcrumb ---------- */

	.dropdown-link > a.dropdown-toggle {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0 8px;
	}

	.breadcumb-menu li a {
		display: inline-block;
		padding: 12px 2px;
	}

	/* ---------- Links that act as buttons ---------- */

	.th-btn {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}

	/* "Read More" is stripped back to a plain text link on the news cards,
	   so it keeps no button padding of its own. */
	.lnta-news-grid .th-btn,
	.blog-box_content .th-btn {
		justify-content: flex-start;
	}

	.lnta-wws-learnmore {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* The date under each news card is a link too. */
	.blog-meta a,
	.lnta-news-grid .blog-meta a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* ---------- Headings that are links ---------- */

	/* The sixteen mask names, and any other heading whose text is the link. */
	.elementor-heading-title > a,
	.box-title > a {
		display: inline-block;
		padding: 12px 0;
	}

	/* ---------- Footer ---------- */

	/* `padding: 12px 0` here wiped the theme's 20px of LEFT padding, which
	   is what makes room for the chevron — the chevron is an absolutely
	   positioned ::before at left 0, so with the room gone it landed on top
	   of the text, and with no vertical centring it sat above it. Only the
	   vertical padding is set now, and the chevron is centred against the
	   taller row. */
	footer .widget_nav_menu ul.menu a,
	footer .menu-all-pages-container ul.menu a {
		display: inline-block;
		padding-block: 12px;
	}

	footer .widget_nav_menu ul.menu a::before,
	footer .menu-all-pages-container ul.menu a::before {
		top: 50% !important;
		transform: translateY(-50%);
	}

	/* Phone number and email in the contact column are the two things a
	   visitor on a phone is most likely to want to tap. */
	footer .footer-info a,
	footer .footer-contact a,
	footer a[href^="tel:"],
	footer a[href^="mailto:"] {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* ---------- Contact links inside page copy ---------- */

	/* An email or phone number written into a paragraph is exactly what a
	   visitor on a phone wants to tap. Padding would push the surrounding
	   lines apart, so the hit area is grown with an invisible overlay
	   instead: the text keeps its place and the target becomes 44px. */
	.elementor a[href^="mailto:"],
	.elementor a[href^="tel:"] {
		position: relative;
	}

	.elementor a[href^="mailto:"]::after,
	.elementor a[href^="tel:"]::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 44px;
		transform: translateY(-50%);
	}

	/* ---------- Minimum readable size ---------- */

	/* Nothing below 12px. Named explicitly rather than as a blanket
	   `max(12px, 1em)` across every paragraph and span: `1em` resolves
	   against the PARENT's size, so that formula quietly inflates any
	   small element whose parent is large, rather than raising a floor. */
	.lnta-ul-panel .lnta-ul-panel__eyebrow,
	.lnta-ul-panel .lnta-ul-panel__cap,
	.lnta-ul-sectors .lnta-ul-sectors__eyebrow {
		font-size: 12px !important;
	}

	/* ---------- Justified text ---------- */

	/* Justification without hyphenation needs a long line to work. On a
	   343px column it stretches the spaces instead, opening rivers of white
	   down the paragraph — visible on Tourism Investment, among others.
	   Ranged-left is the readable setting at this width. */
	.elementor p,
	.elementor li,
	.elementor .elementor-widget-text-editor {
		text-align: left;
	}

	/* Headings and anything the page deliberately centres keep their
	   alignment. */
	.elementor .elementor-widget-text-editor[class*="text-align-center"] p,
	.elementor .has-text-align-center,
	.elementor .elementor-align-center p {
		text-align: center;
	}

	/* ---------- Overflow guard ---------- */

	/* Nothing overflows today. This keeps it that way when an editor pastes
	   an embed, a wide image or a table into a page later. */
	.elementor img,
	.elementor iframe,
	.elementor video,
	.elementor table,
	.elementor pre {
		max-width: 100%;
	}

	.elementor table {
		display: block;
		overflow-x: auto;
	}
}

/* Column flex containers that Elementor also set to wrap. See
   assets/js/flexguard.js for why these break and how they are found.
   Outside the media query: the trap applies at any width. */
.elementor .e-con.lnta-nowrap,
.elementor .e-con-inner.lnta-nowrap {
	flex-wrap: nowrap !important;
}