/*
Theme Name: Rozone
Theme URI: https://rouell.com
Author: Rouell Rodrigues
Author URI: https://rouell.com
Description: A personal diary theme — same visual identity as rouell.com (Inter font, minimalist black/white flat design, day/night toggle), stripped down to just a blog, with an optional site-wide password gate for keeping it private to people you choose to share it with.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rozone
*/

:root{
  --bg:#ffffff;
  --fg:#111111;
  --muted:#767676;
  --border:#e4e4e4;
  --img-filter:grayscale(1) contrast(1.05);
  --transition:180ms ease;
  --nav-h:84px;
  --footer-h:96px;
}
html[data-theme="night"]{
  --bg:#0b0b0b;
  --fg:#f2f2f2;
  --muted:#8c8c8c;
  --border:#242424;
  --img-filter:grayscale(1) contrast(1.05) brightness(.9);
}

*{box-sizing:border-box;}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight:400;
  margin:0;
  transition:background var(--transition), color var(--transition);
  padding-top:var(--nav-h);
  padding-bottom:var(--footer-h);
}
a{color:var(--fg); text-decoration:none;}
img{max-width:100%; height:auto;}

.container-narrow{
  width:100%;
  max-width:1080px;
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
  box-sizing:border-box;
}
@media (min-width:576px){ .container-narrow{padding-left:28px; padding-right:28px;} }
@media (min-width:768px){ .container-narrow{padding-left:36px; padding-right:36px;} }
@media (min-width:992px){ .container-narrow{padding-left:40px; padding-right:40px;} }

hr, .border-top, .border-bottom{border-color:var(--border);}

/* ---------- NAV (fixed) ---------- */
.navbar-fixed{
  position:fixed; top:0; left:0; right:0;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  z-index:1000;
  transition:background var(--transition), border-color var(--transition);
}
.navbar-inner{
  padding-top:1.75rem; padding-bottom:1.75rem; position:relative;
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.nav-brand{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; color:var(--fg); }
.nav-logo{
  width:42px; height:42px; flex:none; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; padding:7px; box-sizing:border-box;
  font-weight:700; font-size:16px;
}
.nav-name{font-size:15px; letter-spacing:-0.01em; white-space:nowrap;}
.nav-name-primary{font-weight:700; color:var(--fg);}
.nav-name-secondary{font-weight:400; color:var(--muted); margin-left:5px;}
@media (max-width:400px){ .nav-name-secondary{display:none;} }

.nav-links{display:none; align-items:center;}
.nav-links a{
  color:var(--muted); text-decoration:none; font-size:13px; font-weight:500;
  letter-spacing:.02em; margin-left:20px; transition:color var(--transition);
}
.nav-links a:hover{color:var(--fg);}
.nav-links a.active{color:var(--fg); text-decoration:underline; text-underline-offset:4px;}
@media (min-width:992px){ .nav-links{display:flex;} }

.navbar-toggle-btn{
  background:none; border:1px solid var(--border); border-radius:8px;
  width:36px; height:36px; color:var(--fg); font-size:14px; cursor:pointer;
}
@media (min-width:992px){ .navbar-toggle-btn{display:none;} }

.nav-links-mobile{
  display:none; flex-direction:column; gap:14px;
  position:absolute; top:100%; left:0; right:0;
  background:var(--bg); padding:20px 0 24px; border-top:1px solid var(--border); z-index:999;
}
.nav-links-mobile.open{display:flex;}
.nav-links-mobile a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:500;}
.nav-links-mobile a.active{color:var(--fg); text-decoration:underline; text-underline-offset:4px;}
.nav-links-mobile .mode-switch{align-self:flex-start; margin-top:6px;}
@media (min-width:992px){ .nav-links-mobile{display:none !important;} }

/* day/night switch */
.mode-switch{
  position:relative; display:inline-flex; align-items:center;
  font-family:'Inter', sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; background:none;
  border:1px solid var(--border); border-radius:999px; padding:4px;
  cursor:pointer; color:var(--fg); margin-left:20px;
}
.mode-switch span{
  position:relative; z-index:2; padding:5px 12px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  flex:0 0 auto; min-width:74px; white-space:nowrap; transition:color var(--transition);
}
.mode-switch .indicator{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  background:var(--fg); border-radius:999px;
  transition:transform 220ms cubic-bezier(.65,0,.35,1); z-index:1;
}
html[data-theme="night"] .mode-switch .indicator{transform:translateX(100%);}
.mode-switch span:first-child{color:var(--bg);}
html[data-theme="day"] .mode-switch span:first-child{color:#ffffff;}
html[data-theme="night"] .mode-switch span:first-child{color:var(--muted);}
html[data-theme="day"] .mode-switch span:last-child{color:var(--muted);}
.mode-switch span:last-child{color:var(--bg);}

/* ---------- PAGE HEAD ---------- */
.page-head{padding-top:4rem; padding-bottom:3rem;}
.eyebrow{font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:20px;}
.page-title{font-size:36px; line-height:1.15; font-weight:700; letter-spacing:-0.03em; margin:0;}
.page-title em{font-style:normal; font-weight:300; color:var(--muted);}
@media (min-width:992px){ .page-title{font-size:46px;} }
.lede{font-size:17px; line-height:1.7; color:var(--muted); max-width:56ch;}

.section{padding-top:2.5rem; padding-bottom:3.5rem;}

.btn-line{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  text-decoration:none; color:var(--fg); border-bottom:1px solid var(--fg); padding-bottom:3px;
  transition:opacity var(--transition);
}
.btn-line:hover{opacity:.6;}

/* ---------- BLOG GRID (index / archive) ---------- */
.blog-grid{display:grid; grid-template-columns:1fr; gap:24px;}
@media (min-width:576px){ .blog-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:992px){ .blog-grid{grid-template-columns:1fr 1fr 1fr;} }

.blog-card{
  display:block; border:1px solid var(--border); text-decoration:none; color:var(--fg);
  transition:border-color var(--transition);
}
.blog-card:hover{border-color:var(--fg);}
.blog-card-thumb{aspect-ratio:16/10; overflow:hidden; background:var(--border);}
.blog-card-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.blog-card-thumb-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:22px;
}
.blog-card-body{padding:18px;}
.blog-card-meta-top{
  display:flex; align-items:center; gap:8px; font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:12px;
}
.blog-card-title{font-size:16px; font-weight:600; margin:0 0 8px; letter-spacing:-0.01em; line-height:1.35;}
.blog-card-excerpt{font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:16px;}
.blog-card-meta{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted);}
.blog-read-more{font-weight:600; color:var(--fg);}

.blog-state{
  grid-column:1/-1; text-align:center; padding:60px 0; color:var(--muted); border:1px dashed var(--border);
}
.blog-state i{font-size:20px; display:block; margin-bottom:12px;}

/* ---------- PAGINATION ---------- */
.pagination-wrap{display:flex; justify-content:center; gap:8px; margin-top:48px;}
.pagination-wrap a, .pagination-wrap span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px; border:1px solid var(--border);
  color:var(--muted); text-decoration:none; font-size:13px; transition:all var(--transition);
}
.pagination-wrap a:hover{border-color:var(--fg); color:var(--fg);}
.pagination-wrap .current{background:var(--fg); color:var(--bg); border-color:var(--fg);}

/* ---------- SINGLE POST ---------- */
.post-header{padding-top:4rem; padding-bottom:2.5rem; border-bottom:1px solid var(--border); margin-bottom:2.5rem;}
.post-title{font-size:32px; line-height:1.2; font-weight:700; letter-spacing:-0.02em; margin:0 0 16px;}
@media (min-width:992px){ .post-title{font-size:42px;} }
.post-meta{display:flex; flex-wrap:wrap; gap:16px; font-size:13px; color:var(--muted);}
.post-meta span{display:inline-flex; align-items:center; gap:6px;}
.post-featured-img{width:100%; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--border); margin-bottom:2.5rem; display:block;}

