/*
Theme Name: Tech Binu
Theme URI: https://techbinu.com
Author: Tech Binu
Author URI: https://techbinu.com
Description: A distinctive bento-grid magazine theme for Tech Binu — covering Tech News, Gadget Reviews, Software & App Reviews, and Tips & Tricks. Lightweight, AdSense-friendly, mobile-first, built around an asymmetric layout system instead of a generic grid.
Version: 2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: techbinu
Tags: blog, news, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   TECH BINU 2.0 — DESIGN TOKENS
   ========================================================= */
:root{
  --tb-blue: #0d6efd;
  --tb-blue-deep: #063e9c;
  --tb-blue-dark: #1a3fa0;
  --tb-blue-light: #eaf1ff;
  --tb-black: #12151c;
  --tb-ink: #1b1f27;
  --tb-white: #ffffff;
  --tb-cream: #fbfbfd;
  --tb-grey-bg: #f2f4fa;
  --tb-grey-border: #e6e8ef;
  --tb-text: #2a2e37;
  --tb-text-light: #6b7280;

  --tb-cat-technews: #1f4e8c;
  --tb-cat-technews-bg: #dce6f5;
  --tb-cat-gadgets: #c0392b;
  --tb-cat-gadgets-bg: #fadbd8;
  --tb-cat-software: #1e8449;
  --tb-cat-software-bg: #d5f5e3;
  --tb-cat-tips: #b9770e;
  --tb-cat-tips-bg: #fdebd0;

  --tb-radius-sm: 8px;
  --tb-radius: 16px;
  --tb-radius-lg: 26px;
  --tb-shadow: 0 4px 16px rgba(18,21,28,0.06);
  --tb-shadow-hover: 0 14px 34px rgba(18,21,28,0.14);
}

/* =========================================================
   RESET & BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
body{
  margin:0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--tb-text);
  background: var(--tb-cream);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  max-width: 100%;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--tb-blue); text-decoration:none; transition: color .15s ease, transform .15s ease; }
a:hover{ color: var(--tb-blue-dark); }
h1,h2,h3,h4,h5,h6{
  font-family:'Poppins', 'Inter', sans-serif;
  font-weight:700;
  color: var(--tb-black);
  line-height:1.25;
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
}
ul{ padding-left: 1.2em; }
.container{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}
.screen-reader-text{ position:absolute; left:-9999px; }

/* =========================================================
   TOP BAR — angled edge for uniqueness
   ========================================================= */
.tb-topbar{
  background: var(--tb-black);
  color: #cfd3db;
  font-size: 13px;
  position:relative;
}
.tb-topbar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-8px;
  height:8px;
  background: var(--tb-black);
  clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
}
.tb-topbar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:7px;
  padding-bottom:7px;
}
.tb-topbar a{ color:#cfd3db; }
.tb-topbar a:hover{ color: var(--tb-white); }
.tb-social a{ margin-left:14px; }

/* =========================================================
   HEADER — logo with slanted accent underline
   ========================================================= */
.tb-header{
  background: var(--tb-white);
  border-bottom: 1px solid var(--tb-grey-border);
  position: sticky;
  top: 0;
  z-index: 999;
  margin-top: 8px;
}
.tb-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
}
.tb-logo{ display:flex; align-items:center; position:relative; }
.tb-logo img{ height: 48px; width:auto; }
.tb-logo .site-title{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size: 22px;
  margin-left:10px;
  color: var(--tb-black);
}
.tb-logo .site-title span{ color: var(--tb-blue); }

.tb-primary-nav ul{
  list-style:none;
  display:flex;
  gap: 6px;
  margin:0; padding:0;
}
.tb-primary-nav a{
  color: var(--tb-black);
  font-weight:600;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.4px;
  padding: 8px 14px;
  border-radius: 20px;
  display:inline-block;
}
.tb-primary-nav a:hover{ color: var(--tb-blue); background: var(--tb-grey-bg); }

