/* Readability fixes inside hero */
.hero .kpi .label, .hero .kpi .value{ color: var(--ink); }
.hero .kpi{
  background: rgba(246,239,226,.92);
  border-color: rgba(35,24,15,.22);
}

/* Increase contrast for outline button inside hero */
.hero .btn-outline-accent{
  color: var(--ink);
  border-color: rgba(35,24,15,.35);
  background: rgba(255,255,255,.12);
}
.hero .btn-outline-accent:hover{
  background: rgba(185,106,58,.16);
  border-color: var(--accent);
}
:root{
  /* Rustic, warm palette */
  --bg: #f6efe2;                 /* parchment beige */
  --ink: #23180f;                /* deep brown */
  --muted: #7a6a5b;              /* soft taupe */
  --card: rgba(255,255,255,.82);  /* soft card */
  --line: rgba(35,24,15,.14);     /* subtle line */
  --accent: #b96a3a;              /* clay/terracotta */
  --accent2:#3b6b5a;              /* olive green */
  --gold: #c9a227;                /* brass/gold */
  --shadow: 0 18px 55px rgba(35,24,15,.12);
  --radius: 18px;
  --ring: 0 0 0 3px rgba(185,106,58,.25);
}

html { scroll-behavior: smooth; }
body{
  /* Friendly, rustic typography stack */
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
  /* Subtle grain/paper texture with warm radial accents */
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(185,106,58,.12), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(59,107,90,.10), transparent 55%),
    repeating-linear-gradient(90deg, rgba(35,24,15,.03), rgba(35,24,15,.03) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px),
    var(--bg);
  color: var(--ink);
}

/* Dark mode (opt-in via [data-theme="dark"]) */
[data-theme="dark"]{
  --bg: #15110d;                 /* dark wood */
  --ink: #f4efe7;
  --muted: #c8bcae;
  --card: rgba(26,22,19,.78);
  --line: rgba(244,239,231,.12);
  --shadow: 0 18px 55px rgba(0,0,0,.35);
}

/* Dark-mode readability overrides */
[data-theme="dark"] .hero .kpi{
  background: rgba(32,27,22,.85);
  border-color: rgba(244,239,231,.16);
}
[data-theme="dark"] .hero .kpi .label, [data-theme="dark"] .hero .kpi .value{
  color: var(--ink);
}
[data-theme="dark"] .hero .btn-outline-accent{
  color: var(--ink);
  border-color: rgba(244,239,231,.35);
  background: rgba(255,255,255,.08);
}
[data-theme="dark"] .hero .btn-outline-accent:hover{
  background: rgba(201,162,39,.18);
  border-color: var(--gold);
}
[data-theme="dark"] .btn-accent{
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: #fff;
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}

