/* ==========================================================================
   Perth Power Equipment — Shared Styles
   Tokens · base · typography · buttons · .pp-wrap
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;1,800&family=Barlow:wght@400;500;600;700&display=swap');

/* ---------- Tokens ---------- */
:root {
  --pp-red:           #e10b17;
  --pp-red-dark:      #b8070f;
  --pp-ink:           #0d0d0f;
  --pp-ink-2:         #17181b;
  --pp-ink-3:         #22242a;
  --pp-paper:         #ffffff;
  --pp-mist:          #f3f3f4;
  --pp-line:          #e3e3e6;
  --pp-text:          #1d1e22;
  --pp-muted:         #5d606a;
  --pp-on-dark:       #f5f5f6;
  --pp-on-dark-muted: #b8bac2;
  --pp-radius:        6px;
  --pp-max:           1200px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html  { scroll-behavior: smooth; overflow-x: hidden; }
body  { margin: 0; overflow-x: hidden; font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 17px; line-height: 1.6; color: var(--pp-text); background: var(--pp-paper); -webkit-font-smoothing: antialiased; }
img   { max-width: 100%; height: auto; display: block; }
a     { color: inherit; }
h1, h2, h3 { margin: 0; }
h3    { font-size: 20px; font-weight: 700; line-height: 1.25; }
p     { margin: 0 0 14px; }

/* Hello Elementor .site-content reset */
.site-content { padding: 0 !important; margin: 0 !important; }

/* ---------- Layout ---------- */
.pp-wrap {
  max-width: var(--pp-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Typography helpers ---------- */
.pp-display {
  font-family: "Barlow Condensed", Impact, sans-serif;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
h2.pp-display { font-size: clamp(34px, 5vw, 54px); margin-bottom: 14px; }

.pp-kicker {
  font-family: "Barlow", sans-serif;
  color: var(--pp-red);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
  margin: 0 0 8px;
}

.pp-lead {
  font-family: "Barlow", sans-serif;
  font-size: 19px;
  color: var(--pp-muted);
  max-width: 760px;
}

.pp-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Buttons ---------- */
.pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: var(--pp-radius);
  font-family: "Barlow", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
}
.pp-btn-red              { background: var(--pp-red); color: #fff; border-color: var(--pp-red); }
.pp-btn-red:hover        { background: var(--pp-red-dark); border-color: var(--pp-red-dark); color: #fff; }
.pp-btn-ghost            { border-color: rgba(255,255,255,0.55); color: #fff; background: transparent; }
.pp-btn-ghost:hover      { background: #fff; color: var(--pp-ink); border-color: #fff; }
.pp-btn-outline          { border-color: var(--pp-ink); color: var(--pp-ink); background: transparent; }
.pp-btn-outline:hover    { background: var(--pp-ink); color: #fff; }
.pp-btn-white            { background: #fff; color: var(--pp-ink); border-color: #fff; }
.pp-btn-white:hover      { background: var(--pp-ink); color: #fff; border-color: var(--pp-ink); }
.pp-arrow::after         { content: "\2192"; font-size: 18px; line-height: 1; }

.pp-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }