/* Import Quicksand Font */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&display=swap');

:root {
  /* --- PINKER BRANDING --- */
  /* Main Link/Button Color: Hot Pink instead of Purple */
  --md-primary-fg-color:        #ff4081; 
  --md-primary-fg-color--light: #ff79b0; 
  --md-primary-fg-color--dark:  #c60055; 

  /* BACKGROUND GRADIENTS */
  /* Light Mode: Soft Peach to Pink */
  --kpop-gradient-light: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%); /* Clean slate for glass to pop */
  /* Alternative Colorful Light: */
  --kpop-gradient-colorful: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  
  /* Dark Mode: Deep Violet to Hot Pink (The "Blackpink" vibe) */
  --kpop-gradient-dark: linear-gradient(135deg, #2b1055 0%, #ff0080 100%);
}

/* Apply Font */
body, h1, h2, h3, h4, h5, h6, .md-typeset {
  font-family: 'Quicksand', sans-serif !important;
}

/* Images: Rounded & Floating */
.md-typeset img {
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* =========================================
   LIGHT MODE (Soft & Airy)
   ========================================= */
[data-md-color-scheme="default"] body {
  /* Using the colorful pink gradient */
  background-image: var(--kpop-gradient-colorful);
  background-attachment: fixed;
}

/* THE PRETTY GLASS CARD (Light) */
[data-md-color-scheme="default"] .md-content__inner {
  background: rgba(255, 255, 255, 0.55); /* More transparent */
  backdrop-filter: blur(15px) saturate(180%); /* Strong blur + vivid colors behind */
  -webkit-backdrop-filter: blur(15px) saturate(180%);
  padding: 30px;
  border-radius: 24px;
  /* The "Glass Border" magic */
  border: 1px solid rgba(255, 255, 255, 0.6); 
  box-shadow: 0 8px 32px 0 rgba(135, 31, 100, 0.15); /* Soft pinkish shadow */
}

/* Clean Sidebar (No background, just text) */
[data-md-color-scheme="default"] .md-sidebar {
  background-color: transparent;
}

/* =========================================
   THE "FLOATING PILL" HEADER
   ========================================= */

/* 1. Make the header float and be round */
.md-header {
  /* Position and Shape */
  top: 10px !important;             /* Float off the top */
  margin: 0 15px !important;        /* Margins on sides */
  width: calc(100% - 30px) !important; /* Calculate width */
  border-radius: 50px !important;   /* Fully rounded pill shape */
  
  /* Glass Effect */
  background: rgba(255, 255, 255, 0.65) !important; 
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(255, 255, 255, 0.8) !important; /* Crisp white border */
  box-shadow: 0 8px 25px rgba(255, 64, 129, 0.25) !important; /* Soft Pink Glow */
  
  /* Fix layout inside the pill */
  display: flex;
  align-items: center;
  height: 60px; /* Enforce height */
}

/* 2. Color the Title with a Gradient (Like a Logo) */
.md-header__title {
  background: linear-gradient(45deg, #ff4081, #ff80ab);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.5px;
}

/* 3. Style the Icons (Search, Menu) to be Pink */
.md-header__button {
  color: #ff4081 !important; /* Hot Pink icons */
}
.md-header__button:hover {
  background: rgba(255, 64, 129, 0.1); /* Light pink circle on hover */
  border-radius: 50%;
}

/* 4. Fix Navigation Tabs (if you use them) */
/* Push tabs down so they don't hide behind the floating pill */
.md-tabs {
  margin-top: 15px; 
  background: transparent !important;
  color: #555 !important;
  font-weight: 600;
}
.md-tabs__link {
  opacity: 0.7;
  transition: all 0.2s;
}
.md-tabs__link:hover, .md-tabs__link--active {
  color: #ff4081 !important; /* Pink text for active tabs */
  opacity: 1;
}

/* =========================================
   DARK MODE ADJUSTMENTS
   ========================================= */
[data-md-color-scheme="slate"] .md-header {
  background: rgba(30, 30, 30, 0.7) !important; /* Dark glass */
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}

[data-md-color-scheme="slate"] .md-header__button {
  color: #ff80ab !important; /* Light Pink icons in dark mode */
}

/* Force Header Text Dark Grey */
[data-md-color-scheme="default"] .md-header__button, 
[data-md-color-scheme="default"] .md-header__title {
  color: #333 !important;
}

/* =========================================
   DARK MODE (Neon Pink Night)
   ========================================= */
[data-md-color-scheme="slate"] body {
  background-image: var(--kpop-gradient-dark);
  background-attachment: fixed;
}

/* Dark Glass Card */
[data-md-color-scheme="slate"] .md-content__inner {
  background: rgba(20, 20, 30, 0.4); /* Very see-through dark */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 30px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle white rim */
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

/* White Text for Dark Mode */
[data-md-color-scheme="slate"] .md-typeset {
  color: #ffffff;
}
[data-md-color-scheme="slate"] .md-typeset h1, 
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #ff80ab; /* Pink headings in dark mode */
}

/* Hide GitHub/Repo link in BOTH the Header and the Mobile Menu */
.md-header__source,
.md-nav__source {
  display: none !important;
}


/* --- CONSTRUCTION POPUP --- */

/* 1. The Logic: If checkbox is NOT checked, hide the popup */
#popup-toggle:not(:checked) ~ .construction-overlay {
  display: none;
}

/* 2. The Dark Overlay */
.construction-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6); /* Dimmed background */
  backdrop-filter: blur(5px);
  z-index: 9999; /* Sit on top of everything */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 3. The Popup Box */
