/*
Theme Name: Teardown
Theme URI: https://example.com/teardown
Author: Your Name
Author URI: https://example.com
Description: A fast, SEO-optimized WordPress theme built for tech review & news sites. Ships with Review schema markup, semantic HTML5, and ready-made Google AdSense ad zones (header, sidebar, in-content, footer) managed from the Customizer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: teardown
Tags: blog, news, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =========================================================
   0. Design tokens
   ========================================================= */
:root{
  --paper: #EDEBE4;
  --paper-raised: #F6F4EF;
  --ink: #171A1F;
  --ink-soft: #5B5F66;
  --line: #C9C4B8;
  --signal: #3D5AFE;
  --cat-phones: #3D5AFE;
  --cat-laptops: #C9861F;
  --cat-audio: #0E8F8B;
  --cat-wearables: #A23E90;
  --cat-home: #4C8A4F;
  --cat-cameras: #B24A3C;
  --max-w: 1180px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper: #14161B;
    --paper-raised: #1B1E24;
    --ink: #ECEAE3;
    --ink-soft: #9A9C9F;
    --line: #33363C;
    --signal: #7B93FF;
    --cat-phones: #7B93FF;
    --cat-laptops: #E3B25C;
    --cat-audio: #4FC3BE;
    --cat-wearables: #D178C0;
    --cat-home: #8CC98F;
    --cat-cameras: #E08370;
  }
}

/* =========================================================
   1. Base / reset
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul.no-bullets{ list-style:none; margin:0; padding:0; }
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
.screen-reader-text:focus{
  position:static !important;
  width:auto; height:auto;
  clip:auto;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; z-index:100000;
}
:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--signal);
  outline-offset:2px;
}

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
}

/* =========================================================
   2. Header
   ========================================================= */
.site-header{
  border-bottom:1px solid var(--line);
  position:sticky; top:0;
  background:var(--paper);
  z-index:50;
}
.site-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:16px 0;
}
.site-branding{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.site-title{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:1.4rem;
  letter-spacing:-0.02em; margin:0;
}
.site-title a{ text-decoration:none; }
.site-title .accent{ color:var(--signal); }
.site-description{ display:none; }

.primary-navigation{ display:flex; }
.primary-navigation ul{ list-style:none; display:flex; gap:26px; margin:0; padding:0; }
.primary-navigation a{
  text-decoration:none; color:var(--ink-soft);
  font-weight:500; font-size:0.95rem;
  padding-bottom:4px; border-bottom:2px solid transparent;
}
.primary-navigation a:hover,
.primary-navigation .current-menu-item > a{
  color:var(--ink); border-color:var(--signal);
}
.menu-toggle{
  display:none;
  background:transparent; border:1px solid var(--line);
  color:var(--ink); font:inherit; padding:8px 12px; cursor:pointer;
}
@media (max-width:780px){
  .primary-navigation{ display:none; flex-direction:column; width:100%; }
  .primary-navigation.is-open{ display:flex; }
  .primary-navigation ul{ flex-direction:column; gap:0; }
  .primary-navigation a{ display:block; padding:12px 0; border-bottom:1px solid var(--line); }
  .menu-toggle{ display:inline-block; }
  .site-header-inner{ flex-wrap:wrap; }
}

/* =========================================================
   3. Ad zones
   ========================================================= */
.ad-slot{
  margin:28px 0;
  text-align:center;
}
.ad-slot .ad-label{
  display:block;
  font-size:0.7rem;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  margin-bottom:8px;
}
.ad-slot--header{ padding:14px 0; border-bottom:1px solid var(--line); }
.ad-slot--sidebar{ border:1px solid var(--line); padding:16px; background:var(--paper-raised); }
.ad-slot--incontent{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0; }
.ad-slot--footer{ border-top:1px solid var(--line); padding:24px 0; }

/* =========================================================
   4. Layout: content + sidebar
   ========================================================= */
.site-main-wrap{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:48px;
  padding:40px 0 56px;
  align-items:start;
}
.has-no-sidebar .site-main-wrap{ grid-template-columns:1fr; }
@media (max-width:900px){
  .site-main-wrap{ grid-template-columns:1fr; }
}

/* =========================================================
   5. Post / review cards (archive & index grid)
   ========================================================= */
.post-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
@media (max-width:640px){ .post-grid{ grid-template-columns:1fr; } }

.post-card{
  background:var(--paper);
  padding:20px;
  border-top:3px solid var(--cat, var(--signal));
  display:flex; flex-direction:column; gap:10px;
}
.post-card:hover{ background:var(--paper-raised); }
.post-card .cat-tag{ font-size:0.76rem; font-weight:600; color:var(--cat, var(--signal)); text-transform:uppercase; }
.post-card h2, .post-card h3{
  font-family:'Space Grotesk', sans-serif;
  font-size:1.08rem; font-weight:600; line-height:1.3; margin:0;
}
.post-card h2 a, .post-card h3 a{ text-decoration:none; }
.post-card p{ margin:0; font-size:0.92rem; color:var(--ink-soft); }
.post-card .card-foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:6px;
}
.mini-score{ font-family:'IBM Plex Mono', monospace; font-weight:600; }
.mini-score span{ font-size:0.75rem; color:var(--ink-soft); font-weight:400; }

