/*
Theme Name: Tire Advise
Theme URI: https://tireadvise.com/
Author: Tire Advise
Author URI: https://tireadvise.com/
Description: A modern, UI/UX-focused magazine theme built for Tire Advise — featuring a prominent homepage search, 3:2 ratio imagery, and dedicated sections for Tire Reviews, Tire Comparisons, Best Tires, Tips and Guides, and Maintenance content.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tireadvise
Tags: blog, news, magazine-style, grid-layout, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

Tire Advise is a magazine-style WordPress theme.
*/

/* =========================================================
   TABLE OF CONTENTS
   1.0  Custom Properties / Design Tokens
   2.0  Reset & Base
   3.0  Typography
   4.0  Layout / Containers
   5.0  Buttons & Forms
   6.0  Header
   7.0  Hero / Search Section
   8.0  Category Sections (Home)
   9.0  Cards
   10.0 Sidebar & Widgets
   11.0 Archive / Blog
   12.0 Single Post
   13.0 Comments
   14.0 Footer
   15.0 Pagination
   16.0 Utilities
   17.0 Responsive
========================================================= */

/* 1.0 Custom Properties */
:root{
  --ta-color-primary:#0b5fff;
  --ta-color-primary-dark:#0847c4;
  --ta-color-accent:#ff6b35;
  --ta-color-ink:#12161c;
  --ta-color-body:#3d4552;
  --ta-color-muted:#6b7280;
  --ta-color-border:#e6e9ee;
  --ta-color-surface:#ffffff;
  --ta-color-bg:#f5f7fa;
  --ta-radius-sm:6px;
  --ta-radius-md:12px;
  --ta-radius-lg:20px;
  --ta-shadow-sm:0 1px 2px rgba(18,22,28,.06);
  --ta-shadow-md:0 8px 24px rgba(18,22,28,.08);
  --ta-shadow-lg:0 20px 48px rgba(18,22,28,.14);
  --ta-container:1240px;
  --ta-gap:28px;
  --ta-font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ta-font-heading:'Poppins','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ta-transition:.2s ease;
}

/* 2.0 Reset & Base */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--ta-font-body);
  color:var(--ta-color-body);
  background:var(--ta-color-bg);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--ta-color-primary);text-decoration:none;transition:color var(--ta-transition);}
a:hover{color:var(--ta-color-primary-dark);}
ul{margin:0;padding:0;list-style:none;}
figure{margin:0;}
input,button,textarea,select{font-family:inherit;font-size:inherit;}
button{cursor:pointer;}
.skip-link{
  position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:12px 20px;z-index:100000;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0;}

