/* ==========================================================================
   AL13 – Understanding the WUI (post 13079), redesign from "WUI landing page redo.pdf"
   Content: Elementor containers + widgets (template wui-recode.json)
   Styles: this file only. Every property is !important so Elementor / theme
   rules cannot override it; CSS variables (--*) are left as they are.

   Desktop (>=1025): sizes are the PDF values (pt x 1.0613 = px at 1920),
   multiplied by --wui-u, so the layout scales down proportionally below 1920.
   Tablet (768–1024) and mobile (<=767): own values (the PDF has no such frames).

   Blocks:
     .wui-hero        photo + H1 (Understanding / WUI / The Wildland-Urban Interface)
     .wui-intro       large paragraph
     .wui-cards       3 x .wui-card (icon + title | text)
     .wui-banner      photo + text
     .wui-products    2 x .wui-product (photo, logo, text, standards, button)
     .wui-article     H2 + text, H2 + text
     .wui-summary     large quote
     .wui-links       grey box with links
   ========================================================================== */

:root {
  --wui-yellow: #FFC556;
  --wui-text: #4C4C4D;
  --wui-card: #F2F2F2;
  --wui-white: #FFFFFF;
  --wui-font: Helvetica;

  /* 1 design px at 1920, scales down with the viewport, never up */
  --wui-u: min(1px, calc(100vw / 1920));
}

/* ---------- Reset Elementor container / widget spacing for our blocks ---------- */

.e-con.wui-hero,
.e-con.wui-intro,
.e-con.wui-cards,
.e-con.wui-card,
.e-con.wui-card__head,
.e-con.wui-banner,
.e-con.wui-products,
.e-con.wui-product,
.e-con.wui-product__body,
.e-con.wui-article,
.e-con.wui-summary,
.e-con.wui-links {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --margin-top: 0px;
  --margin-bottom: 0px;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
}

[class*="wui-"].elementor-widget {
  margin: 0 !important;
  --kit-widget-spacing: 0px;
}

[class*="wui-"] .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

[class*="wui-"] p,
[class*="wui-"] ul,
[class*="wui-"] li,
[class*="wui-"] .elementor-heading-title {
  font-family: var(--wui-font) !important;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  text-align: left !important;
  text-transform: none !important;
}

/* the theme forces its web font on spans inside headings */
[class*="wui-"] .elementor-heading-title span,
[class*="wui-"] p span,
[class*="wui-"] li span {
  font-family: inherit !important;
}

[class*="wui-"] a:not(.elementor-button) {
  color: inherit !important;
  font-style: normal !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.15em !important;
}

[class*="wui-"] a:not(.elementor-button):hover {
  color: var(--wui-yellow) !important;
}

.wui-accent {
  color: var(--wui-yellow) !important;
}

/* =====================================================================
   DESKTOP (>= 1025)
   ===================================================================== */

/* ---------- 1. Hero ---------- */

.e-con.wui-hero {
  position: relative !important;
  width: 100% !important;
  height: calc(962 * var(--wui-u)) !important;
  overflow: hidden !important;
  padding: calc(325 * var(--wui-u)) 0 0 calc(258 * var(--wui-u)) !important;
  background: #1E1E1E !important;
}

.wui-hero__photo.elementor-widget {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.wui-hero__photo .elementor-widget-container,
.wui-banner__photo .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;
}

.wui-hero__photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 40% 25% !important;
  transform: scaleX(-1) !important; /* the PDF shows the photo mirrored */
  border-radius: 0 !important;
}

.wui-hero__title.elementor-widget {
  position: relative !important;
  z-index: 1 !important;
}

.wui-hero__title .elementor-heading-title {
  color: var(--wui-white) !important;
  font-weight: 400 !important;
}

.wui-hero__pre,
.wui-hero__big,
.wui-hero__sub {
  display: block !important;
  line-height: 1 !important;
}

