/* ===============================
   RESIN CALCULATORS - RESIN TEAL THEME
   Color Palette:
   - Primary: #0891b2 (Teal - ocean resin)
   - Accent: #8b5cf6 (Purple - pigments/creativity)
   - Gold: #f59e0b (Amber - metallic mica)
   - Background: #fefce8 (Warm cream)
   - Cards: #ffffff (White)
================================ */

/* ===============================
   Base & Reset
================================ */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f8fffe;
  color: #0f172a;
}

/* ===============================
   Layout
================================ */

.container {
  max-width: 520px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Reduce space between header and main content */
main.container {
  margin-top: 20px;
}

/* ===============================
   Header (Ad-safe)
================================ */

.site-header {
  background: transparent;
  border-bottom: none;
  margin: 0;
  padding: 8px 0;
}

/* Reserved space for future ads */
.header-ad-slot {
  min-height: 0;         /* No ad yet */
  width: 100%;
}

/* Header inner */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.header-nav a {
  font-weight: 500;
  text-decoration: none;
}

/* Logo */
.site-header img {
  height: 38px;
  width: auto;
  margin-right: 6px;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-link:hover {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.site-nav a {
  font-weight: 500;
  text-decoration: none;
  color: #0e7490;
  opacity: 0.85;
}

.site-nav a:hover {
  text-decoration: underline;
  opacity: 1;
  color: #0891b2;
}

.site-nav {
  margin-left: auto;
}

.site-nav a {
  margin-left: 18px;
  font-size: 0.95rem;
  font-weight: 500;
}

/* ===============================
   Header spacing fix
================================ */

.site-header .container {
  margin: 0 auto;
  padding: 0;
}

.header-nav a[href="/employee-vs-contractor-guide"] {
  font-weight: 600;
}

/* ===============================
   Typography
================================ */

h1 {
  text-align: center;
  font-size: 2rem;
  color: #0891b2;
  margin-bottom: 10px;
}

h2 {
  color: #0891b2;
  margin-top: 40px;
  margin-bottom: 15px;
}

h3 {
  color: #0891b2;
  margin-top: 30px;
}

p {
  font-size: 1rem;
  line-height: 1.6;
  margin: 10px 0;
}

.hint {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #64748b;
  text-align: center;
  font-style: italic;
}

.intro {
  text-align: center;
  margin-bottom: 30px;
  color: #475569;
}

/* ===============================
   Forms & Inputs
================================ */

label {
  display: block;
  margin-bottom: 20px;
  font-weight: 600;
  color: #0f172a;
}

input[type="number"],
input[type="date"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  transition: all 0.2s ease;
}

input:focus {
  outline: none;
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

/* ===============================
   Select (Dropdowns)
================================ */

select {
  width: 100%;
  margin-top: 6px;
  padding: 12px 40px 12px 12px;
  font-size: 1rem;
  font-family: inherit;
  color: #0f172a;
  background-color: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  transition: all 0.2s ease;

  /* Remove default OS styling */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Custom dropdown arrow */
  background-image:
    linear-gradient(45deg, transparent 50%, #475569 50%),
    linear-gradient(135deg, #475569 50%, transparent 50%);
  background-position:
    calc(100% - 22px) calc(50% - 3px),
    calc(100% - 16px) calc(50% - 3px);
  background-size:
    6px 6px,
    6px 6px;
  background-repeat: no-repeat;
}

select:focus {
  outline: none;
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

/* Disabled state */
select:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Ensure label spacing consistency */
label select {
  margin-top: 6px;
}

/* ===============================
   Hub & Cross-Navigation Links
================================ */

.hub-link {
  margin: 18px 0 28px;
  font-size: 0.95rem;
  color: #475569;
  text-align: center;
}

.hub-link a {
  font-weight: 600;
  color: #0891b2;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hub-link a:hover {
  text-decoration: underline;
  color: #0e7490;
}

/* ===============================
   Results Box
================================ */

.result {
  margin-top: 25px;
  padding: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
  border-radius: 10px;
  border-left: 3px solid #0891b2;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.1);
  font-size: 1.05rem;
}

.result p {
  margin: 8px 0;
}

/* ===============================
   Tool List (Homepage)
================================ */

.tools {
  margin-top: 40px;
}

.tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tool-list li {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 15px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.06);
  transition: all 0.2s ease;
}

.tool-list li:hover {
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.12);
  border-color: #0891b2;
}

/* Tool list item description — subtitle below calculator name */
.tool-list-desc {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.4;
}

.tool-list a {
  display: block;
  padding: 16px;
  color: inherit;
  text-decoration: none;
}

.tool-list a:hover {
  background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%);
}

/* ===============================
   Footer
================================ */

.site-footer {
  background: transparent;
  border-top: none;
  margin-top: 40px;
}

.site-footer .container {
  text-align: center;
  padding: 10px 0;
}

.footer-links {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 6px;
  line-height: 1.5;
}

.footer-links a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  text-decoration: underline;
  color: #0891b2;
}

.footer-copy {
  font-size: 0.75rem;
  color: #94a3b8;
  margin: 0;
}

/* ===============================
   Mobile
================================ */

@media (max-width: 400px) {
  .container {
    margin: 25px auto;
    padding: 0 15px;
  }

  h1 {
    font-size: 1.6rem;
  }
}

/* ===============================
   Mobile Header
================================ */

@media (max-width: 480px) {

  .header-inner {
    padding: 6px 0;
  }

  .site-header img {
    height: 32px;
  }
}

/* =========================
   Tool list grouping labels
   ========================= */

.tool-group {
  list-style: none;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.6;
  color: #64748b;
}

.tool-group + li {
  margin-top: 0.25rem;
}

.related-calculators {
  margin-top: 2.5rem;
  font-size: 0.9rem;
  color: #475569;
}

.related-calculators a {
  font-weight: 500;
  color: #0891b2;
}

/* ===============================
   Homepage Enhancements
   =============================== */

/* Hero section */
.hero {
  margin-bottom: 35px;
}

.hero h1 {
  margin-bottom: 12px;
  text-shadow: 0 2px 4px rgba(139, 92, 246, 0.08);
}

.hero .intro {
  font-size: 1.05rem;
}

/* ===============================
   Category Hub
   =============================== */

.categories {
  margin-top: 40px;
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.category-card {
  display: block;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.06);
  transition: all 0.2s ease;
}

.category-card:hover {
  background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%);
  border-color: #0891b2;
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.12);
}

.category-card h3 {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 1.1rem;
  color: #0891b2;
}

.category-card p {
  margin: 0;
  font-size: 0.95rem;
  color: #475569;
}

/* ===============================
   Popular Tools
   =============================== */

.popular-tools {
  margin-top: 45px;
}

/* Reuse existing tool-list styles */
.popular-tools .tool-list li {
  margin-bottom: 10px;
}

/* ===============================
   Authority Content
   =============================== */

.authority {
  margin-top: 45px;
  font-size: 0.95rem;
  color: #475569;
}

.authority p {
  margin-bottom: 12px;
}

.authority a {
  font-weight: 500;
  color: #0891b2;
}

/* Resin Supplies callout box */
.supplies-callout {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  padding: 20px 24px;
  border-radius: 8px;
  margin: 30px 0;
  border-left: 4px solid #0891b2;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.1);
}

.supplies-callout h2 {
  margin-top: 0;
  font-size: 1.3rem;
  color: #0e7490;
}

.supplies-callout p {
  margin-bottom: 16px;
  color: #164e63;
}

.supplies-callout p:last-child {
  margin-bottom: 0;
}

/* ===============================
   FAQ Section
   =============================== */

.faq {
  margin-top: 45px;
}

.faq h3 {
  margin-top: 22px;
  margin-bottom: 6px;
  font-size: 1rem;
  color: #0891b2;
}

.faq p {
  margin-top: 0;
  font-size: 0.95rem;
  color: #475569;
}

/* ===============================
   Comparison Tables (SEO)
================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.95rem;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.08);
}

thead {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
}

th,
td {
  padding: 12px 14px;
  text-align: left;
}

th {
  font-weight: 600;
  color: #0e7490;
}

tbody tr:not(:last-child) {
  border-bottom: 1px solid #e2e8f0;
}

tbody tr strong {
  color: #0f172a;
}

@media (max-width: 480px) {
  table {
    font-size: 0.9rem;
  }
}

/* ===============================
   Tooltip (calculator hints)
================================ */

.tooltip {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  cursor: help;
  font-size: 0.9em;
  color: #0891b2;
  opacity: 0.7;
}

.tooltip:hover {
  opacity: 1;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 125%;
  transform: translateX(-50%);
  min-width: 220px;
  max-width: 280px;
  padding: 8px 10px;
  background: #0f172a;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  border-radius: 6px;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;
}

.tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 115%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #0f172a transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}

/* ===============================
   Primary Tool Highlight Box
   =============================== */

.primary-tool {
  margin: 1.75rem 0 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #0891b2;
  background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.08);
}

.primary-tool__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.primary-tool__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  line-height: 1.35;
}

.primary-tool__title a {
  color: #0891b2;
  text-decoration: none;
  transition: color 0.2s ease;
}

.primary-tool__title a:hover {
  text-decoration: underline;
  color: #0e7490;
}

.primary-tool__description {
  font-size: 0.9rem;
  color: #475569;
  margin: 0;
}

.primary-tool + section {
  margin-top: 2.5rem;
}

/* ===============================
   Employee vs Contractor Teaser
================================ */

.calculator-teaser {
  margin: 40px 0;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.1);
}

.calculator-teaser h2 {
  font-size: 1.5rem;
  margin-bottom: 12px;
  color: #0891b2;
  text-align: center;
}

.calculator-teaser p {
  text-align: center;
  font-size: 0.95rem;
  color: #475569;
  margin-bottom: 20px;
}

/* Form inside teaser */
.calculator-teaser .calculator-form {
  display: grid;
  gap: 16px;
}

.calculator-teaser .calculator-form label {
  margin-bottom: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

.calculator-teaser .calculator-form input[type="number"] {
  padding: 10px 12px;
  font-size: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  width: 100%;
}

.calculator-teaser .teaser-result {
  margin-top: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(8, 145, 178, 0.08);
  font-size: 0.95rem;
}

.calculator-teaser .teaser-result p {
  margin: 6px 0;
  line-height: 1.4;
}

.calculator-teaser .teaser-result strong {
  color: #0f172a;
}

@media (max-width: 480px) {
  .calculator-teaser {
    padding: 16px;
  }

  .calculator-teaser h2 {
    font-size: 1.3rem;
  }

  .calculator-teaser p {
    font-size: 0.9rem;
  }

  .calculator-teaser .calculator-form input[type="number"] {
    font-size: 0.95rem;
    padding: 8px 10px;
  }
}

.btn-primary {
  display: inline-block;
  padding: 12px 22px;
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  color: #0891b2;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid #a5f3fc;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
  border-color: #0891b2;
}

/* ===============================
   Calculator breakdown toggle
================================ */

.calc-toggle {
  border: none;               /* .btn-secondary handles look */
  cursor: pointer;
}

.calc-breakdown {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.calc-breakdown .muted {
  color: #64748b;
  font-weight: 500;
  font-size: 0.95rem;
}


/* ===============================
   Call-to-Action Wrappers
=============================== */

/* Hero section CTA */
.hero-cta {
  text-align: center;
  margin-top: 20px;
}

/* Calculator pages / teaser CTA */
.calculator-teaser-cta,
.calculator-cta {
  text-align: center;
  margin: 18px 0 28px;
}

/* Guide page CTA */
.guide-cta {
  text-align: center;
  margin: 18px 0 28px;
}

/* FAQ page CTA */
.faq-cta {
  text-align: center;
  margin: 18px 0 28px;
}

/* Button styles are reused from btn-primary / btn-secondary */

/* ===============================
   Lead Capture / Email Form
================================ */
.lead-capture {
  margin-top: 30px;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.1);
}

.lead-capture form {
  display: grid;
  gap: 16px;
}

.lead-capture label {
  font-weight: 600;
  font-size: 0.95rem;
}

.lead-capture input[type="text"],
.lead-capture input[type="email"] {
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  width: 100%;
}

.lead-capture button {
  display: inline-block;
  padding: 12px 22px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
  transition: all 0.2s ease;
}

.lead-capture button:hover {
  background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}


/* ===============================
   Download Report Form Spacing
================================ */
#downloadReportForm label {
  display: block;
  margin-bottom: 6px;  /* space below label */
  font-weight: 600;
}

