/*
  ============================================================
  BRANDING OVERRIDE — villasoca.nl / Villa SoCa
  ============================================================
  Voeg toe aan index.html, NA de bestaande <link> voor fonts:

  STAP 1 — Vervang de Google Fonts link door:
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Jost:wght@300;400;500;600&display=swap" rel="stylesheet">

  STAP 2 — Voeg DIRECT NA de fonts link toe:
  <link rel="stylesheet" href="branding.css">

  STAP 3 — Vervang de nav-logo div door:
  <div class="nav-logo" onclick="showPage('home')">
    <div class="nav-logo-icon">VS</div>
    <div class="nav-logo-text">Villa SoCa<span>villasoca.nl</span></div>
  </div>

  STAP 4 — Vervang in de footer de copyright regel door:
  © 2026 Villa SoCa · La Nucia, Costa Blanca, España · <a href="https://vakantiehuishuren.es" style="color:inherit;">vakantiehuishuren.es</a>

  Dat is alles!
  ============================================================
*/

/* ── KLEUREN & FONTS ───────────────────────────────────── */
:root {
  --terra: #C4692A;
  --terra-light: #E8855A;
  --terra-pale: #F5E6DC;
  --olive: #7A8C5E;
  --olive-light: #7A8C4E;
  --cream: #FAF7F2;
  --warm-white: #FAF7F2;
  --sand: #E8D5B0;
  --dark: #1A2E3B;
  --mid: #2d4455;
  --text: #1A2E3B;
  --gold: #D4A853;
  --ocean: #2A7BA8;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
}

body {
  font-family: var(--sans);
  background: var(--warm-white);
  color: var(--text);
}

h1, h2, h3, h4,
.stitle,
.bcard .btitle,
.tcard-title,
.loc-name,
.blog-title,
.hb-title,
.av-h,
.footer-col h4,
.winter-strip .wp {
  font-family: var(--serif);
}

/* ── NAV — donker ──────────────────────────────────────── */
nav {
  background: rgba(26, 46, 59, 0.97) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 168, 83, 0.2) !important;
}

/* Logo icon + tekst */
.nav-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--terra), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  color: white;
  flex-shrink: 0;
}

.nav-logo {
  display: flex !important;
  align-items: center;
  gap: 12px;
}

.nav-logo-text {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: white;
  line-height: 1.1;
}

.nav-logo-text span {
  display: block;
  font-size: 9px;
  font-family: var(--sans);
  letter-spacing: 3px;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
}

/* Nav links — wit op donkere achtergrond */
.nav-links li a {
  color: rgba(255, 255, 255, 0.72) !important;
}
.nav-links li a:hover,
.nav-links li a.active {
  color: var(--gold) !important;
  background: rgba(212, 168, 83, 0.12) !important;
}

/* Taalbuttons */
.lang-btn {
  border-color: rgba(212, 168, 83, 0.5) !important;
  color: var(--gold) !important;
}
.lang-btn.active,
.lang-btn:hover {
  background: var(--terra) !important;
  color: white !important;
  border-color: var(--terra) !important;
}

/* Hamburger streepjes — goud */
.hamburger span {
  background: var(--gold) !important;
}

/* ── DROPDOWN MENU — donker ────────────────────────────── */
.dropdown-menu {
  background: rgba(26, 46, 59, 0.98) !important;
  border-left-color: rgba(212, 168, 83, 0.15) !important;
  border-bottom-color: rgba(212, 168, 83, 0.15) !important;
  box-shadow: -4px 4px 24px rgba(0, 0, 0, 0.35) !important;
}

.dropdown-menu a {
  color: rgba(250, 246, 240, 0.72) !important;
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
  color: var(--gold) !important;
  background: rgba(212, 168, 83, 0.1) !important;
  border-left-color: var(--terra) !important;
}

.dropdown-divider {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Menu overlay */
.menu-overlay {
  background: rgba(26, 46, 59, 0.5) !important;
}

/* ── HERO ──────────────────────────────────────────────── */
.hero::before {
  background: linear-gradient(
    155deg,
    rgba(26, 46, 59, 0.82) 0%,
    rgba(50, 30, 10, 0.60) 50%,
    rgba(196, 105, 42, 0.35) 100%
  ) !important;
}

/* ── LEGAL BANNER ──────────────────────────────────────── */
.legal-banner {
  background: #1e3347 !important;
}

/* ── GALLERY PLACEHOLDERS ──────────────────────────────── */
.g1 { background: linear-gradient(135deg, #1A2E3B, #2d4455) !important; }
.g2 { background: linear-gradient(135deg, #1A2E3B, #2A7BA8) !important; }
.g3 { background: linear-gradient(135deg, #C4692A, #D4A853) !important; }
.g4 { background: linear-gradient(135deg, #2d4455, #7A8C5E) !important; }
.g5 { background: linear-gradient(135deg, #1A2E3B, #C4692A) !important; }

/* ── AFSTANDSKAARTEN (omgeving) ────────────────────────── */
.dcard.sea  { background: linear-gradient(135deg, #1A2E3B, #2A7BA8) !important; }
.dcard.town { background: linear-gradient(135deg, #1A2E3B, #7A8C5E) !important; }

/* ── LOC KAARTEN — categorie labels ───────────────────── */
.loc-cat.strand { color: #2A7BA8 !important; }
.loc-dist { background: rgba(26, 46, 59, 0.82) !important; }

/* ── PAGE HEADER ───────────────────────────────────────── */
.page-header {
  background: linear-gradient(135deg, #1A2E3B, #C4692A) !important;
}

/* ── FEESTEN — religieus kleur ─────────────────────────── */
.fcard.religious {
  border-left-color: #2A7BA8 !important;
}
.fldot[style*="2E6A9A"],
.fcard.religious ~ * { color: #2A7BA8; }

/* ── WEERGRAPH ─────────────────────────────────────────── */
.weather-wrap {
  background: linear-gradient(135deg, #1A2E3B, #2A7BA8) !important;
}

/* ── KLIMAAT TABS ──────────────────────────────────────── */
.ytab.active {
  background: var(--terra) !important;
}

/* ── TAGS ──────────────────────────────────────────────── */
.tag-xmas { background: #2A7BA8 !important; }

/* ── HUISREGELS bullets ────────────────────────────────── */
.ritem::before {
  content: '✦' !important;
  color: var(--terra);
}

/* ── FOOTER ────────────────────────────────────────────── */
footer {
  background: #111e28 !important;
}

.footer-col p[style*="color:var(--gold)"],
footer .footer-brand-domain {
  color: var(--gold) !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: .72rem;
}