.wui-hero__pre {
  font-size: calc(89 * var(--wui-u)) !important;
}

.wui-hero__big {
  font-size: calc(309 * var(--wui-u)) !important;
  /* in em of the WUI size, so every breakpoint keeps the PDF rhythm:
     Understanding -> WUI baselines = 0.84 x WUI size, WUI -> subtitle = 0.185 x WUI size */
  margin: -0.055em 0 -0.087em -0.03em !important;
}

.wui-hero__sub {
  font-size: calc(44 * var(--wui-u)) !important;
  color: var(--wui-yellow) !important;
}

/* ---------- 2. Intro ---------- */

.e-con.wui-intro {
  width: calc(1362 * var(--wui-u)) !important;
  margin: calc(226 * var(--wui-u)) auto 0 !important;
  padding-left: calc(12 * var(--wui-u)) !important;
}

.wui-intro__text p {
  font-size: calc(47 * var(--wui-u)) !important;
  line-height: calc(66 * var(--wui-u)) !important;
  font-weight: 400 !important;
  color: var(--wui-text) !important;
}

/* ---------- 3. Cards ---------- */

.e-con.wui-cards {
  width: calc(1601 * var(--wui-u)) !important;
  margin: calc(204 * var(--wui-u)) auto 0 !important;
  gap: calc(22 * var(--wui-u)) !important;
}

.e-con.wui-card {
  flex-direction: row !important;
  align-items: center !important;
  background: var(--wui-card) !important;
  border-radius: calc(26 * var(--wui-u)) !important;
  padding: calc(140 * var(--wui-u)) calc(141 * var(--wui-u)) calc(140 * var(--wui-u)) calc(197 * var(--wui-u)) !important;
}

.e-con.wui-card__head {
  flex: 0 0 calc(613 * var(--wui-u)) !important;
  width: calc(613 * var(--wui-u)) !important;
  padding-right: calc(140 * var(--wui-u)) !important;
  align-items: flex-start !important;
}

.wui-card__icon .wui-icon {
  display: block !important;
  width: auto !important;
  height: calc(92 * var(--wui-u)) !important;
  color: var(--wui-yellow) !important;
  margin-bottom: calc(31 * var(--wui-u)) !important;
}

.wui-card__title .elementor-heading-title {
  font-size: calc(47 * var(--wui-u)) !important;
  line-height: calc(46 * var(--wui-u)) !important;
  font-weight: 700 !important;
  color: var(--wui-text) !important;
}

.wui-card__sub {
  display: block !important;
  font-size: calc(38 * var(--wui-u)) !important;
  font-weight: 400 !important;
  color: var(--wui-yellow) !important;
}

.wui-card__text.elementor-widget {
  flex: 1 1 auto !important;
  width: auto !important;
}

.wui-card__text p {
  font-size: calc(25.5 * var(--wui-u)) !important;
  line-height: calc(40 * var(--wui-u)) !important;
  color: var(--wui-text) !important;
}

/* ---------- 4. Banner ---------- */

.e-con.wui-banner {
  position: relative !important;
  width: 100% !important;
  height: calc(1086 * var(--wui-u)) !important;
  margin-top: calc(169 * var(--wui-u)) !important;
  overflow: hidden !important;
  justify-content: flex-end !important;
  padding: 0 0 calc(150 * var(--wui-u)) calc(264 * var(--wui-u)) !important;
  background: #1E1E1E !important;
}

.wui-banner__photo.elementor-widget {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

.wui-banner__photo img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: 50% 61% !important;
  border-radius: 0 !important;
}

/* dark gradient under the text (bottom 57% of the banner, as in the PDF) */
.e-con.wui-banner::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 57% !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.wui-banner__text.elementor-widget {
  position: relative !important;
  z-index: 2 !important;
  max-width: calc(840 * var(--wui-u)) !important;
}