#downloadReportForm input {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 16px; /* space below input */
  font-size: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

#downloadReportForm button {
  margin-top: 10px;
}

/* ===============================
   Resin Calculators (Shared)
   Patch for calculator-form + text inputs + result box
================================ */

/* Make calculator forms consistent (matches existing style on other sites) */
.calculator-form {
  display: grid;
  gap: 16px;
}

/* Override global label spacing (global label margin-bottom:20px is too large for forms) */
.calculator-form label {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Style text inputs used for money fields */
.calculator-form input[type="text"],
.calculator-form input[type="email"],
.calculator-form input[type="number"],
.calculator-form input[type="date"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  font-size: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  transition: all 0.2s ease;
}

.calculator-form input:focus,
.calculator-form select:focus {
  outline: none;
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

/* Result container (same look as your .result box) */
.calculator-result {
  margin-top: 14px;
  padding: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%);
  border-radius: 10px;
  border-left: 3px solid #0891b2;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.1);
  font-size: 1.05rem;
}

.calculator-result p {
  margin: 8px 0;
}

/* Generic muted helper (you use .muted outside of .calc-breakdown) */
.muted {
  color: #64748b;
  font-weight: 500;
  font-size: 0.95rem;
}

/* Optional: tighten checkbox label spacing inside calculator */
.calculator-form label input[type="checkbox"] {
  margin: 0;
}

/* ===============================
   Resin Calculator Homepage Styles
   =============================== */

/* Quick Start Box */
.quick-start-box {
  margin: 28px 0 35px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  border-left: 4px solid #0891b2;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.1);
}

.quick-start-label {
  margin: 0 0 6px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #155e75;
}

.quick-start-text {
  margin: 0;
  font-size: 0.95rem;
  color: #164e63;
  line-height: 1.5;
}

.quick-start-text a {
  color: #0e7490;
  font-weight: 600;
  text-decoration: underline;
}

/* Section Headers */
.calculators-section {
  margin-top: 45px;
}

.section-heading {
  font-size: 1.5rem;
  color: #0891b2;
  margin: 0 0 6px 0;
  text-align: center;
}

.section-intro {
  text-align: center;
  color: #475569;
  font-size: 0.95rem;
  margin: 0 0 22px 0;
}

/* Calculator Card Grid */
.calculator-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (min-width: 640px) {
  .calculator-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Calculator Cards */
.calc-card {
  display: block;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.06);
  transition: all 0.2s ease;
  position: relative;
}

.calc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(8, 145, 178, 0.15);
  border-color: #0891b2;
}

