/* ==========================================================================
   Tablet & small-desktop breakpoints (<=1180px, <=1024px for content
   layout), plus the off-canvas mobile navigation panel that takes over
   from the desktop menu at <=1240px.

   NOTE on the nav breakpoint: the single-line desktop menu
   (assets/css/layout/header-navigation.css) holds 10 top-level items
   (Home + 6 category dropdowns + Blog + the "Extra Options" dropdown + the
   Booking Form button). An earlier version of
   this theme used 1440px here because, with the category labels at full
   length, the row didn't reliably fit on one line any narrower than
   that — which meant almost every real laptop screen (1280–1440px is
   the most common range, and Windows display scaling of 125–150% on a
   1920px monitor lands in that same effective range) got the mobile
   off-canvas menu instead of the desktop nav, even though it's a
   perfectly normal desktop/laptop width. Two changes closed that gap:
   the three longest category labels are now shortened for the
   top-level bar only (see inc/nav-walker.php), and the nav's fluid
   sizing (header-navigation.css) was tightened further. That's enough
   room to lower this breakpoint to 1300px. Going lower than that risks
   the same silent header overflow the 1440px value was originally
   chosen to avoid — if a real device still shows a cramped/overflowing
   desktop nav somewhere in the 1024–1300px range, raise this number
   (and the matching one in assets/js/mobile-menu.js) rather than
   fighting it with even smaller fonts.
   ========================================================================== */

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1180px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
	.footer-grid .footer-col:last-child { grid-column: 1 / -1; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.two-col, .two-col.reverse { grid-template-columns: 1fr; gap: 40px; }
	.two-col.reverse .two-col-media { order: -1; }
	/* The badge still sits 40px over the photo, but "position: relative"
	   + z-index keep it ON TOP — as a static box the photo covered its top
	   edge and the big number (e.g. "6") was cut off on phones. */
	.floating-badge { position: relative; z-index: 2; margin-top: -40px; margin-left: 20px; display: inline-block; }

	.cta-banner { padding: 44px; flex-direction: column; text-align: center; }
	.cta-banner p { max-width: 100%; }
	.cta-actions { justify-content: center; }

	.footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
	.footer-grid .footer-col:first-child { grid-column: 1 / -1; }
}

/* Off-canvas mobile menu, shared from 1240px down — see note above.
   (It was 1400px, which sent common laptops — 1280 / 1366px, or 1920px
   screens at 125–150% Windows scaling — to the phone menu. From 1241 to
   1400px the full menu now uses the tighter sizes in
   assets/css/responsive/laptop-nav.css, which fit it in about 880px.
   Keep the matching number in assets/js/mobile-menu.js the same.)
   NOTE: this used to be split across two separate @media(max-width:1440px)
   blocks, one setting .primary-navigation to "display:none" and a later
   one overriding it back to "display:block" for the off-canvas panel.
   Same-specificity rules cascade by source order so the second block won,
   but a minifier/build step or future edit that reordered the two blocks
   could silently flip the outcome back to "none" — i.e. the nav
   permanently hidden with no obvious cause. Merged into one block so
   there is exactly one, unambiguous rule for each property. */
@media (max-width: 1240px) {
	.menu-toggle { display: flex; }
	.primary-navigation {
		display: block;
		position: fixed;
		top: var(--header-h);
		left: 0;
		right: 0;
		/* Deliberately NOT using the "inset: header-h 0 0 0" shorthand here.
		   .site-header has backdrop-filter (for the glassy blur behind the
		   sticky header), and a backdrop-filter ancestor becomes the
		   containing block for position:fixed descendants — same as
		   transform/filter/perspective/contain would. That means
		   "bottom: 0" resolves against .site-header's own ~header-height
		   box instead of the viewport, collapsing this panel down to a
		   sliver. Sizing with 100vh sidesteps it since vh always measures
		   the real viewport regardless of containing block. */
		height: calc(100vh - var(--header-h));
		height: calc(100dvh - var(--header-h));
		background: var(--color-bg);
		padding: 10px 0 40px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 320ms ease;
		z-index: 998;
	}
	.primary-navigation.is-open { transform: translateX(0); }
	.primary-menu { flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px; }
	.primary-menu > li { border-bottom: 1px solid var(--color-border); }
	.primary-menu .nav-link { padding: 16px 8px; border-radius: 0; justify-content: space-between; font-size: 1rem; }
	.primary-menu > li > .nav-link:hover { background: transparent; color: var(--color-primary); }
	.primary-menu > li.current-menu-item > .nav-link,
	.primary-menu > li.current-menu-parent > .nav-link { background: transparent; color: var(--color-primary); }
	/* Contact CTA becomes a full-width pill at the bottom of the menu. */
	.primary-menu > li.menu-item-cta { border-bottom: 0; margin: 20px 0 0; }
	.primary-menu > li.menu-item-cta > .nav-link { justify-content: center; padding: 15px 24px; border-radius: 999px; }

	.sub-menu {
		position: static;
		box-shadow: none;
		border: none;
		border-radius: 0;
		background: var(--color-bg-alt);
		opacity: 1; visibility: visible; transform: none;
		display: none;
		min-width: 0;
		margin: 0 0 6px;
		padding: 6px;
	}
	.sub-menu::before { display: none; }
	.has-dropdown.is-open > .sub-menu,
	.has-dropdown:focus-within > .sub-menu { display: block; }
	.has-dropdown > .nav-link { cursor: pointer; }
}