.wui-banner__text p {
  font-size: calc(50 * var(--wui-u)) !important;
  line-height: calc(60 * var(--wui-u)) !important;
  color: var(--wui-white) !important;
}

/* ---------- 5. Products ---------- */

.e-con.wui-products {
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: calc(1429 * var(--wui-u)) !important;
  margin: calc(168 * var(--wui-u)) auto 0 !important;
  gap: calc(35 * var(--wui-u)) !important;
}

.e-con.wui-product {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  background: var(--wui-card) !important;
  border-radius: calc(33 * var(--wui-u)) !important;
  overflow: hidden !important;
}

.wui-product__photo img {
  display: block !important;
  width: 100% !important;
  height: calc(397 * var(--wui-u)) !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.e-con.wui-product__body {
  flex: 1 1 auto !important;
  align-items: flex-start !important;
  padding: calc(69 * var(--wui-u)) calc(68 * var(--wui-u)) calc(52 * var(--wui-u)) !important;
}

.wui-product__logo img {
  display: block !important;
  width: auto !important;
  height: calc(76 * var(--wui-u)) !important;
  max-width: none !important;
  border-radius: 0 !important;
}

.wui-product__logo.elementor-widget {
  margin-bottom: calc(46 * var(--wui-u)) !important;
}

.wui-product__text p,
.wui-product__text li {
  font-size: calc(22.3 * var(--wui-u)) !important;
  line-height: calc(36 * var(--wui-u)) !important;
  color: var(--wui-text) !important;
}

.wui-product__text p + p,
.wui-product__text p + ul {
  margin-top: calc(36 * var(--wui-u)) !important;
}

.wui-std {
  list-style: none !important;
}

.wui-std li + li {
  margin-top: calc(19 * var(--wui-u)) !important;
}

.wui-std__code {
  color: var(--wui-yellow) !important;
  font-weight: 500 !important;
}

.wui-product__btn.elementor-widget {
  margin-top: auto !important;
  padding-top: calc(40 * var(--wui-u)) !important;
}

.wui-product__btn .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: calc(190 * var(--wui-u)) !important;
  height: calc(62 * var(--wui-u)) !important;
  padding: 0 calc(36 * var(--wui-u)) !important;
  margin-left: calc(-4 * var(--wui-u)) !important;
  background: var(--wui-yellow) !important;
  color: var(--wui-text) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--wui-font) !important;
  font-size: calc(22.3 * var(--wui-u)) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.wui-product__btn .elementor-button:hover {
  background: var(--wui-text) !important;
  color: var(--wui-white) !important;
}

/* ---------- 6. Article ---------- */

.e-con.wui-article {
  width: calc(1382 * var(--wui-u)) !important;
  margin: calc(134 * var(--wui-u)) auto 0 !important;
}

.wui-article__title .elementor-heading-title {
  font-size: calc(47 * var(--wui-u)) !important;
  line-height: calc(56 * var(--wui-u)) !important;
  font-weight: 400 !important;
  color: var(--wui-text) !important;
}

.wui-article__text.elementor-widget {
  margin-top: calc(37 * var(--wui-u)) !important;
}

.wui-article__text + .wui-article__title.elementor-widget {
  margin-top: calc(110 * var(--wui-u)) !important;
}

.wui-article__text p {
  font-size: calc(22.3 * var(--wui-u)) !important;
  line-height: calc(36 * var(--wui-u)) !important;
  color: var(--wui-text) !important;
}

/* ---------- 7. Summary ---------- */

.e-con.wui-summary {
  width: calc(1382 * var(--wui-u)) !important;
  margin: calc(96 * var(--wui-u)) auto 0 !important;
}

.wui-summary__text p {
  font-size: calc(47 * var(--wui-u)) !important;
  line-height: calc(56 * var(--wui-u)) !important;
  color: var(--wui-text) !important;
}

/* ---------- 8. Links ---------- */

