/* -----------------------
   Sticky Footer Layout Setup
------------------------ */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  .page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  main {
    flex: 1;
  }
  
  /* -----------------------
     Base Styles – Mobile First
  ------------------------ */
  
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1e1a20; /* Dark plum */
  }
  
  /* -----------------------
     Navigation
  ------------------------ */
  
  nav {
    background-color: #FF66A3; /* Bright pink */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
  }
  
  nav a {
    display: inline-block;
    background-color: #3a2d40; /* Soft plum background */
    color: #FF66A3;            /* Bright pink text */
    text-align: center;
    padding: 10px 16px;
    margin: 5px;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.2s ease;
    min-width: 100px;
    font-weight: bold;
    border: 1px solid #FF66A3;
  }
  
  nav a:hover {
    background-color: #4a3a55; /* Slightly brighter plum on hover */
    transform: scale(1.05);
    color: #FFD580;            /* Soft gold text on hover for pop */
  }

  nav a.active {
    outline: 2px solid #FF66A3; /* Bright pink outline */
    background-color: #4a3a55;  /* Slight glow plum */
    color: #FFD580;             /* Soft gold text */
  }
  
  
  
  /* -----------------------
     Header
  ------------------------ */
  
  header {
    padding: 20px;
    text-align: center;
    background-color: #2a202d; /* Dark violet-gray */
    color: #f2d4e8; /* Blush pink */
  }

  .social-intro {
    background-color: #2f2533;
    padding: 20px;
    margin: 0 auto 20px;
    max-width: 800px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.04);
    color: #f2d4e8;
    font-size: 1rem;
    line-height: 1.6;
  }
  
  
  /* -----------------------
     Main Content
  ------------------------ */
  
  main {
    padding: 20px;
    color: #ccc; /* Light gray for text */
  }

  /* -----------------------
     Contact Note (Socials)
  ------------------------ */

  .contact-note {
    background-color: #2a202d; /* Match header/footer bg */
    padding: 30px 20px;
    margin-top: 40px;
    border-top: 2px solid #FFD580; /* Soft gold */
    text-align: center;
    color: #f2d4e8;
  }
  
  .contact-note h2 {
    color: #FF66A3;
    margin-bottom: 10px;
  }
  
  .contact-note a {
    color: #FFD580;
    text-decoration: none;
    font-weight: bold;
  }
  
  .contact-note a:hover {
    color: #FF66A3;
    text-decoration: underline;
  }
  
/* -----------------------
     Email (Socials)
  ------------------------ */

  .email-container {
    position: relative;
    display: inline-block;
  }
  
  .email-address {
    display: none;
    cursor: pointer;
    color: #ccc;
    font-size: 0.95rem;
    transition: color 0.3s ease;
  }
  
  .email-block.expanded .email-address {
    display: block;
    text-align: center;
  }
  
  .email-address:hover {
    color: #FF66A3;
  }
  
  .copy-confirm {
    position: absolute;
    bottom: -1.2em;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.85rem;
    color: #FF66A3;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
  }

  .email-block img {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }
  
  

  
  /* -----------------------
   Welcome Section
------------------------ */

