/*
Theme Name: ToolReviewHub
Theme URI: https://toolreviewhub.io
Author: ToolReviewHub
Description: Custom review theme for SaaS & Blockchain tools. Built-in review post type, star ratings, pros/cons, pricing, comparison tables.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: toolreviewhub
*/

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
:root{
  --tr-bg:#0B1220;
  --tr-surface:#131B2E;
  --tr-surface-2:#1A2338;
  --tr-text:#E7EAF0;
  --tr-text-soft:#93A0B8;
  --tr-border:#253053;
  --tr-primary:#1B2545;
  --tr-accent:#10B981;
  --tr-accent-dark:#0EA573;
  --tr-accent-text:#34D399;
  --tr-star:#FBBF24;
  --tr-blockchain:#818CF8;
  --tr-saas:#10B981;
  --tr-radius:14px;
  --tr-shadow:0 4px 20px rgba(0,0,0,.35);
  --tr-shadow-hover:0 10px 30px rgba(0,0,0,.5);
}
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--tr-bg);
  color:var(--tr-text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ line-height:1.25; margin:0 0 .5em; font-weight:700; }
p{ margin:0 0 1em; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:999px; font-weight:600; font-size:15px;
  border:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{ background:var(--tr-accent); color:#fff; }
.btn-primary:hover{ background:var(--tr-accent-dark); transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--tr-text); border:1.5px solid var(--tr-border); }
.btn-outline:hover{ border-color:var(--tr-accent); }
.badge{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.02em;
  padding:4px 10px; border-radius:999px; text-transform:uppercase;
}
.badge-saas{ background:rgba(16,185,129,.14); color:var(--tr-accent-text); }
.badge-blockchain{ background:rgba(99,102,241,.16); color:var(--tr-blockchain); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,18,32,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--tr-border);
}
.site-header .inner{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.site-logo{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--tr-text); display:flex; align-items:center; gap:10px; }
.site-logo .logo-mark{ flex-shrink:0; display:block; }
.site-logo .logo-text{ line-height:1; }
.site-logo .accent{ color:var(--tr-accent); }
.custom-logo{ max-height:38px; width:auto; display:block; }

/* ---------- Admin bar offset (logged-in users) ---------- */
body.admin-bar .site-header{ top:32px; }
@media screen and (max-width: 782px){
	body.admin-bar .site-header{ top:46px; }
}
.main-nav ul{ display:flex; gap:28px; align-items:center; }
.main-nav a{ font-weight:600; font-size:15px; color:var(--tr-text-soft); }
.main-nav a:hover{ color:var(--tr-accent-text); }
.nav-toggle{ display:none; background:none; border:none; font-size:24px; cursor:pointer; color:var(--tr-text); }

@media (max-width: 860px){
  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--tr-surface); border-bottom:1px solid var(--tr-border); }
  .main-nav.is-open{ display:block; }
  .main-nav ul{ flex-direction:column; padding:16px 24px; gap:16px; align-items:flex-start; }
  .nav-toggle{ display:block; }
}

