/*!
 * Living Websites Framework
 * Version: 2.1.0
 * https://livingwebsites.co.uk
 */

/* =========================================================
   1. GLOBAL VARIABLES
   ========================================================= */

:root {
  /* Brand colours */

  --lw-primary: #1e9e73;
  --lw-secondary: #0f0d39;
  --lw-accent: #ffd54f;

  /* Automatic contrast colours */

  --lw-primary-contrast: #ffffff;
  --lw-secondary-contrast: #ffffff;
  --lw-accent-contrast: #1f2937;

  /* Status colours */

  --lw-success: #28a745;
  --lw-warning: #f39c12;
  --lw-danger: #dc3545;

  /* Background colours */

  --lw-bg-light: #ffffff;
  --lw-bg-dark: var(--lw-secondary);

  --lw-bg-light-contrast: #1f2937;
  --lw-bg-dark-contrast: #ffffff;

  /* Text colours */

  --lw-text-primary: #1f2937;
  --lw-text-secondary: #6b7280;

  /* Feature palette */

  --lw-feature1: var(--lw-primary);
  --lw-feature2: var(--lw-secondary);
  --lw-feature3: var(--lw-accent);

  --lw-feature1-contrast: #ffffff;
  --lw-feature2-contrast: #ffffff;
  --lw-feature3-contrast: #1f2937;

  /* Hero */

  --lw-hero-heading: #ffffff;
  --lw-hero-text: rgba(255, 255, 255, 0.9);

  /* Typography */

  --lw-font-primary: var(--e-global-typography-primary-font-family), Georgia, serif;

  --lw-font-secondary: var(--e-global-typography-secondary-font-family), Georgia, serif;

  --lw-font-text: var(--e-global-typography-text-font-family), Arial, Helvetica, sans-serif;

  --lw-font-accent: var(--e-global-typography-accent-font-family), Arial, Helvetica, sans-serif;

  --lw-font-heading: var(--lw-font-primary);
  --lw-font-body: var(--lw-font-text);

  --lw-font-weight-heading: var(--e-global-typography-primary-font-weight, 700);

  --lw-font-weight-body: var(--e-global-typography-text-font-weight, 400);

  /* Shape */

  --lw-radius: 12px;
  --lw-radius-small: 8px;
  --lw-radius-large: 18px;
  --lw-radius-round: 999px;

  /* Spacing */

  --lw-space-xs: 0.375rem;
  --lw-space-sm: 0.75rem;
  --lw-space-md: 1rem;
  --lw-space-lg: 1.5rem;
  --lw-space-xl: 2rem;

  /* Transitions */

  --lw-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;

  /* Elementor global colour bridge */

  --e-global-color-primary: var(--lw-primary);
  --e-global-color-secondary: var(--lw-secondary);
  --e-global-color-text: var(--lw-text-primary);
  --e-global-color-accent: var(--lw-accent);

  --e-global-color-01de027: var(--lw-bg-light);
  --e-global-color-4b4ceb6: var(--lw-bg-dark);

  --e-global-color-f9b42d4: var(--lw-feature1);
  --e-global-color-0cf5073: var(--lw-feature2);
  --e-global-color-0eec9df: var(--lw-feature3);

  --e-global-color-9ce3a33: var(--lw-text-primary);
  --e-global-color-e660bfd: var(--lw-text-secondary);
}

/* =========================================================
     2. ELEMENTOR COLOUR BRIDGE
     ========================================================= */

body,
body[class*="elementor-kit-"] {
  --e-global-color-primary: var(--lw-primary) !important;
  --e-global-color-secondary: var(--lw-secondary) !important;
  --e-global-color-text: var(--lw-text-primary) !important;
  --e-global-color-accent: var(--lw-accent) !important;
}

/* =========================================================
     3. BASE TYPOGRAPHY
     ========================================================= */

