/*
Theme Name: Refurbished Laptops Kenya Journal
Description: A custom forest green journal for Refurbished Laptops Kenya.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.0
Text Domain: refurbished-laptops-blog
*/
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; }
.refurbished-journal { --ink:#102a2b; --brand:#12664b; --accent:#d8efa6; --soft:#eef4e7; --line:#dfe6dc; color:var(--ink); background:#fafbf8; font:15px/1.65 Arial,Helvetica,sans-serif; }
a { color:inherit; text-underline-offset:4px; }
button,input,textarea { font:inherit; }
button,a,input,textarea { -webkit-tap-highlight-color:transparent; }
:focus-visible { outline:3px solid var(--brand); outline-offset:5px; }
img { max-width:100%; height:auto; }
figure { margin:0; }
h1,h2,h3 { line-height:1.15; letter-spacing:-.045em; margin:0 0 20px; overflow-wrap:anywhere; }
p { margin:0 0 20px; }
.container { width:calc(100% - 64px); max-width:1280px; margin-inline:auto; }
.screen-reader-text,.skip-link:not(:focus) { clip-path:inset(50%); width:1px; height:1px; overflow:hidden; position:absolute; white-space:nowrap; }
.skip-link:focus { position:fixed; top:12px; left:12px; padding:12px; background:white; z-index:1000; }
.notice { background:var(--ink); color:white; font-size:12px; padding:8px 0; }
.notice .container { display:flex; justify-content:space-between; gap:16px; }
.notice span:last-child { color:var(--accent); }
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.masthead { display:flex; align-items:center; gap:30px; min-height:104px; }
.logo { display:flex; gap:10px; align-items:center; text-decoration:none; font-size:23px; font-weight:800; letter-spacing:-1px; line-height:1.1; }
.logo-icon { display:flex; align-items:center; justify-content:center; flex:none; width:43px; height:43px; background:var(--ink); color:var(--accent); border-radius:11px; font-size:33px; }
.logo-icon span { font-size:22px; margin-top:-8px; }
.logo-sub { display:block; font-size:10px; font-weight:600; letter-spacing:3px; margin-top:6px; }
.journal-label { margin-left:auto; font-size:11px; letter-spacing:2px; font-weight:700; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:16px; background:var(--ink); color:#fff; padding:13px 22px; border:1px solid var(--ink); border-radius:7px; text-decoration:none; font-weight:700; font-size:14px; line-height:1.5; }
.button:hover { background:var(--brand); }
.button-small { padding:10px 18px; }
.main-nav { display:flex; gap:28px; align-items:center; min-height:50px; padding-bottom:8px; font-size:13px; font-weight:600; }
.main-nav a { padding:10px 0; text-decoration:none; white-space:nowrap; }
.main-nav a:hover,.main-nav a[aria-current] { color:var(--brand); text-decoration:underline; }
.nav-store { margin-left:auto; }
.journal-hero { display:grid; grid-template-columns:1.25fr 1fr; margin-top:36px; border-radius:18px; overflow:hidden; background:var(--soft); }
.hero-copy { padding:52px; }
.eyebrow { font-size:11px; font-weight:700; letter-spacing:2px; margin-bottom:22px; }
.hero-copy h1 { font-size:clamp(40px,4.8vw,68px); max-width:580px; line-height:1.03; margin-bottom:26px; }
.hero-intro { max-width:450px; font-size:16px; line-height:1.7; }
.text-link { display:inline-flex; gap:22px; align-items:center; font-size:14px; font-weight:700; text-decoration:underline; }
.hero-copy .text-link { margin-top:10px; }
.hero-art { position:relative; display:flex; justify-content:center; align-items:center; background:var(--accent); min-height:370px; overflow:hidden; }
.art-orbit { position:absolute; width:380px; height:380px; border:1px solid #102a2b26; border-radius:50%; }
.art-orbit::after { content:''; position:absolute; inset:40px; border:1px solid #102a2b26; border-radius:50%; }
.device { z-index:1; width:260px; height:177px; border:4px solid var(--ink); padding:8px; border-radius:11px; transform:rotate(-10deg); background:#fafbf8; position:relative; box-shadow:15px 18px 0 #102a2b16; }
.device::after { content:''; position:absolute; left:-24px; bottom:-19px; height:17px; width:300px; border:4px solid var(--ink); border-radius:3px 3px 15px 15px; background:#fafbf8; }
.device-screen { height:100%; background:var(--ink); color:var(--accent); border-radius:4px; padding:15px; position:relative; overflow:hidden; }
.screen-dot { display:block; width:25px; height:25px; border-radius:50%; background:var(--accent); }
.screen-line { display:block; width:60%; height:5px; background:var(--accent); opacity:.65; margin-top:14px; }
.screen-line.short { width:40%; margin-top:8px; }
.screen-arrow { font-size:100px; line-height:1; position:absolute; right:14px; bottom:-3px; }
.art-note { position:absolute; bottom:24px; right:24px; font-size:9px; letter-spacing:2px; font-weight:700; }
.journal-body { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:48px; padding:64px 0 88px; scroll-margin-top:20px; }
.section-heading { display:flex; align-items:baseline; gap:20px; justify-content:space-between; margin-bottom:26px; }
.section-heading h2 { font-size:25px; margin:0; }
.section-heading>span { font-size:12px; color:#56615d; }
.post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.post-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:white; }
.card-image { display:block; aspect-ratio:16/10; background:var(--soft); overflow:hidden; }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
.card-image:hover img { transform:scale(1.03); }
.card-copy { padding:26px; }
.post-meta { font-size:11px; color:#58625c; margin:0 0 16px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.post-meta a { color:var(--brand); }
.post-card h2 { font-size:26px; }
.post-card h2 a { text-decoration:none; }
.post-card h2 a:hover { text-decoration:underline; }
.excerpt { font-size:14px; color:#58625c; overflow-wrap:anywhere; }
.empty-state { border:1px solid var(--line); border-radius:12px; padding:42px; background:white; }
.empty-mark { display:flex; width:48px; height:48px; align-items:center; justify-content:center; background:var(--soft); border-radius:50%; font-size:28px; margin-bottom:26px; }
.empty-state h2 { font-size:32px; max-width:460px; }
.empty-state p:not(.eyebrow) { max-width:470px; color:#58625c; }
.journal-sidebar h2 { font-size:20px; margin-bottom:16px; }
.sidebar-search { padding-bottom:28px; }
.search-form { display:flex; background:white; border:1px solid var(--line); border-radius:7px; overflow:visible; }
.search-form input { width:100%; min-width:0; padding:12px; border:0; border-radius:7px 0 0 7px; background:transparent; font-size:14px; color:var(--ink); }
.search-form button { border:0; border-radius:0 7px 7px 0; padding:10px 15px; cursor:pointer; background:var(--ink); color:white; }
.topics { border-top:1px solid var(--line); padding:24px 0; }
.topics a { display:flex; justify-content:space-between; gap:16px; padding:9px 0; text-decoration:none; font-size:14px; }
.topics a span { color:#58625c; }
.shop-note { padding:28px; border-radius:12px; background:var(--soft); }
.shop-note .eyebrow { font-size:9px; }
.shop-note h2 { font-size:29px; }
.shop-note p:not(.eyebrow) { font-size:14px; }
.site-footer { background:var(--ink); color:#fff; padding-top:50px; }
.footer-grid { display:grid; grid-template-columns:1.4fr .7fr 1fr; gap:60px; padding-bottom:42px; }
.footer-brand>a { font-size:25px; font-weight:700; line-height:1.2; text-decoration:none; display:block; max-width:300px; }
.footer-brand p { color:var(--accent); margin-top:14px; }
.footer-grid h2 { font-size:15px; letter-spacing:0; }
.footer-grid>div:not(:first-child) a { display:block; font-size:13px; margin-bottom:10px; text-decoration:none; }
.footer-grid a:hover { text-decoration:underline; }
.footer-grid p { font-size:14px; max-width:340px; }
.footer-bottom { padding:22px 0; border-top:1px solid #ffffff30; font-size:12px; color:#e0e5e0; }
.archive-heading { padding:60px 0 0; max-width:900px; }
.archive-heading h1 { font-size:clamp(32px,4vw,52px); }
.article { padding:55px 0 80px; }
.article-header { max-width:850px; margin:0 auto 34px; }
.article-header>.text-link { margin-bottom:32px; }
.article-header .post-meta { gap:20px; }
.article-header h1 { font-size:clamp(36px,4.4vw,60px); }
.article-image { max-width:1040px; margin:0 auto 42px; }
.article-image img { width:100%; max-height:660px; object-fit:cover; border-radius:14px; }
figcaption { font-size:13px; color:#58625c; padding-top:8px; }
.entry-content,.article-bottom,.comments-area { max-width:760px; margin:0 auto; overflow-wrap:anywhere; }
.entry-content { font-size:18px; line-height:1.8; }
.entry-content h2 { font-size:32px; margin-top:42px; }
.entry-content h3 { font-size:25px; margin-top:30px; }
.entry-content p,.entry-content ul,.entry-content ol,.entry-content figure { margin-bottom:26px; }
.entry-content blockquote { border-left:4px solid var(--brand); margin:32px 0; padding:16px 26px; background:var(--soft); }
.entry-content blockquote p:last-child { margin-bottom:0; }
.entry-content pre { padding:20px; background:var(--soft); overflow-x:auto; font-size:14px; }
.entry-content iframe { max-width:100%; }
.entry-content table { width:100%; border-collapse:collapse; }
.entry-content td,.entry-content th { padding:10px; border:1px solid var(--line); }
.entry-content .wp-block-table { overflow-x:auto; }
.entry-content .alignwide,.entry-content .alignfull { width:100%; }
.entry-content .alignleft { float:left; margin:0 24px 20px 0; }
.entry-content .alignright { float:right; margin:0 0 20px 24px; }
.entry-content::after { content:''; display:table; clear:both; }
.has-brand-color { color:var(--brand); }.has-brand-background-color { background:var(--brand); }
.has-ink-color { color:var(--ink); }.has-ink-background-color { background:var(--ink); }
.has-accent-color { color:var(--accent); }.has-accent-background-color { background:var(--accent); }
.article-bottom { border-top:1px solid var(--line); margin-top:42px; padding-top:26px; }
.navigation { margin-top:30px; }
.nav-links { display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; }
.nav-links>div { max-width:46%; }
.page-numbers { padding:7px 12px; background:white; border:1px solid var(--line); border-radius:4px; }
.page-numbers.current { background:var(--ink); color:white; }
.comments-area { margin-top:40px; }
.comment-list { padding-left:24px; }
.comment-body { margin-bottom:24px; }.comment-metadata { font-size:12px; }
.comment-form label { display:block; }.comment-form input:not([type=checkbox]),.comment-form textarea,.post-password-form input { border:1px solid var(--line); border-radius:5px; padding:10px; max-width:100%; }
.comment-form textarea { width:100%; }.comment-form-cookies-consent label { display:inline; }
.comment-form .submit { background:var(--ink); color:white; cursor:pointer; }
@media(max-width:1000px) { .hero-copy { padding:36px; }.journal-body { gap:28px; grid-template-columns:minmax(0,1fr) 240px; }.post-grid { grid-template-columns:1fr; }.section-heading { display:block; }.section-heading>span { display:block; margin-top:8px; }.journal-label { display:none; }.masthead>.button { margin-left:auto; }.main-nav { gap:20px; }.footer-grid { gap:30px; } }
@media(max-width:700px) { .container { width:calc(100% - 36px); }.notice { font-size:10px; }.notice span:last-child { display:none; }.masthead { min-height:90px; gap:14px; }.logo { font-size:20px; }.logo-sub { font-size:8px; letter-spacing:2px; }.logo-icon { width:36px; height:36px; font-size:28px; }.logo-icon span { font-size:18px; }.button-small { font-size:11px; padding:9px 10px; gap:6px; }.main-nav { overflow-x:auto; gap:22px; font-size:12px; }.main-nav .nav-store { margin-left:0; }.journal-hero { grid-template-columns:1fr; margin-top:22px; }.hero-copy { padding:32px 26px; }.hero-copy h1 { font-size:43px; }.hero-art { min-height:260px; }.journal-phone .hero-art { min-height:300px; }.device { transform:rotate(-8deg) scale(.85); }.hero-intro { font-size:15px; }.journal-body { grid-template-columns:1fr; gap:38px; padding:38px 0 50px; }.empty-state { padding:28px; }.empty-state h2 { font-size:29px; }.journal-sidebar { display:grid; gap:22px; }.sidebar-search { padding:0; }.footer-grid { grid-template-columns:1fr; gap:24px; }.footer-brand>a { font-size:24px; }.site-footer { padding-top:36px; }.article { padding-top:32px; }.article-header h1 { font-size:36px; }.entry-content { font-size:17px; }.entry-content h2 { font-size:28px; }.entry-content .alignleft,.entry-content .alignright { float:none; margin:0 0 24px; }.archive-heading { padding-top:35px; }.post-card h2 { font-size:25px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }