@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');
/* Laasyam elegant enhancement layer — additive, scoped to content. Safe to remove. */

/* ---------- Global polish ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* prevent accidental horizontal scroll on phones */
html, body { overflow-x: hidden; }
#content img, #content iframe { max-width: 100%; height: auto; }

/* ---------- Image elegance + hover zoom ---------- */
#content figure.swiper-slide-inner,
#content .elementor-widget-image .elementor-widget-container {
  overflow: hidden;
  border-radius: 8px;
}
#content figure.swiper-slide-inner img,
#content .elementor-widget-image img {
  transition: transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  will-change: transform;
  display: block;
}
#content figure.swiper-slide-inner:hover img,
#content .elementor-widget-image:hover img {
  transform: scale(1.06);
}

/* ---------- Buttons & links ---------- */
#content .elementor-button,
#content .wpforms-submit,
#content button[type="submit"],
#content input[type="submit"] {
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background-color .25s ease !important;
}
#content .elementor-button:hover,
#content .wpforms-submit:hover,
#content button[type="submit"]:hover,
#content input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  filter: brightness(1.06);
}
#content a { transition: color .25s ease, opacity .25s ease; }

/* Nav: gentle animated underline */
.main-header-menu a { position: relative; transition: color .25s ease; }
.main-header-menu .menu-item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: currentColor; transform: scaleX(0);
  transform-origin: left center; transition: transform .3s ease; opacity: .7;
}
.main-header-menu .menu-item > a:hover::after { transform: scaleX(1); }

/* ---------- Scroll reveal (only active when JS adds .laasyam-js) ---------- */
.laasyam-js #content .elementor-widget-heading,
.laasyam-js #content .elementor-widget-text-editor,
.laasyam-js #content .elementor-widget-image,
.laasyam-js #content .elementor-widget-image-carousel,
.laasyam-js #content .elementor-widget-button {
  opacity: 0;
  transform: translateY(26px);
}
.laasyam-js #content .lz-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}

/* ---------- Mobile scaling ---------- */
@media (max-width: 600px) {
  .laasyam-js #content .elementor-widget-heading,
  .laasyam-js #content .elementor-widget-text-editor,
  .laasyam-js #content .elementor-widget-image,
  .laasyam-js #content .elementor-widget-image-carousel,
  .laasyam-js #content .elementor-widget-button { transform: translateY(18px); }

  #content .elementor-widget-heading .elementor-heading-title { line-height: 1.25 !important; }
  #content h1.elementor-heading-title { font-size: clamp(1.6rem, 7.5vw, 2.4rem) !important; }
  #content h2.elementor-heading-title { font-size: clamp(1.4rem, 6.2vw, 2rem) !important; }
}

/* ---------- Respect reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #content figure.swiper-slide-inner img,
  #content .elementor-widget-image img,
  #content .elementor-button,
  #content a { transition: none !important; }
}

/* ---------- Readability: text sitting over background photos ---------- */
/* IMPORTANT: do NOT recolor Elementor overlays — several are intentionally
   branded (e.g. magenta). Recoloring them turned a banner grey. Instead we
   give the light text a soft dark halo so it reads cleanly on busy photos
   without altering any background image or overlay. */
