/*
Theme Name: OSAV Blockbase Child
Theme URI: 
Author: Neil Paterson
Author URI: 
Description: OSAV Blockbase Child
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: blockbase
Text Domain: osav-blockbase-child
Tags: 
*/

/* =========================================================
   STEP 1: RESPONSIVE SITE HEADER AND NAVIGATION
   ========================================================= */

@media (max-width: 960px) {
	/* Keep the primary actions on one compact row. */
	.site-header.header-phone {
		display: grid !important;
		grid-template-columns: auto minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		padding: 8px 16px !important;
	}

	.site-header.header-phone .wp-block-site-logo {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		margin: 0 !important;
	}

	.site-header.header-phone .wp-block-site-logo img {
		width: clamp(112px, 17vw, 160px) !important;
		height: auto !important;
	}

	.site-header.header-phone .header-phone-container {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		margin: 0 !important;
	}

	.site-header.header-phone .header-phone-link {
		gap: 6px !important;
		padding: 8px 10px !important;
	}

	.site-header.header-phone .wp-block-buttons {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin: 0 !important;
		padding: 0 !important;
	}

	.site-header.header-phone .wp-block-button__link {
		padding: 10px 14px !important;
		font-size: 15px !important;
		white-space: nowrap;
	}

	/* Use the compact navigation at tablet portrait sizes too. */
	.site-header:not(.header-phone) {
		display: grid !important;
		grid-template-columns: auto minmax(180px, 300px);
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 6px 16px !important;
	}

	.site-header:not(.header-phone) .wp-block-navigation {
		width: auto !important;
		min-width: 44px;
		margin: 0 !important;
	}

	.site-header:not(.header-phone) .wp-block-navigation__responsive-container-open {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		color: inherit;
	}

	.site-header:not(.header-phone) .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.site-header:not(.header-phone) .header-search {
		width: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	.site-header:not(.header-phone) .wp-block-search__inside-wrapper {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 6px;
		width: 100% !important;
	}

	.site-header:not(.header-phone) .wp-block-search__input,
	.site-header:not(.header-phone) .wp-block-search__button {
		min-height: 40px;
		box-sizing: border-box;
	}

	.site-header:not(.header-phone) .wp-block-search__input {
		min-width: 0 !important;
		width: 100% !important;
		padding: 8px 10px !important;
		font-size: 16px !important;
	}

	.site-header:not(.header-phone) .wp-block-search__button {
		margin: 0 !important;
		padding: 8px 12px !important;
		font-size: 15px !important;
		white-space: nowrap;
	}

	/* Make the overlay predictable, scrollable and touch friendly. */
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
		position: fixed;
		inset: 0;
		z-index: 100000;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		width: 100%;
		max-width: none;
		min-height: 100%;
		box-sizing: border-box;
		padding: 70px 24px 32px;
	}

	.site-header .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: 14px;
		right: 14px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
	}

	.site-header .wp-block-navigation__responsive-container-content,
	.site-header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
		width: 100%;
		align-items: stretch !important;
		gap: 0 !important;
		padding-top: 0 !important;
		text-align: left;
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		width: 100%;
		align-items: stretch !important;
		text-align: left;
	}

	.site-header .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 44px;
		box-sizing: border-box;
		padding: 10px 0 !important;
		font-size: 17px;
		line-height: 1.35;
		text-align: left;
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
		display: flex !important;
		position: static !important;
		width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box;
		gap: 0 !important;
		padding: 0 0 0 18px !important;
		border: 0 !important;
		border-left: 2px solid rgba(60, 219, 192, 0.4) !important;
		background: transparent !important;
	}

	.site-header .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon {
		display: none !important;
	}
}

@media (max-width: 480px) {
	.site-header.header-phone {
		grid-template-columns: 96px minmax(0, 1fr) auto;
		gap: 6px;
		padding: 7px 10px !important;
	}

	.site-header.header-phone .wp-block-site-logo img {
		width: 96px !important;
	}

	.site-header.header-phone .header-phone-container {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	.site-header.header-phone .header-phone-link {
		max-width: 100% !important;
		gap: 4px !important;
		padding: 8px 0 !important;
	}

	.site-header.header-phone .phone-text {
		font-size: 0 !important;
	}

	.site-header.header-phone .phone-text b {
		font-size: 12.5px !important;
	}

	.site-header.header-phone .wp-block-button__link {
		padding: 9px 8px !important;
		font-size: 13px !important;
		border-radius: 10px !important;
	}

	.site-header:not(.header-phone) {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 8px;
		padding: 5px 10px !important;
	}

	.site-header:not(.header-phone) .header-search {
		justify-self: stretch !important;
		width: auto !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.site-header:not(.header-phone) .wp-block-search__inside-wrapper {
		min-width: 0 !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	.site-header:not(.header-phone) .wp-block-search__button {
		padding-inline: 10px !important;
		font-size: 14px !important;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		padding-inline: 20px;
	}
}

/* =========================================================
   STEP 1A: COMPACT NAVIGATION AND SEARCH BAR
   The phone, logo and quote row above is intentionally untouched.
   ========================================================= */

.site-header:not(.header-phone) {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
	align-items: center;
	gap: 16px;
	padding: 4px 30px !important;
}

.site-header:not(.header-phone) .wp-block-navigation,
.site-header:not(.header-phone) .header-search {
	margin: 0 !important;
}

.site-header:not(.header-phone) .wp-block-navigation {
	justify-self: start !important;
	justify-content: flex-start !important;
}

.site-header:not(.header-phone) .wp-block-navigation__container {
	justify-content: flex-start !important;
}

.site-header:not(.header-phone) .header-search {
	justify-self: end;
	width: 100% !important;
	max-width: 300px;
}

.site-header:not(.header-phone) .wp-block-search__inside-wrapper {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px;
	width: 100% !important;
}

.site-header:not(.header-phone) .wp-block-search__input,
.site-header:not(.header-phone) .wp-block-search__button {
	min-height: 36px !important;
	height: 36px;
	box-sizing: border-box;
	line-height: 1.2 !important;
}

.site-header:not(.header-phone) .wp-block-search__input {
	min-width: 0 !important;
	padding: 5px 9px !important;
	font-size: 15px !important;
}

.site-header:not(.header-phone) .wp-block-search__button {
	margin: 0 !important;
	padding: 5px 10px !important;
	font-size: 14px !important;
	white-space: nowrap;
}

@media (max-width: 960px) {
	.site-header:not(.header-phone) {
		grid-template-columns: 44px minmax(180px, 300px);
		justify-content: space-between;
		gap: 10px;
		padding: 3px 16px !important;
	}

	.site-header:not(.header-phone) .header-search {
		justify-self: stretch !important;
		width: auto !important;
		max-width: 300px !important;
	}
}

@media (max-width: 480px) {
	.site-header:not(.header-phone) {
		grid-template-columns: 44px minmax(0, 1fr);
		gap: 8px;
		padding: 2px 10px !important;
	}

	.site-header:not(.header-phone) .header-search {
		max-width: none !important;
	}
}

/* =========================================================
   STEP 2: IMAGE-BACKED TEXT CONTRAST
   Background treatment only: existing font colours are preserved.
   Smart Slider elements are deliberately excluded.
   ========================================================= */

/* Home service flip cards below the Smart Slider hero. */
body.home .o-flip-front {
	background-color: rgba(12, 12, 18, 0.58) !important;
	background-blend-mode: multiply;
}

/* Star cloth enquiry CTA. */
body.page-id-2237 .wp-block-group.has-background[style*="conference_pink-1920-x-600-px"] {
	background-color: rgba(18, 10, 24, 0.66) !important;
	background-blend-mode: multiply;
}

/* Events enquiry CTA. */
body.page-id-1673 .wp-block-group.has-background[style*="Call-to-action-2.webp"] {
	background-color: rgba(10, 12, 18, 0.58) !important;
	background-blend-mode: multiply;
}

/* Hybrid events enquiry CTA. */
body.page-id-1708 .wp-block-group.has-background[style*="Pink-Event.webp"] {
	background-color: rgba(12, 8, 20, 0.58) !important;
	background-blend-mode: multiply;
}

/* =========================================================
   STEP 3: MOBILE HERO TITLE SCALE
   Non-home WordPress hero blocks only; Smart Slider is excluded.
   ========================================================= */

@media (max-width: 600px) {
	body:not(.home) .wp-block-group.has-background:has(.osav-outline-heading-hero)
		.wp-block-heading.has-x-large-font-size:not(.osav-outline-heading-hero) {
		font-size: clamp(26px, 7vw, 30px) !important;
		line-height: 1.18 !important;
	}
}

/* =========================================================
   STEP 4: MOBILE CARD AND SECTION RHYTHM
   Reduce desktop-sized whitespace while retaining readable cards.
   ========================================================= */

@media (max-width: 600px) {
	/* Repeated service-card grids across the main service pages. */
	body:not(.home) .osav-responsive-card-grid {
		row-gap: 16px !important;
		margin-top: 20px !important;
	}

	/* The equipment directory on the Services page. */
	.osav-equipment-category-section {
		padding: 32px 16px !important;
	}

	.osav-equipment-category-section > .wp-block-columns {
		row-gap: 18px !important;
		margin-top: 20px !important;
	}

	.osav-equipment-category-card {
		min-height: 0 !important;
		padding: 18px !important;
	}

	/* Equipment option grids on the sound and drape pages. */
	body.page-id-2229 .osav-audio-options,
	body.page-id-2237 .osav-drape-options {
		padding: 22px 14px !important;
		margin-top: 28px !important;
	}

	body.page-id-2229 .osav-audio-option-card,
	body.page-id-2237 .osav-drape-option-card {
		padding: 16px !important;
	}

	body.page-id-2237 .osav-drape-option-card {
		margin-top: 16px !important;
	}
}

/* =========================================================
   STEP 5: LONG-FORM PAGE SECTION RHYTHM
   Prevent top-level spacer blocks from doubling mobile whitespace.
   ========================================================= */

@media (max-width: 600px) {
	.entry-content > .wp-block-spacer {
		height: 12px !important;
		margin-top: 18px !important;
		margin-bottom: 0 !important;
	}
}

/* =========================================================
   STEP 6: MOBILE FOOTER TOUCH TARGETS
   Increase clickable areas without changing visible type or icon size.
   ========================================================= */

@media (max-width: 600px) {
	.osav-footer-main .wp-block-navigation-item__content {
		align-items: center;
		min-height: 44px;
		box-sizing: border-box;
		padding-block: 9px !important;
	}

	.osav-footer-main .wp-block-social-link-anchor {
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}
}

/* =========================================================
   STEP 7: MOBILE CONTACT FORM
   Give name fields and the primary action comfortable phone sizing.
   ========================================================= */

@media (max-width: 600px) {
	body.page-id-23 .wpforms-form .wpforms-field-name .wpforms-field-row {
		display: block !important;
		max-width: none !important;
	}

	body.page-id-23 .wpforms-form .wpforms-field-name .wpforms-field-row-block {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.page-id-23 .wpforms-form .wpforms-field-name .wpforms-field-row-block:first-child {
		margin-bottom: 14px !important;
	}

	body.page-id-23 .wpforms-form .wpforms-field-name input {
		width: 100% !important;
		max-width: none !important;
		box-sizing: border-box;
	}

	body.page-id-23 .wpforms-form .wpforms-submit {
		width: 100% !important;
		min-height: 44px !important;
		box-sizing: border-box;
	}
}

/* Final regression correction: keep the long decorative audio title inside its mobile hero. */
@media (max-width: 600px) {
	body.page-id-2229 .osav-outline-heading-hero {
		font-size: 21px !important;
		line-height: 1.1 !important;
	}
}