/*
Theme Name: App SEO Theme Nova (Fixed)
Theme URI: 1
Author: You
Description: 1.
Version: 1.0.0
Text Domain: app-seo
*/
:root{
  --brand:#ff5e25;  
  --text:#1a1a1a;
  --bg:#ffffff;
  --muted:#6b7280;
  --soft:#FFF7E3;
  --header-h:72px;
  --header-bg:var(--brand);
  --header-link:#fff;
  --header-border:transparent;
  --h2-bg:#328edd;          
  --h2-fg:#fff;
  --h2-edge:rgba(0,0,0,.12);  
  --h3-chip-bg:#cfeee0;     
  --h3-chip-bd:#b7e0cc;
  --h3-chip-fg:#0f5132;
  --section-bg:color-mix(in srgb, var(--soft) 75%, #fff);
  --section-bd:var(--brand);  
  --footer-sep:rgba(255,255,255,.18);
}

*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
}
img{max-width:100%;display:block;height:auto}
.container{width:min(1100px,92%);margin-inline:auto}
.section{padding:40px 0}

/* ===== Header / Nav ===== */
.site-header.sticky{
  position:fixed; top:0; left:0; right:0;
  z-index:1200;
  background:var(--header-bg);
  border-bottom:3px solid var(--header-border);
  color:#fff; height:var(--header-h);
}
.header-inner{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px }
.brand .custom-logo{ height:48px; width:auto }
.brand .brand-text{ color:#fff; font-weight:700; font-size:18px; letter-spacing:.2px; text-decoration:none }
.site-nav .menu{ list-style:none; margin:0; padding:0; display:flex; gap:18px; align-items:center; }
.site-header a, .site-nav a{ color:var(--header-link); text-decoration:none }
.site-nav a:hover{ text-decoration:underline }
.site-nav .menu li.current-menu-item > a{ text-decoration:underline; font-weight:600; }
.site-nav .menu a.btn-download{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#fff; color:var(--brand); font-weight:600; text-decoration:none;
}
.site-nav .menu a.btn-download:hover{ filter:brightness(0.95); text-decoration:none; }
.hamburger{ display:none;background:none;border:0;width:44px;height:44px; align-items:center;justify-content:center;cursor:pointer }
.hamburger .icon-bars{display:block}
@media (max-width:1024px){
  .site-nav{display:none}
  .hamburger{display:inline-flex}
}

/* ===== Mobile Drawer ===== */
#mobile-drawer .drawer-backdrop{
  position:fixed;left:0;right:0;top:var(--header-h);bottom:0;
  background:rgba(0,0,0,.35); opacity:0; pointer-events:none;
  transition:opacity .3s ease; z-index:1100;
}
.drawer-open #mobile-drawer .drawer-backdrop{ opacity:1; pointer-events:auto; }

#mobile-drawer .drawer-panel{
  position:fixed; top:var(--header-h); left:50%;
  width:min(1100px,100%); transform:translate(-50%,-8px);
  background:#000;color:#fff; border-radius:0 0 12px 12px;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
  max-height:50vh; overflow:auto; opacity:0; pointer-events:none;
  z-index:1101; transition:transform .4s ease,opacity .4s ease;
}
.drawer-open #mobile-drawer .drawer-panel{ opacity:1; pointer-events:auto; transform:translate(-50%,0); }
#mobile-drawer .drawer-head{ display:flex;align-items:center;justify-content:space-between; padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.12) }
#mobile-drawer .drawer-close{ font-size:26px;line-height:1;background:transparent;border:0;color:#fff;cursor:pointer }
#mobile-drawer .drawer-menu{list-style:none;margin:0;padding:8px 0}
#mobile-drawer .drawer-menu li{border-bottom:1px solid rgba(255,255,255,.1)}
#mobile-drawer .drawer-menu a{ display:block;padding:14px 16px;color:#fff;text-decoration:none }
#mobile-drawer .drawer-menu a:hover{background:rgba(255,255,255,.08)}
#mobile-drawer .drawer-menu li.current-menu-item > a{ background:rgba(255,255,255,.12);font-weight:600 }
#mobile-drawer .drawer-menu a.btn-download{ background:#fff; color:#111; margin:8px 12px; border-radius:10px; }
#mobile-drawer .drawer-menu a.btn-download:hover{ background:#f3f5f7; color:#111; }

/* ===== Hero image ===== */
.hero .hero-img{
  display:block; margin:16px auto 0;
  width:clamp(80px,22vw,160px); height:auto;max-width:100%;
  object-fit:contain;
}
@media (min-width:1024px){ .hero .hero-img{ width:clamp(100px,18vw,200px); } }

