/*
Theme Name: The Velvet Fox
Theme URI: https://cocktailbar-connector-elementor.hostinger-wp-tests.com/
Description: Speakeasy child theme for The Velvet Fox cocktail bar. Dark green and gold, built for Elementor.
Author: The Velvet Fox
Version: 1.0.5
Template: hello-elementor
Text Domain: velvet-fox
Tags: dark, elementor, restaurant
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
	--vf-green-900: #08150F;
	--vf-green-850: #0B1D15;
	--vf-green-800: #0F2A1E;
	--vf-green-700: #143829;
	--vf-green-600: #1B4C36;
	--vf-green-500: #246346;

	--vf-gold: #C9A96A;
	--vf-gold-light: #E8D3A0;
	--vf-gold-deep: #8E7538;

	--vf-cream: #F4EFE6;
	--vf-muted: #A7B6AB;

	--vf-font-display: "Cinzel", "Playfair Display", Georgia, serif;
	--vf-font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

	--vf-container: 1180px;
	--vf-radius: 2px;
	--vf-hairline: 1px solid rgba(201, 169, 106, 0.32);
	--vf-section-y: clamp(64px, 9vw, 132px);
}

/* Elementor boxed containers follow the site container width, with room to
   breathe on small screens. */
body .e-con.e-con-boxed > .e-con-inner {
	max-width: calc(var(--vf-container) + 48px);
	padding-left: 24px;
	padding-right: 24px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--vf-green-900);
	color: var(--vf-cream);
	font-family: var(--vf-font-body);
	font-size: 17px;
	font-weight: 300;
	line-height: 1.75;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
}

/* A very low-contrast art-deco wash behind the whole site. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: radial-gradient(circle at 20% 0%, rgba(27, 76, 54, 0.55) 0%, transparent 55%),
		radial-gradient(circle at 85% 15%, rgba(142, 117, 56, 0.18) 0%, transparent 45%);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vf-font-display);
	color: var(--vf-cream);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: 0.04em;
	margin: 0 0 0.6em;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
h4 { font-size: 1.2rem; }

p {
	margin: 0 0 1.15em;
}

a {
	color: var(--vf-gold);
	text-decoration: none;
	transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

a:hover,
a:focus {
	color: var(--vf-gold-light);
}

:focus-visible {
	outline: 2px solid var(--vf-gold);
	outline-offset: 3px;
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--vf-gold);
	color: var(--vf-green-900);
}

/* ==========================================================================
   3. Shared type helpers (used by Elementor widget CSS classes)
   ========================================================================== */

.vf-eyebrow,
.vf-eyebrow p {
	font-family: var(--vf-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.42em;
	text-transform: uppercase;
	color: var(--vf-gold);
	margin-bottom: 0.9em;
}

.vf-lead,
.vf-lead p {
	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	color: rgba(244, 239, 230, 0.86);
	line-height: 1.85;
}

.vf-body,
.vf-body p {
	color: rgba(244, 239, 230, 0.78);
}

.vf-center {
	text-align: center;
}

/* Gold hairline flourish under a heading. */
.vf-rule {
	display: block;
	width: 92px;
	height: 1px;
	margin: 1.6rem 0 0;
	background: linear-gradient(90deg, var(--vf-gold), rgba(201, 169, 106, 0));
}

.vf-center .vf-rule {
	margin-left: auto;
	margin-right: auto;
	background: linear-gradient(90deg, rgba(201, 169, 106, 0), var(--vf-gold), rgba(201, 169, 106, 0));
}

/* Art-deco diamond divider. */
.vf-diamond {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--vf-gold);
}

.vf-diamond::before,
.vf-diamond::after {
	content: "";
	height: 1px;
	width: min(110px, 22vw);
	background: linear-gradient(90deg, rgba(201, 169, 106, 0), var(--vf-gold));
}

.vf-diamond::after {
	background: linear-gradient(90deg, var(--vf-gold), rgba(201, 169, 106, 0));
}

