/*
	Design-system stylesheet for the rebuilt homepage (index.php). Reuses the
	same tokens/patterns established by css/detail-v2.css and css/listing-v2.css
	(card recipe, h2 accent-tick, hero gradient+pattern, Font Awesome as the
	one icon set) so the homepage feels like the same site as the detail/
	listing pages, rather than introducing a fourth visual language.

	:root block is intentionally redeclared here rather than @import-ed --
	same reasoning both other v2 stylesheets already state in their own
	header comments: pages shouldn't silently inherit an unrelated
	stylesheet's future token changes.

	Featured Listings (Section 7) reuses css/listing-v2.css's .listing-card
	component directly (loaded as a second stylesheet on index.php) rather
	than a third copy of the same ~150 lines -- see index.php's $extra_css.
*/

:root {
	--primary: #1E2A3A;
	--primary-light: #2C3E52;
	--primary-dark: #16202E;
	--accent: #F5A623;
	--accent-dark: #D68C0F;
	--surface: #FFFFFF;
	--surface-alt: #F6F8FA;
	--border: #E5E9EF;
	--text: #1A2230;
	--text-muted: #5B6472;
	--radius: 12px;
	--shadow: 0 1px 3px rgba(16,24,40,.06);
	--shadow-hover: 0 4px 12px rgba(16,24,40,.10);
	--font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.home-v2 { font-family: var(--font); color: var(--text); font-size: 16px; line-height: 1.6; }
.home-v2 h1, .home-v2 h2, .home-v2 h3 { font-family: var(--font); font-weight: 700; color: var(--text); }
.home-v2 h1 { font-size: 38px; line-height: 1.2; margin: 0 0 14px; }
.home-v2 h2 { font-size: 26px; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.home-v2 h2::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 24px;
	background: var(--accent);
	border-radius: 3px;
	flex-shrink: 0;
}
.home-v2 h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.home-v2 section { padding: 48px 0; }
.home-v2 .section-intro { color: var(--text-muted); font-size: 16px; line-height: 1.6; margin: 0 0 28px; max-width: 760px; }
.home-v2 .section-alt { background: var(--surface-alt); }

.home-v2 a { color: var(--primary); }
.home-v2 a:focus-visible, .home-v2 button:focus-visible, .home-v2 input:focus-visible, .home-v2 summary:focus-visible {
	outline: 2px solid var(--accent-dark);
	outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.home-v2 .btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 22px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: all 150ms ease;
}
.home-v2 .btn-cta-primary { background: var(--accent); color: #1A1300; border-color: var(--accent); }
.home-v2 .btn-cta-primary:hover, .home-v2 .btn-cta-primary:focus { background: var(--accent-dark); border-color: var(--accent-dark); color: #1A1300; text-decoration: none; }
.home-v2 .btn-cta-secondary { background: transparent; color: var(--primary); border-color: var(--border); }
.home-v2 .btn-cta-secondary:hover, .home-v2 .btn-cta-secondary:focus { border-color: var(--primary); background: var(--surface-alt); color: var(--primary); text-decoration: none; }

/* ---------- Card recipe (shared shape across sections 2/5/6) ---------- */
.home-v2 .home-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	transition: box-shadow 150ms ease, transform 150ms ease;
}
.home-v2 .home-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-1px); }

/* ================= Section 1: Hero ================= */
.home-hero {
	position: relative;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: #fff;
	padding: 56px 0 60px;
	overflow: hidden;
}
.home-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cpattern id='dirPattern' width='240' height='240' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='30' cy='40' r='2.5' fill='white'/%3E%3Ccircle cx='190' cy='90' r='2.5' fill='white'/%3E%3Ccircle cx='110' cy='200' r='2.5' fill='white'/%3E%3Cline x1='30' y1='40' x2='90' y2='70' stroke='white' stroke-width='1' stroke-dasharray='3,4'/%3E%3Cline x1='190' y1='90' x2='150' y2='150' stroke='white' stroke-width='1' stroke-dasharray='3,4'/%3E%3Cg%3E%3Ccircle cx='90' cy='70' r='7' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M84 75 L90 92 L96 75 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='150' cy='150' r='7' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M144 155 L150 172 L156 155 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='50' cy='180' r='5' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M46 184 L50 196 L54 184 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23dirPattern)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 240px 240px;
	opacity: .08;
	pointer-events: none;
}
.home-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, .55);
	pointer-events: none;
}
@media (max-width: 640px) {
	.home-hero::before { display: none; }
}
.home-hero .container { position: relative; z-index: 1; text-align: center; }
.home-hero h1 { color: #fff; }
.home-hero-subhead { font-size: 19px; color: rgba(255,255,255,.88); max-width: 720px; margin: 0 auto 32px; line-height: 1.5; }

/* Search bar restyled to a white card -- overrides css/styles.css's dark
   .search-area theme ONLY when nested under .home-v2, so every other page
   using _inc/search_bar.php (30+ files) is completely unaffected. */
.home-v2 .search-area {
	background: #fff;
	color: var(--text);
	border-radius: var(--radius);
	box-shadow: var(--shadow-hover);
	max-width: 900px;
	margin: 0 auto;
	padding: 22px 24px;
}
.home-v2 .search-area label .fa { background: var(--surface-alt); color: var(--primary); }
.home-v2 .search-area input {
	color: var(--text) !important;
	border-bottom: 1px solid var(--border) !important;
}
.home-v2 .search-area input::-webkit-input-placeholder { color: var(--text-muted); opacity: 1; }
.home-v2 .search-area input:-moz-placeholder, .home-v2 .search-area input::-moz-placeholder { color: var(--text-muted); opacity: 1; }
.home-v2 .search-area .search-btn { background: var(--accent); color: #1A1300; border-radius: 8px; font-weight: 600; }
.home-v2 .search-area .search-btn:hover { background: var(--accent-dark); color: #1A1300; }

/*
	css/styles.css's .search-area-division-input/-location use hardcoded
	pixel widths (510px/169px, sized for the old full-width dark bar that
	spans the whole page). Inside this narrower 900px white card they
	overflow the card entirely -- confirmed visually via a screenshot during
	verification, not assumed. Switching the row to flexbox and overriding
	the fixed widths to fill their flex share fixes it regardless of
	viewport width, rather than guessing new fixed pixel values that would
	only happen to fit at one card width.
*/
.home-v2 .search-area .row { display: flex; flex-wrap: wrap; align-items: center; margin: 0; }
.home-v2 .search-area .col-md-8,
.home-v2 .search-area .col-md-3 {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	padding: 0 8px;
}
.home-v2 .search-area .col-md-1 { flex: 0 0 auto; padding: 0 8px; }
.home-v2 .search-area label {
	float: none;
	flex-shrink: 0;
	padding-left: 38px;
	margin-right: 8px;
	height: auto;
}
.home-v2 .search-area label .fa {
	width: 30px;
	height: 30px;
	line-height: 30px;
	font-size: 13px;
	top: 0;
}
.home-v2 .search-area .search-area-division {
	float: none;
	width: 100% !important;
	flex: 1 1 auto;
	min-width: 0;
}
.home-v2 .search-area input { width: 100% !important; }
@media (max-width: 767px) {
	/* Each column becomes its own full-width flex row (icon+input) stacked
	   on its own line, rather than relying on flex-direction:column on the
	   parent -- confirmed via screenshot that the column-direction approach
	   left the two fields overlapping instead of stacking. */
	.home-v2 .search-area .row { display: block; }
	.home-v2 .search-area .col-md-8,
	.home-v2 .search-area .col-md-3,
	.home-v2 .search-area .col-md-1 {
		display: flex;
		align-items: center;
		float: none;
		width: 100%;
		margin-top: 10px;
		padding: 0;
	}
	.home-v2 .search-area .col-md-8 { margin-top: 0; }
}

.home-hero-quicklinks { margin: 18px 0 0; font-size: 14px; color: rgba(255,255,255,.85); }
.home-hero-quicklinks a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.home-hero-quicklinks a:hover { color: var(--accent); }

.home-trust-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 24px;
	margin: 28px 0 0;
	font-size: 13px;
	color: rgba(255,255,255,.75);
}
.home-trust-strip .fa { color: var(--accent); margin-right: 5px; }

@media (max-width: 767px) {
	.home-hero h1 { font-size: 28px; }
	.home-hero-subhead { font-size: 16px; }
}

/* ================= Section 2: Categories ================= */
.home-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.home-category-card {
	display: block;
	padding: 22px 18px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
.home-category-card:hover, .home-category-card:focus { text-decoration: none; color: inherit; }
.home-category-card .fa {
	font-size: 30px;
	color: var(--accent);
	margin-bottom: 10px;
	display: block;
}
.home-category-card h3 { margin: 0 0 4px; }
.home-category-card span { font-size: 13px; color: var(--text-muted); }
.home-categories-more { text-align: center; margin-top: 28px; }
.home-categories-more a { font-weight: 600; text-decoration: none; }
.home-categories-more a:hover { text-decoration: underline; }

@media (max-width: 767px) {
	.home-categories-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================= Section 3: States ================= */
.home-states-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: unset;
}
.home-states-grid a { display: block; padding: 5px 0; text-decoration: none; font-size: 14px; }
.home-states-grid a:hover { text-decoration: underline; color: var(--accent-dark); }

@media (max-width: 991px) {
	.home-states-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
	.home-states-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================= Section 4: Cities ================= */
.home-cities-pills { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.home-city-pill {
	display: inline-block;
	padding: 8px 18px;
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--primary);
	transition: background 150ms ease, border-color 150ms ease;
}
.home-city-pill:hover { background: var(--accent); border-color: var(--accent); color: #1A1300; text-decoration: none; }

/* ================= Section 5: How It Works ================= */
.home-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-step-card { padding: 26px 22px; text-align: center; }
.home-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	font-weight: 700;
	margin-bottom: 14px;
}
.home-step-card .fa { font-size: 24px; color: var(--accent); margin-bottom: 10px; display: block; }
.home-step-card p { color: var(--text-muted); margin: 0; }

@media (max-width: 767px) {
	.home-steps-grid { grid-template-columns: 1fr; }
}

/* ================= Section 6: For Business Owners ================= */
.home-owners-row { display: flex; align-items: center; gap: 40px; }
.home-owners-text { flex: 1 1 55%; }
.home-owners-photo { flex: 1 1 40%; }
.home-owners-photo img { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow-hover); }
.home-benefit-list { list-style: none; margin: 20px 0; padding: 0; }
.home-benefit-list li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.home-benefit-list .fa { color: var(--success, #1E8E5A); margin-top: 4px; }
.home-owners-secondary { display: block; margin-top: 14px; font-size: 14px; text-decoration: none; font-weight: 600; }
.home-owners-secondary:hover { text-decoration: underline; }

@media (max-width: 767px) {
	.home-owners-row { flex-direction: column; }
	.home-owners-photo { order: -1; width: 100%; }
}

/* ================= Section 7: Featured Listings ================= */
/*
	Purpose-built vertical card for this grid (_inc/featured-business-card.php)
	-- NOT the shared .listing-card from css/listing-v2.css, which is a
	horizontal flex row designed for one full-width card per line on
	listing.php/search.php/city-listing.php. Reusing that component here
	(an earlier version of this section did) produced uneven card heights,
	a stretched/uncontained logo, and a badge that visually collided with
	the title -- confirmed via screenshot during review.

	Equal card heights come for free from CSS Grid's default
	align-items:stretch (each grid cell stretches to the tallest in its
	row) combined with .featured-card being display:flex column height:100%,
	so its own content can flex/push to fill whatever height Grid gives it.
*/
.home-featured-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.featured-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	transition: box-shadow 150ms ease, transform 150ms ease;
}
.featured-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }

/* Fixed-size logo box -- object-fit:contain so a logo's real aspect ratio
   is always preserved (never stretched/cropped), letterboxed on a neutral
   background; businesses with no logo get a plain placeholder icon in the
   exact same box, so the grid never breaks row-to-row alignment depending
   on which cards happen to have a photo. */
.featured-card-media {
	position: relative;
	width: 100%;
	height: 160px;
	background: var(--surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-bottom: 1px solid var(--border);
}
.featured-card-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	padding: 14px;
}
.featured-card-media-placeholder { font-size: 40px; color: #C9D0D8; }

/* Featured + Premium badges anchored to one consistent corner, stacked
   together rather than floating independently at different positions. */
.featured-card-badges {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
}
.featured-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3px;
	padding: 3px 10px;
	border-radius: 20px;
	white-space: nowrap;
	box-shadow: 0 1px 3px rgba(16,24,40,.15);
}
.featured-card-badge.is-featured { background: var(--primary-light); color: #fff; }
.featured-card-badge.is-premium { background: var(--accent); color: #1A1300; }

.featured-card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 16px 18px 18px;
}
.featured-card-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 6px;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.featured-card-title a { color: var(--text); text-decoration: none; }
.featured-card-title a:hover { color: var(--primary); text-decoration: underline; }

.featured-card-rating {
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: 12px;
	color: var(--text-muted);
	margin: 0 0 8px;
}
.featured-card-rating .fa-star, .featured-card-rating .fa-star-o { color: var(--accent); font-size: 13px; }
.featured-card-rating span { margin-left: 5px; }

.featured-card-desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--text-muted);
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* margin-top:auto pins address/phone to the bottom of the card regardless
   of how long the title/description above happen to be, so every card's
   footer lines up on the same baseline within a row. */
.featured-card-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.featured-card-meta p {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12px;
	color: var(--text-muted);
	margin: 8px 0 0;
}
.featured-card-meta p:first-child { margin-top: 0; }
.featured-card-meta .fa { width: 14px; flex-shrink: 0; text-align: center; color: var(--accent-dark); margin-top: 2px; }

@media (max-width: 991px) {
	.home-featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.home-featured-grid { grid-template-columns: 1fr; }
	.featured-card-media { height: 140px; }
}

/* ================= Section 8: About ================= */
.home-about p { max-width: 820px; margin: 0 0 16px; color: var(--text); }

/* ================= Section 9: FAQ ================= */
.home-faq-item {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 12px;
	background: var(--surface);
	overflow: hidden;
}
.home-faq-item summary {
	padding: 16px 20px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary::after {
	content: "+";
	font-size: 20px;
	color: var(--accent-dark);
	flex-shrink: 0;
	margin-left: 12px;
}
.home-faq-item[open] summary::after { content: "\2212"; }
.home-faq-item .home-faq-answer { padding: 0 20px 18px; color: var(--text-muted); }