/*
Theme Name:        Laly Love Child
Theme URI:         https://digitalflowstate.com/clients/lalylove
Description:       Hello Elementor child theme for Laly Love Children Daycare LLC (Bloomfield, CT). Brand-tokenized via CSS variables — change one value to re-skin the entire site. Designed for free Elementor + Crocoblock Full Suite (JetThemeCore, JetEngine, JetFormBuilder, JetMenu, JetElements, JetStyleManager). No Elementor Pro required.
Author:            Digital Flow State (Gabriel Luna)
Author URI:        https://digitalflowstate.com
Template:          hello-elementor
Version:           1.0.1
Text Domain:       lalylove
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Tags:              elementor, child-theme, jetengine, daycare, custom-colors, custom-logo
*/

/* =========================================================================
   LALY LOVE — DESIGN TOKENS
   Single source of truth for colors, typography, spacing, radius, shadows.
   To rebrand: change tokens in :root only. Components below consume them.
   ========================================================================= */

:root {

  /* ----------- ACTIVE PALETTE: PINK (parent-packet, mockup-aligned) ------- */
  --ll-color-primary:        #E91E8C;   /* magenta — primary CTA, links, headings accents */
  --ll-color-primary-hover:  #C9176F;   /* darker magenta — hover state */
  --ll-color-primary-soft:   #FCE4EF;   /* soft pink — section backgrounds, cards */
  --ll-color-primary-mist:   #FFF1F8;   /* lightest pink — page backgrounds */

  --ll-color-accent-yellow:  #FFD23F;   /* sunny yellow — secondary cards, highlights */
  --ll-color-accent-yellow-soft: #FFF6CC;
  --ll-color-accent-mint:    #9FE5C5;   /* mint green — third accent, success-ish */
  --ll-color-accent-mint-soft: #E0F5EA;
  --ll-color-accent-lavender: #B59BD9;  /* lavender — quiet section blocks */
  --ll-color-accent-lavender-soft: #E8DCFF;
  --ll-color-accent-coral:   #FF6B85;   /* coral — playful pop accent */

  --ll-color-cream:          #FFFBF7;   /* page bg / paper warmth */
  --ll-color-bg:             #FFFFFF;
  --ll-color-text:           #2A1B2E;   /* deep plum-ink — softer than black */
  --ll-color-text-muted:     #6B5C70;   /* secondary text */
  --ll-color-border:         #F4DCE8;
  --ll-color-footer-bg:      #C9176F;
  --ll-color-footer-text:    #FFFBF7;

  --ll-color-success: #1F7A4D;
  --ll-color-info:    #5BA8E0;
  --ll-color-warning: #FFB627;
  --ll-color-danger:  #FF6B85;

  /* ----------- BACKUP PALETTE: NAVY + HONEY (brand guide v1) -------------
     If Gladys flips back to the navy direction, comment out the PINK block
     above and uncomment the block below. ONE swap — site rebrands site-wide.

  --ll-color-primary:        #2B4F81;
  --ll-color-primary-hover:  #1F3A60;
  --ll-color-primary-soft:   #DCE6F2;
  --ll-color-primary-mist:   #F1F5FA;

  --ll-color-accent-yellow:  #E8A33D;
  --ll-color-accent-yellow-soft: #FAEBD0;
  --ll-color-accent-mint:    #7BAF94;
  --ll-color-accent-mint-soft: #DDEBE3;
  --ll-color-accent-lavender: #B8B0D6;
  --ll-color-accent-lavender-soft: #E8E4F0;
  --ll-color-accent-coral:   #D96C5F;

  --ll-color-cream:          #F9F4EC;
  --ll-color-bg:             #FFFFFF;
  --ll-color-text:           #2C2C2C;
  --ll-color-text-muted:     #6B6B6B;
  --ll-color-border:         #E6E3DC;
  --ll-color-footer-bg:      #2B4F81;
  --ll-color-footer-text:    #F9F4EC;
  ----------------------------------------------------------------------- */

  /* -------------------------- TYPOGRAPHY --------------------------------- */
  --ll-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ll-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ll-font-accent:  'Caveat', 'Brush Script MT', cursive;

  --ll-fs-h1:   clamp(2.25rem, 4vw + 1rem, 3.5rem);   /* 36–56px */
  --ll-fs-h2:   clamp(1.75rem, 3vw + 0.5rem, 2.75rem);/* 28–44px */
  --ll-fs-h3:   clamp(1.375rem, 1.5vw + 0.5rem, 1.75rem); /* 22–28px */
  --ll-fs-h4:   1.125rem;     /* 18px */
  --ll-fs-body: 1.0625rem;    /* 17px */
  --ll-fs-small: 0.875rem;    /* 14px */

  --ll-lh-tight:  1.15;
  --ll-lh-snug:   1.3;
  --ll-lh-normal: 1.55;
  --ll-lh-loose:  1.7;

  --ll-fw-regular:  400;
  --ll-fw-medium:   500;
  --ll-fw-semibold: 600;
  --ll-fw-bold:     700;

  /* --------------------------- SPACING ---------------------------------- */
  /* 4px base scale */
  --ll-space-1:  0.25rem;   --ll-space-2:  0.5rem;
  --ll-space-3:  0.75rem;   --ll-space-4:  1rem;
  --ll-space-5:  1.5rem;    --ll-space-6:  2rem;
  --ll-space-7:  3rem;      --ll-space-8:  4rem;
  --ll-space-9:  6rem;      --ll-space-10: 8rem;

  /* ------------------------- RADIUS / BORDERS --------------------------- */
  --ll-radius-sm:   6px;
  --ll-radius-md:   12px;
  --ll-radius-lg:   20px;
  --ll-radius-xl:   28px;
  --ll-radius-pill: 999px;

  /* ----------------------------- SHADOWS -------------------------------- */
  --ll-shadow-sm: 0 1px 2px rgba(42, 27, 46, 0.06);
  --ll-shadow-md: 0 4px 12px rgba(233, 30, 140, 0.08), 0 2px 4px rgba(42, 27, 46, 0.04);
  --ll-shadow-lg: 0 12px 32px rgba(233, 30, 140, 0.12), 0 4px 8px rgba(42, 27, 46, 0.05);

  /* ---------------------------- LAYOUT ---------------------------------- */
  --ll-container-max:    1200px;
  --ll-container-narrow: 720px;
  --ll-container-wide:   1400px;
  --ll-gutter:           clamp(1rem, 4vw, 2.5rem);

  /* --------------------------- TRANSITIONS ------------------------------ */
  --ll-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ll-duration:    220ms;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--ll-font-body);
  font-size: var(--ll-fs-body);
  line-height: var(--ll-lh-normal);
  color: var(--ll-color-text);
  background: var(--ll-color-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ll-font-heading);
  font-weight: var(--ll-fw-bold);
  line-height: var(--ll-lh-tight);
  color: var(--ll-color-text);
  margin: 0 0 var(--ll-space-4) 0;
}

