/* GalaxyWeb generated theme — client=all-in-mechanical */
/* Operator override: pure black & white, clean minimal premium style.
   Matches the All In Mechanical logo. AMG-specialist positioning: no
   third colour, restraint signals premium. */
:root {
  /* Brand / accent — pure black, no colour accent at all */
  --color-brand-primary:    #000000;
  --color-accent:           #000000;
  --color-accent-hover:     #333333;

  /* Surfaces — crisp white body, pure black header/footer, dark hero */
  --color-surface-dark:     #0a0a0a;   /* hero band, dark CTAs */
  --color-surface-darker:   #000000;   /* header, footer */
  --color-surface-light:    #ffffff;   /* body bg — crisp white */
  --color-surface-alt:      #f5f5f5;   /* alternating sections — soft grey */
  --color-border:           #2a2a2a;
  --color-border-light:     #e5e5e5;

  /* Ink — dark text on light surfaces, light text on dark */
  --color-ink:              #111111;
  --color-ink-muted:        #555555;
  --color-ink-invert:       #ffffff;
  --color-ink-invert-muted: #b8b8b8;

  --font-heading: 'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
}

/* Header: pure black */
.site-header {
  background: var(--color-surface-darker) !important;
}

/* Hero quote form: white card on the dark hero band — showroom feel */
.hero__sidebar,
.quote-form,
.quote-form-card,
form.quote-form,
#quote-form,
.quote {
  background: #ffffff !important;
  color: #0a0a0a;
}
.hero__sidebar input,
.hero__sidebar textarea,
.hero__sidebar select,
.quote-form input,
.quote-form textarea,
.quote-form select,
#quote-form input,
#quote-form textarea,
#quote-form select {
  background: #fafafa;
  color: #0a0a0a;
  border-color: #0a0a0a;
}
.hero__sidebar label,
.quote-form label,
#quote-form label {
  color: #0a0a0a;
}

/* Contact-page form: same white-card treatment, with a hairline border
   so it doesn't visually float on the white body */
.contact-form-card {
  background: #ffffff !important;
  color: #0a0a0a;
  border: 1px solid var(--color-border-light);
}
.contact-form-card .section-heading,
.contact-form-card label,
.contact-form-card legend,
.contact-form-card h2,
.contact-form-card h3 {
  color: #0a0a0a !important;
}
.contact-form-card input,
.contact-form-card textarea,
.contact-form-card select {
  background: #fafafa;
  color: #0a0a0a;
  border-color: #0a0a0a;
}

/* Footer: soft-grey text on pure black, white on hover */
.site-footer,
.footer,
.footer p,
.footer a,
.footer li,
.footer span,
.footer .footer-link,
.footer .footer-heading {
  color: var(--color-ink-invert-muted) !important;
}
.footer a:hover {
  color: #ffffff !important;
}

/* Service card titles: pure black, no coloured accent */
.service-card__title {
  color: #0a0a0a !important;
}

/* Premium-feel typography: tighten letter-spacing on display headings.
   Subtle (-0.02em), but it's the visual cue that separates "tradie site"
   from "designed site". */
h1, h2,
.hero__heading,
.section-heading {
  letter-spacing: -0.02em;
}

/* Header logo: the source PNG is dark artwork on a transparent background.
   On our black header that reads as black-on-black (invisible). filter:invert
   flips the dark artwork to white while leaving the transparent areas
   transparent — gives us a clean white-on-black header logo with zero new
   image assets. Same fix for the footer logo, also on black. */
.site-logo img,
.footer-brand__logo img {
  filter: invert(1);
}

/* ── Yellow accent (Rapid Offer change, May 2026) ──────────────────────
   Client: "potential yellow to be used as an accent colour on the site."
   The base palette stays black & white; warm yellow (#E8B82E) is added as a
   TARGETED accent rather than by swapping the global --color-accent var,
   because the template uses --color-accent for small text on WHITE sections
   (section eyebrows, process-step numbers) where yellow would be unreadable.
   So yellow is applied only where it stays legible: on the dark hero band
   and as button fills with dark ink text. */

