/* =============================================================
   RevivaMemory — Base Stylesheet

   This file contains global styles that apply across the entire site.
   It includes colour variables, resets, layout helpers, navigation,
   buttons, footer, modal and dropdown components.  Page‑specific
   styles have been moved to style.css.
   ============================================================= */

:root {
  --rv-bg: #0e0f12;
  --rv-bg-soft: #13151a;
  --rv-card: #1a1d24;
  --rv-text: #e8e8ec;
  --rv-muted: #b0b4c0;
  --rv-primary: #7c4dff;
  --rv-primary-2: #3fa3ff;
  --rv-border: #2a2e37;
  --rv-radius: 16px;
  --rv-radius-lg: 20px;
  --rv-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --rv-gutter: 20px;
  --rv-maxw-wide: 1400px;
  --rv-maxw-narrow: 1200px;
  --rv-title-gap: 7rem;
  /* Fallback hero image; replace with a local image if desired */
  --rv-hero-bg: url('https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?q=80&w=1920&auto=format&fit=crop');
}

/* Box sizing reset */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--rv-bg);
  color: var(--rv-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.55;
}

/* --------- Navbar --------- */
.rv-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(15, 16, 20, .85), rgba(15, 16, 20, .65));
  border-bottom: 1px solid var(--rv-border);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--rv-gutter);
  padding: 12px 24px;
}

.rv-nav__left,
.rv-nav__center,
.rv-nav__right {
  display: flex;
  align-items: center;
}

.rv-nav__center {
  gap: 16px;
  justify-content: center;
}

.rv-nav__right {
  gap: 10px;
  justify-content: flex-end;
}

.rv-logo {
  font-weight: 700;
  text-decoration: none;
  color: var(--rv-text);
  letter-spacing: .3px;
}

.rv-nav__link {
  color: var(--rv-muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}

.rv-nav__link:hover {
  color: var(--rv-text);
  background: rgba(255, 255, 255, .06);
}

/* User indicator in navbar */
.rv-nav__user {
  color: var(--rv-text);
  margin-right: 8px;
  font-weight: 600;
}

/* Buttons */
.rv-btn {
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid var(--rv-border);
  background: var(--rv-bg-soft);
  color: var(--rv-text);
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}

.rv-btn:hover {
  transform: translateY(-1px);
}

.rv-btn--primary {
  background: linear-gradient(135deg, var(--rv-primary), var(--rv-primary-2));
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(124, 77, 255, .3);
}

.rv-btn--ghost {
  background: transparent;
}

/* --------- Aesthetic Separator --------- */
.rv-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px 20px 14px;
}

.rv-sep__line {
  display: inline-block;
  width: min(40vw, 520px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent);
}

.rv-sep__dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rv-primary), var(--rv-primary-2));
  box-shadow: 0 0 16px rgba(124, 77, 255, .6);
}

/* --------- Section Title Block --------- */
.rv-title-block {
  width: min(var(--rv-maxw-narrow), 96%);
  margin: 0 auto;
}

.rv-sec-title {
  margin-top: var(--rv-title-gap);
  margin-bottom: 18px;
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 800;
  text-align: center;
}

/* --------- Footer --------- */
.rv-footer {
  border-top: 1px solid var(--rv-border);
  background: #0b0c0f;
  padding: 18px 24px;
}

.rv-footer__inner {
  width: min(var(--rv-maxw-wide), 98%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--rv-muted);
}

.rv-footer__nav {
  display: flex;
  gap: 14px;
}

.rv-footer__nav a {
  color: var(--rv-muted);
  text-decoration: none;
}

.rv-footer__nav a:hover {
  color: var(--rv-text);
}

/* --------- Modal Styles --------- */
.rv-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.rv-modal.is-open {
  display: flex;
}

.rv-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.rv-modal__content {
  position: relative;
  z-index: 1;
  background: var(--rv-card);
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius-lg);
  padding: 24px;
  width: clamp(280px, 90%, 420px);
  box-shadow: var(--rv-shadow);
}

.rv-modal__title {
  margin: 0 0 12px;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  text-align: center;
}

.rv-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--rv-muted);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.rv-modal__close:hover {
  color: var(--rv-text);
}

.rv-form-group {
  margin-bottom: 14px;
}

.rv-form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
  color: var(--rv-text);
}

.rv-form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--rv-border);
  border-radius: var(--rv-radius);
  background: var(--rv-bg-soft);
  color: var(--rv-text);
  font-size: 14px;
}

.rv-form-group input:focus {
  outline: none;
  border-color: var(--rv-primary);
}

.rv-form-error {
  color: #ff6b6b;
  font-size: 14px;
  margin-bottom: 12px;
  text-align: center;
}

/* --------- Dropdown Styles --------- */
.rv-dropdown {
  position: relative;
}

.rv-dropdown__trigger {
  /* Match navigation link styling: muted colour, padding, border radius */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: transparent;
  color: var(--rv-muted);
  border: none;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .2s ease, color .2s ease;
}

.rv-dropdown__trigger::after {
  content: "▾";
  font-size: 10px;
  margin-left: 4px;
  opacity: .8;
}

.rv-dropdown__menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  background: var(--rv-card);
  border: 1px solid var(--rv-border);
  border-radius: 12px;
  box-shadow: var(--rv-shadow);
  padding: 6px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 60;
}

.rv-dropdown.is-open .rv-dropdown__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.rv-dropdown__item {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--rv-text);
  white-space: nowrap;
}

.rv-dropdown__item:hover {
  background: rgba(255, 255, 255, .06);
}

/* Hover and open state for dropdown trigger */
.rv-dropdown__trigger:hover,
.rv-dropdown.is-open>.rv-dropdown__trigger {
  color: var(--rv-text);
  background: rgba(255, 255, 255, .06);
}

/* --------- Responsive (Global) --------- */
@media (max-width: 980px) {
  .rv-nav {
    grid-template-columns: 1fr auto auto;
  }

  .rv-nav__center {
    display: none;
  }
}

@media (max-width: 560px) {
  .rv-footer__inner {
    flex-direction: column;
    gap: 10px;
  }
}