.entry-content{font-size:16px; line-height:1.8; color:var(--fg); max-width:72ch;}
.entry-content p{margin:0 0 1.4em;}
.entry-content h2{font-size:24px; font-weight:700; letter-spacing:-0.02em; margin:2.2em 0 .6em;}
.entry-content h3{font-size:19px; font-weight:600; letter-spacing:-0.01em; margin:1.8em 0 .5em;}
.entry-content a{color:var(--fg); text-decoration:underline; text-underline-offset:3px;}
.entry-content blockquote{
  margin:1.8em 0; padding-left:20px; border-left:2px solid var(--fg); color:var(--muted); font-style:italic;
}
.entry-content img{border:1px solid var(--border); margin:1em 0;}
.entry-content ul, .entry-content ol{padding-left:22px; color:var(--fg);}
.entry-content li{margin-bottom:8px; line-height:1.7;}
.entry-content pre{
  background:var(--border); background:color-mix(in srgb, var(--border) 35%, transparent);
  padding:16px; overflow-x:auto; font-size:13.5px; border:1px solid var(--border);
}
.entry-content code{font-family:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size:.9em;}

.post-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border);}
.post-tags a{
  font-size:12px; padding:6px 12px; border:1px solid var(--border); color:var(--muted); text-decoration:none;
  transition:all var(--transition);
}
.post-tags a:hover{border-color:var(--fg); color:var(--fg);}

.post-nav{display:flex; justify-content:space-between; gap:20px; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border);}
.post-nav > div{flex:1; min-width:0;}
.post-nav-next{text-align:right;}
.post-nav a{display:block; color:var(--fg); text-decoration:none;}
.post-nav-label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px;}
.post-nav-title{font-size:14px; font-weight:600; line-height:1.4;}

/* ---------- COMMENTS ---------- */
.comments-area{margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--border); max-width:72ch;}
.comments-title{font-size:20px; font-weight:700; margin-bottom:1.5rem;}
.comment-list{list-style:none; margin:0; padding:0;}
.comment-body{padding:20px 0; border-top:1px solid var(--border);}
.comment-list > li:first-child .comment-body{border-top:none;}
.comment-author{font-weight:600; font-size:14px;}
.comment-metadata{font-size:12px; color:var(--muted); margin-bottom:8px;}
.comment-content p{font-size:14px; line-height:1.7; margin:0 0 .8em;}
.comment-reply-link{font-size:12px; color:var(--muted); text-decoration:underline;}
.comment-respond{margin-top:2rem;}
.comment-form label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px;}
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea{
  width:100%; background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:0;
  font-family:'Inter', sans-serif; font-size:14px; padding:10px 12px; margin-bottom:16px;
}
.comment-form textarea{min-height:120px;}
.comment-form .submit{
  font-family:'Inter', sans-serif; font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--bg); background:var(--fg); border:1px solid var(--fg); padding:11px 22px; cursor:pointer;
}
.comment-form .submit:hover{opacity:.85;}

/* ---------- 404 ---------- */
.error-404{padding:5rem 0; text-align:center;}
.error-404 h1{font-size:64px; font-weight:700; margin:0 0 16px;}

/* ---------- FOOTER ---------- */
.footer-fixed{position:fixed; left:0; right:0; bottom:0; background:var(--bg); z-index:1000; transition:background var(--transition); border-top:1px solid var(--border);}
.footer-inner{padding-top:1.5rem; padding-bottom:1.5rem; display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between; align-items:center;}
.footer-inner p{font-size:12px; color:var(--muted); margin:0;}
.footer-links{font-size:12px; color:var(--muted);}
.footer-links a{color:var(--muted); text-decoration:none; transition:color var(--transition);}
.footer-links a:hover{color:var(--fg);}
.footer-inner .socials{margin-left:auto;}
.footer-inner .socials a{color:var(--muted); margin-left:16px; font-size:14px; transition:color var(--transition);}
.footer-inner .socials a:hover{color:var(--fg);}
@media (max-width:575.98px){
  .footer-inner{justify-content:flex-start;}
  .footer-inner .socials{margin-left:0;}
}

@media (max-width:575.98px){
  .page-title{font-size:28px;}
  .post-title{font-size:26px;}
}

/* Screen-reader only text (WP core class, kept for accessibility) */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px;
  overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal;
}