/*
Theme Name: Amish Meet
Text Domain: amish-meet
Description: A plain, community-centered courtship and fellowship site for the Amish community
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

/* This file holds the WordPress theme header (above) plus truly global
 * rules only. Tailwind handles everything else.
 *
 * - Design tokens live in theme.css's @theme block.
 * - Prose + form styles live in presets.css.
 * - Layout, color, typography utilities come from Tailwind v4.
 *
 * Do NOT add component classes here (.btn-primary, .card, etc.). Use
 * Tailwind utilities in templates instead.
 */

html {
	scroll-behavior: smooth;
}

/* Footer link columns: stacks on narrow screens, spreads out on wider
 * ones. Plain CSS (not Tailwind grid-cols utilities) for the same reason
 * as the header/badge fixes below — dist/styles.css has no compiled
 * responsive variants. */
.footer-grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.footer-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (min-width: 1024px) {
	.footer-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Safety net: don't let any oversized element force horizontal scroll
 * site-wide (this is what was pushing content off the right edge on
 * mobile). */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Mobile header fix — the logo + "Home / Log In / Join Free" row was one
 * unwrapping flex line wider than narrow viewports, which is what forced
 * the overflow above and pushed the "Join Free" button off-screen.
 * Written as plain CSS (not Tailwind sm: utilities) because dist/styles.css
 * is a static Tailwind build with no responsive variants compiled in —
 * new sm:/md: classes added to templates would be no-ops on the live site. */
@media (max-width: 640px) {
	header .max-w-6xl {
		flex-wrap: wrap;
		row-gap: 0.75rem;
		padding-left: 1rem;
		padding-right: 1rem;
	}
	header nav {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem 1rem;
	}
	header nav a {
		font-size: 0.9rem;
	}
	header nav a.btn-primary {
		padding: 0.5rem 1rem !important;
	}

	/* "As Seen on TV" badge is sized right on desktop but too large
	 * relative to the hero image on narrow screens. Scale it down;
	 * height: auto keeps it proportional since the img's HTML
	 * width/height attributes are fixed at the desktop size. */
	.tv-badge {
		width: 85px !important;
		height: auto !important;
	}
}