/*
Theme Name:   Savco Group
Theme URI:    https://savcogroup.com.au
Description:  Savco Group child theme for Hello Elementor. Loads Google Fonts, global design tokens, and all custom CSS classes used in Elementor. Do not edit page layouts here — use Elementor editor.
Author:       Savco Group
Author URI:   https://savcogroup.com.au
Template:     hello-elementor
Version:      1.0.0
License:      Private
Text Domain:  savco-group
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --clr-gold:        #C9A84C;
  --clr-gold-light:  #DFB86A;
  --clr-gold-pale:   #F5EDD8;
  --clr-navy:        #1C2536;
  --clr-navy-light:  #243044;
  --clr-charcoal:    #2C2C2C;
  --clr-grey-dark:   #555555;
  --clr-grey-mid:    #888888;
  --clr-grey-soft:   #F5F5F3;
  --clr-grey-border: #E2E2E0;
  --clr-white:       #FFFFFF;

  --font-head:  'Syne', sans-serif;
  --font-body:  'Jost', sans-serif;

  --radius:     0px;
  --transition: 0.28s ease;
  --max-width:  1200px;
  --section-pad: 100px;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--clr-charcoal);
  background: var(--clr-white);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  color: var(--clr-charcoal);
  margin: 0 0 16px;
}

p { margin: 0 0 16px; line-height: 1.85; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--clr-gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--clr-charcoal); }

/* ============================================================
   ELEMENTOR OVERRIDES
   — Makes Hello Elementor fully blank so Elementor controls all layout
   ============================================================ */
.elementor-page .site-header,
.elementor-page .site-footer,
.elementor-page #masthead,
.elementor-page #colophon { display: none !important; }

.elementor-section-wrap,
.elementor-inner,
body.elementor-page { padding-top: 0 !important; margin-top: 0 !important; }

/* Remove default WP content padding */
.page .entry-content,
.elementor-page-title { display: none; }

/* ============================================================
   GLOBAL BUTTON CLASSES
   Apply via Elementor Advanced → CSS Classes field
   ============================================================ */

/* Gold filled button */
.e-btn-gold,
.e-btn-gold.elementor-button {
  background-color: var(--clr-gold) !important;
  color: var(--clr-charcoal) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  transition: background-color var(--transition), transform var(--transition) !important;
  display: inline-block;
}
.e-btn-gold:hover,
.e-btn-gold.elementor-button:hover {
  background-color: var(--clr-gold-light) !important;
  color: var(--clr-charcoal) !important;
  transform: translateY(-2px) !important;
}

/* Navy filled button */
.e-btn-navy,
.e-btn-navy.elementor-button {
  background-color: var(--clr-navy) !important;
  color: var(--clr-white) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  transition: background-color var(--transition) !important;
}
.e-btn-navy:hover,
.e-btn-navy.elementor-button:hover {
  background-color: var(--clr-gold) !important;
  color: var(--clr-charcoal) !important;
}

/* Ghost / outline button (for dark backgrounds) */
.e-btn-ghost,
.e-btn-ghost.elementor-button {
  background-color: transparent !important;
  color: var(--clr-white) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  transition: border-color var(--transition), color var(--transition) !important;
}
.e-btn-ghost:hover,
.e-btn-ghost.elementor-button:hover {
  border-color: var(--clr-gold) !important;
  color: var(--clr-gold) !important;
  background-color: transparent !important;
}

/* ============================================================
   TYPOGRAPHY HELPERS
   ============================================================ */

/* Eyebrow label — use in Heading widget with H6 tag */
.e-eyebrow {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--clr-gold) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
.e-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--clr-gold);
  flex-shrink: 0;
}

/* Centred eyebrow — no left line */
.e-eyebrow-center {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--clr-gold) !important;
  text-align: center !important;
  display: block !important;
  margin-bottom: 14px !important;
}

/* Gold divider bar — use on Divider widget */
.e-gold-bar .elementor-divider-separator {
  border-top-color: var(--clr-gold) !important;
  border-top-width: 3px !important;
  width: 50px !important;
}

/* ============================================================
   CHECKLIST  — use on Icon List widget
   ============================================================ */
.e-checklist .elementor-icon-list-icon svg,
.e-checklist .elementor-icon-list-icon i {
  color: var(--clr-gold) !important;
  font-size: 13px !important;
}
.e-checklist .elementor-icon-list-item {
  margin-bottom: 10px !important;
  align-items: flex-start !important;
}
.e-checklist .elementor-icon-list-text {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--clr-charcoal) !important;
  line-height: 1.6 !important;
}
.e-checklist.light .elementor-icon-list-text {
  color: rgba(255,255,255,0.85) !important;
}
.e-checklist.light .elementor-icon-list-icon svg,
.e-checklist.light .elementor-icon-list-icon i {
  color: var(--clr-gold) !important;
}

/* ============================================================
   SECTION BACKGROUND HELPERS
   Apply to Section/Container via Advanced → CSS Classes
   ============================================================ */
.e-bg-navy    { background-color: var(--clr-navy)     !important; }
.e-bg-soft    { background-color: var(--clr-grey-soft) !important; }
.e-bg-charcoal{ background-color: var(--clr-charcoal)  !important; }
.e-bg-gold    { background-color: var(--clr-gold)      !important; }
.e-bg-white   { background-color: var(--clr-white)     !important; }

/* ============================================================
   HERO SECTION
   ============================================================ */
.e-hero {
  position: relative;
  min-height: 62vh;
  max-height: 680px;
  display: flex;
  align-items: center;
}

/* Video/image background helper */
.e-hero-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(28,37,54,0.88) 0%,
    rgba(28,37,54,0.40) 60%,
    rgba(28,37,54,0.60) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.e-hero-overlay .elementor-container { position: relative; z-index: 2; }

/* ============================================================
   SERVICE SLIDE CARDS
   Left col = image, Right col = navy content (or reversed)
   Apply .e-service-card to the Section, .e-service-content to the content Column
   ============================================================ */
.e-service-card {
  min-height: 420px;
  overflow: hidden;
}
.e-service-card > .elementor-container {
  padding: 0 !important;
  max-width: 100% !important;
}
.e-service-content {
  background-color: var(--clr-navy) !important;
  padding: 56px 60px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.e-service-num {
  font-family: var(--font-head) !important;
  font-size: 64px !important;
  font-weight: 800 !important;
  color: rgba(201,168,76,0.12) !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: -8px !important;
}
.e-service-card .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 420px;
  display: block;
  transition: transform 0.5s ease;
}
.e-service-card:hover .elementor-widget-image img {
  transform: scale(1.04);
}

/* ============================================================
   WHY CARDS  — apply .e-why-card to each Column
   ============================================================ */
.e-why-card {
  border-top: 2px solid transparent !important;
  transition: border-color var(--transition) !important;
  padding: 40px 32px !important;
}
.e-why-card:hover {
  border-top-color: var(--clr-gold) !important;
}
.e-why-icon .elementor-icon {
  width: 56px !important;
  height: 56px !important;
  border: 1px solid rgba(201,168,76,0.35) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 24px !important;
  color: var(--clr-gold) !important;
}
.e-why-icon .elementor-icon svg,
.e-why-icon .elementor-icon i { color: var(--clr-gold) !important; font-size: 26px !important; }

/* ============================================================
   PROCESS STEPS — apply .e-process-step to each Column
   ============================================================ */
.e-process-step {
  background-color: var(--clr-grey-soft) !important;
  padding: 36px 28px !important;
  position: relative !important;
  border-bottom: 3px solid transparent !important;
  transition: all var(--transition) !important;
}
.e-process-step:hover {
  background-color: var(--clr-navy) !important;
  border-bottom-color: var(--clr-gold) !important;
}
.e-process-step:hover .elementor-heading-title { color: var(--clr-white) !important; }
.e-process-step:hover p { color: rgba(255,255,255,0.6) !important; }
.e-process-step:hover .elementor-icon { color: var(--clr-gold) !important; border-color: rgba(201,168,76,0.3) !important; }

.e-process-num {
  font-family: var(--font-head) !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  color: rgba(44,44,44,0.07) !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  pointer-events: none !important;
}
.e-process-icon .elementor-icon {
  width: 50px !important;
  height: 50px !important;
  border: 1px solid var(--clr-grey-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--clr-charcoal) !important;
  margin-bottom: 20px !important;
  transition: all var(--transition) !important;
}

/* ============================================================
   TWO-BOX LAYOUT  (What We Deliver / Where Things Go Wrong)
   Apply .e-box-dark and .e-box-gold to columns
   ============================================================ */
