/*
 * Elementor-canvas compatibility overrides (plain CSS, no Tailwind directives).
 * Enqueued AFTER the Tailwind bundle, ONLY when Elementor is active
 * (see inc/elementor/class-elementor-compat.php).
 *
 * Use this for small, deliberate bridges between the design tokens and
 * Elementor's canvas — e.g. making default Elementor headings inherit the
 * brand font. Keep it minimal; do not rebuild Elementor's styling here.
 */

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-heading);
}

/* Map Elementor's default container width to the theme container at setup.
   Adjust per project in Elementor > Site Settings as needed. */
:root {
  --e-global-typography-primary-font-family: var(--font-heading);
  --e-global-typography-text-font-family: var(--font-sans);
}

/* ------------------------------------------------------------------ *
 * Atomic-canvas layout bridge.
 * Elementor's atomic container CSS (.elementor .e-div-block-base /
 * .e-flexbox-base in base-desktop.css, plus the variable-driven .e-con
 * rules in frontend.min.css) loads AFTER the Tailwind bundle and resets
 * width / margin / padding / display on every atomic container — which
 * wiped the Tailwind layout utilities we compose pages with, leaving
 * content full-width and left-aligned.
 *
 * These rules re-assert ONLY the layout utilities we place on atomic
 * containers, scoped to `.elementor .e-con.<util>` so nothing outside the
 * Elementor canvas (header/footer chrome, the mobile menu) is affected.
 * `!important` is deliberate and surgical: it is the only reliable way to
 * beat Elementor's variable-driven, logical-property declarations.
 * ------------------------------------------------------------------ */
.elementor .e-con.max-w-6xl { max-width: 72rem !important; }
.elementor .e-con.max-w-2xl { max-width: 42rem !important; }
.elementor .e-con.mx-auto   { margin-left: auto !important; margin-right: auto !important; }

/* Horizontal padding — match the theme header container (px-4 sm:px-6 lg:px-8)
   so Elementor content lines up with the chrome. Ordered base -> sm -> lg. */
.elementor .e-con.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
@media (min-width: 640px)  { .elementor .e-con.sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } }
@media (min-width: 1024px) { .elementor .e-con.lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } }

/* Vertical padding (base, then sm: breakpoint) */
.elementor .e-con.py-12 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.elementor .e-con.py-14 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
.elementor .e-con.py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.elementor .e-con.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
@media (min-width: 640px) {
  .elementor .e-con.sm\:py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .elementor .e-con.sm\:py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  .elementor .e-con.sm\:py-24 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
}
.elementor .e-con.p-6  { padding: 1.5rem !important; }
.elementor .e-con.rounded-lg { border-radius: 0.5rem !important; }
.elementor .e-con.border { border-width: 1px !important; border-style: solid !important; }
.elementor .e-con.border-slate-200 { border-color: #e2e8f0 !important; }
.elementor .e-con.border-brand-600 { border-color: var(--color-brand-600) !important; }
.elementor .e-con.border-t-4 { border-top-width: 4px !important; border-style: solid !important; }
.elementor .e-con.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; }
.elementor .e-con.self-start { align-self: start !important; }
/* did-card box model is reset when the class sits on an atomic container —
   re-assert rounding/padding/shadow/border (affects explore/news/service cards). */
.elementor .e-con.did-card { border-radius: 0.5rem !important; padding: 1.5rem !important; border-width: 1px !important; border-style: solid !important; border-color: rgb(226 232 240) !important; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important; }
/* External-link affordance for explore link lists (e-paragraph strips <svg>). */
.elementor a.did-extlink::after { content: " \2197"; font-size: 0.8em; vertical-align: middle; }
/* Inline links inside atomic content keep their brand text color + hover underline
   (single-class utility otherwise loses to Elementor's link rules). */
.elementor a.text-brand-700 { color: var(--color-brand-700) !important; }
.elementor a.text-brand-300 { color: var(--color-brand-300) !important; }
.elementor a.hover\:underline:hover { text-decoration: underline !important; }
.elementor .e-con.w-full { width: 100% !important; }
.elementor .e-con.min-h-\[60vh\] { min-height: 60vh !important; }
.elementor .e-con.overflow-hidden { overflow: hidden !important; }
.elementor .e-con.absolute { position: absolute !important; }
.elementor .e-con.inset-0 { inset: 0 !important; }
.elementor .e-con.-z-10 { z-index: -10 !important; }

/* Top margins — broadened to ALL atomic elements, not just containers: core
   e-heading / e-paragraph / e-image / e-button bases set margin:0, which was
   collapsing the space between headings, copy and buttons across the site. */
.elementor .mt-1  { margin-top: 0.25rem !important; }
.elementor .mt-2  { margin-top: 0.5rem !important; }
.elementor .mt-3  { margin-top: 0.75rem !important; }
.elementor .mt-4  { margin-top: 1rem !important; }
.elementor .mt-5  { margin-top: 1.25rem !important; }
.elementor .mt-6  { margin-top: 1.5rem !important; }
.elementor .mt-8  { margin-top: 2rem !important; }
.elementor .mt-10 { margin-top: 2.5rem !important; }
.elementor .mt-12 { margin-top: 3rem !important; }

.elementor .e-con.flex      { display: flex !important; }
.elementor .e-con.flex-wrap { flex-wrap: wrap !important; }
.elementor .e-con.flex-1    { flex: 1 1 0% !important; }
.elementor .e-con.items-center    { align-items: center !important; }
.elementor .e-con.justify-between { justify-content: space-between !important; }
.elementor .e-con.justify-end { justify-content: flex-end !important; }
.elementor .e-con.flex-col { flex-direction: column !important; }
.elementor .e-con.items-start { align-items: flex-start !important; }
@media (min-width: 640px) {
  .elementor .e-con.sm\:flex-row { flex-direction: row !important; }
  .elementor .e-con.sm\:items-center { align-items: center !important; }
  .elementor .e-con.sm\:justify-between { justify-content: space-between !important; }
}

.elementor .e-con.gap-3  { gap: 0.75rem !important; }
.elementor .e-con.gap-4  { gap: 1rem !important; }
.elementor .e-con.gap-6  { gap: 1.5rem !important; }
.elementor .e-con.gap-8  { gap: 2rem !important; }
.elementor .e-con.gap-10 { gap: 2.5rem !important; }
.elementor .e-con.gap-12 { gap: 3rem !important; }

.elementor .e-con.grid          { display: grid !important; }
.elementor .e-con.grid-cols-2   { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
/* Responsive grid — sm rules MUST precede lg rules so lg wins at desktop. */
@media (min-width: 640px) {
  .elementor .e-con.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .elementor .e-con.sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 768px) {
  .elementor .e-con.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .elementor .e-con.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .elementor .e-con.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .elementor .e-con.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .elementor .e-con.lg\:col-span-2 { grid-column: span 2 / span 2 !important; }
}


/* Atomic core e-button forces its own blue background / 2px radius
   (.elementor .e-button-base in base-desktop.css). Re-assert the brand
   button utilities we actually use, scoped to buttons only. */
.elementor .e-button-base.bg-brand-600   { background-color: var(--color-brand-600) !important; }
.elementor .e-button-base.bg-brand-500   { background-color: var(--color-brand-500) !important; }
.elementor .e-button-base.bg-white       { background-color: #ffffff !important; }
.elementor .e-button-base.bg-transparent { background-color: transparent !important; }
.elementor .e-button-base.bg-white\/10 { background-color: rgba(255,255,255,0.1) !important; }
.elementor .e-button-base.rounded        { border-radius: 0.25rem !important; }
/* Tailwind's ring-* box-shadow variable chain doesn't resolve on atomic
   buttons; render the outline ring deterministically (uses --tw-ring-color
   set by ring-white/40, with a sensible fallback). */
.elementor .e-button-base.ring-1 { box-shadow: 0 0 0 1px var(--tw-ring-color, rgba(255,255,255,0.4)) !important; }
.elementor .e-button-base.hover\:bg-brand-700:hover { background-color: var(--color-brand-700) !important; }
.elementor .e-button-base.hover\:bg-brand-50:hover  { background-color: var(--color-brand-50) !important; }
.elementor .e-button-base.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,0.1) !important; }
.elementor .e-button-base.hover\:bg-white\/20:hover { background-color: rgba(255,255,255,0.2) !important; }

/* Atomic e-image: utilities on the <img> lose to Elementor's atomic-image
   base styles, and Tailwind preflight's border-style:solid doesn't reach the
   canvas — so .border renders width-only (invisible) and .rounded-lg is reset.
   Re-assert gallery thumbnail chrome deterministically. */
.elementor img.rounded-lg { border-radius: 0.5rem !important; }
.elementor img.border { border-width: 1px !important; border-style: solid !important; }
.elementor img.border-slate-200 { border-color: #e2e8f0 !important; }