/*
Theme Name: Cr7tip Blog
Theme URI: https://www.cr7tip.com
Author: Cr7tip
Description: Minimal blog theme matching the visual design of cr7tip.com — same colors, typography, and mobile menu behavior, with no navigation or links beyond what's essential.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: cr7tip-blog
*/

:root{
    --display: 'Space Grotesk', sans-serif;
    --body: 'Inter', sans-serif;
    --mono: 'IBM Plex Mono', monospace;
    --radius: 10px;

    --chrome-bg:#0B1220;
    --chrome-bg-2:#141d33;
    --chrome-text:#F3F5FA;
    --chrome-text-dim:#9AABCE;
    --chrome-line: rgba(243,245,250,0.12);

    --bg:#06070A;
    --bg-alt:#0B1220;
    --surface:#10182C;

    --text:#F3F5FA;
    --text-dim:#8C96AC;
    --yellow:#F4C430;
    --yellow-soft:#3A331A;
    --blue:#3E63B0;
    --blue-bright:#5D89E8;
    --blue-soft:#152344;
    --line: rgba(243,245,250,0.10);
    --shadow: 0 24px 60px -24px rgba(0,0,0,0.7);
    --shadow-lift: 0 30px 70px -22px rgba(0,0,0,0.75), 0 2px 0 rgba(243,245,250,0.04) inset;
    --glow-yellow: 0 8px 24px -6px rgba(244,196,48,0.35);
}

[data-theme="light"]{
    --bg:#F3F5FA;
    --bg-alt:#E7ECF7;
    --surface:#FFFFFF;
    --text:#0A0D16;
    --text-dim:#485270;
    --yellow:#B8860B;
    --yellow-soft:#FBF0CC;
    --blue:#274B96;
    --blue-bright:#1E3E82;
    --blue-soft:#DCE6FA;
    --line: rgba(11,18,32,0.12);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--body); font-size:15.5px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
.wrap{max-width:900px; margin:0 auto; padding:0 20px;}

/* ================= HEADER ================= */
header{position:sticky; top:0; z-index:80; background:var(--chrome-bg); color:var(--chrome-text); box-shadow:0 1px 0 rgba(0,0,0,0.3), 0 20px 40px -28px rgba(0,0,0,0.6);}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px; position:relative;}
.logo{font-family:var(--display); font-weight:700; font-size:clamp(18px,2.4vw,22px); letter-spacing:-0.01em; color:var(--chrome-text); display:flex; align-items:center; gap:8px;}
.logo span{color:var(--yellow);}
.logo img{height:32px; width:auto; display:block;}

.nav-links{display:flex; align-items:center; gap:2px;}
.nav-links > a{
    font-size:13.5px; font-weight:600; color:var(--chrome-text-dim);
    padding:9px 11px; border-radius:6px; font-family:var(--body);
}
.nav-links > a:hover, .nav-links > a.is-active{color:var(--chrome-text); background:var(--chrome-bg-2);}

.nav-right{display:flex; align-items:center; gap:10px;}
.theme-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--chrome-line);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:var(--chrome-bg-2); flex-shrink:0;
}
.theme-btn svg{width:17px; height:17px; stroke:var(--chrome-text);}
.burger{
    display:none; width:38px; height:38px; border-radius:6px; border:1px solid var(--chrome-line);
    background:var(--chrome-bg-2); align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
    flex-direction:column; gap:4px;
}
.burger span, .burger::before, .burger::after{content:''; display:block; width:16px; height:2px; background:var(--chrome-text);}

.mobile-menu{display:none; flex-direction:column; gap:2px; padding:6px 0 18px; border-top:1px solid var(--chrome-line);}
.mobile-menu a{display:block; padding:12px 4px; font-size:14.5px; font-weight:600; border-top:1px solid var(--chrome-line); color:var(--chrome-text-dim);}
.mobile-menu a:first-child{border-top:none;}
.mobile-menu a:hover{color:var(--chrome-text);}
body.menu-open .mobile-menu{display:flex;}

@media (max-width:820px){
    .nav-links{display:none;}
    .burger{display:flex;}
}

/* ================= content ================= */
main{padding:48px 0 80px;}
.page-title{font-family:var(--display); font-size:clamp(28px,4vw,40px); font-weight:700; letter-spacing:-0.01em; margin:0 0 8px;}
.post-meta{color:var(--text-dim); font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:32px;}

.post-list{display:flex; flex-direction:column; gap:36px;}

/* Featured post — the most recent article, given a larger, more
   editorial treatment than the grid below it. Works whether or not
   it has a featured image: with one, the image spans the full width
   above the text; without one, a gold top border and larger padding
   still set it apart. */
