/*
Theme Name: Vista Bar Service
Theme URI: https://vistabarservice.com
Author: Vista Bar Service
Description: A refined full-site-editing theme for Vista Bar Service — luxury mobile bar and cocktail service for Napa, Sonoma, Marin, and San Francisco. Inspired by understated hotel-residence design: quiet stone tones, high-contrast serif display type, and generous whitespace.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vista-bar-service
Tags: full-site-editing, block-patterns, one-column
*/

/* ---------------------------------------------------------
   1. Foundations
--------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: #798D7D;
	color: #F4EFE4;
}

img { height: auto; }

/* Uppercase serif display treatment — the signature of the look */
h1, h2 {
	text-transform: uppercase;
}

/* ---------------------------------------------------------
   2. Utility type styles
--------------------------------------------------------- */

/* Small letterspaced label above headings (e.g. "VISTA BAR SERVICE") */
.vista-eyebrow {
	font-family: 'Jost', sans-serif;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #5E7263;
}

.vista-caption {
	font-family: 'Jost', sans-serif;
	font-size: 0.8rem;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: #6B7069;
}

/* Large serif pull-quote */
.vista-quote p {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 500;
	font-style: italic;
	line-height: 1.45;
	letter-spacing: 0.01em;
}

/* ---------------------------------------------------------
   3. Header
--------------------------------------------------------- */

.vista-header {
	padding: 1.1rem 2rem;
	border-bottom: 1px solid rgba(42, 50, 45, 0.08);
	background: #ECE9E1;
}

.vista-header .vista-logo img {
	max-width: 150px;
}

/* Navigation block — inline desktop links */
.vista-nav .wp-block-navigation-item__content {
	font-family: 'Jost', sans-serif;
	font-size: 0.74rem;
	font-weight: 400;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	text-decoration: none;
	color: #2A322D;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease;
}

.vista-nav .wp-block-navigation-item__content:hover {
	border-bottom-color: #798D7D;
	color: #2A322D;
}

/* Hamburger icon */
.vista-nav .wp-block-navigation__responsive-container-open,
.vista-nav .wp-block-navigation__responsive-container-close {
	color: #2A322D;
}

.vista-nav .wp-block-navigation__responsive-container-open svg,
.vista-nav .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Mobile overlay menu — full-screen stone panel, large serif links */
.vista-nav .wp-block-navigation__responsive-container.is-menu-open {
	background: #ECE9E1;
	padding: 5rem 2rem 2rem;
}

.vista-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center;
	justify-content: center;
}

.vista-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.9rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.4em 0;
	border-bottom: none;
}

/* ---------------------------------------------------------
   4. Buttons — slim uppercase pills
--------------------------------------------------------- */

.vista-pill .wp-block-button__link,
.wp-block-button.vista-pill > .wp-block-button__link {
	font-family: 'Jost', sans-serif;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	padding: 0.85em 2.6em;
	border-radius: 999px;
	background: transparent;
	color: #2A322D;
	border: 1px solid #2A322D;
	transition: background 0.3s ease, color 0.3s ease;
}

.vista-pill .wp-block-button__link:hover {
	background: #2A322D;
	color: #F4EFE4;
}

/* Solid variant */
.vista-pill-solid .wp-block-button__link {
	font-family: 'Jost', sans-serif;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	padding: 0.9em 2.8em;
	border-radius: 999px;
	background: #2A322D;
	color: #F4EFE4;
	border: 1px solid #2A322D;
	transition: opacity 0.3s ease;
}

.vista-pill-solid .wp-block-button__link:hover {
	opacity: 0.85;
	color: #F4EFE4;
}

/* Cream variants for dark/sage backgrounds */
.vista-pill-cream .wp-block-button__link {
	font-family: 'Jost', sans-serif;
	font-size: 0.72rem;
	font-weight: 400;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	padding: 0.85em 2.6em;
	border-radius: 999px;
	background: transparent;
	color: #EADAC1;
	border: 1px solid #EADAC1;
	transition: background 0.3s ease, color 0.3s ease;
}

.vista-pill-cream .wp-block-button__link:hover {
	background: #EADAC1;
	color: #2A322D;
}

/* ---------------------------------------------------------
   5. Hero covers
--------------------------------------------------------- */

.vista-hero {
	position: relative;
}

.vista-hero h1 {
	font-weight: 500;
	letter-spacing: 0.06em;
	color: #F4EFE4;
	text-transform: none;
	font-size: clamp(2.6rem, 6vw, 4.4rem);
}

.vista-hero .vista-hero-tag {
	font-family: 'Jost', sans-serif;
	font-size: 0.8rem;
	font-weight: 300;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #F4EFE4;
}

/* ---------------------------------------------------------
   6. Sections
--------------------------------------------------------- */

