/* ==========================================================================
   The Vintage Marquee — design layer
   Ported from the base44 prototype onto the Solene theme.

   Tokens and type scale are taken verbatim from the prototype bundle, so
   colours here match the mockups exactly rather than being eyeballed.

   Sections:
     1. Tokens
     2. Typography
     3. Buttons
     4. Header
     5. Section titles / eyebrows
     6. Forms
     7. Footer
     8. Reusable blocks (.vm-*) for Elementor HTML widgets
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
	--vm-gold:        #a68a56;
	--vm-gold-light:  #d9c59d;
	--vm-gold-tint:   #e4d3af;
	--vm-gold-mid:    #cdb889;
	--vm-gold-dark:   #8b7245;

	--vm-cream:       #fcfaf7;
	--vm-cream-deep:  #f4f1ec;

	--vm-ink:         #1a1a1a;
	--vm-ink-soft:    rgba(26, 26, 26, .68);
	--vm-ink-faint:   rgba(26, 26, 26, .45);

	--vm-display: "Cormorant Garamond", Georgia, serif;
	--vm-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

	/* The prototype leans on wide tracking for every uppercase label. */
	--vm-track-eyebrow: .32em;
	--vm-track-button:  .2em;
	--vm-track-nav:     .18em;
}


/* 2. Typography
   ==========================================================================
   Solene sets Muli as the body face. We swap in Inter and let Cormorant
   Garamond (already enqueued by the theme) carry all display type. */

body,
body p,
input, textarea, select, button,
.eltdf-st-text,
.widget,
.eltdf-page-footer {
	font-family: var(--vm-body);
	font-weight: 300;
	color: var(--vm-ink-soft);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: var(--vm-cream);
	font-size: 16px;
	line-height: 1.75;
	letter-spacing: .005em;
}

h1, h2, h3, h4, h5, h6,
.eltdf-st-title,
.eltdf-section-title-holder h1,
.eltdf-section-title-holder h2,
.eltdf-section-title-holder h3 {
	font-family: var(--vm-display);
	font-weight: 300;
	color: var(--vm-ink);
	letter-spacing: -.01em;
	line-height: 1.05;
}

h1, .eltdf-st-title h1 { font-size: clamp(2.75rem, 7.5vw, 5.25rem); line-height: .98; }
h2, .eltdf-st-title h2 { font-size: clamp(2.25rem, 5.5vw, 4rem);    line-height: 1.02; }
h3, .eltdf-st-title h3 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.1;  }
h4                     { font-size: clamp(1.4rem, 2.4vw, 1.875rem); line-height: 1.2;  }

/* The mockups set the second line of every display heading in italic.
   Wrap that line in <em> in Elementor and it picks this up. */
h1 em, h2 em, h3 em,
.eltdf-st-title em {
	font-style: italic;
	font-weight: 300;
	display: block;
}

a         { color: var(--vm-gold); transition: color .35s ease; }
a:hover   { color: var(--vm-gold-dark); }

::selection { background: var(--vm-gold-tint); color: var(--vm-ink); }


/* 3. Buttons
   ==========================================================================
   Prototype uses a thin-rule ghost button with very wide tracking and a
   trailing arrow. Solene's outline button is the closest existing element. */

.eltdf-btn.eltdf-btn-outline,
.eltdf-btn.eltdf-btn-solid,
.wpcf7-form-control.wpcf7-submit {
	font-family: var(--vm-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: var(--vm-track-button);
	text-transform: uppercase;
	border-radius: 0;
	padding: 22px 42px;
	line-height: 1;
	transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

.eltdf-btn.eltdf-btn-outline {
	border: 1px solid var(--vm-gold);
	color: var(--vm-gold);
	background-color: transparent;
}

.eltdf-btn.eltdf-btn-outline:hover {
	background-color: var(--vm-gold);
	border-color: var(--vm-gold);
	color: #fff;
}

.eltdf-btn.eltdf-btn-solid,
.wpcf7-form-control.wpcf7-submit {
	background-color: var(--vm-gold);
	border: 1px solid var(--vm-gold);
	color: #fff;
}

.eltdf-btn.eltdf-btn-solid:hover,
.wpcf7-form-control.wpcf7-submit:hover {
	background-color: var(--vm-gold-dark);
	border-color: var(--vm-gold-dark);
	color: #fff;
}

/* Solene animates two pseudo-rules across outline buttons on hover. That
   fights the fill above, so it is disabled. */
.eltdf-btn-outline-horizontal-lines,
.eltdf-btn-outline-vertical-lines {
	display: none;
}

/* Buttons sitting on a photo or the gold band. */
.vm-on-dark .eltdf-btn.eltdf-btn-outline,
.eltdf-btn.eltdf-btn-outline.vm-light {
	border-color: rgba(255, 255, 255, .55);
	color: #fff;
}

.vm-on-dark .eltdf-btn.eltdf-btn-outline:hover,
.eltdf-btn.eltdf-btn-outline.vm-light:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--vm-ink);
}


