/*
Theme Name: TWS Minimal New
Theme URI: https://thinkwithsawon.com
Author: Sawon + ChatGPT
Description: Minimal red/white theme with square hero, category grids, share buttons, responsive menu.
Version: 2.7.0
Text Domain: tws-minimal-new
*/

:root{--red:#E10600;--text:#111;--muted:#6b7280;--bg:#fff;--card:#fafafa;--border:#efefef}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}

/* Layout */
.site{display:flex;flex-direction:column;min-height:100dvh}
header.site-header{position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--border);z-index:10}
.container{max-width:1120px;margin:0 auto;padding:14px 16px}

/* Header + Menu */
.nav{display:flex;align-items:center;gap:16px}
.logo{font-weight:800;letter-spacing:.4px}
.logo .tws{display:inline-block;padding:6px 10px;border:1px solid var(--border);border-radius:8px;color:var(--red);text-decoration:none}
.spacer{flex:1}
.menu{display:flex;gap:8px;align-items:center;list-style:none;margin:0;padding:0}
.menu a{font-weight:200;text-decoration:none;color:var(--text);padding:8px 10px;border-radius:8px;display:block}
.menu a:hover,.menu .current-menu-item>a{color:var(--red)}

/* Mobile menu */
.menu-toggle{display:none;appearance:none;border:1px solid var(--border);background:#fff;padding:6px 10px;border-radius:8px;font-size:14px}
@media (max-width: 720px){
  .menu{display:none;position:absolute;top:56px;right:16px;background:#fff;border:1px solid var(--border);border-radius:12px;flex-direction:column;min-width:180px;box-shadow:0 8px 24px rgba(0,0,0,.06);padding:8px}
  .menu a{padding:10px 12px}
  .menu.open{display:flex}
  .menu-toggle{display:inline-block}
}

/* Section heading on non-home pages */
.section-heading{font-size:18px;font-weight:600;color:var(--red);margin:16px 20px;text-align:center}

/* Home hero (text left, square image right) */
.hero{position:relative;display:block;width:100%;padding:0}
.hero-inner{max-width:1120px;margin:0 auto;padding:28px 20px;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:60vh}
.hero-text h1{margin:0;font-size:calc(clamp(36px,6vw,72px)*1.3);line-height:1.1;color:var(--red);display:flex;flex-direction:column;text-align:left}
.hero-text h1 span{display:block}
.hero-banner{margin:0;flex:0 0 auto;width:min(38vw,440px);aspect-ratio:1/1;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#f3f4f6;display:flex;align-items:center;justify-content:center}
.hero-banner img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width: 720px){
  .hero-inner{flex-direction:column;text-align:center}
  .hero-text h1{text-align:center}
  .hero-banner{width:min(68vw,420px)}
}

/* Grids */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:20px 16px 48px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease, box-shadow .15s ease;position:relative}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(17,17,17,.06)}
.thumb{width:100%;aspect-ratio:16/9;display:block;background:#f3f4f6;border-bottom:1px solid var(--border);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.card h3{margin:0;color:var(--red);font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px}
.chip{font-size:11px;color:var(--red);background:#fff;border:1px solid var(--border);padding:4px 8px;border-radius:999px;display:inline-block}
@media (max-width: 900px){ .grid{grid-template-columns:1fr 1fr} }
@media (max-width: 620px){ .grid{grid-template-columns:1fr} }

/* Single Post */
.post{padding:0 16px 48px}
.post .heroimg{width:100%;max-width:1120px;margin:16px auto 0;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.post .heroimg img{width:100%;display:block;height:auto}
.post .wrap{max-width:760px;margin:0 auto}
.post h1{font-size:clamp(26px,4.5vw,46px);line-height:1.1;color:var(--red);margin:16px 0 8px}
.post .meta{color:var(--muted);font-size:14px;margin-bottom:16px}
.post .content{color:var(--text);font-size:18px;line-height:1.65}
.post .back{display:inline-block;margin:14px 0;color:var(--red);text-decoration:none;border-bottom:1px solid var(--red)}

/* Share buttons */
.share-buttons{margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.share-buttons a,.share-buttons button{padding:8px 14px;border:1px solid var(--red);border-radius:6px;color:var(--red);background:#fff;text-decoration:none;cursor:pointer}
.share-buttons a:hover,.share-buttons button:hover{opacity:.85}

/* Footer */
footer.site-footer{margin-top:auto;border-top:1px solid var(--border)}
footer.site-footer .container{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;color:var(--muted);font-size:14px}