/*
Theme Name:   OffPlanVilla
Theme URI:    https://offplanvilla.com/
Author:       LucidArc
Author URI:   https://lucidarc.in/
Description:  Editorial, white-first WordPress theme for OffPlanVilla.com — a specialist discovery and market-intelligence platform for off-plan villas in Dubai and the UAE. Ships a production-ready header and footer built on a 2026 warm-neutral palette, sans-serif editorial type and a CMS-ready data layer.
Version:      1.2.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  offplanvilla
Tags:         real-estate, custom-menu, sticky-header, editorial, accessibility-ready
*/

/* =============================================================
   1. DESIGN TOKENS — white theme, 2026 warm-neutral palette
   ============================================================= */
:root{
  /* Surfaces */
  --opv-white:#ffffff;
  --opv-paper:#fbfaf7;        /* warm off-white section ground */
  --opv-sand:#f4f0e9;         /* sand tint band */
  --opv-sand-deep:#eae4d9;
  --opv-sage:#f2f5f1;         /* very pale sage — background 3 */
  --opv-line:#e7e2d9;         /* hairline on warm ground */
  --opv-line-soft:#f0ece4;

  /* Ink */
  --opv-ink:#14171a;          /* deep charcoal */
  --opv-ink-2:#3f4650;        /* body */
  --opv-ink-3:#6d7580;        /* meta */
  --opv-ink-4:#98a0aa;        /* labels */

  /* Accents — dill green primary, clay secondary */
  --opv-green:#31513f;
  --opv-green-600:#274232;
  --opv-green-100:#e8efe9;
  --opv-clay:#a9663f;
  --opv-clay-100:#f6ece4;

  /* Signals */
  --opv-verified:#2f6b4f;

  /* Type */
  --opv-sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --opv-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* Scale */
  --opv-step--2:clamp(.688rem,.66rem + .12vw,.75rem);
  --opv-step--1:clamp(.813rem,.78rem + .16vw,.875rem);
  --opv-step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --opv-step-1:clamp(1.125rem,1.05rem + .35vw,1.3125rem);
  --opv-step-2:clamp(1.375rem,1.24rem + .6vw,1.75rem);
  --opv-step-3:clamp(1.875rem,1.5rem + 1.6vw,3rem);
  --opv-step-4:clamp(2.625rem,1.85rem + 3.4vw,4.5rem);

  /* Layout */
  --opv-max:1420px;
  --opv-gutter:clamp(1.15rem,4vw,2.5rem);
  --opv-radius:14px;
  --opv-radius-lg:22px;
  --opv-header-h:84px;
  --opv-topbar-h:40px;

  /* Motion + elevation */
  --opv-ease:cubic-bezier(.22,.61,.36,1);
  --opv-shadow:0 1px 2px rgba(20,23,26,.04),0 12px 30px -18px rgba(20,23,26,.18);
  --opv-shadow-lg:0 2px 4px rgba(20,23,26,.04),0 30px 60px -30px rgba(20,23,26,.28);
}

/* =============================================================
   2. RESET / BASE
   ============================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;
  background:var(--opv-white);
  color:var(--opv-ink-2);
  font-family:var(--opv-body);
  font-size:var(--opv-step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1,"cv11" 1;
}
h1,h2,h3,h4,h5,h6,.opv-display{
  font-family:var(--opv-sans);
  color:var(--opv-ink);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.1;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:var(--opv-step-4)}
h2{font-size:var(--opv-step-3)}
h3{font-size:var(--opv-step-2)}
p{margin:0 0 1.1em;text-wrap:pretty}
a{color:inherit;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.22em}
a:hover{text-decoration-color:currentColor}
img,svg,video{max-width:100%;height:auto;display:block}
figure{margin:0}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit;cursor:pointer}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--opv-green);
  outline-offset:3px;
  border-radius:6px;
}

/* =============================================================
   3. LAYOUT UTILITIES
   ============================================================= */
.opv-shell{width:100%;max-width:var(--opv-max);margin-inline:auto;padding-inline:var(--opv-gutter)}
.opv-section{padding-block:clamp(4rem,7vw,9rem)}
.opv-section--tight{padding-block:clamp(3rem,5vw,6rem)}
.opv-section--sage{background:var(--opv-sage)}
.opv-section--sand{background:var(--opv-sand)}
.opv-section--paper{background:var(--opv-paper)}
.opv-eyebrow{
  font-family:var(--opv-sans);
  font-size:var(--opv-step--2);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--opv-green);
  margin:0 0 .9rem;
  display:flex;align-items:center;gap:.6rem;
}
.opv-eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.5}
.opv-lede{font-size:var(--opv-step-1);color:var(--opv-ink-2);max-width:62ch}
.opv-muted{color:var(--opv-ink-3)}
.opv-fine{font-size:var(--opv-step--2);color:var(--opv-ink-3);line-height:1.55}
.opv-skip{
  position:absolute;left:1rem;top:-100px;z-index:9999;
  background:var(--opv-ink);color:#fff;padding:.75rem 1.15rem;border-radius:10px;
  font-family:var(--opv-sans);font-size:.875rem;font-weight:600;text-decoration:none;
  transition:top .18s var(--opv-ease);
}
.opv-skip:focus{top:1rem}
.opv-sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =============================================================
   4. BUTTONS
   ============================================================= */
