/* Header nav flash guard — briefly hides <nav> inside the header so any JS-based
   nav-link adjustment (e.g. ensuring Boomers/Soul appear) finishes BEFORE the user
   sees anything, instead of visibly changing after the page has already rendered.
   The animation-based fallback guarantees it becomes visible within ~250ms even if
   the branding JS is slow, fails, or isn't loaded on a given page — it can never
   stay permanently hidden. */
header nav {
	opacity: 0;
	animation: semNavReveal 0s linear 0.25s forwards;
}
@keyframes semNavReveal { to { opacity: 1; } }
header nav.sem-nav-ready {
	opacity: 1 !important;
	animation: none;
}

/* Site-wide horizontal-overflow guard. Any single element that's ever
   slightly wider than the viewport (a stray fixed-width box, an overflowing
   flex row, etc.) creates a right-side gap you can scroll into on mobile.
   This clips that at the document level so it can never happen, on any
   page, without needing to hunt down every individual culprit. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/**
 * Six Eye Market — Dark Mode overrides.
 * Applied whenever <html data-theme="dark"> is set (see sem-theme.js).
 * Targets the common, repeated utility/component classes used across the
 * whole site, so switching themes works everywhere without editing every
 * page's markup individually.
 */
html[data-theme="dark"] {
	color-scheme: dark;
}

/* Fix for the mobile "transparent flash" when overscrolling/bouncing past
   the end of the page — some pages set a fixed height:100% on <html>,
   which can leave the overscroll area uncovered on iOS/Android. This makes
   sure the background always matches, in both light and dark mode. */
