/*
Theme Name: BusinessToMark Hub
Theme URI: https://www.businesstomark.com
Author: BusinessToMark
Description: A dedicated theme for businesstomark.com — homepage leads with the latest Business story, a 4-item "elsewhere on the site" side list, and a "Latest in Business" feed underneath that auto-loads posts from the last 7 days as you scroll. Category pages, single posts, and author pages all included.
Version: 1.0
*/

:root{
  --id-blue:#0057c7;
  --id-black:#111111;
  --id-border:#e5e5e5;
  --id-muted:#767676;
  --id-bg:#ffffff;
}

*{box-sizing:border-box;}
body{margin:0;background:var(--id-bg);color:var(--id-black);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;line-height:1.6;}
.id-container{max-width:1160px;margin:0 auto;padding:0 24px;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;}

/* ---------- Category bar: always visible, above the logo ---------- */
.id-category-bar{background:#0e1420;}
.id-category-bar .id-cat-bar-list{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:0;padding:0;}
.id-category-bar .id-cat-bar-list li{border:none;}
.id-category-bar .id-cat-bar-list a{display:block;padding:12px 18px;font-size:12.5px;font-weight:700;color:#e8ecf3;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;}
.id-category-bar .id-cat-bar-list a:hover{color:#fff;background:rgba(255,255,255,.08);}

/* ---------- Header: hamburger | centered logo | search below ---------- */
.id-header{background:#fff;border-bottom:1px solid var(--id-border);padding:16px 0 0;}
.id-header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;}
.id-header-inner p{margin:0;}
.id-header-inner .custom-logo-link{display:block;}
.id-hamburger{background:none;border:none;font-size:22px;cursor:pointer;color:var(--id-black);justify-self:start;}
.id-logo{font-size:24px;font-weight:900;letter-spacing:-.01em;text-decoration:none;color:var(--id-black);text-align:center;grid-column:2;}
.id-logo img{max-height:46px;width:auto;display:block;}
.id-search-row{max-width:520px;margin:12px auto 8px;padding:0 24px;}.id-search-form{display:flex;border:1px solid var(--id-border);}
.id-search-form input{flex:1;border:none;padding:10px 14px;font-size:14px;}
.id-search-form button{background:none;border:none;padding:0 16px;cursor:pointer;font-size:16px;color:var(--id-blue);}

/* ---------- Off-canvas drawer: utility links only ---------- */
.id-nav-drawer{position:fixed;top:0;left:-320px;width:300px;height:100%;background:#fff;box-shadow:2px 0 12px rgba(0,0,0,.15);transition:left .25s ease;z-index:1000;overflow-y:auto;}
.id-nav-drawer.open{left:0;}
.id-nav-drawer ul{list-style:none;margin:0;padding:60px 0 20px;}
.id-nav-drawer li{border-bottom:1px solid var(--id-border);}
.id-nav-drawer a{display:block;padding:14px 24px;font-size:15px;font-weight:600;color:var(--id-black);text-decoration:none;}
.id-nav-drawer a:hover{color:var(--id-blue);}

/* ---------- Homepage: hero + 4-item side list ---------- */
.id-cat-header-simple{padding:0 0 12px;border-bottom:2px solid var(--id-black);margin-bottom:24px;}
.id-cat-header-simple h1{font-size:30px;font-weight:900;color:var(--id-black);margin:0;line-height:1;}
.id-section-subhead{font-size:20px;font-weight:800;margin:32px 0 16px;color:var(--id-black);border-bottom:1px solid var(--id-border);padding-bottom:10px;}

.id-cat-hero-grid{display:grid;grid-template-columns:1.35fr 1.1fr;gap:32px;padding:20px 0 10px;}
.id-cat-hero-main{text-decoration:none;color:inherit;display:block;position:relative;}
.id-cat-hero-main img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.id-hero-save-btn{position:absolute;top:12px;left:12px;background:#e60023;color:#fff;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700;}
.id-hero-caption{margin-top:14px;}
.id-hero-caption .id-cat-tag{display:block;font-size:11px;font-weight:800;color:var(--id-blue);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
.id-hero-caption h2{font-size:26px;color:var(--id-black);font-weight:800;}
.id-hero-caption h2 a{text-decoration:none;color:inherit;}
.id-hero-caption h2 a:hover{color:var(--id-blue);}
.id-cat-hero-side{display:flex;flex-direction:column;}
.id-related-item{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid var(--id-border);}
.id-related-item:last-child{border-bottom:none;}
.id-related-item-thumb{flex-shrink:0;display:block;}
.id-related-item img{width:200px;height:145px;object-fit:cover;flex-shrink:0;}
.id-related-item .id-cat-tag{display:block;font-size:10.5px;font-weight:800;color:var(--id-blue);text-transform:uppercase;margin-bottom:3px;}
.id-related-item h4{font-size:13.5px;font-weight:700;line-height:1.35;color:var(--id-black);}
.id-related-item-excerpt{font-size:12px;color:var(--id-muted);margin:6px 0 0;line-height:1.4;}

/* ---------- Post rows (Latest list) ---------- */
.id-post-row{display:flex;justify-content:space-between;gap:22px;padding:18px 0;border-bottom:1px dotted var(--id-border);}
.id-post-row-thumb{position:relative;display:block;flex-shrink:0;}
.id-post-row img{width:340px;height:220px;object-fit:cover;flex-shrink:0;}
.id-row-save-btn{font-size:11px;padding:5px 11px;}
.id-post-row-body{flex:1;}
.id-post-row-body .id-cat-tag{font-size:11px;font-weight:800;color:var(--id-blue);text-transform:uppercase;letter-spacing:.02em;}
.id-post-row-body h3{font-size:18px;margin:6px 0;}
.id-post-row-body h3 a{text-decoration:none;color:var(--id-black);}
.id-post-row-body h3 a:hover{color:var(--id-blue);}
.id-post-row-body p{font-size:14px;color:var(--id-muted);margin:0 0 6px;}
.id-post-row-body .id-meta{font-size:12px;color:#999;}

/* ---------- Footer ---------- */
.id-footer{background:#fafafa;border-top:1px solid var(--id-border);margin-top:50px;padding:36px 0 24px;}
.id-footer .id-container{text-align:center;font-size:13px;color:var(--id-muted);}

@media(max-width:820px){
	.id-cat-hero-grid{grid-template-columns:1fr;}
	.id-post-row{flex-direction:column;}
	.id-post-row img{width:100%;height:180px;}
}

/* ---------- Homepage layout: post list + sidebar (ads + category counts) ---------- */
.id-home-layout{display:grid;grid-template-columns:2.2fr 1fr;gap:36px;align-items:start;}
.id-sidebar{display:flex;flex-direction:column;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;}
.id-ad-slot{border:1px dashed #ccc;padding:30px 16px;text-align:center;color:var(--id-muted);font-size:12px;margin-bottom:24px;}
.id-widget{border:1px solid var(--id-border);}
.id-widget h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;background:#f7f7f7;padding:12px 16px;margin:0;border-bottom:1px solid var(--id-border);}
.id-cat-count-row{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--id-border);font-size:14px;}
.id-cat-count-row:last-child{border-bottom:none;}
.id-cat-count-row a{text-decoration:none;color:var(--id-black);font-weight:600;}
.id-cat-count-row a:hover{color:var(--id-blue);}
.id-cat-count{color:var(--id-muted);font-size:13px;}

@media(max-width:820px){
	.id-home-layout{grid-template-columns:1fr;}
}

/* ---------- Single article: content + sidebar, related articles below ---------- */
.id-single-layout{display:grid;grid-template-columns:2.2fr 1fr;gap:40px;align-items:start;max-width:1160px;}
.id-related-section{margin-top:44px;padding-top:20px;border-top:2px solid var(--id-black);}

@media(max-width:900px){
	.id-single-layout{grid-template-columns:1fr;}
}
