/* ==========================================================================
   IDeoworks — Elementor companion stylesheet
   Paste into: Appearance → Customize → Additional CSS

   NOTE ON TARGETING
   Elementor only honours the "CSS Classes" field on WIDGETS, not on sections
   or columns — so idw-card / idw-card-row / idw-casa-cell never reach the DOM.
   Everything below therefore anchors on the two widget classes that DO land
   (.idw-card-img and .idw-casa-icon) and walks outward with :has().
   No re-import needed.

   Also note: Elementor puts a column's background, padding and radius on the
   inner .elementor-element-populated wrapper, never on .elementor-column
   itself — every rule below targets accordingly.

   Values sampled from "IDW Mockup - Sep26/Services.png".
   ========================================================================== */

:root {
  --idw-accent: #0071E3;
  --idw-ink:    #1D1D1F;
  --idw-muted:  #6E6E72;
  --idw-gray:   #F5F5F7;
  --idw-card-r: 12px;

  /* Arrow glyph for the hero links. Swap this one path to change the icon
     everywhere; it is masked, so it always takes the link's colour. */
  --idw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M9 7h8v8'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. REAL gaps between cards
   Elementor's own column "gap" is padding INSIDE the column, so the column
   backgrounds still touch and the row reads as one slab. A flex `gap` on the
   container instead leaves the section background visible between cards —
   20px for service cards, 10px for CASA cells (both measured).

   (The Customizer's CSS linter flags `gap` as an unknown property. Its rule
   list predates flexbox gap; the property is valid and ships in every current
   browser. Safe to ignore that warning.)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-card-img) > .elementor-container,
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-casa-icon) > .elementor-container {
    align-items: stretch;
  }
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-card-img)  > .elementor-container { gap: 20px; }
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-casa-icon) > .elementor-container { gap: 10px; }

  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-card-img)  > .elementor-container > .elementor-column,
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-casa-icon) > .elementor-container > .elementor-column {
    width: auto !important;
    flex: 1 1 0;
  }
}

@media (max-width: 767px) {
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-card-img)  > .elementor-container { gap: 16px; }
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-casa-icon) > .elementor-container { gap: 10px; }
}

/* --------------------------------------------------------------------------
   2. Service cards — full-bleed image pinned to the bottom edge
   The column carries 30px side padding for the text; the image cancels it
   with a negative margin so it touches all three edges, as in the mockup.
   -------------------------------------------------------------------------- */
.elementor-column:has(> .elementor-widget-wrap > .idw-card-img) > .elementor-element-populated {
  overflow: hidden;                /* clips the image to the 12px radius */
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: stretch;
  height: 100%;
}

.idw-card-img {
  margin-top: auto !important;     /* push the image to the bottom of the card */
  width: 100%;
}

/* !important + .elementor-element is required: the JSON sets the image
   widget's own margin, and Elementor emits that at a higher specificity
   (.elementor-20244 .elementor-element.elementor-element-xxx > .elementor-widget-container). */
.elementor-element.idw-card-img > .elementor-widget-container {
  margin: 0 -30px 0 !important;    /* cancel the column's 30px side padding */
}

.idw-card-img img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}

@media (max-width: 1024px) {
  .elementor-element.idw-card-img > .elementor-widget-container { margin: 0 -22px 0 !important; }
  .idw-card-img img { height: 210px; }
}

/* --------------------------------------------------------------------------
   3. CASA cells — watermark icon parked top-right, beside the letter
   -------------------------------------------------------------------------- */
.elementor-column:has(> .elementor-widget-wrap > .idw-casa-icon) > .elementor-element-populated {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.idw-casa-icon {
  position: absolute;
  top: 26px;
  right: 22px;
  width: auto !important;
  margin: 0 !important;
  pointer-events: none;
}

@media (max-width: 767px) {
  .idw-casa-icon { top: 20px; right: 18px; }
  .idw-casa-icon i { font-size: 30px !important; }
}

/* --------------------------------------------------------------------------
   4. Arrow links ("Explore What We Do", "Talk to Our Team")
   -------------------------------------------------------------------------- */
.idw-arrow-link .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* Masked SVG, not a Unicode glyph: U+2197 renders differently on every OS.
   This is identical everywhere, takes the link's colour via currentColor,
   and the shape is swappable through --idw-arrow at the top of this file.
   Keep the heading TEXT free of any arrow character so it isn't doubled. */
.idw-arrow-link .elementor-heading-title::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 14px;               /* measured gap in the mockup */
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--idw-arrow) center / contain no-repeat;
          mask: var(--idw-arrow) center / contain no-repeat;
  transition: transform .18s ease;
}

.idw-arrow-link:hover .elementor-heading-title { opacity: .8; }
.idw-arrow-link:hover .elementor-heading-title::after {
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   5. Pill button — keep the outline crisp and the label on one line
   -------------------------------------------------------------------------- */
/* Scoped to IDW service sections so header, footer and every other page
   keep their own button styling. */
.elementor-section:has(.idw-card-img) .elementor-button {
  white-space: nowrap;
  letter-spacing: .01em;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   6. Preserve the manual line break in "The Engine / Behind Every Idea"
   -------------------------------------------------------------------------- */
/* idw_kit tags any heading containing a manual line break with this class,
   so the rule never touches headings outside this project. */
.idw-multiline .elementor-heading-title { white-space: pre-line; }

/* --------------------------------------------------------------------------
   7. Forms — Contact, article consultation, ebook download
   Elementor Free has no form widget, so these are HTML widgets. Swap the
   whole widget for your form plugin's shortcode when you wire up delivery;
   the markup below is presentation only and does not submit anywhere.
   -------------------------------------------------------------------------- */
.idw-form { font-family: Poppins, sans-serif; }

.idw-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 640px) { .idw-form-grid { grid-template-columns: 1fr; } }

.idw-form input[type="text"],
.idw-form input[type="email"],
.idw-form input[type="tel"],
.idw-form select,
.idw-form textarea {
  width: 100%;
  font: 400 14px/1.4 Poppins, sans-serif;
  color: var(--idw-ink);
  background: #FFFFFF;
  border: 1px solid #DCDCE0;
  border-radius: 8px;
  padding: 13px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.idw-form textarea { resize: vertical; min-height: 96px; margin-bottom: 14px; }

.idw-form input::placeholder,
.idw-form textarea::placeholder { color: #9A9AA0; }

.idw-form input:focus,
.idw-form select:focus,
.idw-form textarea:focus {
  border-color: var(--idw-accent);
  box-shadow: 0 0 0 3px rgba(0,113,227,.14);
}

/* Labelled select: caption sits inside the field, above the value */
.idw-field { position: relative; display: block; margin-bottom: 14px; }
.idw-field > span {
  position: absolute;
  top: 7px; left: 15px;
  font-size: 10.5px;
  color: #9A9AA0;
  pointer-events: none;
}
.idw-field select { padding: 22px 34px 8px 14px; }

/* Native arrow is hidden by appearance:none — draw our own */
.idw-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
}

.idw-form-legend {
  font-size: 13.5px;
  color: var(--idw-ink);
  margin: 4px 0 12px;
}

.idw-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-bottom: 18px;
}
@media (max-width: 640px) { .idw-check-grid { grid-template-columns: 1fr; } }

.idw-check-grid label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--idw-ink);
  cursor: pointer;
}
.idw-check-grid input { margin-top: 2px; accent-color: var(--idw-accent); }
.idw-check-wide { grid-column: 1 / -1; }

.idw-form-submit {
  width: 100%;
  font: 600 14px/1 Poppins, sans-serif;
  color: #FFFFFF;
  background: var(--idw-accent);
  border: 0;
  border-radius: 8px;
  padding: 15px 20px;
  cursor: pointer;
  transition: background .15s ease;
}
.idw-form-submit:hover { background: #0063C6; }

.idw-form-note { font-size: 12px; color: var(--idw-muted); margin: 12px 0 0; }

.idw-form--compact input,
.idw-form--compact select,
.idw-form--compact textarea { background: #FAFAFC; }
.idw-form--compact > input { margin-bottom: 14px; }


/* --------------------------------------------------------------------------
   8. Article filter bar, pagination, chips, tags, badges, meta
   -------------------------------------------------------------------------- */
.idw-filter {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: Poppins, sans-serif;
}
.idw-filter-label { font-size: 13.5px; color: var(--idw-ink); }
.idw-filter select {
  flex: 1 1 190px;
  font: 400 14px/1.4 Poppins, sans-serif;
  color: var(--idw-ink);
  background: #FFFFFF;
  border: 1px solid #DCDCE0;
  border-radius: 8px;
  padding: 12px 34px 12px 14px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 15px;
}
.idw-filter-reset {
  font: 500 13.5px Poppins, sans-serif;
  color: var(--idw-accent);
  text-decoration: none;
}

.idw-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: Poppins, sans-serif;
}
.idw-page-arrow {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #ECECEF;
  color: var(--idw-ink);
  font-size: 20px;
  text-decoration: none;
  transition: background .15s ease;
}
.idw-page-arrow:hover { background: #DEDEE3; }
.idw-page-arrow.is-disabled { opacity: .4; pointer-events: none; }
.idw-page-current {
  min-width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #DCDCE0;
  border-radius: 7px;
  font-size: 14px;
  color: var(--idw-ink);
}
.idw-page-total { font-size: 14px; color: var(--idw-ink); }

.idw-chips { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.idw-chip {
  font: 500 12.5px Poppins, sans-serif;
  color: var(--idw-muted);
  background: transparent;
  border-radius: 100px;
  padding: 7px 15px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.idw-chip:hover { background: #ECECEF; color: var(--idw-ink); }
.idw-chip.is-active { background: #ECECEF; color: var(--idw-ink); }

.idw-tag {
  display: inline-block;
  font: 500 12.5px Poppins, sans-serif;
  color: var(--idw-ink);
  background: #ECECEF;
  border-radius: 100px;
  padding: 6px 14px;
  margin: 0 8px 8px 0;
}

/* Category badge over a photo */
.idw-badge .elementor-heading-title {
  display: inline-block;
  background: var(--idw-accent);
  border-radius: 5px;
  padding: 5px 10px;
  letter-spacing: .06em;
}

.idw-meta {
  display: inline-block;
  font-size: 12.5px;
  color: var(--idw-muted);
  margin-right: 22px;
}


/* --------------------------------------------------------------------------
   9. Share row
   -------------------------------------------------------------------------- */
.idw-share { display: flex; gap: 16px; align-items: center; }
.idw-share a {
  color: var(--idw-ink);
  opacity: .75;
  display: inline-flex;
  transition: opacity .15s ease, transform .15s ease;
}
.idw-share a:hover { opacity: 1; transform: translateY(-1px); }


/* --------------------------------------------------------------------------
   10. Feature icon cards ("Why IDEOWORKS")
   -------------------------------------------------------------------------- */
.idw-feature-icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid #D8D8DC;
  border-radius: 50%;
}

/* Contact shortcut icons sit above their label, centred */
.idw-contact-icon { text-align: center; }
.idw-contact-icon .elementor-widget-container { margin-bottom: 10px; }


/* --------------------------------------------------------------------------
   11. OPTIONAL — horizontal carousel with a peeking 4th card, matching the
   mockup (cards run to x1402 on a 1440 canvas).

   TO ENABLE: delete the /* on the next line and the */ at the end of the file.
   The card row then scrolls sideways with snap points instead of wrapping,
   and the 4th card peeks in from the right edge exactly as the mockup shows.
   What this still will NOT give you is the round arrow button drawn in the
   mockup — that needs a real slider widget (Elementor Pro's Loop Carousel).
   Leave it commented for a plain, always-visible 3-up grid.
   -------------------------------------------------------------------------- */
/*
@media (min-width: 768px) {
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-card-img) > .elementor-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-card-img) > .elementor-container::-webkit-scrollbar { display: none; }
  .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .idw-card-img) > .elementor-container > .elementor-column {
    flex: 0 0 373px;
    scroll-snap-align: start;
  }
}
*/