/*
Theme Name: Villages Classifieds
Theme URI: https://villagesclassifieds.com
Description: Senior-friendly classifieds theme built for WPAdverts. Large text, high contrast, big buttons, a text-size control, labeled ad spaces, and automatic setup of pages and categories.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: villages-classifieds
*/

/* ---------- Base ---------- */
html { font-size: 125%; } /* 20px body */
html.vc-size-2 { font-size: 143.75%; } /* 23px */
html.vc-size-3 { font-size: 162.5%; } /* 26px */

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

body {
	margin: 0;
	background: #FFFFFF;
	color: #1A2433;
	font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.55;
}

a { color: #0B6B4F; text-underline-offset: 3px; }
a:hover, a:focus { color: #08523C; }
:focus-visible { outline: 3px solid #B86E00; outline-offset: 3px; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: 2.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
p, ul, ol { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }

.vc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.2rem; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: static; width: auto; height: auto; clip: auto; display: inline-block; padding: 0.6rem 1rem; background: #FFFFFF; }

/* ---------- Forms (applies to WPAdverts forms too) ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"], select, textarea {
	font-family: inherit;
	font-size: 1.1rem;
	color: #1A2433;
	background: #FFFFFF;
	border: 2px solid #5B6878;
	border-radius: 10px;
	padding: 0.5rem 0.9rem;
	min-height: 3.2rem;
	width: 100%;
	max-width: 100%;
}
textarea { min-height: 9rem; }
input[type="checkbox"], input[type="radio"] { width: 1.5rem; height: 1.5rem; vertical-align: middle; }
label { font-weight: 700; }

button, input[type="submit"], input[type="button"], .vc-button,
.adverts-button, .adverts-form .adverts-button, a.adverts-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: inherit;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.2;
	min-height: 3.2rem;
	padding: 0.5rem 1.6rem;
	border-radius: 12px;
	border: 3px solid #0B6B4F;
	background: #0B6B4F;
	color: #FFFFFF !important;
	text-decoration: none;
	cursor: pointer;
}
button:hover, input[type="submit"]:hover, .vc-button:hover, .adverts-button:hover { background: #08523C; border-color: #08523C; }
.vc-button-outline { background: #FFFFFF; color: #0B6B4F !important; }
.vc-button-outline:hover { background: #E8F3EE; color: #08523C !important; }

/* ---------- Utility bar ---------- */
.vc-utility { background: #1A2433; color: #FFFFFF; }
.vc-utility .vc-wrap { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; justify-content: space-between; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.vc-textsize { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; }
.vc-textsize button {
	min-width: 2.4rem; min-height: 2.2rem; padding: 0 0.5rem;
	background: transparent; border: 2px solid #FFFFFF; border-radius: 8px; color: #FFFFFF !important;
}
.vc-textsize button[aria-pressed="true"] { background: #FFFFFF; color: #1A2433 !important; }
.vc-textsize .s1 { font-size: 0.9rem; } .vc-textsize .s2 { font-size: 1.1rem; } .vc-textsize .s3 { font-size: 1.3rem; }
.vc-help { font-size: 0.9rem; }
.vc-help a { color: #FFFFFF; font-weight: 700; }

/* ---------- Header ---------- */
.vc-header { border-bottom: 2px solid #C9D2CC; }
.vc-header .vc-wrap { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding-top: 1rem; padding-bottom: 1rem; }
.vc-brand { display: flex; align-items: center; gap: 0.7rem; color: #1A2433; text-decoration: none; }
.vc-brand svg { flex: none; width: 2.6rem; height: 2.6rem; }
.vc-brand-name { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.vc-brand-tag { display: block; font-size: 0.85rem; color: #3D4A5C; }
.vc-nav { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; }
.vc-nav a { font-weight: 700; padding: 0.6rem 0.8rem; min-height: 2.2rem; }
.vc-nav a.vc-button { padding: 0.5rem 1.4rem; min-height: 3rem; font-size: 1.1rem; }

/* ---------- Hero ---------- */
.vc-hero { background: #E8F3EE; }
.vc-hero .vc-wrap { padding-top: 2.8rem; padding-bottom: 2.4rem; }
.vc-hero h1 { font-size: 2.4rem; margin-bottom: 0.4rem; }
.vc-hero p { font-size: 1.2rem; color: #3D4A5C; max-width: 41rem; }
.vc-search {
	background: #FFFFFF; border: 2px solid #C9D2CC; border-radius: 16px; padding: 1.2rem;
	display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-end; margin-top: 1.2rem;
}
.vc-search label { display: flex; flex-direction: column; gap: 0.4rem; }
.vc-search .vc-q { flex: 999 1 19rem; }
.vc-search .vc-area { flex: 1 1 13rem; }
.vc-search input, .vc-search select { min-height: 3.2rem; font-size: 1.1rem; }
.vc-search button { flex: 1 1 9rem; }

/* ---------- Sections ---------- */
.vc-section { padding: 2.4rem 0 1.2rem; }
.vc-section-head { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.2rem; }
.vc-section-head h2 { margin: 0; }

.vc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.8rem; }
.vc-cat {
	display: flex; align-items: center; gap: 0.8rem; padding: 1rem; min-height: 4.6rem;
	border: 2px solid #C9D2CC; border-radius: 14px; text-decoration: none; color: #1A2433;
	font-size: 1.1rem; font-weight: 700; background: #FFFFFF;
}
.vc-cat:hover, .vc-cat:focus { border-color: #0B6B4F; background: #E8F3EE; color: #1A2433; }
.vc-cat svg { flex: none; width: 2.2rem; height: 2.2rem; }

.vc-steps { background: #E8F3EE; padding: 2.4rem 0; margin-top: 1.6rem; }
.vc-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem; margin-bottom: 1.4rem; }
.vc-step { background: #FFFFFF; border-radius: 14px; padding: 1.4rem; }
.vc-step-num { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #0B6B4F; color: #FFFFFF; font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; }
.vc-step strong { display: block; font-size: 1.2rem; }
.vc-step span { color: #3D4A5C; }

/* ---------- Ads ---------- */
.vc-ad { margin: 1.4rem 0; }
.vc-ad-label { font-size: 0.75rem; color: #3D4A5C; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.3rem; }
.vc-ad-body { text-align: center; }
.vc-ad-body img { display: inline-block; }
.vc-ad-empty { background: #F1F1EC; border: 2px dashed #8A948D; border-radius: 10px; min-height: 5.5rem; display: flex; align-items: center; justify-content: center; color: #3D4A5C; padding: 0.8rem; text-align: center; }
.vc-sponsors { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.8rem; }
.vc-sponsors .widget { background: #F1F1EC; border-radius: 12px; padding: 1rem; text-align: center; }
.vc-sponsors .widget-title { font-size: 1.1rem; margin-bottom: 0.3rem; }

/* ---------- Content pages ---------- */
.vc-main { padding: 2rem 0 3rem; }
.vc-content { max-width: 46rem; }
.vc-content li { margin-bottom: 0.4em; }
.vc-back { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; min-height: 2.2rem; margin-bottom: 1rem; }

.vc-two-col { display: flex; flex-wrap: wrap; gap: 2rem; align-items: flex-start; }
.vc-two-col > .vc-primary { flex: 999 1 28rem; min-width: 0; }
.vc-two-col > .vc-aside { flex: 1 1 17rem; }

.vc-safety { background: #FFF4E0; border: 2px solid #B86E00; border-radius: 16px; padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; }
.vc-safety h2 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.vc-safety ul { margin: 0; padding-left: 1.2rem; font-size: 0.95rem; }

/* ---------- WPAdverts listings ---------- */
.adverts-list .advert-item, .adverts-list .advert-item-col-3, .adverts-list .advert-item-col-2 {
	border: 2px solid #C9D2CC; border-radius: 14px; background: #FFFFFF;
}
.adverts-list .advert-link-text, .adverts-list .advert-link { font-size: 1.1rem; font-weight: 700; color: #1A2433; }
.advert-price, .adverts-price-box, .adverts-list .advert-price { font-size: 1.3rem !important; font-weight: 700; color: #0B6B4F !important; background: none !important; }
.adverts-list .advert-date, .adverts-list .advert-location, .advert-published { color: #3D4A5C; font-size: 0.9rem; }
.adverts-single-box, .adverts-single-author { font-size: 1rem; }
.adverts-search, .adverts-options { font-size: 1rem; }
.adverts-form .adverts-control-group { margin-bottom: 1.2rem; }
.adverts-form .adverts-control-group > label { font-size: 1.1rem; display: block; margin-bottom: 0.3rem; }
.adverts-form .adverts-field-description, .adverts-form .adverts-field-hint { color: #3D4A5C; font-size: 0.95rem; }
.adverts-pagination a, .adverts-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; min-height: 2.6rem; font-size: 1.05rem; }

/* ---------- Money-makers ---------- */
.vc-small { font-size: 0.85rem; color: #3D4A5C; }
.vc-badge { display: inline-block; background: #B86E00; color: #FFFFFF; font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 999px; margin-bottom: 0.3rem; }
.vc-promo { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; background: #FFF4E0; border: 2px solid #B86E00; border-radius: 14px; padding: 1rem 1.2rem; margin: 0 0 1.2rem; }
.vc-promo .vc-small { flex-basis: 100%; }

.vc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2rem; }
.vc-card { display: flex; flex-direction: column; border: 2px solid #B86E00; border-radius: 14px; overflow: hidden; text-decoration: none; color: #1A2433; background: #FFFFFF; }
.vc-card:hover, .vc-card:focus { color: #1A2433; background: #FFFBF3; }
.vc-card-img { height: 10rem; background: #DDE5DF; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vc-card-img img { width: 100%; height: 100%; object-fit: cover; }
.vc-card-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; }
.vc-card-price { font-size: 1.4rem; font-weight: 700; color: #0B6B4F; }
.vc-card-title { font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
.vc-card-meta { color: #3D4A5C; font-size: 0.9rem; margin: 0; }

.vc-pricing { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0 1.6rem; }
.vc-price-card { border: 2px solid #C9D2CC; border-radius: 14px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.vc-price-card h3 { margin: 0; font-size: 1.15rem; }
.vc-price-card p { margin: 0; }
.vc-price { font-size: 1.5rem; font-weight: 700; color: #0B6B4F; }
.vc-price-card .vc-button { margin-top: auto; }

.vc-sponsor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; background: #F1F1EC; border-radius: 12px; padding: 0.8rem 1rem; margin: 0 0 1.2rem; }
.vc-sponsor-bar a { display: inline-flex; align-items: center; gap: 0.8rem; color: #1A2433; text-decoration: none; }
.vc-sponsor-bar img { max-height: 3rem; width: auto; }
.vc-sponsor-bar .vc-ad-label { margin: 0; }

.vc-biz-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; margin: 1.2rem 0; }
.vc-biz { display: flex; gap: 1rem; border: 2px solid #C9D2CC; border-radius: 14px; padding: 1.1rem; background: #FFFFFF; }
.vc-biz-featured { border-color: #B86E00; background: #FFFBF3; }
.vc-biz-logo { flex: none; }
.vc-biz-logo img { width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: 10px; background: #FFFFFF; }
.vc-biz-body { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; min-width: 0; }
.vc-biz-body h3 { margin: 0; font-size: 1.2rem; }
.vc-biz-body h3 a { color: #1A2433; }
.vc-biz-body p { margin: 0; }
.vc-biz-hero img { max-height: 10rem; width: auto; border-radius: 12px; margin: 0.6rem 0; }
.vc-contact-box { border: 2px solid #C9D2CC; border-radius: 16px; padding: 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem; }
.vc-contact-box h2 { font-size: 1.3rem; margin: 0; }
.vc-contact-box p { margin: 0; }
.vc-search-small { margin: 0 0 1rem; }

.vc-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.vc-pick { border: 2px solid #C9D2CC; border-radius: 14px; padding: 1rem; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.vc-pick h3 { margin: 0; font-size: 1.1rem; }
.vc-pick p { margin: 0; }
.vc-pick .vc-button { margin-top: auto; }
.vc-pick-img { width: 100%; height: 9rem; display: flex; align-items: center; justify-content: center; }
.vc-pick-img img { max-height: 9rem; width: auto; object-fit: contain; }
.vc-disclosure { font-size: 0.85rem; color: #3D4A5C; background: #F1F1EC; border-radius: 10px; padding: 0.6rem 0.9rem; }

.vc-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.vc-guide-card { display: flex; flex-direction: column; gap: 0.3rem; border: 2px solid #C9D2CC; border-radius: 14px; padding: 1.2rem; color: #1A2433; text-decoration: none; font-size: 1.1rem; }
.vc-guide-card:hover, .vc-guide-card:focus { border-color: #0B6B4F; background: #E8F3EE; color: #1A2433; }
.vc-guide-item { border-bottom: 2px solid #E3E8E4; padding: 1rem 0; }
.vc-guide-item h2 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.vc-sponsored-label { display: inline-block; background: #F1F1EC; border-radius: 8px; padding: 0.2rem 0.7rem; font-size: 0.9rem; color: #3D4A5C; }

.vc-shop-band { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; border: 2px solid #C9D2CC; border-radius: 16px; padding: 1.4rem; }
.vc-shop-band h2, .vc-shop-band p { margin: 0 0 0.3rem; }

.vc-newsletter { background: #1A2433; color: #FFFFFF; padding: 2.2rem 0; }
.vc-newsletter h2 { margin-bottom: 0.3rem; }
.vc-newsletter p { color: #D5DBE3; }
.vc-newsletter a { color: #FFFFFF; }

/* ---------- Footer ---------- */
.vc-footer { background: #1A2433; color: #FFFFFF; margin-top: 2rem; }
.vc-footer .vc-wrap { padding-top: 2rem; padding-bottom: 2rem; }
.vc-footer nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-bottom: 1rem; }
.vc-footer a { color: #FFFFFF; min-height: 2.2rem; display: inline-flex; align-items: center; }
.vc-footer p { color: #D5DBE3; font-size: 0.85rem; max-width: 45rem; margin-bottom: 0.5rem; }

@media (max-width: 600px) {
	.vc-hero h1 { font-size: 1.8rem; }
	h1 { font-size: 1.7rem; }
	.vc-nav { width: 100%; }
	.vc-nav a.vc-button { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }