/*
Theme Name: Speed Queen Gents
Theme URI: https://speedqueengents.co.za
Author: Speed Queen Gents
Description: A dedicated one-page WordPress theme built for Speed Queen Gents, Speed Queen washing machine and dryer repair specialists serving Pretoria, South Africa. Built around a "work order ticket" visual system.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: speedqueen-gents
*/

/* =========================================================
   0. TOKENS
========================================================= */
:root{
  --sq-red: #C41230;
  --sq-red-dark: #8F0C24;
  --steel-900: #1B1D1F;
  --steel-700: #3A3F44;
  --steel-500: #6B7176;
  --steel-200: #D8DBDD;
  --steel-100: #EDEFF1;
  --paper: #FAF9F6;
  --amber: #E8A33D;
  --white: #FFFFFF;

  --font-display: 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 3px;
  --container: 1180px;
}

/* =========================================================
   1. RESET / BASE
========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--steel-900);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; line-height:1.05; margin:0 0 .5em; text-transform: uppercase; letter-spacing: .01em; }
p{ margin:0 0 1em; }
.container{ max-width: var(--container); margin:0 auto; padding: 0 24px; }
:focus-visible{ outline: 3px solid var(--amber); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   2. UTILITIES
========================================================= */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sq-red);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 14px;
}
.eyebrow::before{
  content:"";
  width: 26px; height: 2px;
  background: var(--sq-red);
  display:inline-block;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing:.04em;
  text-transform: uppercase;
  padding: 15px 26px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--sq-red); color: var(--white); }
.btn-primary:hover{ background: var(--sq-red-dark); }
.btn-outline{ border-color: var(--steel-900); color: var(--steel-900); }
.btn-outline:hover{ background: var(--steel-900); color: var(--white); }
.btn-outline.on-dark{ border-color: var(--white); color: var(--white); }
.btn-outline.on-dark:hover{ background: var(--white); color: var(--steel-900); }

.section{ padding: 96px 0; }
.section-tight{ padding: 64px 0; }
.section-dark{ background: var(--steel-900); color: var(--white); }
.section-dark h2, .section-dark h3{ color: var(--white); }
.section-steel{ background: var(--steel-100); }

.section-head{ max-width: 640px; margin-bottom: 56px; }
.section-head h2{ font-size: clamp(30px, 4vw, 44px); }
.section-head p{ color: var(--steel-500); font-size: 18px; margin:0; }
.section-dark .section-head p{ color: var(--steel-200); }

/* =========================================================
   3. HEADER
========================================================= */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--steel-900);
  border-bottom: 3px solid var(--sq-red);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: nowrap;
  gap: 20px;
  padding: 12px 24px;
  max-width: var(--container); margin:0 auto;
}
.site-branding{ display:flex; align-items:center; flex-shrink: 0; }
.brand-logo-link{ display:flex; align-items:center; }
.brand-logo{ height: 38px; width:auto; display:block; }
.custom-logo{ height: 38px; width:auto; max-height:38px; }

.primary-nav{ flex-shrink: 1; min-width: 0; }
.primary-nav ul{ display:flex; gap: 22px; white-space: nowrap; }
.primary-nav a{
  color: var(--steel-200);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: color .15s ease;
}
.primary-nav a:hover{ color: var(--white); }

.header-cta{ display:flex; align-items:center; gap: 16px; flex-shrink:0; white-space: nowrap; }
.header-phone{
  font-family: var(--font-mono);
  color:#fff; font-size: 18px; letter-spacing: .01em;
  display:flex; align-items:center; gap:7px;
  white-space: nowrap;
}
.header-phone strong{ color: var(--amber); }
.header-cta .btn{ white-space: nowrap; padding: 12px 20px; }
.menu-toggle{ display:none; background:none; border:2px solid var(--steel-200); color:#fff; padding:8px 12px; border-radius: var(--radius); font-family: var(--font-mono); flex-shrink:0; }

@media (max-width: 1100px){
  .primary-nav{ display:none; }
}
@media (max-width: 640px){
  .menu-toggle{ display:inline-block; }
  .header-phone span.txt{ display:none; }
  .header-cta .btn{ padding: 10px 14px; font-size: 12px; }
}
@media (max-width: 420px){
  .header-phone{ display:none; }
}

/* =========================================================
   4. HERO
========================================================= */
.hero{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(196,18,48,.18), transparent 60%),
    var(--steel-900);
  color: #fff;
  padding: 110px 0 90px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--steel-700);
}
.hero-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items:center; }
.hero h1{ font-size: clamp(38px, 5.6vw, 68px); color:#fff; margin-bottom: 22px; }
.hero h1 em{ font-style:normal; color: var(--sq-red); }
.hero-sub{ font-size: 19px; color: var(--steel-200); max-width: 520px; margin-bottom: 34px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 46px; }

.hero-stats{ display:flex; gap: 0; border-top: 1px solid var(--steel-700); padding-top: 26px; }
.hero-stats div{ flex:1; padding-right: 20px; }
.hero-stats .num{ font-family: var(--font-mono); font-size: 30px; color: var(--amber); display:block; }
.hero-stats .lbl{ font-family: var(--font-mono); font-size: 12px; color: var(--steel-200); text-transform: uppercase; letter-spacing: .04em; }

/* Work order ticket — signature element */
.ticket{
  background: var(--paper);
  color: var(--steel-900);
  border-radius: 6px;
  padding: 30px 28px 26px;
  position: relative;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  transform: rotate(2deg);
  border: 1px solid var(--steel-200);
}
.ticket::before, .ticket::after{
  content:"";
  position:absolute;
  width: 26px; height: 26px;
  background: var(--steel-900);
  border-radius: 50%;
  top: -13px;
  box-shadow: inset 0 0 0 3px var(--paper);
}
.hero .ticket::before{ box-shadow: inset 0 0 0 3px var(--steel-900); background: var(--paper); border: 2px dashed var(--steel-200); }
.ticket::before{ left: -13px; }
.ticket::after{ right: -13px; }
.ticket-head{ display:flex; justify-content:space-between; align-items:flex-start; border-bottom: 2px dashed var(--steel-200); padding-bottom: 14px; margin-bottom: 14px; }
.ticket-head .tag{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.08em; text-transform:uppercase; color: var(--steel-500); }
.ticket-head .no{ font-family: var(--font-mono); font-size: 15px; color: var(--sq-red); font-weight:600; }
.ticket-status{
  display:inline-block;
  background: var(--amber);
  color: var(--steel-900);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.ticket-row{ display:flex; justify-content:space-between; font-family: var(--font-mono); font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--steel-100); }
.ticket-row span:first-child{ color: var(--steel-500); }
.ticket-row span:last-child{ font-weight: 600; }
.ticket-foot{ margin-top: 16px; padding-top: 14px; border-top: 2px dashed var(--steel-200); font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); display:flex; justify-content:space-between; }

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-stats{ flex-wrap: wrap; gap: 20px; }
  .hero-stats div{ flex: 0 0 45%; padding-right:0; }
  .ticket{ transform: rotate(0); max-width: 420px; margin: 0 auto; }
}

/* =========================================================
   5. TRUST STRIP
========================================================= */
.trust-strip{ background: var(--steel-100); border-bottom: 1px solid var(--steel-200); }
.trust-strip ul{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: 18px; padding: 12px 0; }
.trust-strip li{ display:flex; align-items:center; gap:10px;  font-family: var(--font-mono); font-size: 43px; color: var(--steel-700); text-transform: uppercase; letter-spacing:.03em; }
.trust-strip li svg{ flex-shrink:0; color: var(--sq-red); }

/* =========================================================
   5b. PHOTO GALLERY
========================================================= */
.photo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.photo-card{
  aspect-ratio:auto;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--steel-200);
  background: var(--steel-100);
}
.photo-card img{ width:100%; height:100%; object-fit: cover; }
.photo-placeholder{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 8px;
  color: var(--steel-500);
  text-align:center;
  padding: 20px;
}
.photo-placeholder span{ font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing:.03em; color: var(--steel-700); }
.photo-placeholder small{ font-size: 11.5px; color: var(--steel-500); }

@media (max-width: 900px){ .photo-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .photo-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   6. SERVICES
========================================================= */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.service-card{
  background: var(--white);
  border: 1px solid var(--steel-200);
  border-top: 4px solid var(--sq-red);
  padding: 32px 28px;
  border-radius: var(--radius);
  transition: transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 34px rgba(27,29,31,.1); }
.service-card .idx{ font-family: var(--font-mono); color: var(--steel-200); font-size: 34px; font-weight:700; display:block; margin-bottom: 10px; }
.service-card h3{ font-size: 21px; margin-bottom: 10px; }
.service-card p{ color: var(--steel-500); font-size: 15.5px; margin:0; }

@media (max-width: 900px){ .services-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .services-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   7. PROCESS (ticket stepper)
========================================================= */
.process-strip{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.process-step{
  background: var(--steel-700);
  border-radius: var(--radius);
  padding: 26px 22px;
  position:relative;
  border-left: 3px solid var(--sq-red);
}
.process-step .step-no{ font-family: var(--font-mono); color: var(--amber); font-size: 13px; letter-spacing:.06em; display:block; margin-bottom: 10px; }
.process-step h4{ color:#fff; font-size: 17px; margin-bottom: 8px; }
.process-step p{ color: var(--steel-200); font-size: 14.5px; margin:0; }

@media (max-width: 900px){ .process-strip{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .process-strip{ grid-template-columns: 1fr; } }

/* =========================================================
   8. SERVICE AREA
========================================================= */
.area-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center; }
.area-list{ display:flex; flex-wrap:wrap; gap: 10px; }
.area-list li{
  font-family: var(--font-mono);
  font-size: 13px;
  border: 1px solid var(--steel-200);
  padding: 8px 14px;
  border-radius: 20px;
  color: var(--steel-700);
}
.area-note{ margin-top: 22px; color: var(--steel-500); }

@media (max-width: 900px){ .area-wrap{ grid-template-columns: 1fr; } }

/* =========================================================
   9. TESTIMONIALS
========================================================= */
.testi-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.testi-card{ background: var(--white); border: 1px solid var(--steel-200); padding: 28px; border-radius: var(--radius); }
.testi-stars{ color: var(--amber); font-family: var(--font-mono); letter-spacing: 2px; margin-bottom: 12px; }
.testi-card p{ color: var(--steel-700); font-size: 15.5px; }
.testi-name{ font-family: var(--font-mono); font-size: 13px; color: var(--steel-500); text-transform: uppercase; letter-spacing:.03em; }

@media (max-width: 900px){ .testi-grid{ grid-template-columns: 1fr; } }

/* =========================================================
   10. CONTACT
========================================================= */
.contact-wrap{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; }
.contact-card{ background: var(--steel-700); padding: 30px; border-radius: var(--radius); margin-bottom: 16px; }
.contact-card .lbl{ font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing:.06em; color: var(--amber); display:block; margin-bottom: 8px; }
.contact-card .val{ font-size: 22px; color:#fff; font-family: var(--font-display); text-transform: none; letter-spacing: 0; }
.contact-card a.val{ transition: color .15s ease; }
.contact-card a.val:hover{ color: var(--amber); }

.contact-form{ background: var(--white); border: 1px solid var(--steel-200); padding: 34px; border-radius: var(--radius); }
.contact-form .row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label{ font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing:.05em; color: var(--steel-700); display:block; margin-bottom: 6px; }
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%;
  border: 1px solid var(--steel-200);
  padding: 12px 14px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 15px;
  margin-bottom: 18px;
  background: var(--paper);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{ border-color: var(--sq-red); outline: none; }
.form-note{ font-size: 13px; color: var(--steel-500); margin-top: -6px; }
.form-success{ background: var(--steel-100); border-left: 4px solid var(--sq-red); padding: 16px 18px; margin-bottom: 20px; font-family: var(--font-mono); font-size: 14px; }

@media (max-width: 900px){ .contact-wrap{ grid-template-columns: 1fr; } .contact-form .row{ grid-template-columns: 1fr; } }

/* =========================================================
   11. FOOTER
========================================================= */
.site-footer{ background: var(--steel-900); color: var(--steel-200); padding: 50px 0 26px; }
.footer-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: 30px; border-bottom: 1px solid var(--steel-700); padding-bottom: 30px; margin-bottom: 20px; }
.footer-brand .site-title span{ color: var(--steel-500); }
.footer-links ul{ display:flex; gap: 22px; flex-wrap:wrap; }
.footer-links a{ font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing:.04em; color: var(--steel-200); }
.footer-links a:hover{ color: var(--amber); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--steel-500); }

/* =========================================================
   12. STICKY MOBILE CALL BAR
========================================================= */
.mobile-call-bar{ display:none; }
@media (max-width: 700px){
  .mobile-call-bar{
    display:flex; position: fixed; bottom:0; left:0; right:0; z-index: 200;
    background: var(--sq-red); box-shadow: 0 -6px 18px rgba(0,0,0,.2);
  }
  .mobile-call-bar a{
    flex:1; text-align:center; padding: 16px 0;
    font-family: var(--font-mono); font-size: 18px; text-transform: uppercase; letter-spacing:.05em;
    color:#fff; border-right: 1px solid rgba(255,255,255,.25);
  }
  .mobile-call-bar a:last-child{ border-right:none; background: var(--steel-900); }
  body{ padding-bottom: 54px; }
}

/* Generic page (non-front-page) content */
.entry-content{ padding: 10px 0; }
.entry-content .container{ max-width: 780px; }