/*
Theme Name: RiverStyle
Theme URI: https://example.com
Author: BusinessToMark
Description: A magazine-river WordPress theme - full post previews (breadcrumb, title, deck, author byline with Follow button, featured image with caption, excerpt) stacked on the homepage, a Popular-in-category widget inserted after the first post, and a sticky sidebar with Latest News Today and Trending Now. Fully portable - no site name or category is hardcoded; set your own nav menu and spotlight category from the Customizer.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: riverstyle
*/

:root{
  --bi-black:#000;
  --bi-white:#fff;
  --bi-gray:#767676;
  --bi-border:#e2e2e2;
  --bi-accent:#0072d6;
  --bi-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--bi-font);color:var(--bi-black);background:#fff;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
.container{max-width:1180px;margin:0 auto;padding:0 20px;}

/* ---------- Top utility bar ---------- */
.bi-utility{background:#000;color:#fff;font-size:11px;letter-spacing:.02em;}
.bi-utility .container{display:flex;justify-content:space-between;align-items:center;height:32px;}
.bi-utility a{opacity:.85;margin-right:16px;font-weight:600;text-transform:uppercase;font-size:10.5px;}
.bi-utility a:hover{opacity:1;}

/* ---------- Main header ---------- */
.bi-header{border-bottom:1px solid var(--bi-border);}
.bi-header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.bi-hamburger{font-size:22px;background:none;border:none;cursor:pointer;padding:0;width:40px;}
.bi-logo{font-size:26px;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;}
.bi-logo img{max-height:40px;display:block;}
.bi-header-right{display:flex;align-items:center;gap:18px;}
.bi-icon-btn{background:none;border:none;font-size:18px;cursor:pointer;}
.bi-subscribe{background:var(--bi-black);color:#fff;font-size:12px;font-weight:800;padding:9px 18px;border-radius:2px;text-transform:uppercase;letter-spacing:.02em;border:none;cursor:pointer;}

/* ---------- Section nav (from WP menu) ---------- */
.bi-nav{border-bottom:1px solid var(--bi-border);overflow-x:auto;}
.bi-nav-list{display:flex;gap:26px;list-style:none;margin:0;padding:0;white-space:nowrap;}
.bi-nav-list li a{display:block;padding:13px 0;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;border-bottom:2px solid transparent;}
.bi-nav-list li a:hover, .bi-nav-list li.current-menu-item a{border-bottom-color:var(--bi-black);}

/* ---------- Search bar, always visible directly under the logo ---------- */
.bi-search-row{border-bottom:1px solid var(--bi-border);padding:14px 0;}
.bi-search-row form{display:flex;max-width:480px;margin:0 auto;border:1px solid var(--bi-border);border-radius:2px;overflow:hidden;}
.bi-search-row input{flex:1;border:none;padding:10px 14px;font-size:14px;outline:none;}
.bi-search-row button{background:var(--bi-black);color:#fff;border:none;padding:0 18px;cursor:pointer;font-size:15px;}

/* ---------- Off-canvas drawer (mobile menu) ---------- */
.bi-drawer{position:fixed;top:0;left:-320px;width:300px;height:100%;background:#fff;box-shadow:2px 0 12px rgba(0,0,0,.15);z-index:999;transition:left .25s ease;overflow-y:auto;padding:20px;}
.bi-drawer.open{left:0;}
.bi-drawer ul{list-style:none;margin:0;padding:0;}
.bi-drawer li a{display:block;padding:12px 0;border-bottom:1px solid var(--bi-border);font-weight:700;font-size:15px;}
.bi-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:998;}
.bi-drawer-overlay.open{display:block;}

/* ---------- Homepage layout ---------- */
.bi-layout{display:grid;grid-template-columns:2.3fr 1fr;gap:36px;margin:30px 0 50px;align-items:start;}

/* Dense list: title LEFT, image RIGHT */
.bi-list{border-top:1px solid var(--bi-border);}
.bi-list-item{display:flex;flex-direction:row-reverse;gap:16px;padding:18px 0;border-bottom:1px solid var(--bi-border);align-items:flex-start;text-decoration:none;color:inherit;}
.bi-list-thumb{width:220px;height:150px;object-fit:cover;flex-shrink:0;}
.bi-list-body{flex:1;min-width:0;}
.bi-list-body .bi-tag{color:var(--bi-accent);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.bi-list-body h3{font-size:17px;line-height:1.3;font-weight:800;margin:4px 0 6px;letter-spacing:-.005em;}
.bi-list-item:hover h3{text-decoration:underline;}
.bi-list-body .bi-dek{font-size:13.5px;color:#4d4d4d;line-height:1.45;margin:0 0 6px;}
.bi-list-body .bi-byline-sm{font-size:11.5px;color:var(--bi-gray);}

/* Sidebar */
.bi-sidebar-block{margin-bottom:32px;}
.bi-sidebar-title{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid var(--bi-black);padding-bottom:8px;margin-bottom:4px;}
.bi-trending-item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--bi-border);text-decoration:none;color:inherit;}
.bi-trending-num{font-size:26px;font-weight:900;color:#d0d0d0;line-height:1;flex-shrink:0;width:28px;}
.bi-trending-body h4{font-size:14.5px;font-weight:800;line-height:1.32;margin:0;}
.bi-trending-item:hover h4{text-decoration:underline;}

.bi-ad-slot{background:#f5f5f5;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;min-height:250px;color:#999;font-size:13px;text-align:center;margin-bottom:24px;padding:10px;}

/* ---------- Single article ---------- */
.bi-breadcrumb{font-size:12.5px;color:var(--bi-gray);margin:20px 0 6px;}
.bi-breadcrumb a{color:var(--bi-gray);}
.bi-breadcrumb a:hover{color:var(--bi-accent);}
.bi-article-header{padding-bottom:18px;border-bottom:1px solid var(--bi-border);margin-bottom:20px;}
.bi-article-header .bi-tag{color:var(--bi-accent);font-size:12px;font-weight:800;text-transform:uppercase;}
.bi-article-header h1{font-size:34px;line-height:1.18;font-weight:800;margin:8px 0 12px;letter-spacing:-.01em;}
.bi-article-byline{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--bi-gray);}
.bi-article-byline img{width:34px;height:34px;border-radius:50%;}
.bi-article-thumb{width:100%;height:460px;object-fit:cover;margin-bottom:22px;border-radius:2px;}
.bi-article-body{font-size:17px;line-height:1.7;color:#1a1a1a;max-width:760px;}
.bi-article-body p{margin:0 0 22px;}
.bi-article-body h2{font-size:24px;font-weight:800;margin:34px 0 14px;}
.bi-article-body a{color:var(--bi-accent);text-decoration:underline;}

/* Related articles — infinite scroll, 2-col */
.bi-related{margin-top:40px;padding-top:24px;border-top:3px solid var(--bi-black);}
.bi-related-title{font-size:20px;font-weight:900;text-transform:uppercase;margin-bottom:18px;}
.bi-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.bi-related-card{display:block;text-decoration:none;color:inherit;}
.bi-related-card img{width:100%;height:190px;object-fit:cover;margin-bottom:10px;display:block;}
.bi-related-card .bi-tag{color:var(--bi-accent);font-size:11px;font-weight:800;text-transform:uppercase;}
.bi-related-card h4{font-size:16px;font-weight:800;line-height:1.3;margin:5px 0 6px;}
.bi-related-card:hover h4{text-decoration:underline;}
.bi-related-card p{font-size:13px;color:#4d4d4d;line-height:1.45;margin:0;}
.bi-related-status{grid-column:1/-1;text-align:center;padding:16px 0;font-size:13px;color:#999;}

/* ---------- Category / archive pages ---------- */
.bi-cat-title-bar{padding:26px 0 16px;border-bottom:2px solid var(--bi-black);margin-bottom:10px;}
.bi-cat-title-bar h1{font-size:30px;font-weight:900;text-transform:uppercase;margin:0;}

.it-thumb-placeholder{background:linear-gradient(135deg,#dfe3e8,#c7ccd3);}

/* ---------- Top module: big hero (left) + matched-height story list (right) ---------- */
.bi-top-module{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;margin:26px 0 44px;align-items:stretch;}
.bi-hero{display:flex;flex-direction:column;}
.bi-hero-img{width:100%;flex:1;min-height:560px;height:100%;object-fit:cover;display:block;margin-bottom:16px;border-radius:2px;}
.bi-hero .bi-tag{color:var(--bi-accent);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.bi-hero h1{font-size:26px;line-height:1.22;font-weight:800;margin:8px 0 0;letter-spacing:-.005em;}

.bi-top-list{display:flex;flex-direction:column;height:100%;}
.bi-top-list-item{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px dotted var(--bi-border);flex:1;align-items:flex-start;}
.bi-top-list-item:first-child{padding-top:0;}
.bi-top-list-item:last-child{border-bottom:0;}
.bi-top-list-body{flex:1;min-width:0;}
.bi-top-list-body h4{font-size:15.5px;line-height:1.3;font-weight:800;margin:0 0 8px;}
.bi-top-list-item:hover h4{text-decoration:underline;}
.bi-top-list-meta{font-size:11.5px;color:var(--bi-gray);text-transform:uppercase;font-weight:700;}
.bi-top-list-thumb{width:110px;height:78px;object-fit:cover;flex-shrink:0;}
.bi-exclusive{display:inline-block;background:var(--bi-accent);color:#fff;font-size:10.5px;font-weight:800;text-transform:uppercase;padding:3px 8px;margin-bottom:8px;}

/* ---------- Footer ---------- */
.bi-footer{background:#f7f7f7;border-top:1px solid var(--bi-border);padding:40px 0;margin-top:40px;}
.bi-footer-inner{text-align:center;}
.bi-footer-tagline{font-size:13px;color:var(--bi-gray);margin:8px 0;}
.bi-footer-bottom{font-size:12px;color:#999;margin-top:16px;}

@media(max-width:900px){
  .bi-layout{grid-template-columns:1fr;}
  .bi-top-module{grid-template-columns:1fr;}
  .bi-hero h1{font-size:22px;}
  .bi-hero-img{min-height:260px;height:260px;}
  .bi-nav-list{gap:18px;}
  .bi-list-item{flex-direction:column;}
  .bi-list-thumb{width:100%;height:220px;}
  .bi-related-grid{grid-template-columns:1fr;}
  .bi-article-thumb{height:260px;}
  .bi-article-header h1{font-size:26px;}
}

/* ---- Magazine river homepage layout ---- */
.bi-river-layout{display:grid;grid-template-columns:2.3fr 1fr;gap:40px;align-items:start;max-width:1180px;margin:0 auto;}
.bi-river-item{padding-bottom:30px;margin-bottom:30px;border-bottom:1px solid var(--bi-border);}
.bi-river-breadcrumb{font-size:12.5px;color:var(--bi-gray);margin-bottom:10px;}
.bi-river-breadcrumb a:hover{color:var(--bi-accent);}
.bi-river-item h1{font-size:26px;font-weight:800;line-height:1.25;margin:0 0 10px;}
.bi-river-item h1 a{color:inherit;}
.bi-river-item h1 a:hover{color:var(--bi-accent);}
.bi-river-deck{font-size:15px;color:#444;line-height:1.5;margin-bottom:14px;}
.bi-river-byline{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.bi-river-byline img,.bi-river-avatar{width:38px;height:38px;border-radius:50%;background:#ccc;flex-shrink:0;}
.bi-river-byline-name{font-size:13.5px;font-weight:800;}
.bi-river-follow{border:1px solid var(--bi-accent);color:var(--bi-accent);background:#fff;font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:14px;margin-left:6px;}
.bi-river-byline-meta{font-size:12px;color:var(--bi-gray);}
.bi-river-img{width:100%;height:380px;object-fit:cover;border-radius:4px;display:block;position:relative;}
.bi-river-img-wrap{position:relative;}
.bi-river-cat-badge{position:absolute;top:12px;left:12px;background:var(--bi-accent);color:#fff;font-size:11px;font-weight:800;padding:4px 10px;border-radius:2px;text-transform:uppercase;}
.bi-river-caption{font-size:12.5px;color:var(--bi-gray);font-style:italic;margin:8px 0 14px;}
.bi-river-excerpt{font-size:15.5px;color:#222;line-height:1.6;}

.bi-sidebar-title{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;border-bottom:2px solid var(--bi-accent);padding-bottom:10px;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.bi-sidebar-title::before{content:"";width:4px;height:16px;background:var(--bi-accent);display:inline-block;}
.bi-sidebar-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--bi-border);}
.bi-sidebar-thumb{width:70px;height:56px;object-fit:cover;border-radius:4px;flex-shrink:0;}
.bi-sidebar-item h5{font-size:13.5px;font-weight:700;line-height:1.32;margin:0 0 4px;}
.bi-sidebar-item:hover h5{color:var(--bi-accent);}
.bi-sidebar-item span{font-size:11.5px;color:var(--bi-gray);}
.bi-sidebar-block{margin-bottom:34px;}

/* ---- Popular widget row (inserted between river posts) ---- */
.bi-popular-widget{background:#f7f8fa;border-radius:8px;padding:20px 22px;margin:0 0 30px;}
.bi-popular-widget-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-bottom:16px;}
.bi-popular-widget-title::before{content:"";width:4px;height:16px;background:var(--bi-accent);display:inline-block;}
.bi-popular-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.bi-popular-card{display:block;}
.bi-popular-card .imgbox{width:100%;height:110px;object-fit:cover;border-radius:6px;margin-bottom:8px;position:relative;}
.bi-popular-cat-tag{position:absolute;top:8px;left:8px;background:var(--bi-accent);color:#fff;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:2px;text-transform:uppercase;}
.bi-popular-card h5{font-size:13px;font-weight:700;line-height:1.3;margin:0;}
.bi-popular-card:hover h5{color:var(--bi-accent);}

/* ---- Sticky sidebar: stays in view while the main feed scrolls ---- */
.bi-sidebar-sticky{position:sticky;top:20px;}

/* ---- Top nav: horizontal row, no bullets ---- */
.rs-nav-list{display:flex;flex-wrap:wrap;gap:22px;list-style:none;margin:0;padding:0;}
.rs-nav-list li{list-style:none;margin:0;padding:0;}
.rs-nav-list a{font-size:14px;font-weight:700;color:#232a31;white-space:nowrap;}
.rs-nav-list a:hover{color:var(--bi-accent);}

/* ---- Logo: two-tone Yahoo-style treatment ---- */
.rs-logo{font-size:24px;font-weight:800;letter-spacing:-.01em;}
.rs-logo span{color:var(--bi-accent);}

/* ---- Related Posts: shown below the article body ---- */
.bi-related-block{margin-top:36px;padding-top:24px;border-top:2px solid #000;}
.bi-related-title{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;margin-bottom:18px;}
.bi-related-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;}
.bi-related-card{display:block;}
.bi-related-card .imgbox{width:100%;height:130px;object-fit:cover;border-radius:6px;margin-bottom:10px;}
.bi-related-card .tag{color:var(--bi-accent);font-size:10.5px;font-weight:800;text-transform:uppercase;display:block;margin-bottom:4px;}
.bi-related-card h5{font-size:13.5px;font-weight:700;line-height:1.32;margin:0;}
.bi-related-card:hover h5{color:var(--bi-accent);}
@media(max-width:700px){
  .bi-related-grid{grid-template-columns:1fr;}
}