/*
Theme Name: Abdo PPT
Theme URI: https://abdoppt.com
Author: Abdo PPT
Description: Custom theme for ABDO PPT — a PowerPoint templates library and design studio site. Violet/coral template-library design with a stacked-slides signature motif.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: abdoppt
*/

:root{
  --bg:#f7f6f3; --surface:#ffffff; --line:#e7e5e0;
  --ink:#16171b; --dim:#6b6f76;
  --violet:#6c4cf1; --violet-soft:#efeaff;
  --coral:#ff6b4a; --coral-soft:#ffe9e2;
  --teal:#12a594; --teal-soft:#e3f7f3;
  --gold:#e0a52c; --gold-soft:#fbf0dc;
  --radius:18px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--bg); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6;}
h1,h2,h3{font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-0.015em;}
.mono{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:0.03em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1160px; margin:0 auto; padding:0 32px;}

/* HEADER */
.site-header{display:flex; align-items:center; justify-content:space-between; padding:26px 0;}
.logo{font-family:'Sora',sans-serif; font-weight:800; font-size:20px;}
.logo span{color:var(--violet);}
.main-nav{display:flex; gap:30px;}
.main-nav ul{list-style:none; display:flex; gap:30px;}
.main-nav a{color:var(--dim); font-size:15px; font-weight:500;}
.main-nav a:hover{color:var(--ink);}
.btn{background:var(--ink); color:#fff; padding:11px 22px; border-radius:100px; font-weight:600; font-size:14px; display:inline-block; border:none; cursor:pointer;}
.btn:hover{background:var(--violet);}

/* HERO (front page) */
.hero{padding:50px 0 80px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
.hero h1{font-size:46px; line-height:1.12; margin-bottom:18px;}
.hero h1 .hl{color:var(--violet);}
.hero p{color:var(--dim); font-size:17px; max-width:440px; margin-bottom:28px;}
.search{display:flex; gap:10px; max-width:440px;}
.search input{flex:1; border:1.5px solid var(--line); background:var(--surface); border-radius:100px; padding:13px 20px; font-size:14px; font-family:inherit; color:var(--ink);}
.search button{background:var(--violet); color:#fff; border:none; border-radius:100px; padding:0 22px; font-weight:600; font-size:14px; cursor:pointer;}

.stack{position:relative; height:300px;}
.slide-card{position:absolute; width:280px; height:180px; border-radius:14px; box-shadow:0 20px 40px -12px rgba(20,20,30,0.18); overflow:hidden; border:1px solid rgba(0,0,0,0.05);}
.slide-card .bar{height:34px;}
.slide-card .body{padding:16px; background:#fff; height:calc(100% - 34px);}
.slide-card .body .ln{height:8px; border-radius:4px; background:#edecf7; margin-bottom:8px;}
.slide-card .body .ln.w60{width:60%;} .slide-card .body .ln.w80{width:80%;} .slide-card .body .ln.w40{width:40%;}
.s1{background:var(--violet-soft); top:10px; left:0; transform:rotate(-7deg); z-index:1;} .s1 .bar{background:var(--violet);}
.s2{background:var(--coral-soft); top:40px; left:90px; transform:rotate(4deg); z-index:2;} .s2 .bar{background:var(--coral);}
.s3{background:var(--teal-soft); top:100px; left:20px; transform:rotate(-2deg); z-index:3;} .s3 .bar{background:var(--teal);}

/* FILTERS */
.filters{display:flex; gap:10px; flex-wrap:wrap; padding:24px 0 40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:44px;}
.chip{display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:100px; border:1.5px solid var(--line); background:var(--surface); font-size:14px; font-weight:500; cursor:pointer; transition:.15s;}
.chip .dot{width:8px; height:8px; border-radius:50%;}
.chip.active, .chip:hover{border-color:var(--ink); background:var(--ink); color:#fff;}
.chip.active .dot, .chip:hover .dot{background:#fff !important;}

/* GRID / CARDS */
.section-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:28px;}
.section-head h2{font-size:26px;}
.section-head span{color:var(--dim); font-size:14px;}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:70px;}
.t-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:transform .18s, box-shadow .18s;}
.t-card:hover{transform:translateY(-4px); box-shadow:0 16px 30px -14px rgba(20,20,30,0.18);}
.t-thumb{aspect-ratio:16/10; padding:20px; display:flex; flex-direction:column; justify-content:center; gap:8px; position:relative; background-size:cover; background-position:center;}
.t-thumb .tl{height:9px; border-radius:5px; background:rgba(255,255,255,0.65);}
.t-thumb .tl.w70{width:70%;} .t-thumb .tl.w45{width:45%;} .t-thumb .tl.w55{width:55%;}
.badge{position:absolute; top:14px; right:14px; background:#fff; color:var(--ink); font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px;}
.t-body{padding:18px 20px 20px;}
.t-tag{display:flex; align-items:center; gap:6px; margin-bottom:8px;}
.t-tag .dot{width:7px; height:7px; border-radius:50%;}
.t-tag span{color:var(--dim); font-size:12px; text-transform:uppercase; letter-spacing:0.04em; font-weight:600;}
.t-body h3{font-size:16.5px; margin-bottom:12px;}
.t-foot{display:flex; justify-content:space-between; align-items:center;}
.price{font-weight:700; font-size:15px;}
.dl{background:var(--violet-soft); color:var(--violet); font-weight:600; font-size:13px; padding:8px 14px; border-radius:100px;}
.t-card:hover .dl{background:var(--violet); color:#fff;}

.cat-business .bar,.cat-business.t-thumb{background:var(--violet-soft);} .cat-business .bar{background:var(--violet);} .cat-business .dot{background:var(--violet);}
.cat-education .bar,.cat-education.t-thumb{background:var(--teal-soft);} .cat-education .bar{background:var(--teal);} .cat-education .dot{background:var(--teal);}
.cat-cv .bar,.cat-cv.t-thumb{background:var(--coral-soft);} .cat-cv .bar{background:var(--coral);} .cat-cv .dot{background:var(--coral);}
.cat-creative .bar,.cat-creative.t-thumb{background:var(--gold-soft);} .cat-creative .bar{background:var(--gold);} .cat-creative .dot{background:var(--gold);}

/* CTA */
.cta{background:var(--ink); color:#fff; border-radius:24px; padding:56px; text-align:center; margin-bottom:60px;}
.cta h2{font-size:28px; margin-bottom:10px; color:#fff;}
.cta p{color:#b8b8c0; margin-bottom:26px;}
.cta .btn{background:var(--violet);}

/* BLOG / SINGLE POST */
.post-hero{padding:50px 0 30px; border-bottom:1px solid var(--line); margin-bottom:40px;}
.post-hero .meta{display:flex; gap:14px; align-items:center; color:var(--dim); font-size:13px; margin-bottom:16px;}
.post-hero .meta .cat{color:var(--violet); font-weight:600;}
.post-hero h1{font-size:38px; line-height:1.25; max-width:700px;}
.bar-accent{width:64px; height:4px; background:var(--violet); border-radius:4px; margin:20px 0;}
.post-cover{aspect-ratio:16/9; border-radius:var(--radius); margin-bottom:40px; background:var(--surface); border:1px solid var(--line); overflow:hidden;}
.post-cover img{width:100%; height:100%; object-fit:cover;}
.article-body{max-width:760px; margin:0 auto 60px;}
.article-body p{color:var(--dim); margin-bottom:18px; font-size:16.5px;}
.article-body h2{font-size:23px; margin:34px 0 12px; color:var(--ink);}
.article-body ul,.article-body ol{color:var(--dim); margin:0 0 18px 22px;}
.article-body img{border-radius:14px; margin:20px 0;}

/* BLOG LIST */
.post-list-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:60px;}
.post-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.post-card .thumb{aspect-ratio:16/10; background:linear-gradient(135deg,var(--violet-soft),var(--coral-soft));}
.post-card .thumb img{width:100%; height:100%; object-fit:cover;}
.post-card .body{padding:18px 20px 22px;}
.post-card .cat{color:var(--violet); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px; display:block;}
.post-card h3{font-size:17px; margin-bottom:10px;}
.post-card p{color:var(--dim); font-size:14px;}

/* SIMPLE PAGE (page.php fallback) */
.page-hero{padding:60px 0 40px; border-bottom:1px solid var(--line); margin-bottom:40px;}
.page-hero h1{font-size:40px;}
.page-content{max-width:760px; margin:0 auto 60px; color:var(--dim); font-size:16.5px;}
.page-content h2{color:var(--ink); font-size:23px; margin:28px 0 12px;}

/* ABOUT PAGE */
.about-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:48px; align-items:center; margin-bottom:60px;}
.about-frame{aspect-ratio:16/9; background:var(--violet-soft); border-radius:var(--radius); overflow:hidden;}
.about-frame img{width:100%; height:100%; object-fit:cover;}
.about-copy h2{font-size:26px; margin-bottom:16px;}
.about-copy p{color:var(--dim); margin-bottom:14px;}
.stats{display:flex; gap:36px; margin-top:24px;}
.stat b{display:block; font-family:'Sora',sans-serif; font-size:28px; color:var(--violet);}
.stat span{color:var(--dim); font-size:13px;}
.services{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:60px;}
.service-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px;}
.service-card span{font-family:'Space Mono',monospace; color:var(--violet); font-size:13px; display:block; margin-bottom:14px;}
.service-card h3{font-size:19px; margin-bottom:10px;}
.service-card p{color:var(--dim); font-size:15px;}

/* CONTACT PAGE */
.contact-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:44px;}
.contact-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-align:center; transition:border-color .2s;}
.contact-card:hover{border-color:var(--violet);}
.contact-card .icon{width:36px; height:36px; margin:0 auto 14px; border-radius:10px; background:var(--violet-soft); display:flex; align-items:center; justify-content:center; color:var(--violet); font-weight:700;}
.contact-card h3{font-size:15px; margin-bottom:4px;}
.contact-card span{color:var(--dim); font-size:13px;}
.legal{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:36px;}
.legal h2{font-size:22px; margin-bottom:16px;}
.legal h3{font-size:16px; margin:20px 0 8px;}
.legal p,.legal li{color:var(--dim); font-size:14.5px; margin-bottom:8px;}
.legal ul{padding-left:20px;}
.tabs{display:flex; gap:8px; margin-bottom:24px;}
.tab{padding:8px 16px; border-radius:100px; font-size:13px; border:1px solid var(--line); color:var(--dim); cursor:pointer;}
.tab.active{background:var(--violet); color:#fff; border-color:var(--violet);}
.tab-content{display:none;}
.tab-content.active{display:block;}

/* FOOTER */
.site-footer{border-top:1px solid var(--line); padding:32px 0; color:var(--dim); font-size:14px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
.site-footer a:hover{color:var(--violet);}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;}
  .grid,.post-list-grid{grid-template-columns:repeat(2,1fr);}
  .about-grid,.services,.contact-grid{grid-template-columns:1fr 1fr;}
  .main-nav{display:none;}
  .stack{display:none;}
}
@media(max-width:560px){
  .grid,.post-list-grid,.about-grid,.services,.contact-grid{grid-template-columns:1fr;}
  .hero h1{font-size:32px;}
  .post-hero h1{font-size:28px;}
}