/*
Theme Name: AskAI Blog
Theme URI: https://askai-tools.com
Description: Editorial, Medium-style magazine theme for AskAI Tools. Child of the AskAI AEO theme — inherits all AEO/SEO features (Quick Answer, FAQ schema, IndexNow) and only changes the look.
Template: askai-aeo
Author: AskAI Tools
Version: 1.0
Text Domain: askai-blog
*/

:root{
  --paper:#FAF8F3;
  --paper-2:#F2EFE7;
  --ink:#17150F;
  --ink-soft:#403B30;
  --muted:#7A7367;
  --line:#E2DCCF;
  --line-strong:#CFC7B5;
  --accent:#1E5C45;
  --accent-deep:#143E2E;
  --radius:14px;
  --max:1180px;
  --serif:"Fraunces", Georgia, "Noto Serif TC", serif;
  --read:"Newsreader", Georgia, "Noto Serif TC", serif;
  --sans:"Hanken Grotesk", system-ui, "Noto Sans TC", sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;line-height:1.5;position:relative;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.reading{max-width:720px;margin:0 auto;padding:0 24px;}

/* ---------- TOP BAR ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,248,243,.82);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand img{max-height:38px;width:auto;}
.mark{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;position:relative;
  background:radial-gradient(circle at 32% 28%, #2c7d5f, var(--accent-deep));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.mark::after{content:"";position:absolute;inset:0;margin:auto;width:11px;height:11px;border-radius:50%;background:var(--paper);}
.brand-name{font-family:var(--serif);font-weight:600;font-size:23px;letter-spacing:-.02em;color:var(--ink);}
.brand-name b{font-weight:600;color:var(--accent);}
.main-nav{display:flex;align-items:center;gap:28px;}
.main-nav ul{list-style:none;display:flex;align-items:center;gap:28px;margin:0;padding:0;}
.main-nav a{
  font-size:13.5px;font-weight:500;color:var(--ink-soft);letter-spacing:.01em;
  position:relative;padding:4px 0;transition:color .2s ease;white-space:nowrap;
}
.main-nav a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--accent);transition:width .25s ease;}
.main-nav a:hover{color:var(--ink);}
.main-nav a:hover::after{width:100%;}
.actions{display:flex;align-items:center;gap:14px;}
.subscribe{
  font-family:var(--sans);font-size:13.5px;font-weight:600;background:var(--ink);color:var(--paper);
  padding:10px 20px;border-radius:999px;transition:transform .2s ease, background .2s ease;white-space:nowrap;
}
.subscribe:hover{background:var(--accent-deep);transform:translateY(-1px);color:var(--paper);}

/* ---------- HERO ---------- */
.hero{padding:62px 0 50px;border-bottom:1px solid var(--line);}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;}
.kicker{
  display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;
}
.kicker::before{content:"";width:26px;height:1.5px;background:var(--accent);}
.hero h1{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:500;
  font-size:clamp(38px,5vw,60px);line-height:1.03;letter-spacing:-.025em;margin:0 0 22px;
}
.hero h1 a{color:inherit;}
.hero .dek{font-family:var(--read);font-size:20px;line-height:1.55;color:var(--ink-soft);max-width:46ch;margin:0 0 30px;font-weight:300;}
.byline{display:flex;align-items:center;gap:13px;}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;color:#fff;
  font-weight:700;font-size:15px;font-family:var(--serif);
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
}
.byline-text{font-size:13.5px;color:var(--muted);line-height:1.35;}
.byline-text strong{color:var(--ink);font-weight:600;display:block;font-size:14px;}
.hero-visual{aspect-ratio:5/6;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:0 30px 60px -30px rgba(20,18,12,.4);}