/* Home Welcome Grid */
.home-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: center;
    justify-items: center;
    margin: 40px 0;
    padding: 0 20px;
  }
  
  /* Shared styling for left and right image containers */
  .home-image-left,
  .home-image-right {
    display: none; /* Hidden by default (mobile-first) */
    background-color: #2f2533; /* Dark plum-purple */
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
  }
  
  /* Image styling */
  .home-image-left img,
  .home-image-right img {
    max-width: 200px;
    height: auto;
    border-radius: 8px;
    display: block;
  }
  
  /* Welcome message styled like a content card */
  .welcome-message {
    background-color: #2f2533;
    padding: 30px 20px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.04);
    color: #f2d4e8; /* Blush-pink text */
    max-width: 800px;
    text-align: center;
  }
  
  /* Heading styled like other magenta elements */
  .welcome-message h2 {
    color: #FF66A3; /* Bright pink */
    margin-bottom: 20px;
    font-size: 1.8rem;
  }
  
  /* Paragraph spacing and readability */
  .welcome-message p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
  }
  
  /* Link style inside welcome section */
  .welcome-message a {
    color: #f2d4e8; /* Blush-pink */
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .welcome-message a:hover {
    color: #FF66A3; /* Bright pink on hover */
    text-decoration: none;
  }
  
  /* Show side images on larger screens */
@media (min-width: 1024px) {
    .home-grid {
      grid-template-columns: 1fr 2fr 1fr;
    }
  
    .home-image-left,
    .home-image-right {
      display: block;
    }
  }
  
  /* Optional titles or text inside image boxes */
  .home-image-left h2,
  .home-image-right h2 {
    font-size: 1.2rem;
    color: #FF66A3; /* Bright pink */
    margin-bottom: 10px;
    text-align: center;
  }
  
  .home-image-left p,
  .home-image-right p {
    font-size: 0.95rem;
    color: #f2d4e8; /* Soft blush-pink */
    text-align: center;
    margin: 0;
    line-height: 1.4;
  }
  
  /* -----------------------
     Article Grid
  ------------------------ */
  
  .articles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
    padding: 0 20px;
    align-items: start;
  }
  
  .article-box {
    background-color: #2f2533; /* Dark plum-purple */
    border: 1px solid #444; /* Subtle border */
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
  }
  
  .article-box img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
  }
  
  .article-box h3 {
    color: #FF66A3; /* Bright pink */
    margin-bottom: 10px;
  }
  
  .article-box p {
    color: #ccc; /* Light text */
    font-size: 0.95rem;
  }
  
  /* -----------------------
     Social Media Grid
  ------------------------ */
  
  .social-media-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 20px;
    background-color: #1e1a20; /* Dark background */
    border-top: 2px solid #FFD580; /* Soft gold border */
    border-bottom: 2px solid #FFD580;
  }
  
  .social-link {
    background-color: #2f2533; /* Card background */
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    max-height: 110px; /* Show image + header */
    cursor: pointer;
  }
  
  .social-link.expanded {
    max-height: 300px;
  }
  
  .social-link img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  
  .social-link h4 {
    margin: 10px 0 8px;
    color: #FF66A3; /* Pink header */
  }
  
  .social-link p {
    display: none;
    color: #ccc;
  }
  
  .social-link.expanded p {
    display: block;
  }

  /* -----------------------
   Game Grid (Dark Mode)
------------------------ */