h1 { font-size: var(--ll-fs-h1); }
h2 { font-size: var(--ll-fs-h2); }
h3 { font-size: var(--ll-fs-h3); font-weight: var(--ll-fw-medium); }
h4 { font-size: var(--ll-fs-h4); font-family: var(--ll-font-body); font-weight: var(--ll-fw-semibold); }

p { margin: 0 0 var(--ll-space-4) 0; }

a {
  color: var(--ll-color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--ll-duration) var(--ll-ease);
}
a:hover { color: var(--ll-color-primary-hover); }

img, svg { max-width: 100%; height: auto; display: block; }

/* =========================================================================
   COMPONENTS
   ========================================================================= */

/* Buttons — generic + Elementor button override hooks */
.ll-btn,
.elementor-button.elementor-button-link.ll-btn-primary,
.elementor-widget-button .elementor-button.ll-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ll-space-2);
  padding: var(--ll-space-3) var(--ll-space-6);
  font-family: var(--ll-font-body);
  font-size: var(--ll-fs-body);
  font-weight: var(--ll-fw-semibold);
  line-height: 1;
  border-radius: var(--ll-radius-pill);
  background: var(--ll-color-primary);
  color: #fff;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: var(--ll-shadow-md);
  transition: transform var(--ll-duration) var(--ll-ease),
              background var(--ll-duration) var(--ll-ease),
              box-shadow var(--ll-duration) var(--ll-ease);
  cursor: pointer;
}
.ll-btn:hover,
.elementor-widget-button .elementor-button.ll-btn-primary:hover {
  background: var(--ll-color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--ll-shadow-lg);
  color: #fff;
}

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

