/* Global base — reset + body + LiveChat overrides.
   Everything else lives in /assets/css/components/ — see fonts.css, header.css,
   sidebar.css, footer.css, content-wrap.css, content-base/elements/extras.css,
   hero.css, calculator.css. */

/* Brand colours — single source of truth. Use var(--brand-green) for every
   primary green and var(--brand-green-dark) for darker/hover greens.
   (Teal #2f828c and the golds are separate accents, kept as-is.) */
:root {
    --brand-green: #127749;
    --brand-green-dark: #0b3e27;
    --brand-gold: #eed6a3;        /* light gold — accents (sticky menu, etc.) */
    --brand-gold-dark: #785813;   /* dark gold/brown — text (breadcrumbs, etc.) */
    --brand-tan: #bda98a;         /* muted tan — .wrap-border frame + title underline */

    /* Semantic aliases — use these for "brand highlight" intent. Primary =
       green, secondary = readable dark gold. */
    --brand-primary: var(--brand-green);
    --brand-secondary: var(--brand-gold-dark);
}

/* Utility: hide elements (content + chrome). */
.hidden { display: none !important; }

/* Text-align utilities — global (usable anywhere: content, tables, cells). */
.text-left    { text-align: left !important; }
.text-right   { text-align: right !important; }
.text-center  { text-align: center !important; }
.text-justify { text-align: justify !important; }

/* Inline text utilities — global, general-purpose. Usable on any inline or
   block text bit (span, p, li, part of a heading):
   .highlighted           → brand primary (green) emphasis
   .highlighted-secondary → brand secondary (gold) emphasis
   .bold                  → bold weight (700)
   .semibold              → semi-bold weight (600)
   .smaller               → 80% size (relative, so it scales inside headings —
                            e.g. the parenthetical part of an h3 title). */
.highlighted           { color: var(--brand-primary); }
.highlighted-secondary { color: var(--brand-secondary); }
.bold                  { font-weight: 700; }
.semibold              { font-weight: 600; }
.smaller               { font-size: 80%; }

/* Responsive show/hide utilities — mirror live. Used by the left menu's
   duplicate desktop/mobile anchors AND by content (<br class="xs-visible">
   line breaks that only apply on mobile). Must live HERE (loaded on every
   page): while they sat in the disabled content-base.css both menu anchor
   variants rendered, duplicating every sidebar item. */
.xs-visible { display: none !important; }
@media (max-width: 600px) {
    .xs-visible { display: block !important; }
    .xs-hidden { display: none !important; }
}

/* ============================================================================
   .img-placeholder — graceful fallback for a content image that fails to load
   (missing/404 source). main.js swaps the broken <img> for this branded box so
   the visitor never sees the browser's broken-image chrome. It fills its
   container (the .img-wrap keeps the intended box size), shows a photo icon and
   the image's alt text as a caption.
   ============================================================================ */
.img-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    min-height: 160px;
    padding: 20px;
    text-align: center;
    background:
        repeating-linear-gradient(45deg, rgba(189,169,138,.06) 0 12px, rgba(189,169,138,.12) 12px 24px),
        #f6f4ee;
    border: 1px dashed var(--brand-tan);
    border-radius: 8px;
    color: #9a927f;
    overflow: hidden;
}
.img-placeholder i {
    font-size: clamp(28px, 5vw, 44px);
    color: var(--brand-green);
    opacity: .45;
}
.img-placeholder span {
    font-size: 13px;
    line-height: 1.35;
    max-width: 90%;
    color: #8a8378;
}
/* inside a fixed-height image wrap, fill it exactly */
.img-wrap > .img-placeholder { min-height: 0; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Poppins', Arial, Helvetica, sans-serif; color: #394b4e; line-height: 1.6; }
/* NOTE: overflow-x:hidden removed 2026-05-25 — it was masking the real "cut-off-
   on-right" bug Yevhen kept reporting. Wide elements (slick-track etc.) were
   being silently clipped at the body edge so DevTools showed scrollWidth ==
   clientWidth even though content was actually overflowing. Each overflow
   source must now be fixed at its own level (overflow:hidden on the wrapper
   that owns it — e.g. .icon-slider already has it for the slick carousel). */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }



/* Content */
#content {
    min-height: 60vh;
    background: #ffffff;
    position: relative;
}

/* LiveChat widget custom styling */
#lhc_status_container #status-icon {
    background-color: var(--brand-green) !important;
    border-color: #272727 !important;
}

/* Hide the LiveAgent corner "Live-Chat" peel button. We open the chat from our
   own .live-chat buttons, which fire a programmatic .click() on this element —
   that still works while it's invisible (native/synthetic click ignores
   visibility). opacity + pointer-events keep it in the DOM and clickable but
   visually gone and non-blocking; the chat popup opens as a separate element. */
div[id^="b_"][title="Live chat button"] {
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ============================================================================
   .intro-splash — branded green splash intro (centred, white copy on the brand
   green gradient, gold subtitle). General, language-neutral name (renamed from
   the old Cyprus-specific `.cy-intro`). Used by the EN/ES home intro and any
   page that opens with a full-width green statement.
   ============================================================================ */
.intro-splash {
    background: var(--brand-green);
    background-image: linear-gradient(160deg, #1f8253 0%, #135c3a 100%);
    color: #fff;
    padding: 72px 24px 96px;
}
.intro-splash__inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.intro-splash .intro-splash__title {
    color: #fff !important;
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.2;
    margin: 42px 0 12px;
}
.intro-splash__subtitle {
    color: var(--brand-gold);
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 600;
    margin: 0 0 30px;
}
/* Slogan-image variant of the subtitle (the same gold slogan lock-up used in
   the header). Centres the image at a comfortable size on the green splash. */
.intro-splash__subtitle--img {
    margin: 8px auto 30px;
}
.intro-splash__subtitle--img img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 360px;
    height: auto;
}
.intro-splash p {
    color: rgba(255, 255, 255, .92);
    font-size: 17px;
    line-height: 1.7;
    margin: 0 auto 18px;
    max-width: 680px;
    text-align: justify;
    hyphens: auto;
}
.intro-splash strong,
.intro-splash b { color: #fff; font-weight: 700; }

/* ---- Calendly popup overlay — ported 1:1 from live (child theme "calendly
   fixes"). Darkens the backdrop, repositions the native close button, and adds
   the white-X close affordance on the popup content. ---- */
.calendly-overlay .calendly-close-overlay {
    background-color: #000000;
    opacity: 0.7;
}
body .calendly-overlay .calendly-popup-close {
    top: calc(50% - 350px) !important;
    left: calc(50% + 500px);
    transform: translate(-50%, -50%);
}
@media (max-width: 975px) {
    body .calendly-overlay .calendly-popup-close {
        right: 15px !important;
        top: 15px !important;
        left: auto;
        transform: unset;
    }
}
.calendly-overlay .calendly-popup .calendly-popup-content {
    position: relative;
}
.calendly-overlay .calendly-popup .calendly-popup-content:after {
    cursor: pointer;
    position: absolute;
    right: 25px;
    top: 25px;
    content: "";
    display: inline-block;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cline x1='4' y1='4' x2='16' y2='16' stroke='white' stroke-width='3.5' stroke-linecap='round'/%3E%3Cline x1='16' y1='4' x2='4' y2='16' stroke='white' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (max-width: 975px) {
    .calendly-overlay .calendly-popup .calendly-popup-content:after {
        right: 15px;
        top: -34px;
    }
}