.e-box-dark  { background-color: var(--clr-navy) !important; padding: 48px !important; }
.e-box-gold  { background-color: var(--clr-gold) !important; padding: 48px !important; }
.e-box-dark  .elementor-heading-title { color: var(--clr-white)    !important; }
.e-box-gold  .elementor-heading-title { color: var(--clr-charcoal) !important; }
.e-box-dark  p { color: rgba(255,255,255,0.7) !important; }
.e-box-gold  p { color: var(--clr-charcoal)   !important; }
.e-box-dark .e-checklist .elementor-icon-list-text { color: rgba(255,255,255,0.85) !important; }
.e-box-gold .e-checklist .elementor-icon-list-text { color: var(--clr-charcoal) !important; }
.e-box-gold .e-checklist .elementor-icon-list-icon i,
.e-box-gold .e-checklist .elementor-icon-list-icon svg { color: var(--clr-charcoal) !important; }

/* ============================================================
   FAQ ACCORDION — apply .e-faq to Toggle/Accordion widget
   ============================================================ */
.e-faq .elementor-tab-title {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--clr-charcoal) !important;
  border-bottom: 1px solid var(--clr-grey-border) !important;
  padding: 20px 0 !important;
}
.e-faq .elementor-tab-title.elementor-active {
  color: var(--clr-gold) !important;
}
.e-faq .elementor-tab-title .elementor-accordion-icon { color: var(--clr-gold) !important; }
.e-faq .elementor-tab-content {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--clr-grey-dark) !important;
  line-height: 1.8 !important;
  border: none !important;
  padding: 16px 0 20px !important;
}

/* ============================================================
   CTA BAND — apply .e-cta-band to Section
   ============================================================ */
.e-cta-band { position: relative; }
.e-cta-phone {
  font-family: var(--font-head) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--clr-gold) !important;
  text-decoration: none !important;
  display: block !important;
  margin-top: 16px !important;
  transition: color var(--transition) !important;
}
.e-cta-phone:hover { color: var(--clr-gold-light) !important; }

/* ============================================================
   VALUE CARDS (About page) — apply .e-value-card to Column
   ============================================================ */
.e-value-card {
  background-color: var(--clr-grey-soft) !important;
  border-top: 3px solid var(--clr-gold) !important;
  padding: 40px 32px !important;
}
.e-value-card .elementor-heading-title { color: var(--clr-charcoal) !important; }

/* ============================================================
   STAT BOXES — apply .e-stat-box to Column
   ============================================================ */
.e-stat-box {
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  padding: 48px 36px !important;
  text-align: center !important;
}
.e-stat-box:last-child { border-right: none !important; }
.e-stat-num .elementor-heading-title {
  font-family: var(--font-head) !important;
  font-size: 52px !important;
  font-weight: 700 !important;
  color: var(--clr-gold) !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}
.e-stat-label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
}

/* ============================================================
   MINI SERVICE CARDS (4-grid on homepage)
   Apply .e-mini-card to each inner Section
   ============================================================ */
.e-mini-card {
  overflow: hidden !important;
  border-bottom: 3px solid transparent !important;
  transition: border-color var(--transition) !important;
  background: var(--clr-charcoal) !important;
}
.e-mini-card:hover { border-bottom-color: var(--clr-gold) !important; }
.e-mini-card .elementor-widget-image img {
  transition: transform var(--transition) !important;
  height: 160px !important;
  object-fit: cover !important;
  width: 100% !important;
}
.e-mini-card:hover .elementor-widget-image img { transform: scale(1.04) !important; }
.e-mini-card .elementor-heading-title { color: var(--clr-white) !important; }
.e-mini-card p { color: rgba(255,255,255,0.6) !important; font-size: 13px !important; }
.e-mini-card-link { color: var(--clr-gold) !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; }

/* ============================================================
   PAGE HERO INNER PAGES — apply .e-page-hero to Section
   ============================================================ */
.e-page-hero {
  padding: 140px 0 80px !important;
  text-align: center !important;
}
.e-page-hero .elementor-heading-title { color: var(--clr-white) !important; }
.e-page-hero .e-page-subtitle {
  color: var(--clr-gold) !important;
  font-family: var(--font-body) !important;
  font-size: 17px !important;
}

/* ============================================================
   CONTACT FORM — apply .e-contact-form to WPForms widget
   ============================================================ */
.e-contact-form .wpforms-field input,
.e-contact-form .wpforms-field select,
.e-contact-form .wpforms-field textarea {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  color: var(--clr-white) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  transition: border-color var(--transition) !important;
}
.e-contact-form .wpforms-field input:focus,
.e-contact-form .wpforms-field select:focus,
.e-contact-form .wpforms-field textarea:focus {
  border-color: var(--clr-gold) !important;
  outline: none !important;
}
.e-contact-form .wpforms-field label {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.5) !important;
  margin-bottom: 8px !important;
}
.e-contact-form .wpforms-submit {
  background: var(--clr-gold) !important;
  color: var(--clr-charcoal) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  padding: 14px 36px !important;
  cursor: pointer !important;
  transition: background var(--transition) !important;
  width: 100% !important;
}
.e-contact-form .wpforms-submit:hover { background: var(--clr-gold-light) !important; }

/* ============================================================
   ARTICLE CARDS — apply .e-article-card to Posts widget
   ============================================================ */
.e-article-card .elementor-post__card {
  border: 1px solid var(--clr-grey-border) !important;
  border-radius: 0 !important;
  transition: box-shadow 0.3s ease !important;
}
.e-article-card .elementor-post__card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.1) !important; }
.e-article-card .elementor-post__title a { font-family: var(--font-head) !important; color: var(--clr-charcoal) !important; }
.e-article-card .elementor-post__excerpt p { font-family: var(--font-body) !important; color: var(--clr-grey-dark) !important; }
.e-article-card .elementor-post__read-more { color: var(--clr-gold) !important; }

/* ============================================================
   SCROLL REVEAL ANIMATIONS
   ============================================================ */
.e-reveal-up,
.e-reveal-left,
.e-reveal-right {
  opacity: 0;
  transition:
    opacity 0.7s ease calc(var(--delay, 0s)),
    transform 0.7s ease calc(var(--delay, 0s));
}
.e-reveal-up    { transform: translateY(48px); }
.e-reveal-left  { transform: translateX(-64px); }
.e-reveal-right { transform: translateX(64px); }

.e-reveal-up.is-visible,
.e-reveal-left.is-visible,
.e-reveal-right.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Stagger delays */
.e-delay-1 { --delay: 0.1s; }
.e-delay-2 { --delay: 0.2s; }
.e-delay-3 { --delay: 0.3s; }
.e-delay-4 { --delay: 0.4s; }

/* ============================================================
   CREDENTIALS STRIP
   ============================================================ */
.e-strip .elementor-icon-list-items {
  justify-content: center !important;
  gap: 0 !important;
}
.e-strip .elementor-icon-list-item {
  padding: 0 32px !important;
  border-right: 1px solid rgba(255,255,255,0.12) !important;
}
.e-strip .elementor-icon-list-item:last-child { border-right: none !important; }
.e-strip .elementor-icon-list-icon i,
.e-strip .elementor-icon-list-icon svg { color: var(--clr-gold) !important; }
.e-strip .elementor-icon-list-text {
  color: rgba(255,255,255,0.85) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ============================================================
   TESTIMONIAL CARD
   ============================================================ */
.e-testimonial-card {
  background: var(--clr-grey-soft) !important;
  border-top: 2px solid var(--clr-gold) !important;
  padding: 40px !important;
}
.e-testimonial-card .elementor-testimonial__text {
  font-family: var(--font-body) !important;
  font-style: italic !important;
  color: var(--clr-grey-dark) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}
.e-testimonial-card .elementor-testimonial__name {
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  color: var(--clr-charcoal) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 13px !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.e-footer { background-color: var(--clr-charcoal) !important; }
.e-footer .elementor-heading-title { color: var(--clr-white) !important; font-size: 13px !important; letter-spacing: 2px !important; text-transform: uppercase !important; }
.e-footer p, .e-footer a { color: rgba(255,255,255,0.5) !important; font-size: 13px !important; }
.e-footer a:hover { color: var(--clr-gold) !important; }
.e-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08) !important; padding: 24px 0 !important; }
.e-footer-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.4) !important;
  transition: all var(--transition) !important;
  margin-right: 8px !important;
}
.e-footer-social a:hover { border-color: var(--clr-gold) !important; color: var(--clr-gold) !important; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --section-pad: 80px; }
}

@media (max-width: 768px) {
  :root { --section-pad: 60px; }
  .e-service-content { padding: 40px 32px !important; }
  .e-hero { min-height: 380px !important; max-height: none !important; }
  .e-box-dark, .e-box-gold { padding: 36px 28px !important; }
  .e-stat-box { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
}

@media (max-width: 480px) {
  .e-strip .elementor-icon-list-item { padding: 0 16px !important; }
  .e-service-content { padding: 32px 24px !important; }
}