/* ==========================================================================
   4. Elementor widget defaults, buttons and focus states

   Elementor prints its kit CSS after this stylesheet and Hello Elementor's
   reset styles [type=button], so both would win on source order at equal
   specificity. The `body` prefix buys back the cascade without !important.
   ========================================================================== */

/* Elementor paints heading widgets with its own global colour and Roboto. */
body .elementor-widget-heading .elementor-heading-title {
	font-family: var(--vf-font-display);
	font-weight: 400;
	color: var(--vf-cream);
	margin: 0;
}

body .vf-hero .elementor-heading-title {
	font-weight: 600;
}

/* Gold accents: card titles and menu group titles. */
body .vf-card .elementor-heading-title,
body .vf-menu-group > .elementor-widget-heading .elementor-heading-title {
	color: var(--vf-gold-light);
}

/* Gold accents: prices and the small strip labels. */
body .vf-strip-item .elementor-heading-title,
body .vf-drink-price .elementor-heading-title,
body .vf-pour-price .elementor-heading-title {
	color: var(--vf-gold);
}

body .elementor-widget-button .elementor-button,
body .elementor-button,
body .vf-btn,
body input[type="submit"],
body button[type="submit"] {
	font-family: var(--vf-font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	line-height: 1.4;
	padding: 1.05em 2.4em;
	border-radius: var(--vf-radius);
	border: 1px solid var(--vf-gold);
	background-color: transparent;
	color: var(--vf-gold);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body .elementor-widget-button .elementor-button:hover,
body .elementor-widget-button .elementor-button:focus,
body .elementor-button:hover,
body .elementor-button:focus,
body .vf-btn:hover,
body .vf-btn:focus,
body input[type="submit"]:hover,
body button[type="submit"]:hover {
	background-color: var(--vf-gold);
	color: var(--vf-green-900);
	border-color: var(--vf-gold);
}

/* Solid gold variant: add the vf-btn-solid class to the button widget. */
body .vf-btn-solid .elementor-button,
body .vf-btn-solid.vf-btn {
	background-color: var(--vf-gold);
	color: var(--vf-green-900);
}

body .vf-btn-solid .elementor-button:hover,
body .vf-btn-solid .elementor-button:focus,
body .vf-btn-solid.vf-btn:hover {
	background-color: var(--vf-gold-light);
	border-color: var(--vf-gold-light);
	color: var(--vf-green-900);
}

/* The theme reset draws a white halo on focus; keep it in the palette. */
body a:focus-visible,
body button:focus-visible,
body [type="button"]:focus-visible,
body [type="submit"]:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:not([tabindex="-1"]):focus-visible {
	box-shadow: none;
	outline: 2px solid var(--vf-gold-light);
	outline-offset: 3px;
}

/* ==========================================================================
   5. Header
   ========================================================================== */

.site-header.dynamic-header {
	position: sticky;
	top: 0;
	z-index: 200;
	padding: 0;
	background: rgba(8, 21, 15, 0.86);
	backdrop-filter: blur(10px);
	border-bottom: var(--vf-hairline);
	transition: background-color 0.3s ease, padding 0.3s ease;
}

.site-header .header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	width: 100%;
	max-width: var(--vf-container);
	margin: 0 auto;
	padding: 20px 24px;
}

.site-header .site-branding {
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
	flex-direction: row;
}

.site-header .site-branding::before {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	background: url("assets/img/fox-mark.svg") center / contain no-repeat;
	opacity: 0.95;
}

.site-header .site-title {
	margin: 0;
	font-family: var(--vf-font-display);
	font-size: 1.16rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.1;
}

.site-header .site-title a {
	color: var(--vf-cream);
}

.site-header .site-title a:hover {
	color: var(--vf-gold);
}

.site-header .site-description {
	display: none;
}

/* Desktop navigation */
.site-navigation ul {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 38px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-navigation li {
	position: relative;
}

.site-navigation a {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(244, 239, 230, 0.82);
	padding: 6px 0;
}

.site-navigation a::after {
	content: "";
	display: block;
	height: 1px;
	width: 0;
	margin-top: 5px;
	background: var(--vf-gold);
	transition: width 0.28s ease;
}

.site-navigation a:hover,
.site-navigation .current-menu-item > a,
.site-navigation .current_page_item > a,
.site-navigation .current-menu-parent > a {
	color: var(--vf-gold);
}

.site-navigation a:hover::after,
.site-navigation .current-menu-item > a::after,
.site-navigation .current_page_item > a::after {
	width: 100%;
}

/* Mobile toggle + dropdown. The parent theme's script toggles the
   .elementor-active class on the holder; the dropdown visibility is driven
   from that here so it does not depend on the parent stylesheet. */
.site-navigation-toggle-holder {
	padding: 0;
}

@media (min-width: 1025px) {
	body .site-header .site-navigation-toggle-holder,
	body .site-header .site-navigation-dropdown {
		display: none;
	}
}

@media (max-width: 1024px) {
	body .site-header .site-navigation {
		display: none;
	}

	body .site-header .site-navigation-toggle-holder {
		display: flex;
	}

	body .site-header .site-navigation-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		max-height: calc(100vh - 100%);
		overflow-y: auto;
	}

	body .site-header .site-navigation-toggle-holder.elementor-active + .site-navigation-dropdown {
		display: block;
	}
}

.site-navigation-toggle {
	background: transparent;
	border: 1px solid rgba(201, 169, 106, 0.5);
	border-radius: var(--vf-radius);
	color: var(--vf-gold);
	padding: 10px 12px;
}

.site-navigation-dropdown {
	background: var(--vf-green-850);
	border-top: var(--vf-hairline);
	border-bottom: var(--vf-hairline);
}

.site-navigation-dropdown ul {
	padding: 8px 0;
	margin: 0;
	list-style: none;
}

.site-navigation-dropdown li a {
	display: block;
	padding: 14px 26px;
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vf-cream);
	border-bottom: 1px solid rgba(201, 169, 106, 0.14);
}

