/*
Theme Name: FocusAndWork
Theme URI: https://focusandwork.com
Author: You
Author URI: https://focusandwork.com
Description: A clean, modern, fast theme for growth & business articles — great typography, readable layout, and simple customization.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: focusandwork
Tags: blog, news, one-column, two-columns, accessibility-ready, custom-logo, custom-menu, editor-style, block-styles
*/
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: #0f172a; background: #fff; font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; line-height: 1.6; font-size: 18px; }
.container { width: 100%; max-width: 1080px; padding: 0 1rem; margin: 0 auto; }
.site-header { border-bottom: 1px solid #e5e7eb; background:#fff; position: sticky; top:0; z-index:20; }
.brand { display:flex; align-items:center; gap:.75rem; padding:.85rem 0; }
.brand a { text-decoration:none; color:inherit; }
.brand .site-title { font-weight:800; letter-spacing:-.01em; font-size:1.25rem; }
.site-description { color:#6b7280; font-size:.95rem; }
.nav { display:flex; gap:1rem; flex-wrap:wrap; padding:.25rem 0 1rem; }
.nav a { text-decoration:none; color:#334155; padding:.35rem .6rem; border-radius:.5rem; }
.nav a:hover { background:#f1f5f9; color:#0f172a; }
.current-menu-item>a,.current_page_item>a { background:#eef2ff; color:#1d4ed8; }
.button, input[type=submit], button { background:var(--accent,#1d4ed8); color:#fff; border:none; padding:.6rem .95rem; border-radius:.6rem; cursor:pointer; font-weight:600; }
.button.link { background:transparent; color:var(--accent,#1d4ed8); }
.hero { padding:2.25rem 0; border-bottom:1px solid #e5e7eb; background:#fafafa; }
.hero h1 { margin:0 0 .4rem; font-size:clamp(1.8rem,2.8vw,2.6rem); line-height:1.2; }
.hero p { margin:0; color:#475569; }
.grid { display:grid; gap:1.75rem; }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.post-card { border:1px solid #e5e7eb; border-radius:1rem; overflow:hidden; background:#fff; transition:transform .12s, box-shadow .12s; }
.post-card:hover { transform:translateY(-2px); box-shadow:0 6px 24px rgba(2,6,23,.06); }
.post-card .thumb { aspect-ratio:16/9; background:#f1f5f9; display:block; width:100%; object-fit:cover; }
.post-card .meta { padding:1rem 1rem 0; color:#6b7280; font-size:.9rem; }
.post-card h2 { padding:.25rem 1rem .5rem; font-size:1.15rem; line-height:1.35; margin:0; }
.post-card .excerpt, .post-card .more { padding:0 1rem 1rem; }
.single .post-header { padding:1.5rem 0; border-bottom:1px solid #e5e7eb; }
.single .post-header h1 { margin:0; font-size:clamp(1.8rem,3.4vw,3rem); }
.single .post-meta { color:#64748b; margin-top:.25rem; }
.single .featured { margin:1.25rem 0; }
.single .featured img { width:100%; height:auto; border-radius:.8rem; }
.content { padding:1.25rem 0; }
.content blockquote { margin:1.25rem 0; padding:1rem 1.25rem; background:#f8fafc; border-left:4px solid var(--accent,#1d4ed8); border-radius:.5rem; color:#334155; }
.content img { max-width:100%; height:auto; border-radius:.5rem; }
.content a { color:var(--accent,#1d4ed8); text-decoration:none; }
.content a:hover { text-decoration:underline; }
.sidebar { border-left:1px solid #e5e7eb; padding-left:1rem; }
.widget { margin:0 0 1.5rem; }
.widget-title { font-weight:700; font-size:1rem; margin:0 0 .5rem; }
.site-footer { border-top:1px solid #e5e7eb; margin-top:2rem; padding:2rem 0; color:#64748b; font-size:.95rem; }
.footer-grid { display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:800px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position:static; width:auto; height:auto; padding:.5rem; background:#111827; color:#fff; border-radius:.5rem; }
.alignwide{ margin-left:auto; margin-right:auto; max-width:1200px; }
.alignfull{ width:100vw; margin-left:50%; transform:translateX(-50%); }
input, textarea { width:100%; padding:.65rem .75rem; border:1px solid #e5e7eb; border-radius:.6rem; font:inherit; }
input:focus, textarea:focus{ outline:2px solid #c7d2fe; border-color:#c7d2fe; }
.badge { display:inline-flex; align-items:center; gap:.35rem; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; font-size:.8rem; padding:.25rem .55rem; border-radius:999px; }
.post-tags { display:flex; gap:.5rem; flex-wrap:wrap; }