.post-featured{
    background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--radius) + 4px);
    box-shadow:var(--shadow-lift); position:relative;
}
.post-featured::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--yellow), var(--blue-bright)); border-radius:calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;}
.post-featured .post-thumb{margin:0; aspect-ratio:16/7; overflow:hidden; border-radius:calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;}
.post-featured .post-thumb img{width:100%; height:100%; object-fit:cover;}
.post-featured .post-featured-body{padding:36px 40px 40px;}
.post-featured .featured-label{
    display:inline-block; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--yellow); background:var(--yellow-soft); padding:5px 11px; border-radius:20px;
    margin-bottom:16px;
}
.post-featured h2{font-family:var(--display); font-size:clamp(24px,3.4vw,36px); font-weight:700; line-height:1.15; margin:0 0 12px; letter-spacing:-0.015em;}
.post-featured h2 a:hover{color:var(--yellow);}
.post-featured .post-meta{margin-bottom:16px;}
.post-featured p{color:var(--text-dim); font-size:16.5px; margin:0 0 22px; max-width:65ch;}
.post-featured .read-more{
    display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:#0A0D16;
    background:var(--yellow); padding:11px 20px; border-radius:7px; box-shadow:var(--glow-yellow);
}
.post-featured .read-more:hover{filter:brightness(1.06); transform:translateY(-1px);}

/* Grid of everything after the featured post */
.post-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:720px){ .post-grid{grid-template-columns:1fr;} }

.post-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); display:flex; flex-direction:column;}
.post-card .post-thumb{border-radius:8px; overflow:hidden; margin-bottom:16px; aspect-ratio:16/10;}
.post-card .post-thumb img{width:100%; height:100%; object-fit:cover;}
.post-card h2{font-family:var(--display); font-size:19px; font-weight:700; margin:0 0 8px; letter-spacing:-0.01em; line-height:1.25;}
.post-card h2 a:hover{color:var(--yellow);}
.post-card .post-meta{margin-bottom:12px;}
.post-card p{color:var(--text-dim); font-size:14px; margin:0 0 16px; flex-grow:1;}
.read-more{display:inline-block; font-size:13px; font-weight:700; color:var(--yellow);}
.read-more:hover{filter:brightness(1.1);}

.single-header{margin:0 0 32px; text-align:center;}
.single-header .page-title{font-size:clamp(28px,4.2vw,44px); line-height:1.15;}
.single-header .post-meta{margin-bottom:0;}
.single-post{background:var(--surface); border:1px solid var(--line); border-radius:calc(var(--radius) + 4px); box-shadow:var(--shadow-lift);}
.single-post .post-thumb{margin:0; aspect-ratio:16/8; overflow:hidden; border-radius:calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;}
.single-post .post-thumb img{width:100%; height:100%; object-fit:cover;}
.single-post .entry-content{padding:40px clamp(24px,5vw,56px) 48px;}
.entry-content{font-size:16.5px; line-height:1.8;}
.entry-content p{margin:0 0 22px;}
.entry-content h2{font-family:var(--display); font-size:24px; margin:36px 0 14px;}
.entry-content h3{font-family:var(--display); font-size:19px; margin:28px 0 12px;}
.entry-content img{border-radius:8px; margin:20px 0;}
.entry-content blockquote{border-left:3px solid var(--yellow); margin:20px 0; padding:4px 0 4px 18px; color:var(--text-dim); font-style:italic;}
.entry-content a{color:var(--yellow); text-decoration:underline; text-underline-offset:2px;}
.entry-content ul, .entry-content ol{padding-left:22px; margin:0 0 20px;}

.pagination{display:flex; justify-content:space-between; gap:12px; margin-top:40px;}
.pagination a, .pagination span{
    font-size:13.5px; font-weight:700; padding:10px 16px; border-radius:6px;
    border:1px solid var(--line); color:var(--text);
}
.pagination a:hover{border-color:var(--yellow); color:var(--yellow);}

.page-content{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow);}

.empty-state{color:var(--text-dim); text-align:center; padding:60px 20px;}

/* ================= footer ================= */
footer{background:var(--chrome-bg); color:var(--chrome-text-dim); margin-top:20px;}
.foot-inner{padding:44px 0 28px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center;}
.foot-logo{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-0.01em; color:var(--chrome-text);}
.foot-logo span{color:var(--yellow);}
.foot-link{font-size:13.5px; font-weight:600; color:var(--chrome-text-dim); border:1px solid var(--chrome-line); padding:9px 18px; border-radius:6px;}
.foot-link:hover{border-color:var(--yellow); color:var(--yellow);}
.foot-rule{width:100%; height:1px; background:var(--chrome-line); border:none; margin:0;}
.foot-bottom{padding:18px 0 26px; text-align:center;}
.foot-copy{color:var(--chrome-text-dim); font-size:12px;}