/* =============================================================
   DESKTOP LAYOUT OVERRIDES
   Defense in depth: this file is ALSO enqueued with
   media="(min-width: 1024px)" in functions.php, but the actual
   rule enforcement lives in the @media block below. This matters
   because some caching/minification plugins (Autoptimize, WP
   Rocket, etc.) merge all enqueued stylesheets into one file and
   drop the per-file media attribute in the process. Wrapping the
   rules themselves in @media means the browser only ever applies
   them when the viewport is actually >= 1024px CSS pixels, no
   matter how the file was loaded, merged, or inlined.
   Mobile/tablet (<1024px) is 100% untouched either way.
   ============================================================= */

@media (min-width: 1024px) {
  /* -------------------------------------------------
     1. SITE HEADER
     ------------------------------------------------- */
  .site-header {
    height: 80px;
  }

  .header-inner {
    grid-template-columns: auto 1fr auto; /* logo | nav | actions */
    max-width: 1320px;
    padding: 0 40px;
    gap: 28px;
  }

  .logo-android-img { width: 42px; height: 42px; }
  .logo-text { font-size: 21px; }

  /* Primary nav (inserted in header.php, hidden by default in style.css) */
  .desktop-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-self: start;
    margin-left: 6px;
    min-width: 0;
  }

  .desktop-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 14px;
    border-radius: 9px;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--dark2);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }
  .desktop-nav-link:hover { color: var(--primary); background: var(--primary-bg); }
  .desktop-nav-link.is-active { color: var(--primary); background: var(--primary-bg); }
  .desktop-nav-link svg { flex-shrink: 0; transition: transform 0.15s; }
  .desktop-nav-dropdown:hover .desktop-nav-dropdown-btn svg { transform: rotate(180deg); }

  .desktop-nav-dropdown { position: relative; }
  .desktop-nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 210px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1000;
    max-height: 60vh;
    overflow-y: auto;
  }
  .desktop-nav-dropdown:hover .desktop-nav-dropdown-menu,
  .desktop-nav-dropdown:focus-within .desktop-nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .desktop-nav-dropdown-menu a {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dark2);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
  }
  .desktop-nav-dropdown-menu a:hover { background: var(--primary-bg); color: var(--primary); }
  body.dark-mode .desktop-nav-dropdown-menu { background: #141414; border-color: #1E1E1E; }

  .header-actions { gap: 14px; }
  .theme-color-picker {
    gap: 6px;
    padding: 4px 14px 4px 0;
    margin-right: 4px;
    border-right: 1px solid var(--border);
  }
  body.dark-mode .theme-color-picker { border-color: #1E1E1E; }
  .theme-dot { width: 10px; height: 10px; }

  .dark-mode-toggle { width: 42px; height: 23px; }
  .dm-knob { width: 19px; height: 19px; }
  body.dark-mode .dm-knob { transform: translateX(19px); }

  .btn-icon { width: 38px; height: 38px; border-radius: 10px; }
  .btn-icon:hover { background: var(--primary-bg); color: var(--primary); }

  .header-search-dropdown form { padding: 11px 18px; max-width: 640px; }

  /* -------------------------------------------------
     2. SITE FOOTER
     ------------------------------------------------- */
  .site-footer {
    max-width: 1320px;
    margin: 0 auto;
    padding: 56px 40px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px 64px;
    border-top: 1.5px solid var(--border);
  }

  .footer-top {
    flex: 0 0 300px;
    max-width: 300px;
    margin-bottom: 0;
  }
  .footer-brand-name { font-size: 19px; }
  .footer-tagline { font-size: 13px; margin-top: 8px; line-height: 1.6; max-width: 260px; }

  /* Dividers were a mobile-stack device — the flex layout below
     replaces them, so hide them and let footer-bottom's own
     border-top provide the separation instead. */
  .footer-divider { display: none; }

  .footer-cols {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    gap: 64px;
    margin-bottom: 0;
  }
  .footer-col { min-width: 130px; gap: 12px; }
  .footer-col-title { font-size: 12px; }
  .footer-col a { font-size: 13.5px; }

  .footer-bottom {
    flex-basis: 100%;
    margin-top: 8px;
    padding-top: 24px;
  }
  .footer-copy, .footer-disclaimer { font-size: 12px; }

  /* -------------------------------------------------
     3. FRONT-PAGE HERO

     NOTE: front-page.php prints its own <style> block with
     .fp-hero / .fp-hero-title / .fp-search-* rules directly in
     the page <body>. Because that block comes AFTER this file's
     <link> in <head>, it wins ties on identical properties
     (same specificity, later source = wins) — e.g. its
     `margin: 0 0 8px` was silently cancelling out our
     `margin-left/right: auto` centering. !important below makes
     these overrides unconditionally win regardless of source
     order.
     ------------------------------------------------- */
  .fp-hero {
    padding: 68px 40px 60px !important;
    text-align: center !important;
  }
  .fp-hero-blob1 { width: 420px !important; height: 420px !important; top: -140px !important; right: -100px !important; }
  .fp-hero-blob2 { width: 340px !important; height: 340px !important; bottom: -120px !important; left: -90px !important; }

  .fp-badge { margin-left: auto !important; margin-right: auto !important; }

  .fp-hero-title {
    font-size: 44px !important;
    max-width: 780px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .fp-hero-sub {
    font-size: 17px !important;
    max-width: 600px;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .fp-search-wrap { max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
  .fp-search-form { padding: 12px 10px 12px 20px !important; border-radius: 18px !important; }
  .fp-search-input { font-size: 16px !important; }
  .fp-search-btn { width: 48px !important; height: 48px !important; }
  .fp-search-hints { left: 56px !important; }

  /* -------------------------------------------------
     4. SECTION CONTAINERS + GRIDS
     ------------------------------------------------- */
  .section-header,
  .trending-scroll,
  .games-grid,
  .apps-grid,
  .categories-grid,
  .updates-tabs,
  .updates-grid,
  .faq-list,
  .telegram-banner {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
  }
  /* telegram-banner used its own `margin: 0 16px` on mobile — override cleanly */
  .telegram-banner { margin-left: auto; margin-right: auto; }

  .section-wrapper { padding: 44px 0; }
  .section-title { font-size: 22px; }
  .section-header { margin-bottom: 22px; }

  .games-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .apps-grid { grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .categories-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }

  .featured-slider-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
  }
  .featured-card { max-width: 460px; }

  .faq-section {
    padding: 56px 40px;
    text-align: center;
  }
  .faq-eyebrow, .faq-main-title { text-align: center; }
  .faq-main-title { font-size: 28px; }
  .faq-list {
    max-width: 900px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    text-align: left;
  }

}