/* Robin Fox Knox — mobile responsiveness layer
 * Elementor containers handle most responsive flow (flex-wrap + % widths) automatically, but
 * a few things need explicit help: the header nav (which has no built-in Elementor Pro nav-menu
 * widget available), oversized desktop headings, and section padding that's too heavy for phones.
 */

/* ---------- Header: hide hamburger on desktop ---------- */
.elementor-element-c37d761 { display: none !important; }

@media (max-width: 900px) {
	/* Header: swap desktop link row for a hamburger + slide-down panel */
	.elementor-element-15c137c { flex-wrap: wrap !important; row-gap: 0 !important; }
	.elementor-element-db50b70 {
		display: none;
		width: 100% !important;
		flex-basis: 100% !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0 !important;
		max-height: 0;
		overflow: hidden;
		transition: max-height .3s ease;
	}
	.elementor-element-db50b70.rfk-nav-open {
		display: flex;
		max-height: 600px;
		padding-top: 10px;
		border-top: 1px solid #E4DBC9;
		margin-top: 14px;
	}
	.elementor-element-db50b70 .elementor-widget-button { width: 100%; }
	.elementor-element-db50b70 .elementor-widget-button a.elementor-button {
		width: 100%; justify-content: flex-start !important; padding: 14px 4px !important;
		border-bottom: 1px solid #E4DBC9; border-radius: 0 !important;
	}
	.elementor-element-c37d761 { display: block !important; }
	.elementor-element-c37d761 a.elementor-button { padding: 6px !important; }

	/* Rein in the largest desktop headings so they don't overflow/wrap awkwardly on phones */
	.elementor-widget-heading h1.elementor-heading-title { font-size: 34px !important; line-height: 1.12 !important; }
	.elementor-widget-heading h2.elementor-heading-title { font-size: 26px !important; line-height: 1.15 !important; }

	/* Reduce the heaviest section padding on phones */
	.e-con { padding-left: 20px !important; padding-right: 20px !important; }
}

@media (max-width: 600px) {
	.elementor-widget-heading h1.elementor-heading-title { font-size: 28px !important; }
	.elementor-widget-heading h2.elementor-heading-title { font-size: 22px !important; }
}