/* =========================================================================
   components.css — generic, reusable BEM components (loaded everywhere)
   STRUCTURE + neutral/light defaults only. Section-level theming (e.g. dark
   backgrounds) is applied by page files via section-scoped selectors.
   ========================================================================= */

/* ---- shared container helper for raw-HTML blocks inside Flatsome cols ---- */
.u-container{max-width:var(--container);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ----------------------------------------------------------------- Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-sans);font-size:15px;font-weight:600;line-height:1;
  letter-spacing:.01em;text-decoration:none;cursor:pointer;
  padding:14px 26px;border-radius:var(--radius-sm);border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn--primary{background:var(--c-brown);color:var(--c-cream)}
.btn--primary:hover{background:var(--c-brown-dark);color:var(--c-cream)}
.btn--ghost{background:transparent;color:var(--c-on-dark-strong);border-color:var(--c-line-dark-2)}
/* explicit hover colour — needed so Flatsome's own `a:hover` colour (higher
   specificity than a single class) can't override it to a dark, invisible tone */
.btn--ghost:hover{border-color:var(--c-terra);color:var(--c-terra)}
/* outline variant for LIGHT backgrounds (dark text + hairline border) */
.btn--outline{background:transparent;color:var(--c-ink-2);border-color:#cdbfa6}
.btn--outline:hover{border-color:var(--c-brown);color:var(--c-brown)}
.btn--block{display:flex;justify-content:center;width:100%}
.btn__icon{width:16px;height:16px;flex:none}

/* ------------------------------------------------------------- Phone link */
.phone{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-family:var(--f-sans);font-weight:600;font-size:15px}
.phone__icon{width:15px;height:15px;flex:none}

/* --------------------------------------------- Breadcrumbs (NavXT-driven) */
/* Structure only; per-hero colours set below by page-scoped rules. */
.jbv-crumbs{margin:0 0 24px}
.jbv-crumbs__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-family:var(--f-sans)}
.jbv-crumbs__list li{display:flex;align-items:center;gap:8px}
/* NavXT stamps post-type classes (.post/.post-page) on the crumb items, which
   otherwise inherit Flatsome's 30px post-list bottom margin — that inflated the
   flex line and dropped the margin-less "Acasă" item lower. Reset here. */
.jbv-crumbs__list li,.jbv-crumbs__list a,.jbv-crumbs__list span{margin:0;padding:0}
.jbv-crumbs__list li:not(:first-child)::before{content:"/";opacity:.55;flex:none}
.jbv-crumbs a{color:inherit;text-decoration:none}
.jbv-crumbs .current-item{color:inherit}
/* Dark heroes (services / individual service / contact) */
.srv-hero .jbv-crumbs,.svc-hero .jbv-crumbs,.ct-hero .jbv-crumbs{color:var(--c-muted)}
.srv-hero .jbv-crumbs a:hover,.svc-hero .jbv-crumbs a:hover,.ct-hero .jbv-crumbs a:hover{color:var(--c-terra)}
.srv-hero .jbv-crumbs .current-item,.svc-hero .jbv-crumbs .current-item,.ct-hero .jbv-crumbs .current-item{color:var(--c-terra)}
/* Light hero (About) */
.about-hero .jbv-crumbs{color:var(--c-muted-2)}
.about-hero .jbv-crumbs a:hover{color:var(--c-brown)}
.about-hero .jbv-crumbs .current-item{color:var(--c-brown)}

/* -------------------------------------------------- Nav menu (link list) */
/* Own block (NOT .menu) so it never collides with WP/Flatsome nav menus. */
.navmenu{display:flex;flex-direction:column}
.navmenu__link{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;padding:8px 0}

/* ----------------------------------------------------------------- Eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-sans);font-size:11.5px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--c-terra);
}
.eyebrow--center{justify-content:center}
.eyebrow__line{width:16px;height:1px;background:linear-gradient(90deg,transparent,var(--c-terra));flex:none}
.eyebrow__diamond{width:6px;height:6px;border:1.4px solid var(--c-terra);transform:rotate(45deg);flex:none}

/* ------------------------------------------------------------ Section head */
.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
.section-head--center{align-items:center;text-align:center;margin-bottom:40px}
.section-head__title{font-family:var(--f-serif);font-size:30px;font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--c-ink-2);margin:0}

/* --------------------------------------------------------------- Checklist */
.checklist{display:flex;flex-direction:column;gap:18px}
.checklist__label{font-family:var(--f-sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--c-muted)}
.checklist__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.checklist__item{display:flex;gap:12px;align-items:flex-start}
.checklist__mark{width:8px;height:8px;background:var(--c-terra);transform:rotate(45deg);margin-top:6px;flex:none}
.checklist__text{font-size:14.5px;line-height:1.45}

/* ------------------------------------------------------------- Card / grid */
.cardgrid{display:grid;gap:14px}
.cardgrid--cols-2{grid-template-columns:repeat(2,1fr)}
.cardgrid--cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--c-white);border:1px solid var(--c-card-line);border-radius:var(--radius);padding:20px 22px;display:flex;flex-direction:column;gap:7px}
.card__icon{width:34px;height:34px;margin-bottom:6px}
.card__title{font-family:var(--f-serif);font-size:17px;font-weight:600;color:var(--c-ink-2)}
.card__desc{font-size:13.5px;color:var(--c-body-2);line-height:1.55}

/* ----------------------------------------------------------------- Process */
.process{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.process__step{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--c-hairline)}
.process__num{font-family:var(--f-serif);font-size:22px;font-weight:600;color:#d8c4a4;flex:none;width:34px}
.process__body{display:flex;flex-direction:column;gap:4px}
.process__title{font-size:16px;font-weight:600;color:var(--c-ink-2)}
.process__desc{font-size:14px;color:var(--c-body-2);line-height:1.6}

/* ------------------------------------------------------------------ Notebox */
.notebox{background:var(--c-cream-soft);border-left:3px solid var(--c-brown);border-radius:var(--radius-sm);padding:26px 28px}
.notebox__title{font-family:var(--f-serif);font-size:19px;font-weight:600;color:var(--c-ink-2);display:block;margin-bottom:8px}
.notebox__body p{font-size:15px;color:var(--c-body);line-height:1.7;margin:0}

/* -------------------------------------------------------------------- Stat */
.stat{display:flex;flex-direction:column;gap:6px;text-align:center;align-items:center}
.stat__icon{width:46px;height:46px;margin-bottom:4px}
.stat__value{font-family:var(--f-serif);font-size:38px;font-weight:600;color:var(--c-brown);line-height:1.1}
.stat__label{font-size:14px;color:var(--c-body-2);line-height:1.5;max-width:260px;margin:0 auto}

/* ----------------------------------------------------------------- Reviews */
.reviews{display:grid;gap:18px}
.reviews--cols-2{grid-template-columns:repeat(2,1fr)}
.review{background:var(--c-white);border:1px solid var(--c-card-line);border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;gap:14px;margin:0}
.review__head{display:flex;align-items:center;gap:13px}
.review__avatar{width:42px;height:42px;border-radius:50%;background:var(--review-avatar,var(--c-brown));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:17px;flex:none}
.review__who{display:flex;flex-direction:column;gap:2px;flex:1}
.review__name{font-size:14.5px;font-weight:600;color:var(--c-ink-2)}
.review__meta{font-size:12.5px;color:var(--c-muted-2)}
.review__source{height:20px;width:auto;max-width:112px;flex:none;object-fit:contain}
.review__stars{color:var(--c-star);font-size:14px;letter-spacing:1.5px}
.review__text{font-size:14.5px;color:var(--c-body);line-height:1.65;margin:0}

/* --------------------------------------------------------------------- FAQ */
/* Structure + toggle behaviour. Colours are themed per-section by page CSS. */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--c-hairline)}
.faq__item{border-bottom:1px solid var(--c-hairline)}
.faq__q{width:100%;background:none;border:none;cursor:pointer;padding:22px 4px;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;font-family:var(--f-serif)}
.faq__q-text{font-size:18px;font-weight:600;color:var(--c-ink-2)}
.faq__sign{font-size:24px;color:var(--c-terra);flex:none;line-height:1}
.faq__a{overflow:hidden;max-height:0;transition:max-height .3s ease}
.faq__item--open .faq__a{max-height:600px}
.faq__a-inner{padding:0 4px 24px;max-width:680px}
.faq__a-inner p{font-size:15px;color:var(--c-body);line-height:1.7;margin:0}

/* ---------------------------------------------------- Hero scroll-down btn */
.hero-scroll{position:absolute;left:50%;bottom:20px;z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid currentColor;display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;animation:heroScrollBounce 2.2s ease-in-out infinite}
.hero-scroll__chevron{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px}
.hero-scroll--dark{color:var(--c-on-dark-soft)}
.hero-scroll--dark:hover{color:var(--c-terra)}
.hero-scroll--light{color:var(--c-brown)}
.hero-scroll--light:hover{color:var(--c-brown-dark)}
@keyframes heroScrollBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@media (prefers-reduced-motion:reduce){.hero-scroll{animation:none}}

/* --------------------------------------------------------- Responsive base */
@media (max-width:849px){
  .cardgrid--cols-2,.cardgrid--cols-3,.reviews--cols-2{grid-template-columns:1fr}
}