/* ==========================================================================
   KNIPNÄS GÅRD — Additional CSS
   Hello Elementor + Style Guide v1.3, April 2026
   Updated: 2026-04-26
   Reorganized structure pass: 2026-04-25
   ========================================================================== */

/* ==========================================================================
   00. GLOBAL FOUNDATION
   Design tokens, base elements, section utilities, media defaults,
   typography, spacing, containers, and text-widget rhythm.
   ========================================================================== */

/* ==========================================================================
   00a. DESIGN TOKENS
   ========================================================================== */

:root {
    /* Greens */
    --knip-deep-olive: #434825;
    --knip-olive:      #656839;
    --knip-mid-green:  #7E8A3E;
    --knip-forest:     #6B8C28;
    --knip-leaf:       #A8C74B;

    /* Warm neutrals */
    --knip-warm-white: #FDFBF7;
    --knip-parchment:  #F5F0E8;
    --knip-stone:      #E8E0D4;
    --knip-warm-gray:  #C4B9A8;
    --knip-clay:       #C4956A;
    --knip-terracotta: #B87A4A;
    --knip-blush:      #F5EDE4;

    /* Backgrounds */
    --knip-light-green: #F4F7EC;
    --knip-sage:        #E2ECCC;

    /* Semantic backgrounds */
    --knip-bg-primary:   var(--knip-light-green);
    --knip-bg-secondary: var(--knip-warm-white);
    --knip-bg-accent:    var(--knip-sage);

    /* Text */
    --knip-text:       #2C2B26;
    --knip-text-light: #6B6960;

    /* Headings */
    --knip-heading-1: var(--knip-olive);
    --knip-heading-2: var(--knip-deep-olive);

    /* Links */
    --knip-link:       var(--knip-forest);
    --knip-link-hover: var(--knip-deep-olive);

    /* Buttons */
    --knip-btn-bg:    var(--knip-leaf);
    --knip-btn-hover: var(--knip-forest);

    /* Utilities */
    --knip-border-light: var(--knip-sage);
    --knip-white:        #ffffff;
    --knip-radius:       10px;
    --knip-shadow:       0 2px 4px rgba(0, 0, 0, 0.1);
    --knip-shadow-card:  0 2px 10px rgba(67, 72, 37, 0.06);
    --knip-shadow-card-hover: 0 4px 16px rgba(67, 72, 37, 0.10);
}

/* ==========================================================================
   00b. BASE ELEMENTS
   ========================================================================== */

body {
    font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
    color: var(--knip-text);
    background-color: var(--knip-bg-secondary);
}

h1,
h2 {
    font-family: "serenity", system-ui, sans-serif;
    color: var(--knip-heading-1);
}

h3,
h4,
h5,
h6 {
    font-family: "serenity", system-ui, sans-serif;
    color: var(--knip-heading-2);
}

a {
    color: var(--knip-link);
}

a:hover {
    color: var(--knip-link-hover);
}

h1.entry-title {
    display: none !important;
}

/* ==========================================================================
   00c. SECTION BACKGROUND CLASSES
   Five tiers. Add one class to the relevant Elementor section/container.
   ========================================================================== */

.section-warm-white {
    background-color: var(--knip-warm-white) !important;
}

.section-light-green {
    background-color: var(--knip-light-green) !important;
}

.section-sage {
    background-color: var(--knip-sage) !important;
}

.section-dark-olive {
    background-color: var(--knip-deep-olive) !important;
}

.section-terracotta {
    background-color: var(--knip-blush) !important;
}

/* Dark olive text */
.section-dark-olive,
.section-dark-olive p,
.section-dark-olive li,
.section-dark-olive span:not(.elementor-button-text),
.section-dark-olive .elementor-widget-container {
    color: var(--knip-light-green) !important;
}

/* Dark olive headings */
.section-dark-olive h1,
.section-dark-olive h2,
.section-dark-olive h3,
.section-dark-olive h4,
.section-dark-olive h5,
.section-dark-olive h6,
.section-dark-olive .elementor-heading-title,
.section-dark-olive .hero-heading .elementor-heading-title {
    color: var(--knip-warm-white) !important;
}

/* Dark olive links */
.section-dark-olive a:not(.elementor-button) {
    color: var(--knip-leaf) !important;
}

.section-dark-olive a:not(.elementor-button):hover {
    color: #C4D38A !important;
}

/* Sage heading adjustment */
.section-sage h1,
.section-sage h2 {
    color: var(--knip-heading-1);
}

.section-sage h3,
.section-sage h4,
.section-sage h5,
.section-sage h6 {
    color: var(--knip-heading-2);
}

/* ==========================================================================
   00d. GLOBAL MEDIA DEFAULTS
   ========================================================================== */

img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}

/* Inner-page hero imagery can stay softly rounded. Landing hero media is reset in 02a. */
.section-hero img {
    border-radius: 12px;
}

.section-warm-white img,
.section-light-green img,
.section-sage img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.section-dark-olive img {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Card images override global media styling */
.card-package > .card-image img,
.card-space > .card-image img {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ==========================================================================
   00e. GLOBAL HEADING SYSTEM
   ========================================================================== */

.elementor-heading-title {
    font-family: "serenity", system-ui, sans-serif !important;
    line-height: 1.2 !important;
}

.elementor-widget-heading h2.elementor-heading-title,
h2 {
    font-size: clamp(30px, 3.4vw, 42px) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: var(--knip-olive) !important;
}

.elementor-widget-heading h3.elementor-heading-title,
h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    color: var(--knip-deep-olive) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.elementor-widget-heading h4.elementor-heading-title,
h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--knip-mid-green) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Sage section headings */
.section-sage .elementor-widget-heading h2.elementor-heading-title,
.section-sage h2 {
    color: var(--knip-deep-olive) !important;
}

.section-sage .elementor-widget-heading h3.elementor-heading-title,
.section-sage h3 {
    color: var(--knip-olive) !important;
}

.section-sage .elementor-widget-heading h4.elementor-heading-title,
.section-sage h4 {
    color: var(--knip-forest) !important;
}

/* Terracotta section headings */
.section-terracotta .elementor-widget-heading h2.elementor-heading-title,
.section-terracotta h2 {
    color: var(--knip-deep-olive) !important;
}

.section-terracotta .elementor-widget-heading h3.elementor-heading-title,
.section-terracotta h3 {
    color: var(--knip-olive) !important;
}

.section-terracotta .elementor-widget-heading h4.elementor-heading-title,
.section-terracotta h4 {
    color: var(--knip-terracotta) !important;
}

/* Dark olive section headings */
.section-dark-olive .elementor-widget-heading h2.elementor-heading-title,
.section-dark-olive h2 {
    color: var(--knip-warm-white) !important;
}

.section-dark-olive .elementor-widget-heading h3.elementor-heading-title,
.section-dark-olive h3 {
    color: var(--knip-sage) !important;
}

.section-dark-olive .elementor-widget-heading h4.elementor-heading-title,
.section-dark-olive h4 {
    color: var(--knip-leaf) !important;
}

/* Legacy: meeting-package and premises-info heading overrides */
.meeting-package h3 .elementor-heading-title,
.meeting-package .elementor-widget-heading h3.elementor-heading-title,
.premises-info h3 .elementor-heading-title,
.premises-info .elementor-widget-heading h3.elementor-heading-title {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--knip-olive) !important;
}

.meeting-package h4 .elementor-heading-title,
.meeting-package .elementor-widget-heading h4.elementor-heading-title,
.premises-info h4 .elementor-heading-title,
.premises-info .elementor-widget-heading h4.elementor-heading-title {
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--knip-deep-olive) !important;
}

.section-dark-olive .meeting-package h3 .elementor-heading-title,
.section-dark-olive .meeting-package .elementor-widget-heading h3.elementor-heading-title,
.section-dark-olive .premises-info h3 .elementor-heading-title,
.section-dark-olive .premises-info .elementor-widget-heading h3.elementor-heading-title {
    color: var(--knip-warm-white) !important;
}

.section-dark-olive .meeting-package h4 .elementor-heading-title,
.section-dark-olive .meeting-package .elementor-widget-heading h4.elementor-heading-title,
.section-dark-olive .premises-info h4 .elementor-heading-title,
.section-dark-olive .premises-info .elementor-widget-heading h4.elementor-heading-title {
    color: var(--knip-sage) !important;
}

/* Card heading overrides */
.card-package .card-body h3.elementor-heading-title,
.card-package .card-body .elementor-widget-heading h3.elementor-heading-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--knip-olive) !important;
    margin-bottom: 4px !important;
}

.card-package .card-body h4.elementor-heading-title,
.card-package .card-body .elementor-widget-heading h4.elementor-heading-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    color: var(--knip-text-light) !important;
    font-style: italic !important;
    margin-bottom: 0 !important;
}

.card-space .card-body h3.elementor-heading-title,
.card-space .card-body .elementor-widget-heading h3.elementor-heading-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--knip-olive) !important;
    margin-bottom: 12px !important;
}

@media (max-width: 767px) {
    .elementor-widget-heading h2.elementor-heading-title,
    h2 {
        font-size: 28px !important;
    }

    .elementor-widget-heading h3.elementor-heading-title,
    h3 {
        font-size: 26px !important;
    }
}

/* ==========================================================================
   00f. SECTION SPACING UTILITIES
   ========================================================================== */

.section-heading .elementor-heading-title,
.elementor-widget.section-heading .elementor-heading-title {
    margin-bottom: 0 !important;
}

.elementor-widget.section-heading {
    margin-bottom: 24px !important;
}

.section-warm-white,
.section-light-green,
.section-sage,
.section-dark-olive,
.section-terracotta {
    padding-top: 56px;
    padding-bottom: 116px;
    width: 100%;
    box-sizing: border-box;
}

.no-divider,
.section-warm-white.no-divider,
.section-light-green.no-divider,
.section-sage.no-divider,
.section-dark-olive.no-divider,
.section-terracotta.no-divider {
    padding-bottom: 56px !important;
}

@media (max-width: 1024px) {
    .section-warm-white,
    .section-light-green,
    .section-sage,
    .section-dark-olive,
    .section-terracotta {
        padding-top: 44px;
        padding-bottom: 104px;
    }

    .no-divider,
    .section-warm-white.no-divider,
    .section-light-green.no-divider,
    .section-sage.no-divider,
    .section-dark-olive.no-divider,
    .section-terracotta.no-divider {
        padding-bottom: 44px !important;
    }
}

