/*
Theme Name: Paramount Environmental
Theme URI: https://example.com/paramount-environmental
Author: Paramount Environmental + ChatGPT
Author URI: https://example.com
Description: Clean, accessible, mobile-first WordPress theme for asbestos, lead, and mold testing companies. Includes a Services content type, contact form handler, and ready-to-use templates.
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: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paramount
Tags: custom-logo, custom-menu, one-column, two-columns, responsive-layout, accessibility-ready, block-styles, block-patterns
*/

/* Root variables */
:root{
  --brand:#003f0f;
  --brand-700:#00310b;
  --accent:#f6b732;
  --ink:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-alt:#f8fafc;
  --ring:#0ea5e9;
  --radius:12px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

html{box-sizing:border-box;scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font: 16px/1.6 var(--font);
}
a{color:var(--brand); text-decoration:none}
a:hover, a:focus{ text-decoration:underline}
img{max-width:100%; height:auto; display:block}
.site-wrap{ max-width:1200px; margin:0 auto; padding:0 20px }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #e5e7eb;
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0 }
.site-brand{
  display:flex; align-items:center; gap:12px; font-weight:700; font-size:1.05rem
}
.site-brand .tag{ display:inline-block; padding:2px 8px; border-radius:999px; background:var(--bg-alt); color:var(--muted); font-size:.78rem }
.nav-toggle{ display:none; border:1px solid #e5e7eb; padding:8px 10px; border-radius:8px; background:#fff }
.primary-nav{ display:flex; gap:18px; align-items:center }
.primary-nav a{ padding:8px 6px; border-radius:8px }
.primary-nav a.button{ background:var(--brand); color:#fff; padding:10px 14px; box-shadow: var(--shadow) }
.primary-nav a.button:hover{ background:var(--brand-700) }

@media (max-width: 820px){
  .nav-toggle{ display:inline-block }
  .primary-nav{
    display:none; position:absolute; top:100%; left:0; right:0; background:#fff; border-bottom:1px solid #e5e7eb;
    padding:10px 20px 20px;
  }
  .primary-nav.open{ display:block }
  .primary-nav a{ display:block; padding:12px 4px }
}

/* Hero */
.hero{
  padding: clamp(48px, 6vw, 96px) 0;
  background: linear-gradient(0deg, rgba(11,93,74,.04), rgba(11,93,74,.04)), url('');
}
.hero .eyebrow{ color:var(--brand); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem }
.hero h1{ margin:.3em 0; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height:1.1 }
.hero p{ margin: 0 0 1.5rem; color:var(--muted) }
.hero .cta{ display:flex; gap:12px; flex-wrap:wrap }
.button{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:10px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; font-weight:600;
}
.button.primary{ background:var(--brand); color:#fff }
.button.primary:hover{ background:var(--brand-700) }
.button.secondary{ border-color:#e5e7eb; background:#fff }
.button.secondary:hover{ border-color:#d1d5db; }

/* Sections */
.section{ padding: clamp(28px, 5vw, 64px) 0 }
.section .section-head{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px }
.kicker{ text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--brand); font-size:.82rem }
.section h2{ margin:.2em 0 .3em; font-size: clamp(1.4rem, 2.8vw, 2rem) }
.section p.lead{ color:var(--muted); margin:0 }

/* Cards / Grids */
.grid{ display:grid; gap:18px; grid-template-columns: repeat(12, 1fr) }
.col-4{ grid-column: span 4 }
.col-6{ grid-column: span 6 }
.col-12{ grid-column: span 12 }
@media (max-width:900px){ .col-4{ grid-column: span 6 } }
@media (max-width:640px){ .col-4, .col-6{ grid-column: span 12 } }

.card{
  border:1px solid #e5e7eb; border-radius: var(--radius); background:#fff; box-shadow: var(--shadow);
  padding:18px
}
.card h3{ margin:.2em 0 .3em; font-size:1.15rem }
.badge{ display:inline-block; font-size:.75rem; background:var(--bg-alt); padding:4px 8px; border-radius:999px; color:var(--muted) }

/* Footer */
.site-footer{ background:var(--bg-alt); border-top:1px solid #e5e7eb; padding:28px 0; margin-top:40px }
.site-footer small{ color:var(--muted) }

/* Content widths */
.entry{ max-width: 800px; }
.entry img{ border-radius:10px }

/* Forms */
form .field{ margin-bottom:14px }
label{ display:block; font-weight:600; margin-bottom:6px }
input[type=text], input[type=email], input[type=tel], textarea{
  width:100%; padding:12px 12px; border:1px solid #e5e7eb; border-radius:10px; font:inherit
}
textarea{ min-height:160px; resize:vertical }
input:focus, textarea:focus{ outline:2px solid var(--ring); outline-offset:2px; border-color:transparent }
.notice{ padding:12px; border-radius:8px; background:#ecfeff; border:1px solid #bae6fd; color:#075985; }
.error{ background:#fef2f2; border-color:#fecaca; color:#7f1d1d }
*/