/* ==========================================================================
   DiggFun Theme - Responsive Stylesheet (Mobile-First Breakpoints)
   ========================================================================== */

/* Mobile Drawer Styles are fully managed in main.css */

/* Responsive Breakpoints */

/* Desktop to Tablet Transition (<= 1024px) */
@media screen and (max-width: 1024px) {
  .first_screen_content .center-common {
    flex-direction: column;
    gap: 32px;
  }

  .top_common_left_wrap {
    flex-direction: column;
  }

  .first_trending {
    width: 100%;
  }

  .first_rank_list {
    width: 100%;
  }

  .main-navigation {
    display: none;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .quiz-grid, .more_quiz_ul {
    grid-template-columns: repeat(3, 1fr);
  }

  .children_box {
    display: none !important;
  }
}


/* Medium Devices / Tablet & Mobile (<= 768px) */
@media screen and (max-width: 768px) {
  /* Hide lower white navigation row on mobile so only clean top black bar is shown */
  .header-white-nav-bar {
    display: none !important;
  }

  .common_three_ul, .quiz-grid, .more_quiz_ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .input_submit {
    flex-direction: column;
    width: 100%;
  }

  .email_input, .email_submit {
    width: 100%;
    border-radius: 50px;
  }
}

/* Small Devices / Mobile (<= 600px) */
@media screen and (max-width: 600px) {
  .header-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 12px;
  }

  .header-social-links {
    display: none;
  }

  .site-branding.center-logo {
    text-align: left;
    flex-grow: 1;
  }

  .site-logo-text {
    font-size: 24px;
  }

  .header-top-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .result-actions {
    flex-direction: column;
    width: 100%;
  }

  .restart-quiz-btn, .share-btn, .copy-link-btn {
    width: 100%;
    justify-content: center;
  }

  .question-text {
    font-size: 17px;
  }
}

/* Ultra Small Mobile (<= 400px) */
@media screen and (max-width: 400px) {
  .common_three_ul, .quiz-grid, .more_quiz_ul {
    grid-template-columns: 1fr;
  }
}