.game-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 20px;
    background-color: #1e1a20; /* Dark background */
    border-top: 2px solid #FFD580; /* Soft gold */
    border-bottom: 2px solid #FFD580;
  }
  
  .game-card {
    background-color: #2f2533; /* Card background */
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    box-shadow: 0 1px 4px rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    max-height: 110px;
    cursor: pointer;
  }
  
  .game-card.expanded {
    max-height: 300px;
  }
  
  .game-card img {
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
  }
  
  .game-card h4 {
    margin: 10px 0 8px;
    color: #FF66A3; /* Bright pink */
  }
  
  .game-card p {
    display: none;
    color: #ccc; /* Light gray text */
  }
  
  .game-card.expanded p {
    display: block;
  }
  
  /* Match social-link <a> style for game cards */
  .game-card p a {
    color: #f2d4e8; /* Soft blush */
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .game-card p a:hover {
    color: #FF66A3; /* Bright pink hover */
    text-decoration: none;
  }

  /* -----------------------
     Game Page Messages
  ------------------------ */

  .games-intro {
    background-color: #2f2533;
    padding: 20px;
    margin: 0 auto 20px;
    max-width: 800px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.04);
    color: #f2d4e8;
    font-size: 1rem;
    line-height: 1.6;
  }
  
  .games-note {
    background-color: #2a202d;
    padding: 30px 20px;
    margin-top: 40px;
    border-top: 2px solid #FFD580;
    text-align: center;
    color: #f2d4e8;
  }
  
  .games-note h2 {
    color: #FF66A3;
    margin-bottom: 10px;
  }
  
  
  /* Link styling inside social descriptions */
  .social-link p a {
    color: #f2d4e8;
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .social-link p a:hover {
    color: #FF66A3;
    text-decoration: none;
  }
  
  /* -----------------------
     Footer (Dark Mode)
  ------------------------ */
  
  .site-footer {
    background-color: #2a202d; /* Dark footer */
    text-align: center;
    padding: 15px 10px;
    font-size: 0.9rem;
    color: #f2d4e8; /* Soft blush text */
    border-top: 1px solid #FFD580;
  }
  
  .site-footer a.footer-link {
    color: #FF66A3; /* Pink link */
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .site-footer a.footer-link:hover {
    color: #e0b65b; /* Muted gold on hover */
    text-decoration: underline;
  }
  
/* -----------------------
   Expanded About Page
------------------------ */

/* Holds all expandable About sections */

.about-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Individual expandable section */

.about-section {
  padding: 0 10px;
}

/* Clickable section title */

.about-section-header {
  position: relative;
  padding: 18px 42px 18px 18px;
  border-bottom: 2px solid #FF66A3;
  border-radius: 12px 12px 0 0;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition:
    background-color 0.25s ease,
    opacity 0.2s ease;
}

.about-section-header:hover {
  background-color: #3a2d40;
}

.about-section-header h2 {
  margin: 0;
  color: #FF66A3;
}

/* Expand and collapse arrow */

.about-section-header::after {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 18px;
  color: #FF66A3;
  transform: translateY(-50%);
  transition: transform 0.25s ease;
}

.about-section.open .about-section-header::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Hidden section content */

.about-section-content {
  display: none;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-top: 20px;
}

/* Visible section content */

.about-section.open .about-section-content {
  display: grid;
}

/* Cards inside each section */

.about-card {
  background-color: #2f2533;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
}

.about-card h3 {
  margin-top: 0;
  color: #FF66A3;
}

.about-card p,
.about-card li {
  color: #ccc;
  line-height: 1.6;
}

.about-card ul,
.about-card ol {
  padding-left: 20px;
  text-align: left;
}

/* Optional images added later */

.about-card img {
  display: block;
  width: 100%;
  max-width: 500px;
  height: auto;
  margin: 0 auto 15px;
  border-radius: 10px;
}

/* Temporary image or gallery placeholder */

.about-image-placeholder {
  display: flex;
  min-height: 180px;
  margin-bottom: 15px;
  padding: 20px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px dashed #FFD580;
  border-radius: 10px;
  background-color: #2a202d;
  color: #f2d4e8;
}

.about-image-placeholder p {
  margin: 0;
  color: #f2d4e8;
}

/* Optional links inside About cards */

.about-card a {
  color: #FF66A3;
  font-weight: bold;
  text-decoration: none;
}

.about-card a:hover {
  color: #FFD580;
}

/* -----------------------
   About Page Image Sliders
------------------------ */

.about-slider {
  position: relative;
  width: min(100%, 560px);
  height: var(--about-slider-height, 320px);
  margin: 0 auto 15px;
  overflow: hidden;
  border-radius: 10px;
}

.about-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.about-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.about-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 10px;
}

.disclaimer {
  margin-top: 16px;
  padding: 12px 14px;
  background-color: #2a202d;
  border-left: 4px solid #FF66A3;
  border-radius: 8px;
  color: #f2d4e8;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
}


@media (min-width: 768px) {
  .about-section-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-section-content > .about-card:only-child {
    grid-column: 1 / -1;
  }
}

/* Three cards per row on desktop */

@media (min-width: 1100px) {
  .about-section-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-section-content > .about-card:only-child {
    grid-column: 1 / -1;
  }
}

  .about-intro {
    background-color: #2f2533;
    padding: 20px;
    margin: 0 auto 20px;
    max-width: 800px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 1px 6px rgba(255, 255, 255, 0.04);
    color: #f2d4e8;
    font-size: 1rem;
    line-height: 1.6;
  }
  

  /* -----------------------
   Media Queries (Dark Mode Responsive)
------------------------ */

/* Tablet: 768px and up */
@media (min-width: 768px) {
    nav {
      flex-direction: row;
      justify-content: space-around;
      flex-wrap: wrap;
    }
  
    .articles {
      grid-template-columns: repeat(2, 1fr);
    }
  
    .social-media-panel,
    .game-panel {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  /* Laptop: 1024px and up */
  @media (min-width: 1024px) {
    .articles {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .social-media-panel,
    .game-panel {
      grid-template-columns: repeat(3, 1fr);
    }
  
    .home-grid {
      grid-template-columns: 1fr 2fr 1fr;
    }
  
    .home-image-left,
    .home-image-right {
      display: block;
    }
  }
  
  /* Desktop: 1200px and up */
  @media (min-width: 1200px) {
    .articles {
      grid-template-columns: repeat(5, 1fr);
    }
  
    .social-media-panel,
    .game-panel {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* -----------------------
   Calendar Styling (Dark Mode)
------------------------ */

.calendar-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  gap: 10px;
  color: #f2d4e8; /* Blush pink */
}

.calendar-controls button {
  background-color: #FF66A3; /* Bright pink */
  color: #1e1a20; /* Dark plum text */
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.calendar-controls button:hover {
  background-color: #e05b91; /* Slightly darker pink */
  transform: scale(1.05);
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 0 20px;
}

.calendar-header {
  font-weight: bold;
  text-align: center;
  padding: 5px 0;
  color: #FFD580; /* Soft gold */
}

.calendar-day {
  text-align: center;
  padding: 12px 0;
  background-color: #2f2533; /* Card background */
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.05);
  color: #ccc; /* Light gray text */
  transition: transform 0.2s ease;
}

.calendar-day:hover {
  background-color: #3a2d40;
  transform: scale(1.05);
}

.calendar-day.empty {
  background: none;
  box-shadow: none;
}

/* 🔦 Highlight event days with a soft glow */
.calendar-day:has(.event-text) {
  background-color: #3b2f44; /* Slightly brighter plum */
  border: 1px solid #FF66A3;
  box-shadow: 0 0 6px rgba(255, 102, 163, 0.3); /* Pink glow */
}

.event-text {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #FF66A3; /* Bright pink for pop */
  text-align: center;
  font-weight: 600;
}

.event-time {
  font-size: 0.8rem;
  color: #FFD580; /* Soft gold */
  margin-top: 4px;
  text-align: center;
  font-weight: 500;
}

.calendar-intro {
  background-color: #2f2533;
  padding: 20px;
  margin: 0 auto 20px;
  max-width: 800px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 1px 6px rgba(255, 255, 255, 0.04);
  color: #f2d4e8;
  font-size: 1rem;
  line-height: 1.6;
}


/* Twitch Overlay slider (Services) */
#work-overlay .overlay-slider, #work-discord .overlay-slider, #work-website .overlay-slider {
  position: relative;
  width: min(100%, 560px);
  height: var(--overlay-h, 220px);  /* JS will set this based on the image ratio */
  margin: 10px auto 0;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
}

#work-overlay .overlay-slider .slide, #work-discord .overlay-slider .slide, #work-website .overlay-slider .slide {
  position: absolute;
  inset: 10px;                 /* respects the padding above */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

#work-overlay .overlay-slider .slide.is-active, #work-discord .overlay-slider .slide.is-active, #work-website .overlay-slider .slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

#work-overlay .overlay-slider img, #work-discord .overlay-slider img, #work-website .overlay-slider img {
  width: 100%;
  height: 100%;
  object-fit: contain;         /* show the entire image */
  display: block;
}

/* keep portfolio cards open on Services */
.social-media-panel.static .social-link { max-height: none; cursor: default; }
.social-media-panel.static .social-link p { display: block; }

/* Collapsible Services cards (closed by default) */
.game-panel .service-card {
  max-height: 120px;          /* shows title + a line or two */
  overflow: hidden;
  cursor: pointer;
  transition: max-height 220ms ease;
}

/* Reveal all content when opened */
.game-panel .service-card.open {
  max-height: 1000px;         /* big enough; bump if a card is taller */
}

.game-panel .service-card p {
  display: none;
}
.game-panel .service-card.open p {
  display: block;
}

/* Service cards: H3 hover/focus color in dark mode */
.game-panel .service-card h3 {
  color: #f2d4e8;            /* blush text */
  transition: color .25s ease;
}

.game-panel .service-card:hover h3,
.game-panel .service-card h3:hover,
.game-panel .service-card:focus-visible h3,
.game-panel .service-card:focus-within h3 {
  color: #FF66A3;            /* same as link hover in dark mode */
}

/* ===== PACKAGES: always-open cards, left-aligned content ===== */
#packages .game-panel { grid-auto-rows: auto; }

#packages .game-card.package-card {
  max-height: none ;
  height: auto ;
  overflow: visible ;
  text-align: left ;      /* stop centering all text */
  cursor: default;
}

/* Keep only the card title centered if you like */
#packages .game-card.package-card h3 { text-align: center; }

/* Ensure text blocks actually render (some game-card rules hide them) */
#packages .game-card.package-card p,
#packages .game-card.package-card ul { display: block ; }

/* Subheads + compact bullets */
#packages .package-card .pkg-service {
  margin: 12px 0 6px;
  font-weight: 700;
}
#packages .package-card .mini {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
}
#packages .package-card .mini li {
  position: relative;
  padding-left: 16px;
  margin: 5px 0;
  line-height: 1.35;
  text-align: left;                 /* keep bullets + text together */
}
#packages .package-card .mini li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  opacity: .75;
  transform: translateY(2px);
}

