/* CLA Global brand CSS custom properties (used throughout claglobal.css / cla-style.css / cla-memberuplift.css) */
:root, body {
    --wp--preset--color--cla-primary: #2D3C59;
    --wp--preset--color--cla-secondary: #7DD2D3;
    --wp--preset--color--cla-dark: #393939;
    --wp--preset--color--cla-off-white: #F7F7F6;
    --wp--preset--color--cla-dark-blue: #2E334E;
    --wp--preset--color--cla-dark-grey: #ABAEAB;
    --wp--preset--color--cla-black: #000000;
    --wp--preset--color--cla-blue-tint: #F3FBFB;
    --wp--preset--color--cla-blue-tint-strong: #DCF3F3;
    --wp--preset--color--cla-white: #ffffff;
    --wp--preset--color--cla-riptide: #39A5A7;
    --wp--preset--color--cla-riptide-2: #2A787A;
    --wp--preset--color--cla-riptide-3: #DCF3F3;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--style--global--content-size: 1140px;
    --wp--style--global--wide-size: 1140px;
}

/* WP block layout fallbacks (no WP runtime present in static export) */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}
.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }
.is-layout-flex { display: flex; flex-wrap: wrap; align-items: center; }
.wp-block-buttons { display: flex; justify-content: center; }

/* Language toggle */
html[data-lang="bg"] [data-lang-content="en"] { display: none !important; }
html[data-lang="en"] [data-lang-content="bg"] { display: none !important; }

.lang-switch { display: flex; align-items: center; gap: 6px; margin-right: 8px; font-family: "Museo Sans"; font-size: 14px; }
.lang-switch .lang-sep { color: #abaeab; }
.lang-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
    font-family: "Museo Sans";
    font-size: 14px;
    font-weight: 400;
    color: #abaeab;
}
html[data-lang="bg"] .lang-btn[data-set-lang="bg"],
html[data-lang="en"] .lang-btn[data-set-lang="en"] {
    color: #2e334e;
    font-weight: 700;
    text-decoration: underline;
}

/* Logo sizing */
.footer__logo img { height: 32px; width: auto; }

/* Force the hero video to stay visible on mobile — claglobal.css hides it
   below 768px in favor of a static .hero-video-image fallback we don't use.
   (.hero-group__inner already has min-height:400px !important from
   cla-memberuplift.css, so the video has room to render at every size.) */
.hero-video { display: block !important; }

/* Hero circulating photos (admin-uploaded, replace the default video). Stacked
   absolutely and crossfaded via .is-active (assets/custom.js runs the interval). */
.hero-group__inner .hero-slide-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease-in-out; z-index: 1; }
.hero-group__inner .hero-slide-image.is-active { opacity: 1; }

/* Hero stat cards — each card's top half overlaps the bottom edge of the hero
   image no matter its own height: the container sits flush with the image
   (no negative margin) and every card is shifted up by translateY(-50%),
   i.e. by exactly half of ITS OWN rendered height. Sizing is deliberately
   simple and fixed rather than flex-grow-based, so it stays predictable
   regardless of how many cards exist or what the neighboring cards are
   sized: no admin width -> fixed 180x180 square; an explicit width from the
   admin panel -> exactly that value, with auto height so multi-line text
   isn't clipped. (content.json "hero.stats") */
