/*
Theme Name: APK Again
Theme URI: https://apkagain.com
Author: Sahil Amir
Author URI: https://apkagain.com
Description: A customizable WordPress theme for APK / app & game download sites, featuring a trending carousel, hot-updates grid, custom "App" post type, and full Customizer support (colors, logo, social links, footer columns).
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: apk-again
Tags: custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, translation-ready
*/

/* =====================================================
   0. CSS VARIABLES (overridden inline by the Customizer)
===================================================== */
:root{
  --accent: #e0231f;
  --accent-dark: #b6120f;
  --text: #1b1b1b;
  --muted: #6b7280;
  --bg: #f4f5f7;
  --card-bg: #ffffff;
  --border: #e7e7ea;
  --radius: 14px;
  --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =====================================================
   1. RESET / BASE
===================================================== */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-base);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:1280px; margin:0 auto; padding:0 24px; }
.screen-reader-text{
  position:absolute !important; clip:rect(1px,1px,1px,1px);
  width:1px; height:1px; overflow:hidden;
}

/* =====================================================
   2. SITE HEADER
===================================================== */
.site-header{
  background:#fff;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
}
.site-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.site-branding{ display:flex; align-items:center; gap:10px; }
.site-branding img{ max-height:44px; width:auto; }
.site-title{
  font-size:26px; font-weight:800; letter-spacing:.5px;
  color:var(--accent); margin:0;
  text-transform:uppercase;
  font-family: Georgia, 'Times New Roman', serif;
}
.site-description{ font-size:12px; color:var(--muted); margin:0; }

.main-navigation{ display:flex; align-items:center; gap:32px; }
.main-navigation ul{ display:flex; gap:28px; }
.main-navigation a{
  font-weight:600; font-size:15px; color:var(--text);
  padding:8px 2px; border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a{
  color:var(--accent); border-color:var(--accent);
}

.header-actions{ display:flex; align-items:center; gap:18px; }
.header-actions button{
  background:none; border:none; color:var(--text);
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  transition:background .15s;
}
.header-actions button:hover{ background:var(--bg); }

.menu-toggle{ display:none; }

.header-search{
  position:absolute; top:76px; left:0; right:0;
  background:#fff; border-bottom:1px solid var(--border);
  padding:16px 0; display:none;
}
.header-search.is-open{ display:block; }
.header-search form{ display:flex; gap:10px; }
.header-search input[type="search"]{
  flex:1; padding:12px 16px; border:1px solid var(--border);
  border-radius:10px; font-size:15px;
}
.header-search button{
  background:var(--accent); color:#fff; border:none;
  padding:0 20px; border-radius:10px; font-weight:600;
}

/* =====================================================
   3. HERO / TRENDING CAROUSEL
===================================================== */
.trending-section{ padding:36px 0 8px; }
.section-heading{
  font-size:30px; font-weight:800; margin:0 0 18px;
}
.trending-carousel{ position:relative; }
.trending-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; scrollbar-width:none;
}
.trending-track::-webkit-scrollbar{ display:none; }
.trending-slide{
  position:relative; flex:0 0 calc(33.333% - 14px);
  scroll-snap-align:start;
  aspect-ratio:16/9;
  border-radius:var(--radius); overflow:hidden;
  background:#111 center/cover no-repeat;
  min-width:280px;
}
.trending-slide img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85;
}
.trending-slide .slide-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 55%);
}
.trending-slide .slide-info{
  position:absolute; left:20px; bottom:16px; right:20px;
  display:flex; align-items:center; gap:14px; color:#fff;
}
.trending-slide .slide-icon img{
  width:56px; height:56px; border-radius:14px; box-shadow:0 4px 14px rgba(0,0,0,.35);
}
.trending-slide .slide-title{ font-size:20px; font-weight:800; margin:0; }
.trending-slide .slide-cat{ font-size:13px; opacity:.85; }

