/*
 * LIQUIDog Website Stylesheet
 * ---------------------------
 * - Fun, vibrant meme-coin landing page
 * - Strong focus on readability and responsiveness
 * - Glassmorphism cards, bold hero, simple sections
 */

/* =========================================================
   1. Global reset & base typography
   ========================================================= */

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

body {
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  background: linear-gradient(135deg, #051622, #084C9E);
  line-height: 1.5;
}

/* Prevent tiny horizontal scroll on mobile */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* =========================================================
   2. Navigation bar
   ========================================================= */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  z-index: 1000;
}

.navbar .logo {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.navbar .nav-links {
  list-style: none;
  display: flex;
  gap: 2rem;
}

.navbar .nav-links a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 500;
  transition: color 0.3s ease;
}

.navbar .nav-links a:hover {
  color: #6ddfff;
}

/* Mobile navbar layout */
@media (max-width: 900px) {
  .navbar {
    flex-direction: column;        /* stack logo + links */
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.25rem;
    gap: 0.6rem;
    text-align: center;
  }

  .navbar .logo {
    width: 100%;
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 0.2rem;
  }

  .navbar .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
}

@media (max-width: 640px) {
  .navbar {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.25rem;
    gap: 0.6rem;
    text-align: center;
  }

  .navbar .logo {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
  }

  .navbar .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    font-size: 0.95rem;
    gap: 0.8rem;
  }
}

/* =========================================================
   3. Hero section
   ========================================================= */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: 6rem; /* space for navbar on desktop */
  overflow: hidden;
}

.hero-content {
  max-width: 500px;
  padding: 2rem;
}

/* Hero button row */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 2rem;
  flex-wrap: nowrap;
}

/* Remove extra margins on hero buttons – spacing handled by flex gap */
.hero-actions .btn,
.hero-actions .chart-btn {
  margin: 0;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.2;
  background: linear-gradient(90deg, #6ddfff, #22a6f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #d8eaff;
}

.hero-image {
  max-width: 500px;
  padding: 2rem;
  text-align: center;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

/* =========================================================
   4. Buttons / CTAs
   ========================================================= */

.btn {
  display: inline-block;
  padding: 0.9rem 2.2rem;
  background: #22a6f9;
  color: #ffffff;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(34, 166, 249, 0.4);
  transition: background 0.3s ease, transform 0.2s ease;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Don’t use generic button margins inside flex groups */
.hero-actions .btn,
.buy-actions .btn {
  margin: 0;
}

.btn:hover {
  background: #1a86d5;
  transform: translateY(-2px);
}

/* --- Dexscreener chart buttons (hero + how-to-buy) --- */

a.chart-btn,
a.chart-btn:link,
a.chart-btn:visited,
a.chart-btn:hover,
a.chart-btn:active,
a.chart-btn:focus {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.2rem !important;
  margin-left: 1rem;
  background: #34c759 !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  border: none !important;
  text-decoration: none !important;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 12px rgba(52, 199, 89, 0.4);
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.2s ease;
}

/* No extra left margin in grouped button layouts */
.hero-actions .chart-btn,
.buy-actions .chart-btn {
  margin-left: 0 !important;
}

a.chart-btn i {
  margin-right: 0.4rem;
}

a.chart-btn:hover,
a.chart-btn:active {
  background: #2fa94f !important;
  transform: translateY(-2px);
}

/* =========================================================
   5. Generic sections
   ========================================================= */

.section {
  padding: 4rem 2rem;
  text-align: center;
}

/* =========================================================
   6. About section
   ========================================================= */

.about {
  background: #093963;
  color: #e6f2ff;
}

.about h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, #6ddfff, #22a6f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about p {
  max-width: 800px;
  margin: 0 auto 1.5rem;
  font-size: 1.05rem;
  color: #cde3f5;
}

/* =========================================================
   7. Tokenomics section
   ========================================================= */

.tokenomics {
  background: #084072;
  color: #eaf6ff;
}

.tokenomics h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, #6ddfff, #22a6f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Cards container */
.tokenomics .token-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

/* Individual cards */
.tokenomics .card {
  width: 280px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.tokenomics .card h3 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: #ffffff;
}

.tokenomics .card p {
  font-size: 0.95rem;
  color: #d4e9ff;
}

/* Tokenomics – medium and down */
@media (max-width: 900px) {
  .tokenomics .token-info {
    flex-direction: column;
    align-items: center;
  }

  .tokenomics .card {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .tokenomics h2 {
    text-align: center;
    font-size: 2rem;
  }
}

/* =========================================================
   8. Roadmap section
   ========================================================= */

.roadmap {
  background: #093963;
  color: #e6f2ff;
}

.roadmap h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, #6ddfff, #22a6f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.roadmap-timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.roadmap .phase {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.roadmap .phase h3 {
  margin-bottom: 0.8rem;
  font-size: 1.4rem;
  background: linear-gradient(90deg, #6ddfff, #22a6f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.roadmap .phase ul {
  list-style: square inside;
  line-height: 1.6;
  color: #d4e9ff;
}

.roadmap .phase ul li {
  margin-bottom: 0.5rem;
}

/* =========================================================
   9. Gallery section
   ========================================================= */

.gallery {
  background: #093963;
  color: #e6f2ff;
}

.gallery h2 {
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, #6ddfff, #22a6f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gallery p {
  max-width: 800px;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  color: #cde3f5;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.gallery-container img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  background: #051622;
  max-height: 180px;
}

.gallery-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

.gallery-btn {
  padding: 0.6rem 1.2rem;
  background: #22a6f9;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(34, 166, 249, 0.4);
  transition: background 0.3s ease, transform 0.2s ease;
}

.gallery-btn:hover {
  background: #1a86d5;
  transform: translateY(-2px);
}

#pageIndicator {
  font-weight: 600;
  color: #6ddfff;
}

/* =========================================================
   10. Community section
   ========================================================= */

.community {
  background: #084072;
  color: #eaf6ff;
  padding-bottom: 6rem;
}

.community h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, #6ddfff, #22a6f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.community p {
  max-width: 800px;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  color: #cde3f5;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.social-icons a {
  font-size: 1.8rem;
  color: #ffffff;
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #6ddfff;
}

/* =========================================================
   11. Footer
   ========================================================= */

.footer {
  background: #051622;
  padding: 1rem 2rem;
  text-align: center;
  font-size: 0.85rem;
  color: #7aa5c7;
}

/* =========================================================
   12. Contract section
   ========================================================= */

.contract {
  background: #053b6a;
  color: #eaf6ff;
  padding: 4rem 2rem;
  text-align: center;
}

.contract h2 {
  font-size: 2.2rem;
  margin-bottom: 1.2rem;
  background: linear-gradient(90deg, #6ddfff, #22a6f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contract p {
  max-width: 700px;
  margin: 0 auto 1.5rem;
  font-size: 1.05rem;
  color: #cde3f5;
}

/* Contract address box */
.contract-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  max-width: 100%;
  margin: 0 auto;
  flex-wrap: wrap;          /* address + button can wrap instead of overflowing */
  width: fit-content;       /* shrink to fit content on desktop */
}

.contract-wrapper code {
  font-family: 'Poppins', monospace;
  color: #ffffff;
  font-size: 0.95rem;
  user-select: all;
  word-break: break-all;
  overflow-wrap: anywhere;
  flex: 0 1 auto;
  white-space: nowrap;      /* keep one line on desktop */
}

.copy-btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  background: #22a6f9;
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
}

.copy-btn:hover {
  background: #1a86d5;
  transform: translateY(-1px);
}

.copy-message {
  display: none;
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #6ddfff;
  font-weight: 500;
}

/* =========================================================
   13. Modal (gallery image preview)
   ========================================================= */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal[hidden] {
  display: none;
}

.modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-content img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.close-btn {
  position: absolute;
  top: -1.2rem;
  right: -1.2rem;
  background: #22a6f9;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease;
}

.close-btn:hover {
  background: #1a86d5;
}

.download-link {
  margin-top: 1rem;
  padding: 0.6rem 1.4rem;
  background: #22a6f9;
  color: #ffffff;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(34, 166, 249, 0.4);
  transition: background 0.3s ease, transform 0.2s ease;
}

.download-link:hover {
  background: #1a86d5;
  transform: translateY(-2px);
}

/* =========================================================
   14. How-to-buy section
   ========================================================= */

.how-to-buy {
  background: #084072;
  color: #e6f2ff;
}

.how-to-buy h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, #6ddfff, #22a6f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 4 steps in columns, responsive */
.buy-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 1.5rem auto 0 auto;
}

.buy-steps .step {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 1.5rem;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  text-align: left;
}

.buy-steps .step h3 {
  margin-bottom: 0.6rem;
  font-size: 1.2rem;
  color: #ffffff;
  background: linear-gradient(90deg, #6ddfff, #22a6f9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.buy-steps .step p {
  font-size: 0.95rem;
  color: #cde3f5;
}

/* Buttons under how-to-buy */
.buy-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem; /* slightly tighter so they don't get cut */
  margin-top: 2.5rem;
}

/* How-to-buy layout on mobile */
@media (max-width: 900px) {
  .buy-steps {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 600px) {
  .buy-steps {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   15. Responsive tweaks – general
   ========================================================= */

/* Older 768px block (kept, just clarified) */
@media (max-width: 768px) {
  .navbar .nav-links {
    gap: 1rem;
  }

  .hero {
    flex-direction: column-reverse;
    padding-top: 6rem;
    text-align: center;
  }

  .hero-content {
    max-width: 100%;
  }

  .hero-image {
    max-width: 100%;
  }

  .tokenomics .token-info {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* Mobile hero heading colour tweak */
@media (max-width: 640px) {
  .hero-content h1 {
    font-size: 2.3rem;
    line-height: 1.1;
    text-align: center;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, #ffffff, #9ff0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
  }
}

/* =========================================================
   16. Global mobile tuning (phones + small tablets)
   ========================================================= */

@media (max-width: 768px) {
  .section,
  .about,
  .contract,
  .tokenomics,
  .roadmap,
  .how-to-buy,
  .gallery,
  .community {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* Hero spacing so nav doesn’t sit on top of content */
  .hero {
    width: 100%;
    padding: 8.5rem 1.25rem 3rem;  /* increased top padding for mobile nav */
    margin: 0 auto;
  }

  .hero-content,
  .hero-image {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .buy-actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .contract-wrapper {
    justify-content: center;
  }
}

/* Extra tweaks for very narrow phones */
@media (max-width: 600px) {
  .contract-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .contract-wrapper code {
    /*
     * When the contract address and copy button stack vertically,
     * prevent the address block from growing to fill the available
     * height (which caused an overly tall box). Setting flex to
     * 0 0 auto keeps the height equal to its contents.
     */
    flex: 0 0 auto;
    text-align: center;
    margin-bottom: 0.5rem;
    white-space: normal;   /* allow wrapping on mobile */
  }

  .hero-actions {
    align-items: center;
    justify-content: center;
  }

  .copy-btn {
    align-self: center;
  }
}

@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2.3rem;
    line-height: 1.2;
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .hero-actions {
    align-items: center;
    justify-content: center;
  }

  /* Slightly smaller buttons so two stay on one line comfortably */
  .hero-actions .btn,
  .hero-actions .chart-btn,
  .buy-actions .btn,
  .buy-actions .chart-btn {
    padding: 0.7rem 1.4rem !important;
    font-size: 0.9rem;
  }

  .buy-actions {
    gap: 0.75rem;
  }
}