.calc-card__icon {
  font-size: 2rem;
  margin-bottom: 10px;
  line-height: 1;
}

.calc-card__title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0891b2;
  margin: 0 0 8px 0;
}

.calc-card__desc {
  font-size: 0.9rem;
  color: #475569;
  margin: 0;
  line-height: 1.5;
}

.calc-card__tag {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
  color: #0e7490;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid #a5f3fc;
}

/* Primary Card (Featured Calculator) */
.calc-card--primary {
  background: linear-gradient(135deg, #ffffff 0%, #ecfeff 100%);
  border-color: #0891b2;
  border-width: 2px;
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.12);
}

.calc-card--primary:hover {
  border-color: #0e7490;
  box-shadow: 0 6px 24px rgba(8, 145, 178, 0.2);
}

/* Urgent Card (Gold accent) */
.calc-card--urgent {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border-color: #f59e0b;
  border-width: 2px;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12);
}

.calc-card--urgent:hover {
  border-color: #d97706;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.2);
}

.calc-card__tag--urgent {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border-color: #fcd34d;
}

/* Tips Section */
.tips-section {
  margin-top: 45px;
}

.tips-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 20px;
}

@media (min-width: 640px) {
  .tips-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.tip-card {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(8, 145, 178, 0.06);
  transition: all 0.2s ease;
}

.tip-card:hover {
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.1);
  border-color: #0891b2;
}

.tip-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #0891b2;
  margin: 0 0 8px 0;
}

.tip-card p {
  font-size: 0.9rem;
  color: #475569;
  margin: 0;
  line-height: 1.5;
}

/* Mobile optimizations */
@media (max-width: 480px) {
  .quick-start-box {
    padding: 14px 16px;
  }

  .section-heading {
    font-size: 1.3rem;
  }

  .calc-card {
    padding: 16px;
  }

  .calc-card__title {
    font-size: 1rem;
  }

  .calc-card__desc {
    font-size: 0.85rem;
  }
}

/* ===============================
   Resin Ratio Calculator — new classes
   Add these to the end of main.css
================================ */

/* Custom ratio inputs wrapper — hidden by default, shown via JS */
.ratio-custom-inputs {
  display: none;
}

/* Checkbox label row (ratio buffer checkbox) */
.ratio-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #0f172a;
  cursor: pointer;
}

.ratio-checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

/* Primary result output — large Part A / Part B display */
.ratio-result-primary {
  font-size: 1.35rem;
  color: #0891b2;
  line-height: 1.5;
  margin: 10px 0 8px;
}

/* Info note — blue tint, for 2:1 weight ratio advisory */
.ratio-info-note {
  margin-top: 12px;
  padding: 10px 14px;
  background: #ecfeff;
  border-left: 3px solid #0891b2;
  border-radius: 6px;
}

.ratio-info-note p {
  margin: 0;
  font-size: 0.9rem;
  color: #164e63;
}

/* Warning note — amber tint, for volume measuring advisory */
.ratio-warning-note {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
}

.ratio-warning-note p {
  margin: 0;
  font-size: 0.9rem;
  color: #78350f;
}

.ratio-warning-note a {
  color: #92400e;
  font-weight: 600;
}

/* Mixing steps box — reuses the f9fafb background pattern from existing calculators */
.ratio-steps-box {
  margin-top: 14px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.ratio-steps-box p {
  margin: 0 0 5px 0;
  font-size: 0.9rem;
}

.ratio-steps-box p:last-child {
  margin-bottom: 0;
}

/* ===============================
   Sitemap Page — new classes
   Add these to the end of main.css
   (after the ratio-calculator additions)
================================ */

/* Stats grid inside .supplies-callout on the sitemap page */
.sitemap-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 16px 0 20px;
  text-align: center;
}

.sitemap-stat__number {
  font-size: 2rem;
  font-weight: 700;
  color: #0891b2;
  line-height: 1.1;
}

.sitemap-stat__label {
  font-size: 0.9rem;
  color: #475569;
  margin-top: 4px;
}

.sitemap-cta {
  text-align: center;
  margin: 20px 0 0;
}

/* ===============================
   Bubble Troubleshooter — new classes
   Add these to the end of main.css
   (after the sitemap additions)
   
   NOTE: The troubleshooter result HTML uses only
   inline styles and existing classes (muted, calculator-result,
   quick-start-box, tips-grid, tip-card, authority, tool-list,
   faq, related-calculators, hub-link, hero, intro, primary-tool).
   The severity badges and diagnosis cards are inline-styled in JS.
   
   No new CSS classes are strictly required for this page.
   The block below is provided in case you want named classes
   for the severity badges instead of inline styles in JS.
================================ */

/* Optional: named severity badge classes for bubble troubleshooter */
.bubble-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  margin-right: 8px;
}

.bubble-badge--high   { background: #dc3545; }
.bubble-badge--medium { background: #f59e0b; }
.bubble-badge--low    { background: #6c757d; }

.bubble-cause-card {
  margin-top: 10px;
  padding: 14px 16px;
  border-left-width: 3px;
  border-left-style: solid;
  border-radius: 6px;
  background: #f9fafb;
}

/* ===============================
   Food Safe Epoxy Resin Page
   Add these to the end of main.css
   (after the bubble-troubleshooter additions)

   NOTE: The verdict box uses inline styles for dynamic
   colors set by JavaScript. These classes are provided
   for any static fallback styling you want to apply.
================================ */

/* Base verdict box */
.food-safety-verdict {
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 16px;
  border-left-width: 4px;
  border-left-style: solid;
}

/* Safe — green tint */
.food-safety-verdict--safe {
  background: #f0fdf4;
  border-left-color: #16a34a;
}

/* Conditional — amber tint */
.food-safety-verdict--conditional {
  background: #fffbeb;
  border-left-color: #f59e0b;
}

/* Unsafe — red tint */
.food-safety-verdict--unsafe {
  background: #fef2f2;
  border-left-color: #dc2626;
}

/* Never — red tint (same as unsafe, different label) */
.food-safety-verdict--never {
  background: #fef2f2;
  border-left-color: #dc2626;
}

/* ===============================
   Epoxy Cure Time Page
   Add these to the end of main.css
   (after the food-safety-verdict additions)

   Only one new utility class is needed.
   All other elements reuse existing classes:
   quick-start-box, primary-tool, calculator-form,
   calculator-result, tips-grid, tip-card,
   supplies-callout, faq, related-calculators,
   authority, table, muted, hub-link, hero, intro.
================================ */

/* Responsive cure-time result grid
   The JS inline grid works on desktop; this ensures
   it stacks cleanly on very narrow screens (<360px) */
@media (max-width: 360px) {
  .cure-time-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ===============================
   Resin Color Mixing Chart Page
   Add these to the end of main.css
   (after the cure-time-grid addition)
================================ */

/*
  No new layout classes are required for this page.
  The Color Mixer tool uses only existing classes:
    .primary-tool, .primary-tool__label,
    .calculator-form, .calculator-result,
    .quick-start-box, .quick-start-label, .quick-start-text,
    .tips-grid, .tip-card,
    .related-calculators, .tool-list, .tool-list-desc,
    .authority, .supplies-callout,
    .faq, .muted,
    .hub-link, .hero, .intro,
    table, thead, tbody, th, td

  The color swatch and result output use inline styles only
  (dynamic hex values set by JavaScript require inline style).

  One optional utility class is provided below for the
  shimmer overlay gradient, in case you prefer a named class
  over the inline style in the JS output.
*/

/* Optional: shimmer overlay on color swatch */
.color-swatch-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.35) 0%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 100%
  );
  pointer-events: none;
  border-radius: inherit;
}

/* Optional: color swatch container if you want a named class */
.color-swatch {
  width: 100%;
  height: 90px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}

.color-swatch__label {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 1;
  text-align: center;
  padding: 0 12px;
}