/* ============================================================
   DeSine ⇄ Elementor bridge
   Makes Elementor containers behave like the static build's
   <section class="section"><div class="container">…</div></section>.
   Class conventions (set on containers under Advanced → CSS Classes):
     ds-sec            a page section (add section, section--alt, section--dark)
     ds-narrow         860px content column (static: container--narrow)
     ds-flush          full-bleed, no padding (Hero / CTA Band widgets)
     ds-row / ds-col   two-column layout inside a section (static: grid grid-2)
   ============================================================ */

/* Sections: strip Elementor's default container padding/gaps; the design system owns spacing. */
.elementor .e-con.ds-sec {
  --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --content-width: var(--container);
  --margin-top: 0px; --margin-bottom: 0px;
}
.elementor .e-con.ds-sec.section {
  --padding-top: clamp(3.4rem, 7vw, 5.6rem);
  --padding-bottom: clamp(3.4rem, 7vw, 5.6rem);
}
/* Boxed sections: the inner wrapper is the .container */
.elementor .e-con.ds-sec > .e-con-inner {
  max-width: var(--container);
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  gap: 0;
  display: block;
}
.elementor .e-con.ds-sec.ds-narrow > .e-con-inner { max-width: 860px; }
/* Slim strip between sections (e.g. Insights filter bar) */
.elementor .e-con.ds-sec.ds-strip { --padding-top: 1.8rem; --padding-bottom: 1.8rem; }
/* Logo ticker strip right under the hero: the next section already brings its own top spacing */
.elementor .e-con.ds-sec.ds-strip:has(.elementor-widget-ds-logo-ticker) { --padding-top: 1.4rem; --padding-bottom: 0px; }

/* Full-bleed sections (widgets render their own <section> + .container) */
.elementor .e-con.ds-flush { --content-width: 100%; }
.elementor .e-con.ds-flush > .e-con-inner { max-width: none; padding-inline: 0; }
.elementor .e-con.ds-flush > .elementor-widget,
.elementor .e-con.ds-flush > .e-con-inner > .elementor-widget { width: 100%; }

/* Widgets stack with the design's rhythm, not Elementor's 20px */
.elementor .e-con.ds-sec .elementor-widget { margin-block-end: 0; width: 100%; max-width: 100%; }
.elementor .e-con.ds-sec .elementor-widget-text-editor > .elementor-widget-container > :last-child,
.elementor .e-con.ds-sec .elementor-widget-text-editor > :last-child { margin-bottom: 0; }

/* Two columns inside a section (static .grid.grid-2) */
.elementor .e-con.ds-row {
  --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; width: 100%;
}
.elementor .e-con.ds-row > .e-con-inner { display: contents; }
.elementor .e-con.ds-col {
  --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
  --gap: 0px; display: block !important; min-width: 0;
}
.elementor .e-con.ds-col.ds-col--stack { display: grid !important; gap: 1.3rem; align-content: start; }
@media (max-width: 640px) {
  .elementor .e-con.ds-row { grid-template-columns: 1fr; }
}

/* Headings written in a column without the section-head wrapper (contact / booking) */
.ds-col .ds-plain-heading h2 { font-size: var(--fs-h2); }

/* Elementor editor: keep empty sections clickable */
.elementor-editor-active .e-con.ds-sec:empty,
.elementor-editor-active .e-con.ds-sec > .e-con-inner:empty { min-height: 80px; }

/* ---------- Current page in the navigation ---------- */
.main-nav .nav-link.is-current { color: var(--accent-deep); position: relative; }
@media (min-width: 981px) {
  .main-nav .nav-link.is-current::after {
    content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .2rem;
    height: 2px; border-radius: 2px; background: var(--accent);
  }
}
@media (max-width: 980px) {
  .main-nav .nav-link.is-current { box-shadow: inset 3px 0 0 var(--accent); padding-left: .8rem; }
}
.nav-cta .btn { white-space: nowrap; }
@media (min-width: 981px) and (max-width: 1140px) {
  .main-nav .nav-link { padding-inline: .6rem; }
  .nav-wrap { gap: 1rem; }
}
.mega-col a[aria-current="page"], .dropdown a[aria-current="page"] { color: var(--accent-deep); font-weight: 700; }

/* Blog teaser sections stay hidden until the first post is published (always visible in the editor) */
body:not(.elementor-editor-active) .e-con.ds-hide-empty:not(:has(.ds-post)) { display: none; }

/* ---------- Compact footer (logo + Services + Company) ---------- */
.footer-main--compact { grid-template-columns: 2fr 1fr 1fr; }
.footer-main--compact .footer-brand p { max-width: 380px; }
@media (max-width: 760px) { .footer-main--compact { grid-template-columns: 1fr 1fr; } .footer-main--compact .footer-brand { grid-column: 1 / -1; } }

/* ---------- Mobile polish (issues found in 375px QA) ---------- */
/* Announcement text never runs under the ✕ button */
.announce-bar { padding-inline: 2.6rem; }
/* "Trusted by" logo strip: tidy rows instead of space-between gaps */
@media (max-width: 640px) {
  .hero-logos .container { justify-content: flex-start; gap: .7rem 1.4rem; }
  .hero-logos .container > span:first-child { flex-basis: 100%; }
}
/* Radio/checkbox cards: the hidden input covers its own card exactly (no 4px overflow) */
.radio-card input { inset: 0; width: 100%; height: 100%; margin: 0; }
@media (max-width: 767px) {
  /* Small caps labels never below 12px on phones */
  .eyebrow, .hero .kicker, .step .dur { font-size: .75rem; }
  .tag { font-size: .75rem; }
  .ph--todo { font-size: max(.78em, .75rem); }
}
@media (max-width: 1024px) {
  /* Comfortable tap targets for filter chips on touch screens (phones + tablets) */
  .filter-tab { min-height: 42px; padding-block: .6rem; }
}

/* Global guards: no horizontal scroll from any widget */
html, body { overflow-x: clip; }
.elementor img { height: auto; }