/* =========================================================
   6. Single review / post
   ========================================================= */
.entry-header{ padding:36px 0 0; }
.entry-cat{ font-size:0.8rem; font-weight:600; color:var(--signal); display:block; margin-bottom:10px; text-transform:uppercase; }
.entry-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  line-height:1.1; font-weight:700; margin:0 0 14px; letter-spacing:-0.01em;
}
.entry-meta{ color:var(--ink-soft); font-size:0.9rem; margin-bottom:24px; }
.entry-meta a{ text-decoration:none; }
.entry-thumbnail{ border:1px solid var(--line); margin-bottom:28px; }

.review-score-box{
  display:flex; align-items:center; gap:16px;
  border-left:3px solid var(--signal);
  padding:12px 0 12px 18px;
  margin:0 0 28px;
}
.review-score-box .score-num{ font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:2.4rem; }
.review-score-box .score-max{ font-family:'IBM Plex Mono', monospace; color:var(--ink-soft); }
.review-score-box .score-verdict{ font-size:0.9rem; color:var(--ink-soft); }

.entry-content{ font-size:1.03rem; max-width:70ch; }
.entry-content > *{ margin-top:0; margin-bottom:1.2em; }
.entry-content h2{ font-family:'Space Grotesk', sans-serif; font-size:1.4rem; margin-top:1.6em; }
.entry-content h3{ font-family:'Space Grotesk', sans-serif; font-size:1.15rem; margin-top:1.4em; }
.entry-content img{ border:1px solid var(--line); }
.entry-content a{ color:var(--signal); }
.entry-content blockquote{
  border-left:3px solid var(--line); margin:0; padding-left:18px; color:var(--ink-soft); font-style:italic;
}

.entry-footer{ border-top:1px solid var(--line); padding:20px 0; margin-top:24px; font-size:0.9rem; color:var(--ink-soft); }
.entry-footer a{ text-decoration:none; border-bottom:1px solid var(--line); }

/* =========================================================
   7. Sidebar / widgets
   ========================================================= */
.widget{ margin-bottom:36px; }
.widget-title{
  font-family:'Space Grotesk', sans-serif;
  font-size:1rem; font-weight:600; margin:0 0 16px;
  padding-bottom:10px; border-bottom:1px solid var(--line);
}
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ padding:8px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
.widget li:last-child{ border-bottom:none; }
.widget a{ text-decoration:none; }
.widget a:hover{ color:var(--signal); }

/* =========================================================
   8. Comments
   ========================================================= */
.comments-area{ padding:32px 0; border-top:1px solid var(--line); margin-top:32px; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-body{ padding:16px 0; border-bottom:1px solid var(--line); }
.comment-author{ font-weight:600; font-size:0.92rem; }
.comment-metadata{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:8px; }
.comment-form input, .comment-form textarea{
  width:100%; font:inherit; padding:10px 12px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  margin-bottom:14px;
}
.comment-form .form-submit input{
  width:auto; background:var(--ink); color:var(--paper); border:none; cursor:pointer; padding:10px 22px; font-weight:600;
}

/* =========================================================
   9. Pagination / breadcrumbs
   ========================================================= */
.breadcrumbs{ font-size:0.85rem; color:var(--ink-soft); padding:16px 0 0; }
.breadcrumbs a{ text-decoration:none; }
.pagination{ display:flex; gap:10px; padding:32px 0; border-top:1px solid var(--line); }
.pagination a, .pagination span{
  padding:8px 14px; border:1px solid var(--line); text-decoration:none; font-size:0.9rem;
}
.pagination .current{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* =========================================================
   10. Footer
   ========================================================= */
.site-footer{ border-top:1px solid var(--line); padding-top:36px; }
.footer-widgets{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
  padding-bottom:32px;
}
@media (max-width:780px){ .footer-widgets{ grid-template-columns:1fr; } }
.site-info{
  border-top:1px solid var(--line); padding:20px 0 36px;
  font-size:0.85rem; color:var(--ink-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.site-info a{ text-decoration:none; }

@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }