/*
 * TLP DESIGN SYSTEM
 * That Lebanese Place — Child Theme Stylesheet
 *
 * TABLE OF CONTENTS
 *   01. Font Note
 *   02. Brand Color Tokens
 *   03. Semantic Tokens — Light Mode
 *   04. Semantic Tokens — Dark Mode
 *   05. Section Background Classes
 *   06. Motion Tokens
 *   07. Base Body and Reset
 *   08. Elementor Global Color Mapping
 *   09. Color Utility Classes
 *   10. Paired Color Classes (Text and Background)
 *   11. Gallery Widget — Dark Mode
 *   12. Button Style Classes
 *   13. Button Shimmer (buttons-style-1)
 *   14. Micro Animations
 *   15. Scroll Reveal
 *   16. Header, Logos, Icons, Dark Mode Toggle, and Off-Canvas
 *   17. Contact Forms
 *   18. Accessibility — Reduced Motion
 *
 * COLOR ABBREVIATIONS:
 *   cm = cream     gy = grey      gn = green
 *   rd = red       gd = gold
 *
 * CLASS NAMING:
 *   section-{color}           Section backgrounds
 *   bg-{color}                Background color utility
 *   text-{color}              Text color utility
 *   fill-{color}              SVG fill utility
 *   text-{light}-{dark}       Paired text: light mode to dark mode
 *   bg-{light}-{dark}         Paired bg: light mode to dark mode
 *   btn-{color}               Button style (bg, text, border, hover, dark) 
 *
 * LAST UPDATED: 2026-05-29
 */

/* ============================================================
   02. BRAND COLOR TOKENS
   ============================================================ */

:root {
  --color-cream: #fffaf3;
  --color-grey: #3b3738;
  --color-green: #2e7d60;
  --color-red: #c0392b;
  --color-gold: #d4a017;
  --color-white: #ffffff;
  --color-black: #000000;

  --color-green-dark: #245f4a;
  --color-red-dark: #a03020;
  --color-gold-dark: #b08010;
}

/* ============================================================
   03. SEMANTIC TOKENS — Light Mode (default)
   ============================================================ */

:root {
  --bg-page: var(--color-cream);
  --bg-card: #f5eee4;
  --bg-overlay: rgba(59, 55, 56, 0.06);

  --bg-section-cm: var(--color-cream);
  --bg-section-gn: var(--color-green);
  --bg-section-rd: var(--color-red);
  --bg-section-gd: var(--color-gold);
  --bg-section-gy: var(--color-grey);

  --text-primary: var(--color-grey);
  --text-secondary: #6b6668;
  --text-muted: #9c9496;

  --text-on-green: var(--color-cream);
  --text-on-red: var(--color-cream);
  --text-on-dark: var(--color-cream);
  --text-on-gold: var(--color-grey);

  --border-subtle: rgba(59, 55, 56, 0.12);
  --border-medium: rgba(59, 55, 56, 0.25);

  --accent-green: var(--color-green);
  --accent-red: var(--color-red);
  --accent-gold: var(--color-gold);

  --header-bg: var(--color-cream);
  --header-text: var(--color-grey);
  --header-border: rgba(59, 55, 56, 0.1);
}

/* ============================================================
   04. SEMANTIC TOKENS — Dark Mode
   ============================================================ */

html.dark-mode,
html.dark-mode body,
body.dark-mode {
  --bg-page: var(--color-grey);
  --bg-card: #3b3738;
  --bg-overlay: rgba(255, 250, 243, 0.06);

  --bg-section-cm: var(--color-grey);
  --bg-section-gn: var(--color-green-dark);
  --bg-section-rd: var(--color-red-dark);
  --bg-section-gd: var(--color-gold-dark);
  --bg-section-gy: #3b3738;

  --text-primary: var(--color-cream);
  --text-secondary: #c8c3be;
  --text-muted: #8a8586;

  --border-subtle: rgba(255, 250, 243, 0.1);
  --border-medium: rgba(255, 250, 243, 0.22);

  --header-bg: var(--color-grey);
  --header-text: var(--color-cream);
  --header-border: rgba(255, 250, 243, 0.18);

  --e-global-color-text: var(--color-cream);
  --e-global-color-48ca87d: var(--color-cream);
  background-color: var(--color-grey);
}

/* ============================================================
   05. SECTION BACKGROUND CLASSES
   ============================================================ */

.section-cm,
.section-gn,
.section-rd,
.section-gd,
.section-gy {
  transition:
    background-color var(--motion-medium) var(--ease-standard),
    color var(--motion-medium) var(--ease-standard);
}

.section-cm {
  background-color: var(--bg-section-cm);
  color: var(--text-primary);
}
.section-gn {
  background-color: var(--bg-section-gn);
  color: var(--text-on-green);
}
.section-rd {
  background-color: var(--bg-section-rd);
  color: var(--text-on-red);
}
.section-gd {
  background-color: var(--bg-section-gd);
  color: var(--text-on-gold);
}
.section-gy {
  background-color: var(--bg-section-gy);
  color: var(--text-on-dark);
}

.section-gn .elementor-heading-title,
.section-gn .elementor-widget-text-editor,
.section-gn p,
.section-gn a,
.section-rd .elementor-heading-title,
.section-rd .elementor-widget-text-editor,
.section-rd p,
.section-rd a,
.section-gy .elementor-heading-title,
.section-gy .elementor-widget-text-editor,
.section-gy p,
.section-gy a {
  color: var(--color-cream);
}

.section-gd .elementor-heading-title,
.section-gd .elementor-widget-text-editor,
.section-gd p,
.section-gd a {
  color: var(--color-grey);
}

.section-gn .type-eyebrow,
.section-rd .type-eyebrow,
.section-gy .type-eyebrow {
  color: rgba(255, 250, 243, 0.72);
}

.section-gd .type-eyebrow {
  color: rgba(59, 55, 56, 0.62);
}

/* ============================================================
   06. MOTION TOKENS
   ============================================================ */

:root {
  --motion-fast: 150ms;
  --motion-medium: 250ms;
  --motion-slow: 400ms;
  --motion-reveal: 600ms;

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   07. BASE BODY AND RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-page);
}