/* Hero emphasis word: was forced white to hide the black accent — now the
   yellow accent, which pops on the dark hero. */
.hero__headline em {
  color: #E8B82E;
}

/* Hero eyebrow ("Newstead · New Farm · Hamilton"): yellow on the dark hero. */
.hero__eyebrow {
  color: #E8B82E;
}

/* Inner-page hero underline accent → yellow */
.page-hero::after {
  background: #E8B82E !important;
}

/* Buttons: yellow fill with dark ink text (yellow is far too light for the
   template's default white button text). Covers the hero/CTA primary buttons
   and the header "Get a quote" button. */
.btn-primary,
.btn-header-cta {
  background: #E8B82E !important;
  color: #0a0a0a !important;
}
.btn-primary:hover,
.btn-header-cta:hover {
  background: #F0CC66 !important;
  color: #0a0a0a !important;
}

/* ── Quote form: shrink a little (client request) ──────────────────────
   Narrow the hero sidebar column and tighten the card's internal spacing.
   Scoped to the hero quote form so the contact-page form is untouched. */
.hero__inner {
  grid-template-columns: 1fr 360px;
}
.hero .quote-form {
  padding: 1.4rem;
}
.hero .quote-form__heading {
  font-size: 1.05rem;
  margin-bottom: 0.85rem;
}
.hero .quote-form .form-group {
  margin-bottom: 0.7rem;
}
.hero .quote-form .form-group label {
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
}
.hero .quote-form .form-group input,
.hero .quote-form .form-group select,
.hero .quote-form .form-group textarea {
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
}
.hero .quote-form .form-group textarea {
  min-height: 64px;
}

/* Bigger header so the logo can breathe. The default header is 80px
   tall with a 72px logo — only 4px of margin top/bottom, and the logo
   reads small. Bump to a 110px header with a 96px logo (about 33%
   bigger). Chris's logo also has the wordmark "All in mechanical"
   baked into the artwork, so the template's separate site-logo__name
   text element is pure duplication — hide it and let the logo own
   the space. */
.header-inner {
  height: 128px;
}
.site-logo img {
  height: 112px;
}
.site-logo__name {
  display: none;
}

/* ── Mercedes-Benz + AMG specialist badges (Pattern 2 override) ────────
   Styling for the badge row injected by the per-client header/footer
   overrides. The two marks sit SIDE BY SIDE on one row. */
.site-brand-badges {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid rgba(255,255,255,0.18);
}
.site-brand-badge {
  width: auto;
  display: block;
  opacity: 0.95;
}
/* The AMG wordmark art is near-black (#080804) so it would vanish on the
   black header/footer. Force it to pure white — brightness(0) crushes it to
   solid black, then invert flips it to solid white — so it's crisp and clear
   regardless of the source tone. The Mercedes-Benz star is a silver gradient
   and reads as-is, so it is NOT inverted. */
.site-brand-badge--amg,
.footer-brand-badge--amg {
  filter: brightness(0) invert(1);
}

.footer-brand-badges {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem 0 0.25rem;
}
.footer-brand-badge {
  width: auto;
  display: block;
  opacity: 0.9;
}

/* Footer brand logo: client wants it much larger than the 36px default. */
.footer-brand__logo img {
  height: 144px !important;
  width: auto;
}

/* Hide the header badges on narrow screens so the header doesn't crowd. */
@media (max-width: 720px) {
  .site-brand-badges {
    display: none !important;
  }
}

/* Stat-bar numerals use var(--color-accent), which is BLACK in this B&W
   theme — invisible on the dark stats-bar. Force white on dark. */
.stat-item__number { color: var(--color-ink-invert) !important; }

/* About page-hero subtitle is hardcoded in about.html as
   "{suburb}, {state} — serving the area since {brand.year_established}".
   Chris's founded year isn't known, so the trailing "since" renders as a
   dangling word. Suppress the template text and write a clean replacement. */
.page-hero__subtitle { font-size: 0 !important; line-height: 0 !important; }
.page-hero__subtitle::before {
  content: "Newstead, QLD · Dealership quality, independent prices";
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink-invert-muted);
  display: block;
}