/*
Theme Name: Valtrix Fire Safety Theme
Theme URI: https://valtrix.example.com
Author: Valtrix / Bhimraj Industries
Author URI: https://valtrix.example.com
Description: Custom WordPress theme for Valtrix Fire Safety Solutions — includes pages for Home, About, Products, Manufacturing, Certificate, Industries, Contact and Blog, with PostHog analytics wired into wp_head.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: valtrix
*/

/* Base styles — the React build ships the full design system.
   This stylesheet only provides sensible defaults so the PHP
   templates are readable if used standalone. */

:root {
  --valtrix-red: #cc0605;   /* RAL 3020 Traffic Red */
  --valtrix-black: #000000;
  --valtrix-grey: #d7d7d7;  /* RAL 7035 Light Grey */
  --valtrix-white: #ffffff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #111;
  background: #fff;
  line-height: 1.5;
}
a { color: var(--valtrix-red); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.site-header {
  background: #000; color: #fff; padding: 16px 0;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.site-header .brand { font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: #fff; }
.site-nav ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.site-nav a { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .15em; }
.site-nav a:hover { color: var(--valtrix-red); text-decoration: none; }

.hero {
  background: #000; color: #fff; padding: 80px 0;
}
.hero h1 { font-size: 44px; margin: 0 0 12px; font-weight: 800; }
.hero p { max-width: 700px; opacity: .8; }

.pill {
  display: inline-block; background: var(--valtrix-red); color: #fff;
  padding: 6px 14px; letter-spacing: .3em; text-transform: uppercase;
  font-size: 12px; font-weight: 600; margin-bottom: 20px;
}

main.site-main { padding: 60px 0; }
.site-footer { background: #000; color: #fff; padding: 40px 0; margin-top: 60px; }
.site-footer a { color: #fff; }

.card-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { border: 1px solid #e5e5e5; padding: 20px; background: #fff; }
.card img { width: 100%; height: auto; display: block; }
.card h3 { margin: 12px 0 6px; }

form.valtrix-form { display: grid; gap: 12px; max-width: 560px; }
form.valtrix-form input,
form.valtrix-form textarea {
  padding: 12px; border: 1px solid #ccc; font: inherit; width: 100%;
}
form.valtrix-form button {
  background: var(--valtrix-red); color: #fff; border: 0;
  padding: 14px 22px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; cursor: pointer;
}