/*
Theme Name: VizX Studio
Theme URI: https://www.vizxdesign.com
Author: VizX Design Studios
Description: Custom block theme for VizX Design Studios — Elevated Outdoor Living. Modern, light-to-dark layout with VizX blue, charcoal and lime accents.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vizx-studio
*/

/* ---------- Basics ---------- */
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }

/* Eyebrow label above section headings (matches the logo tagline) */
.vx-eyebrow {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	margin-bottom: 18px !important;
}
.vx-label {
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	margin: 0 0 8px !important;
}
.vx-muted { color: var(--wp--preset--color--slate); }
.vx-lead { font-size: 19px; line-height: 1.6; color: var(--wp--preset--color--slate); }
.vx-small { font-size: 14px; }

/* ---------- Sections ---------- */
.vx-section {
	padding-top: clamp(72px, 9vw, 120px);
	padding-bottom: clamp(72px, 9vw, 120px);
}
.vx-mist { background: var(--wp--preset--color--mist); }
.vx-rule-top { border-top: 1px solid var(--wp--preset--color--line); }
.vx-section-head { margin-bottom: 44px !important; }

/* ---------- Header ---------- */
.vx-header {
	background: #fff;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 14px;
	padding-bottom: 14px;
}
.vx-header .vx-logo { margin: 0; }
.vx-header .vx-logo img { height: 58px; width: auto !important; display: block; }
.vx-header .wp-block-navigation a { text-decoration: none; }
.vx-header .wp-block-navigation__container { gap: 30px; }
.vx-header-actions { gap: 30px !important; }

/* ---------- Buttons ---------- */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--charcoal);
	border: 1px solid #C9D1D5;
	padding: 15px 24px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--charcoal);
	background: transparent;
	color: var(--wp--preset--color--charcoal);
}
.wp-block-button.vx-btn-dark > .wp-block-button__link { background: var(--wp--preset--color--charcoal); }
.wp-block-button.vx-btn-dark > .wp-block-button__link:hover { background: #000; }
.wp-block-button.vx-btn-dark > .wp-block-button__link::after,
.wp-block-button.vx-btn-arrow > .wp-block-button__link::after {
	content: "\2192";
	margin-left: 12px;
	color: var(--wp--preset--color--lime);
	font-weight: 700;
}
.vx-link-arrow a { font-weight: 600; text-decoration: none; }
.vx-link-arrow a::after { content: " \2192"; color: var(--wp--preset--color--blue); }

/* ---------- Photos ---------- */
.vx-photo { margin: 0 !important; width: 100%; }
.vx-photo a { display: block; }
.vx-photo img { display: block; width: 100% !important; object-fit: cover; border-radius: 8px; }
.vx-photo--wide img { height: 560px; }
.vx-photo--square img { height: 520px; }
.wp-block-gallery.vx-gallery img { border-radius: 8px; height: 320px !important; object-fit: cover; }

/* Page hero (inner pages) */
.vx-page-hero { padding-top: clamp(56px, 8vw, 100px); padding-bottom: 40px; }
.vx-page-hero h1 { max-width: 15ch; }
.vx-page-hero .vx-lead { max-width: 640px; }

/* Facts row on project pages */
.vx-facts { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); padding: 22px 0; margin-top: 32px !important; }
.vx-facts p { margin: 0; font-size: 15px; }
.vx-facts .vx-label { margin-bottom: 4px !important; }

/* Checklist */
.vx-check { list-style: none; padding-left: 0; }
.vx-check li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.vx-check li::before { content: "\2713"; position: absolute; left: 0; color: var(--wp--preset--color--blue); font-weight: 700; }

/* FAQ */
.vx-faq .wp-block-details { border-bottom: 1px solid var(--wp--preset--color--line); padding: 20px 0; }
.vx-faq .wp-block-details summary { font-weight: 600; font-size: 18px; cursor: pointer; }
.vx-faq .wp-block-details p { color: var(--wp--preset--color--slate); margin-top: 12px; }

/* Project grid (archive) */
.vx-project-grid .wp-block-post-title { margin: 4px 0 0; font-size: 22px; }
.vx-project-grid .wp-block-post-terms { margin-top: 16px; }
.vx-project-grid .wp-block-post-terms a { text-decoration: none; color: var(--wp--preset--color--blue); }
.vx-terms a { text-decoration: none; }
.vx-photo--hero img { height: 640px; }
.vx-photo--tall img { height: 380px; }
.vx-photo--card img { height: 300px; border-radius: 8px 8px 0 0; }
.vx-photo--feature img { height: 600px; }
.vx-photo--half img { height: 260px; }
.wp-block-post-featured-image.vx-photo img { border-radius: 8px; }

