/* =========================================
   GOLD DARK THEME (shared by both pages)
   Palette:
   - Base: near-black #0f1115 / #151821
   - Text: off-white #f5f6f8
   - Muted: #aeb4c0
   - Gold accent: #d4af37 (primary), #f7d774 (hover)
   - Lines: #262b36
   ========================================= */

:root{
  /* Core variables used by your pages */
  --bg:#0f1115;
  --ink:#f5f6f8;
  --muted:#aeb4c0;
  --brand:#d4af37;       /* main gold */
  --brand-2:#f7d774;     /* lighter gold for hover/focus */
  --card:#151821;        /* surfaces/cards */
  --line:#262b36;        /* hairlines/borders */
  --hover-bg: rgba(212,175,55,.12);    /* gold-tinted hover */
  --hover-shadow: 0 8px 28px rgba(0,0,0,.45);
}

/* ---------- Global ---------- */
html, body{ background:var(--bg); color:var(--ink); }
a{ color:var(--ink); }

/* Gold focus ring for accessibility */
:focus-visible{
  outline:2px solid var(--brand-2) !important;
  outline-offset:2px !important;
}

/* ---------- Header / Nav ---------- */
header{ background:#0f1115 !important; border-bottom:1px solid var(--line) !important; }
.logo{ background:#232836 !important; color:var(--ink); }
.nav-link:hover{ background:rgba(247,215,116,.12) !important; box-shadow:var(--hover-shadow) !important; transform:translateY(-1px) !important; }
.nav-link[aria-current="page"]{ background:rgba(247,215,116,.10) !important; }

.socials .icon-link{ color:var(--ink); }
.socials .icon-link:hover{ background:var(--hover-bg) !important; box-shadow:var(--hover-shadow) !important; }

/* ---------- Language pickers ---------- */
/* Desktop select */
.lang-select{
  background:#0f1115 !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
}
.lang-select:hover{ background:#12161e !important; box-shadow:0 6px 18px rgba(0,0,0,.45) !important; }

/* Mobile drop-up */
.lang-trigger{
  background:#0f1115 !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
}
.lang-trigger:hover{ background:#12161e !important; }
.lang-menu{
  background:#0f1115 !important;
  border:1px solid var(--line) !important;
  box-shadow:0 16px 36px rgba(0,0,0,.55) !important;
}
.lang-menu li:hover,
.lang-menu li[aria-selected="true"]{
  background:rgba(212,175,55,.14) !important;
}

/* ---------- Drawer (mobile) ---------- */
.drawer{ background:#0f1115 !important; border-left:1px solid var(--line) !important; }
.drawer a:hover{ background:rgba(247,215,116,.10) !important; }

/* ---------- Buttons / Chips / Pills ---------- */
.btn, .send{
  background:linear-gradient(180deg, var(--brand), #c59a2a);
  border:1px solid #b78c13 !important;
  color:#0b0d12 !important; /* dark text on gold button for contrast */
  box-shadow:0 6px 18px rgba(212,175,55,.25);
}
.btn:hover, .send:hover{
  filter:none !important;
  background:linear-gradient(180deg, var(--brand-2), var(--brand));
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(247,215,116,.28);
}
.btn:active, .send:active{ transform:translateY(0); }

/* Chips (about page) */
.chip{
  background:rgba(247,215,116,.12) !important;
  border:1px solid #6b5a16 !important;
  color:#f7e7a6 !important;
}

/* ---------- Cards / Surfaces ---------- */
.card{
  background:var(--card) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Facts / Timeline items */
.fact, .t-item{
  background:#12161e !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
}
.t-item .when{ color:#d7dded !important; }
.t-item .what{ color:var(--ink) !important; }

/* ---------- Hero / Page hero ---------- */
.page-hero{ background:#10141c !important; border-bottom:1px solid var(--line) !important; }
.hero .bg{ background:#111722 !important; }
/* Your index.html adds the video; we just keep the overlay tone consistent */
.hero .overlay{ background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.3)) !important; }

/* ---------- Gallery thumbs ---------- */
.thumb{ background:#1b2130 !important; border:1px solid var(--line) !important; }
.caption{ color:#e8ebf0 !important; }

/* ---------- Footer ---------- */
footer{ background:#0f1115 !important; border-top:1px solid var(--line) !important; }
.footer-links a{ color:var(--ink); }
/* Remove gold underline “lines” entirely */
.footer-links a::after{ background:transparent !important; }

/* ---------- Misc / Inputs ---------- */
input, textarea{
  background:#0f1115 !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
}
input::placeholder, textarea::placeholder{ color:#8a90a0 !important; }
label{ color:#d7dded !important; }

/* Toast */
.toast{ background:#111 !important; color:#fff !important; box-shadow:0 10px 28px rgba(0,0,0,.5); }

/* Small accent borders under section titles (looks fancy) */
.why h2, .card h3, .title{
  position:relative;
}
.why h2::after, .card h3::after, .title::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:56px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, var(--brand), rgba(212,175,55,0));
}

/* Underline on hover for inline links only (keeps it subtle, no thick bars) */
a:not(.nav-link):not(.btn):not(.icon-link):hover{
  text-decoration:underline;
  text-decoration-color:var(--brand);
  text-underline-offset:3px;
}

/* Instagram ring inside placeholder avatar (about page) */
.avatar{ box-shadow:inset 0 0 0 6px rgba(247,215,116,.25) !important; }