/* 4. Header
   ========================================================================== */

.eltdf-page-header .eltdf-logo-wrapper a,
.eltdf-mobile-header .eltdf-mobile-logo-wrapper a {
	font-family: var(--vm-display);
}

.eltdf-main-menu > ul > li > a {
	font-family: var(--vm-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: var(--vm-track-nav);
	text-transform: uppercase;
}

/* Nav links sit on light surfaces here — the hero banner is cream where the
   menu sits, inner pages have a white header, and the sticky bar is cream.
   So ink is the correct default; white is only used inside .vm-on-dark. */
.eltdf-main-menu > ul > li > a,
.eltdf-light-header .eltdf-main-menu > ul > li > a,
.eltdf-sticky-header .eltdf-main-menu > ul > li > a {
	color: var(--vm-ink) !important;
}

.eltdf-main-menu > ul > li:hover > a,
.eltdf-main-menu > ul > li.current-menu-item > a,
.eltdf-light-header .eltdf-main-menu > ul > li:hover > a,
.eltdf-sticky-header .eltdf-main-menu > ul > li:hover > a {
	color: var(--vm-gold) !important;
}

/* Only the NON-sticky ("default") nav flips to white, and only on pages whose
   header overlays the dark photographic hero. The sticky nav keeps its own
   class (.eltdf-sticky-nav) so it can never be caught by this rule — that is
   what previously left white links on the cream sticky bar. */
.vm-header-on-dark .eltdf-default-nav > ul > li > a {
	color: rgba(255, 255, 255, .94) !important;
}

.vm-header-on-dark .eltdf-default-nav > ul > li:hover > a,
.vm-header-on-dark .eltdf-default-nav > ul > li.current-menu-item > a {
	color: var(--vm-gold-light) !important;
}

.eltdf-sticky-header {
	background-color: rgba(252, 250, 247, .96) !important;
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	box-shadow: 0 1px 0 rgba(26, 26, 26, .06);
}

.eltdf-sticky-header .eltdf-main-menu > ul > li > a { color: var(--vm-ink); }


/* Header INQUIRE button (injected by vm-header.js)
   ---------------------------------------------------------------- */

.eltdf-main-menu > ul > li.vm-inquire-li {
	display: flex;
	align-items: center;
	margin-left: 26px;
	padding-left: 0;
}

.eltdf-main-menu > ul > li.vm-inquire-li > a.vm-inquire-btn {
	display: inline-flex;
	align-items: center;
	height: auto;
	padding: 13px 30px !important;
	border: 1px solid var(--vm-gold);
	color: var(--vm-gold) !important;
	font-family: var(--vm-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: var(--vm-track-button);
	text-transform: uppercase;
	line-height: 1;
	transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

.eltdf-main-menu > ul > li.vm-inquire-li > a.vm-inquire-btn:hover {
	background-color: var(--vm-gold);
	border-color: var(--vm-gold);
	color: #fff !important;
}

.eltdf-main-menu > ul > li.vm-inquire-li > a.vm-inquire-btn .item_text::after {
	display: none !important;
}

/* Over the dark hero the button inverts — again, default nav only, so the
   sticky bar keeps the gold-on-cream treatment. */
.vm-header-on-dark .eltdf-default-nav > ul > li.vm-inquire-li > a.vm-inquire-btn {
	border-color: rgba(255, 255, 255, .65);
	color: #fff !important;
}

.vm-header-on-dark .eltdf-default-nav > ul > li.vm-inquire-li > a.vm-inquire-btn:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--vm-gold) !important;
}

/* Mobile menu: full-width gold button. */
.eltdf-mobile-nav .vm-inquire-li { padding: 12px 0; }

.eltdf-mobile-nav .vm-inquire-li > a.vm-inquire-btn {
	display: block;
	text-align: center;
	background-color: var(--vm-gold);
	color: #fff !important;
	padding: 16px 20px !important;
	font-family: var(--vm-body);
	font-size: 12px;
	letter-spacing: var(--vm-track-button);
	text-transform: uppercase;
	border: 0;
}


/* 5. Section titles and eyebrows
   ==========================================================================
   The small letterspaced gold label above every heading. Solene has no
   dedicated element for it, so add class "vm-eyebrow" to a text widget. */

.vm-eyebrow,
.eltdf-st-tagline {
	display: block;
	font-family: var(--vm-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: var(--vm-track-eyebrow);
	text-transform: uppercase;
	color: var(--vm-gold);
	margin: 0 0 26px;
	line-height: 1.4;
}

.vm-on-dark .vm-eyebrow,
.vm-eyebrow.vm-light {
	color: rgba(255, 255, 255, .72);
}

.eltdf-section-title-holder { margin-bottom: 0; }

.eltdf-st-text {
	font-size: 17px;
	line-height: 1.8;
	color: var(--vm-ink-soft);
	max-width: 46ch;
	margin-top: 26px;
}

.eltdf-st-title-holder.eltdf-st-center .eltdf-st-text,
.eltdf-section-title-holder[class*="center"] .eltdf-st-text {
	margin-left: auto;
	margin-right: auto;
}

.vm-on-dark .eltdf-st-title,
.vm-on-dark h1, .vm-on-dark h2, .vm-on-dark h3,
.vm-on-dark .eltdf-st-text,
.vm-on-dark p {
	color: #fff;
}

.vm-on-dark .eltdf-st-text,
.vm-on-dark p { color: rgba(255, 255, 255, .78); }


/* 6. Forms — Contact Form 7
   ==========================================================================
   Prototype uses underline-only fields with a gold focus rule. */

.wpcf7 label,
.vm-field-label {
	display: block;
	font-family: var(--vm-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: var(--vm-track-eyebrow);
	text-transform: uppercase;
	color: var(--vm-ink-faint);
	margin-bottom: 10px;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
	font-family: var(--vm-body);
	font-size: 16px;
	font-weight: 300;
	color: var(--vm-ink);
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid rgba(26, 26, 26, .18);
	border-radius: 0;
	padding: 12px 0;
	width: 100%;
	transition: border-color .35s ease;
}

.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	outline: none;
	border-bottom-color: var(--vm-gold);
	box-shadow: none;
}

.wpcf7 ::placeholder { color: var(--vm-ink-faint); opacity: 1; }

.wpcf7 textarea { min-height: 130px; resize: vertical; }

.wpcf7 .wpcf7-not-valid-tip { color: #b4442f; font-size: 12px; letter-spacing: .04em; }

.wpcf7 form .wpcf7-response-output {
	border: 0;
	border-left: 2px solid var(--vm-gold);
	background: var(--vm-cream-deep);
	margin: 24px 0 0;
	padding: 14px 18px;
	font-size: 14px;
}


/* 7. Footer
   ========================================================================== */

.eltdf-page-footer {
	background-color: var(--vm-cream-deep);
	color: var(--vm-ink-soft);
}

.eltdf-page-footer h2,
.eltdf-page-footer h3,
.eltdf-page-footer h4 { color: var(--vm-ink); }

.eltdf-page-footer a          { color: var(--vm-ink-soft); }
.eltdf-page-footer a:hover    { color: var(--vm-gold); }

.eltdf-page-footer .eltdf-footer-bottom-holder {
	border-top: 1px solid rgba(26, 26, 26, .08);
	font-size: 12px;
	letter-spacing: .06em;
}


/* 8. Reusable blocks
   ==========================================================================
   These are the pieces the mockups have but Solene does not ship. Drop an
   Elementor "HTML" widget into a section and paste the markup noted above
   each block. No page builder work beyond that.
   ========================================================================== */


/* 8a. Gold CTA band — "Will yours be our next masterpiece?"
   ------------------------------------------------------------------
   <section class="vm-cta vm-on-dark">
     <span class="vm-eyebrow vm-light">Your date deserves a setting</span>
     <h2 class="vm-cta__title">Will yours be our <em>next masterpiece?</em></h2>
     <a class="vm-ghost" href="/contact/">Check your date <i>&#8599;</i></a>
     <p class="vm-cta__foot">The Vintage Marquee &middot; Islamabad &amp; Rawalpindi</p>
   </section>
   ------------------------------------------------------------------ */

.vm-cta {
	background-color: var(--vm-gold);
	color: #fff;
	text-align: center;
	padding: clamp(90px, 14vw, 180px) 24px;
}

.vm-cta .vm-eyebrow { color: rgba(255, 255, 255, .75); }

.vm-cta__title {
	font-family: var(--vm-display);
	font-weight: 300;
	color: #fff;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	line-height: 1.05;
	margin: 0 0 52px;
}

.vm-cta__title em { font-style: italic; display: block; }

.vm-cta__foot {
	margin: 56px 0 0;
	font-size: 14px;
	color: rgba(255, 255, 255, .75);
	letter-spacing: .02em;
}

/* Ghost button used inside .vm-cta and over hero imagery. */
.vm-ghost {
	display: inline-flex;
	align-items: center;
	gap: 18px;
	font-family: var(--vm-body);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: var(--vm-track-button);
	text-transform: uppercase;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .6);
	padding: 22px 40px;
	text-decoration: none;
	transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

.vm-ghost i { font-style: normal; font-size: 14px; transition: transform .4s ease; }
.vm-ghost:hover { background-color: #fff; border-color: #fff; color: var(--vm-gold); }
.vm-ghost:hover i { transform: translate(3px, -3px); }


/* 8b. Numbered service cards — Weddings / Corporate / Catering
   ------------------------------------------------------------------
   <div class="vm-cards">
     <article class="vm-card">
       <img src="IMAGE_URL" alt="Weddings">
       <div class="vm-card__body">
         <span class="vm-card__num">01</span>
         <h3 class="vm-card__title">Weddings</h3>
         <p class="vm-card__text">Grand beginnings staged with timeless
            floral artistry and effortless hospitality.</p>
       </div>
     </article>
     ... repeat for 02 Corporate, 03 Catering ...
   </div>
   ------------------------------------------------------------------ */

.vm-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.vm-card {
	position: relative;
	overflow: hidden;
	min-height: clamp(420px, 62vh, 620px);
	display: flex;
	align-items: flex-end;
	isolation: isolate;
}

.vm-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 1.2s cubic-bezier(.16, .84, .44, 1);
}

/* Scrim so the white overlay type stays legible on any photograph. */
.vm-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgba(20, 16, 10, .78) 0%,
		rgba(20, 16, 10, .38) 42%,
		rgba(20, 16, 10, 0) 72%
	);
}

.vm-card:hover img { transform: scale(1.05); }

.vm-card__body { padding: clamp(28px, 5vw, 52px); width: 100%; }

.vm-card__num {
	display: block;
	font-family: var(--vm-body);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .22em;
	color: rgba(255, 255, 255, .7);
	margin-bottom: 6px;
}

.vm-card__title {
	font-family: var(--vm-display);
	font-weight: 300;
	color: #fff;
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	line-height: 1;
	margin: 0 0 18px;
}

.vm-card__text {
	font-family: var(--vm-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .85);
	margin: 0;
	max-width: 42ch;
}


/* 8c. Intro block — "Every occasion distinctly yours."
   ------------------------------------------------------------------
   <div class="vm-intro">
     <h2 class="vm-intro__title">Every occasion <em>distinctly yours.</em></h2>
     <p class="vm-intro__text">From the first sketch to the final course, our
        team composes each celebration around your story.</p>
   </div>
   ------------------------------------------------------------------ */

.vm-intro { padding: clamp(70px, 11vw, 150px) 0 clamp(40px, 6vw, 70px); }

.vm-intro__title {
	font-family: var(--vm-display);
	font-weight: 300;
	font-size: clamp(2.5rem, 6.5vw, 4.5rem);
	line-height: 1.02;
	color: var(--vm-ink);
	margin: 0 0 30px;
}

.vm-intro__title em { font-style: italic; display: block; }

.vm-intro__text {
	font-family: var(--vm-body);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.8;
	color: var(--vm-ink-soft);
	max-width: 52ch;
	margin: 0;
}


/* 8d. Hero overlay — for the existing full-bleed hero section
   ------------------------------------------------------------------
   Add class "vm-hero" to the Elementor section, or wrap hero copy in:
   <div class="vm-hero__copy"> ... </div>
   ------------------------------------------------------------------ */

.vm-hero { position: relative; }

.vm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(20, 16, 10, .62) 0%,
		rgba(20, 16, 10, .22) 55%,
		rgba(20, 16, 10, .30) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.vm-hero > .elementor-container { position: relative; z-index: 2; }

.vm-hero__copy { max-width: 720px; }

.vm-hero__copy h1,
.vm-hero h1 {
	color: #fff;
	font-size: clamp(2.75rem, 8vw, 5.5rem);
	line-height: .98;
	margin: 0 0 26px;
}

.vm-hero__copy h1 em { font-style: italic; display: block; }

.vm-hero__copy p {
	color: rgba(255, 255, 255, .86);
	font-size: 18px;
	line-height: 1.75;
	max-width: 48ch;
	margin: 0 0 40px;
}


/* 8e. Full-bleed photographic hero
   ------------------------------------------------------------------
   Replaces the old 450px banner. The scrim is deliberately strong at the
   very top: the theme header sits ON TOP of this image, so the nav needs a
   guaranteed dark backing regardless of what the photograph shows there.
   ------------------------------------------------------------------ */

.vm-hero-full {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(560px, 90vh, 900px);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	isolation: isolate;
	overflow: hidden;
}

.vm-hero-full::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to bottom,
		rgba(12, 10, 6, .58) 0%,
		rgba(12, 10, 6, .30) 22%,
		rgba(12, 10, 6, .26) 48%,
		rgba(12, 10, 6, .70) 100%
	);
}