/* 3.0 Typography */
h1,h2,h3,h4,h5,h6{
  font-family:var(--ta-font-heading);
  color:var(--ta-color-ink);
  line-height:1.25;
  font-weight:700;
  margin:0 0 .5em;
}
h1{font-size:clamp(2rem,4vw,3rem);}
h2{font-size:clamp(1.5rem,3vw,2.1rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1.2em;}
.entry-content a{text-decoration:underline;}

/* 4.0 Layout */
.container{
  max-width:var(--ta-container);
  margin:0 auto;
  padding:0 24px;
}
.site-main-wrap{padding:48px 0 64px;}
.content-layout{
  display:grid;
  grid-template-columns:1fr 348px;
  gap:25px;
  align-items:start;
}
.content-layout.full-width{grid-template-columns:1fr;}

/* 5.0 Buttons & Forms */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  background:var(--ta-color-primary);
  color:#fff;
  font-weight:600;
  border:none;
  transition:background var(--ta-transition),transform var(--ta-transition);
}
.btn:hover{background:var(--ta-color-primary-dark);color:#fff;transform:translateY(-1px);}
.btn.btn-outline{background:transparent;border:2px solid var(--ta-color-surface);color:#fff;}
.btn.btn-outline:hover{background:rgba(255,255,255,.15);}

input[type="search"],input[type="text"],input[type="email"],input[type="url"],textarea{
  width:100%;
  border:1px solid var(--ta-color-border);
  border-radius:var(--ta-radius-sm);
  padding:12px 16px;
  background:var(--ta-color-surface);
  color:var(--ta-color-ink);
}
input[type="search"]:focus,input[type="text"]:focus,textarea:focus{
  outline:none;border-color:var(--ta-color-primary);box-shadow:0 0 0 3px rgba(11,95,255,.15);
}

/* Hero search form */
.hero-search-form{
  display:flex;
  align-items:stretch;
  gap:12px;
  background:var(--ta-color-surface);
  padding:10px;
  border-radius:999px;
  box-shadow:var(--ta-shadow-lg);
  max-width:720px;
  margin:0 auto;
}
.hero-search-form label{flex:1;display:flex;}
.hero-search-form .search-field{
  border:none;
  border-radius:999px;
  padding:16px 24px;
  font-size:1.05rem;
  flex:1;
}
.hero-search-form .search-field:focus{box-shadow:none;}
.hero-search-form .search-submit{
  border-radius:999px;
  padding:16px 32px;
  font-size:1.05rem;
  white-space:nowrap;
}

/* 6.0 Header */
.site-header{
  position:sticky;top:0;z-index:999;
  background:rgba(255,255,255,.98);
  border-bottom:1px solid var(--ta-color-border);
}
/* Note: intentionally no backdrop-filter here — it creates a new containing
   block for position:fixed descendants, which broke the fullscreen mobile
   nav (.main-navigation lives inside .site-header). */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  gap:24px;
}
.site-branding{display:flex;align-items:center;gap:12px;}
.site-title{
  font-family:var(--ta-font-heading);
  font-size:1.6rem;
  font-weight:800;
  margin: 0 0 20px 0;
  letter-spacing:-.02em;
}
.site-title a{color:var(--ta-color-ink);}
.site-description{
  font-size:.8rem;color:var(--ta-color-muted);margin:0;
}
.custom-logo{max-height:48px;width:auto;}

.main-navigation{flex:1;display:flex;justify-content:center;}
.main-navigation ul{display:flex;gap:8px;}
.main-navigation li{position:relative;}
.main-navigation a{
  display:block;padding:10px 16px;border-radius:999px;font-weight:600;color:var(--ta-color-ink);font-size:.95rem;
}
.main-navigation a:hover,.main-navigation .current-menu-item > a{
  background:var(--ta-color-bg);color:var(--ta-color-primary);
}
.main-navigation .sub-menu{
  display:none;position:absolute;top:100%;left:0;background:var(--ta-color-surface);
  box-shadow:var(--ta-shadow-md);border-radius:var(--ta-radius-md);min-width:220px;padding:10px;z-index:10;
}
.main-navigation .sub-menu a{
  white-space:nowrap;display:block;border-radius:var(--ta-radius-sm);padding:10px 14px;font-size:.9rem;font-weight:500;
}
.main-navigation .sub-menu li + li{margin-top:2px;}
.submenu-toggle{display:none;} /* shown only on the mobile accordion nav, see 17.0 Responsive */
.mobile-nav-close{display:none;} /* shown only on the fullscreen mobile nav, see 17.0 Responsive */
/* li:hover > .sub-menu (desktop dropdown reveal) lives in the min-width:783px
   block below — it must NOT be unscoped, or tapping a mobile accordion
   toggle can trigger a stuck :hover/:focus-within state that fights the
   JS-driven "submenu-open" class and never lets the menu close. */

/* Mega menu — opt-in per top-level menu item by adding a "mega-menu" CSS
   class to it in Appearance > Menus (enable "CSS Classes" under Screen
   Options). Its direct children become columns; each column's own
   sub-items (if any) render as a permanently-visible link list below a
   bold heading. No custom nav walker needed — this relies only on the
   default WordPress nested <ul class="sub-menu"> markup. */
.main-navigation li.mega-menu > .sub-menu{
  display:none;
  /* top:100% is relative to the LI itself (position:relative, set on all
     .main-navigation li) so the panel sits flush against its trigger with
     zero gap — a gap here would break :hover as the pointer crosses it.
     "left" can't be centered with pure CSS from this same containing block
     (it would center on the LI's width, not the viewport's), so main.js
     sets an exact pixel `left` on hover/focus to line this up full-bleed;
     left:0 here is just the pre-JS fallback.
     width:100% (not 100vw) for the same reason main.js overrides it with
     document.documentElement.clientWidth rather than trusting 100vw: most
     browsers count the vertical scrollbar in 100vw, making it a few pixels
     wider than the real viewport — and since this panel stays display:grid
     in the DOM at all times (only hidden via opacity/visibility), that
     extra width caused a permanent horizontal scrollbar site-wide. 100%
     here is just a harmless pre-JS fallback, not the real fix. */
  position:absolute;top:100%;left:0;
  width:100%;min-width:0;
  background:var(--ta-color-surface);
  box-shadow:var(--ta-shadow-lg);
  border-radius:0;border-top:1px solid var(--ta-color-border);
  padding:32px max(24px,calc((100vw - var(--ta-container)) / 2));
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:32px 40px;
  z-index:20;
}
.main-navigation li.mega-menu > .sub-menu > .menu-item{padding:0;}
.main-navigation li.mega-menu > .sub-menu > .menu-item > a{
  display:block;padding:0 0 14px;margin-bottom:14px;
  border-bottom:2px solid var(--ta-color-bg);border-radius:0;
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ta-color-ink);
}
.main-navigation li.mega-menu > .sub-menu > .menu-item > a:hover{background:none;color:var(--ta-color-primary);}
.main-navigation li.mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > a{
  display:block;padding:8px 0;border-radius:0;font-size:.9rem;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--ta-color-body);
}
.main-navigation li.mega-menu > .sub-menu > .menu-item > .sub-menu > .menu-item > a:hover{background:none;color:var(--ta-color-primary);}

.header-actions{display:flex;align-items:center;gap:14px;}
.header-search-toggle,.menu-toggle{
  width:40px;height:40px;
  background:none;border:none;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ta-color-ink);transition:background var(--ta-transition),color var(--ta-transition);
}
.header-search-toggle:hover,.menu-toggle:hover{background:var(--ta-color-bg);color:var(--ta-color-primary);}
.header-search-toggle[aria-expanded="true"]{background:var(--ta-color-primary);color:#fff;}
.menu-toggle{display:none;}
.header-search-panel{
  border-top:1px solid transparent;background:var(--ta-color-surface);padding:0;
  overflow:hidden;max-height:0;
  transition:max-height .22s ease,padding var(--ta-transition),border-color var(--ta-transition);
}
.header-search-panel.is-open{max-height:200px;padding:20px 0;border-top-color:var(--ta-color-border);}
.search-form{display:flex;gap:10px;}
.search-form .search-field{flex:1;}
.header-search-panel .search-form{max-width:640px;margin:0 auto;}

/* 7.0 Hero / Search Section */
.hero-section{
  position:relative;
  background:linear-gradient(135deg,var(--ta-color-ink) 0%,#1d2836 55%,var(--ta-color-primary-dark) 100%);
  color:#fff;
  padding:88px 0 96px;
  overflow:hidden;
}
.hero-section::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,107,53,.25),transparent 40%),
    radial-gradient(circle at 85% 80%,rgba(11,95,255,.35),transparent 45%);
  pointer-events:none;
}
.hero-inner{position:relative;text-align:center;max-width:820px;margin:0 auto;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);
  padding:6px 16px;border-radius:999px;font-size:.8rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px;
}
.hero-section h1{color:#fff;margin-bottom:16px;}
.hero-subtitle{color:rgba(255,255,255,.78);font-size:1.15rem;max-width:640px;margin:0 auto 36px;}
.hero-stats{
  display:flex;justify-content:center;gap:48px;margin-top:44px;flex-wrap:wrap;
}
.hero-stats .stat-num{font-family:var(--ta-font-heading);font-size:1.8rem;font-weight:800;color:#fff;}
.hero-stats .stat-label{font-size:.85rem;color:rgba(255,255,255,.65);}

/* 7.5 Browse by Brand */
.brand-section{padding:48px 0 56px;background:var(--ta-color-surface);}
.brand-section-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;gap:20px;flex-wrap:wrap;
}
.brand-section-head h2{
  margin:0;padding-left:16px;border-left:4px solid var(--ta-color-accent);
}
.brand-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:20px;
}
.brand-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:24px 16px;border:1px solid var(--ta-color-border);border-radius:var(--ta-radius-md);
  background:var(--ta-color-surface);transition:box-shadow var(--ta-transition),transform var(--ta-transition),border-color var(--ta-transition);
}
.brand-card:hover{box-shadow:var(--ta-shadow-md);transform:translateY(-3px);border-color:transparent;}
.brand-logo{
  display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin-bottom:6px;
  border-radius:var(--ta-radius-sm);overflow:hidden;background:var(--ta-color-bg);
}
.brand-logo-img{width:100%;height:100%;object-fit:contain;}
.brand-logo-fallback{
  display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  color:#fff;font-weight:800;font-size:1.4rem;font-family:var(--ta-font-heading);
}
.brand-name{font-weight:700;color:var(--ta-color-ink);font-size:.98rem;}
.brand-count{font-size:.8rem;color:var(--ta-color-muted);}

/* 8.0 Category Sections */
.category-section{padding:56px 0;}
.category-section:nth-child(even){background:var(--ta-color-surface);}
.category-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:32px;gap:20px;flex-wrap:wrap;
}
.category-section-head .cat-tag{
  display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ta-color-primary);margin-bottom:8px;
}
.category-section-head h2{margin:0;}
.category-section-head h2 a{color:inherit;}
.category-section-head .cat-desc{color:var(--ta-color-muted);margin:8px 0 0;max-width:560px;}
.view-all-link{
  display:inline-flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap;
  padding:10px 20px;border:2px solid var(--ta-color-border);border-radius:999px;color:var(--ta-color-ink);
}
.view-all-link:hover{border-color:var(--ta-color-primary);color:var(--ta-color-primary);}

.category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--ta-gap);
}
.category-grid.featured-first .post-card:first-child{grid-column:span 2;grid-row:span 2;}
.category-grid.featured-first .post-card:first-child .post-thumb{padding-top:66.66%;}
.category-grid.featured-first .post-card:first-child h3{font-size:1.5rem;}
/* Only the featured card shows an excerpt — the 4 smaller 2x2 cards drop it
   so their shorter content doesn't leave a tall empty gap under the
   featured card's own (shorter) text block. */
.category-grid.featured-first .post-card:not(:first-child) .post-card-excerpt{display:none;}

/* 9.0 Cards */
.post-card{
  background:var(--ta-color-surface);
  border-radius:var(--ta-radius-md);
  overflow:hidden;
  box-shadow:var(--ta-shadow-sm);
  transition:box-shadow var(--ta-transition),transform var(--ta-transition);
  display:flex;flex-direction:column;
}
.post-card:hover{box-shadow:var(--ta-shadow-md);transform:translateY(-3px);}
.post-thumb{
  position:relative;
  width:100%;
  padding-top:66.6667%; /* 3:2 aspect ratio */
  background:var(--ta-color-bg) center/cover no-repeat;
  overflow:hidden;
}
.post-thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.post-card:hover .post-thumb img{transform:scale(1.06);}
.cat-badge{
  display:inline-block;background:var(--ta-color-primary);color:#fff;
  font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:5px 12px;border-radius:999px;
}
.post-thumb .cat-badge{
  position:absolute;top:12px;left:12px;background:rgba(18,22,28,.75);backdrop-filter:blur(4px);
}
.post-card-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.post-card-body h3{font-size:1.05rem;margin-bottom:8px;}
.post-card-body h3 a{color:var(--ta-color-ink);}
.post-card-body h3 a:hover{color:var(--ta-color-primary);}
.post-card-meta{
  font-size:.78rem;color:var(--ta-color-muted);display:flex;gap:10px;align-items:center;margin-bottom:10px;flex-wrap:wrap;
}
.post-card-excerpt{font-size:.9rem;color:var(--ta-color-muted);margin-bottom:0;}
.post-rating{display:flex;align-items:center;gap:4px;font-size:.8rem;color:var(--ta-color-accent);font-weight:700;}

/* 10.0 Sidebar & Widgets */
.widget{
  background:var(--ta-color-surface);border:1px solid var(--ta-color-border);border-radius:var(--ta-radius-md);
  padding:24px;margin-bottom:28px;
}
.widget-title{font-size:1.05rem;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid var(--ta-color-bg);}
.widget ul li{padding:8px 0;border-bottom:1px solid var(--ta-color-bg);}
.widget ul li:last-child{border-bottom:none;}

/* Author card widget */
.author-widget{text-align:center;}
.author-widget-avatar{margin:0 auto 16px;width:96px;height:96px;}
.author-widget-avatar img{
  width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--ta-color-primary);padding:3px;
}
.author-widget-name{font-size:1.2rem;margin-bottom:10px;}
.author-widget-bio{color:var(--ta-color-muted);font-size:.92rem;line-height:1.7;margin-bottom:18px;}
.author-widget-divider{height:1px;background:var(--ta-color-bg);margin-bottom:16px;}
.author-widget-stats{margin-bottom:20px;}
.author-widget-count{display:block;font-family:var(--ta-font-heading);font-size:1.6rem;font-weight:800;color:var(--ta-color-primary);line-height:1.2;}
.author-widget-label{display:block;font-size:.85rem;color:var(--ta-color-muted);}
.author-widget-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--ta-color-ink);color:#fff;padding:13px 20px;border-radius:999px;font-weight:600;font-size:.95rem;
  transition:background var(--ta-transition),transform var(--ta-transition);
}
.author-widget-btn:hover{background:var(--ta-color-primary);color:#fff;transform:translateY(-1px);}
.author-widget-btn svg{transition:transform var(--ta-transition);}
.author-widget-btn:hover svg{transform:translateX(3px);}

/* Newsletter card widget */
.newsletter-widget{text-align:center;}
.newsletter-widget-icon{
  width:44px;height:44px;border-radius:var(--ta-radius-sm);background:var(--ta-color-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.newsletter-widget-title{font-size:1.15rem;margin-bottom:10px;}
.newsletter-widget-desc{color:var(--ta-color-muted);font-size:.9rem;line-height:1.6;margin-bottom:18px;}
.sidebar-newsletter-form .newsletter-form{display:flex;flex-direction:column;gap:10px;}
.sidebar-newsletter-form .newsletter-form input[type="email"]{
  width:100%;border:1px solid var(--ta-color-border);border-radius:999px;padding:12px 18px;background:var(--ta-color-bg);
}
.sidebar-newsletter-form .newsletter-form input[type="email"]:focus{
  outline:none;border-color:var(--ta-color-primary);box-shadow:0 0 0 3px rgba(11,95,255,.15);
}
.sidebar-newsletter-form .newsletter-form button{width:100%;border-radius:999px;padding:13px 20px;}
.newsletter-widget .newsletter-message{text-align:center;}
.newsletter-widget .newsletter-message.is-success{color:#1a8a4a;}
.newsletter-widget .newsletter-message.is-error{color:#d1372f;}
.newsletter-widget-subtext{color:var(--ta-color-muted);font-size:.8rem;margin:12px 0 0;}

/* 11.0 Archive / Blog */
.page-header{padding:48px 0 32px;text-align:center;background:var(--ta-color-surface);border-bottom:1px solid var(--ta-color-border);}
.page-header .page-title{margin-bottom:8px;}
.page-header .archive-description{color:var(--ta-color-muted);max-width:640px;margin:0 auto;}
.post-list-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--ta-gap);}

/* Breadcrumbs */
.breadcrumbs{margin-bottom:20px;}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.85rem;color:var(--ta-color-muted);margin:0px;padding:0px;}
.breadcrumbs li{display:flex;align-items:center;gap:6px;}
.breadcrumbs li:not(:last-child)::after{content:"›";color:var(--ta-color-border);font-size:1.1em;}
.breadcrumbs a{color:var(--ta-color-muted);}
.breadcrumbs a:hover{color:var(--ta-color-primary);}
.breadcrumbs li:last-child span{
  color:var(--ta-color-body);max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 12.0 Single Post */
.single-post-header{margin-bottom:28px;}
.single-post-header .cat-badge{margin-bottom:20px;}
.single-post-header .cat-tag{margin-bottom:14px;display:inline-block;}
.entry-subtitle{
  font-size:1.15rem;font-style:italic;color:var(--ta-color-muted);margin:14px 0 20px;line-height:1.6;
}
.single-post-thumb{
  width:100%;aspect-ratio:3/2;border-radius:var(--ta-radius-lg);overflow:hidden;margin-bottom:32px;box-shadow:var(--ta-shadow-md);
}
.single-post-thumb img{width:100%;height:100%;object-fit:cover;}

/* Table of contents */
.ta-toc{
  background:var(--ta-color-surface,#f7f8fa);border:1px solid var(--ta-color-border,#e3e6eb);border-radius:var(--ta-radius-lg);
  padding:20px 24px;margin-bottom:32px;
}
.ta-toc-title{
  font-family:var(--ta-font-heading);font-weight:700;font-size:1rem;margin:0 0 12px;color:var(--ta-color-heading);
}
details.ta-toc > summary.ta-toc-title{
  cursor:pointer;list-style:none;margin:0;display:flex;align-items:center;justify-content:space-between;
}
details.ta-toc > summary.ta-toc-title::-webkit-details-marker{display:none;}
details.ta-toc > summary.ta-toc-title::after{
  content:"";width:10px;height:10px;flex:none;margin-left:12px;
  border-right:2px solid var(--ta-color-body);border-bottom:2px solid var(--ta-color-body);
  transform:rotate(45deg);transition:transform .2s ease;
}
details.ta-toc[open] > summary.ta-toc-title::after{transform:rotate(-135deg);}
details.ta-toc[open] > summary.ta-toc-title{margin-bottom:12px;}
.ta-toc-list{list-style:none;margin:0;padding:0;counter-reset:none;}
.ta-toc-list li{margin:0 0 8px;padding-left:0;}
.ta-toc-list li:last-child{margin-bottom:0;}
.ta-toc-list li a{color:var(--ta-color-body);text-decoration:none;border-bottom:1px dashed transparent;}
.ta-toc-list li a:hover{color:var(--ta-color-primary);border-bottom-color:var(--ta-color-primary);}
.ta-toc-list .ta-toc-level-3{padding-left:20px;font-size:.94rem;}
.ta-toc-list .ta-toc-level-4{padding-left:40px;font-size:.9rem;}

.entry-meta-row{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px;
}
.entry-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--ta-color-muted);font-size:.9rem;align-items:center;margin-bottom:0;}
.entry-meta .author-avatar{border-radius:50%;width:32px;height:32px;object-fit:cover;}
.entry-meta .updated-date{color:var(--ta-color-accent);font-weight:600;}
.entry-meta .author-link{color:var(--ta-color-body);font-weight:600;}
.entry-meta .author-link:hover{color:var(--ta-color-primary);}

/* Share buttons */
.share-buttons{display:flex;align-items:center;gap:10px;}
.share-label{font-size:.85rem;color:var(--ta-color-muted);font-weight:600;}
.share-btn{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:#fff;
  transition:transform var(--ta-transition),box-shadow var(--ta-transition);
}
.share-btn:hover{transform:translateY(-2px);box-shadow:var(--ta-shadow-sm);}
.share-facebook{background:#1877f2;}
.share-twitter{background:#14171a;}
.share-pinterest{background:#e60023;}
.entry-content{font-size:1.08rem;}
.entry-content h2,.entry-content h3{margin-top:1.6em;}
.entry-content blockquote{
  border-left:4px solid var(--ta-color-primary);margin:24px 0;padding:8px 24px;font-style:italic;color:var(--ta-color-ink);background:var(--ta-color-surface);
}
.entry-content img{border-radius:var(--ta-radius-md);}
.entry-content ul,.entry-content ol{padding-left:1.4em;margin-bottom:1.2em;}
.entry-content ul{list-style:disc;}
.entry-content ol{list-style:decimal;}
.entry-content ul ul{list-style:circle;}
.entry-content li{margin-bottom:.4em;}
/* The WordPress core Table block always renders as
   <figure class="wp-block-table"><table>...</table></figure> — the figure
   is the one, authoritative scroll container: it owns the border, radius,
   margin and overflow-x:auto. The <table> itself stays a plain table (no
   independent border/overflow of its own), so there's no double border box
   or two competing scrollbars nested inside each other. */
.entry-content .table-wrap,.entry-content .wp-block-table{
  overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.6em;
  border-radius:var(--ta-radius-md);border:1px solid var(--ta-color-border);
}
.entry-content table{
  width:100%;border-collapse:collapse;background:var(--ta-color-surface);font-size:.95rem;border:none;
}
/* Fallback only for a table pasted directly into content without any
   wrapper (rare — core/editor tables always get the figure above). Without
   this, such a table would have no scroll container of its own and could
   push the whole page wider on mobile. */
.entry-content > table{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.6em;
  border-radius:var(--ta-radius-md);border:1px solid var(--ta-color-border);
}
.entry-content table caption{padding:12px 20px;text-align:left;font-weight:600;color:var(--ta-color-ink);}
.entry-content th,.entry-content td{
  padding:14px 20px;text-align:left;vertical-align:top;
  border:none;border-bottom:1px solid var(--ta-color-border);border-right:1px solid var(--ta-color-border);
}
.entry-content th:last-child,.entry-content td:last-child{border-right:none;}
.entry-content thead th{
  background:var(--ta-color-ink);color:#fff;font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.04em;
  border-bottom:none;border-right:1px solid rgba(255,255,255,.15);
}
.entry-content thead th:last-child{border-right:none;}
.entry-content tbody tr:last-child th,.entry-content tbody tr:last-child td{border-bottom:none;}
.entry-content tbody tr:nth-child(even){background:var(--ta-color-bg);}
.entry-content tbody th{font-weight:600;color:var(--ta-color-ink);background:transparent;}
.post-tags{margin:32px 0;padding-top:24px;border-top:1px solid var(--ta-color-border);display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.post-tags a{
  background:var(--ta-color-bg);padding:6px 14px;border-radius:999px;font-size:.85rem;color:var(--ta-color-body);
}
.post-tags a:hover{background:var(--ta-color-primary);color:#fff;}
.author-box{
  display:flex;gap:20px;background:var(--ta-color-surface);border:1px solid var(--ta-color-border);
  border-radius:var(--ta-radius-md);padding:24px;margin:32px 0;
}
.author-box img{border-radius:50%;width:64px;height:64px;object-fit:cover;}
.post-navigation{display:flex;justify-content:space-between;gap:20px;margin:32px 0;}
.post-navigation a{
  flex:1;padding:18px;border:1px solid var(--ta-color-border);border-radius:var(--ta-radius-md);background:var(--ta-color-surface);
}
.post-navigation .nav-next{text-align:right;}
.post-navigation .nav-subtitle{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ta-color-muted);margin-bottom:4px;}

/* 13.0 Comments */
.comments-area{margin-top:40px;}
.comment-list{list-style:none;}
.comment-body{
  background:var(--ta-color-surface);border:1px solid var(--ta-color-border);border-radius:var(--ta-radius-md);
  padding:20px;margin-bottom:16px;
}
.comment-author{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.comment-author img{border-radius:50%;}
.comment-metadata{font-size:.8rem;color:var(--ta-color-muted);}
.comment-respond{background:var(--ta-color-surface);border:1px solid var(--ta-color-border);border-radius:var(--ta-radius-md);padding:24px;margin-top:24px;}
.comment-form p{margin-bottom:16px;}
ol.children{list-style:none;margin-left:36px;}

/* 14.0 Footer */
.site-footer{
  position:relative;background:var(--ta-color-ink);color:rgba(255,255,255,.68);padding:72px 0 24px;
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--ta-color-primary),var(--ta-color-accent));
}
.footer-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;margin-bottom:48px;}
.footer-grid .widget-title{
  color:#fff;font-size:1rem;letter-spacing:.02em;border-bottom:none;position:relative;
  padding-bottom:14px;margin-bottom:20px;
}
.footer-grid .widget-title::after{
  content:"";position:absolute;left:0;bottom:0;width:32px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--ta-color-primary),var(--ta-color-accent));
}
.footer-grid .widget{background:transparent;border:none;padding:0;margin:0;}
.footer-brand .site-title a{color:#fff;}
.footer-brand p{color:rgba(255,255,255,.55);max-width:320px;line-height:1.7;}
.footer-grid a{color:rgba(255,255,255,.65);}
.footer-grid a:hover{color:#fff;}
.footer-grid ul li{border-bottom:1px solid rgba(255,255,255,.08);}
.footer-grid ul li:last-child{border-bottom:none;}
.footer-grid ul li a{
  display:inline-flex;align-items:center;padding:9px 0;transition:transform var(--ta-transition),color var(--ta-transition);
}
.footer-grid ul li a:hover{transform:translateX(4px);color:#fff;}
.footer-social{display:flex;gap:12px;margin-top:20px;}
.footer-social a{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);
  transition:background var(--ta-transition),color var(--ta-transition),transform var(--ta-transition);
}
.footer-social a:hover{background:var(--ta-color-primary);color:#fff;transform:translateY(-3px);}
.footer-social a svg{display:block;}
.footer-newsletter-form .newsletter-form{
  display:flex;max-width:100%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px;gap:6px;
}
.footer-newsletter-form .newsletter-form input[type="email"]{
  flex:1;min-width:0;width:auto;background:transparent;border:none;border-radius:999px;color:#fff;padding:10px 16px;
}
.footer-newsletter-form .newsletter-form input[type="email"]::placeholder{color:rgba(255,255,255,.45);}
.footer-newsletter-form .newsletter-form input[type="email"]:focus{
  outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.35);
}
.footer-newsletter-form .newsletter-form button{padding:10px 22px;font-size:.9rem;}
/* Honeypot — invisible to real visitors, present in the DOM for bots that
   blindly fill in every field. */
.ta-honeypot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.newsletter-message{margin:10px 0 0;font-size:.85rem;}
.newsletter-message.is-success{color:#8fe3a6;}
.newsletter-message.is-error{color:#ff9d9d;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:12px;font-size:.85rem;color:rgba(255,255,255,.5);
}
.footer-bottom p{margin:0;}
#footer-menu{display:flex;gap:20px;flex-wrap:wrap;}
#footer-menu a{color:rgba(255,255,255,.6);font-size:.85rem;}
#footer-menu a:hover{color:#fff;}

/* 15.0 Pagination */
.pagination-nav{margin-top:40px;}
.pagination-nav .nav-links{
  display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;
}
.pagination-nav .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 16px;
  border-radius:999px;background:var(--ta-color-surface);border:1px solid var(--ta-color-border);color:var(--ta-color-ink);
  font-weight:600;transition:background var(--ta-transition),color var(--ta-transition),border-color var(--ta-transition);
}
.pagination-nav .page-numbers.dots{
  border-color:transparent;background:transparent;min-width:auto;padding:0 4px;color:var(--ta-color-muted);
}
.pagination-nav .page-numbers.current,.pagination-nav .page-numbers:hover{background:var(--ta-color-primary);color:#fff;border-color:var(--ta-color-primary);}
.pagination-nav .page-numbers.dots:hover{background:transparent;color:var(--ta-color-muted);}

/* 16.0 Utilities */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.no-results{text-align:center;padding:64px 0;}
.section-eyebrow{color:var(--ta-color-primary);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;}

/* Back to top button */
.back-to-top{
  position:fixed;right:24px;bottom:24px;z-index:998;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--ta-color-ink);color:#fff;border:none;
  box-shadow:var(--ta-shadow-md);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--ta-transition),transform var(--ta-transition),visibility var(--ta-transition),background var(--ta-transition);
}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.back-to-top:hover{background:var(--ta-color-primary);}
@media (max-width:600px){
  .back-to-top{right:16px;bottom:16px;width:42px;height:42px;}
}

/* 17.0 Check Pricing Box */
.check-price {
  background: #EBF5FB;
  padding: 20px 20px 20px 20px;
  margin: 20px 0;
  font-size: 18px;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
}
.check-price h4 {
    margin: -20px -20px 20px -20px !important;
  padding: 10px 20px;
  background: #3498DB;
  color: #fff;
  font-size: 20px;
}
.check-price .btn {
    font-size: 16px;
    margin-bottom: 5px;
    text-decoration: none;
}
.check-price .btn:link, .check-price .btn:visited {
	display: inline-block;
}
.check-price .btn:hover {
	background: #333;
}
.sale-help {
  font-size: 15px;
  text-align: center;
  margin: 0 0 30px 0 !important;
  color: #999;
}

h4.rank-math-question {
  margin-top: 1.5rem;
}
/* 17.0 Responsive */
@media (max-width:1024px){
  .content-layout{grid-template-columns:1fr;}
  .category-grid{grid-template-columns:repeat(2,1fr);}
  .category-grid.featured-first .post-card:first-child{grid-column:span 2;grid-row:auto;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .post-list-grid{grid-template-columns:1fr;}
  .brand-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:782px){
  .main-navigation{
    position:fixed;top:0;left:0;right:0;bottom:0;background:#fff;
    display:flex;flex-direction:column;padding:90px 24px 24px;overflow-y:auto;overflow-x:visible;z-index:1000;
    /* Slide-in-from-right reveal instead of an abrupt display toggle —
       display can't transition, so the closed state is opacity/transform/
       visibility based, kept non-interactive via pointer-events. */
    transform:translateX(24px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .25s ease,opacity .2s ease,visibility .25s;
  }
  .main-navigation.is-open{
    transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto;
  }
  .main-navigation ul{flex-direction:column;width:100%;}
  .main-navigation li{position:relative;}
  .menu-toggle{display:flex;}

  /* Divider between top-level items, and a soft highlight while a section's
     accordion is open, so the open item stays easy to track while scanning
     a long expanded list. */
  .main-navigation > ul > li{border-bottom:1px solid var(--ta-color-border);}
  .main-navigation > ul > li:last-child{border-bottom:none;}
  .main-navigation > ul > li.submenu-open{background:var(--ta-color-bg);border-radius:var(--ta-radius-sm);}
  .main-navigation > ul > li.submenu-open > a{color:var(--ta-color-primary);}

  .mobile-nav-close{
    display:flex;position:absolute;top:24px;right:24px;width:44px;height:44px;
    align-items:center;justify-content:center;background:var(--ta-color-bg);border:none;border-radius:50%;color:var(--ta-color-ink);
    transition:background var(--ta-transition),transform var(--ta-transition);
  }
  .mobile-nav-close:hover,.mobile-nav-close:active{background:var(--ta-color-primary);color:#fff;transform:rotate(90deg);}

  /* Accordion: every level of submenu (including each level inside a mega
     menu) starts collapsed and only opens once its own .submenu-toggle is
     tapped, via the "submenu-open" class added by main.js. Without this,
     opening one mega item would dump its entire column/link tree onto the
     screen at once. */
  .main-navigation .menu-item-has-children > a{padding-right:56px;}
  .main-navigation .sub-menu{
    position:static;display:none;box-shadow:none;background:none;border:none;padding:0 0 0 16px;
  }
  .main-navigation .menu-item-has-children.submenu-open > .sub-menu{display:block;}

  .submenu-toggle{
    display:flex;position:absolute;top:0;right:0;width:48px;height:48px;
    align-items:center;justify-content:center;background:none;border:none;border-radius:50%;color:var(--ta-color-ink);
    transition:background var(--ta-transition),color var(--ta-transition);
  }
  .submenu-toggle:hover,.submenu-toggle:active{background:var(--ta-color-border);color:var(--ta-color-primary);}
  .submenu-toggle svg{transition:transform var(--ta-transition);}
  .submenu-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

  /* The desktop mega-menu grid becomes a compact 2-column grid on mobile
     instead of the full multi-column layout or a single long stacked list —
     each column heading keeps its own accordion toggle for its link list. */
  .main-navigation li.mega-menu > .sub-menu{
    /* The desktop rule sets width:100vw for a position:absolute panel that
       starts at the viewport edge. Here the panel is back in normal flow
       (position:static), so a leftover 100vw width — measured from its
       in-flow position, inset by the nav's own 24px padding — pushed it
       past the right edge of the screen instead of resizing to fit.
       width:auto lets it size to its actual container instead. */
    position:static;width:auto;background:none;box-shadow:none;border:none;padding:0;
  }
  .main-navigation li.mega-menu.submenu-open > .sub-menu{
    /* padding-left:16px matches the parent trigger's own text indent
       (.main-navigation a has padding:10px 16px), so column headings line
       up under "Tire Reviews" instead of sitting flush at the LI's edge.
       gap is a full override (not just column-gap) — the desktop rule's
       32px row-gap was otherwise still leaking through here. */
    display:grid;grid-template-columns:repeat(2,1fr);gap:12px 16px;padding:0 4px 0 16px;
  }
  .main-navigation li.mega-menu > .sub-menu > .menu-item{position:relative;min-width:0;overflow:visible;}
  .main-navigation li.mega-menu > .sub-menu > .menu-item > a{
    border-bottom:none;margin-bottom:0;padding:10px 36px 10px 0;font-size:.9rem;font-weight:600;text-transform:none;letter-spacing:normal;
    white-space:normal;
  }
  .main-navigation li.mega-menu > .sub-menu > .menu-item > .sub-menu{padding-left:8px;}
  .main-navigation li.mega-menu > .sub-menu > .menu-item > .submenu-toggle{width:32px;height:32px;right:0;top: 7px;}

  /* Account for the WordPress admin toolbar (visible to logged-in users) so the
     sticky header and fullscreen mobile nav sit below it instead of overlapping. */
  body.admin-bar .site-header{top:46px;}
  body.admin-bar .main-navigation{top:46px;}

  .hero-search-form{flex-direction:column;border-radius:var(--ta-radius-md);}
  .hero-search-form .search-submit{border-radius:var(--ta-radius-sm);}
  .category-grid{grid-template-columns:1fr;}
  .category-grid.featured-first .post-card:first-child{grid-column:span 1;}
  /* Cards stack in a single column on mobile (no 2x2 grid to crowd), so
     bring the excerpt back for every card, not just the featured one. */
  .category-grid.featured-first .post-card:not(:first-child) .post-card-excerpt{display:block;}
  .brand-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  /* Stack input/button instead of cramming them into one pill row — at
     narrow widths the row had no room to shrink the input below its
     content-based minimum, so it (and the button after it) overflowed
     past the edge of the screen. */
  .footer-newsletter-form .newsletter-form{flex-direction:column;border-radius:var(--ta-radius-md);}
  .footer-newsletter-form .newsletter-form input[type="email"]{border-radius:var(--ta-radius-sm);}
  .footer-newsletter-form .newsletter-form button{width:100%;}
  /* Tables: no forced min-width/nowrap — let cell text wrap onto multiple
     lines within the narrow column instead of forcing every column to stay
     on one line, which made wide tables require horizontal scrolling and
     crop columns off-screen. width:100% (the default entry-content table
     rule) lets the browser shrink columns and wrap text naturally instead. */
  .entry-content th,.entry-content td{padding:12px 14px;font-size:.88rem;}
  .post-navigation{flex-direction:column;}
  .author-box{flex-direction:column;text-align:center;}
  .author-box img{margin:0 auto;}
}
@media (min-width:783px){
  body.admin-bar .site-header{top:32px;}

  /* Hover-based dropdown/mega-menu reveal — desktop only. Keeping this
     scoped here (rather than unconditional) stops a mobile tap's stuck
     :hover/:focus-within state from overriding the JS accordion toggle.
     Uses opacity/transform/visibility instead of a display toggle so the
     reveal can transition smoothly (display can't be animated). */
  .main-navigation .sub-menu{
    display:block;opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(6px);
    transition:opacity .16s ease,transform .16s ease,visibility .16s;
  }
  .main-navigation li:hover > .sub-menu,
  .main-navigation li:focus-within > .sub-menu{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  }
  .main-navigation li.mega-menu > .sub-menu{display:grid;transform:translateY(10px);}
  .main-navigation li.mega-menu:hover > .sub-menu,
  .main-navigation li.mega-menu:focus-within > .sub-menu{transform:translateY(0);}

  /* Small caret on top-level items with a dropdown/mega panel, so it's clear
     at a glance which are interactive beyond their own link. Scoped to direct
     children of the top-level menu only — mega column headings are already
     permanently expanded on desktop, so a "collapsible" caret on those would
     be misleading. */
  .main-navigation > ul > .menu-item-has-children > a{position:relative;padding-right:34px;}
  .main-navigation > ul > .menu-item-has-children > a::after{
    content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-65%) rotate(45deg);opacity:.55;
    transition:transform var(--ta-transition),opacity var(--ta-transition);
  }
  .main-navigation > ul > .menu-item-has-children:hover > a::after,
  .main-navigation > ul > .menu-item-has-children:focus-within > a::after{
    transform:translateY(-35%) rotate(225deg);opacity:.9;
  }

  /* On desktop each mega column's link list is permanently expanded below
     its heading (no accordion there — only the mobile nav needs one). This
     must stay scoped to desktop: left unconditioned, it was previously
     overriding the mobile accordion's "submenu-open" toggle because it had
     higher selector specificity than the generic show/hide rule.

     Layout-only properties (display/position/etc.) apply unconditionally,
     but opacity/visibility/pointer-events stay closed by default and only
     flip to visible+interactive while the TOP-LEVEL mega item itself is
     hovered/focused (the second rule below). Forcing them open
     unconditionally was a real bug: visibility/pointer-events can be
     overridden by a descendant even while its ancestor is hidden, so those
     nested links became permanent, invisible, hoverable hit-targets — and
     hovering into that dead zone (which can extend down toward the hero
     section) bubbled :hover back up and forced the whole panel open. */
  .main-navigation li.mega-menu > .sub-menu > .menu-item > .sub-menu{
    position:static;display:block;background:none;box-shadow:none;border-radius:0;padding:0;min-width:auto;z-index:auto;
    opacity:0;visibility:hidden;pointer-events:none;transform:none;transition:none;
  }
  .main-navigation li.mega-menu:hover > .sub-menu > .menu-item > .sub-menu,
  .main-navigation li.mega-menu:focus-within > .sub-menu > .menu-item > .sub-menu{
    opacity:1;visibility:visible;pointer-events:auto;
  }
}

/* Wider layout for large desktop monitors (1920x1080 and up). Widening the
   --ta-container custom property (rather than editing .container directly)
   also keeps the mega menu's full-bleed centering calc() — which reads the
   same variable — correctly in sync at this breakpoint. */
@media (min-width:1600px){
  :root{
    --ta-container:1600px;
  }
}