.opv-btn{
  --_bg:var(--opv-ink);--_fg:#fff;--_bd:var(--opv-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--opv-sans);font-size:var(--opv-step--1);font-weight:600;letter-spacing:-.005em;
  padding:.78rem 1.35rem;min-height:44px;border-radius:100px;
  background:var(--_bg);color:var(--_fg);border:1px solid var(--_bd);
  text-decoration:none;white-space:nowrap;
  transition:transform .2s var(--opv-ease),background-color .2s var(--opv-ease),border-color .2s var(--opv-ease),color .2s var(--opv-ease);
}
.opv-btn:hover{transform:translateY(-1px)}
.opv-btn:active{transform:translateY(0)}
.opv-btn--primary{--_bg:var(--opv-green);--_bd:var(--opv-green)}
.opv-btn--primary:hover{--_bg:var(--opv-green-600);--_bd:var(--opv-green-600)}
.opv-btn--ghost{--_bg:transparent;--_fg:var(--opv-ink);--_bd:var(--opv-line)}
.opv-btn--ghost:hover{--_bd:var(--opv-ink);--_bg:transparent}
.opv-btn--light{--_bg:#fff;--_fg:var(--opv-ink);--_bd:#fff}
.opv-btn--sm{padding:.55rem 1rem;min-height:38px;font-size:var(--opv-step--2)}
.opv-btn .opv-btn__arrow{transition:transform .25s var(--opv-ease)}
.opv-btn:hover .opv-btn__arrow{transform:translateX(3px)}

.opv-link{
  font-family:var(--opv-sans);font-weight:600;font-size:var(--opv-step--1);
  color:var(--opv-ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  border-bottom:1px solid var(--opv-line);padding-bottom:.15rem;
  transition:border-color .2s var(--opv-ease),color .2s var(--opv-ease);
}
.opv-link:hover{color:var(--opv-green);border-color:var(--opv-green)}

/* =============================================================
   5. SHARED PIECES — verified badge, credited figures, chips
   ============================================================= */
.opv-verified{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--opv-sans);font-size:var(--opv-step--2);font-weight:600;
  color:var(--opv-verified);background:var(--opv-green-100);
  padding:.3rem .6rem;border-radius:100px;
}
.opv-verified svg{width:13px;height:13px;flex:none}

.opv-figure{margin:0;position:relative}
.opv-figure img{width:100%;height:100%;object-fit:cover;border-radius:var(--opv-radius)}
.opv-figure figcaption{
  margin-top:.6rem;font-size:.75rem;color:var(--opv-ink-4);line-height:1.5;
  display:flex;flex-wrap:wrap;gap:.15rem .6rem;
}
.opv-figure__place{color:var(--opv-ink-3);font-weight:500}
.opv-figure__credit{opacity:.85}
.opv-figure figcaption a{color:var(--opv-ink-2);text-decoration:underline;text-decoration-thickness:1px}
.opv-figure figcaption a:hover{color:var(--opv-green)}
.opv-figure--overlay figcaption{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.4rem .95rem .75rem;
  color:rgba(255,255,255,.72);
  background:linear-gradient(to top,rgba(15,17,19,.6),rgba(15,17,19,0));
  border-radius:0 0 var(--opv-radius) var(--opv-radius);
}
.opv-figure--overlay .opv-figure__place{color:rgba(255,255,255,.92)}
.opv-figure--overlay figcaption a{color:rgba(255,255,255,.8)}

.opv-chips{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}
.opv-chip{
  display:inline-flex;align-items:center;min-height:36px;
  padding:.42rem .85rem;border-radius:100px;
  border:1px solid var(--opv-line);background:var(--opv-white);
  font-family:var(--opv-sans);font-size:var(--opv-step--2);font-weight:500;
  color:var(--opv-ink-2);text-decoration:none;
  transition:border-color .2s var(--opv-ease),background-color .2s var(--opv-ease),color .2s var(--opv-ease);
}
.opv-chip:hover{border-color:var(--opv-ink);color:var(--opv-ink);background:var(--opv-paper)}