/* Front page specific styles for Very-Véritable theme */

/* Font families */
:root {
  --vv-serif: 'Lora', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --vv-sans: 'Jost', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --vv-bg: #fcf7f0;
  --vv-text: #372d1f;
  --vv-accent: #8c6f46;
  --vv-muted: #665d52;
  --vv-header-h: 68px; /* default; replaced via JS */
}

.font-serif { font-family: var(--vv-serif); }
body { font-family: var(--vv-sans); background: var(--vv-bg); color: var(--vv-text); }

/* Layout helpers */
.container { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Typography tweaks */
h1,h2,h3,h4,h5,h6 { font-family: var(--vv-serif); letter-spacing: 0; }
nav a { letter-spacing: 0.08em; text-transform: uppercase; }

/* Logo sizing (front header) */
.site-logo-img { height: 36px; width: auto; max-width: 180px; display: block; }
@media (min-width: 768px) { .site-logo-img { height: 60px; max-width: 200px; } }

/* Buttons */
.vv-btn-gradient { background: linear-gradient(#83663e, #b0966a); color: #fff; }
.vv-btn-gradient:hover { filter: brightness(1.02); }

/* Dividers */
.vv-divider { height: 2px; width: 45px; background-color: var(--vv-accent); display: block; }

/* Cards */
.vv-card { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); }

/* Hero fills viewport; header overlays */
#vv-hero { min-height: 100vh; display: flex; align-items: center; }

/* Mobile overlay menu positioned below sticky header */
#mobile-menu { top: var(--vv-header-h, 68px); }

/* Header nav */
.vv-nav { position: relative; margin: 0; padding: 0; list-style: none; }
.vv-nav > li { position: relative; }
.vv-nav > li > a span { display: inline-block; padding: 12px 0; color: #3d352b; transition: color .2s ease; }
.vv-nav > li:hover > a span, .vv-nav > li:focus-within > a span { color: #8c6f46; }
.vv-nav li ul { position: absolute; left: 0; top: 100%; min-width: 220px; background: #ffffff; border: 1px solid #e9e1d6; display: none; z-index: 60; padding: 8px 0; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.vv-nav li:hover > ul, .vv-nav li:focus-within > ul { display: block; }
.vv-nav li ul li { position: relative; }
.vv-nav li ul li a span { display: block; padding: 8px 16px; text-transform: none; letter-spacing: 0; color: #3d352b; }
.vv-nav li ul li a span:hover { color: #8c6f46; }
.vv-nav li ul .sub-menu { left: 100%; top: 0; }

/* Header scrolled state */
.vv-header-scrolled { background: rgba(252,247,240,0.95); backdrop-filter: saturate(1.2) blur(6px); border-bottom: 1px solid #e9e1d6; }

/* Mobile submenus */
#mobile-menu .sub-menu { display: none; padding-left: 16px; }
#mobile-menu li.open > .sub-menu { display: block; }
#mobile-menu .vv-sub-toggle { float: right; margin-left: 8px; color: #8c6f46; }

/* Mobile menu toggle icon swap */
#mobile-menu-button.is-open .icon-menu { display: none; }
#mobile-menu-button.is-open .icon-close { display: inline-block; }

/* Why Choose Us section */
.vv-why-left { background: linear-gradient(128deg, #f79e69d1, rgb(207 116 61 / 50%)), url(front-page.css); color: #fff; }
.vv-why-divider { height: 4px; width: 53px; background: #e5e5e5; border-radius: 6px; display: block; }
/* White logo variant for section headings */
.vv-logo-white { height: 4rem; width: auto; filter: brightness(0) invert(1); display: block; margin-right: 0.7rem; }
@media (min-width: 768px) { .vv-logo-white { height: 4rem; } }

/* Typography scale to match design */
.vv-caption { font-size: 14px; font-weight: 600; letter-spacing: 6px; text-transform: uppercase; color: #92897d; }
.vv-mini-title { font-size: 15px; font-weight: 600; letter-spacing: 2px; color: var(--vv-text); }
.vv-title-50 { font-size: 32px; font-weight: 400; color: var(--vv-text); }
.vv-counter-num { font-size: 50px; font-weight: 400; color: var(--vv-text); }
.vv-hero-title { font-size: 42px; font-weight: 400; line-height: 1.2; color: var(--vv-text); }
.vv-hero-sub { font-size: 20px; line-height: 29px; color: var(--vv-muted); }
.vv-learn { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--vv-accent); }

@media (min-width: 768px) {
  .vv-title-50 { font-size: 40px; }
  .vv-hero-title { font-size: 50px; }
}

@media (min-width: 1024px) {
  .vv-title-50 { font-size: 50px; }
  .vv-hero-title { font-size: 70px; }
}