.tb-header-actions{ display:flex; align-items:center; gap:10px; }
.tb-search-toggle, .tb-menu-toggle{
  background: var(--tb-grey-bg);
  border:none; cursor:pointer;
  font-size: 18px; color: var(--tb-black);
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.tb-search-toggle:hover, .tb-menu-toggle:hover{ background: var(--tb-blue); color:#fff; }
.tb-menu-toggle{ display:none; }

.tb-search-box{
  display:none;
  padding: 14px 0;
  border-top: 1px solid var(--tb-grey-border);
}
.tb-search-box.active{ display:block; }
.tb-search-box form{ display:flex; }
.tb-search-box input[type="search"]{
  flex:1;
  padding:12px 16px;
  border:1px solid var(--tb-grey-border);
  border-radius: 30px 0 0 30px;
  font-size:15px;
}
.tb-search-box button{
  padding:12px 22px;
  background: var(--tb-blue);
  color:#fff;
  border:none;
  border-radius: 0 30px 30px 0;
  cursor:pointer;
  font-weight:600;
}

@media(max-width: 900px){
  .tb-primary-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0; right:0;
    background:#fff;
    border-bottom:1px solid var(--tb-grey-border);
    box-shadow: var(--tb-shadow);
  }
  .tb-primary-nav.active{ display:block; }
  .tb-primary-nav ul{ flex-direction:column; gap:0; padding: 10px 20px; }
  .tb-primary-nav li{ border-bottom:1px solid var(--tb-grey-border); }
  .tb-primary-nav a{ display:block; padding:12px 6px; border-radius:0; }
  .tb-menu-toggle{ display:flex; }
}

/* =========================================================
   CATEGORY BADGES — pill with dot marker (unique from flat pill)
   ========================================================= */
.tb-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding: 5px 12px 5px 8px;
  border-radius: 20px;
  margin-bottom:10px;
}
.tb-badge::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background: currentColor;
  display:inline-block;
}
.tb-badge-technews, .cat-tech-news .tb-badge{ background:var(--tb-cat-technews-bg); color:var(--tb-cat-technews); }
.tb-badge-gadget-reviews, .cat-gadget-reviews .tb-badge{ background:var(--tb-cat-gadgets-bg); color:var(--tb-cat-gadgets); }
.tb-badge-software-app-reviews, .cat-software-app-reviews .tb-badge{ background:var(--tb-cat-software-bg); color:var(--tb-cat-software); }
.tb-badge-tips-tricks, .cat-tips-tricks .tb-badge{ background:var(--tb-cat-tips-bg); color:var(--tb-cat-tips); }
.tb-badge-default{ background:#eef1f7; color:var(--tb-blue-dark); }

/* =========================================================
   HERO — BENTO GRID (signature layout: 1 big + 2 stacked + 2 small)
   ========================================================= */
.tb-hero{
  background:
    radial-gradient(circle at 100% 0%, rgba(13,110,253,0.10), transparent 45%),
    var(--tb-black);
  padding: 40px 0 46px;
  position:relative;
  overflow:hidden;
}
.tb-hero::before{
  content:"";
  position:absolute;
  top:-60px; right:-60px;
  width:280px; height:280px;
  background: var(--tb-blue);
  opacity:.18;
  border-radius:50%;
  filter: blur(10px);
}
.tb-hero-eyebrow{
  color: var(--tb-blue);
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  margin-bottom:14px;
  display:block;
  position:relative;
  z-index:1;
}
.tb-bento{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
  position:relative;
  z-index:1;
}
.tb-bento-lead{
  grid-row: span 2;
  border-radius: var(--tb-radius-lg);
  overflow:hidden;
  position:relative;
  min-height: 420px;
  box-shadow: var(--tb-shadow-hover);
}
.tb-bento-lead img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}
.tb-bento-lead .tb-bento-overlay{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 10%, rgba(0,0,0,0.1) 100%);
  padding: 30px 26px 24px;
}
.tb-bento-lead h2{ color:#fff; font-size: 27px; margin-bottom:8px; }
.tb-bento-lead h2 a{ color:#fff; }
.tb-bento-lead .tb-meta{ color:#c9cede; }

.tb-bento-tile{
  border-radius: var(--tb-radius);
  overflow:hidden;
  position:relative;
  min-height: 195px;
  box-shadow: var(--tb-shadow);
}
.tb-bento-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tb-bento-tile .tb-bento-overlay{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 20%, rgba(0,0,0,0) 100%);
  padding: 16px 16px 14px;
}
.tb-bento-tile h3{ color:#fff; font-size:15px; margin-bottom:4px; }
.tb-bento-tile h3 a{ color:#fff; }
.tb-bento-tile .tb-meta{ color:#c9cede; font-size:11px; }

@media(max-width:980px){
  .tb-bento{ grid-template-columns: 1fr 1fr; }
  .tb-bento-lead{ grid-column: span 2; grid-row: auto; min-height:320px; }
}
@media(max-width:640px){
  .tb-bento{ grid-template-columns: 1fr; }
  .tb-bento-lead{ grid-column: auto; }
}

/* =========================================================
   CATEGORY STRIP — diagonal ribbon cards
   ========================================================= */
.tb-cat-strip{ padding: 34px 0 6px; }
.tb-cat-strip-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.tb-cat-card{
  position:relative;
  border-radius: var(--tb-radius);
  padding: 24px 20px;
  color:#fff;
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:16px;
  box-shadow: var(--tb-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  min-height:110px;
}
.tb-cat-card::before{
  content:"";
  position:absolute;
  top:-30px; right:-30px;
  width:100px; height:100px;
  background: rgba(255,255,255,0.14);
  border-radius:50%;
}
.tb-cat-card::after{
  content:"→";
  position:absolute;
  top:16px; right:18px;
  font-size:18px;
  opacity:.7;
}
.tb-cat-card:hover{ transform: translateY(-6px) rotate(-0.3deg); box-shadow: var(--tb-shadow-hover); color:#fff; }
.tb-cat-card.technews{ background: linear-gradient(135deg, var(--tb-cat-technews), #2f6fc4); }
.tb-cat-card.gadgets{ background: linear-gradient(135deg, var(--tb-cat-gadgets), #e5604f); }
.tb-cat-card.software{ background: linear-gradient(135deg, var(--tb-cat-software), #2fb86a); }
.tb-cat-card.tips{ background: linear-gradient(135deg, var(--tb-cat-tips), #dc9a30); }
@media(max-width:700px){ .tb-cat-strip-grid{ grid-template-columns:repeat(2,1fr);} }

/* =========================================================
   MAIN LAYOUT
   ========================================================= */
.tb-layout{
  display:grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 36px;
  padding: 44px 0;
}
@media(max-width:900px){
  .tb-layout{ grid-template-columns:1fr; }
}

/* Full-width layout — used on every page except the homepage,
   since the sidebar only appears on front-page.php */
.tb-layout-full{
  grid-template-columns: 1fr;
  max-width: 860px;
}
.tb-layout-full .tb-main{ width:100%; }


.tb-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 22px;
}
.tb-section-title h2{
  font-size:21px; margin:0;
  position:relative; padding-left:18px;
}
.tb-section-title h2::before{
  content:"";
  position:absolute; left:0; top:4px; bottom:4px;
  width:5px; background:var(--tb-blue); border-radius:3px;
}
.tb-section-title a{
  font-size:12.5px; font-weight:700; text-transform:uppercase;
  background: var(--tb-grey-bg);
  padding:6px 14px;
  border-radius:20px;
  letter-spacing:.3px;
}
.tb-section-title a:hover{ background:var(--tb-blue); color:#fff; }

/* Post grid — ASYMMETRIC: first card wide, rest narrow (unique from uniform grid) */
.tb-post-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 20px;
  margin-bottom: 40px;
}
.tb-post-grid .tb-card:first-child{
  grid-column: span 2;
}
.tb-post-grid .tb-card:first-child .tb-card-thumb img{ height: 240px; }
@media(max-width:900px){
  .tb-post-grid{ grid-template-columns: repeat(2,1fr); }
  .tb-post-grid .tb-card:first-child{ grid-column: span 2; }
}
@media(max-width:600px){
  .tb-post-grid{ grid-template-columns: 1fr; }
  .tb-post-grid .tb-card:first-child{ grid-column: span 1; }
  .tb-post-grid .tb-card:first-child .tb-card-thumb img{ height:190px; }
}

.tb-card{
  background:#fff;
  border-radius: var(--tb-radius);
  overflow:hidden;
  transition: box-shadow .18s ease, transform .18s ease;
  border: 1px solid var(--tb-grey-border);
}
.tb-card:hover{ box-shadow: var(--tb-shadow-hover); transform: translateY(-5px); }
.tb-card-thumb{ position:relative; }
.tb-card-thumb img{ width:100%; height:160px; object-fit:cover; }
.tb-card-thumb .tb-badge{
  position:absolute; top:12px; left:12px; margin:0;
  background:rgba(255,255,255,0.94);
}
.tb-card-body{ padding: 16px; }
.tb-card-body h3{ font-size:16px; margin:0 0 8px; }
.tb-card-body h3 a{ color:var(--tb-black); }
.tb-card-body h3 a:hover{ color:var(--tb-blue); }
.tb-card-excerpt{ font-size:13.5px; color:var(--tb-text-light); margin-bottom:10px; }
.tb-meta{ font-size:12px; color:var(--tb-text-light); }
.tb-meta a{ color: var(--tb-text-light); }

/* List style (archive) — card with color accent bar on left */
.tb-post-list-item{
  display:flex;
  gap:20px;
  padding: 22px;
  margin-bottom:18px;
  border-radius: var(--tb-radius);
  background:#fff;
  border: 1px solid var(--tb-grey-border);
  border-left: 5px solid var(--tb-blue);
  transition: box-shadow .18s ease, transform .18s ease;
}
.tb-post-list-item:hover{ box-shadow: var(--tb-shadow-hover); transform: translateX(4px); }
.tb-post-list-item img{ width:230px; height:150px; object-fit:cover; border-radius: var(--tb-radius-sm); flex-shrink:0; }
.tb-post-list-item h2{ font-size:20px; margin:0 0 8px; }
.tb-post-list-item h2 a{ color:var(--tb-black); }
.tb-post-list-item p{ color:var(--tb-text-light); font-size:14px; margin:0 0 8px; }
@media(max-width:600px){
  .tb-post-list-item{ flex-direction:column; border-left-width:5px; }
  .tb-post-list-item img{ width:100%; height:200px; }
}

/* Category-specific accent bars on archive list items */
.cat-tech-news .tb-post-list-item{ border-left-color: var(--tb-cat-technews); }
.cat-gadget-reviews .tb-post-list-item{ border-left-color: var(--tb-cat-gadgets); }
.cat-software-app-reviews .tb-post-list-item{ border-left-color: var(--tb-cat-software); }
.cat-tips-tricks .tb-post-list-item{ border-left-color: var(--tb-cat-tips); }

/* =========================================================
   SIDEBAR — pill-shaped ranking numbers, sticky
   ========================================================= */
.tb-sidebar{ position:sticky; top:100px; align-self:start; }
.tb-widget{
  background:#fff;
  border-radius: var(--tb-radius);
  padding: 22px;
  margin-bottom: 22px;
  border: 1px solid var(--tb-grey-border);
}
.tb-widget h2, .tb-widget .widgettitle{
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:16px;
  position:relative;
  padding-left:16px;
}
.tb-widget h2::before{
  content:"";
  position:absolute; left:0; top:3px; bottom:3px;
  width:4px; background:var(--tb-blue); border-radius:3px;
}
.tb-widget ul{ list-style:none; padding:0; margin:0; }
.tb-widget li{ padding: 10px 0; border-bottom:1px solid var(--tb-grey-bg); font-size:14px; }
.tb-widget li:last-child{ border-bottom:none; }

.tb-widget-trending h2{ color: var(--tb-blue); }
.tb-trending-item a{
  font-family:'Poppins',sans-serif;
  font-weight:600;
  font-size:14.5px;
  color: var(--tb-black);
  line-height:1.4;
}
.tb-trending-item a:hover{ color: var(--tb-blue); }

.tb-cat-list{ padding:0; margin:0; }
.tb-cat-list-item{ border-bottom:none !important; padding:0 !important; margin-bottom:10px; }
.tb-cat-list-item:last-child{ margin-bottom:0; }
.tb-cat-list-item a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--tb-grey-bg);
  font-family:'Poppins',sans-serif;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.2px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tb-cat-list-item a:hover{ transform: translateX(4px); box-shadow: var(--tb-shadow); }
.tb-cat-list-item a span{ color: var(--tb-black); }
.tb-cat-list-item a em{
  font-style:normal;
  background:#fff;
  color: var(--tb-text-light);
  font-size:11.5px;
  font-weight:700;
  padding:2px 9px;
  border-radius:20px;
}
.tb-cat-list-item.technews a{ border-left:4px solid var(--tb-cat-technews); }
.tb-cat-list-item.gadgets a{ border-left:4px solid var(--tb-cat-gadgets); }
.tb-cat-list-item.software a{ border-left:4px solid var(--tb-cat-software); }
.tb-cat-list-item.tips a{ border-left:4px solid var(--tb-cat-tips); }
.tb-cat-list-item.technews a span{ color: var(--tb-cat-technews); }
.tb-cat-list-item.gadgets a span{ color: var(--tb-cat-gadgets); }
.tb-cat-list-item.software a span{ color: var(--tb-cat-software); }
.tb-cat-list-item.tips a span{ color: var(--tb-cat-tips); }

.tb-trending-item{ display:flex; gap:12px; align-items:flex-start; }
.tb-trending-num{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size:15px;
  color: #fff;
  width:26px; height:26px;
  background: var(--tb-blue);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* =========================================================
   SINGLE POST
   ========================================================= */
.tb-single-header{ margin-bottom: 20px; }
.tb-single-header h1{ font-size: 32px; margin-bottom:10px; }
.tb-single-thumb img{ border-radius: var(--tb-radius-lg); margin-bottom: 26px; width:100%; max-height:460px; object-fit:cover; }
.tb-entry-content{ font-size:17px; max-width:100%; overflow-x:hidden; }
.tb-entry-content > *:first-child{ margin-top:0; }
.tb-entry-content table{ display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; }
.tb-entry-content iframe,
.tb-entry-content video,
.tb-entry-content embed,
.tb-entry-content object{ max-width:100%; }
.tb-entry-content pre{ max-width:100%; overflow-x:auto; white-space:pre-wrap; word-wrap:break-word; }
.tb-entry-content *{ max-width:100%; }
.tb-entry-content p{ margin: 0 0 18px; }
.tb-entry-content p:empty,
.tb-entry-content div:empty,
.tb-entry-content h1:empty, .tb-entry-content h2:empty, .tb-entry-content h3:empty,
.tb-entry-content h4:empty, .tb-entry-content h5:empty, .tb-entry-content h6:empty{ display:none; }
.tb-entry-content h2{
  font-size:23px; margin-top:40px; margin-bottom:18px;
  background: var(--tb-blue-light);
  border-left: 5px solid var(--tb-blue);
  padding: 12px 18px;
  border-radius: 0 var(--tb-radius-sm) var(--tb-radius-sm) 0;
}
.tb-entry-content h3{
  font-size:19px; margin-top:30px; margin-bottom:12px;
  padding-left: 14px;
  border-left: 3px solid var(--tb-blue);
}
.tb-entry-content > p:first-of-type{ font-size:19px; color:#374151; }
.tb-entry-content img{
  border-radius: var(--tb-radius-sm);
  margin: 18px auto;
  width:100% !important;
  height:auto !important;
  object-fit:cover;
  box-shadow: var(--tb-shadow);
}
.tb-entry-content figure{ margin:18px 0; }
.tb-entry-content figure img{ margin:0 auto; }
.tb-entry-content figcaption{
  text-align:center; font-size:13px; color:#6b7280; margin-top:8px;
}
.tb-entry-content table{
  display:block; max-width:100%; overflow-x:auto;
  border-collapse:collapse; margin:22px 0;
  border-radius: var(--tb-radius-sm); overflow:hidden;
  box-shadow: var(--tb-shadow);
}
.tb-entry-content table th{
  background: var(--tb-blue); color:#fff;
  padding:14px 18px; text-align:left; font-weight:700;
}
.tb-entry-content table td{
  padding:14px 18px; border-bottom:1px solid var(--tb-grey-bg);
}
.tb-entry-content table tr:nth-child(even) td{ background: var(--tb-grey-bg); }
.tb-entry-content blockquote{
  border-left: 4px solid var(--tb-blue);
  background: var(--tb-grey-bg);
  padding: 16px 22px;
  margin: 22px 0;
  font-style: italic;
  border-radius: 0 var(--tb-radius-sm) var(--tb-radius-sm) 0;
}
.tb-tags{ margin: 30px 0; }
.tb-tags a{
  display:inline-block;
  background: var(--tb-grey-bg);
  color: var(--tb-text);
  padding: 6px 14px;
  border-radius: 20px;
  font-size:12px;
  margin: 0 6px 6px 0;
  font-weight:600;
}
.tb-author-box{
  display:flex;
  gap:16px;
  background: var(--tb-grey-bg);
  border-radius: var(--tb-radius);
  padding:20px;
  margin: 30px 0;
  align-items:center;
}
.tb-author-box img{ border-radius:50%; width:64px; height:64px; }

/* =========================================================
   PAGINATION — pill style
   ========================================================= */
.tb-pagination{ display:flex; gap:8px; margin-top: 20px; flex-wrap:wrap; }
.tb-pagination a, .tb-pagination span{
  padding: 9px 16px;
  border:1px solid var(--tb-grey-border);
  border-radius: 30px;
  font-size:14px;
  color: var(--tb-text);
  font-weight:600;
}
.tb-pagination .current{ background: var(--tb-blue); color:#fff; border-color:var(--tb-blue); }
.tb-pagination a:hover{ border-color:var(--tb-blue); color:#fff; background:var(--tb-blue); }

/* =========================================================
   FOOTER — angled top edge to match topbar
   ========================================================= */
.tb-footer{
  background: var(--tb-black);
  color:#c6c9d2;
  margin-top: 40px;
  position:relative;
}
.tb-footer::before{
  content:"";
  position:absolute; top:-10px; left:0; right:0; height:10px;
  background: var(--tb-black);
  clip-path: polygon(0 100%, 100% 100%, 96% 0, 4% 0);
}
.tb-footer-top{
  padding: 50px 0 40px;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 28px;
}
@media(max-width:900px){ .tb-footer-top{ grid-template-columns: 1fr 1fr; } }
@media(max-width:520px){
  .tb-footer-top{ grid-template-columns: 1fr; gap:0; padding: 36px 0 30px; }
  .tb-footer-top > div{ padding-top:22px; margin-top:22px; border-top:1px solid rgba(255,255,255,.08); }
  .tb-footer-top > div:first-child{ padding-top:0; margin-top:0; border-top:none; }
  .tb-footer-about{ padding-bottom:0; }
  .tb-footer ul{ padding-right:60px; } /* keep text clear of the fixed back-to-top button */
}

.tb-footer-about img{ height:40px; margin-bottom:14px; }
.tb-footer-about p{ font-size:14px; color:#9fa4b1; }
.tb-footer h3{ color:#fff; font-size:14px; text-transform:uppercase; margin-bottom:18px; letter-spacing:.5px; }
.tb-footer ul{ list-style:none; padding:0; margin:0; }
.tb-footer li{ margin-bottom:11px; }
.tb-footer a{ color:#c6c9d2; font-size:14px; }
.tb-footer a:hover{ color: var(--tb-blue); padding-left:4px; }

.tb-footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:#9fa4b1;
}
.tb-footer-bottom a{ color:#9fa4b1; }
@media(max-width:600px){ .tb-footer-bottom{ flex-direction:column; gap:8px; text-align:center; } }

/* =========================================================
   MISC
   ========================================================= */
.tb-breadcrumb{ font-size:13px; color:var(--tb-text-light); margin-bottom:20px; }
.tb-breadcrumb a{ color: var(--tb-text-light); }
.tb-back-to-top{
  position:fixed;
  bottom:26px; right:26px;
  background: var(--tb-blue);
  color:#fff;
  width:46px; height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--tb-shadow-hover);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 998;
}
.tb-back-to-top:hover{ transform: rotate(-8deg); }
.tb-back-to-top.show{ opacity:1; pointer-events:auto; }

.wp-block-button__link, .tb-btn{
  display:inline-block;
  background: var(--tb-blue);
  color:#fff !important;
  padding: 11px 24px;
  border-radius: 30px;
  font-weight:700;
}

/* Category page banner — diagonal cut */
.tb-cat-banner{
  padding: 44px 0;
  position:relative;
  color:#fff;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}
.tb-cat-banner.technews{ background: linear-gradient(120deg, var(--tb-cat-technews), #2f6fc4); }
.tb-cat-banner.gadgets{ background: linear-gradient(120deg, var(--tb-cat-gadgets), #e5604f); }
.tb-cat-banner.software{ background: linear-gradient(120deg, var(--tb-cat-software), #2fb86a); }
.tb-cat-banner.tips{ background: linear-gradient(120deg, var(--tb-cat-tips), #dc9a30); }