html,
body,
.elementor,
.elementor-location-footer,
.elementor-page,
.site,
.site-main,
main {
  background-color: var(--bg-page);
  color: var(--text-primary);
  transition:
    background-color var(--motion-medium) var(--ease-standard),
    color var(--motion-medium) var(--ease-standard);
}

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

/* ============================================================
   08. ELEMENTOR GLOBAL COLOR MAPPING
   ============================================================ */

:root {
  --e-global-color-primary: var(--accent-green);
  --e-global-color-secondary: var(--accent-red);
  --e-global-color-text: var(--text-primary);
  --e-global-color-accent: var(--accent-gold);

  --e-global-color-c696dce: var(--bg-page);
  --e-global-color-48ca87d: var(--text-primary);
  --e-global-color-d6cea4e: var(--color-cream);
  --e-global-color-35dd080: var(--color-grey);
}
/* Default heading color — overrides Elementor's global primary */
.elementor-widget-heading .elementor-heading-title {
  color: var(--text-primary);
}

html.dark-mode .elementor-widget-heading .elementor-heading-title,
body.dark-mode .elementor-widget-heading .elementor-heading-title {
  color: var(--color-cream);
}
/* ============================================================
   09. COLOR UTILITY CLASSES
   Apply to any element in Elementor via the CSS Classes field.

   Background:  bg-gn, bg-rd, bg-gd, bg-cm, bg-gy
   Text:        text-gn, text-rd, text-gd, text-cm, text-gy
   Fill (SVG):  fill-gn, fill-rd, fill-gd, fill-cm, fill-gy
   ============================================================ */

/* -- Background utilities ----------------------------------- */

.bg-gn { background-color: var(--accent-green) !important; }
.bg-rd { background-color: var(--accent-red)   !important; }
.bg-gd { background-color: var(--accent-gold)  !important; }
.bg-cm { background-color: var(--color-cream)  !important; }
.bg-gy { background-color: var(--color-grey)   !important; }

html.dark-mode .bg-cm,
body.dark-mode .bg-cm {
  background-color: var(--color-grey) !important;
}

html.dark-mode .bg-gy,
body.dark-mode .bg-gy {
  background-color: var(--color-cream) !important;
}

html.dark-mode .bg-gn,
body.dark-mode .bg-gn {
  background-color: var(--color-green-dark) !important;
}

html.dark-mode .bg-rd,
body.dark-mode .bg-rd {
  background-color: var(--color-red-dark) !important;
}

html.dark-mode .bg-gd,
body.dark-mode .bg-gd {
  background-color: var(--color-gold-dark) !important;
}

/* -- Text color utilities ----------------------------------- */

.text-gn { color: var(--accent-green) !important; }
.text-rd { color: var(--accent-red)   !important; }
.text-gd { color: var(--accent-gold)  !important; }
.text-cm { color: var(--color-cream)  !important; }
.text-gy { color: var(--color-grey)   !important; }

html.dark-mode .text-cm,
body.dark-mode .text-cm {
  color: var(--color-grey) !important;
}

html.dark-mode .text-gy,
body.dark-mode .text-gy {
  color: var(--color-cream) !important;
}

/* -- SVG fill utilities ------------------------------------- */

.fill-gn { fill: var(--accent-green) !important; }
.fill-rd { fill: var(--accent-red)   !important; }
.fill-gd { fill: var(--accent-gold)  !important; }
.fill-cm { fill: var(--color-cream)  !important; }
.fill-gy { fill: var(--color-grey)   !important; }

/* ============================================================
   10. PAIRED COLOR CLASSES (Light to Dark)
   Format: text-{light}-{dark}  and  bg-{light}-{dark}
   Apply via CSS Classes in Elementor Advanced tab.
   First color = light mode, second = dark mode.

   Colors: cm, gy, gn, rd, gd, dgn, drd, dgd

   Example: text-gn-cm  = green text in light, cream in dark
            bg-rd-drd   = red bg in light, dark red bg in dark

   FOR HEADINGS & TEXT: Remove the color from the widget's
   Style tab (set to Default), then add the class. Elementor's
   per-element color will override the class if both are set.

   FOR BUTTONS: Remove background/text color from Style tab,
   then add the class to the button widget's CSS Classes.
   ============================================================ */

/* ── PAIRED TEXT: cream light ─────────────────────────────── */
.text-cm-cm  { color: var(--color-cream) !important; }
.text-cm-gy  { color: var(--color-cream) !important; }
.text-cm-gn  { color: var(--color-cream) !important; }
.text-cm-rd  { color: var(--color-cream) !important; }
.text-cm-gd  { color: var(--color-cream) !important; }
.text-cm-dgn { color: var(--color-cream) !important; }
.text-cm-drd { color: var(--color-cream) !important; }
.text-cm-dgd { color: var(--color-cream) !important; }

html.dark-mode .text-cm-cm,  body.dark-mode .text-cm-cm  { color: var(--color-cream)      !important; }
html.dark-mode .text-cm-gy,  body.dark-mode .text-cm-gy  { color: var(--color-grey)       !important; }
html.dark-mode .text-cm-gn,  body.dark-mode .text-cm-gn  { color: var(--color-green)      !important; }
html.dark-mode .text-cm-rd,  body.dark-mode .text-cm-rd  { color: var(--color-red)        !important; }
html.dark-mode .text-cm-gd,  body.dark-mode .text-cm-gd  { color: var(--color-gold)       !important; }
html.dark-mode .text-cm-dgn, body.dark-mode .text-cm-dgn { color: var(--color-green-dark) !important; }
html.dark-mode .text-cm-drd, body.dark-mode .text-cm-drd { color: var(--color-red-dark)   !important; }
html.dark-mode .text-cm-dgd, body.dark-mode .text-cm-dgd { color: var(--color-gold-dark)  !important; }

/* ── PAIRED TEXT: grey light ──────────────────────────────── */
.text-gy-gy  { color: var(--color-grey) !important; }
.text-gy-cm  { color: var(--color-grey) !important; }
.text-gy-gn  { color: var(--color-grey) !important; }
.text-gy-rd  { color: var(--color-grey) !important; }
.text-gy-gd  { color: var(--color-grey) !important; }
.text-gy-dgn { color: var(--color-grey) !important; }
.text-gy-drd { color: var(--color-grey) !important; }
.text-gy-dgd { color: var(--color-grey) !important; }

