/*
Theme Name:   A Plus Quality (Astra Child)
Theme URI:    https://www.a-plusquality.ca/
Description:  Child theme of Astra reproducing the a-plusquality.ca design system.
Author:       A Plus Quality Inc.
Template:     astra
Version:      1.0.0
Text Domain:  aplus-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Extracted from the live a-plusquality.ca stylesheets.
   ========================================================================== */

:root {
  --aplus-blue:        #14469D;  /* .bg-primary, primary buttons, links */
  --aplus-blue-dark:   #0F3577;  /* hover state */
  --aplus-red:         #DC3033;  /* phone / emergency CTA */
  --aplus-red-dark:    #B92528;
  --aplus-dark:        #292929;  /* .bg-dark, footer, headings */
  --aplus-grey:        #F8F8F8;  /* .bg-secondary alternating sections */
  --aplus-body:        #333333;
  --aplus-white:       #FFFFFF;

  --aplus-font-head:   'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --aplus-font-body:   'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --aplus-radius-btn:  25px;     /* pill buttons */
  --aplus-section-pad: 96px;     /* default section rhythm */
}

/* ==========================================================================
   2. TYPOGRAPHY
   Matches the legacy scale exactly: h1 50/64, h2 40/48, h3 32, h4 24,
   body 18/30. Headings are Poppins 500 — NOT bold.
   ========================================================================== */

body,
.ast-container,
.elementor-widget-text-editor {
  font-family: var(--aplus-font-body);
  font-size: 18px;
  line-height: 30px;
  color: var(--aplus-body);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--aplus-font-head);
  font-weight: 500;
  color: var(--aplus-dark);
}

h1, .elementor-widget-heading h1.elementor-heading-title { font-size: 50px; line-height: 64px; }
h2, .elementor-widget-heading h2.elementor-heading-title { font-size: 40px; line-height: 48px; }
h3, .elementor-widget-heading h3.elementor-heading-title { font-size: 32px; line-height: 42px; }
h4, .elementor-widget-heading h4.elementor-heading-title { font-size: 24px; line-height: 34px; }

/* Headings sitting on dark or image backgrounds invert */
.aplus-dark h1, .aplus-dark h2, .aplus-dark h3, .aplus-dark h4,
.aplus-dark p,  .aplus-cover h1, .aplus-cover h2, .aplus-cover p {
  color: var(--aplus-white);
}

@media (max-width: 921px) {
  h1 { font-size: 36px; line-height: 46px; }
  h2 { font-size: 30px; line-height: 38px; }
  h3 { font-size: 25px; line-height: 34px; }
  body { font-size: 16px; line-height: 28px; }
}

/* ==========================================================================
   3. BUTTONS
   Legacy: pill (25px), uppercase, Poppins 700, 14px, generous padding.
   ========================================================================== */

.elementor-button,
.ast-button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"] {
  font-family: var(--aplus-font-head);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-radius: var(--aplus-radius-btn);
  padding: 14px 34px;
  border: 2px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Primary — blue */
.elementor-button:not(.aplus-btn-red):not(.aplus-btn-ghost),
.ast-button,
input[type="submit"] {
  background-color: var(--aplus-blue);
  border-color: var(--aplus-blue);
  color: var(--aplus-white);
}
.elementor-button:not(.aplus-btn-red):not(.aplus-btn-ghost):hover,
.ast-button:hover,
input[type="submit"]:hover {
  background-color: var(--aplus-blue-dark);
  border-color: var(--aplus-blue-dark);
  color: var(--aplus-white);
}

/* Emergency / phone — red. Add class "aplus-btn-red" in Elementor. */
.aplus-btn-red .elementor-button,
.elementor-button.aplus-btn-red {
  background-color: var(--aplus-red);
  border-color: var(--aplus-red);
  color: var(--aplus-white);
}
.aplus-btn-red .elementor-button:hover,
.elementor-button.aplus-btn-red:hover {
  background-color: var(--aplus-red-dark);
  border-color: var(--aplus-red-dark);
}

/* Outline on dark backgrounds. Add class "aplus-btn-ghost". */
.aplus-btn-ghost .elementor-button,
.elementor-button.aplus-btn-ghost {
  background-color: transparent;
  border-color: var(--aplus-white);
  color: var(--aplus-white);
}
.aplus-btn-ghost .elementor-button:hover,
.elementor-button.aplus-btn-ghost:hover {
  background-color: var(--aplus-white);
  color: var(--aplus-dark);
}

