/* ============================================================
   Voerkraal Restaurant — African Luxury Theme Overlay
   Loaded after styles.css. Re-colours and adorns the existing
   layout engine with a warm, high-end African design language:
   sunset gold, terracotta clay, deep olive and espresso tones,
   plus hand-drawn geometric motifs inspired by traditional
   African textile and wall-art patterning (kente bands, mudcloth
   marks, sunburst medallions). No structural classes are removed
   or renamed, so every page keeps its existing functionality.
   ============================================================ */

:root{
  --gold:#c9973f;
  --gold-light:#e8c785;
  --terracotta:#a84a2c;
  --clay:#8a3c26;
  --olive:#4a5a3a;
  --espresso:#1c130c;

  /* remap the base design-system variables to the African palette */
  --p:#c9973f;
  --dark:#1c130c;
  --light:#f8f1e3;
  --a:#fffaf0;
  --ink:#241a10;
  --muted:#7d6b56;
  --line:rgba(40,26,14,.16);
  --shadow-sm:0 12px 34px rgba(28,17,8,.14);
  --shadow-lg:0 34px 90px rgba(28,17,8,.22);
}

/* -------------------- foundations -------------------- */
body{
  background-color:var(--light);
  background-image:
    repeating-linear-gradient(135deg, rgba(168,74,44,.035) 0 2px, transparent 2px 30px),
    repeating-linear-gradient(45deg, rgba(74,90,58,.025) 0 2px, transparent 2px 30px);
}

::selection{background:var(--terracotta);color:#fff}

h1,h2,h3{font-family:'Playfair Display',serif !important;font-weight:700 !important;letter-spacing:-.01em !important}
.brand span{font-family:'Playfair Display',serif;font-weight:700;letter-spacing:.01em}

/* eyebrow labels get a small gold dash flourish */
.eyebrow{color:var(--clay) !important;font-weight:800;display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:'';display:inline-block;width:26px;height:2px;flex:0 0 26px;background:linear-gradient(90deg,var(--terracotta),var(--gold-light))}

/* section numerals as soft watermark numerals */
.section-number{font-family:'Playfair Display',serif;font-size:clamp(2.4rem,4vw,3.6rem);font-weight:700;color:var(--terracotta);opacity:.22}

/* -------------------- kente-inspired trim -------------------- */
.site-header{
  border-top:6px solid transparent;
  border-image:linear-gradient(90deg,
    var(--gold-light) 0 18%, var(--terracotta) 18% 38%,
    var(--olive) 38% 58%, var(--gold) 58% 78%,
    var(--clay) 78% 100%) 1;
  background:var(--espresso) !important;
  box-shadow:0 2px 24px rgba(0,0,0,.25);
}
.site-footer{
  border-top:5px solid transparent;
  border-image:linear-gradient(90deg,
    var(--gold-light) 0 20%, var(--terracotta) 20% 40%,
    var(--olive) 40% 60%, var(--gold) 60% 80%,
    var(--gold-light) 80% 100%) 1;
}
.stats-band{
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,var(--gold-light),var(--terracotta),var(--olive),var(--gold-light)) 1;
}

/* -------------------- brand medallion -------------------- */
.brand i{
  border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, var(--gold-light) 0 10deg, var(--terracotta) 10deg 20deg);
  box-shadow:0 0 0 3px rgba(255,255,255,.16), 0 10px 24px rgba(0,0,0,.35);
  color:#2a1408;
  font-weight:900;
}

/* -------------------- buttons -------------------- */
.btn,.nav-cta{border-radius:999px;font-weight:800;letter-spacing:.01em;transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn.primary,.nav-cta{
  background:linear-gradient(135deg,var(--gold-light),var(--terracotta)) !important;
  color:#2a1408 !important;
  border-color:transparent !important;
  box-shadow:0 16px 36px rgba(168,74,44,.32);
}
.btn.primary:hover,.nav-cta:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(168,74,44,.42)}
.btn.ghost{border-color:rgba(255,255,255,.5) !important;color:#fff !important}
.btn.ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px)}
.btn.outline{border-color:var(--gold-light) !important;color:#fff !important}
.btn.outline:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn.light{background:#fffaf0 !important;color:var(--espresso) !important}

/* -------------------- navigation -------------------- */
.site-header nav a{transition:color .2s ease}
.site-header nav a:hover{color:var(--gold-light)}

/* -------------------- hero -------------------- */
.hero-fullscreen,.hero-split,.hero-collage,.hero-minimal,.hero-diagonal,.hero-magazine,.hero-panorama,.hero-product,.hero-mosaic,.hero-architectural,.page-hero{
  background-color:var(--espresso);
}
.hero-fullscreen{
  background:var(--espresso) var(--hero) center 32%/115% 115% no-repeat !important;
  animation:heroKenBurns 26s ease-in-out infinite alternate;
}
@keyframes heroKenBurns{
  from{background-size:115% 115%;background-position:center 30%}
  to{background-size:132% 132%;background-position:center 40%}
}
.hero-overlay{
  background:
    radial-gradient(120% 90% at 26% 104%,transparent 38%,rgba(10,6,3,.6) 100%),
    linear-gradient(100deg,rgba(20,12,6,.94),rgba(30,17,8,.28) 60%,rgba(40,22,10,.08)),
    linear-gradient(0deg,rgba(20,12,6,.62),transparent 46%) !important;
}
.hero-fullscreen{position:relative;isolation:isolate}
.hero-fullscreen::after{
  content:'';
  position:absolute;
  z-index:0;
  right:clamp(2vw,5vw,7vw);
  top:16vh;
  width:min(280px,26vw);
  aspect-ratio:1;
  opacity:.14;
  pointer-events:none;
  background:
    radial-gradient(circle at center, transparent 0 38%, var(--gold-light) 38% 42%, transparent 42% 100%),
    radial-gradient(circle at center, transparent 0 54%, var(--gold-light) 54% 57%, transparent 57% 100%),
    repeating-conic-gradient(var(--gold-light) 0deg 3deg, transparent 3deg 30deg);
  border-radius:50%;
  mask:radial-gradient(circle,#000 70%,transparent 100%);
}
.page-hero{position:relative;overflow:hidden}

/* -------------------- cards & panels -------------------- */
.service-card{background:var(--a);border:1px solid var(--line);position:relative;overflow:hidden}
.service-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:repeating-linear-gradient(45deg,var(--terracotta) 0 9px,var(--gold-light) 9px 18px);
}
.service-card>span{color:var(--clay)}

.quote-stack blockquote{background:var(--a);border:1px solid var(--line)}
.quote-stack blockquote>span{
  background:linear-gradient(135deg,var(--gold-light),var(--terracotta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.stats-band strong{
  background:linear-gradient(135deg,var(--gold-light),var(--terracotta));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.cta{background:linear-gradient(135deg,var(--clay),var(--terracotta),var(--gold)) !important}

.accordion summary{color:var(--espresso)}
.accordion summary:hover{color:var(--clay)}
.accordion details{border-top-color:var(--line)}

.gallery-item{box-shadow:var(--shadow-sm)}
.gallery-item:hover{box-shadow:var(--shadow-lg)}

.map-card{position:relative}
.map-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--gold-light),var(--terracotta),var(--olive));
}

/* footer polish */
.footer-links a:hover{color:var(--gold-light)}
.footer-whatsapp,.whatsapp-btn,.nav-whatsapp,.floating-whatsapp{filter:none}

/* consent + lightbox keep dark espresso tone automatically via var(--dark) */

/* subtle warm scrollbar */
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--light)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--gold-light),var(--terracotta));border-radius:99px;border:3px solid var(--light)}

@media(max-width:900px){
  .hero-fullscreen::after{display:none}
}