html.dark-mode .text-gy-gy,  body.dark-mode .text-gy-gy  { color: var(--color-grey)       !important; }
html.dark-mode .text-gy-cm,  body.dark-mode .text-gy-cm  { color: var(--color-cream)      !important; }
html.dark-mode .text-gy-gn,  body.dark-mode .text-gy-gn  { color: var(--color-green)      !important; }
html.dark-mode .text-gy-rd,  body.dark-mode .text-gy-rd  { color: var(--color-red)        !important; }
html.dark-mode .text-gy-gd,  body.dark-mode .text-gy-gd  { color: var(--color-gold)       !important; }
html.dark-mode .text-gy-dgn, body.dark-mode .text-gy-dgn { color: var(--color-green-dark) !important; }
html.dark-mode .text-gy-drd, body.dark-mode .text-gy-drd { color: var(--color-red-dark)   !important; }
html.dark-mode .text-gy-dgd, body.dark-mode .text-gy-dgd { color: var(--color-gold-dark)  !important; }

/* ── PAIRED TEXT: green light ─────────────────────────────── */
.text-gn-gn  { color: var(--color-green) !important; }
.text-gn-cm  { color: var(--color-green) !important; }
.text-gn-gy  { color: var(--color-green) !important; }
.text-gn-rd  { color: var(--color-green) !important; }
.text-gn-gd  { color: var(--color-green) !important; }
.text-gn-dgn { color: var(--color-green) !important; }
.text-gn-drd { color: var(--color-green) !important; }
.text-gn-dgd { color: var(--color-green) !important; }

html.dark-mode .text-gn-gn,  body.dark-mode .text-gn-gn  { color: var(--color-green)      !important; }
html.dark-mode .text-gn-cm,  body.dark-mode .text-gn-cm  { color: var(--color-cream)      !important; }
html.dark-mode .text-gn-gy,  body.dark-mode .text-gn-gy  { color: var(--color-grey)       !important; }
html.dark-mode .text-gn-rd,  body.dark-mode .text-gn-rd  { color: var(--color-red)        !important; }
html.dark-mode .text-gn-gd,  body.dark-mode .text-gn-gd  { color: var(--color-gold)       !important; }
html.dark-mode .text-gn-dgn, body.dark-mode .text-gn-dgn { color: var(--color-green-dark) !important; }
html.dark-mode .text-gn-drd, body.dark-mode .text-gn-drd { color: var(--color-red-dark)   !important; }
html.dark-mode .text-gn-dgd, body.dark-mode .text-gn-dgd { color: var(--color-gold-dark)  !important; }

/* ── PAIRED TEXT: red light ───────────────────────────────── */
.text-rd-rd  { color: var(--color-red) !important; }
.text-rd-cm  { color: var(--color-red) !important; }
.text-rd-gy  { color: var(--color-red) !important; }
.text-rd-gn  { color: var(--color-red) !important; }
.text-rd-gd  { color: var(--color-red) !important; }
.text-rd-dgn { color: var(--color-red) !important; }
.text-rd-drd { color: var(--color-red) !important; }
.text-rd-dgd { color: var(--color-red) !important; }

html.dark-mode .text-rd-rd,  body.dark-mode .text-rd-rd  { color: var(--color-red)        !important; }
html.dark-mode .text-rd-cm,  body.dark-mode .text-rd-cm  { color: var(--color-cream)      !important; }
html.dark-mode .text-rd-gy,  body.dark-mode .text-rd-gy  { color: var(--color-grey)       !important; }
html.dark-mode .text-rd-gn,  body.dark-mode .text-rd-gn  { color: var(--color-green)      !important; }
html.dark-mode .text-rd-gd,  body.dark-mode .text-rd-gd  { color: var(--color-gold)       !important; }
html.dark-mode .text-rd-dgn, body.dark-mode .text-rd-dgn { color: var(--color-green-dark) !important; }
html.dark-mode .text-rd-drd, body.dark-mode .text-rd-drd { color: var(--color-red-dark)   !important; }
html.dark-mode .text-rd-dgd, body.dark-mode .text-rd-dgd { color: var(--color-gold-dark)  !important; }

/* ── PAIRED TEXT: gold light ──────────────────────────────── */
.text-gd-gd  { color: var(--color-gold) !important; }
.text-gd-cm  { color: var(--color-gold) !important; }
.text-gd-gy  { color: var(--color-gold) !important; }
.text-gd-gn  { color: var(--color-gold) !important; }
.text-gd-rd  { color: var(--color-gold) !important; }
.text-gd-dgn { color: var(--color-gold) !important; }
.text-gd-drd { color: var(--color-gold) !important; }
.text-gd-dgd { color: var(--color-gold) !important; }

html.dark-mode .text-gd-gd,  body.dark-mode .text-gd-gd  { color: var(--color-gold)       !important; }
html.dark-mode .text-gd-cm,  body.dark-mode .text-gd-cm  { color: var(--color-cream)      !important; }
html.dark-mode .text-gd-gy,  body.dark-mode .text-gd-gy  { color: var(--color-grey)       !important; }
html.dark-mode .text-gd-gn,  body.dark-mode .text-gd-gn  { color: var(--color-green)      !important; }
html.dark-mode .text-gd-rd,  body.dark-mode .text-gd-rd  { color: var(--color-red)        !important; }
html.dark-mode .text-gd-dgn, body.dark-mode .text-gd-dgn { color: var(--color-green-dark) !important; }
html.dark-mode .text-gd-drd, body.dark-mode .text-gd-drd { color: var(--color-red-dark)   !important; }
html.dark-mode .text-gd-dgd, body.dark-mode .text-gd-dgd { color: var(--color-gold-dark)  !important; }

/* ── PAIRED BG: cream light ──────────────────────────────── */
.bg-cm-cm  { background-color: var(--color-cream) !important; }
.bg-cm-gy  { background-color: var(--color-cream) !important; }
.bg-cm-gn  { background-color: var(--color-cream) !important; }
.bg-cm-rd  { background-color: var(--color-cream) !important; }
.bg-cm-gd  { background-color: var(--color-cream) !important; }
.bg-cm-dgn { background-color: var(--color-cream) !important; }
.bg-cm-drd { background-color: var(--color-cream) !important; }
.bg-cm-dgd { background-color: var(--color-cream) !important; }

html.dark-mode .bg-cm-cm,  body.dark-mode .bg-cm-cm  { background-color: var(--color-cream)      !important; }
html.dark-mode .bg-cm-gy,  body.dark-mode .bg-cm-gy  { background-color: var(--color-grey)       !important; }
html.dark-mode .bg-cm-gn,  body.dark-mode .bg-cm-gn  { background-color: var(--color-green)      !important; }
html.dark-mode .bg-cm-rd,  body.dark-mode .bg-cm-rd  { background-color: var(--color-red)        !important; }
html.dark-mode .bg-cm-gd,  body.dark-mode .bg-cm-gd  { background-color: var(--color-gold)       !important; }
html.dark-mode .bg-cm-dgn, body.dark-mode .bg-cm-dgn { background-color: var(--color-green-dark) !important; }
html.dark-mode .bg-cm-drd, body.dark-mode .bg-cm-drd { background-color: var(--color-red-dark)   !important; }
html.dark-mode .bg-cm-dgd, body.dark-mode .bg-cm-dgd { background-color: var(--color-gold-dark)  !important; }

/* ── PAIRED BG: grey light ───────────────────────────────── */
.bg-gy-gy  { background-color: var(--color-grey) !important; }
.bg-gy-cm  { background-color: var(--color-grey) !important; }
.bg-gy-gn  { background-color: var(--color-grey) !important; }
.bg-gy-rd  { background-color: var(--color-grey) !important; }
.bg-gy-gd  { background-color: var(--color-grey) !important; }
.bg-gy-dgn { background-color: var(--color-grey) !important; }
.bg-gy-drd { background-color: var(--color-grey) !important; }
.bg-gy-dgd { background-color: var(--color-grey) !important; }

html.dark-mode .bg-gy-gy,  body.dark-mode .bg-gy-gy  { background-color: var(--color-grey)       !important; }
html.dark-mode .bg-gy-cm,  body.dark-mode .bg-gy-cm  { background-color: var(--color-cream)      !important; }
html.dark-mode .bg-gy-gn,  body.dark-mode .bg-gy-gn  { background-color: var(--color-green)      !important; }
html.dark-mode .bg-gy-rd,  body.dark-mode .bg-gy-rd  { background-color: var(--color-red)        !important; }
html.dark-mode .bg-gy-gd,  body.dark-mode .bg-gy-gd  { background-color: var(--color-gold)       !important; }
html.dark-mode .bg-gy-dgn, body.dark-mode .bg-gy-dgn { background-color: var(--color-green-dark) !important; }
html.dark-mode .bg-gy-drd, body.dark-mode .bg-gy-drd { background-color: var(--color-red-dark)   !important; }
html.dark-mode .bg-gy-dgd, body.dark-mode .bg-gy-dgd { background-color: var(--color-gold-dark)  !important; }

/* ── PAIRED BG: green light ──────────────────────────────── */
.bg-gn-gn  { background-color: var(--color-green) !important; }
.bg-gn-cm  { background-color: var(--color-green) !important; }
.bg-gn-gy  { background-color: var(--color-green) !important; }
.bg-gn-rd  { background-color: var(--color-green) !important; }
.bg-gn-gd  { background-color: var(--color-green) !important; }
.bg-gn-dgn { background-color: var(--color-green) !important; }
.bg-gn-drd { background-color: var(--color-green) !important; }
.bg-gn-dgd { background-color: var(--color-green) !important; }

html.dark-mode .bg-gn-gn,  body.dark-mode .bg-gn-gn  { background-color: var(--color-green)      !important; }
html.dark-mode .bg-gn-cm,  body.dark-mode .bg-gn-cm  { background-color: var(--color-cream)      !important; }
html.dark-mode .bg-gn-gy,  body.dark-mode .bg-gn-gy  { background-color: var(--color-grey)       !important; }
html.dark-mode .bg-gn-rd,  body.dark-mode .bg-gn-rd  { background-color: var(--color-red)        !important; }
html.dark-mode .bg-gn-gd,  body.dark-mode .bg-gn-gd  { background-color: var(--color-gold)       !important; }
html.dark-mode .bg-gn-dgn, body.dark-mode .bg-gn-dgn { background-color: var(--color-green-dark) !important; }
html.dark-mode .bg-gn-drd, body.dark-mode .bg-gn-drd { background-color: var(--color-red-dark)   !important; }
html.dark-mode .bg-gn-dgd, body.dark-mode .bg-gn-dgd { background-color: var(--color-gold-dark)  !important; }

/* ── PAIRED BG: red light ────────────────────────────────── */
.bg-rd-rd  { background-color: var(--color-red) !important; }
.bg-rd-cm  { background-color: var(--color-red) !important; }
.bg-rd-gy  { background-color: var(--color-red) !important; }
.bg-rd-gn  { background-color: var(--color-red) !important; }
.bg-rd-gd  { background-color: var(--color-red) !important; }
.bg-rd-dgn { background-color: var(--color-red) !important; }
.bg-rd-drd { background-color: var(--color-red) !important; }
.bg-rd-dgd { background-color: var(--color-red) !important; }

html.dark-mode .bg-rd-rd,  body.dark-mode .bg-rd-rd  { background-color: var(--color-red)        !important; }
html.dark-mode .bg-rd-cm,  body.dark-mode .bg-rd-cm  { background-color: var(--color-cream)      !important; }
html.dark-mode .bg-rd-gy,  body.dark-mode .bg-rd-gy  { background-color: var(--color-grey)       !important; }
html.dark-mode .bg-rd-gn,  body.dark-mode .bg-rd-gn  { background-color: var(--color-green)      !important; }
html.dark-mode .bg-rd-gd,  body.dark-mode .bg-rd-gd  { background-color: var(--color-gold)       !important; }
html.dark-mode .bg-rd-dgn, body.dark-mode .bg-rd-dgn { background-color: var(--color-green-dark) !important; }
html.dark-mode .bg-rd-drd, body.dark-mode .bg-rd-drd { background-color: var(--color-red-dark)   !important; }
html.dark-mode .bg-rd-dgd, body.dark-mode .bg-rd-dgd { background-color: var(--color-gold-dark)  !important; }