.construction-box {
  background: rgba(30, 30, 40, 0.9);
  border: 1px solid rgba(255, 64, 129, 0.5); /* Pink border */
  padding: 30px;
  border-radius: 20px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 0 30px rgba(255, 64, 129, 0.3);
  position: relative;
  color: white;
}

/* 4. The Close Button */
.close-btn {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 20px;
  cursor: pointer;
  color: #ff4081;
  font-weight: bold;
}
.close-btn:hover {
  color: white;
}

/* =========================================
   3-COLUMN HEADER LAYOUT (Polished)
   ========================================= */

/* 1. Header Container Constraints */
/* Ensure the inner grid fills the whole pill width so items can spread out */
.md-header__inner {
  max-width: 100% !important; 
  padding: 0 20px !important; /* Add padding inside the pill edges */
  height: 100%;               /* Ensure full height for vertical centering */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Base setting for all sections */
.md-header__section {
  display: flex;
  align-items: center;
  height: 100%;
}

/* --- LEFT SECTION (Logo + Home + Groups) --- */
.md-header__section--left {
  /* Use 'gap' for consistent spacing between Logo and Links */
  gap: 30px; 
  flex-shrink: 0; /* Prevent left section from shrinking if search gets huge */
}

/* --- CENTER SECTION (Search Bar) --- */
.md-header__section--center {
  flex-grow: 1;            /* Take up all remaining space */
  justify-content: center; /* Center the search bar perfectly */
  padding: 0 40px;         /* Buffer zone so search doesn't touch the text links */
}

/* Fix Search Bar Alignment */
.md-search {
  max-width: 500px; /* Limit search width so it doesn't look ridiculously long */
  width: 100% !important;
  display: flex;
  align-items: center; /* Vertically center the input box */
}

/* --- RIGHT SECTION (About + Theme) --- */
.md-header__section--right {
  gap: 25px; /* Nice gap between About and the Moon icon */
  flex-shrink: 0;
  justify-content: flex-end;
}


/* =========================================
   DESKTOP NAVIGATION LINKS (Typography)
   ========================================= */

.md-header-nav-desktop {
  display: none; /* Hidden on mobile */
}

@media screen and (min-width: 60rem) {
  .md-header-nav-desktop {
    display: flex;
    align-items: center; /* Critical for vertical centering */
    gap: 25px;           /* Spacing between multiple links in the same group */
  }

  .nav-link {
    color: #555 !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem; /* Slightly smaller for a cleaner look */
    letter-spacing: 0.5px;
    position: relative;
    transition: all 0.2s ease;
    
    /* Vertical adjustment to align perfectly with icons */
    line-height: 1; 
    display: flex;
    align-items: center;
  }

  .nav-link:hover {
    color: #ff4081 !important;
    transform: translateY(-1px);
  }

  /* Dark Mode adjustments */
  [data-md-color-scheme="slate"] .nav-link {
    color: #e0e0e0 !important;
  }
  [data-md-color-scheme="slate"] .nav-link:hover {
    color: #ff80ab !important;
  }
}

/* =========================================
   MOBILE DRAWER STYLING
   ========================================= */

/* 1. Change the top background from Default Purple to your Pink Gradient */
.md-nav__title {
  background: linear-gradient(135deg, #ff4081 0%, #ff80ab 100%) !important;
  color: white !important; /* Force white text */
}

/* 2. Make the "Back" arrow and Logo icon white so they are visible on pink */
.md-nav__button, 
.md-nav__title .md-nav__button {
  color: white !important;
}

/* 3. Optional: Add a subtle shadow so it separates from the list below */
.md-nav__title {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}