html {
	background-color: #EBFFF3;
	min-height: 100%;
}
html[data-theme="dark"] {
	background-color: #0F1712;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .bg-\[\#EBFFF3\],
html[data-theme="dark"] .bg-honeydew {
	background-color: #0F1712 !important;
}
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .inner-card,
html[data-theme="dark"] .field-input,
html[data-theme="dark"] .form-input {
	background-color: #1A241E !important;
	border-color: #2B3830 !important;
}
html[data-theme="dark"] .text-eerieBlack,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] p,
html[data-theme="dark"] span, html[data-theme="dark"] label, html[data-theme="dark"] li {
	color: #E8F0EA;
}
html[data-theme="dark"] .text-gray-400 { color: #8A9A8E !important; }
html[data-theme="dark"] .text-gray-500 { color: #9FAEA3 !important; }
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-700 { color: #C3D0C6 !important; }
html[data-theme="dark"] .border-gray-100,
html[data-theme="dark"] .border-gray-200 { border-color: #2B3830 !important; }
html[data-theme="dark"] .bg-gray-50,
html[data-theme="dark"] .bg-gray-100 { background-color: #22302A !important; }
html[data-theme="dark"] header.bg-white,
html[data-theme="dark"] .side-link {
	background-color: #141D18 !important;
	color: #E8F0EA;
}
html[data-theme="dark"] .side-link:hover,
html[data-theme="dark"] .side-link.active {
	background-color: rgba(72,108,38,0.25) !important;
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
	background-color: #1A241E !important;
	color: #E8F0EA !important;
	border-color: #2B3830 !important;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder {
	color: #6B7A70 !important;
}
html[data-theme="dark"] .status-pill.bg-gray-100 { background-color: #2B3830 !important; }

/* Mobile header spacing fix: the header row uses equal 32px padding on
   both sides, but the right side needs to fit more content (bell, post
   ad, hamburger) than the left (just the logo) — so on mobile, ease the
   left padding back and tighten the right so both sides balance out. */
@media (max-width: 767px) {
	header > div.px-8 {
		padding-left: 16px !important;
		padding-right: 10px !important;
	}
	header .shrink-0.gap-4,
	header div.flex.items-center.gap-4.shrink-0 {
		gap: 8px !important;
	}
	/* Hide these synchronously via CSS (not just JS after DOM-ready) so there's
	   no flash of an overflowing header — this matters most right after login,
	   when the account/bell/message icons are all present at once. */
	header a[href="/my-profile/"],
	header a[href="/notifications/"],
	header a[href="/messages/"] {
		display: none !important;
	}
}


/* =====================================================================
   MOBILE POLISH (phones, <= 767px) — one consistent, professional layer for every page.
   Readable type (nothing below 11px), 16px form fields (no iOS zoom-on-focus), comfortable
   side gutters, tidy section spacing, scrollable tables, modals that fit the screen.
   Desktop is untouched. Uses !important only where the page's own Tailwind classes must be overridden.
   ===================================================================== */
@media (max-width: 767px) {
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body { overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
	img, video, canvas, svg { max-width: 100%; }
	img { height: auto; }

	/* --- Typography: lift the tiny sizes, keep a clear scale --- */
	[class*="text-[8"], [class*="text-[9"] { font-size: 11px !important; }
	[class*="text-[10"] { font-size: 11.5px !important; }
	[class*="text-[11"] { font-size: 12px !important; }
	[class*="text-[12"] { font-size: 12.5px !important; }
	[class*="text-[13"] { font-size: 13.5px !important; }
	.text-xs { font-size: 12.5px !important; line-height: 1.5 !important; }
	p, li { line-height: 1.6; }
	[class~="text-6xl"], [class~="text-5xl"] { font-size: clamp(30px, 9vw, 38px) !important; line-height: 1.15 !important; }
	[class~="text-4xl"] { font-size: clamp(27px, 8vw, 32px) !important; line-height: 1.2 !important; }
	[class~="text-3xl"] { font-size: 25px !important; line-height: 1.25 !important; }
	h1, h2, h3 { text-wrap: balance; overflow-wrap: anywhere; }

	/* --- Layout rhythm: consistent gutters and section spacing --- */
	section[class*="px-8"], main[class*="px-8"], div[class*="max-w-"][class*="px-8"], footer div[class*="px-8"] { padding-left: 16px !important; padding-right: 16px !important; }
	section[class*="px-6"], main[class*="px-6"] { padding-left: 16px !important; padding-right: 16px !important; }
	section[class*="py-20"], section[class*="py-16"], section[class*="py-14"] { padding-top: 36px !important; padding-bottom: 36px !important; }
	section[class*="py-12"], section[class*="py-10"] { padding-top: 28px !important; padding-bottom: 28px !important; }
	section[class*="py-8"] { padding-top: 22px !important; padding-bottom: 22px !important; }
	.inner-card { border-radius: 16px; }
	.inner-card[class*="p-8"], .inner-card[class*="p-10"] { padding: 20px !important; }
	[class*="gap-8"]:not(.flex-nowrap) { gap: 20px; }

	/* --- Forms: 16px text stops iOS from zooming, 44px height is easy to tap --- */
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]),
	select, textarea { font-size: 16px !important; }
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="file"]):not([type="color"]):not(.hours-input),
	select { min-height: 44px; }
	input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; }
	label { line-height: 1.4; }

	/* --- Buttons: a calmer, consistent tap feel --- */
	button, [role="button"], a[class*="rounded-xl"], a[class*="rounded-full"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
	button:active, a[class*="rounded-xl"]:active, a[class*="rounded-full"]:active { transform: scale(0.98); }
	.sem-tap::after { content: ""; position: absolute; inset: -8px; }
	.sem-tap-rel { position: relative; }

	/* --- Wide content scrolls inside itself instead of widening the page --- */
	.overflow-x-auto > table { min-width: 100%; }
	pre, code { overflow-x: auto; max-width: 100%; }
	.overflow-x-auto { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.overflow-x-auto::-webkit-scrollbar { display: none; }

	/* --- Dialogs fit the screen and scroll inside --- */
	[class*="fixed"][class*="inset-0"][class*="items-center"] > div[class*="max-w-"] { max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	[class*="fixed"][class*="inset-0"][class*="items-center"][class*="justify-center"] { padding: 12px; }

	/* --- Footers: links wrap and centre instead of running off the screen --- */
	footer .flex.items-center.justify-between, footer div.flex.items-center.gap-4, footer div.flex.items-center.gap-5, footer div.flex.items-center.gap-6 { flex-wrap: wrap; justify-content: center; row-gap: 8px; text-align: center; }
	footer ul li a { display: inline-block; padding: 3px 0; }

	/* --- Known offenders found by the audit --- */
	.bg-orb { max-width: 100vw; }
	.hours-input { min-width: 0; width: 100%; max-width: 100% !important; }
	a.bg-mossGreen[class*="px-"], a.bg-premiumGold[class*="px-"] { max-width: 100%; white-space: normal; text-align: center; }

	/* header action buttons with text become compact icon buttons so the hamburger never gets pushed off-screen */
	header a[href="/create-group/"], header a[href="/create-event/"] { width: 36px; height: 36px; padding: 0 !important; justify-content: center; gap: 0 !important; font-size: 0 !important; overflow: hidden; flex-shrink: 0; }
	header a[href="/create-group/"] i, header a[href="/create-event/"] i { font-size: 14px !important; }

	/* --- Respect the phone's gesture bar --- */
	#semBottomNav { padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}