/*
 Theme Name:   Top Health Gear – Kadence Child
 Theme URI:    https://tophealthgear.com
 Description:  Kadence child theme for Top Health Gear – affiliate health & wellness review site.
 Author:        Top Health Gear
 Author URI:   https://tophealthgear.com
 Template:     kadence
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 Text Domain:  thg-child
*/

/* =============================================================
   TABLE OF CONTENTS
   1.  Design tokens
   2.  Global reset / base
   3.  Typography
   4.  Site header & navigation
   5.  Hero section (homepage)
   6.  Category filter pills
   7.  Post card grid
   8.  Single post – article layout
   9.  Expert-reviewed banner
  10.  Author bio box
  11.  Best-pick box (shortcode)
  12.  Affiliate CTA button
  13.  Comparison / review table
  14.  Reading time & updated date meta
  15.  Sidebar
  16.  Footer
  17.  Category accent colours
  18.  Responsive (≤768 px)
   ============================================================= */

/* -------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------- */
:root {
  /* Brand */
  --thg-green:          #1D9E75;
  --thg-green-dark:     #0F6E56;
  --thg-green-deeper:   #085041;
  --thg-green-light:    #E1F5EE;
  --thg-green-pale:     #F2FAF7;

  /* Neutrals */
  --thg-white:          #ffffff;
  --thg-bg:             #F8FAF9;
  --thg-border:         #E4EAE7;
  --thg-text:           #1A1F1C;
  --thg-text-muted:     #5A6B63;
  --thg-text-light:     #8FA39A;

  /* Category accents */
  --thg-sleep:          #185FA5;
  --thg-sleep-bg:       #E6F1FB;
  --thg-recovery:       #993C1D;
  --thg-recovery-bg:    #FAECE7;
  --thg-fitness:        #534AB7;
  --thg-fitness-bg:     #EEEDFE;
  --thg-tips:           #BA7517;
  --thg-tips-bg:        #FAEEDA;

  /* Spacing */
  --thg-radius:         8px;
  --thg-radius-lg:      12px;
  --thg-radius-xl:      16px;

  /* Typography */
  --thg-font-body:      'Inter', 'Segoe UI', system-ui, sans-serif;
  --thg-font-heading:   'Inter', 'Segoe UI', system-ui, sans-serif;
  --thg-font-mono:      'JetBrains Mono', 'Fira Code', monospace;
}

/* -------------------------------------------------------------
   2. GLOBAL RESET / BASE
   ------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--thg-bg);
  color: var(--thg-text);
  font-family: var(--thg-font-body);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--thg-green-dark);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--thg-green);
}

/* -------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--thg-font-heading);
  font-weight: 600;
  line-height: 1.25;
  color: var(--thg-text);
  letter-spacing: -0.01em;
}

/* Single post headline */
.single .entry-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  line-height: 1.2;
  max-width: 820px;
}

/* Article body copy */
.entry-content {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--thg-text);
}

.entry-content p {
  margin-bottom: 1.35rem;
}

.entry-content h2 {
  font-size: 1.45rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--thg-green-light);
}

.entry-content h3 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.35rem;
}

.entry-content li {
  margin-bottom: 0.45rem;
  line-height: 1.65;
}

/* Inline code */
.entry-content code {
  font-family: var(--thg-font-mono);
  font-size: 0.88em;
  background: var(--thg-green-light);
  color: var(--thg-green-deeper);
  padding: 0.15em 0.45em;
  border-radius: 4px;
}

/* Blockquote – pull-quote style */
.entry-content blockquote {
  border-left: 4px solid var(--thg-green);
  margin: 1.75rem 0;
  padding: 1rem 1.25rem;
  background: var(--thg-green-pale);
  border-radius: 0 var(--thg-radius) var(--thg-radius) 0;
  font-size: 1.05rem;
  color: var(--thg-green-deep);
  font-style: italic;
}

/* -------------------------------------------------------------
   4. SITE HEADER & NAVIGATION
   ------------------------------------------------------------- */
.site-header,
#masthead {
  background: var(--thg-white);
  border-bottom: 1px solid var(--thg-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}

/* Logo text treatment */
.site-branding .site-title a,
.header-logo-wrap .site-title a {
  color: var(--thg-green-dark) !important;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

/* Nav links */
.primary-menu-container .menu-item > a,
nav.main-navigation .menu-item > a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--thg-text-muted);
  padding: 0.5rem 0.75rem;
  border-radius: var(--thg-radius);
  transition: background 0.15s, color 0.15s;
}

.primary-menu-container .menu-item > a:hover,
nav.main-navigation .menu-item > a:hover {
  background: var(--thg-green-light);
  color: var(--thg-green-dark);
}

.primary-menu-container .menu-item.current-menu-item > a,
nav.main-navigation .menu-item.current-menu-item > a {
  color: var(--thg-green);
  background: var(--thg-green-pale);
}

/* Dropdown sub-menus */
.primary-menu-container .sub-menu {
  border: 1px solid var(--thg-border);
  border-radius: var(--thg-radius-lg);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 0.5rem;
}

.primary-menu-container .sub-menu .menu-item > a {
  border-radius: var(--thg-radius);
  font-size: 0.85rem;
}

/* -------------------------------------------------------------
   5. HERO SECTION (HOMEPAGE)
   ------------------------------------------------------------- */
.thg-hero {
  background: linear-gradient(135deg, var(--thg-green-light) 0%, var(--thg-green-pale) 100%);
  padding: 4.5rem 2rem;
  text-align: center;
}

.thg-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--thg-green-dark);
  background: var(--thg-white);
  border: 1px solid var(--thg-border);
  padding: 0.35rem 0.9rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
}

.thg-hero__title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--thg-green-deeper);
  max-width: 760px;
  margin: 0 auto 1rem;
  line-height: 1.15;
}

.thg-hero__subtitle {
  font-size: 1.05rem;
  color: var(--thg-green-dark);
  max-width: 560px;
  margin: 0 auto 1.75rem;
  line-height: 1.6;
}

.thg-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--thg-green);
  color: var(--thg-white) !important;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: var(--thg-radius);
  transition: background 0.15s, transform 0.1s;
}

.thg-hero__cta:hover {
  background: var(--thg-green-dark);
  transform: translateY(-1px);
  color: var(--thg-white) !important;
}

.thg-hero__trust {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.thg-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--thg-green-dark);
  font-weight: 500;
}

/* -------------------------------------------------------------
   6. CATEGORY FILTER PILLS
   ------------------------------------------------------------- */
.thg-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.5rem 0;
}

.thg-cat-filter__pill {
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.85rem;
  border-radius: 20px;
  border: 1px solid var(--thg-border);
  color: var(--thg-text-muted);
  background: var(--thg-white);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.thg-cat-filter__pill:hover,
.thg-cat-filter__pill.active {
  background: var(--thg-green);
  border-color: var(--thg-green);
  color: var(--thg-white);
}

/* -------------------------------------------------------------
   7. POST CARD GRID
   ------------------------------------------------------------- */
.loop-entry,
.kadence-loop-entry,
article.post {
  background: var(--thg-white);
  border: 1px solid var(--thg-border);
  border-radius: var(--thg-radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.loop-entry:hover,
article.post:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Featured image */
.loop-entry .post-thumbnail img,
article.post .post-thumbnail img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.loop-entry:hover .post-thumbnail img,
article.post:hover .post-thumbnail img {
  transform: scale(1.03);
}

/* Card body padding */
.loop-entry .entry-content-wrap,
.loop-entry .entry-header,
article.post .entry-header {
  padding: 1rem 1.25rem;
}

/* Card title */
.loop-entry .entry-title a,
article.post .entry-title a {
  font-size: 1rem;
  font-weight: 600;
  color: var(--thg-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.loop-entry .entry-title a:hover {
  color: var(--thg-green);
}

/* Category badge on cards */
.loop-entry .entry-taxonomy a,
.loop-entry .cat-links a {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  background: var(--thg-green-light);
  color: var(--thg-green-dark);
  margin-bottom: 0.5rem;
  text-decoration: none;
}

/* Card meta – author + date */
.loop-entry .entry-meta,
article.post .entry-meta {
  font-size: 0.78rem;
  color: var(--thg-text-light);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--thg-border);
}

.loop-entry .entry-meta .author a {
  color: var(--thg-text-muted);
  font-weight: 500;
}

/* Excerpt */
.loop-entry .entry-summary,
article.post .entry-summary {
  font-size: 0.875rem;
  color: var(--thg-text-muted);
  line-height: 1.6;
  margin-top: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------------------------------------------------------------
   8. SINGLE POST – ARTICLE LAYOUT
   ------------------------------------------------------------- */
.single .content-area {
  max-width: 820px;
}

/* Featured image – rounded */
.single .post-thumbnail img {
  border-radius: var(--thg-radius-lg);
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  margin-bottom: 2rem;
}

/* Single post meta row */
.single .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--thg-text-muted);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--thg-border);
}

.single .entry-meta a {
  color: var(--thg-green-dark);
  font-weight: 500;
}

/* -------------------------------------------------------------
   9. EXPERT-REVIEWED BANNER
   ------------------------------------------------------------- */
.thg-reviewed-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--thg-green-pale);
  border: 1px solid #A3D9C6;
  border-radius: var(--thg-radius);
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: var(--thg-green-deeper);
  margin-bottom: 1.75rem;
  line-height: 1.5;
}

.thg-reviewed-banner svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--thg-green);
}

.thg-reviewed-banner strong {
  font-weight: 600;
  color: var(--thg-green-dark);
}

/* -------------------------------------------------------------
  10. AUTHOR BIO BOX
   ------------------------------------------------------------- */
.kadence-author-box,
.author-box,
.wp-block-kadence-author-box {
  background: var(--thg-white);
  border: 1px solid var(--thg-border);
  border-left: 4px solid var(--thg-green);
  border-radius: var(--thg-radius-lg);
  padding: 1.5rem;
  margin: 2.5rem 0;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.kadence-author-box img,
.author-box img,
.author-box .author-avatar img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--thg-green-light);
}

.kadence-author-box .author-name,
.author-box .author-name,
.author-box h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--thg-text);
  margin: 0 0 0.25rem;
}

.kadence-author-box .author-credentials,
.author-box .author-description {
  font-size: 0.85rem;
  color: var(--thg-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* Credentials badge (shown below name) */
.thg-author-cred {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--thg-green-dark);
  background: var(--thg-green-light);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  margin-bottom: 0.5rem;
}

/* -------------------------------------------------------------
  11. BEST-PICK BOX (SHORTCODE OUTPUT)
   ------------------------------------------------------------- */
.thg-best-pick-box {
  background: var(--thg-green-pale);
  border: 2px solid var(--thg-green);
  border-radius: var(--thg-radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.75rem 0;
  position: relative;
}

.thg-best-pick-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--thg-green);
  color: var(--thg-white);
  padding: 0.2rem 0.65rem;
  border-radius: 4px;
  margin-bottom: 0.65rem;
}

.thg-best-pick-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--thg-green-deeper);
  margin: 0 0 1rem;
  line-height: 1.3;
}

/* -------------------------------------------------------------
  12. AFFILIATE CTA BUTTON
   ------------------------------------------------------------- */
.thg-affiliate-btn,
.wp-block-button__link,
.entry-content .thg-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--thg-green);
  color: var(--thg-white) !important;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  border-radius: var(--thg-radius);
  border: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-decoration: none !important;
}

.thg-affiliate-btn:hover,
.wp-block-button__link:hover {
  background: var(--thg-green-dark);
  transform: translateY(-1px);
}

.thg-affiliate-btn svg {
  flex-shrink: 0;
}

/* Secondary / outline variant */
.thg-affiliate-btn--outline {
  background: transparent;
  color: var(--thg-green) !important;
  border: 2px solid var(--thg-green);
}

.thg-affiliate-btn--outline:hover {
  background: var(--thg-green-light);
}

/* -------------------------------------------------------------
  13. COMPARISON / REVIEW TABLE
   ------------------------------------------------------------- */
.entry-content table,
.thg-review-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 1.75rem 0;
  border-radius: var(--thg-radius-lg);
  overflow: hidden;
  border: 1px solid var(--thg-border);
}

.entry-content table thead th,
.thg-review-table thead th {
  background: var(--thg-green);
  color: var(--thg-white);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.75rem 1rem;
  text-align: left;
}

.entry-content table tbody tr:nth-child(even),
.thg-review-table tbody tr:nth-child(even) {
  background: var(--thg-green-pale);
}

.entry-content table tbody tr:hover,
.thg-review-table tbody tr:hover {
  background: var(--thg-green-light);
}

.entry-content table td,
.entry-content table th,
.thg-review-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--thg-border);
  vertical-align: top;
  line-height: 1.5;
}

/* "Winner" row highlight */
.thg-review-table tr.thg-winner td {
  background: var(--thg-green-light);
  font-weight: 600;
  color: var(--thg-green-deeper);
}

.thg-review-table tr.thg-winner td:first-child::before {
  content: '★ ';
  color: var(--thg-green);
}

/* Checkmarks / crosses */
.thg-check  { color: var(--thg-green);       font-weight: 700; }
.thg-cross  { color: #D85A30;                font-weight: 700; }

/* Rating stars */
.thg-stars {
  color: #EF9F27;
  font-size: 1rem;
  letter-spacing: 1px;
}

/* -------------------------------------------------------------
  14. READING TIME & UPDATED DATE META
   ------------------------------------------------------------- */
.thg-reading-time,
.thg-updated-date {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--thg-text-light);
  font-weight: 500;
}

.thg-reading-time svg,
.thg-updated-date svg {
  flex-shrink: 0;
  color: var(--thg-green);
}

/* -------------------------------------------------------------
  15. SIDEBAR
   ------------------------------------------------------------- */
.sidebar .widget {
  background: var(--thg-white);
  border: 1px solid var(--thg-border);
  border-radius: var(--thg-radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.sidebar .widget-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--thg-green-dark);
  border-bottom: 2px solid var(--thg-green-light);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

/* Sticky sidebar on desktop */
@media ( min-width: 1024px ) {
  .sidebar {
    position: sticky;
    top: 80px;
  }
}

/* -------------------------------------------------------------
  16. FOOTER
   ------------------------------------------------------------- */
.site-footer,
#colophon {
  background: var(--thg-green-deeper);
  color: rgba(255,255,255,0.75);
  padding: 3rem 2rem 2rem;
  margin-top: 4rem;
}

.site-footer a {
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  transition: color 0.15s;
}

.site-footer a:hover {
  color: var(--thg-white);
}

.site-footer .footer-title,
.site-footer .widget-title {
  color: var(--thg-white);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.75rem;
}

.site-footer .site-info {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1.25rem;
  margin-top: 2rem;
}

/* Disclaimer text in footer */
.thg-footer-disclaimer {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  line-height: 1.6;
  margin-top: 0.75rem;
}

/* -------------------------------------------------------------
  17. CATEGORY ACCENT COLOURS
      Body class thg-cat-{slug} overrides the green accent
   ------------------------------------------------------------- */

/* Sleep & Tracking */
.thg-cat-sleep-tracking .entry-taxonomy a,
.thg-cat-sleep-tracking .cat-links a {
  background: var(--thg-sleep-bg);
  color: var(--thg-sleep);
}

/* Recovery & Pain Relief */
.thg-cat-recovery-pain-relief .entry-taxonomy a,
.thg-cat-recovery-pain-relief .cat-links a {
  background: var(--thg-recovery-bg);
  color: var(--thg-recovery);
}

/* Fitness / Massagers */
.thg-cat-massager .entry-taxonomy a,
.thg-cat-fitness-gears .entry-taxonomy a,
.thg-cat-massager .cat-links a {
  background: var(--thg-fitness-bg);
  color: var(--thg-fitness);
}

/* Tips */
.thg-cat-tips .entry-taxonomy a,
.thg-cat-tips .cat-links a {
  background: var(--thg-tips-bg);
  color: var(--thg-tips);
}

/* Single post heading underline accent per category */
.thg-cat-sleep-tracking .entry-content h2 { border-color: var(--thg-sleep-bg); }
.thg-cat-recovery-pain-relief .entry-content h2 { border-color: var(--thg-recovery-bg); }
.thg-cat-massager .entry-content h2,
.thg-cat-fitness-gears .entry-content h2 { border-color: var(--thg-fitness-bg); }
.thg-cat-tips .entry-content h2 { border-color: #e1f5ee; }

/* -------------------------------------------------------------
  18. RESPONSIVE (≤ 768 px)
   ------------------------------------------------------------- */
@media ( max-width: 768px ) {
  .thg-hero {
    padding: 2.5rem 1.25rem;
  }

  .thg-hero__trust {
    gap: 0.85rem;
  }

  .single .entry-title {
    font-size: 1.5rem;
  }

  .kadence-author-box,
  .author-box {
    flex-direction: column;
    gap: 0.85rem;
  }

  .kadence-author-box img,
  .author-box img {
    width: 56px;
    height: 56px;
  }

  .entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .thg-reviewed-banner {
    font-size: 0.8rem;
  }
}