/*
Theme Name: YourBlog
Theme URI: https://example.com
Author: You
Description: Magazine-style blog theme with a gradient header, featured first post, 3-column grid, numbered pagination, related posts and a newsletter footer.
Version: 2.3
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: yourblog
*/
:root{--bg:#f6f7f8;--card:#fff;--ink:#16181a;--muted:#8a8f94;--badge:#9a9a9a;--g1:#000;--g2:#14700f}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #3ddc4a;outline-offset:2px}
.site-header{background:linear-gradient(90deg,var(--g1) 0%,var(--g2) 100%);color:#fff}
.bar{max-width:1280px;margin:auto;padding:36px 32px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.logo{font-family:Georgia,"Times New Roman",serif;font-size:2.3rem;letter-spacing:.14em;font-weight:400}
.logo img{max-height:56px;width:auto}
.main-nav ul{list-style:none;display:flex;gap:30px;flex-wrap:wrap}
.menu-wrap{display:flex;align-items:center;gap:32px;margin-left:auto;flex-wrap:wrap}
.menu-toggle{display:none}
.main-nav a{font-size:1.05rem;opacity:.92}
.main-nav a:hover{opacity:1;text-decoration:underline}
.search{display:flex;border-radius:14px;overflow:hidden;border:2px solid #fff;background:#fff}
.search input{border:0;padding:0 16px;height:56px;width:260px;font-size:1rem}
.search button{border:0;width:84px;background:#9a9a9a;color:#fff;font-size:1.3rem;cursor:pointer}
main{max-width:1280px;margin:0 auto;padding:32px}
.page-title{font-size:1.8rem;margin-bottom:24px}
.post{background:var(--card);padding:30px}
.post h2,.post h3{line-height:1.15;font-weight:800;margin-bottom:10px}
.post h2{font-size:2.1rem}.post h3{font-size:1.9rem}
.meta{font-size:.92rem;margin-bottom:14px}.meta span{color:var(--muted)}
.img{display:block;border-radius:12px;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#0b5a2a,#25d366)}
.img img{width:100%;height:100%;object-fit:cover;display:block}
.excerpt{color:#333;font-size:1.02rem}
.excerpt a{color:var(--muted)}
.badge{display:inline-block;background:var(--badge);color:#fff;font-size:.82rem;font-weight:600;padding:3px 12px;border-radius:10px;margin-top:12px}
.featured{display:grid;grid-template-columns:1fr 1.05fr 1.2fr;gap:30px;align-items:start;margin-bottom:32px;position:relative}
.featured .badge{position:absolute;right:30px;top:30px;margin:0}
.featured .excerpt{padding-top:50px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:start}
.grid .excerpt{margin-top:28px}
.pagination{display:flex;justify-content:center;gap:10px;margin:56px 0 40px;flex-wrap:wrap}
.pagination .page-numbers{min-width:50px;height:50px;padding:0 12px;display:grid;place-items:center;border-radius:10px;background:#fff;font-weight:700;border:1px solid #eee}
.pagination .current{background:var(--badge);color:#fff}
.pagination .dots{background:none;border:0;color:var(--muted)}
.related{background:#fff;padding:36px 0 56px}
.related .in{max-width:1280px;margin:auto;padding:0 32px}
.related h4{display:inline-block;font-size:1.5rem;padding-bottom:6px;border-bottom:4px solid var(--badge);margin-bottom:28px}
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.rgrid p{color:var(--muted);font-size:1.15rem;margin-top:10px}
.entry{background:var(--card);padding:36px 36px 44px;max-width:1400px;margin:0 auto}
.entry h1,.entry-content h2,.entry-content h3{font-weight:800;line-height:1.2}
.entry h1{font-size:2.9rem;margin-bottom:14px}
.entry h1::after,.entry-content h2::after{content:"";display:block;width:150px;height:5px;background:var(--badge);margin-top:10px}
.entry .img{margin:20px 0 28px}
.entry-content{font-size:1.12rem;line-height:1.8}
.entry-content p,.entry-content ul,.entry-content ol,.entry-content figure{margin-bottom:1.3em}
.entry-content h2{font-size:2.4rem;margin:1.2em 0 .6em}
.entry-content h3{font-size:1.7rem;margin:1.1em 0 .5em}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content img{border-radius:12px}
.entry-content a{color:var(--hover);text-decoration:underline}
.site-footer{background:var(--foot);color:var(--foottext);text-align:center;padding:64px 20px 72px}
.site-footer .logo{font-size:3rem}
.flinks ul{list-style:none;display:flex;justify-content:center;gap:24px;margin:44px 0 0;flex-wrap:wrap;font-weight:600}
.site-footer h5{font-size:1.6rem;font-weight:400;color:#9a9a9a}
.site-footer p{max-width:520px;margin:6px auto 20px}
.nl{max-width:490px;margin:24px auto 0;display:grid;gap:15px}
.nl input{height:56px;padding:0 20px;border:0;background:var(--bg);font-size:1.05rem}
.nl button{height:66px;border:0;background:#9a9a9a;color:#fff;font-size:1.15rem;font-weight:700;cursor:pointer}
.nl button:hover{background:var(--hover)}
@media(max-width:900px){
 .featured{grid-template-columns:1fr}
 .featured .badge{position:static;justify-self:start}
 .featured .excerpt{padding-top:0}
 .grid,.rgrid{grid-template-columns:1fr}
 .entry{padding:22px}.entry h1{font-size:2rem}.entry-content h2{font-size:1.7rem}
}

.nl-msg{color:#6fe07a;font-weight:600}.nl-msg.err{color:#ff8a8a}
.social{display:flex;justify-content:center;gap:20px;margin:36px 0 8px;flex-wrap:wrap}
.social a{text-decoration:underline}
.copyright{margin-top:28px;font-size:.9rem;opacity:.7}
.footer-widget{margin-top:24px}
.flinks a:hover{text-decoration:underline}

.contact{display:grid;gap:15px;max-width:640px}
.contact input,.contact textarea{padding:16px 18px;border:1px solid #ddd;border-radius:8px;font:inherit;background:#fff}
.contact button{height:56px;border:0;border-radius:8px;background:var(--badge);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer}
.contact button:hover{background:var(--hover)}
.nl-msg.ok{color:#14700f}

@media(max-width:900px){
 .bar{padding:20px 22px;gap:0;justify-content:space-between;flex-wrap:wrap}
 .logo,.custom-logo-link{font-size:1.9rem}
 .logo img,.custom-logo{max-height:44px}
 .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:52px;height:50px;border:0;border-radius:10px;background:#fff;cursor:pointer}
 .menu-toggle span{display:block;width:22px;height:2px;background:#222;border-radius:2px;transition:transform .2s,opacity .2s}
 .menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
 .menu-open .menu-toggle span:nth-child(2){opacity:0}
 .menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
 .menu-wrap{display:none;width:100%;margin:0;padding-top:22px;flex-direction:column;align-items:stretch;gap:20px}
 .menu-open .menu-wrap{display:flex}
 .main-nav ul{flex-direction:column;gap:0}
 .main-nav li a{display:block;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.18);font-size:1.1rem}
 .search{width:100%}.search input{flex:1;width:auto;min-width:0}
}