/* Subtle painterly brush accent, echoing the inspiration's texture */
.vista-brush {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%23d8d3c4' stroke-opacity='0.45' stroke-width='26' stroke-linecap='round'%3E%3Cpath d='M620 80 C 760 40, 850 120, 810 220 S 640 360, 720 470'/%3E%3Cpath d='M680 60 C 800 30, 880 140, 830 250'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right -120px top -60px;
}

.vista-brush-left {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%23d8d3c4' stroke-opacity='0.4' stroke-width='26' stroke-linecap='round'%3E%3Cpath d='M280 520 C 140 560, 50 480, 90 380 S 260 240, 180 130'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left -140px bottom -80px;
}

/* Image tile navigation strip (the four linked tiles) */
.vista-tiles .wp-block-cover {
	min-height: 240px;
}

.vista-tiles .wp-block-cover h3 a {
	font-family: 'Jost', sans-serif;
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #F4EFE4;
	text-decoration: none;
}

.vista-tiles .wp-block-cover:hover h3 a {
	border-bottom: 1px solid #F4EFE4;
}

/* Package cards */
.vista-package {
	border-top: 1px solid rgba(42, 50, 45, 0.25);
	padding-top: 2rem;
}

.vista-package h3 {
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.vista-package ul {
	list-style: none;
	padding-left: 0;
	font-size: 0.95rem;
	font-weight: 300;
}

.vista-package ul li {
	padding: 0.55rem 0;
	border-bottom: 1px solid rgba(42, 50, 45, 0.1);
}

/* ---------------------------------------------------------
   7. Footer / Inquire band
--------------------------------------------------------- */

.vista-footer {
	background: #798D7D;
	color: #F4EFE4;
}

.vista-footer h2,
.vista-footer h3 {
	color: #F4EFE4;
}

.vista-footer a {
	color: #F4EFE4;
}

.vista-footer .vista-eyebrow {
	color: #EADAC1;
}

.vista-footer-legal {
	font-family: 'Jost', sans-serif;
	font-size: 0.68rem;
	font-weight: 300;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(244, 239, 228, 0.75);
}

.vista-footer-contact p {
	font-family: 'Cormorant Garamond', serif;
	font-size: 1.35rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------
   8. Forms — underline inputs like the inspiration
   (styles WPForms, Contact Form 7, and plain HTML forms)
--------------------------------------------------------- */

.vista-form input[type="text"],
.vista-form input[type="email"],
.vista-form input[type="tel"],
.vista-form select,
.vista-form textarea,
.vista-form .wpforms-field input,
.vista-form .wpforms-field select,
.vista-form .wpforms-field textarea,
.vista-form .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid rgba(42, 50, 45, 0.4) !important;
	border-radius: 0 !important;
	padding: 0.7em 0 !important;
	font-family: 'Jost', sans-serif !important;
	font-weight: 300 !important;
	font-size: 0.95rem !important;
	color: #2A322D !important;
	box-shadow: none !important;
}

.vista-form input:focus,
.vista-form textarea:focus,
.vista-form select:focus {
	outline: none !important;
	border-bottom-color: #5E7263 !important;
}

.vista-form label,
.vista-form .wpforms-field-label {
	font-family: 'Jost', sans-serif !important;
	font-size: 0.7rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.28em !important;
	text-transform: uppercase !important;
	color: #2A322D !important;
}

.vista-form input[type="submit"],
.vista-form button[type="submit"],
.vista-form .wpforms-submit,
.vista-form .wpcf7-submit {
	font-family: 'Jost', sans-serif !important;
	font-size: 0.72rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.26em !important;
	text-transform: uppercase !important;
	padding: 0.9em 2.8em !important;
	border-radius: 999px !important;
	background: #2A322D !important;
	color: #F4EFE4 !important;
	border: 1px solid #2A322D !important;
	cursor: pointer;
	width: auto !important;
	transition: opacity 0.3s ease;
}

.vista-form input[type="submit"]:hover,
.vista-form .wpforms-submit:hover,
.vista-form .wpcf7-submit:hover {
	opacity: 0.85;
}

/* Forms placed on the sage footer band */
.vista-footer .vista-form input,
.vista-footer .vista-form select,
.vista-footer .vista-form textarea {
	color: #F4EFE4 !important;
	border-bottom-color: rgba(244, 239, 228, 0.5) !important;
}

.vista-footer .vista-form label {
	color: #F4EFE4 !important;
}

/* ---------------------------------------------------------
   9. Responsive & motion
--------------------------------------------------------- */

@media (max-width: 781px) {
	.vista-header { padding: 0.9rem 1rem; }
	.vista-header .vista-logo img { max-width: 120px; }
	.vista-header-right { gap: 1rem !important; }
	.vista-header-cta .wp-block-button__link { padding: 0.7em 1.6em; font-size: 0.66rem; }
	.vista-tiles .wp-block-cover { min-height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}