.carousel-dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
.carousel-dots button{
  width:26px; height:5px; border-radius:4px; border:none; background:#d8d8dc; padding:0;
}
.carousel-dots button.active{ background:var(--accent); width:34px; }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.08); z-index:2;
}
.carousel-arrow.prev{ left:-14px; }
.carousel-arrow.next{ right:-14px; }

/* =====================================================
   4. APP / GAME GRID (Hot Updates, Archives, Search)
===================================================== */
.grid-section{ padding:34px 0; }
.grid-section .section-heading{ display:flex; align-items:center; gap:10px; }
.grid-section .section-heading .flame{ color:var(--accent); }

.app-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(6, 1fr);
}
.app-card{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; transition:transform .15s, box-shadow .15s;
  display:flex; flex-direction:column;
}
.app-card:hover{ transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.app-card .app-icon{ aspect-ratio:1/1; overflow:hidden; }
.app-card .app-icon img{ width:100%; height:100%; object-fit:cover; }
.app-card .app-body{ padding:14px 14px 16px; flex:1; display:flex; flex-direction:column; }
.app-card .app-title{
  font-size:15px; font-weight:700; margin:0 0 2px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
}
.app-card .app-cat{ font-size:12px; color:var(--muted); margin-bottom:10px; }
.app-card .app-meta{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:var(--muted); border-top:1px solid var(--border); padding-top:10px;
}
.app-card .app-meta .version{ display:flex; align-items:center; gap:5px; }
.app-card .app-meta a.download-btn{
  width:30px; height:30px; border-radius:8px; background:var(--bg);
  display:flex; align-items:center; justify-content:center; color:var(--text);
  transition:background .15s, color .15s;
}
.app-card .app-meta a.download-btn:hover{ background:var(--accent); color:#fff; }

/* =====================================================
   5. SINGLE APP PAGE
===================================================== */
.app-single{ padding:36px 0 60px; max-width:100%; overflow-x:hidden; }
.app-hero{
  display:flex; gap:26px; align-items:flex-start;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px; margin-bottom:22px; max-width:100%;
}
.app-hero .app-icon-lg{
  width:96px; height:96px; border-radius:22px; overflow:hidden; flex:none;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
}
.app-hero .app-icon-lg img{ width:100%; height:100%; object-fit:cover; }
.app-icon-fallback{ color:#fff; font-weight:800; font-size:28px; text-transform:uppercase; letter-spacing:.5px; }
.app-hero-main{ min-width:0; flex:1; } /* min-width:0 lets flex children shrink instead of overflowing */
.app-hero h1{ font-size:24px; margin:0 0 8px; word-break:break-word; }
.app-hero .app-hero-cat{ color:var(--muted); font-size:13px; margin-bottom:16px; display:flex; flex-wrap:wrap; gap:6px 14px; }
.app-hero .app-hero-cat span:not(:last-child)::after{ content:"•"; margin-left:14px; color:var(--border); }
.app-hero-buttons{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.download-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; background:var(--accent); color:#fff;
  padding:14px 28px; border-radius:12px; font-weight:700; font-size:15px; border:none;
  box-shadow:0 6px 16px rgba(224,35,31,.28); white-space:nowrap;
}
.download-cta:hover{ background:var(--accent-dark); }
.secondary-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:#2ea1f8; color:#fff; padding:14px 28px; border-radius:12px; font-weight:700; font-size:15px;
  white-space:nowrap;
}
.secondary-cta:hover{ background:#1c85d6; }

.app-screens{ position:relative; margin:6px 0 18px; }
.app-screens-track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:0;
  border-radius:12px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.app-screens-track::-webkit-scrollbar{ display:none; }
.app-screens-track img{
  flex:0 0 100%; width:100%; scroll-snap-align:start; border-radius:12px; aspect-ratio:16/10; object-fit:cover;
}
.app-screens-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; border:none; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.18); z-index:2;
}
.app-screens-arrow.prev{ left:10px; }
.app-screens-arrow.next{ right:10px; }
.app-screens-dots{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
.app-screens-dots button{ width:7px; height:7px; border-radius:50%; border:none; background:var(--border); padding:0; }
.app-screens-dots button.active{ background:var(--accent); width:18px; border-radius:4px; }

/* "About this App" info table */
.app-info-table{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 26px; margin-bottom:26px;
}
.info-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--border); font-size:14px;
}
.info-row:last-child{ border-bottom:none; }
.info-label{ color:var(--muted); }
.info-value{ font-weight:700; text-align:right; word-break:break-word; }