body {
  font-family: var(--lw-font-body);
  font-weight: var(--lw-font-weight-body);
  color: var(--lw-text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title {
  font-family: var(--lw-font-heading);
  font-weight: var(--lw-font-weight-heading);
  color: var(--lw-secondary);
}

p,
li,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
  font-family: var(--lw-font-body);
}

button,
input,
select,
textarea,
.elementor-button {
  font-family: var(--lw-font-accent);
}

/* =========================================================
     4. TYPOGRAPHY UTILITIES
     ========================================================= */

.lw-font-heading,
.lw-font-heading .elementor-heading-title {
  font-family: var(--lw-font-heading) !important;
}

.lw-font-body,
.lw-font-body p,
.lw-font-body li,
.lw-font-body .elementor-widget-container {
  font-family: var(--lw-font-body) !important;
}

.lw-font-accent,
.lw-font-accent .elementor-button {
  font-family: var(--lw-font-accent) !important;
}

/* =========================================================
     5. IMAGE UTILITIES
     ========================================================= */

.lw-main-picture {
  background-image: var(--lw-main-picture);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  min-height: clamp(300px, 45vw, 600px);
}

/* =========================================================
     6. TEXT COLOUR UTILITIES
     ========================================================= */

.lw-primary,
.lw-primary .elementor-heading-title,
.lw-primary .elementor-icon-box-title,
.lw-primary .elementor-icon-box-title a,
.lw-primary .elementor-icon-box-description,
.lw-primary .elementor-post-info__item,
.lw-primary .elementor-icon-list-text {
  color: var(--lw-primary) !important;
}

.lw-secondary,
.lw-secondary .elementor-heading-title,
.lw-secondary .elementor-icon-box-title,
.lw-secondary .elementor-icon-box-title a,
.lw-secondary .elementor-icon-box-description,
.lw-secondary .elementor-post-info__item,
.lw-secondary .elementor-icon-list-text {
  color: var(--lw-secondary) !important;
}

.lw-accent,
.lw-accent .elementor-heading-title,
.lw-accent .elementor-icon-box-title,
.lw-accent .elementor-icon-box-title a,
.lw-accent .elementor-icon-box-description {
  color: var(--lw-accent) !important;
}

.lw-text-primary,
.lw-text-primary .elementor-heading-title,
.lw-text-primary .elementor-widget-container,
.lw-text-primary p,
.lw-text-primary li {
  color: var(--lw-text-primary) !important;
}

.lw-text-secondary,
.lw-text-secondary .elementor-heading-title,
.lw-text-secondary .elementor-widget-container,
.lw-text-secondary p,
.lw-text-secondary li {
  color: var(--lw-text-secondary) !important;
}

.lw-text-light,
.lw-text-light .elementor-heading-title,
.lw-text-light .elementor-widget-container,
.lw-text-light p,
.lw-text-light li,
.lw-text-light a {
  color: var(--lw-bg-light) !important;
}

/* =========================================================
     7. BACKGROUND UTILITIES
     ========================================================= */

.lw-bg-primary {
  background-color: var(--lw-primary) !important;
}

.lw-bg-secondary {
  background-color: var(--lw-secondary) !important;
}

.lw-bg-accent {
  background-color: var(--lw-accent) !important;
}

.lw-bg-light {
  background-color: var(--lw-bg-light) !important;
}

.lw-bg-dark {
  background-color: var(--lw-bg-dark) !important;
}

/* =========================================================
     8. SECTION COLOUR + BACKGROUND SYSTEM
  
     Section Colour:
     Chooses the lead/emphasis colour used for headings,
     filters, links, cards and highlights.
  
     Section Background:
     Chooses the actual section surface.
  
     Light backgrounds retain the chosen Section Colour for
     emphasis.
  
     Coloured backgrounds use their automatic contrast colour
     for text directly on the section.
  
     Cards remain neutral and continue to use the chosen
     Section Colour for emphasis.
     ========================================================= */
/* ---------------------------------------------------------
     BASE SECTION
     --------------------------------------------------------- */

.lw-section {
  /*
         * Default section colour.
         */

  --lw-section-colour: var(--lw-primary);
  --lw-section-colour-contrast: var(--lw-primary-contrast);

  /*
         * Default section background.
         */

  --lw-section-bg: var(--lw-bg-light);
  --lw-section-bg-contrast: var(--lw-bg-light-contrast);

  /*
         * Normal light-background treatment.
         */

  --lw-section-heading: var(--lw-section-colour);
  --lw-section-text: var(--lw-text-primary);

  /*
         * Neutral card treatment.
         */

  --lw-card-bg: var(--lw-bg-light);
  --lw-card-heading: var(--lw-section-colour);
  --lw-card-text: var(--lw-text-primary);
  --lw-card-secondary: var(--lw-text-secondary);

  /*
         * Filters.
         */

  --lw-section-filter-text: var(--lw-text-primary);

  --lw-section-filter-bg: color-mix(in srgb, var(--lw-section-colour) 8%, var(--lw-bg-light));

  --lw-section-filter-active-bg: var(--lw-section-colour);
  --lw-section-filter-active-text: var(--lw-section-colour-contrast);

  background-color: var(--lw-section-bg);
  color: var(--lw-section-text);
}

/* =========================================================
         SECTION COLOUR
         ========================================================= */

.lw-section-colour--primary {
  --lw-section-colour: var(--lw-primary);
  --lw-section-colour-contrast: var(--lw-primary-contrast);
}

.lw-section-colour--secondary {
  --lw-section-colour: var(--lw-secondary);
  --lw-section-colour-contrast: var(--lw-secondary-contrast);
}

.lw-section-colour--accent {
  --lw-section-colour: var(--lw-accent);
  --lw-section-colour-contrast: var(--lw-accent-contrast);
}

.lw-section-colour--feature1 {
  --lw-section-colour: var(--lw-feature1);
  --lw-section-colour-contrast: var(--lw-feature1-contrast);
}

.lw-section-colour--feature2 {
  --lw-section-colour: var(--lw-feature2);
  --lw-section-colour-contrast: var(--lw-feature2-contrast);
}

.lw-section-colour--feature3 {
  --lw-section-colour: var(--lw-feature3);
  --lw-section-colour-contrast: var(--lw-feature3-contrast);
}

/* =========================================================
         SECTION BACKGROUND — LIGHT
         ========================================================= */

.lw-section-bg--light {
  --lw-section-bg: var(--lw-bg-light);
  --lw-section-bg-contrast: var(--lw-bg-light-contrast);

  /*
         * On a light surface the selected Section Colour
         * remains the visible emphasis colour.
         */

  --lw-section-heading: var(--lw-section-colour);
  --lw-section-text: var(--lw-text-primary);

  --lw-section-filter-text: var(--lw-text-primary);

  --lw-section-filter-bg: color-mix(in srgb, var(--lw-section-colour) 8%, var(--lw-bg-light));

  --lw-section-filter-active-bg: var(--lw-section-colour);
  --lw-section-filter-active-text: var(--lw-section-colour-contrast);
}

/* =========================================================
         SECTION BACKGROUND — COLOURED SURFACES
      
         Text directly on a coloured background uses the
         automatically generated contrast colour.
      
         Neutral cards retain normal Theme text colours.
         ========================================================= */

.lw-section-bg--primary {
  --lw-section-bg: var(--lw-primary);
  --lw-section-bg-contrast: var(--lw-primary-contrast);

  --lw-section-heading: var(--lw-primary-contrast);
  --lw-section-text: var(--lw-primary-contrast);

  --lw-section-filter-text: var(--lw-primary-contrast);

  --lw-section-filter-bg: color-mix(in srgb, var(--lw-primary-contrast) 10%, transparent);

  --lw-section-filter-active-bg: var(--lw-primary-contrast);
  --lw-section-filter-active-text: var(--lw-primary);
}

.lw-section-bg--secondary {
  --lw-section-bg: var(--lw-secondary);
  --lw-section-bg-contrast: var(--lw-secondary-contrast);

  --lw-section-heading: var(--lw-secondary-contrast);
  --lw-section-text: var(--lw-secondary-contrast);

  --lw-section-filter-text: var(--lw-secondary-contrast);

  --lw-section-filter-bg: color-mix(in srgb, var(--lw-secondary-contrast) 10%, transparent);

  --lw-section-filter-active-bg: var(--lw-secondary-contrast);
  --lw-section-filter-active-text: var(--lw-secondary);
}

.lw-section-bg--dark {
  --lw-section-bg: var(--lw-bg-dark);
  --lw-section-bg-contrast: var(--lw-bg-dark-contrast);

  --lw-section-heading: var(--lw-bg-dark-contrast);
  --lw-section-text: var(--lw-bg-dark-contrast);

  --lw-section-filter-text: var(--lw-bg-dark-contrast);

  --lw-section-filter-bg: color-mix(in srgb, var(--lw-bg-dark-contrast) 10%, transparent);

  --lw-section-filter-active-bg: var(--lw-bg-dark-contrast);
  --lw-section-filter-active-text: var(--lw-bg-dark);
}

.lw-section-bg--accent {
  --lw-section-bg: var(--lw-accent);
  --lw-section-bg-contrast: var(--lw-accent-contrast);

  --lw-section-heading: var(--lw-accent-contrast);
  --lw-section-text: var(--lw-accent-contrast);

  --lw-section-filter-text: var(--lw-accent-contrast);

  --lw-section-filter-bg: color-mix(in srgb, var(--lw-accent-contrast) 10%, transparent);

  --lw-section-filter-active-bg: var(--lw-accent-contrast);
  --lw-section-filter-active-text: var(--lw-accent);
}

.lw-section-bg--feature1 {
  --lw-section-bg: var(--lw-feature1);
  --lw-section-bg-contrast: var(--lw-feature1-contrast);

  --lw-section-heading: var(--lw-feature1-contrast);
  --lw-section-text: var(--lw-feature1-contrast);

  --lw-section-filter-text: var(--lw-feature1-contrast);

  --lw-section-filter-bg: color-mix(in srgb, var(--lw-feature1-contrast) 10%, transparent);

  --lw-section-filter-active-bg: var(--lw-feature1-contrast);
  --lw-section-filter-active-text: var(--lw-feature1);
}

.lw-section-bg--feature2 {
  --lw-section-bg: var(--lw-feature2);
  --lw-section-bg-contrast: var(--lw-feature2-contrast);

  --lw-section-heading: var(--lw-feature2-contrast);
  --lw-section-text: var(--lw-feature2-contrast);

  --lw-section-filter-text: var(--lw-feature2-contrast);

  --lw-section-filter-bg: color-mix(in srgb, var(--lw-feature2-contrast) 10%, transparent);

  --lw-section-filter-active-bg: var(--lw-feature2-contrast);
  --lw-section-filter-active-text: var(--lw-feature2);
}

.lw-section-bg--feature3 {
  --lw-section-bg: var(--lw-feature3);
  --lw-section-bg-contrast: var(--lw-feature3-contrast);

  --lw-section-heading: var(--lw-feature3-contrast);
  --lw-section-text: var(--lw-feature3-contrast);

  --lw-section-filter-text: var(--lw-feature3-contrast);

  --lw-section-filter-bg: color-mix(in srgb, var(--lw-feature3-contrast) 10%, transparent);

  --lw-section-filter-active-bg: var(--lw-feature3-contrast);
  --lw-section-filter-active-text: var(--lw-feature3);
}

/* =========================================================
       COLOURED SECTION FILTER TREATMENT
       ========================================================= */

.lw-section:not(.lw-section-bg--light) .e-filter-item {
  color: var(--lw-section-bg-contrast) !important;
  background-color: transparent !important;
}

.lw-section:not(.lw-section-bg--light) .e-filter-item[aria-pressed="true"] {
  color: var(--lw-section-bg) !important;
  background-color: var(--lw-section-bg-contrast) !important;
}
/* =========================================================
     9. BUTTONS
     ========================================================= */

.lw-button-primary .elementor-button,
.elementor-button.lw-button-primary {
  font-family: var(--lw-font-accent);

  color: var(--lw-primary-contrast) !important;
  background-color: var(--lw-primary) !important;

  border-color: var(--lw-primary) !important;
  border-radius: var(--lw-radius-round) !important;

  transition: var(--lw-transition);
}

.lw-button-primary .elementor-button:hover,
.elementor-button.lw-button-primary:hover {
  color: var(--lw-primary-contrast) !important;

  background-color: color-mix(in srgb, var(--lw-primary) 88%, var(--lw-secondary)) !important;

  border-color: color-mix(in srgb, var(--lw-primary) 88%, var(--lw-secondary)) !important;
}

.lw-button-secondary .elementor-button,
.elementor-button.lw-button-secondary {
  font-family: var(--lw-font-accent);

  color: var(--lw-secondary-contrast) !important;
  background-color: var(--lw-secondary) !important;

  border-color: var(--lw-secondary) !important;
  border-radius: var(--lw-radius-round) !important;

  transition: var(--lw-transition);
}

.lw-button-outline .elementor-button,
.elementor-button.lw-button-outline {
  font-family: var(--lw-font-accent);

  color: var(--lw-primary) !important;
  background-color: transparent !important;

  border: 1px solid var(--lw-primary) !important;
  border-radius: var(--lw-radius-round) !important;

  transition: var(--lw-transition);
}

.lw-button-outline .elementor-button:hover,
.elementor-button.lw-button-outline:hover {
  color: var(--lw-primary-contrast) !important;
  background-color: var(--lw-primary) !important;
}

/* =========================================================
     10. ELEMENTOR ICON COLOUR HELPERS
     ========================================================= */

.lw-icon-primary .elementor-icon,
.lw-icon-primary .elementor-icon-box-icon {
  color: var(--lw-primary) !important;
}

.lw-icon-primary .elementor-icon svg,
.lw-icon-primary .elementor-icon-box-icon svg {
  fill: var(--lw-primary) !important;
}

.lw-icon-secondary .elementor-icon,
.lw-icon-secondary .elementor-icon-box-icon {
  color: var(--lw-secondary) !important;
}

.lw-icon-secondary .elementor-icon svg,
.lw-icon-secondary .elementor-icon-box-icon svg {
  fill: var(--lw-secondary) !important;
}

.lw-icon-accent .elementor-icon,
.lw-icon-accent .elementor-icon-box-icon {
  color: var(--lw-accent) !important;
}

.lw-icon-accent .elementor-icon svg,
.lw-icon-accent .elementor-icon-box-icon svg {
  fill: var(--lw-accent) !important;
}

/* =========================================================
     16. HEADER
     ========================================================= */

.lw-header {
  background-color: var(--lw-bg-light);
  color: var(--lw-text-primary);
}

/* Logo */

.lw-header-logo {
  flex: 0 0 auto;
}

/* Business identity */

.lw-header-identity {
  display: flex;
  flex-direction: column;
}

/* Business name */

.lw-header-name,
.lw-header-name .elementor-heading-title {
  color: var(--lw-primary) !important;
}

/* Strapline */

.lw-header-strapline,
.lw-header-strapline .elementor-widget-container,
.lw-header-strapline p {
  color: var(--lw-primary) !important;
}

/* Actions */

.lw-header-actions {
  display: flex;

  align-items: center;

  gap: var(--lw-space-lg);
}

.lw-header-action,
.lw-header-action a,
.lw-header-action .elementor-icon,
.lw-header-action .elementor-icon-list-text {
  color: var(--lw-primary) !important;
}

.lw-header-action svg {
  fill: var(--lw-primary) !important;
}

/* Header CTA */

.lw-header-cta {
  --lw-header-cta-colour: var(--lw-primary);
  --lw-header-cta-icon-size: 46px;
}

.lw-header-cta .elementor-icon {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: var(--lw-header-cta-icon-size);
  height: var(--lw-header-cta-icon-size);

  box-sizing: border-box;

  color: var(--lw-header-cta-colour);

  background-color: color-mix(in srgb, var(--lw-header-cta-colour) 4%, var(--lw-bg-light));

  border: 2px solid color-mix(in srgb, var(--lw-header-cta-colour) 45%, transparent);

  border-radius: 50%;
}

.lw-header-cta .elementor-icon svg {
  width: 18px;
  height: 18px;

  fill: currentColor;
}

.lw-header-cta .elementor-icon-box-title,
.lw-header-cta .elementor-icon-box-title a {
  color: var(--lw-header-cta-colour);
}

/* Price */

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