/* public/assets/css/site.css */

/* === Base theme === */
:root{
  color-scheme: dark;
  --bg: #070a12;
  --panel: rgba(255,255,255,0.04);
  --panel-2: rgba(255,255,255,0.06);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --border: rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);
  --radius: 18px;

  /* accent injected from head.php as --accent */
}

.v-body{
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(250,204,21,0.10), transparent 60%),
    radial-gradient(700px 500px at 85% 20%, rgba(250,204,21,0.06), transparent 55%),
    linear-gradient(180deg, #060813 0%, #070a12 30%, #070a12 100%);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
}

/* Reduce “Bootstrap default” feel */
.container{ max-width: 1120px; }

h1,h2,h3{ letter-spacing: -0.03em; }
.lead{ color: var(--muted) !important; }

/* Links */
a{ color: rgba(255,255,255,0.9); }
a:hover{ color: #fff; }

/* === Header / Nav === */
.v-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(14px);
  background: rgba(7,10,18,0.55);
  border-bottom: 1px solid var(--border);
}

.v-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
}

.v-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
}

.v-brand__icon{
  border-radius: 8px;
  filter: drop-shadow(0 0 18px rgba(250,204,21,0.18));
}

.v-brand__text{
  font-weight: 700;
  letter-spacing: -0.02em;
}

.v-nav__links{ }
.v-nav__items{
  display:flex;
  align-items:center;
  gap: 18px;
}

.v-link{
  text-decoration:none;
  color: rgba(255,255,255,0.78);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 10px;
  border-radius: 12px;
  transition: background .15s ease, color .15s ease;
}

.v-link:hover{
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.95);
}

.v-link.is-active{
  background: rgba(250,204,21,0.12);
  color: rgba(255,255,255,0.96);
  box-shadow: inset 0 0 0 1px rgba(250,204,21,0.20);
}

/* custom hamburger */
.v-nav__toggle{
  display:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 10px 12px;
}
.v-nav__toggleBars{
  display:block;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,0.8);
  position: relative;
}
.v-nav__toggleBars:before,
.v-nav__toggleBars:after{
  content:"";
  position:absolute;
  left:0;
  width: 20px;
  height: 2px;
  background: rgba(255,255,255,0.8);
}
.v-nav__toggleBars:before{ top: -6px; }
.v-nav__toggleBars:after{ top: 6px; }

/* Mobile */
@media (max-width: 991.98px){
  .v-nav__toggle{ display:block; }
  .v-nav__items{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 0 4px;
  }
  .v-link, .v-btn{ width:100%; text-align:center; }
}

/* === Buttons (don’t look like Bootstrap) === */
.v-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.v-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: var(--border-strong);
}

.v-btn--accent{
  background: linear-gradient(180deg, rgba(250,204,21,0.95), rgba(250,204,21,0.75));
  color: #121212;
  border-color: rgba(250,204,21,0.45);
  box-shadow: 0 10px 30px rgba(250,204,21,0.10);
}
.v-btn--accent:hover{
  box-shadow: 0 14px 40px rgba(250,204,21,0.14);
  color: #fff;
}

/* === Panels / cards === */
.v-panel{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.v-panel--strong{
  background: var(--panel-2);
  border-color: var(--border-strong);
}

/* Optional helper to make your existing Bootstrap “cards” look nicer */
.card, .border, .bg-black{
  border-radius: var(--radius) !important;
}

/* === Footer === */
.v-footer{
  margin-top: 64px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
}

.v-footer__brand{
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.v-footer__title{
  font-weight: 800;
  margin-bottom: 10px;
}

.v-footer__item{
  display:flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.v-footer__label{
  font-size: 0.8rem;
  color: var(--muted);
}

.v-footer__link{
  color: rgba(255,255,255,0.88);
  text-decoration:none;
}
.v-footer__link:hover{
  text-decoration: underline;
}

.v-footer__bottom{
  border-top: 1px solid var(--border);
}

/* Make Bootstrap secondary text play nicely */
.text-secondary{ color: var(--muted) !important; }

@media (min-width: 992px){
  .v-nav__links.collapse{
    display: block !important;
    height: auto !important;
    visibility: visible;
  }
}

.form-control, .form-select, textarea{
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  color: rgba(255,255,255,0.92) !important;
}
.form-control:focus, .form-select:focus, textarea:focus{
  box-shadow: 0 0 0 .25rem rgba(250,204,21,0.12) !important;
  border-color: rgba(250,204,21,0.45) !important;
}

/* Cookie consent */

.v-cookie{
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 520px;
  margin: auto;
  background: rgba(7,10,18,0.95);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  z-index: 9999;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.v-cookie__inner{
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v-cookie__text{
  font-size: .9rem;
  color: var(--muted);
}

.v-cookie__text a{
  color: var(--accent);
  text-decoration: none;
}

.v-cookie__actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}