.e-con.wui-links {
  width: calc(1491 * var(--wui-u)) !important;
  margin: calc(171 * var(--wui-u)) auto calc(174 * var(--wui-u)) !important;
  padding: calc(129 * var(--wui-u)) calc(105 * var(--wui-u)) calc(141 * var(--wui-u)) !important;
  background: var(--wui-card) !important;
  border-radius: calc(33 * var(--wui-u)) !important;
}

.wui-links__title .elementor-heading-title {
  font-size: calc(47 * var(--wui-u)) !important;
  line-height: calc(56 * var(--wui-u)) !important;
  font-weight: 400 !important;
  color: var(--wui-text) !important;
}

.wui-links__text.elementor-widget {
  margin-top: calc(42 * var(--wui-u)) !important;
}

.wui-links__list {
  list-style: none !important;
}

.wui-links__list li {
  font-size: calc(22.3 * var(--wui-u)) !important;
  line-height: calc(36 * var(--wui-u)) !important;
  color: var(--wui-text) !important;
}

/* =====================================================================
   TABLET (768–1024)
   ===================================================================== */

@media (max-width: 1024px) {
  .e-con.wui-hero {
    height: 600px !important;
    padding: 190px 40px 0 !important;
  }

  .wui-hero__pre { font-size: 48px !important; }
  .wui-hero__big { font-size: 168px !important; }
  .wui-hero__sub { font-size: 26px !important; }

  .e-con.wui-intro,
  .e-con.wui-article,
  .e-con.wui-summary {
    width: auto !important;
    margin-left: 40px !important;
    margin-right: 40px !important;
    padding-left: 0 !important;
  }

  .e-con.wui-intro { margin-top: 80px !important; }

  .wui-intro__text p {
    font-size: 30px !important;
    line-height: 42px !important;
  }

  .e-con.wui-cards {
    width: auto !important;
    margin: 80px 40px 0 !important;
    gap: 20px !important;
  }

  .e-con.wui-card {
    flex-direction: column !important;
    align-items: stretch !important;
    border-radius: 20px !important;
    padding: 56px 56px !important;
  }

  .e-con.wui-card__head {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-right: 0 !important;
    margin-bottom: 28px !important;
  }

  .wui-card__icon .wui-icon { height: 72px !important; margin-bottom: 24px !important; }

  .wui-card__title .elementor-heading-title {
    font-size: 34px !important;
    line-height: 40px !important;
  }

  .wui-card__sub { font-size: 28px !important; }

  .wui-card__text p {
    font-size: 20px !important;
    line-height: 32px !important;
  }

  .e-con.wui-banner {
    height: 560px !important;
    margin-top: 80px !important;
    padding: 0 40px 64px !important;
  }

  .wui-banner__text.elementor-widget { max-width: 600px !important; }

  .wui-banner__text p {
    font-size: 34px !important;
    line-height: 42px !important;
  }

  .e-con.wui-products {
    width: auto !important;
    margin: 80px 40px 0 !important;
    gap: 20px !important;
  }

  .e-con.wui-product { border-radius: 20px !important; }

  .wui-product__photo img { height: 260px !important; }

  .e-con.wui-product__body { padding: 40px 32px 40px !important; }

  .wui-product__logo img { height: 52px !important; }
  .wui-product__logo.elementor-widget { margin-bottom: 28px !important; }

  .wui-product__text p,
  .wui-product__text li {
    font-size: 17px !important;
    line-height: 27px !important;
  }

  .wui-product__text p + p,
  .wui-product__text p + ul { margin-top: 24px !important; }
  .wui-std li + li { margin-top: 12px !important; }

  .wui-product__btn.elementor-widget { padding-top: 32px !important; }

  .wui-product__btn .elementor-button {
    min-width: 150px !important;
    height: 48px !important;
    padding: 0 28px !important;
    margin-left: 0 !important;
    font-size: 17px !important;
  }

  .e-con.wui-article { margin-top: 80px !important; }

  .wui-article__title .elementor-heading-title,
  .wui-links__title .elementor-heading-title {
    font-size: 34px !important;
    line-height: 42px !important;
  }

  .wui-article__text.elementor-widget { margin-top: 24px !important; }
  .wui-article__text + .wui-article__title.elementor-widget { margin-top: 64px !important; }

  .wui-article__text p,
  .wui-links__list li {
    font-size: 18px !important;
    line-height: 29px !important;
  }

  .e-con.wui-summary { margin-top: 64px !important; }

  .wui-summary__text p {
    font-size: 30px !important;
    line-height: 40px !important;
  }

  .e-con.wui-links {
    width: auto !important;
    margin: 80px 40px 80px !important;
    padding: 56px 48px !important;
    border-radius: 20px !important;
  }

  .wui-links__text.elementor-widget { margin-top: 24px !important; }
  .wui-links__list li + li { margin-top: 8px !important; }
}