/* ---------- Hero ---------- */
.vx-hero { padding-top: clamp(40px, 6vw, 64px); }
.vx-hero h1 { margin-top: 0; }
.vx-hero-media { position: relative; }
.vx-float {
	position: absolute;
	left: 24px;
	bottom: 24px;
	max-width: 340px;
	background: #fff;
	border-radius: 8px;
	padding: 18px 22px;
	box-shadow: 0 12px 32px rgba(15, 26, 32, 0.14);
}
.vx-float p { margin: 0; font-size: 14px; line-height: 1.45; }
.vx-float p strong { display: block; font-size: 15px; }
.vx-trust { gap: 28px !important; margin-top: 40px !important; }
.vx-trust p { margin: 0; font-size: 14px; color: var(--wp--preset--color--slate); }
.vx-trust strong { color: var(--wp--preset--color--charcoal); }

/* ---------- Cards ---------- */
.vx-card { background: #fff; border-radius: 8px; overflow: hidden; height: 100%; }
.vx-card-body { padding: 26px 26px 30px; }
.vx-card-body p { margin: 0; }
.vx-tile h3 { margin: 18px 0 4px; font-size: 21px; }
.vx-tile p { margin: 0; font-size: 15px; }
.vx-project h3 { margin: 6px 0 0; }
.vx-project .vx-label { margin-top: 18px !important; }

/* ---------- Process ---------- */
.vx-steps { border-top: 2px solid var(--wp--preset--color--charcoal); padding-top: 28px; }
.vx-step-num { font-weight: 700; color: var(--wp--preset--color--blue); margin: 0 0 18px !important; }
.vx-steps h3 { margin: 0 0 10px; font-size: 19px; }
.vx-steps p { font-size: 15px; }

/* ---------- Investment ---------- */
.vx-price { background: #fff; border-radius: 8px; padding: 12px 32px; }
.vx-price-row { padding: 22px 0; border-bottom: 1px solid var(--wp--preset--color--line); }
.vx-price-row:last-child { border-bottom: 0; }
.vx-price-row p { margin: 0; font-size: 17px; }
.vx-price-label { font-weight: 600; }

/* ---------- Reviews ---------- */
.vx-review { border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 32px; height: 100%; }
.vx-stars { color: var(--wp--preset--color--lime); letter-spacing: 3px; margin: 0 0 18px !important; }
.vx-review-text { font-size: 18px; line-height: 1.55; }
.vx-review-name { font-size: 14px; font-weight: 600; color: var(--wp--preset--color--slate); }

/* ---------- Dark sections (bottom of every page) ---------- */
.vx-dark { background: var(--wp--preset--color--navy); color: #fff; }
.vx-dark h1, .vx-dark h2, .vx-dark h3 { color: #fff; }
.vx-dark .vx-eyebrow { color: var(--wp--preset--color--sky); }
.vx-dark .vx-muted, .vx-dark .vx-lead { color: var(--wp--preset--color--fog); }
.vx-dark a { color: #fff; }

/* Contact form inside dark section (Jetpack form) */
.vx-dark .wp-block-jetpack-contact-form label,
.vx-dark .grunion-field-label { color: var(--wp--preset--color--fog); font-size: 13px; font-weight: 600; }
.vx-dark .wp-block-jetpack-contact-form input:not([type=checkbox]):not([type=radio]),
.vx-dark .wp-block-jetpack-contact-form select,
.vx-dark .wp-block-jetpack-contact-form textarea {
	background: #17252D;
	border: 1px solid #2C3D46;
	border-radius: 6px;
	color: #fff;
	font: inherit;
	font-size: 16px;
	padding: 13px 16px;
	min-height: 48px;
}

/* ---------- Footer ---------- */
.vx-footer { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--fog); border-top: 1px solid #1E2D35; padding-top: 72px; padding-bottom: 36px; }
.vx-footer p { font-size: 14px; margin: 0; }
.vx-footer a { color: var(--wp--preset--color--fog); text-decoration: none; }
.vx-footer a:hover { color: #fff; }
.vx-footer .vx-footer-title { color: #fff; font-weight: 700; margin-bottom: 8px; }
.vx-footer .vx-footer-links p { line-height: 2; }
.vx-footer .vx-logo-white img { height: 70px; width: auto !important; }
.vx-footer-bottom { border-top: 1px solid #1E2D35; padding-top: 24px; margin-top: 44px !important; }
.vx-footer-bottom p { font-size: 13px; color: #8798A0; }

/* ---------- Blog ---------- */
.vx-post-grid .wp-block-post-title { margin: 6px 0 8px; font-size: 22px; }
.vx-post-grid .wp-block-post-date { margin-top: 18px; }

/* ---------- Mobile ---------- */
@media (max-width: 781px) {
	.vx-photo--hero img { height: 420px; }
	.vx-photo--feature img { height: 380px; }
	.vx-photo--tall img { height: 320px; }
	.vx-header .vx-logo img { height: 46px; }
	.vx-float { position: static; margin-top: 16px; max-width: none; box-shadow: none; border: 1px solid var(--wp--preset--color--line); }
	.vx-price { padding: 4px 20px; }
}