/*
 Theme Name:   EverClean Lakes Area
 Theme URI:    https://evercleanlakesarea.com
 Description:  Child theme for EverClean Lakes Area cleaning company, built on Hello Elementor. Provides brand foundations (fonts, colors, styles) while Elementor Pro handles page layout and design.
 Author:       EverClean Lakes Area
 Author URI:   https://everclean-lakesarea.com
 Template:     hello-elementor
 Version:      1.6.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  everclean-lakes-area
*/

/* ==========================================================================
   CSS Custom Properties – Brand Tokens
   ========================================================================== */

:root {
  /* Brand Colors */
  --ec-blue: #00559C;
  --ec-blue-dark: #003F75;
  --ec-blue-light: #1A6FB5;
  --ec-green: #68B578;
  --ec-green-dark: #28764A;
  --ec-green-light: #7EC48C;
  --ec-dark-gray: #3A3A3A;
  --ec-brown: #66543E;
  --ec-black: #000000;
  --ec-white: #FFFFFF;
  --ec-off-white: #F8F9FA;
  --ec-light-gray: #E9ECEF;

  /* Typography */
  --ec-font-heading: 'Poppins', sans-serif;
  --ec-font-body: 'Roboto', sans-serif;
  --ec-font-accent: 'Roboto Slab', serif;
  --ec-text-muted: #7A7A7A;

  /* Spacing */
  --ec-spacing-xs: 0.5rem;
  --ec-spacing-sm: 1rem;
  --ec-spacing-md: 1.5rem;
  --ec-spacing-lg: 2.5rem;
  --ec-spacing-xl: 4rem;

  /* Border Radius */
  --ec-radius-sm: 4px;
  --ec-radius-md: 8px;
  --ec-radius-lg: 16px;
  --ec-radius-pill: 50px;

  /* Shadows */
  --ec-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --ec-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --ec-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Transitions */
  --ec-transition: 0.3s ease;
}

/* ==========================================================================
   Base Typography
   ========================================================================== */

body {
  font-family: var(--ec-font-body);
  font-weight: 400;
  color: var(--ec-dark-gray);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ec-font-heading);
  font-weight: 700;
  color: #000000;
  line-height: 1.2;
}

p {
  margin-bottom: 1rem;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
  color: var(--ec-blue);
  text-decoration: none;
  transition: color var(--ec-transition);
}

a:hover,
a:focus {
  color: var(--ec-blue-dark);
  text-decoration: underline;
}

/* ==========================================================================
   Buttons (base styles – Elementor buttons inherit these via overrides)
   ========================================================================== */

.ec-btn,
button[type="submit"],
input[type="submit"] {
  display: inline-block;
  font-family: var(--ec-font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: var(--ec-radius-pill);
  cursor: pointer;
  transition: all var(--ec-transition);
  text-decoration: none;
  text-align: center;
  line-height: 1.4;
}

.ec-btn-primary,
button[type="submit"],
input[type="submit"] {
  background-color: var(--ec-green);
  color: var(--ec-white);
}

.ec-btn-primary:hover,
.ec-btn-primary:focus,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--ec-green-dark);
  color: var(--ec-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--ec-shadow-md);
}

.ec-btn-secondary {
  background-color: var(--ec-blue);
  color: var(--ec-white);
}

.ec-btn-secondary:hover,
.ec-btn-secondary:focus {
  background-color: var(--ec-blue-dark);
  color: var(--ec-white);
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--ec-shadow-md);
}

.ec-btn-outline {
  background-color: transparent;
  color: var(--ec-blue);
  border: 2px solid var(--ec-blue);
}

.ec-btn-outline:hover,
.ec-btn-outline:focus {
  background-color: var(--ec-blue);
  color: var(--ec-white);
  text-decoration: none;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.ec-text-blue { color: var(--ec-blue); }
.ec-text-green { color: var(--ec-green); }
.ec-text-dark { color: var(--ec-dark-gray); }
.ec-text-brown { color: var(--ec-brown); }
.ec-text-white { color: var(--ec-white); }

.ec-bg-blue { background-color: var(--ec-blue); }
.ec-bg-green { background-color: var(--ec-green); }
.ec-bg-dark { background-color: var(--ec-dark-gray); }
.ec-bg-off-white { background-color: var(--ec-off-white); }
.ec-bg-white { background-color: var(--ec-white); }

/* ==========================================================================
   Selection
   ========================================================================== */

::selection {
  background-color: var(--ec-blue);
  color: var(--ec-white);
}

/* ==========================================================================
   Accessibility – Focus Styles
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--ec-blue-light);
  outline-offset: 2px;
}

/* ==========================================================================
   Responsive Helpers
   ========================================================================== */

@media (max-width: 767px) {
  h1 { margin-bottom: var(--ec-spacing-sm); }
  h2 { margin-bottom: var(--ec-spacing-sm); }
}