/* Cards */
.ll-card {
  background: var(--ll-color-bg);
  border: 1px solid var(--ll-color-border);
  border-radius: var(--ll-radius-lg);
  padding: var(--ll-space-6);
  box-shadow: var(--ll-shadow-sm);
  transition: transform var(--ll-duration) var(--ll-ease),
              box-shadow var(--ll-duration) var(--ll-ease);
}
.ll-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ll-shadow-md);
}

/* Section backgrounds (utility classes you can drop on Elementor sections) */
.ll-bg-cream    { background: var(--ll-color-cream); }
.ll-bg-soft     { background: var(--ll-color-primary-soft); }
.ll-bg-mist     { background: var(--ll-color-primary-mist); }
.ll-bg-lavender { background: var(--ll-color-accent-lavender-soft); }
.ll-bg-mint     { background: var(--ll-color-accent-mint-soft); }
.ll-bg-yellow   { background: var(--ll-color-accent-yellow-soft); }
.ll-bg-primary  { background: var(--ll-color-primary); color: #fff; }
.ll-bg-primary  h1, .ll-bg-primary h2, .ll-bg-primary h3, .ll-bg-primary h4 { color: #fff; }
.ll-bg-footer   { background: var(--ll-color-footer-bg); color: var(--ll-color-footer-text); }
.ll-bg-footer a { color: var(--ll-color-footer-text); }

/* Text helpers */
.ll-text-primary  { color: var(--ll-color-primary); }
.ll-text-muted    { color: var(--ll-color-text-muted); }
.ll-eyebrow {
  display: inline-block;
  font-family: var(--ll-font-body);
  font-size: var(--ll-fs-small);
  font-weight: var(--ll-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ll-color-primary);
  margin-bottom: var(--ll-space-3);
}

/* Forms — JetFormBuilder / Elementor form fields */
.jet-form-builder input[type="text"],
.jet-form-builder input[type="email"],
.jet-form-builder input[type="tel"],
.jet-form-builder textarea,
.jet-form-builder select,
.elementor-field-group .elementor-field {
  font-family: var(--ll-font-body);
  font-size: var(--ll-fs-body);
  padding: var(--ll-space-3) var(--ll-space-4);
  border: 2px solid var(--ll-color-border);
  border-radius: var(--ll-radius-md);
  background: var(--ll-color-bg);
  color: var(--ll-color-text);
  transition: border-color var(--ll-duration) var(--ll-ease),
              box-shadow var(--ll-duration) var(--ll-ease);
  width: 100%;
}
.jet-form-builder input:focus,
.jet-form-builder textarea:focus,
.jet-form-builder select:focus,
.elementor-field-group .elementor-field:focus {
  outline: none;
  border-color: var(--ll-color-primary);
  box-shadow: 0 0 0 4px var(--ll-color-primary-soft);
}

/* Footer baseline */
.site-footer { background: var(--ll-color-footer-bg); color: var(--ll-color-footer-text); }

/* Skip link (a11y) */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ll-color-primary); color: #fff;
  padding: var(--ll-space-3) var(--ll-space-4); border-radius: 0 0 var(--ll-radius-md) 0;
  z-index: 999;
}
.skip-link:focus { left: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *