/* =========================================================
   TOOLSHUB PRO — ADDITIONS LAYER
   Loaded after main.css. Consumes the new CSS variables produced by
   inc/customizer-dynamic-css.php so every rule here is theme-mod driven
   instead of hard-coded, and overrides only what actually needs to change:
   compact spacing, full color coverage, responsive tool grid controls,
   responsive/stable ad containers, search sizing, and overflow guards.
   Nothing in main.css is removed — this file only refines it.
   ========================================================= */

/* ---------- Global color + font coverage ---------- */
body{
  background:var(--th-bg);
  color:var(--th-text);
  font-family:var(--th-font);
  font-size:var(--th-fs-body, 16px);
}
h1,h2,h3,h4,h5,h6{ color:var(--th-heading); font-family:var(--th-font-heading); }
h1{ font-size:var(--th-fs-h1); }
h2{ font-size:var(--th-fs-h2); }
h3{ font-size:var(--th-fs-h3); }
h4{ font-size:var(--th-fs-h4); }
a{ color:var(--th-link); }
a:hover{ color:var(--th-link-hover); }
.container{ max-width:var(--th-max); }

/* ---------- Compact spacing (requirement #3, #11) ---------- */
.section{ padding:var(--th-section-spacing-mobile, 28px) 0; }
@media (min-width:860px){
  .section{ padding:var(--th-section-spacing-desktop, 56px) 0; }
}
.section-header{ margin-bottom:calc(var(--th-heading-spacing, 18px) * 0.9); }
.section-title{ color:var(--th-section-heading); }
.hero-section{ padding:var(--th-hero-spacing, 48px) 0 calc(var(--th-hero-spacing, 48px) * 0.75); background:var(--th-hero-bg); }
.alt-bg{ background:var(--th-section-bg); }
.entry-content p, .blog-typography p{ margin-bottom:var(--th-paragraph-spacing, 18px); }
.tool-article > *{ margin-bottom:var(--th-article-spacing, 28px); }

/* ---------- Header ---------- */
.site-header{
  background:var(--th-header-bg);
  color:var(--th-header-text);
  border-bottom-color:var(--th-header-border);
  height:calc(var(--th-header-h, 72px) + (var(--th-header-padding, 0px) * 2));
}
.header-inner{ height:calc(var(--th-header-h, 72px) + (var(--th-header-padding, 0px) * 2)); }
.site-logo-text{ color:var(--th-header-text); }
.nav-link{ color:var(--th-header-text); font-family:var(--th-font-nav); font-size:var(--th-fs-nav); }
.icon-btn{ color:var(--th-header-icons); }
.header-search-toggle .icon{ color:var(--th-search-icon); }
.mobile-menu-toggle .icon{ color:var(--th-menu-icon); }
.custom-logo{ width:var(--th-logo-width); height:auto; }

/* ---------- Buttons ---------- */
.btn-primary{ background:var(--th-btn-bg); color:var(--th-btn-text); font-family:var(--th-font-button); font-size:var(--th-fs-button); }
.btn-primary:hover{ background:var(--th-btn-hover-bg); color:var(--th-btn-hover-text); }

/* ---------- Tool grid (requirement #9) ---------- */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(var(--th-grid-cols-mobile, 2), minmax(0,1fr));
  row-gap:var(--th-grid-row-gap, 14px);
  column-gap:var(--th-grid-col-gap, 14px);
}
@media (min-width:640px){
  .tools-grid{ grid-template-columns:repeat(var(--th-grid-cols-tablet, 3), minmax(0,1fr)); }
}
@media (min-width:1080px){
  .tools-grid{ grid-template-columns:repeat(var(--th-grid-cols-desktop, 4), minmax(0,1fr)); }
}
.tool-card-title{ overflow-wrap:anywhere; word-break:break-word; }

/* ---------- Tool cards (requirement #10) ---------- */
.tool-card{
  background:var(--th-card-bg);
  border-color:var(--th-card-border);
  border-width:var(--th-card-border-width, 1px);
  border-style:solid;
  border-radius:var(--th-card-radius, 14px);
  box-shadow:var(--th-card-shadow, 0 2px 8px rgba(15,23,42,.06));
  padding:var(--th-card-padding, 16px);
  min-height:var(--th-card-min-height, 0);
  font-family:var(--th-font-card);
}
.tool-card:hover{ background:var(--th-card-hover-bg); border-color:var(--th-card-hover-border); }
.tool-card-icon{ width:var(--th-card-icon-container, 44px); height:var(--th-card-icon-container, 44px); }
.tool-card-icon svg{ width:var(--th-card-icon-size, 40px); height:var(--th-card-icon-size, 40px); }
.tool-card-title{ color:var(--th-card-title); font-size:var(--th-fs-tool-title); }
.tool-card-excerpt{ color:var(--th-card-desc); font-size:var(--th-fs-tool-desc); }
.tool-card-meta .badge{ color:var(--th-card-category); font-size:var(--th-fs-category); }
.tool-card-open{ color:var(--th-card-open-link); font-size:var(--th-fs-tool-desc); margin-top:2px; }

/* ---------- Search (requirement #12) ---------- */
.search-field{ font-size:var(--th-fs-search); color:var(--th-search-text); }
.search-input-wrap{
  background:var(--th-search-bg);
  border:1px solid var(--th-search-border);
  border-radius:var(--th-search-radius, 14px);
  height:var(--th-search-height, 52px);
  max-width:100%;
}
.hero-search{ margin-top:var(--th-search-spacing, 24px); max-width:100%; }
.search-input-wrap .icon-btn, .search-input-wrap button{ background:var(--th-search-button); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ font-size:var(--th-fs-breadcrumb); max-width:var(--th-max); }

/* ---------- Article ---------- */
.entry-content, .blog-typography, .tool-article{
  background:var(--th-article-bg);
  color:var(--th-article-text);
  font-family:var(--th-font-article);
  line-height:var(--th-article-line-height, 1.7);
  max-width:var(--th-max-article);
  margin-inline:auto;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.blog-typography h1, .blog-typography h2, .blog-typography h3, .blog-typography h4{
  color:var(--th-article-heading);
}
.entry-content a, .blog-typography a{ color:var(--th-article-links); }
.entry-content th, .entry-content td, .blog-typography th, .blog-typography td{ border-color:var(--th-article-border); }
.entry-content li + li, .blog-typography li + li{ margin-top:var(--th-list-spacing, 8px); }
.tool-title{ font-family:var(--th-font-heading); }
.tool-intro{ max-width:var(--th-max-article); }

/* Duplicate decorative icon above tool title — optional hide (requirement #14) */
.hide-duplicate-tool-icon .tool-icon-lg{ display:none; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--th-footer-bg); padding-top:var(--th-footer-padding, 40px); }
.footer-widget-title{ color:var(--th-footer-heading); }
.footer-about-text{ color:var(--th-footer-text); }
.footer-menu a{ color:var(--th-footer-links); font-size:var(--th-fs-footer-text); }
.footer-menu a:hover{ color:var(--th-footer-link-hover); }
.footer-bottom{ border-top-color:var(--th-footer-border); background:var(--th-copyright-bg); color:var(--th-copyright-text); }
.footer-credit{ color:var(--th-copyright-text); }
.social-icon{ color:var(--th-social-icon); }

/* ---------- Ad slots: responsive, overflow-safe, CLS-stable (req #16, #20, #21) ---------- */
.ad-slot{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  margin:var(--th-ad-spacing, 20px) auto;
  overflow:hidden; /* clip only the ad container itself, never the page */
}
.ad-slot-body{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.ad-slot-body > *{ max-width:100% !important; box-sizing:border-box; }
.ad-slot-body iframe{ max-width:100%; }

/* Reserve height to prevent CLS while the ad network's script loads. */
.ad-slot-desktop-only .ad-slot-body,
.ad-slot-article .ad-slot-body{ min-height:var(--th-ad-height-desktop, 90px); }

.ad-slot-mobile-only{ display:none; }
@media (max-width:639px){
  .ad-slot-desktop-only{ display:none; }
  .ad-slot-mobile-only{ display:block; }
  .ad-slot-mobile-only .ad-slot-body{ min-height:var(--th-ad-height-mobile, 60px); }
}

/* ---------- Overflow guards: images, tables, code, tool embeds (req #23–26, #62) ---------- */
img, video, iframe, embed, object{ max-width:100%; height:auto; }
table{ display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
pre, code{ max-width:100%; overflow-x:auto; }
.toolshub-tool-container{ max-width:100%; overflow-x:auto; box-sizing:border-box; }
.toolshub-tool-container iframe{ width:100%; max-width:100%; }
html, body{ overflow-x:hidden; max-width:100%; }