/* ==========================================================================
   CataCases Elementor replica - port layer
   Loaded after assets/css/catacases.css (the client's own compiled Tailwind).

   Layout contract (how the Elementor tree maps onto the Tailwind design):
   --------------------------------------------------------------------------
   LEVEL 1  band container        classes: Tailwind band classes (bg-primary
                                  py-16 md:py-20 text-primary-foreground) plus
                                  "cc-band". Full width, nothing else.
   LEVEL 2  inner container       classes: "cc-container" (1400px + 2rem gutters)
                                  or "cc-container-narrow" (max-w-3xl / 5xl / 6xl
                                  via a size modifier) plus mx-auto semantics.
   LEVEL 3  layout container      classes: "cc-row", "cc-grid-2/3/4", "cc-stack".
                                  These move the Tailwind layout onto the
                                  Elementor .e-con-inner wrapper, which is the
                                  element Elementor actually lays children out in.
   WIDGETS  native Elementor widgets carry spacing/utility classes and take
            their typography and colours from widget controls.

   Nothing in this file restyles a design element; it deletes Elementor defaults
   the original site never had and gives the wrapper levels the layout the
   preserved Tailwind classes describe.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
  background-color: #f3f5f7;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #2b3d4f;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   2. Container neutralisation
   Elementor would otherwise add a 1400px content width, a column gap and its
   own padding to every container. The Tailwind layer supplies all of that.
   max-width is only zeroed when the container is not given a width by a
   cc-* or max-w-* class.
   -------------------------------------------------------------------------- */
.elementor-element.e-con {
  margin: 0 !important;
  min-height: 0 !important;
  width: 100%;
}
.elementor-element.e-con:not(.cc-container):not(.cc-container-narrow) {
  max-width: none !important;
}
.elementor-element.e-con > .e-con-inner {
  padding: 0 !important;
  min-height: 0 !important;
  width: 100%;
  max-width: none;
}

/* Elementor's container defaults: 10px padding all round and a 20px widget
   gap. The live design has neither. Per-element padding that the port does set
   arrives through the generated --padding-* variables and is unaffected. */
.e-con {
  --container-default-padding-top: 0px !important;
  --container-default-padding-right: 0px !important;
  --container-default-padding-bottom: 0px !important;
  --container-default-padding-left: 0px !important;
  --widgets-spacing: 0px !important;
  --widgets-spacing-row: 0px !important;
  --widgets-spacing-column: 0px !important;
}

/* Fixed band heights. Elementor renders height through var(--height), which its
   own frontend stylesheet sets to auto with equal specificity to a Tailwind h-*
   utility, so height has to be driven through the variable. */
.e-con.cc-h-64 { --height: 64px; }
.e-con.cc-h-80 { --height: 80px; }
.e-con.cc-h-96 { --height: 96px; }
@media (min-width: 768px) {
  .e-con.cc-md-h-64 { --height: 64px; }
  .e-con.cc-md-h-80 { --height: 80px; }
  .e-con.cc-md-h-96 { --height: 96px; }
}

/* Legacy section/column wrappers: neutralised so an older template import
   cannot reintroduce fixed widths. */