.site-navigation-dropdown li a:hover {
	background: rgba(201, 169, 106, 0.1);
	color: var(--vf-gold);
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.site-footer {
	background: var(--vf-green-850);
	border-top: var(--vf-hairline);
	padding: 0;
}

.site-footer .footer-inner {
	max-width: var(--vf-container);
	margin: 0 auto;
	padding: 56px 24px 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
}

.site-footer .site-branding::before {
	content: "";
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto 14px;
	background: url("assets/img/fox-mark.svg") center / contain no-repeat;
	opacity: 0.9;
}

.site-footer .site-title {
	font-family: var(--vf-font-display);
	font-size: 1.05rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	margin: 0;
}

.site-footer .site-title a {
	color: var(--vf-cream);
}

.site-footer .site-description {
	color: var(--vf-muted);
	font-size: 0.85rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0;
}

.site-footer .site-navigation ul {
	flex-wrap: wrap;
	justify-content: center;
}

/* Extra footer block injected by the child theme. */
.vf-footer-meta {
	border-top: 1px solid rgba(201, 169, 106, 0.16);
	margin-top: 8px;
	padding-top: 26px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 28px;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vf-muted);
}

.vf-footer-legal {
	width: 100%;
	margin-top: 20px;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	color: rgba(167, 182, 171, 0.7);
}

/* ==========================================================================
   7. Page sections

   Every rule that sets a layout property Elementor's container CSS also sets
   (padding, gap, min-height, flex, text-align) is prefixed with `body`.
   Elementor prints frontend.min.css after this stylesheet, so at equal
   specificity it would otherwise win on source order.
   ========================================================================== */

body .vf-section {
	padding-top: var(--vf-section-y);
	padding-bottom: var(--vf-section-y);
}

body .vf-section-tight {
	padding-top: clamp(44px, 6vw, 78px);
	padding-bottom: clamp(44px, 6vw, 78px);
}

body .vf-center,
body .vf-center > .e-con-inner {
	text-align: center;
}

