/*
Theme Name: HomeWelder
Theme URI: https://homewelder.com
Author: HomeWelder
Author URI: https://homewelder.com
Description: Real-world welding guides for the home shop. Industrial-themed WordPress theme converted from a React/Vite/Tailwind source. Pairs Archivo display type with Inter body and JetBrains Mono accents over a gunmetal/charcoal palette with weld-blue and safety-yellow highlights.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: homewelder
Tags: industrial, blog, welding, custom-colors, custom-menu, featured-images, full-width-template
*/

/* ============================================================ */
/* Imported / mirrored from src/index.css                       */
/* ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --color-gunmetal: #1C1F26;
  --color-charcoal: #0E0F12;
  --color-weld-blue: #2B7FFF;
  --color-weld-blue-hover: #1A6AE6;
  --color-safety-yellow: #FFB800;
  --color-industrial-cream: #F5F5F2;
  --color-surface: #FFFFFF;

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: "Archivo", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

html, body { margin: 0; padding: 0; }

body {
  background-color: var(--color-industrial-cream);
  color: var(--color-gunmetal);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom industrial scrollbar (mirrors src/index.css) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--color-charcoal); }
::-webkit-scrollbar-thumb { background: var(--color-gunmetal); border: 1px solid var(--color-charcoal); }
::-webkit-scrollbar-thumb:hover { background: var(--color-weld-blue); }

.text-balance { text-wrap: balance; }

/* line-clamp safety net (Tailwind v3 CDN provides these too) */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* WordPress baseline resets that the original React app got from Vite/Tailwind preflight */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* Header scroll-state and mobile-menu helpers (replace the
   useState/useEffect logic in Header.tsx). Driven by assets/js/theme.js */
.hw-header { padding-top: 1.25rem; padding-bottom: 1.25rem; transition: padding 0.2s ease; }
.hw-header.is-scrolled { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.hw-mobile-menu { display: none; }
.hw-mobile-menu.is-open { display: block; }


/* ============================================================ */
/* Prose / article-body fallback styles (in case Tailwind        */
/* typography plugin fails to load from CDN). Mirrors the         */
/* spacing applied via prose-h2:mt-12 etc. classes.               */
/* ============================================================ */
.hw-prose { font-size: 1.0625rem; line-height: 1.75; color: #374151; }
.hw-prose p { margin: 0 0 1.25em 0; }
.hw-prose p:first-child { font-size: 1.1875rem; line-height: 1.65; color: #1C1F26; font-weight: 500; margin-bottom: 1.5em; }
.hw-prose h2 {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #1C1F26;
  font-size: 1.875rem;
  line-height: 1.2;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #E5E7EB;
}
.hw-prose h3 {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-weight: 700;
  color: #1C1F26;
  font-size: 1.375rem;
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.hw-prose ul, .hw-prose ol { margin: 0 0 1.25em 1.25em; padding: 0; }
.hw-prose li { margin: 0.25em 0; }
.hw-prose a { color: #2B7FFF; text-decoration: underline; text-underline-offset: 2px; }
.hw-prose a:hover { color: #1A6AE6; }
.hw-prose strong { color: #1C1F26; font-weight: 700; }
.hw-prose figure { margin: 2rem 0; }
.hw-prose figure img { width: 100%; height: auto; border: 2px solid #1C1F26; }
.hw-prose table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.95rem; }
.hw-prose table thead { background: #1C1F26; color: #fff; }
.hw-prose table th { padding: 0.75rem 1rem; text-align: left; font-family: "Archivo", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 0.8125rem; letter-spacing: 0.05em; }
.hw-prose table td { padding: 0.75rem 1rem; border-bottom: 1px solid #E5E7EB; vertical-align: top; }
.hw-prose table tr:last-child td { border-bottom: none; }
.hw-prose .wp-block-rank-math-faq-block { margin-top: 2rem; }
.hw-prose .rank-math-faq-item { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #E5E7EB; }
.hw-prose .rank-math-faq-item:last-child { border-bottom: none; }
.hw-prose .rank-math-question {
  font-family: "Archivo", "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1875rem;
  color: #1C1F26;
  margin: 0 0 0.5rem 0;
}
.hw-prose .rank-math-answer p { margin: 0; color: #4B5563; }