@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root{
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
}

*{ scrollbar-color: #9C6B3F #1B140F; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  background-color: #120D0A;
  color: #F3E9DA;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  line-height: 1.7;
}

h1,h2,h3,h4, .font-display{
  font-family: 'Cinzel', serif;
}

/* Mud-wall texture: warm brown gradient + grain overlay */
.texture-mudwall{
  position: relative;
  background:
    radial-gradient(120% 140% at 10% 0%, #2E2117 0%, #1B140F 55%, #120D0A 100%);
}
.texture-mudwall::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--grain);
  opacity:.10;
  mix-blend-mode: overlay;
  pointer-events:none;
}

/* Carved-wood double border, evokes chip-carved panels */
.border-carved{
  border: 1px solid rgba(201,162,75,.35);
  outline: 1px solid rgba(201,162,75,.12);
  outline-offset: 5px;
}

/* Adire/Aso-Oke inspired diamond divider */
.divider-adire{
  height: 14px;
  width: 100%;
  background-image: repeating-linear-gradient(45deg, rgba(201,162,75,.55) 0 2px, transparent 2px 12px),
                     repeating-linear-gradient(-45deg, rgba(201,162,75,.55) 0 2px, transparent 2px 12px);
  background-position: center;
  background-repeat: repeat-x;
  background-size: 24px 14px;
  opacity: .8;
}

.diamond-rule{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
}
.diamond-rule::before, .diamond-rule::after{
  content:"";
  height:1px; width:2.5rem;
  background: linear-gradient(90deg, transparent, rgba(201,162,75,.6));
}
.diamond-rule::after{ background: linear-gradient(90deg, rgba(201,162,75,.6), transparent); }
.diamond-rule i{
  width:8px; height:8px;
  border: 1.5px solid #C9A24B;
  transform: rotate(45deg);
  display:inline-block;
}

/* Kente/Aso-oke inspired stripe accent bar */
.stripe-asooke{
  height: 6px;
  background: repeating-linear-gradient(90deg,
    #C9A24B 0, #C9A24B 14%,
    #7A1F1F 14%, #7A1F1F 28%,
    #9C6B3F 28%, #9C6B3F 42%,
    #C9A24B 42%, #C9A24B 56%,
    #7A1F1F 56%, #7A1F1F 70%,
    #9C6B3F 70%, #9C6B3F 84%,
    #C9A24B 84%, #C9A24B 100%);
  background-size: 240px 6px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:'Cinzel', serif;
  font-size:.8rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding: 1rem 1.75rem;
  min-height:44px;
  border-radius: 2px;
  transition: all .25s ease;
}
.btn-gold{
  background: linear-gradient(180deg, #E8C77C, #C9A24B);
  color: #1B140F;
}
.btn-gold:hover{ background: linear-gradient(180deg, #f0d68f, #d8b25c); transform: translateY(-1px); }
.btn-outline{
  border: 1px solid #C9A24B;
  color: #F3E9DA;
}
.btn-outline:hover{ background: rgba(201,162,75,.12); }
.btn-whatsapp{
  background:#25D366;
  color:#0b1a10;
}
.btn-whatsapp:hover{ background:#2fe374; transform: translateY(-1px); }

.link-underline{
  position:relative;
}
.link-underline::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:0; height:1px;
  background:#C9A24B;
  transition: width .25s ease;
}
.link-underline:hover::after{ width:100%; }

/* Fade-in on load. Pure CSS, no scroll/JS dependency — content is never
   left permanently hidden if a scroll-triggered observer fails to fire. */
.reveal{
  animation: reveal-in .7s ease both;
}
@keyframes reveal-in{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; opacity:1; transform:none; }
}

/* Form fields */
.field-input{
  width:100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(201,162,75,.3);
  color:#F3E9DA;
  padding: .85rem 1rem;
  font-family:'Jost', sans-serif;
  border-radius: 2px;
}
.field-input::placeholder{ color:#8a7c68; }
.field-input:focus{
  outline: 2px solid #C9A24B;
  outline-offset: 2px;
  border-color:#C9A24B;
}
.field-label{
  font-family:'Cinzel', serif;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#C2AF97;
  margin-bottom:.4rem;
  display:block;
}

/* Nav link active/focus visibility for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid #E8C77C;
  outline-offset: 3px;
}

/* Mobile nav panel */
#mobile-nav{
  transition: max-height .3s ease, opacity .3s ease;
}

/* Menu item row */
.menu-item{
  border-bottom: 1px dashed rgba(201,162,75,.25);
}

/* Card hover lift */
.card-lift{ transition: transform .3s ease, box-shadow .3s ease; }
.card-lift:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }

/* Story wall card */
.story-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  border-left: 3px solid #C9A24B;
}

::selection{ background:#C9A24B; color:#1B140F; }

/* FAQ accordion — native <details>/<summary>, no JS required */
.faq-item summary{
  list-style:none;
  cursor:pointer;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::marker{ content:""; }
.faq-item .faq-icon{
  transition: transform .25s ease;
}
.faq-item[open] .faq-icon{ transform: rotate(45deg); }
.faq-item[open] summary{ margin-bottom: 1rem; }