@media (max-width: 767px) {
    .elementor-widget.section-heading {
        margin-bottom: 16px !important;
    }

    .section-warm-white,
    .section-light-green,
    .section-sage,
    .section-dark-olive,
    .section-terracotta {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .no-divider,
    .section-warm-white.no-divider,
    .section-light-green.no-divider,
    .section-sage.no-divider,
    .section-dark-olive.no-divider,
    .section-terracotta.no-divider {
        padding-bottom: 32px !important;
    }
}

/* ==========================================================================
   00g. CONTAINER NORMALIZATION
   ========================================================================== */

.section-warm-white,
.section-light-green,
.section-sage,
.section-dark-olive,
.section-terracotta {
    display: block;
    width: 100%;
    position: relative;
}

.section-warm-white .e-con,
.section-light-green .e-con,
.section-sage .e-con,
.section-dark-olive .e-con,
.section-terracotta .e-con {
    max-width: 100%;
}

.section-warm-white > .e-con,
.section-light-green > .e-con,
.section-sage > .e-con,
.section-dark-olive > .e-con,
.section-terracotta > .e-con {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   00h. TEXT WIDGET SPACING AND LIST STYLING
   ========================================================================== */

.section-warm-white .elementor-widget-text-editor,
.section-light-green .elementor-widget-text-editor,
.section-sage .elementor-widget-text-editor,
.section-dark-olive .elementor-widget-text-editor,
.section-terracotta .elementor-widget-text-editor {
    margin-bottom: 1.4em;
}

.section-warm-white .elementor-widget-text-editor ul,
.section-warm-white .elementor-widget-text-editor ol,
.section-light-green .elementor-widget-text-editor ul,
.section-light-green .elementor-widget-text-editor ol,
.section-sage .elementor-widget-text-editor ul,
.section-sage .elementor-widget-text-editor ol,
.section-dark-olive .elementor-widget-text-editor ul,
.section-dark-olive .elementor-widget-text-editor ol,
.section-terracotta .elementor-widget-text-editor ul,
.section-terracotta .elementor-widget-text-editor ol {
    padding-left: 1.4em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.section-warm-white .elementor-widget-text-editor ul li::marker,
.section-warm-white .elementor-widget-text-editor ol li::marker,
.section-light-green .elementor-widget-text-editor ul li::marker,
.section-light-green .elementor-widget-text-editor ol li::marker {
    color: var(--knip-leaf);
}

.section-sage .elementor-widget-text-editor ul li::marker,
.section-sage .elementor-widget-text-editor ol li::marker {
    color: var(--knip-forest);
}

.section-dark-olive .elementor-widget-text-editor ul li::marker,
.section-dark-olive .elementor-widget-text-editor ol li::marker {
    color: var(--knip-leaf);
}

.section-terracotta .elementor-widget-text-editor ul li::marker,
.section-terracotta .elementor-widget-text-editor ol li::marker {
    color: var(--knip-clay);
}

/* Suppress global spacing inside cards */
.card-package .elementor-widget-text-editor,
.card-space .elementor-widget-text-editor {
    margin-bottom: 0 !important;
}

.card-package .elementor-widget-heading,
.card-space .elementor-widget-heading {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 767px) {
    .section-warm-white .elementor-widget-text-editor,
    .section-light-green .elementor-widget-text-editor,
    .section-sage .elementor-widget-text-editor,
    .section-dark-olive .elementor-widget-text-editor,
    .section-terracotta .elementor-widget-text-editor {
        margin-bottom: 1em;
    }
}

/* ==========================================================================
   01. HEADER & NAVIGATION
   Site chrome, frosted-glass header states, navigation links, dropdowns,
   and mobile nav panel. Hero overlap and chevron live in 02.
   ========================================================================== */

/* ==========================================================================
   01a. HEADER BASE AND RESET
   Class: "knip-header" on the header template section/container.
   ========================================================================== */

.knip-header,
.knip-header > .e-con,
.knip-header .e-con,
.knip-header > .elementor-container,
.knip-header .elementor-column,
.knip-header .elementor-widget-wrap {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

.knip-header {
    z-index: 9999 !important;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease !important;
}

.knip-header .elementor-menu-toggle,
.knip-header .elementor-nav-menu--toggle {
    position: relative !important;
    z-index: 10000 !important;
    cursor: pointer !important;
}

/* ==========================================================================
   01b. HEADER GLASS / BACKGROUND STATES
   ========================================================================== */

/* Standard inner hero pages — near-transparent on load */
body:has(.section-hero):not(:has(.section-hero-landing)) .knip-header:not(.elementor-sticky--effects) {
    background-color: rgba(253, 251, 247, 0.12) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/* Standard inner hero pages — frosted on scroll */
body:has(.section-hero):not(:has(.section-hero-landing)) .knip-header.elementor-sticky--effects,
body:has(.section-hero):not(:has(.section-hero-landing)) .elementor-sticky--effects.knip-header,
body:has(.section-hero):not(:has(.section-hero-landing)) .elementor-sticky--effects .knip-header,
body:has(.section-hero):not(:has(.section-hero-landing)) .knip-header:has(.elementor-sticky--effects) {
    background-color: rgba(253, 251, 247, 0.82) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 1px 0 rgba(67, 72, 37, 0.08) !important;
}

/* Landing page — frosted glass on load */
body:has(.section-hero-landing) .knip-header {
    background-color: rgba(253, 251, 247, 0.60) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

/* Landing page — stronger frosted glass on scroll */
body:has(.section-hero-landing) .knip-header.elementor-sticky--effects,
body:has(.section-hero-landing) .elementor-sticky--effects.knip-header,
body:has(.section-hero-landing) .elementor-sticky--effects .knip-header,
body:has(.section-hero-landing) .knip-header:has(.elementor-sticky--effects) {
    background-color: rgba(253, 251, 247, 0.88) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    box-shadow: 0 1px 0 rgba(67, 72, 37, 0.08) !important;
}

/* No-hero pages — solid warm white from the start */
body:not(:has(.section-hero)):not(:has(.section-hero-landing)) .knip-header {
    background-color: rgba(253, 251, 247, 0.96) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 1px 0 rgba(67, 72, 37, 0.08) !important;
}

/* Keep direct header children transparent so the glass surface stays on .knip-header */
.knip-header > .e-con,
.knip-header > .elementor-container,
.knip-header .elementor-column,
.knip-header .elementor-widget-wrap {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   01c. HEADER LOGO BEHAVIOR
   ========================================================================== */

body:has(.section-hero-landing) .knip-header .elementor-widget-site-logo img {
    filter: drop-shadow(0 0 12px rgba(253, 251, 247, 0.8))
            drop-shadow(0 0 4px rgba(253, 251, 247, 0.6)) !important;
}

/* ==========================================================================
   01d. DESKTOP NAVIGATION LINKS
   ========================================================================== */

.knip-header .elementor-nav-menu a {
    color: var(--knip-olive) !important;
    font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.knip-header .elementor-nav-menu a:hover {
    color: var(--knip-deep-olive) !important;
}

/* ==========================================================================
   01e. DROPDOWN MENUS
   ========================================================================== */

.knip-header .elementor-nav-menu .sub-menu,
.knip-header .elementor-nav-menu--dropdown .sub-menu {
    background-color: var(--knip-warm-white) !important;
    border: 1px solid var(--knip-stone) !important;
    border-radius: var(--knip-radius) !important;
    box-shadow: 0 4px 16px rgba(67, 72, 37, 0.10) !important;
    padding: 6px 0 !important;
    margin-top: 4px !important;
    min-width: 180px !important;
}

.knip-header .elementor-nav-menu .sub-menu li a,
.knip-header .elementor-nav-menu--dropdown .sub-menu li a {
    color: var(--knip-text) !important;
    font-weight: 400 !important;
    font-size: 19px !important;
    padding: 8px 18px !important;
    display: block !important;
    text-decoration: none !important;
    background: transparent !important;
}

.knip-header .elementor-nav-menu .sub-menu li a:hover,
.knip-header .elementor-nav-menu--dropdown .sub-menu li a:hover {
    color: var(--knip-olive) !important;
    background-color: var(--knip-light-green) !important;
}

/* ==========================================================================
   01f. MOBILE NAVIGATION PANEL
   ========================================================================== */

.knip-header .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    z-index: 9998 !important;
    background-color: rgba(253, 251, 247, 0.97) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-top: 1px solid var(--knip-stone) !important;
}

/* ==========================================================================
   02. HERO SYSTEMS
   Landing media hero, inner-page heroes, header/hero overlap, chevron,
   and hero-specific responsive behavior.
   ========================================================================== */

/* ==========================================================================
   02a. LANDING HERO — FULL-BLEED MEDIA
   Structure: section-hero-landing > media container > HTML video / Image widgets.
   ========================================================================== */

.section-hero-landing {
    height: 94vh !important;
    min-height: 600px !important;
    max-height: 96vh !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex;
    align-items: stretch !important;
    justify-content: center !important;
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}

.section-hero-landing > .e-con,
.section-hero-landing > .elementor-container {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.section-hero-landing > .e-con > .e-con,
.section-hero-landing > .elementor-container > .e-con,
.section-hero-landing > .e-con > .elementor-widget-wrap,
.section-hero-landing > .elementor-container > .elementor-widget-wrap {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.section-hero-landing .elementor-widget-html,
.section-hero-landing .elementor-widget-image,
.section-hero-landing .elementor-widget-html .elementor-widget-container,
.section-hero-landing .elementor-widget-image .elementor-widget-container,
.section-hero-landing .landing-hero-video-wrap {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.section-hero-landing .landing-hero-video-wrap {
    position: relative;
    overflow: hidden;
}

.section-hero-landing .landing-hero-video,
.section-hero-landing .elementor-widget-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.section-hero-landing .elementor-widget-image {
    line-height: 0 !important;
}

/* ==========================================================================
   02b. INNER/PAGE HEROES — STANDARD CONTENT HERO SYSTEM
   Normal page hero system for non-landing pages.

   Elementor:
   - background image goes on the outer .section-hero container
   - do not use Elementor Background Overlay for standard heroes
   - inner content container should use class hero-content

   CSS:
   - warm-white readability wash is handled by .section-hero::before
   - H1 / optional H2 / text / optional CTA are centered
   - old hero-heading / hero-description classes remain supported
   ========================================================================== */

.section-hero {
    --hero-wash-opacity: 0.85;

    min-height: clamp(460px, 58svh, 720px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    text-align: center;
}

/* Disable Elementor's overlay layer for standard heroes.
   The warm-white wash is controlled by .section-hero::before instead. */
.section-hero > .elementor-background-overlay {
    display: none !important;
}

/* Standard warm-white readability wash */
.section-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: rgba(253, 251, 247, var(--hero-wash-opacity));
}

/* Keep hero content above the wash */
.section-hero > .e-con,
.section-hero > .elementor-container,
.section-hero .hero-content,
.section-hero .elementor-widget-heading,
.section-hero .elementor-widget-text-editor,
.section-hero .elementor-widget-button,
.section-hero .hero-actions {
    position: relative;
    z-index: 2;
}

/* Inner content container */
.section-hero .hero-content {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}

/* Main hero heading.
   Supports both container-scoped H1 targeting and old hero-heading class. */
.section-hero .elementor-widget-heading h1.elementor-heading-title,
.hero-heading .elementor-heading-title {
    font-family: "serenity", system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-size: 80px !important;
    line-height: 1.1 !important;
    color: var(--knip-heading-2) !important;
    margin-bottom: 24px !important;
}

/* Optional supporting hero subheading */
.section-hero .elementor-widget-heading h2.elementor-heading-title,
.hero-subheading .elementor-heading-title {
    font-family: "serenity", system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(28px, 3vw, 38px) !important;
    line-height: 1.18 !important;
    color: var(--knip-heading-2) !important;
    max-width: 900px !important;
    margin: 0 auto 18px auto !important;
    text-align: center !important;
}

/* Hero description.
   Supports both container-scoped Text Editor targeting and old hero-description class. */
.section-hero .elementor-widget-text-editor,
.hero-description {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.section-hero .elementor-widget-text-editor .elementor-widget-container,
.hero-description .elementor-widget-container {
    font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
    font-size: 22px !important;
    line-height: 1.6 !important;
    color: var(--knip-text) !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 32px auto !important;
    text-align: center !important;
}

.section-hero .elementor-widget-text-editor p,
.hero-description p {
    margin: 0 auto !important;
    text-align: center !important;
}

/* Optional hero CTA */
.section-hero .hero-actions,
.section-hero .elementor-widget-button.hero-actions {
    margin-top: 4px !important;
    text-align: center !important;
}

.section-hero .hero-actions .elementor-button,
.section-hero .elementor-widget-button.hero-actions .elementor-button {
    background-color: var(--knip-btn-bg) !important;
    color: var(--knip-deep-olive) !important;
    border-radius: var(--knip-radius) !important;
    font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 12px 28px !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.section-hero .hero-actions .elementor-button:hover,
.section-hero .hero-actions .elementor-button:focus,
.section-hero .elementor-widget-button.hero-actions .elementor-button:hover,
.section-hero .elementor-widget-button.hero-actions .elementor-button:focus {
    background-color: var(--knip-btn-hover) !important;
    color: var(--knip-warm-white) !important;
}

/* Keep Elementor shape divider above background wash */
.section-hero .elementor-shape {
    z-index: 4;
}

/* ==========================================================================
   02c. HEADER / HERO OVERLAP
   ========================================================================== */

@media (min-width: 768px) {
    body:not(.elementor-editor-active):has(.section-hero):not(:has(.section-hero-landing)) .section-hero {
        position: relative !important;
        z-index: 1 !important;
        margin-top: -70px !important;
        padding-top: 140px !important;
    }

    body:not(.elementor-editor-active):has(.section-hero-landing) .section-hero-landing {
        position: relative !important;
        z-index: 1 !important;
        margin-top: -70px !important;
        padding-top: 0 !important;
    }
}

/* ==========================================================================
   02d. HERO CHEVRON
   Desktop scroll affordance. Hidden on mobile in 02e.
   ========================================================================== */

.section-hero::after,
.section-hero-landing::after {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 20px;
    height: 20px;
    border-right: 3px solid var(--knip-forest);
    border-bottom: 3px solid var(--knip-forest);
    opacity: 0.88;
    z-index: 20;
    pointer-events: none;
    animation: hero-chevron-bounce 2.2s ease-in-out infinite;
}

@keyframes hero-chevron-bounce {
    0%, 100% {
        bottom: 12px;
        opacity: 0.78;
    }

    50% {
        bottom: 22px;
        opacity: 1;
    }
}

/* ==========================================================================
   02e. HERO RESPONSIVE OVERRIDES
   ========================================================================== */

@media (max-width: 1024px) {
    .section-hero-landing {
        height: 82svh !important;
        min-height: 520px !important;
        max-height: 860px !important;
    }

    .section-hero .elementor-widget-heading h1.elementor-heading-title,
    .hero-heading .elementor-heading-title {
        font-size: 56px !important;
    }

    .section-hero .elementor-widget-heading h2.elementor-heading-title,
    .hero-subheading .elementor-heading-title {
        font-size: 30px !important;
    }
}

@media (max-width: 767px) {
    body:not(.elementor-editor-active):has(.section-hero) .section-hero {
        margin-top: 0 !important;
        padding-top: 40px !important;
        min-height: clamp(420px, 52svh, 620px) !important;
        max-height: none !important;
    }

    body:not(.elementor-editor-active):has(.section-hero-landing) .section-hero-landing {
        margin-top: 0 !important;
        padding-top: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    .section-hero-landing > .e-con,
    .section-hero-landing > .elementor-container,
    .section-hero-landing > .e-con > .e-con,
    .section-hero-landing > .elementor-container > .e-con,
    .section-hero-landing > .e-con > .elementor-widget-wrap,
    .section-hero-landing > .elementor-container > .elementor-widget-wrap,
    .section-hero-landing .elementor-widget-image,
    .section-hero-landing .elementor-widget-image .elementor-widget-container {
        height: auto !important;
        min-height: 0 !important;
    }

    .section-hero-landing .elementor-widget-image img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        object-fit: contain !important;
        object-position: center top !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .section-hero .elementor-widget-heading h1.elementor-heading-title,
    .hero-heading .elementor-heading-title {
        font-size: 40px !important;
    }

    .section-hero .elementor-widget-heading h2.elementor-heading-title,
    .hero-subheading .elementor-heading-title {
        font-size: 24px !important;
        line-height: 1.22 !important;
        margin-bottom: 14px !important;
    }

    .section-hero .elementor-widget-text-editor .elementor-widget-container,
    .hero-description .elementor-widget-container {
        font-size: 18px !important;
        max-width: 100%;
    }

    .section-hero .hero-actions,
    .section-hero .elementor-widget-button.hero-actions {
        margin-top: 0 !important;
    }

    .section-hero .hero-actions .elementor-button,
    .section-hero .elementor-widget-button.hero-actions .elementor-button {
        width: auto !important;
        max-width: 100% !important;
    }

    .section-hero::after,
    .section-hero-landing::after {
        display: none !important;
    }
}

/* ==========================================================================
   10. EVENTS CALENDAR
   The Events Calendar plugin styling and related datepicker overrides.
   ========================================================================== */

/* ==========================================================================
   10a. EVENTS CALENDAR — TOP BAR LAYOUT + SEARCH
   ========================================================================== */

.tribe-events,
.tribe-common {
  --tec-color-accent-primary: var(--knip-olive) !important;
  --tec-color-accent-primary-hover: var(--knip-deep-olive) !important;
  --tec-color-accent-primary-active: var(--knip-deep-olive) !important;
  --tec-color-accent-primary-background: var(--knip-bg-primary) !important;
  --tec-color-accent-secondary: var(--knip-olive) !important;
  --tec-color-background-primary-multiday: var(--knip-olive) !important;
  --tec-color-background-primary-multiday-hover: var(--knip-deep-olive) !important;
  --tec-color-background-secondary-multiday: var(--knip-mid-green) !important;
  --tec-color-background-secondary-multiday-hover: var(--knip-olive) !important;
  --tec-color-button-primary: var(--knip-olive) !important;
  --tec-color-button-primary-hover: var(--knip-deep-olive) !important;
  --tec-color-link-accent: var(--knip-olive) !important;
  --tec-color-link-accent-hover: var(--knip-deep-olive) !important;
  --tec-color-text-events-title: var(--knip-olive) !important;
  --tec-color-icon-active: var(--knip-olive) !important;
  --tec-color-icon-focus: var(--knip-olive) !important;
  --tec-color-event-icon-hover: var(--knip-olive) !important;
  --tec-color-accent-primary-week-event: rgba(101, 104, 57, 0.1) !important;
  --tec-color-accent-primary-week-event-hover: rgba(101, 104, 57, 0.2) !important;
  --tec-color-accent-primary-background-datepicker: var(--knip-bg-primary) !important;
}

.tribe-events-header .tribe-events-c-top-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
}

.tribe-events-c-events-bar--border {
  border: none !important;
}

.tribe-events-c-search {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-right: 20px !important;
  max-width: 350px !important;
  border: none !important;
}

.tribe-events-c-search__input-group {
  position: relative !important;
  border: none !important;
  box-shadow: none !important;
}

#tribe-events-events-bar-keyword,
.tribe-events .tribe-events-c-search__input {
  border-radius: var(--knip-radius) !important;
  font-size: 18px !important;
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  border: 1px solid var(--knip-stone) !important;
  background-color: var(--knip-bg-secondary) !important;
  color: var(--knip-text) !important;
  line-height: 1.2 !important;
  max-width: 300px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  padding: 3px 10px 3px 32px !important;
  box-shadow: var(--knip-shadow) !important;
}

.tribe-events .tribe-events-c-search__input-control-icon-svg {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.tribe-events .tribe-events-c-search__input-control-icon-svg path,
.tribe-events .tribe-events-c-search__input-control-icon-svg .tribe-common-c-svgicon__svg-fill {
  fill: var(--knip-leaf) !important;
}

.tribe-events .tribe-events-c-search__input:focus,
#tribe-events-events-bar-keyword:focus {
  outline: none !important;
  border-color: var(--knip-olive) !important;
  box-shadow: 0 0 0 2px rgba(168, 199, 75, 0.2), var(--knip-shadow) !important;
}

.tribe-common-c-btn.tribe-events-c-search__button {
  background-color: var(--knip-btn-bg) !important;
  color: var(--knip-text) !important;
  font-size: 18px !important;
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  border-radius: var(--knip-radius) !important;
  padding: 3px 10px !important;
  line-height: 1.2 !important;
  height: 32px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.tribe-common-c-btn.tribe-events-c-search__button:hover,
.tribe-common-c-btn.tribe-events-c-search__button:focus {
  background-color: var(--knip-olive) !important;
  color: var(--knip-bg-secondary) !important;
  outline: none !important;
}

.tribe-events-c-events-bar__search-button {
  display: none !important;
}


/* ==========================================================================
   10b. EVENTS CALENDAR — VIEW SELECTOR (Lista / Kuukausi / Päivä)
   ========================================================================== */

.tribe-events-c-view-selector__list {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 32px !important;
  box-sizing: border-box !important;
  padding: 3px 10px !important;
  border-radius: var(--knip-radius) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link,
.tribe-events .tribe-events-c-view-selector__list-item-link .tribe-events-c-view-selector__list-item-text {
  color: var(--knip-leaf) !important;
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link .tribe-common-c-svgicon__svg-fill,
.tribe-events .tribe-events-c-view-selector__list-item-link .tribe-common-c-svgicon__svg-fill * {
  fill: var(--knip-leaf) !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link:hover,
.tribe-events .tribe-events-c-view-selector__list-item-link:hover .tribe-events-c-view-selector__list-item-text {
  color: var(--knip-olive) !important;
  background: transparent !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link:hover .tribe-common-c-svgicon__svg-fill,
.tribe-events .tribe-events-c-view-selector__list-item-link:hover .tribe-common-c-svgicon__svg-fill * {
  fill: var(--knip-olive) !important;
}

.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
  background-color: var(--knip-leaf) !important;
}

.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link,
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text {
  color: var(--knip-text) !important;
}

.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link .tribe-common-c-svgicon__svg-fill,
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link .tribe-common-c-svgicon__svg-fill * {
  fill: var(--knip-text) !important;
}

.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:hover {
  background-color: var(--knip-olive) !important;
}

.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:hover,
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:hover .tribe-events-c-view-selector__list-item-text {
  color: var(--knip-white) !important;
}

.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:hover .tribe-common-c-svgicon__svg-fill,
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link:hover .tribe-common-c-svgicon__svg-fill * {
  fill: var(--knip-white) !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link,
.tribe-events .tribe-events-c-view-selector__list-item-link:hover,
.tribe-events .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
  border-bottom: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link::before,
.tribe-events .tribe-events-c-view-selector__list-item-link::after,
.tribe-events .tribe-events-c-view-selector__list-item--active::before,
.tribe-events .tribe-events-c-view-selector__list-item--active::after {
  content: none !important;
  display: none !important;
}

.tribe-events .tribe-events-c-view-selector__list-item-link:focus {
  outline: none !important;
}


/* ==========================================================================
   10c. EVENTS CALENDAR — TODAY BUTTON + NAV + DATEPICKER
   ========================================================================== */

.tribe-events a.tribe-events-c-top-bar__today-button,
.tribe-events a.tribe-events-c-top-bar__today-button.tribe-common-c-btn-border-small {
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  height: 32px !important;
  padding: 3px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.tribe-events .tribe-events-c-top-bar__today-button {
  background-color: var(--knip-olive) !important;
  color: var(--knip-bg-secondary) !important;
  border-radius: var(--knip-radius) !important;
}

.tribe-events .tribe-events-c-top-bar__today-button:hover,
.tribe-events .tribe-events-c-top-bar__today-button:focus {
  background-color: var(--knip-deep-olive) !important;
  color: var(--knip-bg-secondary) !important;
  outline: none !important;
  text-decoration: none !important;
}

.tribe-events .tribe-events-c-top-bar__nav-link {
  box-shadow: none !important;
}

.tribe-events .tribe-events-c-top-bar__nav-link svg path {
  fill: var(--knip-leaf) !important;
}

.tribe-events .tribe-events-c-top-bar__nav-link:hover svg path {
  fill: var(--knip-olive) !important;
}

.tribe-events .tribe-events-c-top-bar__datepicker-button {
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.tribe-events .tribe-events-c-top-bar__datepicker-button:hover,
.tribe-events .tribe-events-c-top-bar__datepicker-button:focus,
.tribe-events .tribe-events-c-top-bar__datepicker-button:hover time,
.tribe-events .tribe-events-c-top-bar__datepicker-button:hover span,
.tribe-events .tribe-events-c-top-bar__datepicker-button:focus span {
  color: var(--knip-deep-olive) !important;
  background: transparent !important;
}


/* ==========================================================================
   10d. EVENTS CALENDAR — MONTH VIEW
   ========================================================================== */

.tribe-events-calendar-month__day--past {
  background-color: var(--knip-parchment) !important;
}

.tribe-events-calendar-month__day--current {
  background-color: var(--knip-bg-primary) !important;
  border: 1px solid var(--knip-leaf) !important;
}

.tribe-events-calendar-month__day--future {
  background-color: var(--knip-bg-secondary) !important;
}

.tribe-events-calendar-month__day-date {
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--knip-text) !important;
}

.tribe-events-calendar-month__day--selected,
.tribe-events-calendar-month__day--selected[style] {
  background-color: var(--knip-leaf) !important;
}

.tribe-events-calendar-month__day--selected .tribe-events-calendar-month__day-date {
  color: var(--knip-text) !important;
}

.tribe-events-calendar-month__mobile-events-icon {
  background-color: var(--knip-mid-green) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
}

/* Single-day event pills */
.tribe-events-calendar-month__calendar-event {
  border-radius: var(--knip-radius) !important;
  padding: 8px 12px !important;
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  background-color: var(--knip-mid-green) !important;
  color: var(--knip-white) !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  display: block !important;
}

.tribe-events-calendar-month__calendar-event *,
.tribe-events-calendar-month__calendar-event a,
.tribe-events-calendar-month__calendar-event time,
.tribe-events-calendar-month__calendar-event span {
  color: var(--knip-white) !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
}

.tribe-events-calendar-month__calendar-event a:hover {
  color: var(--knip-white) !important;
  text-decoration: underline !important;
}

/* Category: toistuvat — leaf green, dark text */
.tribe-events-calendar-month__calendar-event.cat_toistuvat,
.tribe-events-calendar-month__calendar-event[class*="cat_toistuvat"] {
  background-color: var(--knip-leaf) !important;
}

.tribe-events-calendar-month__calendar-event.cat_toistuvat *,
.tribe-events-calendar-month__calendar-event.cat_toistuvat a,
.tribe-events-calendar-month__calendar-event[class*="cat_toistuvat"] *,
.tribe-events-calendar-month__calendar-event[class*="cat_toistuvat"] a {
  color: var(--knip-text) !important;
}

/* Category: tapahtuma — olive, white text */
.tribe-events-calendar-month__calendar-event.cat_tapahtuma,
.tribe-events-calendar-month__calendar-event[class*="cat_tapahtuma"] {
  background-color: var(--knip-olive) !important;
}

.tribe-events-calendar-month__calendar-event.cat_tapahtuma *,
.tribe-events-calendar-month__calendar-event.cat_tapahtuma a,
.tribe-events-calendar-month__calendar-event[class*="cat_tapahtuma"] *,
.tribe-events-calendar-month__calendar-event[class*="cat_tapahtuma"] a {
  color: var(--knip-white) !important;
}

/* Multi-day bars */
.tribe-events-calendar-month__multiday-event-bar,
.tribe-events-calendar-month__multiday-event {
  background-color: var(--knip-olive) !important;
  border-radius: var(--knip-radius) !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 18px !important;
}

.tribe-events-calendar-month__multiday-event-bar,
.tribe-events-calendar-month__multiday-event-bar *,
.tribe-events-calendar-month__multiday-event,
.tribe-events-calendar-month__multiday-event *,
.tribe-events-calendar-month__multiday-event a {
  color: var(--knip-white) !important;
}

.tribe-events-calendar-month__multiday-event a:hover {
  text-decoration: underline !important;
}

.tribe-events-calendar-month__multiday-event[style*="background-color"],
.tribe-events-calendar-month__multiday-event-bar[style*="background-color"] {
  background-color: var(--knip-olive) !important;
}

/* Past day events — muted */
.tribe-events-calendar-month__day--past .tribe-events-calendar-month__multiday-event-bar {
  background-color: var(--knip-warm-gray) !important;
}

.tribe-events-calendar-month__day--past .tribe-events-calendar-month__multiday-event-bar,
.tribe-events-calendar-month__day--past .tribe-events-calendar-month__multiday-event-bar * {
  color: var(--knip-white) !important;
}

/* Stacked events spacing */
.tribe-events-calendar-month__events {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.tribe-events-calendar-month__calendar-event:not(:last-child) {
  margin-bottom: 8px !important;
}

@media (max-width: 767px) {
  .tribe-events-calendar-month__events {
    gap: 6px !important;
  }
  .tribe-events-calendar-month__calendar-event,
  .tribe-events-calendar-month__calendar-event *,
  .tribe-events-calendar-month__calendar-event a {
    font-size: 19px !important;
  }
  .tribe-events-calendar-month__calendar-event:not(:last-child) {
    margin-bottom: 6px !important;
  }
}

/* Consistent text size across month view */
.tribe-events-calendar-month__multiday-event-bar-title,
.tribe-events-calendar-month__multiday-event-bar-inner,
.tribe-events-calendar-month__multiday-event-bar-inner *,
.tribe-events-calendar-month__multiday-event-hidden-title,
.tribe-events-calendar-month__multiday-event-hidden-link,
.tribe-events-calendar-month__calendar-event-title,
.tribe-events-calendar-month__calendar-event-title-link,
.tribe-events-calendar-month__calendar-event-datetime,
.tribe-events-calendar-month__calendar-event-datetime time {
  font-size: 14px !important;
  line-height: 1.4 !important;
}


/* ==========================================================================
   10e. EVENTS CALENDAR — TOOLTIP / PREVIEW CARD
   ========================================================================== */

.tribe-events-tooltip {
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--knip-text) !important;
  background-color: var(--knip-bg-secondary) !important;
  border: 1px solid var(--knip-stone) !important;
  border-radius: 8px !important;
  padding: 14px !important;
  max-width: 300px !important;
}

.tribe-events-tooltip .tribe-event-title {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--knip-deep-olive) !important;
  margin-bottom: 8px !important;
}

.tribe-events-tooltip .tribe-event-title a:hover {
  text-decoration: none !important;
}

.tribe-events-tooltip time,
.tribe-events-tooltip .tribe-event-date-start,
.tribe-events-tooltip .tribe-event-date-end {
  font-size: 19px !important;
  color: var(--knip-text) !important;
}

.tribe-events-tooltip p {
  font-size: 17px !important;
  line-height: 1.5 !important;
  color: var(--knip-text-light) !important;
  margin-top: 10px !important;
}


/* ==========================================================================
   10f. EVENTS CALENDAR — DATEPICKER POPUP
   ========================================================================== */

.datepicker.datepicker-dropdown {
  background-color: var(--knip-bg-secondary) !important;
  border: 1px solid var(--knip-stone) !important;
  border-radius: 8px !important;
  padding: 8px !important;
}

.datepicker .table-condensed {
  background-color: var(--knip-bg-secondary) !important;
}

.datepicker .datepicker-switch {
  color: var(--knip-olive) !important;
  background-color: var(--knip-bg-secondary) !important;
  font-family: "serenity", system-ui, sans-serif !important;
  font-weight: 500 !important;
}

.datepicker .dow {
  color: var(--knip-text-light) !important;
  background-color: var(--knip-bg-secondary) !important;
}

.datepicker button.prev,
.datepicker button.next {
  color: var(--knip-olive) !important;
  background-color: var(--knip-bg-primary) !important;
}

.datepicker button.prev:hover,
.datepicker button.next:hover {
  background-color: var(--knip-bg-accent) !important;
}

.datepicker button.prev svg path,
.datepicker button.next svg path {
  fill: var(--knip-olive) !important;
}

.datepicker button.day,
.datepicker button.month,
.datepicker button.year,
.datepicker button.decade,
.datepicker button.century {
  color: var(--knip-text) !important;
  background-color: var(--knip-bg-secondary) !important;
}

.datepicker button.day.past,
.datepicker button.day.old,
.datepicker button.month.past {
  color: var(--knip-warm-gray) !important;
  background-color: var(--knip-bg-secondary) !important;
}

.datepicker button.day:hover,
.datepicker button.month:hover,
.datepicker button.year:hover {
  background-color: var(--knip-bg-primary) !important;
  color: var(--knip-text) !important;
}

.datepicker button.active,
.datepicker button.active:hover,
.datepicker button.active.current {
  background-color: var(--knip-olive) !important;
  color: var(--knip-white) !important;
}

.datepicker button.current:not(.active) {
  background-color: var(--knip-bg-accent) !important;
  color: var(--knip-text) !important;
}

.datepicker button.new {
  color: var(--knip-warm-gray) !important;
}

.datepicker button.day::after {
  background-color: var(--knip-leaf) !important;
}


/* ==========================================================================
   10g. EVENTS CALENDAR — LIST VIEW
   ========================================================================== */

.tribe-events-calendar-list__event-title,
.tribe-events-calendar-list__event-title a,
.tribe-events-calendar-list__event-title-link {
  color: var(--knip-olive) !important;
  font-family: "serenity", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.tribe-events-calendar-list__event-title:hover,
.tribe-events-calendar-list__event-title a:hover,
.tribe-events-calendar-list__event-title-link:hover {
  color: var(--knip-deep-olive) !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.tribe-events-calendar-list__event-date-tag {
  font-size: 18px !important;
  color: var(--knip-olive) !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.tribe-events-calendar-list__event-description {
  display: block !important;
  visibility: visible !important;
  max-height: none !important;
  overflow: visible !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
  color: var(--knip-text-light) !important;
  margin-top: 8px !important;
}

.tribe-events-calendar-list__event-description:empty::before {
  content: "Lisätietoa tulossa...";
  font-style: italic !important;
  color: var(--knip-warm-gray) !important;
}

.tribe-events-calendar-list__event-featured-image {
  width: 100% !important;
  margin-bottom: 12px !important;
}

.tribe-events-calendar-list__event-featured-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--knip-radius) !important;
  display: block !important;
}

@media (max-width: 767px) {
  .tribe-events-calendar-list__event {
    display: block !important;
    padding: 16px !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid var(--knip-stone) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .tribe-events-calendar-list__event-title {
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--knip-text) !important;
    margin-bottom: 6px !important;
  }

  .tribe-events-calendar-list__event-description {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--knip-text-light) !important;
    margin-top: 8px !important;
  }
}


/* ==========================================================================
   10h. EVENTS CALENDAR — SINGLE EVENT PAGE
   ========================================================================== */

.single-tribe_events {
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  font-size: 17px !important;
  color: var(--knip-text) !important;
}

.single-tribe_events .tribe-events-single-event-title {
  font-family: "serenity", system-ui, sans-serif !important;
  font-weight: 600 !important;
  color: var(--knip-olive) !important;
}

.single-tribe_events .tribe-events-single-event-description a,
.single-tribe_events a {
  color: var(--knip-link) !important;
  text-decoration: none !important;
}

.single-tribe_events a:hover {
  color: var(--knip-link-hover) !important;
  text-decoration: underline !important;
}


/* ==========================================================================
   20. FORMS
   WPForms and reusable form-related styling.
   ========================================================================== */

/* ==========================================================================
   20a. WPFORMS — GLOBAL STYLING
   ========================================================================== */

.wpforms-container,
.wpforms-container .wpforms-form {
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  color: inherit !important;
}

.wpforms-container .wpforms-field-label {
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
}

.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form input[type="url"],
.wpforms-container .wpforms-form input[type="number"],
.wpforms-container .wpforms-form input[type="date"],
.wpforms-container .wpforms-form input[type="search"],
.wpforms-container .wpforms-form select,
.wpforms-container .wpforms-form textarea {
  box-sizing: border-box !important;
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  font-size: 18px !important;
  color: var(--knip-text) !important;
  border-radius: var(--knip-radius) !important;
  border: 1px solid var(--knip-stone) !important;
  background-color: var(--knip-bg-secondary) !important;
  box-shadow: none !important;
  max-width: 100% !important;
}

.wpforms-container .wpforms-form input[type="text"],
.wpforms-container .wpforms-form input[type="email"],
.wpforms-container .wpforms-form input[type="tel"],
.wpforms-container .wpforms-form input[type="url"],
.wpforms-container .wpforms-form input[type="number"],
.wpforms-container .wpforms-form input[type="date"],
.wpforms-container .wpforms-form input[type="search"],
.wpforms-container .wpforms-form select {
  height: auto !important;
  min-height: 44px !important;
  line-height: 1.2 !important;
  padding: 10px 12px !important;
}

.wpforms-container .wpforms-form textarea {
  line-height: 1.4 !important;
  padding: 10px 12px !important;
}

.wpforms-container .wpforms-form input:focus,
.wpforms-container .wpforms-form select:focus,
.wpforms-container .wpforms-form textarea:focus {
  outline: none !important;
  border-color: var(--knip-olive) !important;
  box-shadow: 0 0 0 2px rgba(168, 199, 75, 0.2) !important;
}

.wpforms-container .wpforms-field-description {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--knip-text-light) !important;
  margin-top: 8px !important;
}

.wpforms-container .wpforms-field {
  margin-bottom: 16px !important;
}

.wpforms-container .wpforms-error,
.wpforms-container label.wpforms-error {
  font-size: 14px !important;
  line-height: 1.4 !important;
}

.wpforms-container .wpforms-submit-container {
  margin-top: 14px !important;
}

.wpforms-container button.wpforms-submit {
  box-sizing: border-box !important;
  font-family: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  padding: 12px 28px !important;
  border-radius: var(--knip-radius) !important;
  border: 0 !important;
  background-color: var(--knip-btn-bg) !important;
  color: var(--knip-deep-olive) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.wpforms-container button.wpforms-submit:hover,
.wpforms-container button.wpforms-submit:focus {
  background-color: var(--knip-btn-hover) !important;
  color: var(--knip-warm-white) !important;
  outline: none !important;
}

.wpforms-container .wpforms-required-label {
  margin-left: 6px !important;
  position: relative;
  top: -0.5px;
}

/* Dark section form labels */
.section-dark-olive .wpforms-container .wpforms-field-label {
  color: var(--knip-sage) !important;
}

/* Side-by-side forms */
@media (min-width: 768px) {
  .contact-columns .elementor-widget-wpforms,
  .contact-columns .elementor-widget-wpforms .elementor-widget-container,
  .contact-columns .wpforms-container,
  .contact-columns .wpforms-form {
    height: 100%;
  }

  .contact-columns .wpforms-form {
    display: flex !important;
    flex-direction: column !important;
  }

  .contact-columns .wpforms-field-container {
    flex: 1 1 auto !important;
  }

  .contact-columns .wpforms-recaptcha-container {
    margin-top: auto !important;
  }

  .contact-columns .wpforms-submit-container {
    margin-top: 14px !important;
  }
}

/* ==========================================================================
   30. CONTACT & INFO COMPONENTS
   Yhteystiedot-specific layout, map, accordion, and contact cards.
   ========================================================================== */

/* ==========================================================================
   30a. CONTACT PAGE — CONTACT FORM COLUMN
   Yhteystiedot page-specific form sizing and alignment
   ========================================================================== */

.contact-form-column {
  align-items: flex-start !important;
}

.contact-form-column .elementor-widget-heading,
.contact-form-column .elementor-widget-text-editor,
.contact-form-column .elementor-widget-wpforms {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.contact-form-column .wpforms-container {
  width: 100% !important;
  max-width: 520px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.contact-form-column .wpforms-form {
  width: 100% !important;
}

.contact-form-column .wpforms-form input[type="text"],
.contact-form-column .wpforms-form input[type="email"],
.contact-form-column .wpforms-form select {
  min-height: 42px !important;
}

.contact-form-column .wpforms-form textarea {
  min-height: 150px !important;
}

.contact-form-column .wpforms-field {
  margin-bottom: 14px !important;
}

.contact-form-column .wpforms-field-label {
  margin-bottom: 5px !important;
}

.contact-form-column .wpforms-submit-container {
  margin-top: 10px !important;
}

@media (max-width: 767px) {
  .contact-form-column .wpforms-container {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   30b. CONTACT PAGE — ARRIVAL INFO
   Class "contact-arrival" on Elementor Text Editor widget
   ========================================================================== */

.contact-arrival .arrival-list {
  margin: 0;
  padding: 0;
}

.contact-arrival .arrival-row {
  display: grid;
  grid-template-columns: minmax(10ch, 18ch) 1fr;
  column-gap: 20px;
  align-items: start;
  margin: 0 0 12px 0;
}

.contact-arrival .arrival-label {
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.contact-arrival .arrival-value {
  line-height: 1.55;
}

.contact-arrival a {
  color: var(--knip-link);
  text-decoration: none;
}

.contact-arrival a:hover {
  color: var(--knip-link-hover);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .contact-arrival .arrival-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
    margin-bottom: 14px;
  }

  .contact-arrival .arrival-label {
    white-space: normal;
  }
}

/* =========================================================
   30c. CONTACT PAGE — MAP CONTAINER FIXES
   ========================================================= */

.contact-map-column iframe {
    border: none !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
}

.contact-map-column .elementor-widget-container {
    width: 100% !important;
    max-width: 620px;
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* ==========================================================================
   30d. CONTACT PAGE — LOCATION / MAP HEIGHT
   ========================================================================== */

.contact-map-column {
    min-height: 380px;
}

.contact-map-column .elementor-widget-google_maps,
.contact-map-column .elementor-widget-container,
.contact-map-column iframe {
    min-height: 380px;
}

@media (max-width: 1024px) {
    .contact-map-column,
    .contact-map-column .elementor-widget-google_maps,
    .contact-map-column .elementor-widget-container,
    .contact-map-column iframe {
        min-height: 340px;
    }
}

@media (max-width: 767px) {
    .contact-map-column,
    .contact-map-column .elementor-widget-google_maps,
    .contact-map-column .elementor-widget-container,
    .contact-map-column iframe {
        min-height: 300px;
    }
}

/* ==========================================================================
   30e. CONTACT PAGE — LOCATION / MAP ROW REFINEMENT
   ========================================================================== */

.contact-map-column {
    align-items: flex-end !important;
}

.contact-map-column > .e-con,
.contact-map-column > .elementor-widget,
.contact-map-column .elementor-widget-google_maps,
.contact-map-column .elementor-widget-container {
    width: 100% !important;
}

/* ==========================================================================
   30f. CONTACT PAGE — ACCORDION (Haitari)
   Class "contact-accordion" on widget
   ========================================================================== */

.contact-accordion {
  margin-top: 8px;
  max-width: 100%;
}

.contact-accordion .elementor-accordion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-accordion .elementor-accordion-item {
  border: 0 !important;
  background: transparent !important;
  margin: 0;
}

.contact-accordion .elementor-accordion-item + .elementor-accordion-item {
  margin-top: 10px;
}

.contact-accordion .elementor-tab-title {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  min-width: 38ch;
  width: fit-content;
  max-width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--knip-stone);
  border-radius: 8px;
  background: var(--knip-bg-secondary);
  font-weight: 600;
  line-height: 1.3;
  box-shadow: none !important;
  outline: none !important;
}

.contact-accordion .elementor-tab-title::before,
.contact-accordion .elementor-tab-title::after {
  content: none !important;
  display: none !important;
}

.contact-accordion .elementor-tab-title:hover {
  border-color: rgba(101, 104, 57, 0.4);
}

.contact-accordion .elementor-tab-title.elementor-active {
  border-color: var(--knip-leaf);
}

.contact-accordion .elementor-accordion-icon {
  color: var(--knip-leaf);
  font-size: 18px;
  opacity: 0.9;
  margin-top: 2px;
}

.contact-accordion .acc-sub {
  display: block;
  font-weight: 400;
  font-style: italic;
  font-size: 0.95em;
  line-height: 1.35;
  color: var(--knip-text-light);
  margin-top: 4px;
  white-space: nowrap;
}

.contact-accordion .elementor-tab-content {
  border: 0 !important;
  background: transparent !important;
  padding: 14px 6px 6px 44px !important;
}

.contact-accordion .elementor-tab-content p:first-child {
  margin-top: 0;
}

.contact-accordion .wpforms-container .wpforms-field {
  margin-top: 10px;
  margin-bottom: 10px;
}

.contact-accordion .wpforms-container .wpforms-field-label {
  margin-bottom: 6px;
}

.contact-accordion .wpforms-container button.wpforms-submit {
  margin-top: 8px;
}

@media (max-width: 520px) {
  .contact-accordion .elementor-accordion {
    align-items: stretch;
  }

  .contact-accordion .elementor-tab-title {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .contact-accordion .acc-sub {
    white-space: normal;
  }

  .contact-accordion .elementor-tab-content {
    padding-left: 36px !important;
  }
}

/* ==========================================================================
   30h. CONTACT PAGE — CONTACT CARDS
   Four-up desktop layout for Yhteyshenkilöt
   ========================================================================== */

.contact-cards-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

.contact-cards-row > .contact-card {
  width: auto !important;
}

.contact-card {
  min-height: 220px;
  background-color: var(--knip-warm-white) !important;
  border: 1px solid rgba(101, 104, 57, 0.35) !important;
  box-shadow: 0 2px 8px rgba(67, 72, 37, 0.10);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(67, 72, 37, 0.22);
  border-color: rgba(101, 104, 57, 0.6) !important;
}

.contact-card .elementor-widget-heading,
.contact-card .elementor-widget-text-editor {
  margin-bottom: 0 !important;
}

@media (max-width: 1024px) {
  .contact-cards-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  .contact-cards-row {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .contact-card {
    min-height: 0;
  }
}

/* ==========================================================================
   40. CARD SYSTEMS
   ========================================================================== */

/* ==========================================================================
   40a. CARD CONTAINERS
   Row and grid wrappers for all card types.
   ========================================================================== */

.container-packages {
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 24px;
}

@media (min-width: 1200px) {
    .container-packages {
        max-width: 1000px;
    }
}

@media (max-width: 767px) {
    .container-packages {
        gap: 20px;
        padding: 36px 16px;
    }
}

.container-spaces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 60px 24px;
}

@media (max-width: 767px) {
    .container-spaces {
        gap: 16px;
        padding: 36px 16px;
    }
}

.service-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 60px 8% !important;
}

.service-cards > .service-card {
    width: auto !important;
}

@media (max-width: 1024px) {
    .service-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 48px 6% !important;
    }
}

@media (max-width: 767px) {
    .service-cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 36px 16px !important;
    }
}

.accommodation-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 60px 8% !important;
}

.accommodation-cards > .accommodation-card {
    width: auto !important;
}

@media (max-width: 767px) {
    .accommodation-cards {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 36px 16px !important;
    }
}

/* ==========================================================================
   40b. PACKAGE CARDS
   Base styles for .card-package. Colour via scheme class in 40c.
   ========================================================================== */

.card-package {
    display: flex;
    flex-direction: row;
    background-color: var(--knip-warm-white);
    border-radius: var(--knip-radius);
    overflow: hidden;
    box-shadow: var(--knip-shadow-card);
    transition: box-shadow 0.2s ease;
}

.card-package:hover {
    box-shadow: var(--knip-shadow-card-hover);
}

.card-package .card-image {
    flex: 0 0 38%;
}

.card-package .card-body {
    flex: 1;
    padding: 12px 16px;
}

.card-package .card-head {
    padding: 12px 16px 10px;
}

.card-package .card-head h3,
.card-package .card-head h3 .elementor-heading-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.card-package .card-head h4,
.card-package .card-head h4 .elementor-heading-title {
    font-size: 19px;
    font-weight: 400;
    line-height: 1.25;
    font-style: italic;
    margin-bottom: 10px;
}

.card-package .card-strip {
    padding: 8px 16px;
    border-top: 1px solid var(--knip-stone);
}

.card-package .card-foot {
    padding: 10px 16px 14px;
    border-top: 1px solid var(--knip-stone);
}

.card-head .card-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.15;
    padding: 4px 10px;
    border-radius: 20px;
}

@media (max-width: 767px) {
    .card-package {
        flex-direction: column;
    }

    .card-package .card-image {
        width: 100%;
    }
}

/* ==========================================================================
   40c. PACKAGE CARD COLOUR SCHEMES
   Applied alongside .card-package. Card name = head colour.
   ========================================================================== */

/* WARM WHITE */
.card-warm-white .card-head {
    background-color: var(--knip-warm-white);
    border-bottom: 1px solid var(--knip-stone);
}
.card-warm-white .card-head h3,
.card-warm-white .card-head h3 .elementor-heading-title {
    color: var(--knip-deep-olive);
}
.card-warm-white .card-head h4,
.card-warm-white .card-head h4 .elementor-heading-title {
    color: var(--knip-olive);
}
.card-warm-white .card-head .card-pill {
    background-color: rgba(253, 251, 247, 0.92);
    color: var(--knip-olive);
    border: 1.5px solid var(--knip-warm-gray);
}
.card-warm-white .card-body,
.card-warm-white .card-foot {
    background-color: var(--knip-warm-white);
}
.card-warm-white .card-strip {
    background-color: #fbf8f2;
}

/* LIGHT GREEN */
.card-light-green .card-head {
    background-color: var(--knip-light-green);
    border-bottom: 1px solid #d7e2bf;
}
.card-light-green .card-head h3,
.card-light-green .card-head h3 .elementor-heading-title {
    color: var(--knip-olive);
}
.card-light-green .card-head h4,
.card-light-green .card-head h4 .elementor-heading-title {
    color: var(--knip-forest);
}
.card-light-green .card-head .card-pill {
    background-color: rgba(253, 251, 247, 0.88);
    color: var(--knip-deep-olive);
    border: 1.5px solid var(--knip-olive);
}
.card-light-green .card-body,
.card-light-green .card-foot {
    background-color: var(--knip-warm-white);
}
.card-light-green .card-strip {
    background-color: #f1f6e7;
}

/* SAGE */
.card-sage .card-head {
    background-color: var(--knip-sage);
    border-bottom: 1px solid #c8d6aa;
}
.card-sage .card-head h3,
.card-sage .card-head h3 .elementor-heading-title {
    color: var(--knip-deep-olive);
}
.card-sage .card-head h4,
.card-sage .card-head h4 .elementor-heading-title {
    color: var(--knip-olive);
}
.card-sage .card-head .card-pill {
    background-color: rgba(244, 247, 236, 0.92);
    color: var(--knip-deep-olive);
    border: 1.5px solid var(--knip-olive);
}
.card-sage .card-body,
.card-sage .card-foot {
    background-color: var(--knip-warm-white);
}
.card-sage .card-strip {
    background-color: #eef3e3;
}

/* DARK OLIVE */
.card-dark-olive .card-head {
    background-color: var(--knip-deep-olive);
    border-bottom: 1px solid #5a6130;
}
.card-dark-olive .card-head h3,
.card-dark-olive .card-head h3 .elementor-heading-title {
    color: var(--knip-warm-white) !important;
    letter-spacing: 0.04em;
}
.card-dark-olive .card-head h4,
.card-dark-olive .card-head h4 .elementor-heading-title {
    color: var(--knip-sage);
}
.card-dark-olive .card-head .card-pill {
    background-color: rgba(67, 72, 37, 0.16);
    color: var(--knip-leaf);
    border: 1.5px solid var(--knip-leaf);
}
.card-dark-olive .card-body,
.card-dark-olive .card-foot {
    background-color: var(--knip-warm-white);
}
.card-dark-olive .card-strip {
    background-color: #f2f5ea;
}

/* CLAY */
.card-clay .card-head {
    background-color: var(--knip-clay);
    border-bottom: 1px solid #c7a89c;
}
.card-clay .card-head h3,
.card-clay .card-head h3 .elementor-heading-title {
    color: var(--knip-warm-white);
}
.card-clay .card-head h4,
.card-clay .card-head h4 .elementor-heading-title {
    color: #f5e7e1;
}
.card-clay .card-head .card-pill {
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--knip-warm-white);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.card-clay .card-body,
.card-clay .card-foot {
    background-color: var(--knip-warm-white);
}
.card-clay .card-strip {
    background-color: #f6ebe6;
}

/* ==========================================================================
   40d. PACKAGE CARD BORDER MODIFIERS
   Add alongside card scheme class on the outermost card container.

   Full borders (all four sides):
     card-border-thin-[color] / card-border-thick-[color]

   Panel-only borders (image-side borderless, text panel bordered):
     card-border-img-left-[width]-[color]   → border on right text panel
     card-border-img-right-[width]-[color]  → border on left text panel
     card-border-img-top-[width]-[color]    → border on bottom panel

   Thin = 1px · Thick = 4px
   Colors: leaf, sage, dark, forest, stone, terra
   ========================================================================== */

.card-border-thin-leaf   { --card-border-width: 1px; --card-border-color: var(--knip-leaf); }
.card-border-thick-leaf  { --card-border-width: 4px; --card-border-color: var(--knip-leaf); }
.card-border-thin-sage   { --card-border-width: 1px; --card-border-color: var(--knip-sage); }
.card-border-thick-sage  { --card-border-width: 4px; --card-border-color: var(--knip-sage); }
.card-border-thin-dark   { --card-border-width: 1px; --card-border-color: var(--knip-deep-olive); }
.card-border-thick-dark  { --card-border-width: 4px; --card-border-color: var(--knip-deep-olive); }
.card-border-thin-forest { --card-border-width: 1px; --card-border-color: var(--knip-forest); }
.card-border-thick-forest{ --card-border-width: 4px; --card-border-color: var(--knip-forest); }
.card-border-thin-stone  { --card-border-width: 1px; --card-border-color: var(--knip-stone); }
.card-border-thick-stone { --card-border-width: 4px; --card-border-color: var(--knip-stone); }
.card-border-thin-terra  { --card-border-width: 1px; --card-border-color: var(--knip-terracotta); }
.card-border-thick-terra { --card-border-width: 4px; --card-border-color: var(--knip-terracotta); }

.card-border-img-left-thin-leaf,   .card-border-img-right-thin-leaf,   .card-border-img-top-thin-leaf   { --panel-border-width: 1px; --panel-border-color: var(--knip-leaf); }
.card-border-img-left-thick-leaf,  .card-border-img-right-thick-leaf,  .card-border-img-top-thick-leaf  { --panel-border-width: 4px; --panel-border-color: var(--knip-leaf); }
.card-border-img-left-thin-sage,   .card-border-img-right-thin-sage,   .card-border-img-top-thin-sage   { --panel-border-width: 1px; --panel-border-color: var(--knip-sage); }
.card-border-img-left-thick-sage,  .card-border-img-right-thick-sage,  .card-border-img-top-thick-sage  { --panel-border-width: 4px; --panel-border-color: var(--knip-sage); }
.card-border-img-left-thin-dark,   .card-border-img-right-thin-dark,   .card-border-img-top-thin-dark   { --panel-border-width: 1px; --panel-border-color: var(--knip-deep-olive); }
.card-border-img-left-thick-dark,  .card-border-img-right-thick-dark,  .card-border-img-top-thick-dark  { --panel-border-width: 4px; --panel-border-color: var(--knip-deep-olive); }
.card-border-img-left-thin-forest, .card-border-img-right-thin-forest, .card-border-img-top-thin-forest { --panel-border-width: 1px; --panel-border-color: var(--knip-forest); }
.card-border-img-left-thick-forest,.card-border-img-right-thick-forest,.card-border-img-top-thick-forest{ --panel-border-width: 4px; --panel-border-color: var(--knip-forest); }
.card-border-img-left-thin-stone,  .card-border-img-right-thin-stone,  .card-border-img-top-thin-stone  { --panel-border-width: 1px; --panel-border-color: var(--knip-stone); }
.card-border-img-left-thick-stone, .card-border-img-right-thick-stone, .card-border-img-top-thick-stone { --panel-border-width: 4px; --panel-border-color: var(--knip-stone); }
.card-border-img-left-thin-terra,  .card-border-img-right-thin-terra,  .card-border-img-top-thin-terra  { --panel-border-width: 1px; --panel-border-color: var(--knip-terracotta); }
.card-border-img-left-thick-terra, .card-border-img-right-thick-terra, .card-border-img-top-thick-terra { --panel-border-width: 4px; --panel-border-color: var(--knip-terracotta); }

/* Image left → border on right text panel only */
:is(
  .card-border-img-left-thin-leaf,  .card-border-img-left-thick-leaf,
  .card-border-img-left-thin-sage,  .card-border-img-left-thick-sage,
  .card-border-img-left-thin-dark,  .card-border-img-left-thick-dark,
  .card-border-img-left-thin-forest,.card-border-img-left-thick-forest,
  .card-border-img-left-thin-stone, .card-border-img-left-thick-stone,
  .card-border-img-left-thin-terra, .card-border-img-left-thick-terra
) > .e-con:last-child {
    border-right: var(--panel-border-width) solid var(--panel-border-color) !important;
    border-top: var(--panel-border-width) solid var(--panel-border-color) !important;
    border-bottom: var(--panel-border-width) solid var(--panel-border-color) !important;
    border-radius: 0 10px 10px 0 !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
}

/* Image right → border on left text panel only */
:is(
  .card-border-img-right-thin-leaf,  .card-border-img-right-thick-leaf,
  .card-border-img-right-thin-sage,  .card-border-img-right-thick-sage,
  .card-border-img-right-thin-dark,  .card-border-img-right-thick-dark,
  .card-border-img-right-thin-forest,.card-border-img-right-thick-forest,
  .card-border-img-right-thin-stone, .card-border-img-right-thick-stone,
  .card-border-img-right-thin-terra, .card-border-img-right-thick-terra
) > .e-con:first-child {
    border-left: var(--panel-border-width) solid var(--panel-border-color) !important;
    border-top: var(--panel-border-width) solid var(--panel-border-color) !important;
    border-bottom: var(--panel-border-width) solid var(--panel-border-color) !important;
    border-radius: 10px 0 0 10px !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
}

/* Image top → border on bottom panel only */
:is(
  .card-border-img-top-thin-leaf,  .card-border-img-top-thick-leaf,
  .card-border-img-top-thin-sage,  .card-border-img-top-thick-sage,
  .card-border-img-top-thin-dark,  .card-border-img-top-thick-dark,
  .card-border-img-top-thin-forest,.card-border-img-top-thick-forest,
  .card-border-img-top-thin-stone, .card-border-img-top-thick-stone,
  .card-border-img-top-thin-terra, .card-border-img-top-thick-terra
) > .e-con:last-child {
    border-left: var(--panel-border-width) solid var(--panel-border-color) !important;
    border-right: var(--panel-border-width) solid var(--panel-border-color) !important;
    border-bottom: var(--panel-border-width) solid var(--panel-border-color) !important;
    border-radius: 0 0 10px 10px !important;
    overflow: hidden !important;
    background-clip: padding-box !important;
}

/* ==========================================================================
   40e. SERVICE CARDS (etusivu — primary service category navigation)
   ========================================================================== */

.service-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--knip-warm-white);
    border: 1px solid rgba(101, 104, 57, 0.35) !important;
    border-radius: var(--knip-radius) !important;
    box-shadow: 0 2px 8px rgba(67, 72, 37, 0.10);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(67, 72, 37, 0.22);
    border-color: rgba(101, 104, 57, 0.6) !important;
}

.service-card > .card-img {
    margin-bottom: 0 !important;
}

.service-card > .card-img .elementor-widget-container {
    padding: 0 !important;
    line-height: 0;
}

.service-card > .card-img img {
    width: 100%;
    height: auto;
    display: block;
}

.service-card > .card-body {
    flex: 1 !important;
    padding: 18px 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.service-card > .card-body .elementor-widget {
    margin-bottom: 0 !important;
}

.service-card > .card-body .elementor-widget-container {
    padding: 0 !important;
}

.service-card > .card-body .elementor-widget-heading .elementor-heading-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--knip-deep-olive);
    line-height: 1.25;
    margin: 0;
}

.service-card > .card-body .elementor-widget-text-editor p,
.service-card > .card-body .elementor-widget-text-editor li {
    font-size: 1rem;
    color: var(--knip-text);
    line-height: 1.65;
    margin: 0;
}

.service-card > .card-body .elementor-widget-text-editor ul {
    margin-top: 4px;
    margin-bottom: 0;
    padding-left: 1.4em;
}

.service-card > .card-foot {
    background-color: var(--knip-warm-white) !important;
    padding: 14px 20px !important;
}

.service-card > .card-foot .elementor-widget {
    margin-bottom: 0 !important;
}

.service-card > .card-foot .elementor-widget-container {
    padding: 0 !important;
}

.service-card > .card-foot .elementor-button-wrapper {
    width: 100%;
}

.service-card > .card-foot .elementor-button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--knip-leaf);
    color: #2d3a10;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.service-card > .card-foot .elementor-button:hover {
    background-color: var(--knip-forest);
    color: var(--knip-warm-white);
}

/* ==========================================================================
   40f. ACCOMMODATION CARDS (majoitus — property hub cards)
   ========================================================================== */

.accommodation-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--knip-warm-white);
    border: 1px solid rgba(101, 104, 57, 0.35) !important;
    border-radius: var(--knip-radius) !important;
    box-shadow: 0 2px 8px rgba(67, 72, 37, 0.10);
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.accommodation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(67, 72, 37, 0.22);
    border-color: rgba(101, 104, 57, 0.6) !important;
}

.accommodation-card > .card-img {
    margin-bottom: 0 !important;
}

.accommodation-card > .card-img .elementor-widget-container {
    padding: 0 !important;
    line-height: 0;
}

.accommodation-card > .card-img img {
    width: 100%;
    height: auto;
    display: block;
}

.accommodation-card > .card-body {
    flex: 1 !important;
    padding: 18px 20px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.accommodation-card > .card-body .elementor-widget {
    margin-bottom: 0 !important;
}

.accommodation-card > .card-body .elementor-widget-container {
    padding: 0 !important;
}

.accommodation-card > .card-body .card-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--knip-forest);
}

.accommodation-card > .card-body .elementor-widget-heading .elementor-heading-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--knip-deep-olive);
    line-height: 1.25;
    margin: 0;
}

.accommodation-card > .card-body .elementor-widget-text-editor p {
    font-size: 1rem;
    color: var(--knip-text);
    line-height: 1.65;
    margin: 0;
}

.accommodation-card > .card-body .elementor-widget-text-editor ul {
    list-style: none;
    padding-left: 0;
    margin-top: 4px;
    margin-bottom: 0;
}

.accommodation-card > .card-body .elementor-widget-text-editor li {
    font-size: 1rem;
    color: var(--knip-text);
    line-height: 1.65;
    padding-left: 16px;
    position: relative;
}

.accommodation-card > .card-body .elementor-widget-text-editor li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--knip-leaf);
}

.accommodation-card > .card-foot {
    background-color: var(--knip-warm-white) !important;
    padding: 10px 20px 16px !important;
}

.accommodation-card > .card-foot .elementor-widget {
    margin-bottom: 0 !important;
}

.accommodation-card > .card-foot .elementor-widget-container {
    padding: 0 !important;
}

.accommodation-card > .card-foot .elementor-button-wrapper {
    width: 100%;
}

.accommodation-card > .card-foot .elementor-button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--knip-leaf);
    color: #2d3a10;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.accommodation-card > .card-foot .elementor-button:hover {
    background-color: var(--knip-forest);
    color: var(--knip-warm-white);
}

.accommodation-cards {
    max-width: 1200px !important;
}

.accommodation-card > .card-img img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   50. REUSABLE CONTENT BLOCKS
   CTA blocks and reusable non-page-specific UI components.
   ========================================================================== */

/* ==========================================================================
   50a. CTA CONTACT FORM — section-cta-contact
   ========================================================================== */

.section-cta-contact { padding-top: 48px; padding-bottom: 48px; }

.section-cta-contact .wpforms-container {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.section-cta-contact .wpforms-field { margin-bottom: 12px !important; }
.section-cta-contact .wpforms-field-label { margin-bottom: 4px !important; font-size: 15px !important; }
.section-cta-contact .wpforms-form textarea { min-height: 120px !important; max-height: 180px !important; }

.section-dark-olive .section-cta-contact .wpforms-field-label {
    color: var(--knip-sage) !important;
}

@media (max-width: 1024px) {
    .section-cta-contact { padding-top: 36px; padding-bottom: 36px; }
}

/* ==========================================================================
   50b. INTRO SECTION
   Sub-hero lead text block. Reusable below hero on any page.
   ========================================================================== */

.section-intro {
    padding: 80px 40px;
}

.section-intro .intro-content {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    gap: 0 !important;
}

.section-intro .intro-content .elementor-widget {
    margin-bottom: 0 !important;
}

.section-intro .intro-content .elementor-widget-container {
    padding: 0 !important;
}

.section-intro .intro-content .elementor-widget-heading {
    margin-bottom: 32px !important;
}

.section-intro .intro-content .elementor-widget-heading .elementor-heading-title {
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    line-height: 1.25;
    color: var(--knip-deep-olive);
    margin: 0;
}

.section-intro .intro-content .elementor-widget-text-editor {
    margin-bottom: 44px !important;
}

.section-intro .intro-content .elementor-widget-text-editor p {
    font-size: 1.15rem;
    line-height: 1.75;
    color: var(--knip-text);
    margin: 0;
}

@media (max-width: 767px) {
    .section-intro {
        padding: 48px 24px;
    }

    .section-intro .intro-content .elementor-widget-heading .elementor-heading-title {
        font-size: 1.5rem;
    }

    .section-intro .intro-content .elementor-widget-text-editor p {
        font-size: 1rem;
    }
}
/* ==========================================================================
   90. FOOTER
   Container-based footer
   Main footer container: "knip-footer knip-footer-main"
   Legal bar container:   "knip-footer knip-footer-legal"
   ========================================================================== */

.knip-footer,
.knip-footer-main,
.knip-footer-legal {
    background-color: var(--knip-deep-olive) !important;
}

/* Reset wrappers */
.knip-footer > .e-con,
.knip-footer .e-con,
.knip-footer .e-con-inner,
.knip-footer > .elementor-container,
.knip-footer .elementor-column,
.knip-footer .elementor-widget-wrap {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Base text */
.knip-footer,
.knip-footer p,
.knip-footer li,
.knip-footer span,
.knip-footer .elementor-widget-container,
.knip-footer .elementor-widget-text-editor,
.knip-footer .elementor-widget-text-editor p {
    color: var(--knip-light-green) !important;
}

/* Links */
.knip-footer a {
    color: var(--knip-light-green) !important;
    text-decoration: none !important;
}

.knip-footer a:hover {
    color: #C4D38A !important;
    text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   Heading hierarchy
   h3 = contact heading
   h4 = social headings
   -------------------------------------------------------------------------- */

.knip-footer .elementor-widget-heading h3.elementor-heading-title,
.knip-footer h3.elementor-heading-title,
.knip-footer h3 {
    color: var(--knip-warm-white) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    margin: 0 0 6px 0 !important;
}

.knip-footer .elementor-widget-heading h4.elementor-heading-title,
.knip-footer h4.elementor-heading-title,
.knip-footer h4 {
    color: var(--knip-leaf) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin: 0 0 10px 0 !important;
}

/* Safety override against global heading styles */
.knip-footer .elementor-widget-heading .elementor-heading-title {
    font-family: "serenity", system-ui, sans-serif !important;
}

/* --------------------------------------------------------------------------
   Main footer spacing
   -------------------------------------------------------------------------- */

.knip-footer-main > .e-con,
.knip-footer-main > .e-con-inner,
.knip-footer-main .e-con-inner:first-child {
    padding-top: 42px !important;
    padding-bottom: 28px !important;
}

/* --------------------------------------------------------------------------
   Brand mark
   -------------------------------------------------------------------------- */

.footer-brand-mark {
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 10px;
}

.footer-brand-mark .elementor-widget-image,
.footer-brand-mark .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

.footer-brand-mark .elementor-widget-image img {
    display: block;
    width: 95px;
    max-width: 100%;
    height: auto;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Contact block
   -------------------------------------------------------------------------- */

.footer-contact-block {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
}

/* Fixed icon column so location + email align to same text edge */
.footer-contact-row .elementor-widget-icon {
    flex: 0 0 24px;
    width: 24px;
    max-width: 24px;
    margin: 0 !important;
    padding: 2px 0 0 0 !important;
}

.footer-contact-row .elementor-widget-icon .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

.footer-contact-row .elementor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--knip-leaf) !important;
    fill: var(--knip-leaf) !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.footer-contact-row .elementor-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: var(--knip-leaf) !important;
}

.footer-contact-row .elementor-widget-text-editor,
.footer-contact-row .elementor-widget-text-editor .elementor-widget-container,
.footer-contact-row .elementor-widget-text-editor p {
    margin: 0 !important;
    padding: 0 !important;
}

.knip-footer .footer-contact-row .elementor-widget-text-editor,
.knip-footer .footer-contact-row .elementor-widget-text-editor p,
.knip-footer .footer-contact-row .elementor-widget-text-editor a {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: var(--knip-light-green) !important;
}

.knip-footer .footer-contact-row .elementor-widget-text-editor a:hover {
    color: #C4D38A !important;
    text-decoration: underline !important;
}

.footer-email-row {
    margin-top: 6px !important;
}

/* --------------------------------------------------------------------------
   Social icon lists
   -------------------------------------------------------------------------- */

.knip-footer .elementor-widget-icon-list .elementor-icon-list-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.knip-footer .elementor-widget-icon-list .elementor-icon-list-item {
    margin: 0 !important;
    padding: 0 !important;
}

.knip-footer .elementor-widget-icon-list .elementor-icon-list-item a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.knip-footer .elementor-widget-icon-list .elementor-icon-list-icon {
    margin: 0 !important;
    padding: 0 !important;
}

.knip-footer .elementor-widget-icon-list .elementor-icon-list-icon svg,
.knip-footer .elementor-widget-icon-list .elementor-icon-list-icon i {
    color: var(--knip-leaf) !important;
    fill: var(--knip-leaf) !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    transition: color 0.2s ease !important;
}

.knip-footer .elementor-widget-icon-list .elementor-icon-list-text {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: var(--knip-light-green) !important;
}

.knip-footer .elementor-widget-icon-list .elementor-icon-list-item a:hover .elementor-icon-list-icon svg,
.knip-footer .elementor-widget-icon-list .elementor-icon-list-item a:hover .elementor-icon-list-icon i {
    color: #C4D38A !important;
    fill: #C4D38A !important;
}

.knip-footer .elementor-widget-icon-list .elementor-icon-list-item a:hover .elementor-icon-list-text {
    color: #C4D38A !important;
}

/* --------------------------------------------------------------------------
   Divider logic
   -------------------------------------------------------------------------- */

.knip-footer-main::before {
    content: none !important;
    display: none !important;
}

.knip-footer-legal::before {
    content: "";
    display: block;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--knip-deep-olive),
        var(--knip-leaf) 40%,
        var(--knip-olive) 60%,
        var(--knip-deep-olive)
    );
}

/* --------------------------------------------------------------------------
   Legal bar
   -------------------------------------------------------------------------- */

.knip-footer-legal > .e-con,
.knip-footer-legal > .e-con-inner,
.knip-footer-legal .e-con-inner:first-child {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

.footer-legal,
.footer-legal p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--knip-warm-gray) !important;
    text-align: center !important;
}

.footer-legal a {
    color: var(--knip-warm-gray) !important;
    text-decoration: none !important;
}

.footer-legal a:hover {
    color: var(--knip-leaf) !important;
    text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1024px) {
    .knip-footer-main > .e-con,
    .knip-footer-main > .e-con-inner,
    .knip-footer-main .e-con-inner:first-child {
        gap: 36px !important;
        padding-top: 38px !important;
        padding-bottom: 26px !important;
    }

    .footer-brand-mark {
        padding-top: 6px !important;
    }

    .footer-brand-mark .elementor-widget-image img {
        width: 88px !important;
    }

    .knip-footer .elementor-widget-heading h3.elementor-heading-title,
    .knip-footer h3.elementor-heading-title,
    .knip-footer h3 {
        font-size: 15px !important;
        letter-spacing: 0.06em !important;
        margin-bottom: 6px !important;
    }

    .knip-footer .elementor-widget-heading h4.elementor-heading-title,
    .knip-footer h4.elementor-heading-title,
    .knip-footer h4 {
        font-size: 12px !important;
        letter-spacing: 0.02em !important;
        margin-bottom: 8px !important;
        white-space: nowrap !important;
    }

    .knip-footer .footer-contact-row .elementor-widget-text-editor,
    .knip-footer .footer-contact-row .elementor-widget-text-editor p,
    .knip-footer .footer-contact-row .elementor-widget-text-editor a,
    .knip-footer .elementor-widget-icon-list .elementor-icon-list-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .knip-footer .elementor-widget-icon-list .elementor-icon-list-items {
        gap: 8px !important;
    }

    .knip-footer .elementor-widget-icon-list .elementor-icon-list-item a {
        gap: 8px !important;
    }

    .knip-footer .elementor-widget-icon-list .elementor-icon-list-icon svg,
    .knip-footer .elementor-widget-icon-list .elementor-icon-list-icon i {
        width: 17px !important;
        height: 17px !important;
        font-size: 17px !important;
    }

    .footer-contact-row .elementor-widget-icon {
        flex: 0 0 22px;
        width: 22px;
        max-width: 22px;
    }

    .footer-contact-row .elementor-icon {
        font-size: 17px !important;
    }

    .footer-contact-row .elementor-icon svg {
        width: 17px !important;
        height: 17px !important;
    }

    .footer-email-row {
        margin-top: 5px !important;
    }

    .knip-footer-legal > .e-con,
    .knip-footer-legal > .e-con-inner,
    .knip-footer-legal .e-con-inner:first-child {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }

    .footer-legal,
    .footer-legal p {
        font-size: 12px !important;
    }
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    .knip-footer-main > .e-con,
    .knip-footer-main > .e-con-inner,
    .knip-footer-main .e-con-inner:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 28px !important;
        padding-top: 30px !important;
        padding-bottom: 22px !important;
    }

    .knip-footer-main > .e-con > .e-con,
    .knip-footer-main > .e-con-inner > .e-con,
    .knip-footer-main .e-con-inner:first-child > .e-con {
        width: 100% !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }

    .footer-brand-mark {
        padding-top: 0 !important;
    }

    .footer-brand-mark .elementor-widget-image img {
        width: 80px !important;
    }

    .footer-contact-block {
        gap: 12px !important;
    }

    .footer-contact-row {
        gap: 12px !important;
    }

    .footer-contact-row .elementor-widget-icon {
        flex: 0 0 22px;
        width: 22px;
        max-width: 22px;
        padding-top: 2px !important;
    }

    .knip-footer .elementor-widget-heading h3.elementor-heading-title,
    .knip-footer h3.elementor-heading-title,
    .knip-footer h3 {
        font-size: 15px !important;
        margin-bottom: 4px !important;
    }

    .knip-footer .elementor-widget-heading h4.elementor-heading-title,
    .knip-footer h4.elementor-heading-title,
    .knip-footer h4 {
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .knip-footer .footer-contact-row .elementor-widget-text-editor,
    .knip-footer .footer-contact-row .elementor-widget-text-editor p,
    .knip-footer .footer-contact-row .elementor-widget-text-editor a,
    .knip-footer .elementor-widget-icon-list .elementor-icon-list-text {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    .knip-footer .elementor-widget-icon-list .elementor-icon-list-items {
        gap: 8px !important;
    }

    .footer-email-row {
        margin-top: 4px !important;
    }

    .knip-footer-legal > .e-con,
    .knip-footer-legal > .e-con-inner,
    .knip-footer-legal .e-con-inner:first-child {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .footer-legal,
    .footer-legal p {
        font-size: 12px !important;
        line-height: 1.45 !important;
    }
}