/**
 * NZ-Safety Custom Styles
 * Firearm Training - Round Lake, NY
 */

/* ── Remove block gap between header and page content ── */
.wp-site-blocks > * + * {
	margin-top: 0 !important;
}

/* ── Global Transitions ── */
a,
.wp-element-button,
.wp-block-button__link,
.wp-block-navigation-item__content {
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

/* ── Button Hover Effects ── */
.wp-block-button__link:hover,
.wp-element-button:hover {
	opacity: 0.92;
	transform: translateY(-1px);
	transition: all 0.25s ease;
}

/* Outline button style */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-width: 2px;
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--textonprimary);
}

/* ── Navigation ── */
.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #FF7A45;
}

/* Header phone link inherits text color */
.nz-header-phone a {
	color: inherit;
	text-decoration: none;
}

.nz-header-phone a:hover {
	color: var(--wp--preset--color--primary);
}

/* ── Header layout ── */
/* Nav group (nav + account + cart) is pushed right via margin-left:auto
   (set inline in the template). Reinforce here and align icons vertically. */
.site-header .nz-header-nav-group {
	margin-left: auto !important;
	align-items: center;
}

/* Phone + CTA group: 24px breathing room from the nav group */
.site-header .is-layout-flex.is-content-justification-space-between > .wp-block-group:last-child {
	margin-left: 24px;
}

/* WooCommerce mini-cart in header */
.site-header .wc-block-mini-cart {
	margin: 0;
	padding: 0;
}

.site-header .wc-block-mini-cart__button {
	padding: 4px !important;
	gap: 4px !important;
}

.site-header .wc-block-mini-cart__icon {
	width: 20px !important;
	height: 20px !important;
}

.site-header .wc-block-mini-cart__badge {
	min-width: 16px !important;
	height: 16px !important;
	font-size: 10px !important;
}

.site-header .wc-block-mini-cart__amount {
	display: none;
}

/* WooCommerce account icon in header */
.site-header .wc-block-customer-account {
	margin: 0;
	padding: 0;
}

.site-header .wc-block-customer-account a {
	padding: 0 !important;
	gap: 0 !important;
}

.site-header .wc-block-customer-account svg,
.site-header .wc-block-customer-account .wc-block-customer-account__account-icon {
	width: 20px !important;
	height: 20px !important;
	fill: var(--wp--preset--color--basecolor);
}

.site-header .wc-block-customer-account a:hover svg,
.site-header .wc-block-customer-account a:hover .wc-block-customer-account__account-icon {
	fill: var(--wp--preset--color--primary);
}

/* Dropdown submenu styling */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--contrastcolor);
	border: 1px solid var(--wp--preset--color--lightborder);
	border-top: 2px solid var(--wp--preset--color--primary);
	padding: 8px 0;
	min-width: 200px;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 20px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--lightgrey);
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #FF7A45;
	background-color: var(--wp--preset--color--lightbg);
}

/* Mobile overlay menu styling */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--contrastcolor);
}

/* ── Service Cards ── */
.wp-block-group[style*="border-color"] {
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.wp-block-group[style*="border-color"]:hover {
	border-color: var(--wp--preset--color--primary) !important;
}

/* ── Forms & Inputs ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
	background-color: var(--wp--preset--color--inputbg);
	color: var(--wp--preset--color--inputtext);
	border: 1px solid var(--wp--preset--color--lightborder);
	border-radius: 3px;
	padding: 10px 14px;
	font-family: var(--wp--preset--font-family--primary);
	font-size: var(--wp--preset--font-size--small);
	transition: border-color 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

/* ── Selection Color ── */
::selection {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--textonprimary);
}

/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--wp--preset--color--contrastcolor);
}

::-webkit-scrollbar-thumb {
	background: var(--wp--preset--color--lightborder);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--wp--preset--color--primary);
}

/* ── WooCommerce Overrides ── */
.wc-block-components-product-name {
	text-decoration: none !important;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.wc-block-grid__product-price,
.wc-block-components-product-price {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.wc-block-components-product-sale-badge {
	background-color: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.75rem;
}

/* ── Footer Links ── */
footer a,
.wp-block-template-part[data-area="footer"] a {
	color: var(--wp--preset--color--lightgrey);
	text-decoration: none;
}

footer a:hover,
.wp-block-template-part[data-area="footer"] a:hover {
	color: #FF7A45;
}

/* ── Footer Navigation Blocks ── */
/* Style wp:navigation blocks in footer as simple vertical link lists */
footer .wp-block-navigation,
.wp-block-template-part[data-area="footer"] .wp-block-navigation {
	gap: 0;
}

footer .wp-block-navigation .wp-block-navigation__container,
.wp-block-template-part[data-area="footer"] .wp-block-navigation .wp-block-navigation__container {
	gap: 0;
	display: flex;
	flex-direction: column;
}

footer .wp-block-navigation .wp-block-navigation-item,
.wp-block-template-part[data-area="footer"] .wp-block-navigation .wp-block-navigation-item {
	line-height: 2.2;
}

footer .wp-block-navigation .wp-block-navigation-item__content,
.wp-block-template-part[data-area="footer"] .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--lightgrey);
	font-size: 0.9rem;
	text-decoration: none;
}

footer .wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-template-part[data-area="footer"] .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #FF7A45;
}

/* Hide the mobile menu button/overlay in footer nav */
footer .wp-block-navigation__responsive-container-open,
.wp-block-template-part[data-area="footer"] .wp-block-navigation__responsive-container-open {
	display: none !important;
}

footer .wp-block-navigation__responsive-container,
.wp-block-template-part[data-area="footer"] .wp-block-navigation__responsive-container {
	display: block !important;
	position: static !important;
	width: auto !important;
}

footer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content,
.wp-block-template-part[data-area="footer"] .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* ── Footer Column Dividers ── */
.nz-footer-columns > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--wp--preset--color--lightborder);
	padding-left: 36px;
}

/* Remove dividers when columns stack on mobile */
@media (max-width: 767px) {
	.nz-footer-columns > .wp-block-column + .wp-block-column {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid var(--wp--preset--color--lightborder);
		padding-top: 24px;
	}
}

/* Tablet: keep dividers only between side-by-side columns */
@media (min-width: 768px) and (max-width: 1024px) {
	.nz-footer-columns > .wp-block-column + .wp-block-column {
		border-left: none;
		padding-left: 0;
	}
	.nz-footer-columns > .wp-block-column:nth-child(even) {
		border-left: 1px solid var(--wp--preset--color--lightborder);
		padding-left: 28px;
	}
}

/* ── Utility: Accent Top Border ── */
.nz-accent-top {
	border-top: 3px solid var(--wp--preset--color--primary);
}

/* ── Loading / Focus States ── */
*:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* ── Interior Page Cover Blocks: tighter ── */
.wp-block-cover {
	min-height: 0 !important;
	padding-top: 36px !important;
	padding-bottom: 36px !important;
}

