/* Shared glass surfaces + app-page hero image backdrop. */

:root {
  --glass-surface:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
    linear-gradient(145deg, rgba(247, 250, 244, 0.56), rgba(227, 235, 227, 0.32));
  --glass-surface-strong:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)),
    linear-gradient(145deg, rgba(248, 251, 246, 0.64), rgba(229, 237, 229, 0.4));
  --glass-border: rgba(250, 252, 248, 0.38);
  --glass-border-strong: rgba(255, 255, 255, 0.56);
  --shadow-glass: 0 20px 42px rgba(31, 51, 42, 0.16);
  --shadow-glass-hover: 0 24px 48px rgba(31, 51, 42, 0.19);
  --nav-glass-surface:
    linear-gradient(180deg, rgba(249, 251, 247, 0.7), rgba(229, 236, 228, 0.46)),
    linear-gradient(140deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12));
  --nav-glass-surface-strong:
    linear-gradient(180deg, rgba(250, 252, 248, 0.84), rgba(231, 238, 231, 0.62)),
    linear-gradient(140deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.18));
  --nav-glass-border: rgba(250, 252, 248, 0.48);
  --nav-glass-shadow: 0 18px 38px rgba(31, 51, 42, 0.16);
}

.app-hero-page {
  position: relative;
  background: transparent;
  min-height: 100vh;
}

.app-hero-page .app-hero-viewport {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.app-hero-page .app-hero-viewport::before,
.app-hero-page .app-hero-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
}

.app-hero-page .app-hero-viewport::before {
  background-image: url("../images/alligator-hero-image.png");
  background-size: cover;
  background-position: 88% center;
  background-repeat: no-repeat;
  opacity: 0.6;
  transform: scale(1.02);
}

.app-hero-page .app-hero-viewport::after {
  background:
    linear-gradient(110deg, rgba(238, 242, 236, 0.42) 0%, rgba(238, 242, 236, 0.2) 38%, rgba(226, 233, 225, 0.34) 100%),
    radial-gradient(120% 80% at 7% 2%, rgba(148, 181, 159, 0.14) 0%, rgba(148, 181, 159, 0) 56%);
}

.app-hero-page > header,
.app-hero-page > main,
.app-hero-page > footer {
  position: relative;
  z-index: 1;
}

header[data-nav-profile="user"],
header[data-nav-profile="landing"] {
  background: var(--nav-glass-surface);
  border-bottom-color: rgba(250, 252, 248, 0.2);
  box-shadow: var(--nav-glass-shadow);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.app-hero-page > header[data-nav-profile="user"],
.landing-page > header[data-nav-profile="landing"] {
  width: min(1120px, calc(100% - 1.5rem));
  margin: clamp(0.75rem, 2.5vw, 1.1rem) auto 0;
  padding: clamp(0.85rem, 2vw, 1.1rem) clamp(1rem, 2.6vw, 1.35rem);
  border: 1px solid var(--nav-glass-border);
  border-radius: 1.35rem;
  box-sizing: border-box;
}

header[data-nav-profile="user"] .nav-panel,
header[data-nav-profile="landing"] .nav-panel {
  gap: 0.85rem;
}

header[data-nav-profile="user"] .nav-primary ul,
header[data-nav-profile="landing"] .nav-primary ul {
  gap: clamp(0.45rem, 1vw, 0.95rem);
}

header[data-nav-profile="user"] li a,
header[data-nav-profile="landing"] li a {
  font-size: clamp(0.97rem, 0.35vw + 0.88rem, 1.04rem);
  padding: 0.58rem 0.82rem;
  border-radius: 999px;
}

header[data-nav-profile="user"] li a:hover,
header[data-nav-profile="user"] li a:focus-visible,
header[data-nav-profile="landing"] li a:hover,
header[data-nav-profile="landing"] li a:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  color: var(--olive-950);
}

header[data-nav-profile="user"] .nav-highlight-pill,
header[data-nav-profile="landing"] .nav-highlight-pill {
  background-color: rgba(31, 51, 42, 0.7);
}

header[data-nav-profile="user"] .nav-menu-toggle,
header[data-nav-profile="landing"] .nav-menu-toggle,
header[data-nav-profile="landing"] .nav-auth-btn-login,
header[data-nav-profile="landing"] .nav-auth-btn-register,
header[data-nav-profile="user"] .nav-auth-btn-login,
header[data-nav-profile="user"] .nav-auth-btn-logout {
  background: rgba(247, 250, 244, 0.74);
  border-color: rgba(33, 57, 46, 0.18);
}

header[data-nav-profile="user"] .nav-auth-btn-register,
header[data-nav-profile="landing"] .nav-auth-btn-register {
  background:
    linear-gradient(135deg, rgba(51, 82, 68, 0.96), rgba(120, 158, 133, 0.9));
}

@media (min-width: 1081px) and (min-aspect-ratio: 4/3) {
  header[data-nav-profile="user"] .nav-panel,
  header[data-nav-profile="landing"] .nav-panel {
    padding: 0.38rem 0.42rem;
    border: 1px solid rgba(250, 252, 248, 0.34);
    border-radius: 1.1rem;
    background:
      linear-gradient(180deg, rgba(249, 251, 247, 0.34), rgba(229, 236, 228, 0.2)),
      linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  }

  header[data-nav-profile="user"] .nav-primary,
  header[data-nav-profile="user"] .nav-auth-actions,
  header[data-nav-profile="landing"] .nav-primary,
  header[data-nav-profile="landing"] .nav-auth-actions {
    padding: 0.2rem;
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.14);
  }

  header[data-nav-profile="user"] .nav-auth-actions,
  header[data-nav-profile="landing"] .nav-auth-actions {
    gap: 0.45rem;
  }
}

main,
.all-activities,
.app-legal-page,
.create-activity,
.auth-page,
.activity-card-page,
.profile-page,
.filler {
  background: transparent;
}

.app-hero-page main,
.app-hero-page .all-activities,
.app-hero-page .app-legal-page,
.app-hero-page .create-activity,
.app-hero-page .activity-card-page,
.app-hero-page .profile-page {
  position: relative;
  padding-bottom: clamp(3rem, 8vh, 5rem);
}

.app-hero-page .content,
.app-hero-page .page-card {
  width: min(1120px, 100%);
  max-width: min(1120px, 100%);
  margin-inline: auto;
}

.app-hero-page .content {
  margin-right: auto;
}

.all-activities .activities-grid,
.profile-page .activities {
  gap: 1rem;
}

.all-activities .page-card {
  border-color: var(--border-warm);
}

.content,
.sidebar,
.login-card,
.page-card,
.activity-card,
.activity-detail-card,
.password-modal-card,
.delete-modal-card,
.landing-home .hero-home-copy {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.landing-home .hero-home-copy {
  background: var(--glass-surface-strong);
  border-color: var(--glass-border-strong);
}

.activity-card {
  background: var(--glass-surface);
}

.activity-card-link:hover .activity-card {
  background: var(--glass-surface-strong);
  border-color: var(--glass-border-strong);
  box-shadow: var(--shadow-glass-hover);
}

.activities .activity-card-link:nth-child(4n + 1):hover .activity-card,
.activities-grid .activity-card-link:nth-child(4n + 1):hover .activity-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12)),
    linear-gradient(145deg, rgba(236, 245, 235, 0.66), rgba(223, 236, 226, 0.38));
}

.activities .activity-card-link:nth-child(4n + 2):hover .activity-card,
.activities-grid .activity-card-link:nth-child(4n + 2):hover .activity-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12)),
    linear-gradient(145deg, rgba(234, 243, 236, 0.66), rgba(219, 234, 225, 0.38));
}

.activities .activity-card-link:nth-child(4n + 3):hover .activity-card,
.activities-grid .activity-card-link:nth-child(4n + 3):hover .activity-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12)),
    linear-gradient(145deg, rgba(240, 244, 234, 0.66), rgba(227, 233, 220, 0.38));
}

.activities .activity-card-link:nth-child(4n):hover .activity-card,
.activities-grid .activity-card-link:nth-child(4n):hover .activity-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.12)),
    linear-gradient(145deg, rgba(233, 242, 233, 0.66), rgba(218, 231, 222, 0.38));
}

@media (max-width: 760px) {
  .app-hero-page .app-hero-viewport::before {
    background-position: 82% center;
  }
}

@media (max-aspect-ratio: 4/3) {
  .app-hero-page .app-hero-viewport::before {
    background-position: 80% center;
  }
}