/* ============================================================
   Tool / dashboard page styling
   Covers the "gir-*" class names used throughout the migrated
   calculator, dashboard, and heatmap pages. These classes came
   from the original WordPress build; the matching CSS lived in a
   plugin-generated stylesheet that isn't part of a content export,
   so this file restyles them to match the rest of the site rather
   than leaving them unstyled.
   ============================================================ */

.tool-page { padding: 2rem 0 4rem; }
.tool-page__breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.tool-page__breadcrumb a { color: var(--teal); }
.tool-page__breadcrumb span { margin: 0 0.3rem; }
.tool-page__title { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.4rem; }
.tool-page__dek {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--text-muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}
.tool-page__body { font-size: 1rem; }
.tool-page__body h2 { font-size: 1.5rem; margin: 2em 0 0.6em; }
.tool-page__body h3 { font-size: 1.2rem; margin: 1.6em 0 0.5em; }
.tool-page__body p { margin: 0 0 1.1em; line-height: 1.6; }
.tool-page__body ul, .tool-page__body ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.tool-page__body img { max-width: 100%; height: auto; }
.tool-page__body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 0.92rem; }
.tool-page__body th, .tool-page__body td { border: 1px solid var(--rule); padding: 0.5em 0.7em; text-align: left; }
.tool-page__body th { background: var(--paper-raised); font-weight: 600; }

/* Containers / wrappers / sections — the structural shells */
.tool-page__body [class*="-container"],
.tool-page__body [class*="-wrapper"],
.tool-page__body [class*="-section"]:not([class*="btn"]),
.tool-page__body [class*="-portal"],
.tool-page__body [class*="-area"] {
  max-width: 100%;
}
.tool-page__body [class$="-hub"],
.tool-page__body [class*="hub-content"],
.tool-page__body [class*="-block"],
.tool-page__body [class*="-masterclass"] {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: 1.5rem;
  margin: 1.5rem 0;
}

/* Cards / boxes / panels */
.tool-page__body [class*="-card"],
.tool-page__body [class*="-box"]:not([class*="chart-box"]),
.tool-page__body [class*="-panel"] {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
}
.tool-page__body [class*="-grid"] {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tool-page__body [class*="-col"] { min-width: 0; }

/* Headers / titles within embedded content */
.tool-page__body [class*="-header"]:not(.masthead__main),
.tool-page__body [class*="-title"],
.tool-page__body [class*="card-header"] {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.tool-page__body [class*="sub-title"] {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Buttons */
.tool-page__body [class*="-btn"] {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.6rem 1.1rem;
  background: var(--brass-bright);
  color: #fff !important;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none !important;
}
.tool-page__body [class*="-btn"]:hover { background: var(--brass); }

/* Accordions / FAQs */
.tool-page__body [class*="accordion"],
.tool-page__body [class*="faq"] {
  border: 1px solid var(--rule);
  background: #fff;
}
.tool-page__body [class*="faq-item"],
.tool-page__body [class*="accordion"] > div {
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 1.1rem;
}
.tool-page__body [class*="faq-item"]:last-child { border-bottom: 0; }

/* Disclaimers / disclosures / compliance notes */
.tool-page__body [class*="disclaimer"],
.tool-page__body [class*="disclosure"],
.tool-page__body [class*="compliance"] {
  font-size: 0.82rem;
  color: var(--text-muted);
  background: var(--paper-raised);
  border-left: 3px solid var(--brass);
  padding: 0.8rem 1rem;
  margin: 1rem 0;
}

/* Affiliate / promo / CTA blocks */
.tool-page__body [class*="affiliate"],
.tool-page__body [class*="promo"],
.tool-page__body [class*="cta"],
.tool-page__body [class*="offer-tag"],
.tool-page__body [class*="partner-badge"] {
  background: var(--ink);
  color: var(--text-on-ink);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}
.tool-page__body [class*="affiliate"] a,
.tool-page__body [class*="promo"] a,
.tool-page__body [class*="cta"] a {
  color: var(--brass-bright);
}

/* Formulas */
.tool-page__body [class*="formula"] {
  background: var(--paper-raised);
  border: 1px dashed var(--rule);
  padding: 1rem;
  text-align: center;
  font-family: var(--font-mono);
  margin: 1rem 0;
  overflow-x: auto;
}

/* Chart / ticker / widget areas need real height so Chart.js / TradingView
   widgets have room to render into */
.tool-page__body [class*="chart-box"],
.tool-page__body [class*="ticker"],
.tool-page__body canvas {
  max-width: 100%;
}
.tool-page__body [class*="chart-box"] { min-height: 300px; margin: 1.5rem 0; }

/* Inputs, for the calculators themselves */
.tool-page__body input[type="number"],
.tool-page__body input[type="text"],
.tool-page__body select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #fff;
}
.tool-page__body label { font-size: 0.85rem; font-weight: 600; display: block; margin: 0.6rem 0 0.3rem; }

@media (max-width: 700px) {
  .tool-page__body [class*="-grid"] { grid-template-columns: 1fr; }
}


/* Featured image selected in the CMS for standalone pages */
.page__featured-image{margin:1.25rem 0 2rem;overflow:hidden;border-radius:14px;background:#f1f5f4}
.page__featured-image img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover}
.gir-new-tool{max-width:760px;margin:1.5rem auto;padding:clamp(16px,3vw,28px);border:1px solid #dbe3e0;border-radius:16px;background:#fff;box-shadow:0 4px 18px rgba(15,23,42,.05);color:#17211f}
.gir-new-tool .tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.gir-new-tool label{display:block;font-weight:600;font-size:.92rem;margin:0 0 6px}
.gir-new-tool input,.gir-new-tool select{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cbd5d1;border-radius:8px;background:#fff;color:#17211f;font:inherit;box-sizing:border-box}
.gir-new-tool button{min-height:44px;padding:10px 16px;border:0;border-radius:8px;background:#205f53;color:#fff;font-weight:700;cursor:pointer}
.gir-new-tool .tool-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.gir-new-tool .tool-result{margin-top:18px;padding:16px;border-radius:10px;background:#edf5f1;border:1px solid #cfe1d8}
.gir-new-tool .tool-result strong{font-size:1.25rem}
.gir-new-tool .tool-note{font-size:.9rem;color:#53615b;line-height:1.6}
@media(max-width:600px){.gir-new-tool .tool-grid{grid-template-columns:1fr}}