/* ==========================================================================
   Global Responsive Safety Net
   Loaded after every other stylesheet. Purpose: guarantee the whole site
   works on any screen size, without fighting the specific rules already
   in styles.css / home-page.css / trade-show-styles.css / etc. (those files
   already carry the original site's own responsive breakpoints).
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}

body {
	overflow-x: hidden;
	max-width: 100vw;
}

/* Images should never force horizontal scroll, even if a stray one is
   missing an explicit width rule somewhere. Videos are intentionally
   excluded here — full-bleed hero videos rely on width:auto + min-width:100%
   (see .hero-video / .categories-video-bg) to cover the viewport at any
   aspect ratio, and capping them here would break that on tall/portrait
   screens. */
img {
	max-width: 100%;
	height: auto;
}

svg {
	max-width: 100%;
}

/* Form controls should never overflow their container on narrow screens. */
input, select, textarea, button {
	max-width: 100%;
}

/* Any WordPress-rendered table (e.g. inside the_content on a generic
   WP page) should scroll horizontally within itself rather than blow out
   the page width. */
table {
	max-width: 100%;
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Long unbroken strings (URLs, emails) shouldn't force overflow either. */
p, li, td, th, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* --------------------------------------------------------------------
   Small-screen polish for widgets added on top of the ported design
   -------------------------------------------------------------------- */
@media (max-width: 600px) {

	/* Gallery / Model gallery lightbox — shrink the oversized nav arrows
	   and keep them clear of the edges on phones. */
	#lightboxPrev, #lightboxNext {
		font-size: 34px !important;
	}
	#lightboxClose {
		font-size: 30px !important;
		top: 10px !important;
		right: 12px !important;
	}
	#lightboxImg {
		max-width: 94vw !important;
		max-height: 80vh !important;
	}

	/* Trade Show luxury section text card — reduce padding so it doesn't
	   eat the whole viewport width on small phones. */
	.luxury-text {
		padding: 20px 22px !important;
	}

	/* Site Content admin repeater rows are comfortable on desktop; give
	   them a bit more breathing room on narrow admin viewports too. */
	.bfw-repeater-row-header {
		flex-wrap: wrap;
		gap: 6px;
	}
}

@media (max-width: 400px) {
	.container {
		padding: 0 14px;
	}
}

/* --------------------------------------------------------------------
   Tablet range (769px–1024px) — portrait and landscape iPads/Android
   tablets. The header/nav already switches to the mobile hamburger menu
   at 1024px (see mobile-menu-fix.css), so tablets get the polished
   mobile nav rather than a cramped desktop nav. This section is a
   deliberate placeholder for future tablet-only tweaks if a specific
   component ever needs one — most layouts here use fluid grid/flexbox
   (auto-fit, flex-wrap) so they already reflow correctly in this range
   without needing dedicated rules.
   -------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
	.container {
		padding: 0 24px;
	}
}

/* --------------------------------------------------------------------
   iOS / iPadOS / macOS Safari specific fixes
   -------------------------------------------------------------------- */

/* iPhone notch / Dynamic Island / home-indicator: keep the fixed hamburger
   button and full-screen mobile nav clear of those areas. env() resolves to
   0 on devices without a notch, so this is a no-op everywhere else. */
.mobile-menu-toggle {
	top: calc(14px + env(safe-area-inset-top, 0px)) !important;
	right: calc(14px + env(safe-area-inset-right, 0px)) !important;
}

.mobile-nav {
	padding-top: calc(90px + env(safe-area-inset-top, 0px)) !important;
	padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
	padding-left: calc(20px + env(safe-area-inset-left, 0px)) !important;
	padding-right: calc(20px + env(safe-area-inset-right, 0px)) !important;
}

.mobile-nav-close {
	top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}

/* Safari's address bar changes the viewport height as it shows/hides,
   which makes 100vh sections jump or get cut off on iOS. 100dvh (dynamic
   viewport height) fixes this on Safari 15.4+; older Safari/other browsers
   that don't understand dvh simply ignore this line and keep the 100vh
   value already set elsewhere. Non-breaking either way. */
@supports (height: 100dvh) {
	/* These use height:100vh !important — match property and specificity
	   so the dvh version actually takes over on browsers that support it. */
	.hero-section,
	.mobile-nav {
		height: 100dvh !important;
		min-height: 100dvh !important;
	}

	/* These only use plain min-height:100vh, no override conflict to match. */
	.bride-groom-page .bride-bg-wrap,
	.bg-section-stable {
		min-height: 100dvh;
	}
}

/* Prevent iOS Safari's blue tap-highlight flash on buttons/links. */
a, button {
	-webkit-tap-highlight-color: transparent;
}

/* Smoother font rendering on macOS Safari/Chrome. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}