/*
Theme Name: Pyro Tech Lite
Theme URI: https://staging.ptechfire.com.au
Author: Unbranded Digital
Description: Lean hand-built rebuild of the Pyro Tech Fire Safety site (Salient replacement). No page builder, no framework.
Version: 1.0.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: ptech-lite
*/

:root {
  --orange: #f5643b;
  --gold: #ffd000;
  --maroon: #801a1f;
  --green: #008000;
  --red: #ff0000;
  --dark: #252525;
  --darker: #1c1c1c;
  --text: #666;
  --heading: #444;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 26px; color: var(--text); background: #fff;
}
h1,h2,h3,h4,h5,h6 { color: var(--heading); font-weight: 600; line-height: 1.3; }
h1 { font-size: 54px; font-weight: 300; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
a { color: var(--orange); text-decoration: none; }
a:hover { color: #d94f2b; }
img { max-width: 100%; height: auto; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ---------- top bars ---------- */
.notice-bar {
  background: var(--orange); color: #fff; text-align: center;
  font-size: 13px; font-weight: 600; padding: 6px 12px;
}
.secondary-bar { background: #fff; border-bottom: 1px solid #e8e8e8; font-size: 12px; }
.secondary-bar .container { display: flex; justify-content: space-between; align-items: center; min-height: 34px; }
.secondary-bar .socials { display: flex; }
.secondary-bar .socials a {
  color: #999; border-right: 1px solid #eee; padding: 6px 10px; display: flex; align-items: center;
}
.secondary-bar .socials a:first-child { border-left: 1px solid #eee; }
.secondary-bar .socials a:hover { color: var(--orange); }
.secondary-bar .socials svg { width: 13px; height: 13px; fill: currentColor; }
.secondary-bar .quick { display: flex; align-items: center; gap: 16px; color: #888; }
.secondary-bar .quick a { color: #888; }
.secondary-bar .quick a.current { color: var(--orange); }
.secondary-bar .phone { color: var(--orange); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.secondary-bar .phone svg { width: 14px; height: 14px; fill: var(--orange); }

/* ---------- header ---------- */
.site-header { background: #fff; }
.site-header .container { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; padding-bottom: 12px; }
.site-header .logo img { height: 108px; width: auto; display: block; }
.site-header .head-right { color: #bbb; }
.site-header .head-right svg { width: 18px; height: 18px; fill: #bbb; }

/* ---------- hero slider ---------- */
.hero { position: relative; height: 600px; overflow: hidden; background: #111; }
.hero .slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s ease; display: flex; align-items: center;
}
.hero .slide.active { opacity: 1; }
.hero .slide .container { width: 100%; }
.hero .slide h2 {
  color: #fff; font-size: 40px; font-weight: 300; max-width: 560px;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

/* ---------- promo tiles ---------- */
.tiles { padding: 40px 0; }
.tiles .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tile {
  position: relative; min-height: 185px; padding: 18px; color: #fff;
  background: var(--maroon); overflow: hidden;
}
.tile.shield-bg { background-color: #926028 !important; background-position: center; background-size: contain; background-repeat: no-repeat; }
.tile h4 { color: #fff; font-size: 18px; font-weight: 600; }
.tile .mini-shield { float: right; width: 50px; height: 50px; margin-left: 8px; }

/* ---------- badges strip ---------- */
.badges { padding: 30px 0 46px; }
.badges .container { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; }
.badge { text-align: center; width: 132px; }
.badge img { width: 130px; height: 130px; object-fit: contain; background: #fff; }
.badge .cap {
  display: block; margin-top: 8px; background: var(--green); color: #fff;
  font-size: 11px; font-weight: 700; padding: 4px 6px; line-height: 15px;
}
.badge .cap.red { background: var(--red); }

/* ---------- banner strips ---------- */
.banner { background-size: cover; background-position: center right; padding: 8% 0; position: relative; }
.banner.banner-lg { padding: 9.5% 0; }
.banner::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.3); }
.banner .container { max-width: 1220px; position: relative; }
.banner h2 {
  background: rgba(0,0,0,.5); border: 3px solid #fff; color: #fff;
  font-size: 28px; font-weight: 400; padding: 4px 14px 4px 10px;
  width: 42%; min-width: 420px; margin-left: 90px; margin-bottom: 12px;
}
.banner h2 span { font-weight: 400; }
.banner.dark { background-color: #000; }

/* ---------- footer ---------- */
.footer-widgets { background: var(--dark); padding: 48px 0; }
.footer-widgets .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; max-width: 1000px; }
.accred-card { background: #fff; display: flex; flex-direction: column; }
.accred-card .logo-wrap { display: flex; align-items: center; justify-content: center; height: 208px; padding: 18px; }
.accred-card img { max-height: 165px; width: auto; max-width: 100%; object-fit: contain; }
.accred-card .cap {
  background: var(--green); color: #fff; text-align: center; font-size: 12px;
  font-weight: 700; padding: 10px 6px; margin-top: auto;
}
.accred-card .cap.red { background: var(--red); }
.footer-bottom { background: var(--darker); color: #777; font-size: 12px; padding: 26px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { color: #999; }
.footer-bottom a:hover { color: #fff; }
.footer-bottom .socials { display: flex; gap: 16px; }
.footer-bottom .socials svg { width: 14px; height: 14px; fill: #777; }
.footer-bottom .socials a:hover svg { fill: #fff; }

/* ---------- content pages ---------- */
.page-content { padding: 56px 0 72px; }
.page-content .container { max-width: 900px; }
.page-content h1 { font-size: 40px; margin-bottom: 24px; }
.page-content h2, .page-content h3 { margin: 26px 0 10px; }
.page-content p { margin-bottom: 14px; }
.page-content ul, .page-content ol { margin: 0 0 14px 22px; }

/* ---------- contact page ---------- */
.map-wrap iframe { display: block; width: 100%; height: 440px; border: 0; }
.contact-section { background: #f4f4f4; padding: 46px 0 64px; }
.contact-section .container { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1100px; }
.contact-section h1 { font-size: 44px; margin-bottom: 30px; }
.contact-details { width: 100%; border-collapse: collapse; background: #fff; }
.contact-details td { border: 1px solid #eee; padding: 14px 16px; vertical-align: middle; }
.contact-details td.icon { width: 76px; text-align: center; }
.contact-details svg { width: 26px; height: 26px; fill: var(--orange); }
.wpcf7 label { display: block; margin-bottom: 16px; color: #555; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
  display: block; width: 100%; margin-top: 6px; background: #eee; border: 1px solid #ddd;
  padding: 9px 10px; font: inherit; color: #333;
}
.wpcf7 textarea { min-height: 200px; }
.wpcf7 input[type="submit"], .wpcf7 button {
  background: #333; color: #fff; border: 0; padding: 9px 22px; font: inherit; cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: #000; }

/* ---------- responsive ---------- */
@media (max-width: 990px) {
  .tiles .container { grid-template-columns: repeat(2, 1fr); }
  .footer-widgets .container { grid-template-columns: repeat(2, 1fr); }
  .contact-section .container { grid-template-columns: 1fr; }
  .banner h2 { margin-left: 0; width: 80%; min-width: 0; }
  h1 { font-size: 40px; }
}
@media (max-width: 620px) {
  .tiles .container { grid-template-columns: 1fr; }
  .footer-widgets .container { grid-template-columns: 1fr; }
  .hero { height: 420px; }
  .hero .slide h2 { font-size: 26px; }
  .banner h2 { font-size: 20px; width: 100%; }
  .site-header .logo img { height: 64px; }
  .secondary-bar .container { flex-direction: column; padding: 6px 20px; gap: 4px; }
}