/* Related apps row */
.related-apps{ margin-bottom:28px; }
.mini-app-row{ display:flex; gap:16px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
.mini-app-card{
  flex:0 0 120px; background:var(--card-bg); border:1px solid var(--border); border-radius:12px;
  padding:14px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.mini-app-card img{ width:56px; height:56px; border-radius:14px; object-fit:cover; }
.mini-app-title{
  font-size:12px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.3; min-height:2.6em;
}
.mini-app-btn{
  font-size:11px; font-weight:700; color:var(--accent); border:1px solid var(--accent);
  border-radius:20px; padding:4px 14px;
}

.app-content{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px; max-width:100%; overflow-wrap:break-word; word-wrap:break-word; overflow-x:hidden;
}
/* Make anything a user pastes into the editor (images, iframes, tables, embeds,
   or content copied from Word/Google Docs that carries its own inline
   width="900" / style="width:900px") behave on small screens instead of
   forcing horizontal scroll/zoom-out. The !important is intentional and
   scoped only to .app-content — it exists specifically to beat inline
   styles on pasted content, which normal specificity can't override. */
.app-content *{ max-width:100% !important; box-sizing:border-box !important; }
.app-content img,
.app-content video,
.app-content iframe{ height:auto; border-radius:10px; }
.app-content table{ display:block; max-width:100%; overflow-x:auto; }
.app-content pre{ max-width:100%; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
.app-content-download{ margin-top:26px; padding-top:22px; border-top:1px solid var(--border); text-align:center; }
.app-content-download .download-cta{ width:100%; max-width:360px; padding:16px 28px; font-size:16px; }
.app-final-download{
  margin:24px 0 0; padding:26px; border-top:none;
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
}

/* =====================================================
   6. SIDEBAR / WIDGETS
===================================================== */
.content-layout{ display:grid; grid-template-columns:1fr 320px; gap:30px; align-items:start; }
.widget{
  background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; margin-bottom:20px;
}
.widget-title{ font-size:15px; font-weight:800; text-transform:uppercase; margin:0 0 14px; letter-spacing:.4px; }

/* =====================================================
   7. FOOTER
===================================================== */
.site-footer{ background:#fff; border-top:1px solid var(--border); margin-top:40px; padding:50px 0 22px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.footer-about .site-title{ font-size:22px; }
.footer-about p{ color:var(--muted); font-size:14px; max-width:320px; margin:14px 0 18px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:36px; height:36px; border-radius:50%; background:var(--bg);
  display:flex; align-items:center; justify-content:center; color:var(--text);
  transition:background .15s, color .15s;
}
.footer-social a:hover{ background:var(--accent); color:#fff; }
.footer-col h3{ font-size:15px; font-weight:800; margin:0 0 16px; }
.footer-col ul li{ margin-bottom:11px; }
.footer-col ul li a{ color:var(--muted); font-size:14px; transition:color .15s; }
.footer-col ul li a:hover{ color:var(--accent); }
.footer-bottom{
  margin-top:36px; padding-top:20px; border-top:1px solid var(--border);
  font-size:13px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}

/* =====================================================
   8. PAGINATION / MISC
===================================================== */
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:34px; }
.pagination a, .pagination span{
  min-width:38px; height:38px; padding:0 10px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:8px; font-size:14px; background:#fff;
}
.pagination .current{ background:var(--accent); color:#fff; border-color:var(--accent); }

.back-to-top{
  position:fixed; right:18px; bottom:24px; width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid var(--border); box-shadow:0 6px 16px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none;
  transition:opacity .2s; z-index:190;
}
.back-to-top.visible{ opacity:1; pointer-events:auto; }
.back-to-top .progress-ring{ position:absolute; top:0; left:0; transform:rotate(-90deg); }
.back-to-top .progress-ring-bg{ fill:none; stroke:var(--border); stroke-width:2.5; }
.back-to-top .progress-ring-fill{
  fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:119; stroke-dashoffset:119; transition:stroke-dashoffset .1s linear;
}
.back-to-top-icon{ position:relative; z-index:1; color:var(--text); display:flex; }

/* Sticky bottom mobile nav — built from the Primary Menu, hidden on desktop */
.mobile-bottom-nav{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:#fff; border-top:1px solid var(--border);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  align-items:stretch; justify-content:space-around;
  box-shadow:0 -4px 14px rgba(0,0,0,.06);
}
.mobile-bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--muted); font-size:11px; font-weight:600; flex:1; padding:4px 0;
}
.mobile-bottom-nav a:hover, .mobile-bottom-nav a.is-active{ color:var(--accent); }

/* =====================================================
   9. RESPONSIVE
===================================================== */

/* Safety net: nothing on the page — including third-party embeds a user
   pastes into the content editor — should ever be able to force the
   viewport wider than the screen and trigger the "pinch to zoom out to
   read" problem on mobile. */
html, body{ max-width:100%; overflow-x:hidden; }

@media (max-width: 960px){
  .app-grid{ grid-template-columns:repeat(3, 1fr); }
  .content-layout{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .trending-slide{ flex:0 0 calc(70% - 10px); }
}
@media (max-width: 680px){
  .main-navigation{ position:fixed; inset:76px 0 0 0; background:#fff; flex-direction:column;
    padding:20px; transform:translateX(100%); transition:transform .2s; overflow-y:auto; z-index:99; }
  .main-navigation.is-open{ transform:translateX(0); }
  .main-navigation ul{ flex-direction:column; gap:4px; width:100%; }
  .main-navigation a{ display:block; padding:14px 4px; border-bottom:1px solid var(--border); }
  .menu-toggle{ display:flex; }
  .app-grid{ grid-template-columns:repeat(2, 1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .site-title{ font-size:20px; }

  /* --- Single app page: this is the fix for the "icon too big / have to
     zoom out to read" problem reported on mobile --- */
  .app-single{ padding:20px 0 40px; }
  .app-hero{ flex-direction:column; align-items:flex-start; padding:18px; gap:14px; }
  .app-hero .app-icon-lg{ width:64px; height:64px; border-radius:16px; }
  .app-icon-fallback{ font-size:20px; }
  .app-hero h1{ font-size:19px; }
  .app-hero-buttons{ width:100%; justify-content:flex-start; }
  .app-hero-buttons .download-cta,
  .app-hero-buttons .secondary-cta{ flex:0 1 auto; width:auto; padding:7px 14px; font-size:12px; gap:5px; border-radius:8px; box-shadow:none; }
  .app-hero-buttons svg{ width:13px; height:13px; }
  .app-info-table{ padding:16px 18px; }
  .info-row{ font-size:13px; }
  .app-content{ padding:18px; font-size:15px; }
  .app-content-download .download-cta{ padding:10px 18px; font-size:13px; max-width:220px; }

  /* --- Mobile bottom nav + footer visibility fix ---
     The bar is fixed to the bottom of the screen, so we add matching
     padding to the whole page and pull the footer's bottom spacing in,
     otherwise the last footer column (Legal, in your case) ends up
     hidden behind the bar and never becomes visible even when scrolled
     all the way down. */
  .mobile-bottom-nav{ display:flex; }
  body{ padding-bottom:64px; }
  .back-to-top{ bottom:76px; }
  .site-footer{ padding-bottom:26px; }
}