/* =======================
   New Haven v2 Simplified Styles
   ------------------------------
   This stylesheet keeps the visual identity of the New Haven
   landing page while dramatically reducing specificity and
   removing layout hacks (e.g. 100vw widths, negative margins)
   that caused horizontal overflow on small screens.
   Author: AI Assistant – July 2025
   ======================= */

/* ---------- Global Reset ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* safeguard */
}

body {
  font-family: "Inter", sans-serif;
  color: #fff;
  background: #0a0a0a;
  min-height: 100vh;
  overflow-x: hidden; /* prevent accidental scrollbars */
  position: relative;
}

/* Background image with gentle zoom */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 60%, rgba(0, 0, 0, 0.9) 100%),
              url("../images/forge-maps/Tahira Temple/2.d7db31e8f683.png") center / cover no-repeat;
  animation: bg-zoom 4s ease-out forwards;
  transform-origin: center;
}

@keyframes bg-zoom {
  0% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* Prevent duplicate overlay used elsewhere in original CSS */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: none;
}

/* ---------- Layout Wrappers ---------- */
.nh-page {
  width: 100%;
  padding: 0;
}

section {
  width: 100%;
}

.section-block {
  width: 100%; /* ensure full-width container cannot exceed viewport */
  box-sizing: border-box;
  padding: 80px 1rem;
  max-width: 1200px;
  margin: 0 auto 60px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.section-block:last-child {
  margin-bottom: 0;
}

/* ---------- Hero Section ---------- */
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
}

.new-haven-title {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}

.new-haven-description {
  font-size: 1.2rem;
  letter-spacing: 2px;
  opacity: 0.85;
  margin-bottom: 36px;
}

/* Call-to-action */
.cta-wrapper {
  display: flex;
  justify-content: center;
}

.cta-discord {
  display: inline-block;
  padding: 14px 32px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-discord:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* ---------- Intro (Experience) Section ---------- */
.exp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.exp-img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.exp-title {
  font-family: "Montserrat", sans-serif;
  font-size: 2.5rem;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.exp-emblem {
  height: 48px;
  width: 48px;
  object-fit: contain;
}

.nh-summary {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #d5d5d5;
}

/* ---------- Core Values Section ---------- */
.core-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  margin-top: 32px;
}

.core-value {
  background: #111;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 24px 20px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* gold accent for all cards */
  --accent-color: #ffd700;
  display: flex;
  flex-direction: column;
}

.core-value:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.6), 0 0 12px var(--accent-color), 0 0 24px var(--accent-color);
}

/* Remove overlay additions */
.core-value::before,
.core-value::after {
  display: none;
}

/* Content stays above */
.core-value > * { position: static; }

.core-title {
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.core-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #cfcfcf;
}

.offer-sub {
  margin-top: auto;
  font-size: 0.8rem;
  color: #aaaaaa;
}

/* ---------- Division Section ---------- */
.division-header {
  text-align: center;
  margin-bottom: 40px;
}

.experience-heading {
  font-family: "Montserrat", sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-align: center;
}

.division-text {
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
  color: #dadada;
}

.division-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  margin: 40px 0 50px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2.6rem;
  font-weight: 700;
}

.stat-label {
  font-size: 0.9rem;
  letter-spacing: 1px;
  opacity: 0.8;
}

.division-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}

.division-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.division-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6);
}

.division-bg {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
  filter: brightness(0.65);
  transition: filter 0.3s ease;
}

.division-card:hover .division-bg {
  filter: brightness(0.9);
}

.division-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%);
}

.division-title {
  font-size: 1.8rem;
  margin-bottom: 6px;
}

.division-desc {
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.85;
  max-height: none;
  overflow: visible;
}

.division-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.trait {
  background: rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: 2px;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
}

/* ---------- Explore More Cards ---------- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.card {
  background: #111;
  border: 1px solid #222;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
}

.card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.card:hover .card-image img {
  transform: scale(1.06);
}

.card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px 14px;
  font-family: "Montserrat", sans-serif;
  font-size: 1.2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
}

.card-content {
  padding: 20px 22px 26px;
}

.card-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #cecece;
}

/* ---------- Simple Fade / Slide Animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.reveal-text {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

/* Add .in-view with JavaScript when element enters viewport */
.reveal.in-view,
.reveal-text.in-view {
  opacity: 1;
  transform: none;
}

/* ---------- Responsive Tweaks ---------- */
@media (max-width: 900px) {
  .exp-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .section-block {
    margin: 0 0 40px;
    padding: 60px 0.75rem;
    border-radius: 0; /* square corners on mobile */
  }
  .exp-title {
    white-space: nowrap; /* prevent wrapping of heading text */
    font-size: 2rem; /* slightly smaller on mobile */
  }
  /* Remove rounded corners for intro section on small screens */
  .summary-sec {
    border-radius: 0;
  }

  .division-stats {
    gap: 18px;
  }

  .division-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .new-haven-description {
    font-size: 1rem;
  }

  .stat-number {
    font-size: 2rem;
  }
}

/* ---------- Rank Marquee (Structured Advancement) ---------- */
.rank-marquee {
  overflow: hidden;
  height: 38px;
  margin-bottom: 12px;
  position: relative;
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.rank-track {
  display: flex;
  gap: 10px;
  will-change: transform;
  /* animation removed – handled via JS for seamless loop */
}

.rank-track img {
  height: 38px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .rank-marquee { height: 32px; }
  .rank-track img { height: 32px; }
}

@media (max-width: 500px) {
  .core-values-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
  .section-block { margin: 0 0 40px; padding: 60px 0.75rem; }
}