/*
Theme Name:  Hello Elementor Child
Template:    hello-elementor
Description: Child theme for Precision Bathrooms
Version:     1.0.0
*/

/* =========================================================
   DESIGN TOKENS
   All hex values live ONLY here. Use var() everywhere else.
   Source of truth: Figma file 1c3BYlE6oVjsdoMQPlaPl6
   ========================================================= */

:root {

  /* --- Brand --- */
  --color-primary:      #DACCAC;   /* Accent/Brown — buttons, CTAs, accents */
  --color-primary-dark: #C4B090;   /* Darker hover variant of primary */

  /* --- Backgrounds --- */
  --color-bg:        #FFFEFB;     /* Main page background (Figma Background/BG 01) */
  --color-bg-dark:   #1D1C1A;    /* Dark section backgrounds, dark cards (Black 10) */
  --color-bg-light:  #E9E8E5;    /* Light neutral fills, light arrow circles (Black 04) */
  --color-bg-card:   #F8F7F4;    /* Card backgrounds — service/testimonial/FAQ/partner tiles (Black 02) */
  --color-border:    #E9E8E5;    /* Card outlines (Black 04) */
  --color-divider:   #B6B5B2;    /* Hairline dividers / muted icons (Black 06) */

  /* --- Text --- */
  --color-text:        #1D1C1A;  /* Primary text */
  --color-text-muted:  #6F6E6C;  /* Secondary / muted text (Figma) */
  --color-text-on-dark:  #FFFFFF; /* Text on dark backgrounds */
  --color-text-on-accent: #1D1C1A; /* Text on beige/primary CTA */

  /* --- Overlays --- */
  --color-overlay-nav:   rgba(29, 28, 26, 0.96);  /* Nav glass background */
  --color-overlay-badge: rgba(29, 28, 26, 0.08);  /* Badge pill background */

  /* --- CTA Section --- */
  --color-cta:  #DACCAC;         /* CTA section background = primary accent */

  /* --- Utility --- */
  --color-white:            #FFFFFF;
  --color-black:            #000000;
  --color-near-black:       #1D1C1A;
  --color-near-black-muted: rgba(29, 28, 26, 0.60);
  --color-white-hover:      #ECECEC;
  --color-star:             #F9AB00;   /* Google review star */
  --color-google:           #4285F4;   /* Google branding */

  /* --- Typography --- */
  --font-heading: 'Figtree', sans-serif;
  --font-body:    'Figtree', sans-serif;

  /* --- Font Sizes --- */
  --font-size-xs:   12px;   /* labels, badges */
  --font-size-sm:   14px;   /* secondary text, captions */
  --font-size-base: 16px;   /* body copy */
  --font-size-lg:   20px;   /* larger body, intro */
  --font-size-xl:   31px;   /* h3 / feature headings */
  --font-size-2xl:  49px;   /* h2 / section headings */
  --font-size-3xl:  61px;   /* h1 / hero heading */

  /* --- Line Heights --- */
  --line-height-tight:   1.15;
  --line-height-heading: 1.20;
  --line-height-body:    1.60;

  /* --- Spacing Scale --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --space-3xl: 80px;

  /* --- Layout --- */
  --max-width: 1170px;

  /* --- Border Radius --- */
  --border-radius-sm: 4px;
  --border-radius:    8px;
  --border-radius-lg: 12px;   /* buttons */
  --border-radius-xl: 16px;   /* cards, banners */
  --border-radius-2xl: 32px;  /* contact panel */

  /* --- Shadow --- */
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.15);

}

/* =========================================================
   BASE OVERRIDES
   ========================================================= */

html,
body {
  font-size: 16px;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* Prevents e-child containers from overflowing their parent
   at viewports between 768px and the content max-width */
.e-con {
  max-width: 100%;
}

/* =========================================================
   BADGE PILLS
   Applied via widget wrapper CSS class: pb-badge
   ========================================================= */

.pb-badge .elementor-widget-container {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background-color: var(--color-overlay-badge);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.pb-badge .elementor-widget-container::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary);
  flex-shrink: 0;
}

/* Badge on dark backgrounds */
.pb-badge-on-dark .elementor-widget-container {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

.pb-badge-on-dark .elementor-widget-container::before {
  background-color: var(--color-primary);
}

/* =========================================================
   BUTTONS
   Global padding for all Elementor button widgets
   ========================================================= */

.elementor-button {
  padding: 16px 24px;
}

.pb-num {
  margin-right: var(--space-sm);
}