/* ==========================================================================
   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; }
	/* The arrow opens AND closes the list (assets/js/mobile-menu.js). On a
	   small screen it becomes a finger-sized round button, so it is easy to
	   see and easy to tap again to close. The circle is the caret box
	   itself; the arrow inside it is drawn by the ::after, because a
	   negative z-index child would paint over the caret's own borders. */
	.primary-menu > li.has-dropdown > .nav-link .dropdown-caret,
	.primary-menu > li.has-dropdown.is-open > .nav-link .dropdown-caret {
		position: relative;
		width: 44px;
		height: 44px;
		margin: 0;
		border: 1px solid var(--color-border);
		border-radius: 50%;
		background: var(--color-surface);
		transform: none;
		transition: background var(--transition), border-color var(--transition);
	}
	.primary-menu > li.has-dropdown > .nav-link .dropdown-caret::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--color-primary);
		border-bottom: 2px solid var(--color-primary);
		transform: translate(-50%, -70%) rotate(45deg);
		transition: transform var(--transition);
	}
	/* Open: the button turns green and the arrow points up, so it is clear
	   that tapping it again closes the list. */
	.primary-menu > li.has-dropdown.is-open > .nav-link .dropdown-caret {
		background: rgba(47, 93, 80, 0.12);
		border-color: var(--color-primary);
	}
	.primary-menu > li.has-dropdown.is-open > .nav-link .dropdown-caret::after {
		transform: translate(-50%, -30%) rotate(225deg);
	}
	.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; }
	/* Only the arrow decides whether the list is open here. ":focus-within"
	   is deliberately NOT used on a small screen: the tapped row keeps the
	   focus afterwards, which held the list open and made the second tap
	   (closing it by hand) look as if nothing happened. */
	.has-dropdown.is-open > .sub-menu { display: block; }
	.has-dropdown > .nav-link { cursor: pointer; }
}