/* ==========================================================================
   4. SECTION PATTERNS
   Apply these as Elementor Section CSS Classes to mirror the legacy layout.
   ========================================================================== */

.aplus-section     { padding-top: var(--aplus-section-pad); padding-bottom: var(--aplus-section-pad); }
.aplus-section-sm  { padding-top: 48px; padding-bottom: 32px; }
.aplus-grey        { background-color: var(--aplus-grey); }
.aplus-dark        { background-color: var(--aplus-dark); }
.aplus-blue        { background-color: var(--aplus-blue); color: var(--aplus-white); }
.aplus-blue h2, .aplus-blue h3, .aplus-blue p { color: var(--aplus-white); }

/* Dark overlay over a background image — legacy .image-bg.overlay */
.aplus-overlay { position: relative; }
.aplus-overlay > .elementor-background-overlay { background-color: var(--aplus-dark); opacity: .65; }

/* Full-bleed hero — legacy section.cover */
.aplus-cover { min-height: 640px; display: flex; align-items: center; }
@media (max-width: 921px) { .aplus-cover { min-height: 420px; } }

/* Edge-to-edge image beside text — legacy .image-square.left / .right.
   Put the image column and the text column in one Elementor section,
   add this class to the section, and give the image column no padding. */
.aplus-image-square .elementor-column { display: flex; align-items: center; }
.aplus-image-square .aplus-square-img { align-self: stretch; padding: 0; }
.aplus-image-square .aplus-square-img .elementor-widget-container,
.aplus-image-square .aplus-square-img img {
  height: 100%; width: 100%; object-fit: cover;
}
.aplus-image-square .aplus-square-txt { padding: 72px 64px; }
@media (max-width: 921px) {
  .aplus-image-square .aplus-square-txt { padding: 40px 24px; }
  .aplus-image-square .aplus-square-img { min-height: 280px; }
}

/* Service icon tile — legacy flaticon grid on .bg-secondary */
.aplus-tile {
  background: var(--aplus-white);
  padding: 36px 24px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.aplus-tile:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,.10); }
.aplus-tile .elementor-icon { color: var(--aplus-blue); }
.aplus-tile h4 {
  font-size: 16px; text-transform: uppercase;
  letter-spacing: .5px; margin-top: 16px;
}

/* Page title banner — legacy .page-title-2.image-bg, used on ~26 interior pages */
.aplus-page-title {
  min-height: 340px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}
.aplus-page-title h1 { color: var(--aplus-white); margin-bottom: 8px; }
.aplus-page-title .aplus-breadcrumb,
.aplus-page-title .aplus-breadcrumb a { color: rgba(255,255,255,.8); font-size: 15px; }
@media (max-width: 921px) { .aplus-page-title { min-height: 220px; } }

/* ==========================================================================
   5. HEADER / FOOTER
   ========================================================================== */

/* Legacy nav is transparent over the hero and solid once scrolled. */
.home .ast-above-header-wrap,
.home .site-header { background-color: transparent; }
.ast-header-sticked .site-header,
.ast-sticky-active .site-header { background-color: var(--aplus-white); box-shadow: 0 2px 12px rgba(0,0,0,.08); }

.main-header-menu .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
  font-family: var(--aplus-font-head);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.site-footer, footer.aplus-footer { background-color: var(--aplus-dark); color: rgba(255,255,255,.72); }
.site-footer a, footer.aplus-footer a { color: rgba(255,255,255,.72); }
.site-footer a:hover, footer.aplus-footer a:hover { color: var(--aplus-white); }
.site-footer h4, footer.aplus-footer h4 {
  color: var(--aplus-white); font-size: 16px;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 20px;
}

/* ==========================================================================
   6. LINKS & MISC
   ========================================================================== */

a { color: var(--aplus-blue); }
a:hover { color: var(--aplus-blue-dark); }
.aplus-dark a, .aplus-cover a, .aplus-blue a { color: var(--aplus-white); }

/* Astra's default container is narrower than the legacy Bootstrap grid. */
.ast-container, .elementor-section.elementor-section-boxed > .elementor-container { max-width: 1170px; }