/*
Theme Name: Braemar Cleaning
Theme URI: https://braemarcleaning.co.uk
Description: A custom, Elementor-powered child theme for Braemar Cleaning Services. Lightweight, fast, and conversion-focused for domestic & commercial cleaning businesses.
Author: Braemar Cleaning Services
Author URI: https://braemarcleaning.co.uk
Template: hello-elementor
Version: 1.0.0
Text Domain: braemar-cleaning
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: elementor, cleaning, business, services, custom-colors, custom-menu, featured-images
*/

/* ==========================================================================
   BRAEMAR CLEANING DESIGN SYSTEM
   Loaded on top of Hello Elementor. Elementor Global Styles can override,
   but these tokens keep the brand consistent everywhere.
   ========================================================================== */

:root {
  /* Brand palette: matched to the Braemar logo (blue) */
  --bc-primary:        #0a72c0;  /* Braemar deep blue (wordmark left) */
  --bc-primary-dark:   #055a99;
  --bc-primary-light:  #e5f3fb;
  --bc-accent:         #00aeef;  /* bright cyan-blue (swoosh + CTAs) */
  --bc-accent-dark:    #0090c9;
  --bc-dark:           #0e2740;  /* headings: deep navy-blue */
  --bc-body:           #48565f;  /* body text */
  --bc-muted:          #7b8a90;
  --bc-bg:             #ffffff;
  --bc-bg-alt:         #f2f9fd;  /* section alternate: pale blue */
  --bc-border:         #dcebf5;
  --bc-warning:        #f5a623;  /* stars / highlights */

  /* Typography */
  --bc-font-head: "Poppins", "Segoe UI", system-ui, sans-serif;
  --bc-font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  /* Layout */
  --bc-radius:     14px;
  --bc-radius-sm:  8px;
  --bc-shadow:     0 10px 30px rgba(10, 114, 192, 0.12);
  --bc-shadow-lg:  0 20px 50px rgba(14, 39, 64, 0.15);
  --bc-container:  1180px;
}

/* ---- Base ---- */
body {
  font-family: var(--bc-font-body);
  color: var(--bc-body);
  line-height: 1.7;
  font-size: 17px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--bc-font-head);
  color: var(--bc-dark);
  line-height: 1.2;
  font-weight: 700;
}

a { color: var(--bc-primary); }
a:hover { color: var(--bc-primary-dark); }

/* ---- Buttons (works with Elementor button widget classes too) ---- */
.bc-btn,
.elementor-button.bc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bc-primary);
  color: #fff;
  font-family: var(--bc-font-head);
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 50px;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 8px 20px rgba(10, 114, 192, 0.30);
}
.bc-btn:hover { background: var(--bc-primary-dark); color:#fff; transform: translateY(-2px); }

.bc-btn--outline {
  background: transparent;
  color: var(--bc-primary);
  border: 2px solid var(--bc-primary);
  box-shadow: none;
}
.bc-btn--outline:hover { background: var(--bc-primary); color:#fff; }

/* ---- Utility layout helpers for custom sections ---- */
.bc-container { max-width: var(--bc-container); margin: 0 auto; padding: 0 20px; }
.bc-section { padding: 84px 0; }
.bc-section--alt { background: var(--bc-bg-alt); }
.bc-eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--bc-primary);
  font-family: var(--bc-font-head);
}

/* ---- Service cards ---- */
.bc-card {
  background: #fff;
  border: 1px solid var(--bc-border);
  border-radius: var(--bc-radius);
  padding: 34px 28px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--bc-shadow);
  border-color: transparent;
}
.bc-card__icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: var(--bc-primary-light);
  color: var(--bc-primary);
  font-size: 28px;
  margin-bottom: 18px;
}

/* ---- Trust badges row ---- */
.bc-badges { display:flex; flex-wrap:wrap; gap:24px; align-items:center; }
.bc-badge { display:flex; align-items:center; gap:8px; font-weight:600; color:var(--bc-dark); font-size:15px; }

/* ---- Stars ---- */
.bc-stars { color: var(--bc-warning); letter-spacing: 2px; }

/* ---- Header sticky polish (applies to Hello/Elementor header) ---- */
.site-header, header.elementor-location-header {
  position: sticky; top: 0; z-index: 999;
  background: #fff;
  box-shadow: 0 2px 20px rgba(14,39,64,0.06);
}

/* ---- Footer ---- */
.bc-footer { background: var(--bc-dark); color: #c3d6e8; }
.bc-footer a { color:#c3d6e8; }
.bc-footer a:hover { color:#fff; }

/* ---- Floating call/WhatsApp button ---- */
.bc-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  background: #0f7a40; color:#fff; font-size: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  text-decoration: none;
}
.bc-float:hover { transform: scale(1.06); color:#fff; }

/* ---- Responsive ---- */
@media (max-width: 767px) {
  body { font-size: 16px; }
  .bc-section { padding: 56px 0; }
}

/* ---- Paired CTAs ----
   "Get a Free Quote" + "Call ..." each sat in a 50% column, which pushed them
   ~150px apart and broke them up as a pair. Collapse those columns to their
   content so the two buttons group together; Elementor's default column gap
   supplies the spacing between them. Falls back to the old layout where
   :has() is unsupported, which is wide but not broken. */
.elementor-column:has(> .elementor-widget-wrap > .bc-cta-pair) {
  width: auto;
  flex: 0 0 auto;
}

/* Collapsing the columns drops them at the start of the flex line, which
   left-aligned the centred CTA bands. Re-centre the row wherever the buttons
   themselves are set to centre, so left-aligned heroes stay left. */
.elementor-container:has(> .elementor-column > .elementor-widget-wrap > .bc-cta-pair.elementor-align-center) {
  justify-content: center;
}

@media (max-width: 767px) {
  .elementor-column:has(> .elementor-widget-wrap > .bc-cta-pair) {
    width: 100%;
    flex: 1 0 100%;
  }
}