/*
Theme Name: UniversalTech
Theme URI: https://example.com
Author: BusinessToMark
Description: A clean, fully portable tech-niche WordPress theme - a hero module for the latest post, dense category-organized sections built entirely from whatever categories the site actually has (nothing hardcoded), and a sidebar with a live category list and Popular Posts. Works for any tech site - repair guides, reviews, general tech blogs - out of the box.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: universaltech
*/

:root{
  --ut-accent:#0e7c86;
  --ut-ink:#14181f;
  --ut-gray:#66707c;
  --ut-border:#e5e8ec;
  --ut-bg:#fafbfc;
  --ut-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--ut-font);color:var(--ut-ink);background:#fff;line-height:1.5;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.container{max-width:1180px;margin:0 auto;padding:0 22px;}

/* ---- Header ---- */
.ut-header{border-bottom:1px solid var(--ut-border);padding:18px 0;}
.ut-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.ut-logo{font-size:23px;font-weight:800;}
.ut-logo span{color:var(--ut-accent);}
.ut-search-form{display:flex;gap:6px;}
.ut-search-form input{border:1px solid var(--ut-border);border-radius:6px;padding:8px 12px;font-size:13.5px;width:170px;}
.ut-search-form button{background:var(--ut-accent);color:#fff;border:none;border-radius:6px;padding:0 14px;cursor:pointer;font-size:13px;font-weight:700;}

/* ---- Nav ---- */
.ut-nav{background:var(--ut-ink);}
.ut-nav ul{display:flex;gap:0;list-style:none;overflow-x:auto;}
.ut-nav a{display:block;padding:13px 16px;color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;}
.ut-nav a:hover{background:var(--ut-accent);}

/* ---- Hero module ---- */
.ut-hero{display:grid;grid-template-columns:1.7fr 1fr;gap:28px;margin:30px 0;align-items:stretch;}
.ut-hero-main{position:relative;display:block;border-radius:8px;overflow:hidden;}
.ut-hero-main-img{width:100%;height:420px;object-fit:cover;display:block;}
.ut-hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:26px;background:linear-gradient(to top,rgba(10,14,20,.9),rgba(10,14,20,0));}
.ut-hero-tag{display:inline-block;background:var(--ut-accent);color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:3px;margin-bottom:10px;}
.ut-hero-overlay h1{color:#fff;font-size:26px;font-weight:800;line-height:1.25;margin:0;}
.ut-hero-side{display:flex;flex-direction:column;gap:16px;}
.ut-hero-side-item{display:flex;gap:12px;flex:1;}
.ut-hero-side-thumb{width:100px;height:78px;object-fit:cover;border-radius:6px;flex-shrink:0;background:linear-gradient(135deg,#dfe3e8,#c7ccd3);}
.ut-hero-side-body h4{font-size:14.5px;font-weight:700;line-height:1.32;margin-bottom:4px;}
.ut-hero-side-item:hover h4{color:var(--ut-accent);}
.ut-hero-side-meta{font-size:11.5px;color:var(--ut-gray);}

/* ---- Layout: main content + sidebar ---- */
.ut-layout{display:grid;grid-template-columns:2.3fr 1fr;gap:34px;align-items:start;margin-bottom:40px;}

/* ---- Category sections ---- */
.ut-section{margin-bottom:34px;}
.ut-section-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ut-ink);padding-bottom:10px;margin-bottom:16px;}
.ut-section-head h2{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;}
.ut-section-more{font-size:12px;font-weight:700;color:var(--ut-accent);border:1px solid var(--ut-accent);padding:5px 12px;border-radius:14px;}
.ut-section-more:hover{background:var(--ut-accent);color:#fff;}
.ut-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.ut-card{display:block;border:1px solid var(--ut-border);border-radius:8px;overflow:hidden;}
.ut-card-img{width:100%;height:150px;object-fit:cover;background:linear-gradient(135deg,#dfe3e8,#c7ccd3);}
.ut-card-body{padding:14px 16px;}
.ut-card-body h3{font-size:15px;font-weight:700;line-height:1.35;margin-bottom:6px;}
.ut-card:hover h3{color:var(--ut-accent);}
.ut-card-dek{font-size:12.5px;color:#555;line-height:1.5;margin-bottom:8px;}
.ut-card-meta{font-size:11.5px;color:var(--ut-gray);}

/* ---- Sidebar ---- */
.ut-sidebar-block{margin-bottom:30px;}
.ut-sidebar-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;border-bottom:2px solid var(--ut-ink);padding-bottom:10px;margin-bottom:4px;}
.ut-cat-item{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--ut-border);font-size:13.5px;font-weight:600;}
.ut-cat-item:hover{color:var(--ut-accent);}
.ut-cat-count{color:var(--ut-gray);font-weight:700;}
.ut-pop-item{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--ut-border);align-items:flex-start;}
.ut-pop-thumb{width:64px;height:54px;object-fit:cover;border-radius:5px;flex-shrink:0;background:linear-gradient(135deg,#dfe3e8,#c7ccd3);}
.ut-pop-item h5{font-size:13px;font-weight:800;line-height:1.3;}
.ut-pop-item:hover h5{color:var(--ut-accent);}

/* ---- Single article ---- */
.ut-breadcrumb{font-size:12.5px;color:var(--ut-gray);margin:20px 0 10px;}
.ut-breadcrumb a:hover{color:var(--ut-accent);}
.ut-article h1{font-size:30px;font-weight:800;line-height:1.22;margin-bottom:12px;}
.ut-article-meta{font-size:13px;color:var(--ut-gray);margin-bottom:20px;}
.ut-article-meta b{color:var(--ut-ink);}
.ut-article-thumb{width:100%;height:auto;max-height:440px;object-fit:cover;border-radius:8px;margin-bottom:24px;}
.ut-article-body{font-size:17px;line-height:1.75;color:#1a1a1a;}
.ut-article-body p{margin:0 0 20px;}
.ut-article-body h2{font-size:23px;font-weight:800;margin:30px 0 12px;}
.ut-article-body a{color:var(--ut-accent);text-decoration:underline;}

/* ---- Footer ---- */
.ut-footer{border-top:1px solid var(--ut-border);padding:26px 0;margin-top:20px;text-align:center;font-size:12.5px;color:var(--ut-gray);}

@media(max-width:900px){
  .ut-hero{grid-template-columns:1fr;}
  .ut-layout{grid-template-columns:1fr;}
  .ut-grid{grid-template-columns:1fr;}
  .ut-search-form input{width:120px;}
}