/* ===== Footer ===== */
.footer-widgets{ background:#0f0f10; color:#e5e7eb; padding:24px 0; }
.footer-wrap{ --logo-h:80px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
.footer-logo{ height:var(--logo-h); width:auto; }
.footer-desc{ margin:8px 0 0; font-size:14px; line-height:1.4; color:#c7cbd1; }
@media (min-width:768px){
  .footer-left{ display:flex; align-items:center; gap:14px; min-height:var(--logo-h); }
  .footer-logo{ flex:0 0 auto; }
  .footer-desc{ margin:0; flex:1 1 auto; min-width:0; white-space:normal; overflow:visible; text-overflow:clip; max-width:none; }
}
.footer-left > a{ display:inline-flex; align-items:center; flex:0 0 auto; }

.footer-right h3{ margin:0 0 6px; font-size:14px; letter-spacing:.3px; color:#fff; }
.footer-right .links-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:8px 28px; list-style:none; margin:0; padding:0; align-content:center;
}
.footer-right .links-grid a{ color:#e5e7eb; text-decoration:none; font-size:14px; line-height:1.2; }
.footer-right .links-grid a:hover{ text-decoration:underline; }
.footer-right .links-grid .li-sitemap{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(100%); white-space:nowrap; border:0;
}
@media (max-width:768px){
  .footer-wrap{ grid-template-columns:1fr; gap:16px; text-align:center; }
  .footer-left{ display:grid; justify-items:center; }
  .footer-right .links-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px 16px; justify-items:center; }
  .footer-right .links-grid a{ font-size:13px; }
}
.site-footer{ background:var(--brand); color:#fff; border-top:1px solid var(--footer-sep); }
.site-footer .footer-bottom{ padding:14px 0; text-align:center; font-size:14px; }
.site-footer a{ color:#fff; text-decoration:none }
.site-footer a:hover{ text-decoration:underline }

/* ===== Misc ===== */
.backTop{
  position:fixed; right:18px; bottom:18px;
  width:40px; height:40px; border-radius:999px;
  background:var(--brand); color:#fff;
  border:0; cursor:pointer; display:none; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .2s ease, opacity .2s ease; z-index:1300;
}
.backTop.show{ display:flex; opacity:1 }
.backTop:hover{ transform:translateY(-2px) }
@media (prefers-reduced-motion:reduce){ .backTop{ transition:none } }

.site-nav .menu a, #mobile-drawer .drawer-menu a{ display:flex; align-items:center; gap:8px; }
.nav-ico svg{ width:20px; height:20px; stroke:currentColor; fill:none; display:block; flex:0 0 20px; }

/* ===== Entry / Typography ===== */
.entry .entry-title{ text-align:center; margin:0 0 12px; }

.site-header.sticky + #mobile-drawer + .header-spacer,
.site-header.sticky + .header-spacer{ display:block; height:var(--header-h); }

main.container.section{ padding-top:12px; }

.entry [id]{ scroll-margin-top: calc(var(--header-h) + 10px); }

.entry .entry-content h1,
.entry .entry-content h2,
.entry .entry-content h3{
  margin:26px 0 14px;
  line-height:1.25;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  overflow-wrap:anywhere;  
  word-break:break-word;     
  text-wrap:balance;         
}
.entry .entry-content h2{
  display:block;
  color:var(--h2-fg);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.06), rgba(0,0,0,.06)),
    var(--h2-bg);
  border:1px solid var(--h2-edge);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  padding:12px 14px;
  font-weight:800;
  font-size:clamp(22px, 2.2vw + 12px, 30px);
  letter-spacing:.2px;
}
.entry .entry-content h3{
  background:none; border:0; padding:0;
  color:var(--text);
  font-weight:700;
  font-size:clamp(17px, 1.5vw + 10px, 21px);
  letter-spacing:.15px;
  margin:18px 0 10px;
}
.entry .entry-content h2 + p,
.entry .entry-content h3 + p{ margin-top:8px; }
.entry .entry-content h2 .sub{ opacity:.9; font-weight:600; margin-left:.35em; font-size:.8em; }

.post-cards .title,
.guide-cards .title,
.faq-list h3,
.faq-card h3,
.toc, .toc *{ text-align:left; }

/* ===== Section box ===== */
.section-box{
  background:var(--section-bg);
  border:3px solid var(--section-bd);  
  border-radius:14px;
  padding:16px 16px 18px;
  margin:22px 0;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.section-box > h2:first-child{ margin-top:0; }
.section-box > :last-child{ margin-bottom:0; }
.section-box + .section-box{ margin-top:24px; }

.section-box.boxed-soft{
  background:color-mix(in srgb, var(--brand) 6%, #fff);
  border-color:rgba(0,0,0,.10);
}
.section-box.boxed-neutral{
  background:#f6f7f8;
  border-color:#e5e7eb;
}
.entry .entry-content .section-box h3,
.section-box h3{
  display:block;
  width:fit-content; max-width:100%;
  margin:16px auto 12px;
  text-align:center;
  background:var(--h3-chip-bg);
  color:var(--h3-chip-fg);
  border:1px solid var(--h3-chip-bd);
  border-radius:999px;
  padding:8px 14px;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
}
@supports not (width: fit-content){
  .section-box h3{ display:table; margin-left:auto; margin-right:auto; }
}
@media (max-width:420px){
  .section-box h3{ width:100%; }
}
.page-template-page-app .entry .entry-title{
  display:block;
  text-align:center;
  margin:6px 0 10px;
  line-height:1.18;
  font-weight:800;
  font-size:clamp(28px, 4vw, 40px);
}
.page-template-page-app main.container.section{
  padding-top: 3rem;
}
.page-template-page-app .site-header.sticky + #mobile-drawer + .header-spacer,
.page-template-page-app .site-header.sticky + .header-spacer{
  height: calc(var(--header-h) - 22px);
}
.page-template-page-app .hero{ 
  padding-top:4px; 
}
.page-template-page-app .hero-head{ margin-top:0; }
.page-template-page-app .hero-title{ margin:8px 0 10px; line-height:1.2; }
.page-template-page-app .hero-sub{ margin-top:8px; }