.vm-hero-full__inner {
	/* Top padding clears the overlaid header; bottom sets the copy baseline. */
	padding-top: clamp(140px, 18vh, 220px);
	padding-bottom: clamp(64px, 9vh, 120px);
}

.vm-hero-full__title {
	font-family: var(--vm-display);
	font-weight: 300;
	color: #fff;
	font-size: clamp(2.75rem, 7.4vw, 5.5rem);
	line-height: .99;
	margin: 0 0 26px;
	max-width: 16ch;
	text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
}

.vm-hero-full__title em { font-style: italic; display: block; }

.vm-hero-full__text {
	font-family: var(--vm-body);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .9);
	max-width: 48ch;
	margin: 0 0 40px;
	text-shadow: 0 1px 18px rgba(0, 0, 0, .35);
}

@media (max-width: 640px) {
	.vm-hero-full { min-height: 78vh; align-items: flex-end; }
	.vm-hero-full__text { font-size: 16px; }
}


/* Centred content wrapper matching the theme's 1300px grid. */
.vm-wrap {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}

/* Rhythm — the prototype is far more generous with vertical space than
   Solene's defaults. */
.vm-section-pad { padding: clamp(80px, 12vw, 170px) 0; }
.vm-bg-cream    { background-color: var(--vm-cream); }
.vm-bg-cream-2  { background-color: var(--vm-cream-deep); }
.vm-bg-gold     { background-color: var(--vm-gold); }


/* Responsive
   ========================================================================== */

@media (min-width: 1025px) {
	.vm-cards { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 641px) and (max-width: 1024px) {
	.vm-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	body { font-size: 15px; }

	.eltdf-btn.eltdf-btn-outline,
	.eltdf-btn.eltdf-btn-solid,
	.vm-ghost,
	.wpcf7-form-control.wpcf7-submit {
		padding: 18px 30px;
		width: 100%;
		justify-content: center;
		text-align: center;
	}

	.vm-card { min-height: 440px; }
	.eltdf-st-text { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vm-card img,
	.vm-ghost i {
		transition: none;
	}
	.vm-card:hover img { transform: none; }
}