.elementor-section {
  padding: 0 !important;
  max-width: none !important;
}
.elementor-section > .elementor-container {
  max-width: none !important;
  padding: 0 !important;
}
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap {
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   3. Wrapper levels
   -------------------------------------------------------------------------- */

/* LEVEL 2 - width only. The live site's .container is 1400px wide with 2rem
   gutters; those gutters are set through Elementor's own padding control (so
   they stay editable), this layer only supplies width and centring.
   Widths are the Tailwind values: 3xl 48rem, 4xl 56rem, 5xl 64rem, 6xl 72rem. */
.e-con.cc-container {
  width: 100%;
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.e-con.cc-container-narrow {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}
.e-con.cc-container-narrow.cc-w-3xl { max-width: 48rem !important; }
.e-con.cc-container-narrow.cc-w-4xl { max-width: 56rem !important; }
.e-con.cc-container-narrow.cc-w-5xl { max-width: 64rem !important; }
.e-con.cc-container-narrow.cc-w-6xl { max-width: 72rem !important; }

/* LEVEL 3 - layout.
   Elementor 4.3.5 with e_optimized_markup omits the .e-con-inner wrapper and puts
   widgets directly inside .e-con, so the layout has to be applied to the container
   itself. Both targets are declared so the same JSON also renders on builds that
   still emit .e-con-inner. */
.e-con.cc-stack, .e-con.cc-stack > .e-con-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}
.e-con.cc-row, .e-con.cc-row > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
}
.e-con.cc-row-center, .e-con.cc-row-center > .e-con-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.e-con.cc-grid-2, .e-con.cc-grid-2 > .e-con-inner,
.e-con.cc-grid-3, .e-con.cc-grid-3 > .e-con-inner,
.e-con.cc-grid-4, .e-con.cc-grid-4 > .e-con-inner {
  display: grid !important;
  align-items: stretch !important;
}
.e-con.cc-grid-2, .e-con.cc-grid-2 > .e-con-inner { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; gap: 24px !important; }
.e-con.cc-grid-3, .e-con.cc-grid-3 > .e-con-inner { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; gap: 24px !important; }
.e-con.cc-grid-4, .e-con.cc-grid-4 > .e-con-inner { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; gap: 24px !important; }
@media (min-width: 768px) {
  .e-con.cc-grid-2, .e-con.cc-grid-2 > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .e-con.cc-grid-4, .e-con.cc-grid-4 > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .e-con.cc-grid-3, .e-con.cc-grid-3 > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .e-con.cc-grid-4, .e-con.cc-grid-4 > .e-con-inner { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
/* Children of a layout container stretch to their grid cell. */
.e-con.cc-grid-2 > .e-con,
.e-con.cc-grid-3 > .e-con,
.e-con.cc-grid-4 > .e-con {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   4. Widget wrappers
   -------------------------------------------------------------------------- */
.elementor-widget {
  margin: 0 !important;
}
.elementor-element.elementor-widget:not(:last-child) {
  margin-bottom: 0 !important;
}
.elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Widgets that carry a utility class need the wrapper to honour it. */
.elementor-element[class*="text-center"] { text-align: center; }
.elementor-element[class*="w-full"] { width: 100%; }

/* --------------------------------------------------------------------------
   5. Typography inheritance (the client site has no webfonts)
   -------------------------------------------------------------------------- */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-button .elementor-button,
.elementor-widget-accordion .elementor-accordion-title,
.elementor-widget-accordion .elementor-tab-content,
.elementor-widget-html {
  font-family: inherit;
}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
/* Elementor renders position through var(--position) (default relative) in its own
   stylesheet, which loads after the theme, so Tailwind's .sticky / .fixed lose at
   equal specificity. Position has to be driven here, exactly like padding. */
.e-con.cc-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
}
/* Header CTA: Elementor buttons render line-height 20px by default; the live button
   is 10px padding + 24px line + 10px padding = 44px tall. */
.cc-header .elementor-button,
.cc-sticky-bar .elementor-button {
  line-height: 24px !important;
}
@media (max-width: 767px) {
  .cc-header .elementor-button,
  .cc-sticky-bar .elementor-button {
    line-height: 20px !important;
  }
}

body.admin-bar .cc-header {
  top: 32px !important;
}
/* Header and sticky-bar CTA: the live button is 10px padding + 24px line + 10px
   padding = 44px tall on desktop, 20px line below 768px. Elementor's button
   typography does not set a line-height, so it is pinned here. */
.cc-header .elementor-button,
.cc-sticky-bar .elementor-button {
  line-height: 24px !important;
}
@media (max-width: 767px) {
  .cc-header .elementor-button,
  .cc-sticky-bar .elementor-button {
    line-height: 20px !important;
  }
}
@media screen and (max-width: 782px) {
  body.admin-bar .cc-header {
    top: 46px !important;
  }
}
/* Elementor's editor chrome must stay usable above the sticky header. */
.elementor-editor-active .cc-header {
  position: relative !important;
}

/* --------------------------------------------------------------------------
   7. FAQ accordion (native Elementor Accordion widget)
   Rows: #FAFAFA background, 24px gutters, 20px vertical rhythm, semibold 20px
   question, answer on a 20% sky tint, 1px #E0E6EB dividers, chevron 24px #1A375B
   rotating 180 degrees on open.
   -------------------------------------------------------------------------- */
.cc-faq .elementor-accordion .elementor-accordion-item {
  border: 0 !important;
  background: transparent !important;
}
.cc-faq .elementor-accordion .elementor-accordion-item + .elementor-accordion-item {
  border-top: 1px solid #e0e6eb !important;
}
.cc-faq .elementor-accordion .elementor-tab-title {
  background-color: #fafafa !important;
  padding: 20px 24px !important;
  border-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: background-color 0.15s ease;
}
.cc-faq .elementor-accordion .elementor-tab-title:hover {
  background-color: hsl(197 93% 53% / 0.4) !important;
}
.cc-faq .elementor-accordion .elementor-tab-title a {
  color: #2b3d4f !important;
  font-family: inherit !important;
  flex: 1;
}
.cc-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon {
  padding: 0 !important;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231A375B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transition: transform 0.2s ease;
}
.cc-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon svg,
.cc-faq .elementor-accordion .elementor-tab-title .elementor-accordion-icon i {
  display: none !important;
}
.cc-faq .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
  transform: rotate(180deg);
}
.cc-faq .elementor-accordion .elementor-tab-content {
  background-color: hsl(197 93% 53% / 0.2) !important;
  color: #52667a !important;
  border: 0 !important;
  padding: 4px 24px 20px 24px !important;
  font-family: inherit !important;
}
.cc-faq .elementor-accordion .elementor-tab-content p:first-child { margin-top: 0; }
.cc-faq .elementor-accordion .elementor-tab-content p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .cc-faq .elementor-accordion .elementor-tab-title {
    padding: 16px !important;
  }
  .cc-faq .elementor-accordion .elementor-tab-content {
    padding: 4px 16px 16px 16px !important;
  }
}

/* --------------------------------------------------------------------------
   7b. Gap utilities for layout containers
   Band padding comes from Elementor's own padding control (so it is editable in
   the panel); inter-child gaps come from these classes because Elementor lays
   children out inside .e-con-inner, where the preserved Tailwind gap-* class
   cannot reach.
   -------------------------------------------------------------------------- */
.e-con.cc-gap-1, .e-con.cc-gap-1 > .e-con-inner { gap: 4px !important; }
.e-con.cc-gap-2, .e-con.cc-gap-2 > .e-con-inner { gap: 8px !important; }
.e-con.cc-gap-3, .e-con.cc-gap-3 > .e-con-inner { gap: 12px !important; }
.e-con.cc-gap-4, .e-con.cc-gap-4 > .e-con-inner { gap: 16px !important; }
.e-con.cc-gap-5, .e-con.cc-gap-5 > .e-con-inner { gap: 20px !important; }
.e-con.cc-gap-6, .e-con.cc-gap-6 > .e-con-inner { gap: 24px !important; }
.e-con.cc-gap-8, .e-con.cc-gap-8 > .e-con-inner { gap: 32px !important; }
.e-con.cc-gap-10, .e-con.cc-gap-10 > .e-con-inner { gap: 40px !important; }
.e-con.cc-gap-12, .e-con.cc-gap-12 > .e-con-inner { gap: 48px !important; }
.e-con.cc-gap-16, .e-con.cc-gap-16 > .e-con-inner { gap: 64px !important; }
@media (min-width: 768px) {
  .e-con.cc-md-gap-3, .e-con.cc-md-gap-3 > .e-con-inner { gap: 12px !important; }
  .e-con.cc-md-gap-4, .e-con.cc-md-gap-4 > .e-con-inner { gap: 16px !important; }
  .e-con.cc-md-gap-5, .e-con.cc-md-gap-5 > .e-con-inner { gap: 20px !important; }
  .e-con.cc-md-gap-6, .e-con.cc-md-gap-6 > .e-con-inner { gap: 24px !important; }
  .e-con.cc-md-gap-8, .e-con.cc-md-gap-8 > .e-con-inner { gap: 32px !important; }
  .e-con.cc-md-gap-10, .e-con.cc-md-gap-10 > .e-con-inner { gap: 40px !important; }
  .e-con.cc-md-gap-12, .e-con.cc-md-gap-12 > .e-con-inner { gap: 48px !important; }
  .e-con.cc-md-gap-16, .e-con.cc-md-gap-16 > .e-con-inner { gap: 64px !important; }
}

/* --------------------------------------------------------------------------
   8. Utility
   -------------------------------------------------------------------------- */
/* Anchor targets must not land behind the 80px sticky header. */
section[id],
div[id][class*="cc-anchor"] {
  scroll-margin-top: 88px;
}

/* The logo marquee animation lives in catacases.css (animate-scroll-logos).
   Elementor must not clip it: the partner band carries overflow-hidden and
   the track is w-max, exactly as on the live site. */
.cc-marquee-wrap {
  overflow: hidden;
}

/* Elementor editor: keep drag handles visible over dark bands. */
.elementor-editor-active .cc-band {
  outline: 1px dashed rgba(24, 183, 247, 0.35);
  outline-offset: -1px;
}

/* --------------------------------------------------------------------------
   9. Fixed-height bands
   The header container carries Tailwind h-16 / md:h-20; its inner wrapper has
   to fill that height so the row can centre itself.
   -------------------------------------------------------------------------- */
.e-con.cc-fill > .e-con-inner {
  height: 100%;
}

/* --------------------------------------------------------------------------
   10. Button icons
   Elementor's icon control loads Font Awesome, which this replica does not
   (the client site uses lucide inline SVG). The two icons that appear inside
   editable buttons are drawn here so the button stays a native Button widget
   with an editable label and link.
   -------------------------------------------------------------------------- */
.cc-icon-phone .elementor-button,
.cc-icon-arrow-right .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}
.cc-icon-phone .elementor-button::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  background: no-repeat center/20px 20px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3Cpath d='M14.05 2a9 9 0 0 1 8 7.94'/%3E%3Cpath d='M14.05 6A5 5 0 0 1 18 10'/%3E%3C/svg%3E");
}
.cc-icon-arrow-right .elementor-button::after {
  content: "";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: no-repeat center/24px 24px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
  .cc-icon-phone .elementor-button::before { width: 16px; height: 16px; flex-basis: 16px; background-size: 16px 16px; }
  .cc-icon-arrow-right .elementor-button::after { width: 20px; height: 20px; flex-basis: 20px; background-size: 20px 20px; }
}

/* --------------------------------------------------------------------------
   11. Sticky slide-down CTA bar
   The live bar is fixed at the top of the viewport and translates in once the
   visitor scrolls past the hero. port.js toggles .cc-sticky-bar--visible.
   -------------------------------------------------------------------------- */
.e-con.cc-sticky-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  width: 100%;
}
.cc-sticky-bar {
  pointer-events: none;
}
.cc-sticky-bar--visible {
  transform: translateY(0);
  pointer-events: auto;
}
.cc-sticky-bar:not(.cc-sticky-bar--visible) {
  transform: translateY(-100%);
}
.elementor-editor-active .cc-sticky-bar {
  position: relative !important;
  transform: none !important;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   12. Font family: authoritative override
   Elementor's typography control emits font-family:"<value>",Sans-serif, which
   turns a font stack into one bogus family name and silently falls back to a
   generic sans -- wider glyphs, different wrapping, band heights off by tens of
   pixels at some viewports. The client site uses the system stack, so pin it
   here for every native widget rather than fighting it per widget.
   -------------------------------------------------------------------------- */
.elementor-page .elementor-widget-heading .elementor-heading-title,
.elementor-page .elementor-widget-text-editor,
.elementor-page .elementor-widget-text-editor p,
.elementor-page .elementor-widget-button .elementor-button,
.elementor-page .elementor-accordion .elementor-accordion-title,
.elementor-page .elementor-accordion .elementor-tab-content,
.elementor-page .elementor-widget-accordion .elementor-tab-title a {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* The hero CTA is full width below 640px on the live site (w-full sm:w-auto). */
.cc-hero-cta .elementor-button {
  width: 100% !important;
  justify-content: center;
  line-height: 28px !important;
}
@media (min-width: 640px) {
  .cc-hero-cta .elementor-button {
    width: auto !important;
  }
}

/* --------------------------------------------------------------------------
   13. /watch hero: native Video widget fills its live-design container
   The hero wraps Elementor's native Video widget (self-hosted, media-library
   driven) in a container carrying the live site's design classes verbatim:
   relative w-full max-w-2xl aspect-video rounded-xl overflow-hidden shadow-2xl
   border-2 border-secondary/30 bg-black mx-auto. The design lives on the
   container; the widget fills it.
   Elementor's own widget CSS sizes the .elementor-wrapper by --video-aspect-ratio
   and does not stretch the widget to fill its container, so the fill is pinned
   here. cc-video-wrap also re-applies max-w-2xl (42rem): the container
   neutraliser in section 2 sets max-width:none on every .e-con that is not a
   cc-container, so the Tailwind max-w-2xl on this container would otherwise be
   overridden and the block would stretch to the full stack width.
   -------------------------------------------------------------------------- */
.e-con.cc-video-wrap,
.elementor-element.e-con:not(.cc-container):not(.cc-container-narrow).cc-video-wrap {
  max-width: 42rem !important; /* max-w-2xl, re-pinned over max-width:none */
  margin-left: auto !important;  /* mx-auto, re-pinned over margin:0 */
  margin-right: auto !important;
}
.e-con.cc-video-wrap > .elementor-widget-video,
.e-con.cc-video-wrap > .elementor-widget-video > .elementor-widget-container,
.e-con.cc-video-wrap .elementor-wrapper {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}
.e-con.cc-video-wrap .elementor-wrapper .elementor-video,
.e-con.cc-video-wrap .elementor-custom-embed-image-overlay {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
/* Play button: the live site draws its own green play overlay over the poster,
   so colour Elementor's default icon green instead of white. */
.e-con.cc-video-wrap .elementor-custom-embed-play i {
  font-size: 84px;
  color: #12ba7c;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.e-con.cc-video-wrap .elementor-custom-embed-play svg {
  height: 84px;
  width: 84px;
  fill: #12ba7c;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}
.e-con.cc-video-wrap .elementor-custom-embed-play {
  z-index: 5;
}

/* --------------------------------------------------------------------------
   Theme Builder header wrapper and sticky behaviour
   Elementor Pro renders the sitewide header template inside
   `<header class="elementor-location-header">`. That wrapper is only as tall as
   the header (80px), so the header's own `position: sticky; top: 0` now sticks
   inside the wrapper and scrolls away with it (it used to be a direct body
   child, where sticky is viewport-scoped). The wrapper is the first element in
   the canvas body, so making it the sticky element restores the original
   behaviour: the wrapper pins to the top of the viewport for the whole scroll
   and carries the header with it. The sticky CTA bar is `position: fixed`
   (viewport-scoped), so it is unaffected by the wrapper.
   -------------------------------------------------------------------------- */
.elementor-location-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}