/* LiquidVacations.com - Dark luxury UI (high contrast) */

:root{
  /* Text */
  --text-100: rgba(255,255,255,.98);
  --text-85:  rgba(255,255,255,.90);
  --text-75:  rgba(255,255,255,.82);

  /* Surfaces */
  --surface-1: rgba(255,255,255,.07); /* glass */
  --surface-2: rgba(255,255,255,.09); /* cards */
  --border-1:  rgba(255,255,255,.20);

  /* Hero overlay (lower = more image visible) */
  --hero-top:    .50;
  --hero-mid:    .12;
  --hero-bottom: .28;
}

body{
  color: var(--text-100);
  background: #0b0f14; /* deep dark */
}

/* --- Headings: force near-white everywhere (fixes h5 too) --- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
  color: var(--text-100) !important;
}

/* --- Improve readability of "muted" text on dark --- */
.text-secondary,
.small.text-secondary,
small.text-secondary{
  color: var(--text-75) !important;
}

.text-light-50{
  color: var(--text-85) !important;
}

/* Paragraphs in cards/glass often look dim—boost slightly */
.card-dark p,
.glass p{
  color: var(--text-85);
}

/* --- Links --- */
a{
  color: rgba(255,255,255,.88);
}
a:hover{
  color: rgba(255,255,255,.98);
}

a.link-secondary{
  color: rgba(255,255,255,.78) !important;
}
a.link-secondary:hover{
  color: rgba(255,255,255,.96) !important;
}

/* --- Hero --- */
.hero{
  position: relative;
  background: url("../img/hero.jpg") center/cover no-repeat;
  border-bottom: 1px solid var(--border-1);
}

/* MUCH lighter overlay = hero image more visible */
.hero-overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      90% 70% at 25% 25%,
      rgba(0,0,0,var(--hero-top)) 0%,
      rgba(0,0,0,var(--hero-mid)) 55%,
      rgba(0,0,0,var(--hero-bottom)) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,var(--hero-top)),
      rgba(0,0,0,var(--hero-bottom))
    );
}

.min-vh-60{
  min-height: 60vh;
}

/* --- Glass & Cards --- */
.glass{
  background: var(--surface-1);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-1);
}

.card-dark{
  background: var(--surface-2);
  border: 1px solid var(--border-1) !important;
}

/* Card text tweaks */
.card-dark .card-body{
  color: var(--text-85);
}
.card-dark .card-body .text-secondary{
  color: var(--text-75) !important;
}

/* --- List group on dark (sitemap) --- */
.list-group-item{
  background: transparent !important;
  color: var(--text-100) !important;
  border-color: var(--border-1) !important;
}
.list-group-item:hover{
  background: rgba(255,255,255,.05) !important;
}
.list-group-item .small{
  color: rgba(255,255,255,.78) !important;
}

/* --- Navbar tweaks (optional readability) --- */
.navbar{
  border-bottom-color: var(--border-1) !important;
}
.navbar .nav-link{
  color: rgba(255,255,255,.80) !important;
}
.navbar .nav-link:hover{
  color: rgba(255,255,255,.98) !important;
}
.navbar .nav-link.active{
  color: rgba(255,255,255,.98) !important;
}

/* --- Forms on dark --- */
.form-label{
  color: rgba(255,255,255,.92) !important;
}
.form-control,
.form-control:focus{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.95);
}
.form-control::placeholder{
  color: rgba(255,255,255,.55);
}
textarea.form-control{
  background: rgba(255,255,255,.06);
}

/* Buttons (keep bootstrap defaults but slightly clearer outlines) */
.btn-outline-light{
  border-color: rgba(255,255,255,.35) !important;
}
.btn-outline-light:hover{
  border-color: rgba(255,255,255,.60) !important;
}

/* --- Cookie bar --- */
.cookie-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,.88);
  border-top: 1px solid var(--border-1);
  z-index: 1050;
}

/* --- Optional: tighten typography on small screens --- */
@media (max-width: 576px){
  .display-4{ font-size: 2.2rem; }
}