/* --------------------------------------------------------------- Hero ---- */

body .vf-hero {
	position: relative;
	min-height: clamp(560px, 80vh, 800px);
	padding-top: 90px;
	padding-bottom: 90px;
	justify-content: center;
	overflow: hidden;
	border-bottom: var(--vf-hairline);
	background:
		radial-gradient(ellipse at 50% 18%, rgba(201, 169, 106, 0.17) 0%, transparent 58%),
		linear-gradient(180deg, var(--vf-green-800) 0%, var(--vf-green-900) 100%);
}

body .vf-hero > .e-con-inner {
	justify-content: center;
	align-items: center;
	gap: 4px;
	position: relative;
	z-index: 2;
}

/* Dim-lit pools of light plus a faint art-deco lattice. */
.vf-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("assets/img/deco-pattern.svg") center top / 560px repeat;
	opacity: 0.14;
	pointer-events: none;
}

.vf-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(8, 21, 15, 0.88) 100%);
	pointer-events: none;
}

body .vf-hero .elementor-heading-title {
	letter-spacing: 0.1em;
	text-shadow: 0 2px 44px rgba(0, 0, 0, 0.65);
}

.vf-hero-sub,
.vf-hero-sub p {
	font-size: clamp(0.9rem, 1.3vw, 1.05rem);
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--vf-gold-light);
	margin: 0.6em 0 0;
}

body .vf-hero-lead {
	max-width: 620px;
	margin-top: 18px;
}

/* ------------------------------------------------- Panels and framing ---- */

body .vf-panel {
	background: var(--vf-green-850);
	border-top: var(--vf-hairline);
	border-bottom: var(--vf-hairline);
}

body .vf-panel-deep {
	background: linear-gradient(180deg, var(--vf-green-800), var(--vf-green-900));
	border-top: var(--vf-hairline);
	border-bottom: var(--vf-hairline);
}

body .vf-card {
	border: var(--vf-hairline);
	background: rgba(11, 29, 21, 0.6);
	border-radius: var(--vf-radius);
	padding: clamp(26px, 3vw, 40px);
	gap: 4px;
}

.vf-card h3 {
	font-size: 1.1rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ------------------------------------------------------- Page headers ---- */

body .vf-page-header {
	padding-top: clamp(96px, 11vw, 156px);
	padding-bottom: clamp(40px, 5vw, 68px);
	background: linear-gradient(180deg, var(--vf-green-800), var(--vf-green-900));
	border-bottom: var(--vf-hairline);
}

body .vf-page-header > .e-con-inner {
	max-width: 800px;
	align-items: center;
	gap: 2px;
}

/* ------------------------------------------------------- Button groups --- */

body .vf-hero-actions {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	width: auto;
	margin-top: 24px;
}

body .vf-featured-cta {
	margin-top: clamp(30px, 4vw, 50px);
	align-items: center;
}

/* ------------------------------------------------------ Two-column rows -- */

body .vf-story > .e-con-inner,
body .vf-jazz > .e-con-inner,
body .vf-visit > .e-con-inner {
	flex-direction: row;
	gap: clamp(32px, 4vw, 68px);
	align-items: flex-start;
}

body .vf-story-copy,
body .vf-jazz-copy,
body .vf-visit-info {
	flex: 1 1 auto;
	width: 58%;
	gap: 6px;
}

body .vf-story-aside,
body .vf-jazz-aside,
body .vf-visit-map {
	flex: 0 0 auto;
	width: 38%;
}

body .vf-story-copy .elementor-widget-button,
body .vf-jazz-copy .elementor-widget-button {
	margin-top: 18px;
}

/* Centred section intro. */
body .vf-section-head {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: clamp(34px, 4vw, 58px);
	align-items: center;
	gap: 2px;
}

/* -------------------------------------------------------- Hours strip ---- */

body .vf-strip {
	background: var(--vf-green-700);
	border-top: 1px solid rgba(201, 169, 106, 0.28);
	border-bottom: 1px solid rgba(201, 169, 106, 0.28);
}

body .vf-strip > .e-con-inner {
	flex-direction: row;
	gap: 28px;
}

body .vf-strip-item {
	width: 100%;
	text-align: center;
	align-items: center;
	gap: 0;
}

.vf-strip .vf-strip-item h3 {
	font-size: 0.76rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	margin-bottom: 0.6em;
}

.vf-strip .vf-strip-item p {
	margin: 0;
	font-size: 1rem;
	color: var(--vf-cream);
}

/* ------------------------------------------------------ Facts and cards -- */

.vf-facts ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vf-facts li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(201, 169, 106, 0.16);
}

