/* ================================
   Ventras Group – styles.css (full)
   ================================ */

/* Theme tokens (for future use) */
:root {
  --page-bg: #0f172a;
  --surface: #111827;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #2563eb;
  --ring: rgba(37, 99, 235, 0.35);
}

/* Base / reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans,
        "Apple Color Emoji", "Segoe UI Emoji";
  /* Background image path is relative to /Landing/src/styles.css */
  background: url("../Ventras Group SVG/Background.svg") center / cover no-repeat fixed;
}

/* ===== Hero ===== */
.landing-hero {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: url("../Ventras Group SVG/Background.svg") center / cover no-repeat fixed;
  overflow: hidden;
  padding-bottom: 40px; /* ensures room for icons on short screens */
}

/* Soft vignette over the background (non-blocking) */
.landing-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 50% 40%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.05) 40%,
      rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

.hero-layer {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.hero-logo {
  width: min(92vw, 1200px);
  height: auto;
  display: block;
  margin-inline: auto;
  place-self: center;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,0.8));
  transform: translateY(-11.8vh);
  margin-bottom: 0; /* icons spacing handled below */
}

/* ===== Social bar – UNDER the logo (not fixed) ===== */
.social-bar {
  /* Let it sit in normal document flow under the logo */
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;

  width: 100%;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 28px;   /* space below the logo */
  z-index: 1;
}

/* Icon buttons — SQUARE corners */
.social-button {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 0 !important;     /* square */
  overflow: visible !important;     /* don’t clip SVG edges */
  border: 0;
  background: transparent;
  box-shadow: none;
  transition: transform .15s ease, opacity .15s ease;
}

.social-button:hover { transform: translateY(-2px) scale(1.02); }
.social-button:active { transform: translateY(-1px) scale(0.98); }

.social-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 0 !important;      /* square */
}

/* Defensive: make sure nothing transparent on top eats clicks */
.overlay, .scrim, .backdrop { pointer-events: none !important; }

/* ===== Responsive tweaks ===== */
@media (max-width: 1024px) {
  .hero-logo { width: min(94vw, 1040px); }
}

@media (max-width: 768px) {
  .hero-logo { width: min(96vw, 860px); }
  .social-bar { margin-top: 20px; gap: 12px; }
  .social-button { width: 38px; height: 38px; }
}

@media (max-width: 420px) {
  .hero-logo { width: 96vw; }
  .social-bar { margin-top: 16px; gap: 10px; }
  .social-button { width: 34px; height: 34px; }
}