/*
 * Tourism Base — custom CSS.
 *
 * Enqueued by functions.php (front end + block editor), versioned by
 * filemtime(). Do NOT move these rules into theme.json's `styles.css` — that
 * compiled global stylesheet caches un-bustably on some hosts and can be
 * frozen as a stale duplicate in the DB Additional CSS. A plain file avoids
 * both problems and updates on every deploy.
 */

/* --- Mobile nav: larger hamburger / close icons --- */
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 43px !important;
	height: 43px !important;
}

/* --- Main menu: ~30% larger nav font on desktop. Targets the items (the
       inline font-size is set per <li>), desktop-only so the mobile overlay
       menu is unaffected. --- */
@media (min-width: 601px) {
	header .wp-block-navigation,
	header .wp-block-navigation .wp-block-navigation-item {
		font-size: 1.3rem !important;
	}
}

/* --- Footer menu: never collapse to a hamburger — show items inline at all
       sizes. Counters the Navigation block's "mobile" overlay so the footer
       nav stays a plain inline menu. Scoped to <footer> so the header nav
       keeps its hamburger. --- */
footer .wp-block-navigation__responsive-container-open,
footer .wp-block-navigation__responsive-container-close {
	display: none !important;
}
footer .wp-block-navigation__responsive-container {
	display: block !important;
	position: static !important;
	width: auto !important;
	height: auto !important;
	background-color: transparent !important;
	visibility: visible !important;
}
footer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close,
footer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
	position: static !important;
}
footer .wp-block-navigation__responsive-container .wp-block-navigation__container {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

/* --- WPBS: hide the standalone picker calendar when flagged --- */
.hide-picker-calendar .wpbs-container {
	display: none !important;
}

/* --- WPBS: fill the column when the form is BELOW the calendar.
       Scoped to bottom-form layouts so it never fights WPBS's own
       side-by-side (form_position="side") layout. --- */
.wpbs-container[data-form_position=bottom] {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* The calendar fills its container in BOTH layouts. For side-by-side
   (form_position="side") the container stays ~50% (WPBS), but the calendar
   now fills that 50% column instead of capping at WPBS's max-width. */
.wpbs-container .wpbs-calendar,
.wpbs-container .wpbs-month,
.wpbs-container .wpbs-month table,
.wpbs-container .wpbs-calendar table {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

/* --- Header: scale logo / site title down on mobile --- */
@media (max-width: 600px) {
	.wp-block-site-logo,
	.wp-block-site-title {
		transform: scale(0.6);
		transform-origin: left center;
	}
}

/* --- Booking #book section: default side gutters from the root padding --- */
#book,
#Book {
	padding-left: var(--wp--style--root--padding-left) !important;
	padding-right: var(--wp--style--root--padding-right) !important;
}

/* --- Responsive Google Maps embeds: 4:3, square on mobile --- */
iframe[src*="google.com/maps"] {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3 !important;
}
@media (max-width: 600px) {
	iframe[src*="google.com/maps"] {
		aspect-ratio: 1 / 1 !important;
	}
}

/* --- [booking_tabs] CSS-only day/evening toggle --- */
.tb-tabs__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.tb-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}
.tb-tabs__tab {
	cursor: pointer;
	padding: 0.6rem 1.4rem;
	border-radius: 6px;
	background: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--foreground);
	font-weight: 600;
}
.tb-tabs__panel {
	display: none;
}
.tb-tabs__radio:nth-of-type(1):checked ~ .tb-tabs__panel--1,
.tb-tabs__radio:nth-of-type(2):checked ~ .tb-tabs__panel--2 {
	display: block;
}
.tb-tabs__radio:nth-of-type(1):checked ~ .tb-tabs__nav .tb-tabs__tab:nth-child(1),
.tb-tabs__radio:nth-of-type(2):checked ~ .tb-tabs__nav .tb-tabs__tab:nth-child(2) {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}
.tb-tabs__radio:nth-of-type(1):focus-visible ~ .tb-tabs__nav .tb-tabs__tab:nth-child(1),
.tb-tabs__radio:nth-of-type(2):focus-visible ~ .tb-tabs__nav .tb-tabs__tab:nth-child(2) {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* --- Booking #book section on mobile: full-bleed band, but keep side gutters
       so the calendar/form don't touch the screen edges. --- */
@media (max-width: 600px) {
	#book,
	#Book {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: var(--wp--style--root--padding-left) !important;
		padding-right: var(--wp--style--root--padding-right) !important;
	}
}

/* --- Utility: `tb-bleed-mobile` — full-bleed band on mobile with the site's
       side gutters kept (so content isn't edge-to-edge). Add this class to a
       section/group via the block's Advanced -> Additional CSS class(es).
       Matches the #book booking band, so tagged sections look consistent. --- */
@media (max-width: 600px) {
	.tb-bleed-mobile {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: var(--wp--style--root--padding-left) !important;
		padding-right: var(--wp--style--root--padding-right) !important;
	}
}

/* --- Contact Form 7: make fields fill their container.
       CF7 inputs default to browser widths and sit inside inline wrap spans,
       so they look narrow in a wide column. Make the wrap block-level and the
       text-like controls 100% wide (submit/checkbox/radio left alone). --- */
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}
.wpcf7-form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	box-sizing: border-box;
}

/* Match the booking (WPBS) form: bold field labels and taller, bordered
   inputs so the two forms read consistently. */
.wpcf7-form label {
	font-weight: 700;
}
.wpcf7-form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.wpcf7-form textarea,
.wpcf7-form select {
	font-weight: 400;
	font-size: 16px;
	margin-top: 0.35rem;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 2px;
}
/* Single-line fields: fixed 39px height, matching the WPBS booking fields. */
.wpcf7-form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.wpcf7-form select {
	height: 39px;
	line-height: 39px;
	padding: 0 14px;
}
/* Textarea is multi-line, so pad vertically instead of a fixed height. */
.wpcf7-form textarea {
	padding: 0.65rem 14px;
}
/* Submit button: match the WPBS booking button. */
.wpcf7-form input[type=submit] {
	width: auto;
	padding: 10px 15px;
	margin: 0;
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: #fff;
	background-color: #aaa;
	border: none;
	box-shadow: none;
	border-radius: 2px;
	appearance: none;
	box-sizing: border-box;
	cursor: pointer;
	transition: all 0.2s ease;
}
.wpcf7-form input[type=submit]:hover {
	background-color: #999;
}