.vf-facts li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.vf-facts strong {
	font-family: var(--vf-font-display);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--vf-gold);
}

.vf-facts span {
	color: rgba(244, 239, 230, 0.8);
	font-size: 0.95rem;
}

/* ----------------------------------------------------- Featured pours ---- */

body .vf-pours {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 22px;
	align-items: stretch;
}

body .vf-pour {
	width: auto;
	border: var(--vf-hairline);
	background: rgba(8, 21, 15, 0.5);
	border-radius: var(--vf-radius);
	padding: 30px 26px 32px;
	gap: 0;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

body .vf-pour:hover {
	border-color: rgba(201, 169, 106, 0.65);
	background: rgba(20, 56, 41, 0.45);
}

body .vf-pour-name .elementor-heading-title {
	font-size: 1.1rem;
	letter-spacing: 0.07em;
}

body .vf-pour-name {
	margin-bottom: 0.4em;
}

body .vf-pour-price .elementor-heading-title {
	font-size: 1rem;
	letter-spacing: 0.1em;
}

body .vf-pour-price {
	margin-bottom: 1em;
}

.vf-pour-note p {
	font-size: 0.9rem;
	color: rgba(244, 239, 230, 0.72);
	margin: 0;
}

/* ------------------------------------------------------ Practical notes -- */

body .vf-notes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 24px;
	align-items: stretch;
}

body .vf-note {
	width: auto;
}

/* --------------------------------------------------------------- CTA ----- */

body .vf-cta > .e-con-inner {
	max-width: 660px;
	align-items: center;
	gap: 2px;
}

/* ==========================================================================
   8. Cocktail menu list
   ========================================================================== */

body .vf-menu > .e-con-inner {
	max-width: 880px;
}

body .vf-menu-group {
	margin-bottom: clamp(40px, 5vw, 66px);
	gap: 4px;
}

.vf-menu-group h2 {
	font-size: clamp(1.3rem, 2.1vw, 1.65rem);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.vf-menu-note,
.vf-menu-note p {
	color: var(--vf-muted);
	font-size: 0.92rem;
	font-style: italic;
	letter-spacing: 0.02em;
}

body .vf-drinks {
	margin-top: 20px;
	gap: 0;
}

/* One drink: name and tasting note on the left, price on the right. */
body .vf-drink {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 22px;
	padding: 24px 0;
	border-bottom: 1px solid rgba(201, 169, 106, 0.16);
}

body .vf-drink:last-child {
	border-bottom: 0;
}

body .vf-drink-info {
	width: 100%;
	gap: 0;
	padding: 0;
}

body .vf-drink-name .elementor-heading-title {
	font-size: 1.18rem;
	letter-spacing: 0.07em;
}

body .vf-drink-name {
	margin-bottom: 0.4em;
}

/* Hairline leader so the eye travels down to the tasting note. */
.vf-drink-name::after {
	content: "";
	display: block;
	height: 1px;
	width: 52px;
	margin-top: 0.6em;
	background: linear-gradient(90deg, rgba(201, 169, 106, 0.6), rgba(201, 169, 106, 0));
}

.vf-drink-desc p {
	margin: 0;
	font-size: 0.95rem;
	color: rgba(244, 239, 230, 0.72);
	max-width: 56ch;
}

body .vf-drink-price {
	width: auto;
	margin: 0 0 0 auto;
}

body .vf-drink-price .elementor-heading-title {
	font-size: 1.14rem;
	letter-spacing: 0.06em;
	white-space: nowrap;
}

body .vf-menu-more {
	margin-bottom: clamp(40px, 5vw, 66px);
}

body .vf-menu-ask {
	gap: 2px;
	align-items: center;
}

body .vf-menu-ask .elementor-widget-button {
	margin-top: 22px;
}

/* ==========================================================================
   8b. Hours, address and map
   ========================================================================== */

.vf-hours-list ul {
	list-style: none;
	margin: 0 0 1.4em;
	padding: 0;
}

.vf-hours-list li {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(201, 169, 106, 0.16);
}

.vf-hours-list li:last-child {
	border-bottom: 0;
}

.vf-hours-list strong {
	font-family: var(--vf-font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vf-gold);
}

.vf-hours-list span {
	margin-left: auto;
	color: var(--vf-cream);
	white-space: nowrap;
}

/* The [vf_hours] shortcode renders the full seven-day version. */
.vf-hours {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vf-hours li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 13px 0;
	border-bottom: 1px solid rgba(201, 169, 106, 0.14);
}

.vf-hours li:last-child {
	border-bottom: 0;
}

.vf-hours .vf-day {
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vf-gold);
	min-width: 12ch;
}

.vf-hours .vf-time {
	margin-left: auto;
	color: var(--vf-cream);
}

.vf-hours li.vf-closed .vf-time {
	color: var(--vf-muted);
	font-style: italic;
}

/* Map: desaturated so it sits inside the dark palette. */
.vf-map iframe,
.vf-visit-map iframe,
.elementor-widget-google_maps iframe {
	filter: saturate(0.5) brightness(0.78) contrast(1.08);
	border: var(--vf-hairline);
	border-radius: var(--vf-radius);
	display: block;
	width: 100%;
}

body .vf-visit-info h2 {
	font-size: clamp(1.3rem, 2.1vw, 1.6rem);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-top: 1.4em;
}

body .vf-visit-info > .elementor-widget-heading:first-child h2 {
	margin-top: 0;
}

.vf-address {
	font-style: normal;
	line-height: 2;
	color: rgba(244, 239, 230, 0.84);
}

.vf-address strong {
	color: var(--vf-cream);
}

/* ==========================================================================
   9. Blog: archive, single, comments
   ========================================================================== */

.vf-blog-header {
	padding: clamp(70px, 9vw, 120px) 24px clamp(40px, 5vw, 64px);
	text-align: center;
	background: linear-gradient(180deg, var(--vf-green-800), var(--vf-green-900));
	border-bottom: var(--vf-hairline);
}

.vf-blog-header h1 {
	margin-bottom: 0.3em;
}

body.blog .site-main,
body.archive .site-main,
body.single .site-main,
body.search .site-main,
body.error404 .site-main,
body.page:not(.elementor-page) .site-main {
	max-width: var(--vf-container);
	margin: 0 auto;
	padding: clamp(48px, 6vw, 84px) 24px clamp(64px, 8vw, 110px);
}

body.single .site-main {
	max-width: 780px;
}

/* Archive grid */
.post-navigation,
.posts-navigation {
	margin-top: 56px;
	padding-top: 26px;
	border-top: var(--vf-hairline);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

article.post,
article.page {
	margin-bottom: 54px;
	padding-bottom: 54px;
	border-bottom: 1px solid rgba(201, 169, 106, 0.16);
}

article.post:last-of-type {
	border-bottom: 0;
}

.entry-title {
	font-size: clamp(1.6rem, 3vw, 2.3rem);
	margin-bottom: 0.35em;
}

.entry-title a {
	color: var(--vf-cream);
}

.entry-title a:hover {
	color: var(--vf-gold);
}

.entry-meta,
.post-meta,
.entry-footer {
	font-size: 0.74rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--vf-muted);
	margin-bottom: 1.4em;
}

.entry-meta a,
.entry-footer a {
	color: var(--vf-gold-deep);
}

