/* ============================================================================
   SIRO theme-level overrides.
   Use sparingly. Component styles belong in siro-site-kit widget CSS, not here.
   This file is only for things that affect WordPress/Elementor chrome at the
   document level (body defaults, link reset, image-handling, focus rings,
   reduced-motion preferences, print).
   ============================================================================ */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--siro-font-body);
  background-color: var(--siro-bg);
  color: var(--siro-text);
  line-height: var(--siro-font-body-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
svg,
video {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--siro-font-display);
  font-weight: var(--siro-font-heading-weight);
  line-height: var(--siro-font-heading-leading);
  letter-spacing: var(--siro-font-heading-tracking);
}

/* Singular pages built in Elementor: Skelementor still prints .page-header + h1.entry-title (e.g. "Pagina de Start") before .page-content. Hide the redundant document title; the hero/widget owns the visible H1. Last modified: 2026-05-11 */
.elementor-page .site-main > .page-header {
  display: none;
}

/*
 * Home test layout v20codex: scoped bridge only.
 * Keep this test page isolated, and consume the existing SIRO design tokens /
 * button classes rather than introducing a second visual language.
 * Last modified: 2026-05-18
 */
body.page-id-4146 .site-main > .page-header {
  display: none !important;
}
body.page-id-4146 .page-content {
  overflow: hidden;
}
body.page-id-4146 .siro-on-dark,
body.page-id-4146 .siro-on-dark a:not(.elementor-button) {
  color: var(--siro-text-inverse);
}
body.page-id-4146 .siro-on-dark .elementor-heading-title {
  color: var(--siro-text-inverse);
}
body.page-id-4146 .siro-on-dark .elementor-widget-text-editor,
body.page-id-4146 .siro-on-dark .elementor-widget-text-editor p {
  color: var(--siro-text-inverse-muted);
}
body.page-id-4146 .siro-on-dark .siro-u-text-accent .elementor-heading-title {
  color: var(--siro-color-accent);
}
body.page-id-4146 .elementor-element-v2float {
  position: fixed !important;
  left: auto !important;
  right: var(--siro-space-5) !important;
  bottom: var(--siro-space-5) !important;
  width: auto !important;
  max-width: calc(100vw - (var(--siro-space-5) * 2));
  z-index: var(--siro-z-overlay) !important;
}
@media (max-width: 767px) {
  body.page-id-4146 .elementor-element-v2float {
    left: var(--siro-space-3) !important;
    right: var(--siro-space-3) !important;
    bottom: var(--siro-space-3) !important;
    width: auto !important;
    max-width: none;
  }
  body.page-id-4146 .elementor-element-v2float .elementor-widget-button {
    flex: 1 1 0;
  }
  body.page-id-4146 .elementor-element-v2float .elementor-button {
    width: 100%;
  }
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--siro-color-primary);
  outline-offset: 2px;
}

/* ============================================================================
   Buttons — global classes (V3 .btn / .btn-gold / .btn-navy / .btn-outline …).
   Apply to native Elementor Button widgets via Advanced → CSS Classes (e.g.
   "siro-btn siro-btn--gold"), or used directly in siro-site-kit widget output.
   ============================================================================ */

/*
 * SIRO Advanced classes attach to `.elementor-widget` (full column width).
 * Never style `.siro-btn`/`.*:hover` on that wrapper — only `<a>` (custom HTML)
 * or `.elementor-widget-button … .elementor-button` (native Button widget).
 * Last modified: 2026-05-11
 */
a.siro-btn,
.elementor-widget-button.siro-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--siro-space-2);
  padding: var(--siro-space-btn-y) var(--siro-space-btn-x);
  border-radius: var(--siro-radius-sm);
  font-family: var(--siro-font-body);
  font-weight: 600;
  font-size: var(--siro-fs-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  white-space: nowrap;
  transition: all var(--siro-trans-overshoot);
}
a.siro-btn--gold,
a.siro-btn--gold:link,
a.siro-btn--gold:visited,
.elementor-widget-button.siro-btn--gold .elementor-button {
  background: var(--siro-color-accent);
  color: var(--siro-surface) !important;
}
a.siro-btn--gold:hover,
.elementor-widget-button.siro-btn--gold .elementor-button:hover {
  background: var(--siro-color-primary);
  color: var(--siro-text-inverse) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--siro-shadow-cta-gold);
}
a.siro-btn--navy,
a.siro-btn--navy:link,
a.siro-btn--navy:visited,
.elementor-widget-button.siro-btn--navy .elementor-button {
  background: var(--siro-color-primary);
  color: var(--siro-text-inverse) !important;
}
a.siro-btn--navy:hover,
.elementor-widget-button.siro-btn--navy .elementor-button:hover {
  background: var(--siro-color-primary-dark);
  color: var(--siro-text-inverse) !important;
  transform: translateY(-3px);
  box-shadow: var(--siro-shadow-cta-navy);
}
/*
 * Outline on dark navy (Hero + CTA strip only). Anchor + link/visited keeps contrast
 * when Elementor Kit / Frontend injects generic `a { color: … }` after this file.
 */
a.siro-btn.siro-btn--outline,
a.siro-btn.siro-btn--outline:link,
a.siro-btn.siro-btn--outline:visited,
.elementor-widget-button.siro-btn--outline .elementor-button {
  background: transparent;
  color: var(--siro-text-inverse) !important;
  border: 1px solid var(--siro-outline-strong);
}
a.siro-btn.siro-btn--outline:hover,
.elementor-widget-button.siro-btn--outline .elementor-button:hover {
  color: var(--siro-text-inverse) !important;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}
a.siro-btn--outline-dark,
a.siro-btn--outline-dark:link,
a.siro-btn--outline-dark:visited,
.elementor-widget-button.siro-btn--outline-dark .elementor-button {
  background: transparent;
  color: var(--siro-color-primary) !important;
  border: 1px solid var(--siro-outline-dark);
}
a.siro-btn--outline-dark:hover,
.elementor-widget-button.siro-btn--outline-dark .elementor-button:hover {
  background: var(--siro-color-primary);
  color: var(--siro-text-inverse) !important;
  transform: translateY(-2px);
}
a.siro-btn--full,
.elementor-widget-button.siro-btn--full .elementor-button {
  width: 100%;
}

/* Home hero (V3 GPT5-5 port) — trust-row + fine-print + kicker.
   Used by c0home01 left column. Light-on-navy.
   Selectors are scoped to `body.home` to win over Elementor's inline cascade. */

/* Trust-row tile chrome. Use direct `padding` (not Elementor's `--padding-*`
   variables) because Elementor injects per-element inline CSS that overrides
   variables at the element scope. */
body.home .siro-hero-trust-cell.e-con,
body.home .siro-hero-trust-cell {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.07) !important;
  padding: 18px !important;
}
body.home .siro-hero-trust-num .elementor-heading-title {
  color: #fff !important;
  font-family: var(--siro-font-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1;
  margin: 0;
}
body.home .siro-hero-trust-label .elementor-widget-container,
body.home .siro-hero-trust-label p {
  color: rgba(255, 255, 255, 0.64) !important;
  font-size: 0.86rem;
  margin: 6px 0 0;
  line-height: 1.4;
}
body.home .siro-hero-fine-print .elementor-widget-container,
body.home .siro-hero-fine-print p {
  color: rgba(255, 255, 255, 0.64) !important;
  font-size: 0.86rem;
  margin: 0;
  line-height: 1.5;
}
body.home .siro-hero-kicker .elementor-heading-title {
  color: var(--siro-color-accent) !important;  /* gold #c29b27 */
  font-family: var(--siro-font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

/* Pull the hero widget's internal padding way down so the trust-row sits
   close to the CTAs (V3 GPT5-5 vertical rhythm). */
body.home .elementor-element-c0home01w1 .siro-hero {
  padding: 0;
  min-height: 0;
}
body.home .elementor-element-c0home01w1 .siro-hero__cta-group {
  margin-bottom: 0;
}
/* Force H1 white — the global Elementor heading widget CSS in the page's
   inline <style> sets color via --e-global-color-primary on .elementor-heading-title,
   and SOMETHING on this page is bleeding into the .siro-hero__title cascade. The
   measured rendered color was rgb(180,150,30) — gold — instead of #fff. */
body.home .elementor-element-c0home01w1 .siro-hero__title {
  color: #ffffff !important;
  text-wrap: balance;
}
body.home .elementor-element-c0home01w1 .siro-hero__title span {
  color: var(--siro-color-accent) !important;  /* gold accent for "preț clar" */
  display: inline-block;
  white-space: nowrap;
}
body.home .elementor-element-c0home01w1 .siro-hero__desc {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Calc card on the right column — let it fill the column width on stacked
   layouts so it doesn't look orphaned at 460px when the column is full-width. */
body.home .elementor-element-c0home01R .siro-calc {
  max-width: 100%;
  width: 100%;
}
body.home .elementor-element-c0home01R .siro-calc .siro-calc__form .siro-calc__field:nth-child(n+2) {
  /* nothing — keep grid behavior */
}

/* Responsive — tablet (≤1024) and mobile (≤767).
   Selectors are `body.home .elementor-N .elementor-element.<id>` to beat
   Elementor's inline-style cascade. The class chain matches the same
   specificity that Elementor uses for its own per-breakpoint rules. */

@media (max-width: 1024px) {
  body.home .siro-hero-trust-num .elementor-heading-title {
    font-size: clamp(1.4rem, 4.2vw, 2rem) !important;
  }
  body.home .siro-hero-trust-label p {
    font-size: 0.78rem;
  }
  body.home .siro-hero-trust-cell.e-con,
  body.home .siro-hero-trust-cell {
    padding: 14px !important;
  }
}

@media (max-width: 767px) {
  /* Keep trust-row as 3 compact tiles on mobile (Elementor's default mobile
     grid would otherwise stack to 1col). */
  body.home .elementor-7 .elementor-element.elementor-element-c0home01trust {
    --e-con-grid-template-columns: repeat(3, 1fr);
    --grid-column-gap: 8px;
    --grid-row-gap: 8px;
  }
  body.home .siro-hero-trust-cell.e-con,
  body.home .siro-hero-trust-cell {
    padding: 10px !important;
    border-radius: 14px !important;
  }
  body.home .siro-hero-trust-num .elementor-heading-title {
    font-size: clamp(1.05rem, 4.6vw, 1.4rem) !important;
  }
  body.home .siro-hero-trust-label p {
    font-size: 0.66rem;
    line-height: 1.25;
    margin-top: 4px;
  }
  /* Tighter hero on mobile. Use the same `.elementor-7 .elementor-element.<id>`
     selector that Elementor uses, so our values win the cascade. */
  body.home .elementor-7 .elementor-element.elementor-element-c0home01 {
    --padding-top: 96px;
    --padding-bottom: 48px;
    --min-height: auto;
  }
  body.home .elementor-element-c0home01w1 .siro-hero__title {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  body.home .elementor-element-c0home01w1 .siro-hero__desc {
    font-size: 0.95rem !important;
  }
  body.home .elementor-element-c0home01w1 .siro-hero__cta-group {
    flex-direction: column;
    width: 100%;
  }
  body.home .elementor-element-c0home01w1 .siro-hero__cta-group .siro-btn {
    width: 100%;
    text-align: center;
  }
  /* Calc card slightly tighter on mobile */
  body.home .elementor-element-c0home01R .siro-calc {
    padding: var(--siro-space-6);
  }
  body.home .elementor-element-c0home01R .siro-calc__title {
    font-size: var(--siro-fs-xl);
  }
}

/* Very narrow (≤420) — fall back to 1-col trust-row, otherwise 3 tiles
   would clip text. */
@media (max-width: 420px) {
  body.home .elementor-7 .elementor-element.elementor-element-c0home01trust {
    --e-con-grid-template-columns: repeat(1, 1fr);
  }
  body.home .siro-hero-trust-cell.e-con,
  body.home .siro-hero-trust-cell {
    padding: 14px !important;
  }
  body.home .siro-hero-trust-num .elementor-heading-title {
    font-size: 1.6rem !important;
  }
  body.home .siro-hero-trust-label p {
    font-size: 0.86rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*
 * Sub-hero breadcrumbs: Elementor Site Settings often colour all links in the widget
 * container as global Primary (same navy as the hero BG). Visited / :link rules can
 * override component CSS without pseudo-states. Last modified: 2026-05-12
 */
.elementor-page .elementor-widget-container .siro-sub-hero nav.siro-breadcrumbs a.siro-breadcrumbs__link:any-link,
.elementor-page .elementor-widget-container .siro-sub-hero nav.siro-breadcrumbs a.siro-breadcrumbs__link:link,
.elementor-page .elementor-widget-container .siro-sub-hero nav.siro-breadcrumbs a.siro-breadcrumbs__link:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.elementor-page .elementor-widget-container .siro-sub-hero nav.siro-breadcrumbs a.siro-breadcrumbs__link:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ------------------------------------------------------------------
 * Blog auto-list (posts widget, cards skin) — compact card sizing.
 * Fixes oversized cards: the post-title <a> inherited a 61.6px global
 * link line-height (cards ballooned to ~1100px tall) and thumbnails
 * rendered ~295px with object-fit:fill. Scoped to #siro-blog-autolist.
 * Added 2026-06-05.
 * ------------------------------------------------------------------ */
#siro-blog-autolist .elementor-post__title,
#siro-blog-autolist .elementor-post__title a {
  font-size: 1.0625rem;
  line-height: 1.35 !important;
  font-weight: 700;
}
#siro-blog-autolist .elementor-post__title { margin: 0 0 0.5rem; }
/* cards skin uses a padding-bottom aspect trick; override it to a fixed landscape height */
#siro-blog-autolist .elementor-post__thumbnail { height: 200px !important; padding-bottom: 0 !important; overflow: hidden; }
#siro-blog-autolist .elementor-post__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
#siro-blog-autolist .elementor-post__text { padding: 0 20px; }
#siro-blog-autolist .elementor-post__excerpt p { margin: 0; }

/* ------------------------------------------------------------------
 * Mobile menu (transparent header over blue hero) — dropdown sub-items
 * rendered dark on the blue panel (title #191c1e, desc grey, link #000).
 * Top-level links were already white; only the megamenu children needed
 * inverting. Added 2026-06-05.
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .siro-nav--transparent .siro-nav__items-wrap .siro-dropdown__link,
  .siro-nav--transparent .siro-nav__items-wrap .siro-dropdown__title,
  .siro-nav--transparent .siro-nav__items-wrap .siro-dropdown__icon {
    color: var(--siro-text-inverse);
  }
  .siro-nav--transparent .siro-nav__items-wrap .siro-dropdown__desc {
    color: var(--siro-text-inverse-muted);
  }
  .siro-nav--transparent .siro-nav__items-wrap .siro-dropdown__link:hover {
    background: rgba(255, 255, 255, 0.10);
  }
}

/* ------------------------------------------------------------------
 * Kill horizontal overflow. The WP Social Reviews swiper (slide-next)
 * and a stats item leaked ~14px+ past the viewport on mobile, making the
 * page horizontally scrollable — so hovering/tapping a menu item made the
 * page "fly left" (browser scrolling to the off-screen overflow).
 * overflow-x: clip (not hidden) so position:sticky elsewhere keeps working.
 * Added 2026-06-05.
 * ------------------------------------------------------------------ */
html, body { overflow-x: clip; }

/* ------------------------------------------------------------------
 * Mobile submenu "flies left" on tap. On mobile the dropdown is static
 * (transform:none), but the GLOBAL :hover/:focus-within rule (not scoped
 * to a breakpoint) re-applies transform: translateX(-50%) — so tapping a
 * sub-item shifted the whole block left by half its width. Cancel it ≤720px.
 * !important to win regardless of theme-vs-plugin CSS load order.
 * Added 2026-06-05.
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .siro-nav__item:hover .siro-dropdown,
  .siro-nav__item:focus-within .siro-dropdown {
    transform: none !important;
  }
}

/* ------------------------------------------------------------------
 * Tablet band (721–999px): the 600px 2-col mega-menu, centered with
 * translateX(-50%) under a left-of-centre item, rendered ~15px+ off-screen
 * left. Desktop (≥1000px) fits and is untouched. Here we cap width + go
 * single-column so the panel stays on-screen. Look on real desktop unchanged.
 * Added 2026-06-05.
 * ------------------------------------------------------------------ */
@media (min-width: 721px) and (max-width: 999px) {
  .siro-dropdown--megamenu {
    min-width: min(440px, calc(100vw - 40px)) !important;
    width: min(440px, calc(100vw - 40px)) !important;
    grid-template-columns: 1fr !important;
  }
}

/* ------------------------------------------------------------------
 * Stats widget on mobile: 4 items in a 2-col grid, but the 30px headline
 * ("TEHNOLOGIE PRO", "MATERIALE PREMIUM"…) min-content was wider than the
 * half-column, so the right column overflowed ~14px off-screen. Shrink the
 * number font (clamp scales it on smaller phones) + minmax(0,1fr) safety so
 * columns can't overflow. Desktop unchanged. Added 2026-06-05.
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .siro-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .siro-stats__item, .siro-stats__num, .siro-stats__label { min-width: 0; }
  .siro-stats__num { font-size: clamp(18px, 5.4vw, 24px) !important; }
  .siro-stats__label { overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------
 * Homepage "De ce SIRO" images (widgets 81994a6 "Soluții adaptate" and
 * 5c394d9 "Implementarea face diferența"): each 4:3 photo sits in a box with
 * a fixed height:500px + object-fit:contain — sized for the desktop 2-col row
 * to match the tall text column. On mobile that box stays 500px tall while
 * the image fits to 350×262 and centres, leaving a ~119px empty band ABOVE
 * and BELOW it (letterboxing = the "dead space in both directions"). Let the
 * image take its natural height on mobile so the box hugs the photo. Desktop
 * rows unchanged. Added 2026-06-05.
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .elementor-element-81994a6 img,
  .elementor-element-5c394d9 img {
    height: auto !important;
  }
}

/* ------------------------------------------------------------------
 * Homepage "Încredere construită" reviews block: four nested boxed
 * containers each add horizontal padding (24 + 32 + 10 px per side on the
 * wrappers, plus 24px on the card), which on desktop's 767px column is fine
 * but on a 390px phone compounds to ~110px of gutter EACH side — the review
 * carousel collapses to ~170px and text barely fits ("cramped, too much
 * space on sides"). Flatten the three wrapper gutters on mobile; the review
 * card keeps its own 24px padding so text isn't edge-to-edge. The section's
 * 20px page gutter is preserved. Desktop layout untouched. Added 2026-06-05.
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
  .elementor-element-9e29860,
  .elementor-element-e81b9b6,
  .elementor-element-9df3cff {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}