/*
 Theme Name:   Woodwinds
 Theme URI:    https://thewoodwinds.ca
 Description:  Custom child theme for The Woodwinds — 37-unit luxury townhome development by Symphony Homes Limited. Built for Elementor Pro with modular architecture.
 Author:       Symphony Homes Limited
 Author URI:   https://symphonygroup.ca
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  woodwinds
*/

/* ==========================================================================
   CSS Custom Properties — Design System
   Centralized here for easy Phase 2 reskinning.
   ========================================================================== */

:root {
    /* Brand Colors */
    --ww-primary:         #ab6f55;   /* Copper */
    --ww-primary-dark:    #8B5A3E;   /* Deep brown */
    --ww-primary-light:   #C4917A;   /* Light copper */

    /* Text Colors */
    --ww-text-dark:       #1a1a1a;
    --ww-text-medium:     #4a4a4a;
    --ww-text-light:      #7a7a7a;
    --ww-text-on-dark:    #ffffff;

    /* Background Colors */
    --ww-bg:              #fafafa;
    --ww-bg-alt:          #f5f0eb;   /* Warm white */
    --ww-bg-dark:         #2c2c2c;   /* Charcoal */
    --ww-bg-footer:       #1a1a1a;

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

    /* Spacing */
    --ww-section-padding: clamp(60px, 8vw, 120px);
    --ww-container-width: 1200px;

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

/* ==========================================================================
   Minimal Base Resets
   Only what Astra/Elementor don't handle well.
   ========================================================================== */

body {
    color: var(--ww-text-dark);
    background-color: var(--ww-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Remove default focus outline, add accessible alternative */
*:focus-visible {
    outline: 2px solid var(--ww-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Elementor Overrides
   Keeps Elementor output consistent with our design system.
   ========================================================================== */

/* Ensure Elementor sections respect our max width */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: var(--ww-container-width);
}

/* Default link styles */
a {
    color: var(--ww-primary);
    transition: color var(--ww-transition);
}

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


/* ── Thank You Section ──────────────────────────────────── */
.ww-thankyou {
  background: #F9F8F6;
  padding: 80px 5vw;
  text-align: center;
}

.ww-thankyou__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ww-primary);
  margin-bottom: 14px;
}

.ww-thankyou__heading .elementor-heading-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--ww-secondary);
  line-height: 1.2;
  margin-bottom: 20px;
}

.ww-thankyou__body {
  font-size: 16px;
  color: var(--ww-text);
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto 36px;
}

.ww-thankyou__list .elementor-icon-list-items {
  display: inline-block;
  text-align: left;
}

.ww-thankyou__list .elementor-icon-list-icon i {
  color: var(--ww-primary) !important;
}

.ww-thankyou__list .elementor-icon-list-text {
  font-size: 15px;
  color: var(--ww-text);
  line-height: 1.7;
}

/* ── Register Interest Section ──────────────────────────── */
.ww-register {
  background: var(--ww-primary);
  padding: 80px 5vw;
  text-align: center;
}

.ww-register__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}

.ww-register__heading .elementor-heading-title {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 16px;
}

.ww-register__body {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.8;
  max-width: 520px;
  margin: 0 auto 32px;
}

/* Form fields */
.ww-register__form .elementor-field-group input {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
}

.ww-register__form .elementor-field-group input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.ww-register__form .elementor-button {
  background: #3D2B24 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 14px 36px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  border-radius: 4px !important;
  transition: background 0.2s ease !important;
}

.ww-register__form .elementor-button:hover {
  background: #2B201D !important;
}

/* Fine print */
.ww-register__form .elementor-field-type-acceptance label,
.ww-register-fine {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin-top: 16px;
}