/*
Theme Name: Vulajio's
Theme URI: https://vulajiosrestaurant.com/
Author: Troia Digital
Author URI: https://troiadigital.com/
Description: Custom standalone theme for Vulajio's — Italian dining in Hopewell Junction, NY. Editorial dark aesthetic with warm-gold accents, script wordmark, site-wide fade-up reveal, fully responsive. Wires Slice online ordering + OpenTable reservations natively.
Version: 1.0.9
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
Text Domain: vulajios
*/

/* ============================================================
   Brand tokens
   ============================================================ */
:root {
  /* Surfaces — warm-leaning blacks; candlelit not cold */
  --vlj-bg:        #08060A;   /* darkroom black, hint of red */
  --vlj-bg-2:      #14100C;   /* mahogany-charcoal */
  --vlj-bg-3:      #1C1610;   /* warm pour */
  --vlj-bg-4:      #261C13;   /* low-light pool */
  --vlj-ink:       #050402;   /* near-pitch */

  /* Type */
  --vlj-cream:     #F8EFD9;   /* warm cream, like candle on paper */
  --vlj-cream-2:   #EFDFB8;   /* aged paper */
  --vlj-cream-3:   #E0CB9C;   /* old menu */
  --vlj-mute:      rgba(248, 239, 217, .62);

  /* Accents — brass, candle, ember, wine */
  --vlj-gold:      #C29849;   /* brass plate */
  --vlj-gold-2:    #E8C36A;   /* candle highlight */
  --vlj-gold-3:    #7E5E22;   /* deep brass */
  --vlj-candle:    #FFE7A8;   /* flame white-warm */
  --vlj-ember:     #C2451E;   /* hearth ember */
  --vlj-wine:      #6E1818;   /* italian wine, deeper */
  --vlj-terra:     #B14F2A;   /* terracotta tile */
  --vlj-olive:     #5E6128;   /* dark olive */

  /* Lines & shadows */
  --vlj-line:      rgba(232, 195, 106, .14);
  --vlj-line-2:    rgba(232, 195, 106, .26);
  --vlj-shadow:    0 40px 120px rgba(0, 0, 0, .72);
  --vlj-shadow-2:  0 18px 44px rgba(0, 0, 0, .55);
  --vlj-shadow-glow: 0 0 80px rgba(232, 195, 106, .14);

  /* Fonts */
  --vlj-script:    "Allura", "Brush Script MT", cursive;
  --vlj-display:   "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --vlj-ritual:    "Cardo", Georgia, serif;
  --vlj-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --vlj-radius:    10px;
  --vlj-radius-lg: 18px;
  --vlj-section:   clamp(72px, 9vw, 140px);
  --vlj-gutter:    clamp(20px, 4vw, 56px);
  --vlj-max:       1240px;
}

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--vlj-bg);
  color: var(--vlj-cream);
  font-family: var(--vlj-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  overscroll-behavior-x: none;
  max-width: 100vw;
}

html { touch-action: pan-y; scroll-behavior: smooth; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--vlj-gold-2);
  text-decoration: none;
  transition: color .25s ease;
}
a:hover { color: var(--vlj-cream); }

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

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--vlj-display);
  font-weight: 500;
  letter-spacing: -.005em;
  margin: 0 0 .4em;
  color: var(--vlj-cream);
}
h1 { font-size: clamp(40px, 6vw, 84px); line-height: 1.05; }
h2 { font-size: clamp(30px, 4.4vw, 56px); line-height: 1.1; }
h3 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.2; }
h4 { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3; }

p { margin: 0 0 1.1em; color: var(--vlj-cream-2); }
p:last-child { margin-bottom: 0; }

.vlj-eyebrow {
  display: inline-block;
  font-family: var(--vlj-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--vlj-gold-2);
}

.vlj-script {
  font-family: var(--vlj-script);
  font-weight: 400;
}

.vlj-italic {
  font-family: var(--vlj-ritual);
  font-style: italic;
  color: var(--vlj-cream-3);
}

.vlj-gold { color: var(--vlj-gold-2); }

/* ============================================================
   Layout helpers
   ============================================================ */
.vlj-section {
  position: relative;
  padding: var(--vlj-section) var(--vlj-gutter);
  overflow: clip;
}
.vlj-container {
  width: 100%;
  max-width: var(--vlj-max);
  margin: 0 auto;
}
.vlj-grid {
  display: grid;
  gap: clamp(24px, 3.4vw, 48px);
}

/* ============================================================
   Buttons
   ============================================================ */
.vlj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--vlj-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--vlj-radius);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
  text-decoration: none;
  line-height: 1;
}

.vlj-btn--gold {
  background: var(--vlj-gold);
  color: var(--vlj-ink);
  border-color: var(--vlj-gold);
}
.vlj-btn--gold:hover {
  background: var(--vlj-gold-2);
  border-color: var(--vlj-gold-2);
  color: var(--vlj-ink);
}

.vlj-btn--ghost {
  background: transparent;
  color: var(--vlj-cream);
  border-color: var(--vlj-line-2);
}
.vlj-btn--ghost:hover {
  background: var(--vlj-cream);
  color: var(--vlj-ink);
  border-color: var(--vlj-cream);
}

.vlj-btn--wine {
  background: var(--vlj-wine);
  color: var(--vlj-cream);
  border-color: var(--vlj-wine);
}
.vlj-btn--wine:hover {
  background: var(--vlj-cream);
  color: var(--vlj-wine);
  border-color: var(--vlj-cream);
}

/* ============================================================
   Reveal / fade-up — meal-paced, not marketing-paced
   ============================================================ */
.vlj-section-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(.16, .68, .25, 1),
              transform 1.2s cubic-bezier(.16, .68, .25, 1);
  will-change: opacity, transform;
}
.vlj-section-fade.is-in {
  opacity: 1;
  transform: translateY(0);
}

.vlj-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s cubic-bezier(.16, .68, .25, 1),
              transform 1.2s cubic-bezier(.16, .68, .25, 1);
}
.vlj-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  /* WCAG-friendly: drop the upward translate (motion) but keep a quick
     opacity fade so users with Reduce Motion still see the section appear
     rather than the page feeling static / pre-rendered. */
  .vlj-section-fade,
  .vlj-reveal { transform: none; transition: opacity .45s ease; }
}

/* ============================================================
   Grain texture overlay (atmosphere)
   ============================================================ */
.vlj-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .065;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='4'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 1;
}

/* Warm vignette overlay — every section gets a soft candlelit corner pool */
.vlj-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(232, 195, 106, .07), transparent 75%),
    radial-gradient(ellipse 90% 80% at 50% 50%, transparent 30%, rgba(0, 0, 0, .55) 100%);
  z-index: 1;
  mix-blend-mode: multiply;
}
.vlj-section > * { position: relative; z-index: 2; }

/* ============================================================
   Skip-link a11y
   ============================================================ */
.vlj-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--vlj-gold);
  color: var(--vlj-ink);
  padding: 8px 14px;
  z-index: 1000;
}
.vlj-skip:focus { left: 8px; top: 8px; }

/* ============================================================
   Forms
   ============================================================ */
.vlj-form { display: grid; gap: 14px; }
.vlj-form label {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vlj-gold-2);
}
.vlj-form input,
.vlj-form textarea,
.vlj-form select {
  width: 100%;
  background: var(--vlj-bg-2);
  border: 1px solid var(--vlj-line);
  color: var(--vlj-cream);
  padding: 14px 16px;
  font-family: var(--vlj-body);
  font-size: 16px;
  border-radius: var(--vlj-radius);
  transition: border-color .2s ease;
}
.vlj-form input:focus,
.vlj-form textarea:focus,
.vlj-form select:focus {
  outline: none;
  border-color: var(--vlj-gold);
}
.vlj-form textarea { min-height: 140px; resize: vertical; }
.vlj-form .vlj-honey { position: absolute; left: -9999px; }

/* ============================================================
   Responsive safety
   ============================================================ */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .vlj-section { padding: clamp(56px, 14vw, 96px) var(--vlj-gutter); }
}