:is(#content,.ehf-footer,.footer-width-fixer) .elementor-background-overlay ~ .elementor-container .elementor-heading-title,
:is(#content,.ehf-footer,.footer-width-fixer) .elementor-background-overlay ~ .elementor-container .elementor-widget-text-editor,
:is(#content,.ehf-footer,.footer-width-fixer) .elementor-background-overlay ~ .elementor-container .elementor-widget-text-editor * {
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 16px rgba(0,0,0,0.55);
}

/* ---------- Hide the broken reCAPTCHA on the static test site ---------- */
/* The old form's reCAPTCHA key is bound to laasyam.ca and errors on pages.dev.
   These forms are being replaced (Formspree), so hide the broken widget/badge. */
:is(#content,.ehf-footer,.footer-width-fixer) .wpforms-recaptcha-container,
:is(#content,.ehf-footer,.footer-width-fixer) .g-recaptcha,
.grecaptcha-badge {
  display: none !important;
}

/* ===================================================================
   TYPOGRAPHY — unify to Poppins + one consistent, responsive scale
   Applied to text containers only (icons keep their own icon fonts).
   =================================================================== */

/* --- Font family: Poppins everywhere text lives --- */
body,
.elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-button, .elementor-button-text,
.elementor-icon-list-text,
.elementor-widget-icon-box .elementor-icon-box-title,
.elementor-widget-icon-box .elementor-icon-box-description,
.main-header-menu a,
.site-footer,
.wpforms-form,
.wpforms-form input, .wpforms-form textarea, .wpforms-form select,
.wpforms-form label, .wpforms-form button {
  font-family: 'Poppins', sans-serif !important;
}

/* --- Consistent heading scale (by level), responsive via clamp --- */
:is(#content,.ehf-footer,.footer-width-fixer) h1, :is(#content,.ehf-footer,.footer-width-fixer) h1.elementor-heading-title { font-size: clamp(2.0rem, 1.4rem + 2.4vw, 3.0rem) !important; line-height: 1.22 !important; font-weight: 700 !important; }
:is(#content,.ehf-footer,.footer-width-fixer) h2, :is(#content,.ehf-footer,.footer-width-fixer) h2.elementor-heading-title { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.4rem) !important; line-height: 1.25 !important; font-weight: 700 !important; }
:is(#content,.ehf-footer,.footer-width-fixer) h3, :is(#content,.ehf-footer,.footer-width-fixer) h3.elementor-heading-title { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem) !important;  line-height: 1.3 !important;  font-weight: 600 !important; }
:is(#content,.ehf-footer,.footer-width-fixer) h4, :is(#content,.ehf-footer,.footer-width-fixer) h4.elementor-heading-title { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem) !important; line-height: 1.35 !important; font-weight: 600 !important; }
:is(#content,.ehf-footer,.footer-width-fixer) h5, :is(#content,.ehf-footer,.footer-width-fixer) h5.elementor-heading-title { font-size: clamp(1.08rem, 1rem + 0.4vw, 1.25rem) !important; line-height: 1.4 !important;  font-weight: 600 !important; }
:is(#content,.ehf-footer,.footer-width-fixer) h6, :is(#content,.ehf-footer,.footer-width-fixer) h6.elementor-heading-title { font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem) !important; line-height: 1.45 !important; font-weight: 600 !important; letter-spacing: .02em; }

/* Heading widgets that use a non-heading tag (e.g. the poetic quote is a <p>)
   — keep them at a graceful display size instead of shrinking to body size. */
:is(#content,.ehf-footer,.footer-width-fixer) p.elementor-heading-title,
:is(#content,.ehf-footer,.footer-width-fixer) div.elementor-heading-title,
:is(#content,.ehf-footer,.footer-width-fixer) span.elementor-heading-title {
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem) !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;
}

/* --- Consistent body copy --- */
:is(#content,.ehf-footer,.footer-width-fixer) .elementor-widget-text-editor,
:is(#content,.ehf-footer,.footer-width-fixer) .elementor-widget-text-editor p,
:is(#content,.ehf-footer,.footer-width-fixer) .elementor-widget-text-editor li,
:is(#content,.ehf-footer,.footer-width-fixer) .entry-content p,
:is(#content,.ehf-footer,.footer-width-fixer) .entry-content li {
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem) !important;
  line-height: 1.75 !important;
  font-weight: 400 !important;
}

/* Buttons + menu: consistent weight/size */
:is(#content,.ehf-footer,.footer-width-fixer) .elementor-button { font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem) !important; font-weight: 600 !important; letter-spacing: .01em; }
.main-header-menu a { font-weight: 500 !important; }

/* ===================================================================
   Projects page — this list is built as ONE <h3> heading widget, so the
   global heading scale wrongly blew it up. Restore it to readable body
   text and turn the year labels into clean bold gold sub-headers.
   =================================================================== */
.elementor-element-9beadc8 .elementor-heading-title {
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem) !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;
  letter-spacing: 0 !important;
}
.elementor-element-9beadc8 .lz-year {
  display: inline-block;
  font-weight: 700;
  font-size: 1.3em;
  color: #C9A227;
  letter-spacing: .03em;
  margin: 10px 0 2px;
}

/* ===================================================================
   Uniform page banner (injected by JS on every inner page) — gradient
   header with the page title, consistent + compact across the site.
   =================================================================== */
.lz-pagebanner {
  width: 100%;
  background: linear-gradient(45deg, #EE0979 0%, #FF6A00 100%);
  min-height: 190px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 26px 20px;
  box-sizing: border-box;
}
.lz-pagebanner h1 {
  margin: 0;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem);
  letter-spacing: .01em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
@media (max-width: 600px) { .lz-pagebanner { min-height: 120px; padding: 18px 16px; } }

/* Homepage hero — remove the "We are thrilled…" intro text (per request). */
#content .elementor-element-1020099 { display: none !important; }

/* Projects page — the background slideshow is centered, cropping the dancer's
   head against the banner. Anchor it nearer the top so the head shows. */
.elementor-element-6095069 .elementor-background-slideshow__slide__image {
  background-position: center 22% !important;
}

/* ===================================================================
   Formspree-powered forms (Contact + Registration) — clean styling.
   =================================================================== */
.lz-form { max-width: 720px; margin: 0 auto; text-align: left; }
.lz-form .lz-field { margin-bottom: 16px; }
.lz-form > .lz-field > label,
.lz-form .lz-field > label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.lz-form input[type="text"],
.lz-form input[type="email"],
.lz-form textarea {
  width: 100%; box-sizing: border-box; padding: 11px 13px;
  border: 1px solid #c7bcc2; border-radius: 8px;
  font-family: 'Poppins', sans-serif; font-size: 1rem;
  background: #ffffff; color: #222222;
}
.lz-form textarea { resize: vertical; }
.lz-form .lz-row { display: flex; gap: 14px; }
.lz-form .lz-row .lz-field { flex: 1; }
.lz-form .req { color: #ff7ab0; }
.lz-form .lz-radios { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 2px; }
.lz-form .lz-opt { display: flex; align-items: center; gap: 7px; font-weight: 400; margin: 0; }
.lz-form .lz-opt input { width: auto; margin: 0; }
.lz-form .lz-check .lz-opt { align-items: flex-start; line-height: 1.5; }
.lz-form .lz-submit {
  background: linear-gradient(45deg, #EE0979 0%, #FF6A00 100%);
  color: #fff; border: none; cursor: pointer;
  padding: 13px 36px; border-radius: 30px;
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem;
  margin-top: 10px; transition: transform .2s ease, box-shadow .2s ease;
}
.lz-form .lz-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
@media (max-width: 560px) { .lz-form .lz-row { flex-direction: column; gap: 0; } }

/* form: style native date input like the others + AJAX thank-you / error */
.lz-form input[type="date"] {
  width: 100%; box-sizing: border-box; padding: 10px 13px;
  border: 1px solid #c7bcc2; border-radius: 8px;
  font-family: 'Poppins', sans-serif; font-size: 1rem; background: #ffffff; color: #222222;
}
.lz-thanks { text-align: center; padding: 24px 16px; }
.lz-thanks h3 { margin: 0 0 8px; font-size: 1.5rem; }
.lz-thanks p { margin: 0; opacity: 0.9; }
.lz-error { color: #ffd1df; background: rgba(180,20,60,0.35); border: 1px solid rgba(255,120,160,0.5);
  padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 0.95rem; }