.hero-stats { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 16px; max-width: var(--wp--style--global--content-size); margin: 0 auto; padding-inline: 24px; position: relative; z-index: 20; }
.hero-stats__item { background: #fff; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 24px 20px; flex: 0 0 auto; width: 180px; aspect-ratio: 1; max-width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-50%); }
.hero-stats__text { font-weight: 700; color: #2e334e; line-height: 1.1; }
.hero-stats__label { font-size: 14px; color: #666; margin-top: 6px; }
@media (max-width: 767px) {
    .hero-stats { gap: 10px; }
    .hero-stats__item { padding: 16px 12px; flex: 1 1 45%; width: auto; }
}

/* "About us" section with an optional photo (admin panel, "about" section
   type, content.json sections[].image) — side-by-side like the sibling CLA
   network sites (e.g. cla.com.ro's "Where international ambition meets
   local intelligence"). Without an image the section falls back to the
   original centered, text-only layout (base theme .joinCla rules). */
.joinCla--with-image .container { display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: left; width: 100%; max-width: var(--wp--style--global--content-size); gap: 48px; }
/* Explicit placement, not left to grid auto-placement: with this base theme's
   other rules also in the cascade, plain source-order auto-placement put the
   image in column 2 / row 1 and the text in column 1 / row 2 instead of side
   by side — pinning both to row 1 in their intended column sidesteps it. */
.joinCla--with-image .joinCla__media { grid-column: 1; grid-row: 1; }
.joinCla--with-image .joinCla__body { grid-column: 2; grid-row: 1; }
.joinCla--with-image .container h2,
.joinCla--with-image .container p { text-align: left; }
.joinCla__media { min-height: 200px; }
.joinCla__media img { width: 100%; height: auto; display: block; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12); object-fit: cover; }
.joinCla--with-image .wp-block-buttons { justify-content: flex-start; }
@media (max-width: 900px) {
    .joinCla--with-image .container { grid-template-columns: 1fr; text-align: center; }
    .joinCla--with-image .joinCla__media,
    .joinCla--with-image .joinCla__body { grid-column: 1; }
    .joinCla--with-image .joinCla__media { grid-row: 1; }
    .joinCla--with-image .joinCla__body { grid-row: 2; }
    .joinCla--with-image .container h2,
    .joinCla--with-image .container p { text-align: center; }
    .joinCla--with-image .wp-block-buttons { justify-content: center; }
}

/* "Services" section — image-background cards with an always-visible title,
   like cla.com.ro's "Solutions for your growth". On hover/focus the whole
   card darkens solid and the title is replaced by the link text, centered
   over the full card. Admin-managed list (content.json sections[].items,
   type "services") with a per-card image, link text/url, and optional width
   — no width set means the cards share the row evenly, like the reference. */
.servicesSection { padding-block: 60px; }
.servicesSection__intro { max-width: 720px; margin: 12px auto 0; }
.servicesSection__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }
.serviceCard { position: relative; flex: 1 1 180px; max-width: 260px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; display: block; color: #fff; text-decoration: none; }
.serviceCard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.serviceCard__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; padding: 20px; background: linear-gradient(to top, rgba(46,51,78,.9) 0%, rgba(46,51,78,.35) 55%, rgba(46,51,78,0) 100%); transition: background .3s ease; }
.serviceCard__title { color: #fff !important; font-size: 20px; margin: 0; line-height: 1.2; }
/* Sits below the title in normal flow, collapsed to 0 height by default. The
   overlay is bottom-anchored (justify-content: flex-end), so growing this on
   hover pushes the title upward along with it instead of the two overlapping
   in place. */
.serviceCard__link { display: block; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease; }
.serviceCard:hover .serviceCard__overlay,
.serviceCard:focus-visible .serviceCard__overlay { background: rgba(46,51,78,.92); }
.serviceCard:hover .serviceCard__link,
.serviceCard:focus-visible .serviceCard__link { max-height: 150px; opacity: 1; margin-top: 10px; }
@media (max-width: 767px) {
    .servicesSection__grid { gap: 10px; }
    .serviceCard { flex: 1 1 45%; max-width: 47%; }
}

/* "Sectors" section — industry specialization carousel (Swiper, bundled in
   assets/swiper-bundle.min.*), like cla.com.ro's "Deep specialization in key
   sectors". 3 cards per view on desktop, admin-managed list with per-card
   icon and bar color (content.json sections[].items, type "sectors"). */
.sectorsSection { padding-block: 60px; }
.sectorsSwiper { overflow: hidden; margin-top: 40px; padding-bottom: 4px; }
.sectorCard { padding-top: 20px; height: 100%; }
.sectorCard__bar { height: 4px; border-radius: 2px; margin-bottom: 20px; }
.sectorCard__icon { width: 44px; height: 44px; margin-bottom: 16px; }
.sectorCard__icon svg { width: 100%; height: 100%; }
.sectorCard h3 { font-size: 22px; margin: 0 0 10px; }
.sectorCard p { color: #666; font-size: 16px; margin: 0; }
.sectorsSwiper__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.sectorsSwiper__nav .swiper-button-prev,
.sectorsSwiper__nav .swiper-button-next {
    position: static; margin: 0; width: 44px; height: 44px;
    border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #2e334e;
}
.sectorsSwiper__nav .swiper-button-prev::after,
.sectorsSwiper__nav .swiper-button-next::after { font-size: 16px; font-weight: 700; }
.sectorsSwiper__nav .swiper-button-disabled { opacity: .35; }

/* "Grow with us" section — edge-to-edge photo on the left, a solid color
   panel with heading/text/button on the right, like cla.com.ro. Admin-
   managed (content.json section type "grow": image, color, title/text,
   button). Falls back to stacked (photo on top) on narrow screens. */
.growSection { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.growSection__media { position: relative; min-height: 320px; }
.growSection__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.growSection__body { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 60px 6vw; }
.growSection__body h2 { margin: 0 0 20px; color: #2e334e; }
.growSection__body p { margin: 0 0 24px; color: #2e334e; }
.growSection__body .btn { margin: 0; }
@media (max-width: 767px) {
    .growSection { grid-template-columns: 1fr; }
    .growSection__media { min-height: 260px; }
    .growSection__body { padding: 40px 24px; align-items: center; text-align: center; }
}

/* "Testimonials" section — one client quote at a time, auto-rotating (Swiper,
   5.5s, loops) with the same circular arrow nav used by the sectors carousel,
   plus two decorative diagonal triangles in the corner like cla.com.ro.
   Admin-managed list (content.json sections[].items, type "testimonials"). */
.testimonialsSection {
    position: relative; min-height: calc(336px * var(--t-scale, 1));
    display: flex; align-items: center; padding-block: calc(48px * var(--t-scale, 1));
    background-color: rgba(171, 174, 171, .1);
    background-image: url("../images/quote-img.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
}
.testimonialsSection .container { position: relative; z-index: 1; width: 100%; }
.testimonialsSwiper { max-width: 620px; margin-left: 0; margin-right: auto; }
.testimonialCard { display: flex; align-items: flex-start; gap: calc(14px * var(--t-scale, 1)); }
.testimonialCard__quote {
    display: block; flex: 0 0 auto; margin-top: calc(5px * var(--t-scale, 1));
    width: calc(32px * var(--t-scale, 1)); height: calc(27px * var(--t-scale, 1));
}
.testimonialCard__body { min-width: 0; }
.testimonialCard__text { font-size: calc(22px * var(--t-scale, 1)) !important; color: #2e334e; line-height: 1.4; margin: 0 0 24px; }
.testimonialCard__author { font-weight: 700 !important; font-size: calc(16px * var(--t-scale, 1)); color: #2e334e; margin: 0; }
.testimonialCard__meta { font-weight: 400 !important; color: #999; font-size: calc(15px * var(--t-scale, 1)); margin: 4px 0 0; }
.testimonialsSwiper__nav { display: flex; gap: 10px; margin-top: calc(26px * var(--t-scale, 1)); }
.testimonialsSwiper__nav .swiper-button-prev,
.testimonialsSwiper__nav .swiper-button-next {
    position: static; margin: 0;
    width: calc(35px * var(--t-scale, 1)); height: calc(35px * var(--t-scale, 1));
    border-radius: 50%; border: 1px solid #ddd; background: #fff; color: #2e334e;
}
.testimonialsSwiper__nav .swiper-button-prev::after,
.testimonialsSwiper__nav .swiper-button-next::after { font-size: 16px; font-weight: 700; }
@media (max-width: 767px) {
    .testimonialsSection {
        background-image: url("../images/quote-img-mobile.svg");
        background-position: top left;
        background-size: 100%;
        opacity: 1;
    }
    .testimonialsSwiper { max-width: 100%; }
    .testimonialCard__text { font-size: calc(19px * var(--t-scale, 1)) !important; }
}

/* "Insights" section — grid of cards split by the triangle motif into a dark
   text panel and a photo, like cla.com.ro. Admin-managed list
   (content.json sections[].items, type "insights"). */
.insightsSection { padding-block: 70px; }
.insightsSection__title { font-size: 40px; color: #2e334e; margin-bottom: 40px; }
.insightsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.insightCard {
    position: relative; display: block; aspect-ratio: 1 / 1;
    border-radius: 12px; overflow: hidden; text-decoration: none;
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    transition: box-shadow .3s ease;
}
.insightCard:hover, .insightCard:focus-visible { box-shadow: 0 12px 28px rgba(0, 0, 0, .16); }
.insightCard__image {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.insightCard:hover .insightCard__image,
.insightCard:focus-visible .insightCard__image { transform: scale(1.03); }
/* The dark-panel + teal/blue triangle divider is the client's own graphic
   (images/insight-divider.png, transparent where the photo should show
   through) layered on top of the photo — not redrawn in CSS. */
.insightCard__divider {
    position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
    object-fit: cover; object-position: right; pointer-events: none;
}
.insightCard__panel {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: 28px 24px; text-align: left; overflow: hidden;
    transition: transform .5s ease;
}
.insightCard__body {
    max-width: 40%; transition: transform .5s ease; transform-origin: left top;
}
.insightCard:hover .insightCard__body,
.insightCard:focus-visible .insightCard__body { transform: scale(1.04); }
.insightCard__eyebrow {
    color: #7dd2d3 !important; font-size: 14px !important; margin: 0 0 6px;
    overflow-wrap: break-word;
}
.insightCard__title {
    color: #fff !important; font-size: 20px !important; line-height: 1.25 !important; margin: 0; font-family: inherit !important;
    overflow-wrap: break-word;
}
.insightCard__tag {
    color: #7dd2d3 !important; font-size: 13px !important; margin: 12px 0 0; max-width: 24%;
    overflow-wrap: break-word;
}
.insightsSection__cta { margin-top: 40px; }
@media (max-width: 991px) {
    .insightsGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .insightsGrid { grid-template-columns: 1fr; }
    .insightCard__body { max-width: 66%; }
    .insightCard__tag { max-width: 50%; }
    .insightCard__title { font-size: 22px !important; }
}

/* Contact section */
.contactSection { padding-block: 50px; background: rgba(171,174,171,.1); }
.contactCard { border-top: 5px solid #7dd2d3 !important; }
.contactCard .card-title { font-size: 20px; margin: 0 0 10px; }
.contactCard .card-text { margin: 0; }
.contactCard a { color: #2e334e !important; }

/* Bootstrap navbar brand/logo */
.navbar-brand.site-logo { padding: 0; }
/* cla-style.css has ".wp-site-blocks header .site-logo img { max-height: 95px !important }"
   (higher specificity than a plain .navbar-brand.site-logo img rule) which both caps the
   admin-configured size and — since max-height only ever shrinks, never enlarges an image
   past its natural pixel size — would silently ignore a larger value entirely. Using an
   explicit height (not max-height) with a selector specific enough to beat that rule is
   what makes the admin panel's logo-size setting actually take effect in both directions. */
.cla-header-row .navbar-brand.site-logo { align-self: var(--cla-header-logo-align, center); }
.cla-header-row .navbar-brand.site-logo img { height: var(--cla-header-logo-height, 56px) !important; max-height: none !important; width: auto !important; }
.navbar .nav-link { color: #2e334e; font-weight: 500; }
.navbar .nav-link:hover { color: #2a787a; }
.navbar .nav-item .btn { margin: 0; }

/* .wp-block-template-part has display:flex (row) from the theme CSS — harmless
   with a single block-level child. */
.cla-header-inner { display: block; width: 100%; background: #fff; border-bottom: 2px solid #eee; }

/* Header content is centered in a max-width column, like claglobal.com —
   not stretched edge-to-edge across a wide monitor. */
.cla-header-container { max-width: var(--wp--style--global--content-size); margin: 0 auto; padding-inline: 24px; }

/* Single row on desktop: logo left, menu + language switch right (admin-configurable
   height/logo size/logo position/font via the --cla-header-* custom properties set
   inline on .cla-header-inner from content.json's "header" key). */
.cla-header-row { min-height: var(--cla-header-height, 90px); }
.cla-header-row .navbar-nav .nav-link { padding-block: 8px; font-size: var(--cla-header-font-size, 16px); }
.cla-header-row .navbar-nav .nav-link,
.cla-header-row .lang-switch,
.cla-header-row .lang-btn { font-family: var(--cla-header-font, "Museo Sans"), sans-serif; }
.cla-header-row .lang-switch-item { display: flex; align-items: center; }

/* cla-style.css also sets header{position:fixed} (sized for the original multi-page
   theme's 130px-tall fixed header) plus a matching margin-top:130px !important on
   main to compensate. We use .cla-header-inner's own sticky-top instead, so the
   header must flow normally — otherwise main renders at y:0, hidden under it. */
header.wp-block-template-part { position: sticky !important; top: 0; z-index: 1020; height: auto !important; }
.wp-site-blocks main { margin-top: 0 !important; }

.lang-switch { margin-right: 0; }
/* .btn has margin:auto in cla-memberuplift.css (for centering in block contexts) —
   inside this flex row it would swallow all free space instead of hugging the
   right edge, so it needs to be reset to 0 here. */
.btn-topbar { margin: 0 !important; padding: 6px 16px !important; font-size: 13px !important; }

/* Footer centered on mobile */
@media (max-width: 767px) {
    footer .footer__container__wrapper { text-align: center; }
    footer .footer__container { align-items: center; }
    footer .footer__logo { text-align: center; }
    footer .social-icons { justify-content: center; }
}

/* Smaller footer type on all screen sizes (was inheriting the ~16-20px body size) */
footer h4 { font-size: 13px !important; }
footer p { font-size: 12px !important; line-height: 1.6 !important; }
footer .footer__container__link a { font-size: 12px !important; }

/* WP utility classes not present in static export */
.has-cla-dark-blue-background-color.has-background { background-color: #2E334E !important; }
.wp-block-cover__background.has-background-dim-10 { background-color: rgba(0,0,0,.1); position: absolute; inset: 0; }

/* Standalone subpage (content.json pages[].sections, index.php?page=<id>) —
   renders the exact same section types/markup as the homepage (see
   sections-render.php), just preceded by a small back-to-home link. The
   "not found" state (?page=<unmatched id>) keeps the older centered-notice
   look since it has no sections of its own to show. */
.subpage-back-wrap { padding-top: 24px; }
.subpage__back {
    display: inline-block; color: #2a787a !important;
    font-size: 14px; text-decoration: none;
}
.subpage__back:hover { text-decoration: underline; }
.subpage { padding-block: 60px; }
.subpage__inner { max-width: 760px; }
.subpage__title { color: #2e334e; font-size: 38px; line-height: 1.2; margin: 0 0 24px; }
.subpage__inner--notfound { text-align: center; padding-block: 40px; }
@media (max-width: 640px) {
    .subpage__title { font-size: 28px; }
}

/* ---- Rich text from the admin editor (cla-rich.php) ----
   Paragraphs keep the theme's own <p> styling (they're ordinary <p>s);
   only what the theme never styled — lists, bold weight, links — is set here. */
.cla-rich strong { font-weight: 700; }
.cla-rich u { text-decoration: underline; }
.cla-rich a { color: inherit; text-decoration: underline; }
.cla-rich-list { margin: 0 0 10px; padding-left: 1.4em; text-align: left; color: #2e334e; line-height: 1.5; }
ul.cla-rich-list { list-style: disc; }
ol.cla-rich-list { list-style: decimal; }
.cla-rich-list li { margin: 0 0 .35em; font-size: inherit; line-height: inherit; }
.cla-rich-list li:last-child { margin-bottom: 0; }
/* Lists take the same size/colour as the paragraph text of the section they sit in. */
.joinCla .container .cla-rich-list { color: #000; font-size: 18px; }
@media screen and (min-width: 576px) { .joinCla .container .cla-rich-list { font-size: calc(0.641025641vw + 14.3076923077px); } }
@media screen and (min-width: 1200px) { .joinCla .container .cla-rich-list { font-size: 22px; } }
.sectorCard .cla-rich-list { color: #666; font-size: 16px; margin: 0; }
.growSection__body .cla-rich-list { margin: 0 0 24px; }
.testimonialCard__body .cla-rich-list { font-size: calc(22px * var(--t-scale, 1)); line-height: 1.4; margin: 0 0 24px; }
@media (max-width: 781px) { .testimonialCard__body .cla-rich-list { font-size: calc(19px * var(--t-scale, 1)); } }
/* Centered sections: keep the bullets left-aligned to each other but center the whole list. */
.joinCla:not(.joinCla--with-image) .container .cla-rich-list,
.servicesSection .cla-rich-list { display: table; margin-left: auto; margin-right: auto; }