/* ---------- tiles ---------- */
.tile{position:absolute;inset:0;overflow:hidden;background:var(--paper-2);display:block;}
.tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.tile .grad{position:absolute;inset:0;}
.tile .glyph{
  position:absolute;inset:0;display:grid;place-items:center;font-family:var(--serif);
  font-weight:600;color:rgba(255,255,255,.16);line-height:.8;letter-spacing:-.04em;user-select:none;
}
.tile::after{
  content:"";position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)'/%3E%3C/svg%3E");
}
.g-green .grad{background:linear-gradient(150deg,#2f8a67 0%,#16513c 60%,#0e3527 100%);}
.g-indigo .grad{background:linear-gradient(150deg,#5566c4 0%,#2f3c84 60%,#1d2552 100%);}
.g-gold .grad{background:linear-gradient(150deg,#d8a443 0%,#b07418 55%,#7c4e0f 100%);}
.g-rose .grad{background:linear-gradient(150deg,#cf6a63 0%,#a83f3f 58%,#6f2727 100%);}
.g-teal .grad{background:linear-gradient(150deg,#3fa3a0 0%,#236f6d 58%,#134342 100%);}
.hero-visual .glyph{font-size:clamp(140px,22vw,250px);}
.hero-visual .tag{position:absolute;left:18px;bottom:16px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.92);}

/* ---------- SECTION HEADS ---------- */
.askai-section{padding:54px 0;}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:34px;gap:20px;}
.sec-title{
  font-family:var(--serif);font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.2em;
  color:var(--ink);display:flex;align-items:center;gap:14px;
}
.sec-title::before{content:"";width:30px;height:1.5px;background:var(--ink);}
.sec-more{font-size:13px;font-weight:600;color:var(--accent);}
.sec-more:hover{text-decoration:underline;}

/* ---------- PICKS ---------- */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;}
.pick .pthumb{aspect-ratio:3/2;border-radius:11px;overflow:hidden;margin-bottom:18px;position:relative;}
.pick .pthumb .glyph{font-size:96px;}
.pcat{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
.pick h3{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:23px;line-height:1.16;
  letter-spacing:-.02em;margin:0 0 12px;transition:color .2s;
}
.pick:hover h3{color:var(--accent);}
.pick .pmeta{font-size:12.5px;color:var(--muted);}
.pick .tile,.pick .tile-img{transition:transform .5s ease;}
.pick:hover .tile,.pick:hover .tile-img{transform:scale(1.04);}

/* ---------- MAIN GRID ---------- */
.main{display:grid;grid-template-columns:1fr 326px;gap:64px;padding-top:8px;border-top:1px solid var(--line);}
.feed article{display:grid;grid-template-columns:1fr 170px;gap:28px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start;}
.feed article:first-of-type{padding-top:34px;}
.fcat{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;}
.feed h3{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:27px;line-height:1.14;
  letter-spacing:-.022em;margin:0 0 12px;transition:color .2s;
}
.feed article:hover h3{color:var(--accent);}
.feed .excerpt{font-family:var(--read);font-size:16.5px;line-height:1.55;color:var(--ink-soft);font-weight:300;margin:0 0 16px;max-width:58ch;}
.feed .fmeta{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--muted);flex-wrap:wrap;}
.dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong);}
.feed .fthumb{aspect-ratio:1/1;border-radius:10px;overflow:hidden;position:relative;}
.feed .fthumb .glyph{font-size:74px;}
.feed .fthumb .tile,.feed .fthumb .tile-img{transition:transform .5s ease;}
.feed article:hover .fthumb .tile,.feed article:hover .fthumb .tile-img{transform:scale(1.05);}

/* pagination */
.nav-links,.askai-pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:38px;}
.nav-links a,.nav-links span{
  padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--ink);transition:background .2s,border-color .2s,color .2s;
}
.nav-links a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.nav-links .current{background:var(--accent);color:#fff;border-color:var(--accent);}

/* ---------- SIDEBAR ---------- */
.side > *{margin-bottom:40px;}
.sb-title{
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin:0 0 22px;padding-bottom:12px;border-bottom:1.5px solid var(--ink);
}
.trend{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);}
.trend:last-child{border-bottom:none;}
.trend .num{font-family:var(--serif);font-weight:500;font-size:24px;color:var(--line-strong);line-height:1;flex:0 0 auto;width:30px;}
.trend .tt-cat{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;}
.trend h4{font-family:var(--serif);font-weight:500;font-size:16.5px;line-height:1.2;letter-spacing:-.01em;margin:0;transition:color .2s;}
.trend:hover h4{color:var(--accent);}
.topics{display:flex;flex-wrap:wrap;gap:9px;}
.topics a{
  font-size:12.5px;font-weight:500;color:var(--ink-soft);background:var(--paper-2);border:1px solid var(--line);
  padding:7px 15px;border-radius:999px;transition:all .2s;
}
.topics a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.news{
  background:linear-gradient(165deg,var(--accent) 0%,var(--accent-deep) 100%);color:var(--paper);
  border-radius:var(--radius);padding:30px 26px;position:relative;overflow:hidden;
}
.news::after{content:"\2726";position:absolute;right:-14px;top:-22px;font-size:120px;color:rgba(255,255,255,.07);font-family:var(--serif);}
.news h4{font-family:var(--serif);font-weight:500;font-size:24px;line-height:1.12;letter-spacing:-.02em;margin:0 0 12px;position:relative;}
.news p{font-size:13.5px;line-height:1.5;opacity:.9;margin:0 0 20px;position:relative;}
.news .news-btn{
  display:inline-flex;align-items:center;gap:8px;border:none;border-radius:9px;padding:13px 20px;font-size:13.5px;
  font-weight:700;font-family:var(--sans);background:var(--paper);color:var(--accent-deep);cursor:pointer;
  transition:transform .15s;position:relative;
}
.news .news-btn:hover{transform:translateY(-1px);color:var(--accent-deep);}

/* ---------- SINGLE / PAGE ---------- */
.entry{padding:54px 0 30px;}
.entry-kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:inline-block;}
.entry-title{font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:clamp(32px,4.6vw,50px);line-height:1.08;letter-spacing:-.025em;margin:0 0 20px;}
.entry-meta{display:flex;align-items:center;gap:13px;font-size:13.5px;color:var(--muted);margin-bottom:36px;flex-wrap:wrap;}
.entry-meta .avatar{width:38px;height:38px;font-size:14px;}
.quick-answer{
  background:#EEF4F0;border-left:3px solid var(--accent);padding:22px 26px;margin:0 0 36px;
  border-radius:0 var(--radius) var(--radius) 0;font-family:var(--read);font-size:19px;line-height:1.6;color:var(--ink);
}
.quick-answer strong{font-family:var(--sans);font-weight:700;color:var(--accent-deep);letter-spacing:.02em;}

.post-content{font-family:var(--read);font-size:19px;line-height:1.75;color:#2A2620;}
.post-content p{margin:0 0 24px;}
.post-content h2{font-family:var(--serif);font-weight:500;font-size:30px;line-height:1.2;letter-spacing:-.02em;margin:48px 0 18px;color:var(--ink);}
.post-content h3{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.25;letter-spacing:-.015em;margin:36px 0 14px;color:var(--ink);}
.post-content a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(30,92,69,.35);text-underline-offset:3px;}
.post-content a:hover{text-decoration-color:var(--accent);}
.post-content ul,.post-content ol{margin:0 0 24px 1.2em;padding:0;}
.post-content li{margin-bottom:10px;}
.post-content img{border-radius:var(--radius);margin:32px 0;}
.post-content blockquote{
  border-left:3px solid var(--line-strong);margin:32px 0;padding:6px 0 6px 24px;
  font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.5;color:var(--ink-soft);
}
.post-content table{width:100%;border-collapse:collapse;margin:28px 0;font-family:var(--sans);font-size:15.5px;}
.post-content th,.post-content td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top;}
.post-content th{background:var(--paper-2);font-weight:700;color:var(--ink);}
.post-content code{background:var(--paper-2);padding:2px 7px;border-radius:5px;font-size:.86em;border:1px solid var(--line);}
.post-content pre{background:#1d2522;color:#e7e3d6;padding:20px;border-radius:var(--radius);overflow-x:auto;margin:28px 0;}
.post-content pre code{background:none;border:none;padding:0;color:inherit;}
.post-content hr{border:none;border-top:1px solid var(--line);margin:40px 0;}

/* easy-table-of-contents */
.ez-toc-container,#ez-toc-container{
  background:var(--paper-2)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;
  padding:20px 24px!important;margin:0 0 32px!important;font-family:var(--sans)!important;box-shadow:none!important;
}
.ez-toc-title{font-family:var(--sans)!important;font-weight:700!important;letter-spacing:.04em!important;color:var(--ink)!important;}
.ez-toc-list a{color:var(--ink-soft)!important;font-size:15px!important;}
.ez-toc-list a:hover{color:var(--accent)!important;}

/* FAQ */
.faq-section{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px;margin:48px 0 0;}
.faq-section h2{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:-.02em;margin:0 0 8px;}
.faq-item{border-bottom:1px solid var(--line);padding:18px 0;}
.faq-item:last-child{border-bottom:none;padding-bottom:0;}
.faq-item h3{font-family:var(--serif);font-weight:600;font-size:18px;margin:0 0 8px;color:var(--accent-deep);}
.faq-item p{font-family:var(--read);color:var(--ink-soft);margin:0;font-size:16.5px;line-height:1.6;}

.entry-foot{margin:48px 0 0;padding-top:28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.back-home{font-size:13.5px;font-weight:600;color:var(--accent);}
.back-home:hover{text-decoration:underline;}

/* ---------- FOOTER ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--paper-2);margin-top:30px;color:var(--ink-soft);text-align:left;}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:60px 0 40px;}
.foot .brand-name{font-size:21px;}
.foot .foot-blurb{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:34ch;margin:14px 0 0;}
.foot h5{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 16px;}
.foot ul{list-style:none;padding:0;margin:0;}
.foot li{margin-bottom:10px;}
.foot li a{font-size:13.5px;color:var(--ink-soft);}
.foot li a:hover{color:var(--accent);}
.foot-bottom{
  border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;align-items:center;
  gap:16px;font-size:12.5px;color:var(--muted);flex-wrap:wrap;
}
.foot-bottom a{color:var(--muted);}
.foot-bottom a:hover{color:var(--accent);}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);animation:askai-rise .8s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes askai-rise{to{opacity:1;transform:none;}}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:36px;}
  .hero-visual{max-width:440px;}
  .main{grid-template-columns:1fr;gap:48px;}
  .picks{grid-template-columns:1fr;gap:40px;}
  .foot{grid-template-columns:1fr 1fr;}
}
@media(max-width:680px){
  .wrap{padding:0 20px;}
  .main-nav{display:none;}
  .feed article{grid-template-columns:1fr;}
  .feed .fthumb{order:-1;aspect-ratio:16/9;margin-bottom:6px;}
  .foot{grid-template-columns:1fr;}
  .hero{padding:42px 0 34px;}
  .post-content{font-size:18px;}
}
@media(prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}