/* ──────────────────────────────────────────────
   Woodstock • FULL styles.css
   Desktop-first design with Bleed‑style mobile
   overlay menu + optimized hero button spacing
   July 2025
────────────────────────────────────────────── */

/* 1) Global reset + base layout */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #0c0c10 0%, #141419 100%);
  color: #e6e6e6;
  overflow-x: hidden;
}

/* Snow canvas (fixed backdrop) */
canvas#snow {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}

/* Re‑usable container */
.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* ──────────────────
   2) NAVIGATION BAR
─────────────────── */
.navbar {
  width: 100%;
  padding: 1rem 0;
  position: sticky; top: 0;
  background: rgba(12, 12, 16, 0.85);
  backdrop-filter: blur(10px);
  display: flex; justify-content: center;
  z-index: 1000;
  transition: background .3s ease, backdrop-filter .3s ease;
}
.navbar.scrolled {
  background: rgba(12, 12, 16, 0.95);
  backdrop-filter: blur(14px);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo (text) */
.logo {
  font-weight: 700; font-size: 1.5rem;
  color: #e6e6e6; text-decoration: none;
  cursor: pointer; transition: color .2s;
}
.logo:hover { color: #ffffff; }

/* Inline nav links (desktop view) */
nav a {
  margin-left: 1.5rem;
  font-weight: 600;
  color: #c9c9c9;
  text-decoration: none;
  transition: color .2s;
}
nav a:hover,
nav a.active { color: #ffffff; }

nav .cta {                /* “Invite” pill */
  background: #2a2a35;
  padding: 0.6rem 1.4rem;
  border-radius: 50px;
  color: #ffffff;
}

/* Hamburger icon (hidden on desktop) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 7px;
  background: none; border: 0;
  cursor: pointer;
  z-index: 1001;            /* above overlay */
}
.hamburger span {
  width: 28px; height: 3px;
  background: #e6e6e6;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
/* animation to “X” */
.hamburger.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* ──────────────────
   3) HERO SECTION
─────────────────── */
.hero {
  position: relative;
  padding: 8rem 0 6rem;
  text-align: center;
  z-index: 2;
}
.hero h1 {
  font-size: clamp(1.8rem, 4vw + 1rem, 3rem);
  line-height: 1.15;
  margin-bottom: 1rem;
  font-weight: 700;
}
/* grey highlight text */
.wave-text { font-weight: 700; color: #b0b0b0; }

.sub {
  font-size: 1.25rem;
  opacity: 0.85;
  margin: 0 auto 2rem;
  max-width: 700px;
}

/* CTA buttons */
.buttons .btn {
  display: inline-block;
  margin: 0 0.5rem;
  padding: 0.9rem 2rem;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s;
}
.btn.primary   { background: #7289da;                               color: #e6e6e6; }
.btn.secondary { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #e6e6e6; }
.btn:hover     { transform: translateY(-2px); }

/* Stats bar */
.stats {
  display: flex; gap: 2rem; justify-content: center;
  margin-top: 3rem; font-size: 1.05rem;
}
.stats div {
  background: rgba(255,255,255,0.04);
  padding: 1rem 2rem;
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

/* ──────────────────
   4) FOOTER
─────────────────── */
footer {
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.65;
  position: relative;
  z-index: 2;
}
.credit { text-decoration: underline; color: #e6e6e6; }
.credit:hover { color: #ffffff; }

/* ──────────────────
   5) COMMANDS PAGE + WHY US + MISC (unchanged)
─────────────────── */

/* Commands section */
.commands-section {
  padding: 6rem 0 8rem;
  min-height: 80vh;
  text-align: center;
  z-index: 2; position: relative;
}
.commands-section h1 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* Search */
.command-search-input,
#commandSearch {
  width: 100%; max-width: 400px;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  border-radius: 8px; border: none;
  background: rgba(255,255,255,0.06);
  color: #e6e6e6; outline: none;
  margin: 0 auto 2.5rem;
  display: block;
  transition: background-color 0.3s ease;
}
.command-search-input::placeholder { color: #b0b0b0; }
.command-search-input:focus { background: rgba(255,255,255,0.12); }

/* Command grid & cards */
.command-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px,1fr));
  gap: 1.5rem; max-width: 900px; margin: 0 auto;
  text-align: left;
}
.command-card {
  background: rgba(255,255,255,0.05);
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255,255,255,0.05);
  transition: background-color .25s, transform .15s;
  cursor: pointer; color: #ccc;
  display: flex; flex-direction: column;
}
.command-card:hover { background: rgba(255,255,255,0.10); transform: translateY(-3px); }
.command-name { display: flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: 1.25rem; margin-bottom: 0.4rem; }
.command-short { font-size: 0.95rem; color: #aaa; margin-bottom: 0.6rem; }
.command-details { display: none; margin-top: 0.6rem; font-size: 0.85rem; color: #999; }
.command-card.open .command-details { display: block; }

/* WHY US section */
.whyus {
  padding: 6rem 0;
  text-align: center;
  position: relative;
  z-index: 2;
}
.whyus h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 2rem; }
.features-grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
.feature-card {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  max-width: 300px; width: 100%;
  text-align: center;
  box-shadow: 0 0 15px rgba(255,255,255,0.05);
  display: flex; flex-direction: column; align-items: center;
  min-height: 420px;
}
.feature-card svg { width: 80px; height: 80px; margin-bottom: 1rem; fill: #ffffff; }
.feature-card h3 { font-size: 1.25rem; font-weight: 600; margin: 1rem 0 0.5rem; }
.feature-card p  { font-size: 0.95rem; line-height: 1.5; color: #ccc; flex-grow: 1; }
.whyus-cta { margin-top: 2rem; font-size: 1.2rem; font-weight: 600; }

/* ──────────────────
   6) MOBILE‑SPECIFIC QUERIES
─────────────────── */

/* 6‑A) ≤ 768 px  →  Bleed‑style full‑screen overlay menu */
@media (max-width: 768px) {
  /* transform nav into hidden overlay */
  .navbar nav {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh;
    background: rgba(12,12,16,0.97);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2.75rem;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(.4,0,.2,1);
    z-index: 999;
  }
  .navbar nav.open { transform: translateX(0); }

  /* big centred links */
  .navbar nav a {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 600;
    color: #e6e6e6;
  }
  .navbar nav a:hover { color: #ffffff; }

  /* pill style for Invite inside overlay */
  .navbar nav .cta {
    background: #2a2a35;
    padding: 0.8rem 2.2rem;
    border-radius: 60px;
    font-size: 1.55rem;
  }

  /* show hamburger, hide desktop inline links */
  .hamburger { display: flex; }
}

/* 6‑B) ≥ 769 px  →  desktop view */
@media (min-width: 769px) {
  .hamburger { display: none; }  /* no burger on desktop */
}

/* 6‑C) ≤ 600 px  →  stack hero CTAs with generous gap */
@media (max-width: 600px) {
  .hero .buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
  }
}
/* ═════════ PREMIUM PERMISSION PILL ═════════ */
.permission{
  display:inline-block;
  background:#5865f2;      /* normal perm = Discord blurple */
  color:#fff;
  padding:2px 8px;
  border-radius:12px;
  font-size:.85rem;
  user-select:none;
  margin-right:6px;
}

/* Special premium badge */
.permission.premium,
.premium.permission{        /* either class order works */
  background:linear-gradient(90deg,#ffd64f,#ffbe2f);
  color:#000;
  font-weight:700;
  box-shadow:0 0 4px rgba(0,0,0,.25);
}
/* end of stylesheet */
/* ═══════════════════════════════════════════════
   MOBILE FIXES → make layout match desktop
════════════════════════════════════════════════ */

/* 1. Hero buttons: keep same row layout on phones */
@media (max-width: 600px) {
  .hero .buttons{
    flex-direction: row !important;   /* override earlier column rule   */
    gap: 1.25rem !important;          /* same gap as desktop            */
  }
}

/* 2. Slide‑in nav: make buttons look like desktop pills, not full‑width */
@media (max-width: 768px) {
  /* let the panel scroll if content exceeds viewport */
  nav{ overflow-y: auto; }

  /* override the “full‑width” rule we added earlier */
  nav .btn{
    width: auto !important;
    padding: .6rem 1.4rem !important;
    font-size: inherit !important;
    margin: 0 !important;
  }
}
/* ═══════════════════════════════════════════════
   UNIVERSAL BUTTON + HERO ALIGNMENT RESTORE
   (keeps desktop look everywhere)
════════════════════════════════════════════════ */

/* 1  |  Absolute guarantee that anything with .btn really looks like a button */
a.btn,
button.btn,
.hero .btn {                /* make doubly sure hero inherits */
  display: inline-block !important;
  background: #404c84 !important;      /* brand blue pill */
  color: #fff !important;
  padding: 0.65rem 1.6rem !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-align: center !important;
  white-space: nowrap !important;
}
a.btn:hover,
button.btn:hover { background: #5865b5 !important; }

/* 2  |  Hero heading & button row—identical on phone and desktop */
@media (max-width: 768px) {

  /* Heading stays centred, with a slightly tighter font‑size ramp */
  .hero h1{
    text-align: center !important;
    font-size: clamp(1.7rem, 5.5vw + 0.5rem, 2.6rem) !important;
    line-height: 1.15 !important;
  }

  /* Keep the two CTAs side‑by‑side and centred */
  .hero .buttons{
    flex-direction: row !important;
    justify-content: center !important;
    gap: 1.25rem !important;
  }
}
/* ──────────────────────────────────────────────
   EMBED BUILDER (embed.html)
────────────────────────────────────────────── */
.builder{
  display:flex;
  gap:3rem;
  align-items:flex-start;
  padding:6rem 0 8rem;
}
.builder-left,.builder-right{flex:1;min-width:0}

/* form controls */
.builder label{display:block;margin-bottom:.4rem;font-weight:600}
.builder input[type="text"],
.builder input[type="url"],
.builder textarea,
.builder input[type="color"]{
  width:100%;
  padding:.6rem .8rem;
  margin-bottom:1.2rem;
  border-radius:8px;border:none;
  background:rgba(255,255,255,.06);
  color:#e6e6e6;font-family:inherit;font-size:1rem;
}
.builder textarea{resize:vertical;min-height:110px}

/* fields */
.field-row{display:flex;gap:.5rem;align-items:center;margin-bottom:1rem}
.field-row input[type="text"]{flex:1;margin-bottom:0}
.field-row .remove-field{
  background:none;border:none;color:#ff7070;font-size:1.4rem;
  cursor:pointer;line-height:1
}
.add-field{
  margin-top:.5rem;cursor:pointer;font-weight:600;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08);
  padding:.5rem .9rem;border-radius:8px;
}
.add-field:hover{background:rgba(255,255,255,.14)}

/* output */
.output-area{
  width:100%;padding:.8rem;border-radius:8px;
  background:rgba(0,0,0,.35);color:#e6e6e6;
  font-family:"Courier New",monospace;font-size:.9rem;
}
.copy-btn{
  margin:.8rem 0 2rem;display:inline-block;
  background:#404c84;color:#fff;
  padding:.55rem 1.3rem;border-radius:8px;
  font-weight:600;border:none;cursor:pointer;
}
.copy-btn.copied{background:#5865b5}

/* preview */
.embed-preview{
  background:#2f3136;border-left:4px solid var(--accent,#404c84);
  border-radius:8px;padding:1rem;color:#dcddde;font-size:.9rem;
}
.embed-preview .title{
  font-size:1.05rem;font-weight:600;margin-bottom:.4rem
}
.embed-preview .footer{margin-top:.8rem;opacity:.75;font-size:.75rem}

/* responsive */
@media(max-width:900px){.builder{flex-direction:column}}
/* ───── Embed builder compact layout ──── */
.compact-form{display:flex;flex-wrap:wrap;gap:1rem}
.form-pair{width:calc(50% - .5rem);display:flex;flex-direction:column}
.form-pair.full{width:100%}
.section{border:none;padding:0;margin:1.5rem 0 0}
.section legend{font-weight:700;margin-bottom:.6rem;font-size:1.05rem}
.color-inputs{display:flex;align-items:center;gap:.5rem}
.color-inputs input[type="color"]{width:40px;height:40px;padding:0;border:none;flex:0 0 40px}
.color-inputs input[type="text"]{flex:1;margin-bottom:0}
/* ───── New layout tweaks ──── */
.builder-left{max-width:650px}
.form-pair{width:100%}        /* every input full‑width now */
.big-preview{min-height:350px}
.small-output{height:110px}

/* keep everything tidy on phone */
@media(max-width:900px){
  .big-preview{min-height:260px}
}
/* ─── embed preview thumbnail support ─── */
.embed-preview{position:relative;}                /* let us absolutely‑place the thumb */
.embed-preview .thumb{
  position:absolute;top:16px;right:16px;
  width:80px;height:80px;border-radius:4px;
  object-fit:cover;
}

/* keep “long” inputs slim, not tall */
.compact-form input[type="text"],
.compact-form input[type="url"],
.compact-form input[type="color"],
.compact-form textarea{padding:.55rem .8rem;}    /* standard height – not bigger */
/* ───── Horizontal form rows ──── */
.horizontal-form .form-row{
  display:flex;align-items:center;gap:.8rem;
  margin-bottom:1rem;
}
.horizontal-form label{
  flex:0 0 130px;font-weight:600;
}
.horizontal-form input[type="text"],
.horizontal-form input[type="url"],
.horizontal-form textarea,
.horizontal-form .color-inline{
  flex:1;
}
/* keep same height */
.horizontal-form input,
.horizontal-form textarea{padding:.5rem .75rem}
.color-inline{display:flex;gap:.5rem;align-items:center}
.color-inline input[type="color"]{width:42px;height:42px;padding:0;border:none}

/* ───── Variables modal ──── */
.vars-btn{
  background:#404c84;color:#fff;border:none;
  padding:.45rem 1rem;border-radius:8px;font-weight:600;cursor:pointer;
}
.top-row{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;
}

.vars-modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);
  display:flex; align-items:center; justify-content:center;
  z-index:2000;
}

.vars-content{
  background:#1e1f22;
  padding:2rem 2.5rem;
  border-radius:12px;
  max-width:600px;
  width:90%;
  max-height:80vh;
  overflow-y:auto;
  color:#dcddde;
  position:relative;
  font-size: 0.9rem; /* slightly smaller font */
  line-height: 1.3;
}

.vars-close{
  position:absolute;
  top:12px;
  right:14px;
  font-size:1.6rem;
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  z-index: 10;
  line-height: 1;
  padding: 0;
}

.vars-list{
  margin-top:1.2rem;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
}

.vars-list pre{
  background:#2f3136;
  border-left:4px solid #404c84;
  padding:.45rem .65rem;
  border-radius:6px;
  font-size:.85rem;
  margin:0;
  font-family:"Courier New", monospace;
  color:#dcddde;
  overflow-wrap: break-word;    /* allow wrapping */
  white-space: normal;           /* allow wrapping */
  flex: 1 1 100%;                /* full width so no overflow */
}
.vars-list pre {
  white-space: pre-wrap;  /* wrap lines */
  word-break: break-word; /* break long words */
  /* existing styles below */
  background:#2f3136;
  border-left:4px solid #404c84;
  padding:.45rem .65rem;
  border-radius:6px;
  font-size:.85rem;
  margin:0;
  font-family:"Courier New",monospace;
  color:#dcddde;
}
/* Modal overlay background */
.vars-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  /* hidden by default via 'hidden' attribute in HTML */
}

.vars-content {
  font-family: 'Poppins', sans-serif;
  /* existing styles below */
  background: #1e1f22;
  padding: 2rem 2.5rem;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  color: #dcddde;
  position: relative;
  box-shadow: 0 0 20px rgba(64,76,132,0.6);
}


/* Close button styles */
.vars-close {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 1.8rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  line-height: 1;
}

/* Flex container for title + close */
.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

/* Wrap long pre blocks */
.vars-list pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: #2f3136;
  border-left: 4px solid #404c84;
  padding: 0.45rem 0.65rem;
  border-radius: 6px;
  font-size: 0.85rem;
  margin: 0 0 0.5rem 0;
  font-family: "Courier New", monospace;
  color: #dcddde;
}
.sa-button {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background-color: #5865f2;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.sa-button:hover {
  background-color: #4752c4;
}
.sa-button {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  background-color: #5865f2;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-family: 'Poppins', sans-serif;
}

.sa-button:hover {
  background-color: #4752c4;
}
#perksModal {
  display: none;
  /* plus your positioning and styling */
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: rgba(88, 101, 242, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background: #5865f2;
  color: #fff;
  padding: 2rem;
  border-radius: 12px;
  max-width: 500px;
  position: relative;
  font-weight: 700;
}
.feature-card svg {
  fill: white !important;
  width: 100px !important;
  height: 100px !important;
  margin-bottom: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}