/* PACKAGES — collapsible cards */
#packages .game-panel { grid-auto-rows: auto; }

#packages .game-card.package-card {
  cursor: pointer;
  text-align: left;                   /* easier to scan lists */
  transition: max-height 220ms ease;
  overflow: hidden;
}

/* Collapsed state: show only the H3 */
#packages .game-card.package-card:not(.open) {
  max-height: 82px;                   /* title + a bit of breathing room */
}

/* Hide everything except the title when collapsed */
#packages .game-card.package-card:not(.open) > :not(h3) {
  display: none;
}

/* Open state: reveal all content */
#packages .game-card.package-card.open {
  max-height: 2000px;                 /* big enough for long lists */
  overflow: visible;
}

/* Keep just the title centered if you like the look */
#packages .game-card.package-card h3 { text-align: center; }

/* Tidy subheads + bullets (keep if you’re using .pkg-service / .mini) */
#packages .package-card .pkg-service { margin: 12px 0 6px; font-weight: 700; }
#packages .package-card .mini { list-style: none; margin: 0 0 12px; padding: 0; }
#packages .package-card .mini li { position: relative; padding-left: 16px; margin: 5px 0; line-height: 1.35; }
#packages .package-card .mini li::before { content: "•"; position: absolute; left: 0; top: 0; opacity: .75; transform: translateY(2px); }

/* Hover cue like your links */
#packages .package-card h3 { transition: color .25s ease; }
#packages .package-card:hover h3 { color: #FF66A3; }           /* dark */
html:not(.dark) #packages .package-card:hover h3 { color: #D81B60; } /* light */

/* FAQ strip */
#faq { margin-top: 28px; }

/* List layout */
#faq .faq-list { display: grid; gap: 10px; }

/* Card look */
#faq .faq-item {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
}

/* Clickable header */
#faq summary { list-style: none; cursor: pointer; }
#faq summary::-webkit-details-marker { display: none; }

#faq summary h3 {
  margin: 0; padding: 10px 14px; text-align: left;
  position: relative; transition: color .25s ease;
}
#faq summary h3::after {
  content: "▾"; position: absolute; right: 12px; top: 10px;
  transition: transform .2s ease, opacity .2s ease; opacity: .8;
}
#faq .faq-item[open] summary h3::after { transform: rotate(180deg); }

/* Hover cue (matches your dark link hover) */
#faq .faq-item:hover summary h3 { color: #FF66A3; }

/* Answer body */
#faq .answer { padding: 0 14px 12px; }
#faq .answer p { margin: 10px 0 0; }

/* -----------------------
   Minecraft Page
------------------------ */

.minecraft-intro {
  background-color: #2f2533;
  padding: 20px;
  margin: 0 auto 30px;
  max-width: 900px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 1px 6px rgba(255, 255, 255, 0.04);
  color: #f2d4e8;
  line-height: 1.6;
}

/* Container holding all servers */

.server-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

/* Individual server column */

.server-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 10px;
}

/* Server title */

.server-column-header {
    text-align: center;
    padding-bottom: 15px;
    margin-bottom: 5px;
    border-bottom: 2px solid #FF66A3;
    cursor: pointer;
    user-select: none;
    transition: opacity .2s ease;
}

.server-column-header:hover {
    opacity: .8;
}

.server-column-header::after {
    content: "▼";
    float: right;
    transition: transform .25s ease;
    color: #D81B60;
}

.server-column.open .server-column-header::after {
    transform: rotate(180deg);
}

.server-column-header h2 {
  color: #FF66A3;
  margin-bottom: 10px;
}

.server-content {
    display: none;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.server-column.open .server-content {
    display: flex;
}

.server-status {
  font-weight: bold;
  color: #f2d4e8;
}

/* Individual information cards */

.server-card {
  background-color: #2f2533;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
}

.server-card h3 {
  color: #FF66A3;
  margin-top: 0;
}

.server-card p,
.server-card li {
  color: #ccc;
  line-height: 1.6;
}

.server-card ul,
.server-card ol {
  padding-left: 20px;
}

.server-card a {
  color: #FF66A3;
  text-decoration: none;
  font-weight: bold;
}

.server-card a:hover {
  color: #FFD580;
}

/* Plugin entries */

.plugin-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.plugin-entry {
  padding-bottom: 15px;
  border-bottom: 1px solid #4a3a55;
}

.plugin-entry:last-child {
  border-bottom: none;
}

.plugin-entry h4 {
  margin-bottom: 8px;
  color: #f2d4e8;
}

/* Bottom message */

.minecraft-note {
  background-color: #2a202d;
  padding: 30px 20px;
  margin-top: 40px;
  border-top: 2px solid #FFD580;
  text-align: center;
  color: #f2d4e8;
}

.minecraft-note h2 {
  color: #FF66A3;
}

/* Desktop */

@media (min-width: 1100px) {

  .server-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: start;
  }


}