.entry-meta a:hover,
.entry-footer a:hover {
	color: var(--vf-gold);
}

.post-thumbnail img {
	border: var(--vf-hairline);
	border-radius: var(--vf-radius);
	margin-bottom: 26px;
}

.entry-content > * {
	margin-bottom: 1.15em;
}

.entry-content h2,
.entry-content h3 {
	margin-top: 2em;
}

.entry-content blockquote {
	margin: 2em 0;
	padding: 4px 0 4px 26px;
	border-left: 2px solid var(--vf-gold);
	font-family: var(--vf-font-display);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--vf-gold-light);
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.4em;
}

.entry-content li {
	margin-bottom: 0.5em;
}

.entry-content hr {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(201, 169, 106, 0), var(--vf-gold), rgba(201, 169, 106, 0));
	margin: 2.6em 0;
}

/* Latest-news cards, from the [vf_latest_posts] shortcode */
.vf-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 26px;
}

.vf-news-card {
	display: flex;
	flex-direction: column;
	border: var(--vf-hairline);
	background: rgba(11, 29, 21, 0.55);
	border-radius: var(--vf-radius);
	padding: 30px 28px 32px;
	transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

.vf-news-card:hover {
	border-color: rgba(201, 169, 106, 0.72);
	background: rgba(20, 56, 41, 0.5);
	transform: translateY(-3px);
}

.vf-news-cat {
	font-size: 0.68rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--vf-gold);
	margin-bottom: 14px;
}

.vf-news-card h3 {
	font-size: 1.2rem;
	margin-bottom: 0.5em;
}

.vf-news-card h3 a {
	color: var(--vf-cream);
}

.vf-news-card h3 a:hover {
	color: var(--vf-gold);
}

.vf-news-date {
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vf-muted);
	margin-bottom: 14px;
}

.vf-news-excerpt {
	color: rgba(244, 239, 230, 0.74);
	font-size: 0.95rem;
	margin-bottom: 20px;
}

.vf-news-more {
	margin-top: auto;
	font-size: 0.72rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.vf-news-empty {
	color: var(--vf-muted);
	font-style: italic;
}

/* Comments */
.comments-area {
	margin-top: 64px;
	padding-top: 40px;
	border-top: var(--vf-hairline);
}

.comments-area input[type="text"],
.comments-area input[type="email"],
.comments-area input[type="url"],
.comments-area textarea,
.search-form input[type="search"] {
	width: 100%;
	background: rgba(8, 21, 15, 0.7);
	border: 1px solid rgba(201, 169, 106, 0.3);
	border-radius: var(--vf-radius);
	color: var(--vf-cream);
	padding: 13px 15px;
	font-family: var(--vf-font-body);
}

.comments-area input:focus,
.comments-area textarea:focus {
	border-color: var(--vf-gold);
	outline: none;
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.site-header .header-inner {
		padding: 16px 20px;
	}
}

/* Stack the two-column rows before the columns get too narrow to read. */
@media (max-width: 900px) {
	body .vf-story > .e-con-inner,
	body .vf-jazz > .e-con-inner,
	body .vf-visit > .e-con-inner {
		flex-direction: column;
	}

	body .vf-story-copy,
	body .vf-story-aside,
	body .vf-jazz-copy,
	body .vf-jazz-aside,
	body .vf-visit-info,
	body .vf-visit-map {
		flex: 1 1 auto;
		width: 100%;
	}

	body .vf-strip > .e-con-inner {
		flex-direction: column;
		gap: 34px;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 16px;
	}

	body .vf-drink {
		gap: 16px;
	}

	body .vf-drink-name .elementor-heading-title {
		font-size: 1.06rem;
	}

	.site-header .site-title {
		font-size: 1rem;
		letter-spacing: 0.16em;
	}

	.site-header .site-branding::before {
		width: 28px;
		height: 28px;
	}

	.vf-footer-meta {
		flex-direction: column;
		gap: 10px;
	}
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}