/*
Theme Name: App Download Hub
Theme URI: https://www.appdownloadhub.net
Author: App Download Hub
Description: App directory theme that ranks the top five Android and iOS apps in each category. Activating it imports 29 categories and 145 sample apps, which you can edit under Apps in the dashboard.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fivestack
*/

/* Layout: ranked-list editorial directory; home = category grid, category = numbered top-five list */
:root{
  --bg:#f5f6fa; --surface:#ffffff; --ink:#141a2e; --muted:#5a6280; --line:#dde1ec;
  --accent:#2f47d0; --accent-ink:#ffffff; --gold:#c98d00; --chip:#eceffa;
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}
/* Light mode only */
:root{color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-body)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:800 1.25rem/1 var(--f-display);letter-spacing:-.02em}
.brand-mark{width:32px;height:32px;flex:none}
.brand-text span{color:var(--accent)}
.brand-img{max-height:40px;width:auto}
nav.main{display:flex;gap:18px;font-weight:600;font-size:.95rem}
nav.main a{text-decoration:none;color:var(--muted)}nav.main a:hover,nav.main a[aria-current]{color:var(--ink)}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;letter-spacing:-.02em;margin:0}
.hero{padding-block:56px 32px;display:grid;gap:18px}
.eyebrow{font:600 .75rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent)}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.02;font-weight:800;max-width:16ch}
.hero p{margin:0;color:var(--muted);max-width:58ch;font-size:1.08rem}
.search{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px 6px 4px 14px;max-width:520px}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;padding:10px 0;outline:none}
.search kbd{font:600 .7rem var(--f-mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:3px 6px}
.stats{display:flex;flex-wrap:wrap;gap:22px;font:500 .85rem var(--f-mono);color:var(--muted)}
.stats b{color:var(--ink);font-weight:700}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-block:28px 14px}
.section-head h2{font-size:1.5rem}
.section-head span{color:var(--muted);font-size:.9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.tile{display:grid;gap:14px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;transition:border-color .15s,transform .15s}
.tile:hover{border-color:var(--accent);transform:translateY(-2px)}
.tile h3{font-size:1.15rem}
.tile .pick{font-size:.85rem;color:var(--muted)}
.tile .pick b{color:var(--ink);font-weight:600}
.stack{display:flex}
.stack .ico{width:34px;height:34px;font-size:.8rem;border:2px solid var(--surface);margin-right:-8px;border-radius:10px}
.ico{flex:none;display:grid;place-items:center;color:#fff;font:700 1.1rem/1 var(--f-display);border-radius:14px;background:hsl(var(--h) 62% 42%);background-image:linear-gradient(145deg,hsl(var(--h) 70% 52%),hsl(calc(var(--h) + 28) 64% 36%))}
.results{display:grid;gap:8px;margin-top:8px}
.result{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.result .ico{width:36px;height:36px;font-size:.85rem;border-radius:10px}
.result small{color:var(--muted);display:block}
.empty{color:var(--muted);padding:18px 0}
/* category page */
.crumbs{font-size:.85rem;color:var(--muted);padding-top:28px}
.crumbs a{color:var(--muted)}
.cat-head{padding-block:14px 26px;display:grid;gap:12px;border-bottom:1px solid var(--line)}
.cat-head h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.05}
.cat-head p{margin:0;color:var(--muted);max-width:60ch;font-size:1.05rem}
.meta{font:500 .78rem var(--f-mono);color:var(--muted);letter-spacing:.04em}
ol.rank{list-style:none;margin:0;padding:0}
ol.rank li{display:grid;grid-template-columns:64px 64px minmax(0,1fr);gap:20px;align-items:start;padding-block:26px;border-bottom:1px solid var(--line)}
.num{font:700 2.6rem/1 var(--f-mono);color:var(--line);font-variant-numeric:tabular-nums;padding-top:6px}
li:first-child .num{color:var(--gold)}
ol.rank .ico{width:64px;height:64px;font-size:1.5rem}
.app{display:grid;gap:8px;min-width:0}
.app h2{font-size:1.4rem}
.dev{color:var(--muted);font-size:.9rem;margin-top:-4px}
.app p{margin:0;max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--chip);border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:600}
.chip.top{background:var(--gold);color:#1a1300}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:.88rem;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn:hover{border-color:var(--accent)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block:30px}
.pager a{text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:2px}
.pager a:hover{border-color:var(--accent)}
.pager small{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}
.pager .next{text-align:right}
.allcats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.allcats a{text-decoration:none;font-size:.85rem;padding:6px 12px;border-radius:999px;border:1px solid var(--line)}
.allcats a:hover,.allcats a[aria-current]{border-color:var(--accent);color:var(--accent)}
footer{border-top:1px solid var(--line);margin-top:40px;padding-block:28px;color:var(--muted);font-size:.85rem}
footer .wrap{display:grid;gap:8px}
@media (max-width:640px){
  nav.main{display:none}
  ol.rank li{grid-template-columns:44px minmax(0,1fr);gap:14px}
  ol.rank .ico{display:none}
  .num{font-size:2rem}
  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* WordPress additions */
.ico-img{width:64px;height:64px;border-radius:14px;object-fit:cover}
.stack .ico-img{width:34px;height:34px;border-radius:10px;border:2px solid var(--surface);margin-right:-8px}
.result .ico-img{width:36px;height:36px;border-radius:10px}
.app h2 a{text-decoration:none}.app h2 a:hover{color:var(--accent)}
.entry{padding-block:28px 10px;max-width:70ch}
.entry h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:12px}
.single-head{display:flex;gap:20px;align-items:center;padding-block:14px 24px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.single-head .ico,.single-head .ico-img{width:88px;height:88px;font-size:2rem;border-radius:20px}
.single-head h1{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:800}
.single-body{padding-block:24px;display:grid;gap:16px;max-width:70ch}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
body.admin-bar header.top{top:32px}
@media (max-width:782px){body.admin-bar header.top{top:46px}}
.more-head{margin-top:36px}
ol.rank.more li{grid-template-columns:64px 48px minmax(0,1fr);padding-block:18px}
ol.rank.more .ico,ol.rank.more .ico-img{width:48px;height:48px;font-size:1.1rem;border-radius:12px}
ol.rank.more .num,ol.rank.more li:first-child .num{font-size:1.8rem;color:var(--line)}
ol.rank.more .app h2{font-size:1.15rem}
.entry-content h2{font-size:1.3rem;margin-top:8px}
.entry-content ul,.entry-content ol{padding-left:1.2em;display:grid;gap:6px}
@media (max-width:640px){ol.rank.more li{grid-template-columns:44px minmax(0,1fr)}}