/* ── PAIRED BG: gold light ───────────────────────────────── */
.bg-gd-gd  { background-color: var(--color-gold) !important; }
.bg-gd-cm  { background-color: var(--color-gold) !important; }
.bg-gd-gy  { background-color: var(--color-gold) !important; }
.bg-gd-gn  { background-color: var(--color-gold) !important; }
.bg-gd-rd  { background-color: var(--color-gold) !important; }
.bg-gd-dgn { background-color: var(--color-gold) !important; }
.bg-gd-drd { background-color: var(--color-gold) !important; }
.bg-gd-dgd { background-color: var(--color-gold) !important; }

html.dark-mode .bg-gd-gd,  body.dark-mode .bg-gd-gd  { background-color: var(--color-gold)       !important; }
html.dark-mode .bg-gd-cm,  body.dark-mode .bg-gd-cm  { background-color: var(--color-cream)      !important; }
html.dark-mode .bg-gd-gy,  body.dark-mode .bg-gd-gy  { background-color: var(--color-grey)       !important; }
html.dark-mode .bg-gd-gn,  body.dark-mode .bg-gd-gn  { background-color: var(--color-green)      !important; }
html.dark-mode .bg-gd-rd,  body.dark-mode .bg-gd-rd  { background-color: var(--color-red)        !important; }
html.dark-mode .bg-gd-dgn, body.dark-mode .bg-gd-dgn { background-color: var(--color-green-dark) !important; }
html.dark-mode .bg-gd-drd, body.dark-mode .bg-gd-drd { background-color: var(--color-red-dark)   !important; }
html.dark-mode .bg-gd-dgd, body.dark-mode .bg-gd-dgd { background-color: var(--color-gold-dark)  !important; }

/* ============================================================
   11. GALLERY WIDGET — DARK MODE
   ============================================================ */

html.dark-mode .elementor-widget-gallery,
body.dark-mode .elementor-widget-gallery {
  --galleries-title-color-normal: var(--color-cream);
  --galleries-title-color-hover: var(--accent-gold);
  --galleries-title-color-active: var(--accent-gold);
}

html.dark-mode .elementor-widget-gallery .elementor-gallery-title,
body.dark-mode .elementor-widget-gallery .elementor-gallery-title {
  color: var(--color-cream) !important;
}

html.dark-mode .elementor-widget-gallery .elementor-gallery-title:hover,
body.dark-mode .elementor-widget-gallery .elementor-gallery-title:hover {
  color: var(--accent-gold) !important;
}

html.dark-mode .elementor-widget-gallery .e-gallery-item__overlay,
body.dark-mode .elementor-widget-gallery .e-gallery-item__overlay {
  background-color: rgba(42, 37, 39, 0.6);
}

/* ============================================================
   12. BUTTON STYLE CLASSES
   Apply to button widgets via Advanced > CSS Classes.
   Remove background, text, and border colors from Style tab.

   Solid:       btn-gn, btn-rd, btn-gd, btn-gy, btn-cm
   Transparent: btn-tr

   Hover map:
     gn -> gd    gd -> gn    rd -> gd
     gy -> gd    cm -> gd    tr -> darken

   In dark mode, colors shift to dark variants.
   Text color and border color always match.
   ============================================================ */

/* -- Shared button base ------------------------------------- */

.btn-gn .elementor-button,
.btn-rd .elementor-button,
.btn-gd .elementor-button,
.btn-gy .elementor-button,
.btn-cm .elementor-button,
.btn-tr .elementor-button {
  transition:
    background-color var(--motion-slow) var(--ease-standard),
    color var(--motion-slow) var(--ease-standard),
    border-color var(--motion-slow) var(--ease-standard) !important;
}

/* -- btn-gn: green bg, cream text/border -------------------- */