/* Homepage hero: full-height, flush against header */
.nz-hero {
	min-height: 85vh !important;
	padding-top: 50px !important;
	padding-bottom: 50px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Homepage non-hero covers (CTA section): restore padding */
body.home .wp-block-cover:not(.nz-hero),
body.front-page .wp-block-cover:not(.nz-hero) {
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

/* ── Homepage Hero Layout ── */
/* Gradient overlay: solid dark left (text) → transparent right (image shows) */
.nz-hero .wp-block-cover__background {
	background: linear-gradient(
		90deg,
		rgba(0, 23, 49, 0.95) 0%,
		rgba(0, 23, 49, 0.88) 28%,
		rgba(0, 23, 49, 0.45) 48%,
		rgba(0, 23, 49, 0.1) 68%,
		rgba(0, 23, 49, 0) 100%
	) !important;
	opacity: 1 !important;
}

/* Offset the background image: start at 20% from the left edge */
.nz-hero .wp-block-cover__image-background {
	left: 25% !important;
	width: 75% !important;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 20%);
	mask-image: linear-gradient(90deg, transparent 0%, black 20%);
}

/* Push inner container left, constrain to ~600px */
.nz-hero .wp-block-cover__inner-container {
	max-width: 600px;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* Orange separator: short bar, left-aligned */
.nz-hero-separator {
	width: 60px !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	border-bottom: 3px solid var(--wp--preset--color--primary) !important;
}

/* ── Trust Bar ── */
.nz-trust-icon {
	color: var(--wp--preset--color--primary);
	line-height: 1;
}

.nz-trust-item {
	text-align: center;
}

.nz-trust-item h4 {
	font-size: 1rem !important;
}

.nz-trust-item p {
	font-size: 0.9rem !important;
}

/* ══════════════════════════════════════════
   DESKTOP: WIDER + VERTICALLY TIGHTER
   ══════════════════════════════════════════ */

@media (min-width: 1025px) {
	/* Tighter section spacing on desktop */
	.wp-block-group + .wp-block-group,
	.wp-block-columns + .wp-block-columns,
	.wp-block-columns + .wp-block-group,
	.wp-block-group + .wp-block-columns {
		margin-top: 0.75rem;
	}

	/* Reduce spacer blocks on desktop (they tend to add too much air) */
	.wp-block-spacer {
		margin-top: -10px;
		margin-bottom: -10px;
	}

	/* Post/page content: reduce paragraph spacing */
	.entry-content > *,
	.wp-block-post-content > * {
		margin-top: 0.8rem;
		margin-bottom: 0.8rem;
	}
}

/* ══════════════════════════════════════════
   MOBILE RESPONSIVE STYLES
   ══════════════════════════════════════════ */

/* ── Mobile ── */
@media (max-width: 767px) {
	/* Hero: full-width content on mobile */
	.nz-hero .wp-block-cover__inner-container {
		max-width: 100%;
	}

	/* Hide phone number on mobile to save header space */
	.nz-header-phone {
		display: none;
	}


	/* Shrink logo on mobile */
	.wp-block-site-logo img {
		max-width: 160px !important;
		height: auto !important;
	}

	/* Tighter header padding */
	.wp-block-group[style*="padding-top"] {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	/* CTA button: compact on mobile */
	.wp-block-buttons .wp-block-button__link.wp-element-button {
		font-size: 0.75rem !important;
		padding: 8px 10px !important;
		letter-spacing: 0.5px !important;
		white-space: nowrap !important;
	}

	/* Ensure mobile menu overlay is full-screen and usable */
	.wp-block-navigation__responsive-container.is-menu-open {
		padding: 20px var(--wp--custom--spacing--outer);
	}

	/* Submenu items in overlay: full width, no absolute positioning */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static !important;
		min-width: 100% !important;
		border: none !important;
		border-top: none !important;
		padding-left: 16px;
	}

	/* Bigger tap targets + visible text in mobile menu */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		padding: 12px 0;
		font-size: 1.1rem;
		color: #ffffff !important;
	}

	/* Submenu link color in mobile overlay */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: rgba(255, 255, 255, 0.85) !important;
	}

	/* Mobile menu close button visible */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		color: #ffffff !important;
	}

	/* Hero: shorter on mobile */
	.nz-hero {
		min-height: 60vh !important;
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}

	/* Hero background: full-width on mobile instead of offset */
	.nz-hero .wp-block-cover__image-background {
		left: 0 !important;
		width: 100% !important;
		-webkit-mask-image: none;
		mask-image: none;
	}

	/* Hero gradient: top-to-bottom for mobile readability */
	.nz-hero .wp-block-cover__background {
		background: linear-gradient(
			to bottom,
			rgba(0, 23, 49, 0.92) 0%,
			rgba(0, 23, 49, 0.7) 60%,
			rgba(0, 23, 49, 0.85) 100%
		) !important;
	}

	/* Interior pages: reduce top/bottom padding */
	.wp-block-group.has-contrastcolor-background-color[style*="padding-top:60px"] {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
	}

	/* Non-hero cover sections: tighter on mobile */
	body.home .wp-block-cover:not(.nz-hero),
	body.front-page .wp-block-cover:not(.nz-hero) {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	/* Product page: stack gallery + info columns */
	.single-product .wp-block-columns.alignwide {
		flex-direction: column !important;
	}

	.single-product .wp-block-columns.alignwide > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}

	/* Related products: 2 columns on mobile */
	.products-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}

	/* Footer: 5-column → single column stack on mobile */
	footer .nz-footer-columns,
	.wp-block-template-part[data-area="footer"] .nz-footer-columns {
		flex-direction: column;
		gap: 28px !important;
	}

	footer .nz-footer-columns .wp-block-column,
	.wp-block-template-part[data-area="footer"] .nz-footer-columns .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ── Tablet adjustments (768px - 1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Footer: 5-column → 2x3 grid on tablets */
	footer .nz-footer-columns,
	.wp-block-template-part[data-area="footer"] .nz-footer-columns {
		flex-wrap: wrap !important;
		gap: 28px !important;
	}

	footer .nz-footer-columns .wp-block-column,
	.wp-block-template-part[data-area="footer"] .nz-footer-columns .wp-block-column {
		flex-basis: 45% !important;
	}

	/* Related products: 3 columns on tablet */
	.products-block-post-template {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

/* ── Small phones ── */
@media (max-width: 500px) {
	/* Shrink logo further on small phones */
	.wp-block-site-logo img {
		max-width: 120px !important;
	}

	/* Footer: tighter stacking on small phones */
	footer .nz-footer-columns,
	.wp-block-template-part[data-area="footer"] .nz-footer-columns {
		gap: 20px !important;
	}

	/* Shrink footer logo */
	footer .wp-block-site-logo img,
	.wp-block-template-part[data-area="footer"] .wp-block-site-logo img {
		max-width: 100px !important;
		height: auto !important;
	}

	/* Related products: single column on small phones */
	.products-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

/* ── Touch-friendly: larger tap targets for links ── */
@media (pointer: coarse) {
	.wp-block-navigation .wp-block-navigation-item__content {
		padding: 6px 0;
	}

	footer .wp-block-navigation .wp-block-navigation-item__content,
	.wp-block-template-part[data-area="footer"] .wp-block-navigation .wp-block-navigation-item__content {
		padding: 4px 0;
	}

	/* Minimum 44px touch targets for WCAG */
	.wp-block-navigation-item__content {
		min-height: 44px;
		display: flex;
		align-items: center;
	}

	.wp-block-button__link,
	.wp-element-button {
		min-height: 44px;
	}
}