/* =====================================================================
   MOBILE (<= 767)
   ===================================================================== */

@media (max-width: 767px) {
  .e-con.wui-hero {
    height: 480px !important;
    padding: 150px 20px 0 !important;
  }

  .wui-hero__pre { font-size: 32px !important; }
  .wui-hero__big { font-size: 112px !important; }
  .wui-hero__sub { font-size: 18px !important; }

  .e-con.wui-intro,
  .e-con.wui-article,
  .e-con.wui-summary {
    margin-left: 20px !important;
    margin-right: 20px !important;
  }

  .e-con.wui-intro { margin-top: 52px !important; }

  .wui-intro__text p {
    font-size: 22px !important;
    line-height: 32px !important;
  }

  .e-con.wui-cards { margin: 52px 20px 0 !important; gap: 16px !important; }

  .e-con.wui-card { padding: 36px 24px !important; border-radius: 16px !important; }

  .e-con.wui-card__head { margin-bottom: 20px !important; }

  .wui-card__icon .wui-icon { height: 56px !important; margin-bottom: 20px !important; }

  .wui-card__title .elementor-heading-title {
    font-size: 26px !important;
    line-height: 31px !important;
  }

  .wui-card__sub { font-size: 21px !important; }

  .wui-card__text p {
    font-size: 17px !important;
    line-height: 27px !important;
  }

  .e-con.wui-banner {
    height: 440px !important;
    margin-top: 52px !important;
    padding: 0 20px 40px !important;
  }

  .wui-banner__text p {
    font-size: 24px !important;
    line-height: 31px !important;
  }

  .e-con.wui-products {
    flex-direction: column !important;
    margin: 52px 20px 0 !important;
    gap: 16px !important;
  }

  .e-con.wui-product { flex: 0 0 auto !important; border-radius: 16px !important; }

  .wui-product__photo img { height: 220px !important; }

  .e-con.wui-product__body { padding: 32px 24px 36px !important; }

  .wui-product__logo img { height: 46px !important; }

  .wui-product__text p,
  .wui-product__text li {
    font-size: 16px !important;
    line-height: 25px !important;
  }

  .e-con.wui-article { margin-top: 52px !important; }

  .wui-article__title .elementor-heading-title,
  .wui-links__title .elementor-heading-title {
    font-size: 26px !important;
    line-height: 32px !important;
  }

  .wui-article__text.elementor-widget { margin-top: 16px !important; }
  .wui-article__text + .wui-article__title.elementor-widget { margin-top: 52px !important; }

  .wui-article__text p,
  .wui-links__list li {
    font-size: 16px !important;
    line-height: 26px !important;
  }

  .e-con.wui-summary { margin-top: 52px !important; }

  .wui-summary__text p {
    font-size: 22px !important;
    line-height: 30px !important;
  }

  .e-con.wui-links {
    margin: 52px 20px 52px !important;
    padding: 36px 24px !important;
    border-radius: 16px !important;
  }

  .wui-links__text.elementor-widget { margin-top: 16px !important; }
}