.navbar{
  backdrop-filter: blur(10px);
  background: rgba(246,239,226,.75)!important;
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.navbar.is-scrolled{ box-shadow: 0 8px 24px rgba(31,26,20,.12); background: rgba(251,246,238,.9)!important; }
/* Theme toggle button in navbar: ensure good contrast */
.navbar .btn-outline-accent{
  color: var(--ink);
  border-color: rgba(35,24,15,.35);
}
.navbar .btn-outline-accent:hover{ background: rgba(185,106,58,.12); border-color: var(--accent); }

[data-theme="dark"] .navbar{
  background: rgba(21,17,13,.82)!important;
}
[data-theme="dark"] .navbar .btn-outline-accent{
  color: var(--ink);
  border-color: rgba(244,239,231,.35);
  background: rgba(255,255,255,.06);
}
[data-theme="dark"] .navbar .btn-outline-accent:hover{
  background: rgba(201,162,39,.18);
  border-color: var(--gold);
}

.brand-badge{
  width: 38px;height:38px;border-radius: 14px;
  display:inline-grid;place-items:center;
  background: linear-gradient(145deg, rgba(185,106,58,.18), rgba(59,107,90,.12));
  border: 1px solid var(--line);
}
.nav-link{ font-weight: 600; }
.nav-link:hover{ color: var(--accent2) !important; }

.container-narrow{ max-width: 980px; }

.hero{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: #fff;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
  linear-gradient(180deg, rgba(31,26,20,.10), rgba(31,26,20,.55)),
  url("../Assets/Garnacha-237.jpg") center/cover no-repeat;
  transform: translateZ(0);
}
.hero > .content{ position: relative; z-index: 1; }
.hero .chip{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:.45rem .75rem;
  border-radius: 999px;
  background: rgba(246,239,226,.85);
  border: 1px solid rgba(255,255,255,.5);
  color: var(--muted);
  font-weight: 600;
  font-size: .85rem;
}

.card-soft{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(31,26,20,.08);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.card-soft:hover{ transform: translateY(-2px); box-shadow: 0 18px 55px rgba(35,24,15,.16); }

.btn-accent{
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: #b85f35;
  --bs-btn-hover-border-color: #b85f35;
  --bs-btn-color: #fff;
  border-radius: 999px;
  padding: .8rem 1.05rem;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(197,106,58,.25);
}
.btn-outline-accent{
  border-radius: 999px;
  border-color: rgba(31,26,20,.25);
  color: var(--ink);
  padding: .8rem 1.05rem;
  font-weight: 700;
}
.btn-outline-accent:hover{ background: rgba(197,106,58,.12); }

.kpi{
  display:flex; flex-direction:column; gap:.1rem;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.62);
}
.kpi .label{ color: var(--muted); font-size: .85rem; }
.kpi .value{ font-weight: 800; font-size: 1.05rem; }
/* Countdown tiles: improve dark-mode readability (outside hero) */
[data-theme="dark"] .card-soft .kpi{
  background: rgba(255,255,255,.10);
  border-color: rgba(244,239,231,.18);
}
[data-theme="dark"] .card-soft .kpi .label, [data-theme="dark"] .card-soft .kpi .value{
  color: var(--ink);
}

.section-title{
  font-weight: 900;
  letter-spacing: -.02em;
}
.lead-muted{ color: var(--muted); }

.ribbon{
  position:absolute;
  right: -36px; top: 20px;
  transform: rotate(14deg);
  background: rgba(201,162,39,.92);
  color: #2b2118;
  padding: .45rem 3.2rem;
  font-weight: 900;
  border: 1px solid rgba(31,26,20,.18);
  box-shadow: 0 14px 35px rgba(31,26,20,.12);
}

.parallax{
  background: linear-gradient(180deg, rgba(31,26,20,.05), rgba(31,26,20,.08)),
              url("../Assets/Patio-interior-026.jpg") center/cover no-repeat;
  border-radius: 26px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  min-height: 220px;
  overflow:hidden;
  position: relative;
}
.parallax .overlay{
  position:absolute; inset:0;
  background: radial-gradient(900px 260px at 10% 20%, rgba(246,239,226,.75), transparent 60%);
}
.parallax .inner{ position: relative; z-index: 1; padding: 1.2rem; }

.footer{
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.gallery-tile{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--line);
  box-shadow: 0 14px 40px rgba(31,26,20,.10);
}
.gallery-tile img{
  width:100%; height: 220px; object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
  filter: saturate(1.02) contrast(1.01) sepia(.04);
}
.gallery-tile:hover img{ transform: scale(1.04); filter: saturate(1.10) contrast(1.08); }

.smallprint{ font-size: .85rem; color: var(--muted); }

/* Accordion modern styles */
.accordion-button{
  font-weight: 700;
}
.accordion-button::after{ transition: transform .2s ease, filter .2s ease; }
.accordion-button:not(.collapsed)::after{ transform: rotate(180deg); filter: hue-rotate(6deg) saturate(1.15) contrast(1.02); }
.accordion-item{ border-radius: 14px; overflow: hidden; border-color: var(--line); }
.accordion-body{ color: var(--muted); }

/* Focus ring for accessibility */
:focus-visible{ outline: none; box-shadow: var(--ring); border-radius: 8px; }

/* Responsive tweaks */
@media (max-width: 576px){
  .container-narrow{ padding-left: 1rem; padding-right: 1rem; }
  .gallery-tile img{ height: 180px; }
  .hero{ border-radius: 20px; }
}

/* Subtle decorative separators */
.section-title{
  position: relative;
}
.section-title::after{
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: .35rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

/* Warm badge/ribbon tweaks for a celebratory rustic feel */
.ribbon{
  background: linear-gradient(135deg, rgba(201,162,39,.95), rgba(185,106,58,.92));
  color: #2b2118;
}