/* ---------- Hero ---------- */
.hero{
  padding:80px 0 64px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0F172A 0%,#1E293B 55%,#0F172A 100%);
}
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(600px 300px at 15% -10%, rgba(16,185,129,.35), transparent 60%),
    radial-gradient(500px 260px at 85% 110%, rgba(99,102,241,.3), transparent 60%);
}
.hero .container{ position:relative; z-index:1; }
.hero h1{ font-size:44px; max-width:780px; margin:0 auto 16px; color:#fff; }
.hero p.lead{ font-size:18px; color:rgba(255,255,255,.72); max-width:620px; margin:0 auto 32px; }
.hero-search{ max-width:560px; margin:0 auto; display:flex; gap:8px; background:#fff; padding:6px; border-radius:999px; box-shadow:0 12px 32px rgba(0,0,0,.35); }
.hero-search input{ flex:1; border:none; outline:none; padding:12px 16px; font-size:15px; border-radius:999px; }
.hero-cats{ margin-top:28px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero-cats a{ padding:8px 18px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.85); font-weight:600; font-size:14px; backdrop-filter:blur(4px); transition:background .15s ease, border-color .15s ease; }
.hero-cats a:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; }

/* ---------- Section headings ---------- */
.section{ padding:56px 0; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.section-head h2{ font-size:26px; }
.section-head a{ font-weight:600; color:var(--tr-accent-text); font-size:14px; }

/* ---------- Review cards grid ---------- */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width: 980px){ .review-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px){ .review-grid{ grid-template-columns:1fr; } }

.review-card{
  background:var(--tr-surface); border:1px solid var(--tr-border); border-radius:var(--tr-radius);
  padding:22px; transition:box-shadow .2s ease, transform .2s ease; display:flex; flex-direction:column; height:100%;
}
.review-card:hover{ box-shadow:var(--tr-shadow-hover); transform:translateY(-3px); }
.review-card .thumb{ border-radius:10px; overflow:hidden; margin-bottom:16px; aspect-ratio:16/9; background:var(--tr-bg); }
.review-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.review-card .thumb img.thumb-logo-img{ object-fit:contain; padding:22px; background:#fff; }
.thumb-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.thumb-placeholder span{ font-weight:800; color:#fff; font-family:'Inter',sans-serif; text-shadow:0 2px 10px rgba(0,0,0,.18); }
.review-card .cat-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.review-card h3{ font-size:18px; margin-bottom:8px; }
.review-card p.excerpt{ color:var(--tr-text-soft); font-size:14px; flex:1; }
.review-card .card-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:14px; border-top:1px solid var(--tr-border); }

/* ---------- Star rating ---------- */
.stars{ display:inline-flex; align-items:center; gap:4px; color:var(--tr-star); font-size:14px; }
.stars .num{ color:var(--tr-text); font-weight:700; margin-left:4px; font-size:14px; }
.rating-badge{ display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.06); border:1px solid var(--tr-border); padding:6px 12px; border-radius:999px; font-weight:700; }

/* ---------- Single review ---------- */
.review-hero{ background:var(--tr-surface); border-bottom:1px solid var(--tr-border); padding:48px 0; }
.review-hero-top{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.review-hero-top .logo-box{ width:96px; height:96px; border-radius:20px; overflow:hidden; background:var(--tr-bg); flex-shrink:0; border:1px solid var(--tr-border); }
.review-hero-top .logo-box img{ width:100%; height:100%; object-fit:cover; }
.review-hero-top .logo-box img.thumb-logo-img{ object-fit:contain; padding:16px; background:#fff; }
.review-hero-info h1{ font-size:32px; margin-bottom:8px; }
.review-hero-meta{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; color:var(--tr-text-soft); font-size:14px; }
.review-hero-actions{ margin-top:20px; display:flex; gap:12px; flex-wrap:wrap; }

.review-body-layout{ display:grid; grid-template-columns:2.2fr 1fr; gap:40px; padding:48px 0; align-items:start; }
@media (max-width: 900px){ .review-body-layout{ grid-template-columns:1fr; } }

.review-content h2{ font-size:22px; margin-top:36px; }
.review-content h3{ font-size:18px; margin-top:24px; }
.review-content{ font-size:16px; color:var(--tr-text); }
.review-content ul, .page-content ul{ list-style:disc; padding-left:22px; margin:0 0 1em; }
.review-content li, .page-content li{ margin-bottom:6px; }

.review-byline{ font-size:13px; color:var(--tr-text-soft); border-left:3px solid var(--tr-primary); padding:8px 14px; background:var(--tr-surface); border-radius:0 var(--tr-radius) var(--tr-radius) 0; margin-bottom:20px; }
.review-content h3{ font-size:18px; margin:28px 0 10px; }

.pros-cons{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:24px 0; }
@media (max-width:600px){ .pros-cons{ grid-template-columns:1fr; } }
.pc-box{ border-radius:var(--tr-radius); padding:20px; }
.pc-box.pros{ background:rgba(16,185,129,.06); border:1px solid rgba(16,185,129,.25); }
.pc-box.cons{ background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.2); }
.pc-box h4{ font-size:14px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:12px; }
.pc-box.pros h4{ color:var(--tr-accent-text); }
.pc-box.cons h4{ color:#F87171; }
.pc-box li{ display:flex; gap:8px; align-items:flex-start; font-size:14px; margin-bottom:8px; }

.sidebar-card{
  background:var(--tr-surface); border:1px solid var(--tr-border); border-radius:var(--tr-radius);
  padding:24px; margin-bottom:24px; position:sticky; top:90px;
}
@media (max-width:900px){ .sidebar-card{ position:static; } }
.sidebar-card .price{ font-size:22px; font-weight:800; margin-bottom:2px; }
.sidebar-card .price-caption{ font-size:12px; color:var(--tr-text-soft); margin-bottom:12px; }
.sidebar-card .cta{ width:100%; margin-top:16px; }
.sidebar-card ul.facts{ margin-top:16px; }
.sidebar-card ul.facts li{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px dashed var(--tr-border); font-size:14px; }
.sidebar-card ul.facts li:last-child{ border-bottom:none; }

/* ---------- Comparison table ---------- */
.compare-wrap{ overflow-x:auto; margin:28px 0; }
table.compare-table{ width:100%; border-collapse:collapse; background:var(--tr-surface); border-radius:var(--tr-radius); overflow:hidden; }
table.compare-table th, table.compare-table td{ padding:14px 16px; border-bottom:1px solid var(--tr-border); text-align:left; font-size:14px; }
table.compare-table th{ background:var(--tr-primary); color:#fff; font-weight:700; }
table.compare-table tr:last-child td{ border-bottom:none; }

/* ---------- Archive / category ---------- */
.archive-header{
  padding:56px 0 32px; text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0F172A 0%,#1E293B 55%,#0F172A 100%);
}
.archive-header::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(500px 260px at 85% -10%, rgba(16,185,129,.3), transparent 60%);
}
.archive-header .container{ position:relative; z-index:1; }
.archive-header h1{ font-size:32px; color:#fff; }
.archive-header p{ color:rgba(255,255,255,.72); }
.filter-bar{ display:flex; gap:10px; justify-content:center; margin-bottom:8px; flex-wrap:wrap; }
.filter-bar a{ padding:8px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.18); font-weight:600; font-size:14px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.85); backdrop-filter:blur(4px); }
.filter-bar a:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; }
.filter-bar a.is-active{ background:var(--tr-accent); color:#fff; border-color:var(--tr-accent); }

.pagination{ display:flex; justify-content:center; gap:8px; margin-top:40px; }
.pagination a, .pagination span{ padding:8px 14px; border-radius:8px; border:1px solid var(--tr-border); font-weight:600; font-size:14px; background:var(--tr-surface); }
.pagination .current{ background:var(--tr-primary); color:#fff; border-color:var(--tr-primary); }

/* ---------- Page content ---------- */
.page-content{ padding:56px 0; max-width:820px; margin:0 auto; }
.page-content h1{ font-size:32px; margin-bottom:24px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--tr-primary); color:#CBD5E1; margin-top:64px; padding:48px 0 24px; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; margin-bottom:32px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h4{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.03em; margin-bottom:16px; }
.footer-grid li{ margin-bottom:10px; font-size:14px; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:20px; font-size:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

/* ---------- Comments / reader reviews ---------- */
.comments-section{ background:var(--tr-surface); border-top:1px solid var(--tr-border); }
.reader-rating-summary{ display:flex; align-items:center; gap:10px; }
.reader-rating-count{ color:var(--tr-text-soft); font-size:14px; }
.reader-rating-empty{ color:var(--tr-text-soft); font-size:14px; }

.comment-list{ list-style:none; margin:0 0 32px; padding:0; }
.comment-list .comment{ background:var(--tr-surface-2); border:1px solid var(--tr-border); border-radius:var(--tr-radius); padding:20px; margin-bottom:16px; }
.comment-list .children{ list-style:none; margin:16px 0 0 24px; padding:0; }
.comment-list .comment-author{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.comment-list .comment-author img{ border-radius:50%; }
.comment-list .comment-author .fn{ font-weight:700; font-style:normal; }
.comment-list .comment-metadata{ font-size:12px; color:var(--tr-text-soft); margin-bottom:8px; }
.comment-list .comment-metadata a{ color:var(--tr-text-soft); }
.comment-list .comment-content p{ color:var(--tr-text-soft); font-size:14px; line-height:1.6; }
.comment-list .stars{ display:flex; margin-bottom:8px; }
.comment-respond{ background:var(--tr-surface-2); border:1px solid var(--tr-border); border-radius:var(--tr-radius); padding:24px; }
.comment-respond .comment-reply-title{ font-size:20px; margin-bottom:16px; }
.comment-form label{ display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.comment-form .required{ color:#F87171; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%; background:var(--tr-bg); border:1px solid var(--tr-border); border-radius:10px;
  padding:11px 14px; color:var(--tr-text); font-family:inherit; font-size:14px; margin-bottom:16px;
}
.comment-form textarea{ min-height:120px; resize:vertical; }
.comment-form input:focus, .comment-form textarea:focus{ outline:none; border-color:var(--tr-accent); }
.comment-form-rating{ margin-bottom:4px; }

.trh-star-input{ display:inline-flex; flex-direction:row-reverse; justify-content:flex-end; gap:2px; margin-bottom:16px; }
.trh-star-input input{ position:absolute; opacity:0; width:0; height:0; }
.trh-star-input label{
  font-size:30px; line-height:1; color:var(--tr-border); cursor:pointer; transition:color .15s;
  display:inline-block; margin:0;
}
.trh-star-input input:checked ~ label,
.trh-star-input label:hover,
.trh-star-input label:hover ~ label{ color:var(--tr-star); }