.btn-gn .elementor-button {
  background-color: var(--color-green) !important;
  color: var(--color-cream) !important;
  border: 2px solid var(--color-cream) !important;
}
.btn-gn .elementor-button:hover {
  background-color: var(--color-gold) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-gn .elementor-button,
body.dark-mode .btn-gn .elementor-button {
  background-color: var(--color-green-dark) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-gn .elementor-button:hover,
body.dark-mode .btn-gn .elementor-button:hover {
  background-color: var(--color-gold-dark) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}

/* -- btn-rd: red bg, cream text/border ---------------------- */

.btn-rd .elementor-button {
  background-color: var(--color-red) !important;
  color: var(--color-cream) !important;
  border: 2px solid var(--color-cream) !important;
}
.btn-rd .elementor-button:hover {
  background-color: var(--color-gold) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-rd .elementor-button,
body.dark-mode .btn-rd .elementor-button {
  background-color: var(--color-red-dark) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-rd .elementor-button:hover,
body.dark-mode .btn-rd .elementor-button:hover {
  background-color: var(--color-gold-dark) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}

.btn-gd .elementor-button {
  background-color: var(--color-gold) !important;
  color: var(--color-cream) !important;
  border: 2px solid var(--color-cream) !important;
}
.btn-gd .elementor-button:hover {
  background-color: var(--color-green) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-gd .elementor-button,
body.dark-mode .btn-gd .elementor-button {
  background-color: var(--color-gold-dark) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-gd .elementor-button:hover,
body.dark-mode .btn-gd .elementor-button:hover {
  background-color: var(--color-green-dark) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}

/* -- btn-gy: grey bg, cream text/border --------------------- */

.btn-gy .elementor-button {
  background-color: var(--color-grey) !important;
  color: var(--color-cream) !important;
  border: 2px solid var(--color-cream) !important;
}
.btn-gy .elementor-button:hover {
  background-color: var(--color-gold) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-gy .elementor-button,
body.dark-mode .btn-gy .elementor-button {
  background-color: var(--color-grey) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-gy .elementor-button:hover,
body.dark-mode .btn-gy .elementor-button:hover {
  background-color: var(--color-gold-dark) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}

/* -- btn-cm: cream bg, grey text/border --------------------- */

.btn-cm .elementor-button {
  background-color: var(--color-cream) !important;
  color: var(--color-grey) !important;
  border: 2px solid var(--color-grey) !important;
}
.btn-cm .elementor-button:hover {
  background-color: var(--color-gold) !important;
  color: var(--color-grey) !important;
  border-color: var(--color-grey) !important;
}
html.dark-mode .btn-cm .elementor-button,
body.dark-mode .btn-cm .elementor-button {
  background-color: var(--color-grey) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-cm .elementor-button:hover,
body.dark-mode .btn-cm .elementor-button:hover {
  background-color: var(--color-gold-dark) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}

/* -- btn-tr: transparent bg, cream text/border -------------- */

.btn-tr .elementor-button {
  background-color: transparent !important;
  color: var(--color-cream) !important;
  border: 2px solid var(--color-cream) !important;
}
.btn-tr .elementor-button:hover {
  background-color: rgba(0, 0, 0, 0.25) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-tr .elementor-button,
body.dark-mode .btn-tr .elementor-button {
  background-color: transparent !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}
html.dark-mode .btn-tr .elementor-button:hover,
body.dark-mode .btn-tr .elementor-button:hover {
  background-color: rgba(0, 0, 0, 0.35) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}

/* ============================================================
   13. BUTTON SHIMMER (buttons-style-1)
   ============================================================ */

.buttons-style-1 .elementor-button .elementor-button-content-wrapper,
.buttons-style-1 .elementor-button .elementor-button-text,
.buttons-style-1 .elementor-button .elementor-button-icon {
  position: relative;
  z-index: 2;
}

.buttons-style-1 .elementor-button {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.buttons-style-1 .elementor-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  transform: skewX(-20deg);
}

@media (hover: hover) and (pointer: fine) {
  .buttons-style-1 .elementor-button:hover::before {
    animation: button-shimmer 0.8s ease;
  }
}

@media (hover: none), (pointer: coarse) {
  .buttons-style-1 .elementor-button::before,
  .buttons-style-1 .elementor-button:hover::before,
  .buttons-style-1 .elementor-button:focus::before,
  .buttons-style-1 .elementor-button:active::before {
    animation: button-shimmer-mobile 3.5s ease-in-out infinite;
  }
}

@keyframes button-shimmer {
  0% { left: -80%; }
  100% { left: 130%; }
}

@keyframes button-shimmer-mobile {
  0% { left: -80%; }
  28% { left: 130%; }
  100% { left: 130%; }
}

.buttons-style-1 .elementor-button:focus,
.buttons-style-1 .elementor-button:active,
.buttons-style-1 .elementor-button .elementor-button-content-wrapper:focus,
.buttons-style-1 .elementor-button .elementor-button-content-wrapper:active {
  outline: none;
}

.buttons-style-1 .elementor-button:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 4px;
}

/* ============================================================
   14. MICRO ANIMATIONS
   ============================================================ */

a {
  transition: color var(--motion-fast) var(--ease-standard);
}

:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   15. SCROLL REVEAL
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--motion-reveal) var(--ease-out),
    transform var(--motion-reveal) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--motion-reveal) var(--ease-out),
    transform var(--motion-reveal) var(--ease-out);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 80ms;  opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }


/* ============================================================
   16. HEADER, LOGOS, ICONS, DARK MODE TOGGLE, AND OFF-CANVAS

   STRUCTURE (from Elementor):
     .headerbg             - Main header container
     .logoStack            - Logo container
       .tlpLight           - Light mode logo
       .tlpDark            - Dark mode logo
     .darkToggle           - Toggle click target
       .lightModeIcon      - Sunset icon (light mode)
       .darkModeIcon       - Sunrise icon (dark mode)
     .fb-icon              - Facebook icon widget
     .ig-icon              - Instagram icon widget
     .tlpOffCanvasInner    - Off-canvas inner container
     .tlpOffCanvasHeading  - Section headings (Where/When)
     .main-menu            - WordPress menu widget
     .tlpOffCanvasText     - Phone, address, and hours text
     .tlpOffCanvasClose    - Close button (icon list widget)

   !important USAGE POLICY:
     Only used where Elementor's own CSS must be overridden
     and specificity alone is not sufficient. Each use is
     explained in a comment at that rule.

   ARCHITECTURE NOTE:
     The header uses JS-driven top positioning for scroll-hide.
     Do NOT add transform to .elementor-location-header.
     Transform creates a stacking context that traps the
     off-canvas panel behind the header.
   ============================================================ */

/* -- Sticky header ------------------------------------------ */

.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/*
 * NOTE: All transitions on .elementor-location-header are
 * managed by JS (tlp-theme-toggle.js section 3) which sets
 * different speeds for hide (500ms) and show (250ms).
 * Do NOT add a CSS transition to this element — it will
 * conflict with the JS-set inline transition values.
 */

/* -- Header background -------------------------------------- */

.headerbg,
.e-con.headerbg {
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border);
  transition:
    background-color var(--motion-slow) var(--ease-in-out),
    border-color var(--motion-slow) var(--ease-in-out);
}

/* -- Site-wide smooth mode transition ----------------------- */

body,
.elementor-location-footer,
.elementor-page,
.site,
.site-main,
.headerbg,
.tlpOffCanvasInner,
.section-cm,
.section-gn,
.section-rd,
.section-gd,
.section-gy {
  transition:
    background-color var(--motion-slow) var(--ease-in-out),
    color var(--motion-slow) var(--ease-in-out);
}

/* -- Logo visibility ---------------------------------------- */

.logoStack {
  position: relative;
}

.tlpLight,
.tlpDark {
  transition: opacity var(--motion-slow) var(--ease-in-out);
}

.tlpLight { opacity: 1; }
.tlpDark  { opacity: 0; }

html.dark-mode .tlpLight, body.dark-mode .tlpLight { opacity: 0; }
html.dark-mode .tlpDark,  body.dark-mode .tlpDark  { opacity: 1; }

/* -- Toggle icons ------------------------------------------- */
/* Cross-fade by opacity only. The fixed-slot positioning that  */
/* prevents the social icons from shifting is set in ELEMENTOR  */
/* (one icon absolute, one default) — NOT here. Do not add      */
/* position rules here or they will fight the Elementor setup.  */

.darkToggle {
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.lightModeIcon,
.darkModeIcon {
  transition: opacity var(--motion-slow) var(--ease-in-out);
}

.lightModeIcon { opacity: 1; }
.darkModeIcon  { opacity: 0; }

html.dark-mode .lightModeIcon, body.dark-mode .lightModeIcon { opacity: 0; }
html.dark-mode .darkModeIcon,  body.dark-mode .darkModeIcon  { opacity: 1; }

/* Resting color for toggle icons */
.lightModeIcon .elementor-icon,
.darkModeIcon .elementor-icon,
.lightModeIcon svg,
.darkModeIcon svg {
  color: var(--accent-green) !important;
  fill: var(--accent-green) !important;
  transition: color var(--motion-slow) var(--ease-in-out),
              fill var(--motion-slow) var(--ease-in-out);
}

/* Hover: grey in light mode, gold in dark mode */
.darkToggle:hover .lightModeIcon,
.darkToggle:hover .darkModeIcon,
.darkToggle:hover .lightModeIcon .elementor-icon,
.darkToggle:hover .darkModeIcon .elementor-icon,
.darkToggle:hover .lightModeIcon svg,
.darkToggle:hover .darkModeIcon svg {
  color: var(--color-grey) !important;
  fill: var(--color-grey) !important;
}

html.dark-mode .darkToggle:hover .lightModeIcon,
html.dark-mode .darkToggle:hover .darkModeIcon,
html.dark-mode .darkToggle:hover .lightModeIcon .elementor-icon,
html.dark-mode .darkToggle:hover .darkModeIcon .elementor-icon,
html.dark-mode .darkToggle:hover .lightModeIcon svg,
html.dark-mode .darkToggle:hover .darkModeIcon svg,
body.dark-mode .darkToggle:hover .lightModeIcon,
body.dark-mode .darkToggle:hover .darkModeIcon,
body.dark-mode .darkToggle:hover .lightModeIcon .elementor-icon,
body.dark-mode .darkToggle:hover .darkModeIcon .elementor-icon,
body.dark-mode .darkToggle:hover .lightModeIcon svg,
body.dark-mode .darkToggle:hover .darkModeIcon svg {
  color: var(--accent-gold) !important;
  fill: var(--accent-gold) !important;
}

/* -- Social icons ------------------------------------------- */

.fb-icon .elementor-icon,
.fb-icon .elementor-icon i,
.fb-icon .elementor-icon svg,
.ig-icon .elementor-icon,
.ig-icon .elementor-icon i,
.ig-icon .elementor-icon svg {
  color: var(--accent-green) !important;
  fill: var(--accent-green) !important;
  transition:
    color var(--motion-slow) var(--ease-in-out),
    fill var(--motion-slow) var(--ease-in-out);
}

.fb-icon:hover .elementor-icon,
.fb-icon:hover .elementor-icon i,
.fb-icon:hover .elementor-icon svg,
.ig-icon:hover .elementor-icon,
.ig-icon:hover .elementor-icon i,
.ig-icon:hover .elementor-icon svg {
  color: var(--accent-gold) !important;
  fill: var(--accent-gold) !important;
}

.fb-icon, .ig-icon {
  color: var(--accent-green);
  transition: color var(--motion-slow) var(--ease-in-out);
}

.fb-icon:hover, .ig-icon:hover {
  color: var(--accent-gold);
}

/* -- Off-canvas panel background ---------------------------- */

.e-off-canvas {
  background-color: transparent !important;
}

.tlpOffCanvasInner,
.e-off-canvas__content {
  background-color: var(--bg-page);
  transition: background-color var(--motion-slow) var(--ease-in-out);
}

html.dark-mode .tlpOffCanvasInner,
html.dark-mode .e-off-canvas__content,
body.dark-mode .tlpOffCanvasInner,
body.dark-mode .e-off-canvas__content {
  background-color: var(--color-grey);
}

/* -- Off-canvas section headings ---------------------------- */

.tlpOffCanvasHeading,
.tlpOffCanvasHeading .elementor-heading-title {
  color: var(--accent-green) !important;
  transition: color var(--motion-slow) var(--ease-in-out);
}

/* -- WordPress menu links ----------------------------------- */

.main-menu,
.main-menu a,
.main-menu .menu-item a {
  color: var(--color-grey);
  transition: color var(--motion-slow) var(--ease-in-out);
}

html.dark-mode .main-menu,
html.dark-mode .main-menu a,
html.dark-mode .main-menu .menu-item a,
body.dark-mode .main-menu,
body.dark-mode .main-menu a,
body.dark-mode .main-menu .menu-item a {
  color: var(--color-cream);
}

.main-menu a:hover,
.main-menu .menu-item a:hover {
  color: var(--accent-gold);
}

/* -- Off-canvas body text ----------------------------------- */

.tlpOffCanvasText,
.tlpOffCanvasText p,
.tlpOffCanvasText a {
  color: var(--color-grey);
  transition: color var(--motion-slow) var(--ease-in-out);
}

html.dark-mode .tlpOffCanvasText,
html.dark-mode .tlpOffCanvasText p,
html.dark-mode .tlpOffCanvasText a,
html.dark-mode .tlpOffCanvasText .elementor-widget-container,
html.dark-mode .tlpOffCanvasText .elementor-widget-text-editor,
html.dark-mode .tlpOffCanvasText .elementor-widget-text-editor p,
body.dark-mode .tlpOffCanvasText,
body.dark-mode .tlpOffCanvasText p,
body.dark-mode .tlpOffCanvasText a,
body.dark-mode .tlpOffCanvasText .elementor-widget-container,
body.dark-mode .tlpOffCanvasText .elementor-widget-text-editor,
body.dark-mode .tlpOffCanvasText .elementor-widget-text-editor p {
  color: var(--color-cream);
}

.tlpOffCanvasText a:hover {
  color: var(--accent-gold);
}

/* -- Off-canvas close button -------------------------------- */

.tlpOffCanvasClose .elementor-icon-list-item:hover .elementor-icon-list-icon,
.tlpOffCanvasClose .elementor-icon-list-item:hover .elementor-icon-list-icon i,
.tlpOffCanvasClose .elementor-icon-list-item:hover .elementor-icon-list-icon svg {
  color: var(--accent-red) !important;
  fill: var(--accent-red) !important;
}

/* -- Off-canvas panel z-index ------------------------------- */

.e-off-canvas {
  z-index: 10000 !important;
}

/* -- Testimonial carousel bubble — dark mode ---------------- */

html.dark-mode .elementor-widget-testimonial-carousel .elementor-testimonial__content,
html.dark-mode .elementor-widget-testimonial-carousel .elementor-testimonial__content:after,
body.dark-mode .elementor-widget-testimonial-carousel .elementor-testimonial__content,
body.dark-mode .elementor-widget-testimonial-carousel .elementor-testimonial__content:after {
  background-color: var(--bg-card) !important;
}

html.dark-mode .elementor-widget-testimonial-carousel .elementor-testimonial__text,
body.dark-mode .elementor-widget-testimonial-carousel .elementor-testimonial__text {
  color: var(--color-cream) !important;
}

html.dark-mode .elementor-widget-testimonial-carousel .elementor-testimonial__name,
body.dark-mode .elementor-widget-testimonial-carousel .elementor-testimonial__name {
  color: var(--color-cream) !important;
}

html.dark-mode .elementor-widget-testimonial-carousel .elementor-testimonial__title,
body.dark-mode .elementor-widget-testimonial-carousel .elementor-testimonial__title {
  color: var(--text-secondary) !important;
}

/* ============================================================
   17. CONTACT FORM
   Targets Elementor Form widget on the Contact page.

   Light mode:  green labels, cream fields, grey input text
   Dark mode:   cream labels, grey fields, cream input text
   Button:      green bg, cream text — hover shifts to gold
   ============================================================ */

/* -- Field labels ------------------------------------------- */

.elementor-widget-form .elementor-field-label,
.elementor-widget-form .elementor-field-subgroup label {
  color: var(--color-green) !important;
  transition: color var(--motion-slow) var(--ease-in-out);
}

html.dark-mode .elementor-widget-form .elementor-field-label,
html.dark-mode .elementor-widget-form .elementor-field-subgroup label,
body.dark-mode .elementor-widget-form .elementor-field-label,
body.dark-mode .elementor-widget-form .elementor-field-subgroup label {
  color: var(--color-cream) !important;
}

/* -- Text inputs and textarea ------------------------------- */

.elementor-widget-form .elementor-field-textual {
  background-color: var(--color-cream) !important;
  color: var(--color-grey) !important;
  border: 1px solid var(--border-medium) !important;
  border-radius: 4px !important;
  transition:
    background-color var(--motion-slow) var(--ease-in-out),
    color var(--motion-slow) var(--ease-in-out),
    border-color var(--motion-slow) var(--ease-in-out) !important;
}

.elementor-widget-form .elementor-field-textual:focus {
  border-color: var(--color-green) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(46, 125, 96, 0.18) !important;
}

html.dark-mode .elementor-widget-form .elementor-field-textual,
body.dark-mode .elementor-widget-form .elementor-field-textual {
  background-color: var(--color-grey) !important;
  color: var(--color-cream) !important;
  border-color: var(--border-medium) !important;
}

html.dark-mode .elementor-widget-form .elementor-field-textual:focus,
body.dark-mode .elementor-widget-form .elementor-field-textual:focus {
  border-color: var(--color-green) !important;
  box-shadow: 0 0 0 2px rgba(46, 125, 96, 0.28) !important;
}

/* -- Placeholder text --------------------------------------- */

.elementor-widget-form .elementor-field-textual::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

html.dark-mode .elementor-widget-form .elementor-field-textual::placeholder,
body.dark-mode .elementor-widget-form .elementor-field-textual::placeholder {
  color: var(--text-muted) !important;
}

/* -- Checkboxes and acceptance field ------------------------ */

.elementor-widget-form .elementor-field-type-checkbox .elementor-field-label,
.elementor-widget-form .elementor-field-type-acceptance .elementor-field-label {
  color: var(--color-green) !important;
}

html.dark-mode .elementor-widget-form .elementor-field-type-checkbox .elementor-field-label,
html.dark-mode .elementor-widget-form .elementor-field-type-acceptance .elementor-field-label,
body.dark-mode .elementor-widget-form .elementor-field-type-checkbox .elementor-field-label,
body.dark-mode .elementor-widget-form .elementor-field-type-acceptance .elementor-field-label {
  color: var(--color-cream) !important;
}

/* -- Submit button ------------------------------------------ */

.elementor-widget-form .elementor-button[type="submit"] {
  background-color: var(--color-green) !important;
  color: var(--color-cream) !important;
  border: 2px solid var(--color-cream) !important;
  transition:
    background-color var(--motion-slow) var(--ease-standard),
    color var(--motion-slow) var(--ease-standard),
    border-color var(--motion-slow) var(--ease-standard) !important;
}

.elementor-widget-form .elementor-button[type="submit"]:hover {
  background-color: var(--color-gold) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}

html.dark-mode .elementor-widget-form .elementor-button[type="submit"],
body.dark-mode .elementor-widget-form .elementor-button[type="submit"] {
  background-color: var(--color-green-dark) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}

html.dark-mode .elementor-widget-form .elementor-button[type="submit"]:hover,
body.dark-mode .elementor-widget-form .elementor-button[type="submit"]:hover {
  background-color: var(--color-gold-dark) !important;
  color: var(--color-cream) !important;
  border-color: var(--color-cream) !important;
}

/* ============================================================
   18. ACCESSIBILITY — REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* -- END OF DESIGN SYSTEM ----------------------------------- */