/* Homepage redesign, enqueued on WHD_HOME_PAGE_ID only. Unlayered: WP/Woo/Elementor CSS beats any @layer. */

/* --- Elementor globals ------------------------------------------------------
   The kit's globals aliased to our tokens for this page's content only. The header and footer are
   separate Elementor documents and keep the kit. Pilot of the sitewide mapping. */

.whd-home [data-elementor-type="wp-page"] {
  --e-global-color-primary: var(--color-contrast-1);
  --e-global-color-91bdf24: var(--color-contrast-1);
  --e-global-color-text: var(--color-contrast);
  --e-global-color-d56610f: var(--color-contrast);
  --e-global-color-accent: var(--color-accent-blue-on-contrast);
  --e-global-color-24dd3ba: var(--color-accent-blue-on-contrast);
  /* The kit's link colour; its #0C8AB9 is 3.8:1 on the page background. */
  --e-global-color-8df0586: var(--color-contrast-2);
  --e-global-color-secondary: var(--color-base-2);
  --e-global-color-d8de003: var(--color-base-2);
  --e-global-color-e3db365: var(--color-base-0);
  --e-global-color-01d4870: var(--color-base);
  --e-global-color-e4497c8: var(--color-base);
  --e-global-color-e08ed14: var(--color-neutral);
  --e-global-color-f494767: var(--color-accent-orange);

  --e-global-typography-primary-font-family: var(--font-family-heading);
  --e-global-typography-primary-font-size: var(--font-size-2xl);
  --e-global-typography-primary-font-weight: var(--font-weight-heading);
  --e-global-typography-primary-line-height: var(--line-height-heading);
  --e-global-typography-secondary-font-family: var(--font-family-heading);
  --e-global-typography-secondary-font-size: var(--font-size-xl);
  --e-global-typography-secondary-font-weight: var(--font-weight-heading);
  --e-global-typography-secondary-line-height: var(--line-height-snug);
  --e-global-typography-text-font-family: var(--font-family-body);
  --e-global-typography-text-font-size: var(--font-size-base);
  --e-global-typography-text-font-weight: var(--font-weight-regular);
  --e-global-typography-text-line-height: var(--line-height-base);
  --e-global-typography-accent-font-family: var(--font-family-body);
  --e-global-typography-accent-font-size: var(--font-size-md);
  --e-global-typography-accent-font-weight: var(--font-weight-bold);
  --e-global-typography-accent-line-height: var(--line-height-snug);

  /* Custom typographies: family only until their roles are mapped. */
  --e-global-typography-ca1dd07-font-family: var(--font-family-body);
  --e-global-typography-2a3f933-font-family: var(--font-family-body);
  --e-global-typography-e65f844-font-family: var(--font-family-body);
  --e-global-typography-c9bf46d-font-family: var(--font-family-body);
  --e-global-typography-eae3b33-font-family: var(--font-family-body);
  --e-global-typography-1297986-font-family: var(--font-family-body);
  --e-global-typography-75bbec6-font-family: var(--font-family-body);
  --e-global-typography-f286bcd-font-family: var(--font-family-body);

  /* The kit sets DM Sans at 18px on body. */
  color: var(--text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

/* (0,1,2): above the kit's `h2` rules (0,1,1), below any two-class component rule. */
body:where(.whd-home) [data-elementor-type="wp-page"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-heading);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
  text-wrap: balance;
}

body:where(.whd-home) [data-elementor-type="wp-page"] h1 {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-heading);
}

body:where(.whd-home) [data-elementor-type="wp-page"] h2 {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-heading);
}

body:where(.whd-home) [data-elementor-type="wp-page"] h3 {
  font-size: var(--font-size-xl);
}

body:where(.whd-home) [data-elementor-type="wp-page"] h4 {
  font-size: var(--font-size-lg);
}

body:where(.whd-home) [data-elementor-type="wp-page"] h5 {
  font-size: var(--font-size-md);
}

body:where(.whd-home) [data-elementor-type="wp-page"] h6 {
  font-size: var(--font-size-sm);
}

/* --- Hero --------------------------------------------------------------------
   .whd-hero > .whd-hero__text + .whd-hero__media; the photo bleeds right until 120rem. */

.whd-hero.whd-hero {
  --whd-hero-text: 42.8125rem;
  --whd-hero-gap: var(--space-fluid-lg);

  display: grid;
  grid-template-columns:
    [full-start] var(--space-edge)
    [text-start media-start] minmax(0, 1fr)
    [text-end content-end] var(--space-edge)
    [full-end];
  gap: var(--space-fluid-lg) 0;
  padding: var(--space-fluid-lg) 0 0;
}

.whd-hero__text.whd-hero__text {
  --flex-direction: column;

  display: flex;
  flex-direction: column;
  grid-column: text-start / text-end;
  align-self: center;
  gap: var(--space-fluid-sm);
  padding: 0;
}

.whd-hero__title.whd-hero__title .elementor-heading-title {
  color: var(--text-heading);
  font-family: var(--font-family-heading);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

/* On the <p>: Elementor forces max-width: 100% on widgets. */
.whd-hero__lead.whd-hero__lead p {
  max-inline-size: 35.625rem;
  margin: 0;
  color: var(--text-heading);
  font-size: var(--font-size-md);
  line-height: 1.55;
  letter-spacing: var(--letter-spacing-heading);
}

.whd-hero__cta.whd-hero__cta {
  -webkit-margin-before: var(--space-fluid-sm);
  margin-block-start: var(--space-fluid-sm);
}

/* Phones: a staircase; from 48rem: a row with chevrons. */
.whd-hero__steps ol {
  counter-reset: whd-hero-step;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  max-inline-size: 24rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.whd-hero__steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-xs) 0.75rem var(--space-xs) var(--space-xs);
  border-radius: var(--radius-btn);
  background: var(--surface-soft);
  color: var(--text-heading);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-heading);
  counter-increment: whd-hero-step;
}

/* --text-link: white on --accent is under 4.5:1. */
.whd-hero__steps li::before {
  content: counter(whd-hero-step);
  content: counter(whd-hero-step) / "";
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 1.4375rem;
  block-size: 1.4375rem;
  border-radius: 50%;
  background: var(--text-link);
  color: var(--text-on-inverse);
  font-size: 0.85rem;
  line-height: 1;
}

.whd-hero__steps li:nth-child(2) {
  align-self: center;
}

.whd-hero__steps li:nth-child(3) {
  align-self: flex-end;
}

.whd-hero__rating.whd-hero__rating {
  -webkit-margin-before: var(--space-xs);
  margin-block-start: var(--space-xs);
}

body:not(.elementor-editor-active) .whd-hero__rating:not(:has(.whd-rating)) {
  display: none;
}

/* Doubled class over Elementor's widget `position: relative`. */
.whd-hero__media.whd-hero__media {
  position: relative;
  grid-column: media-start / full-end;
  min-block-size: 30rem;
  overflow: hidden;
  border-radius: var(--radius-hero) 0 0 var(--radius-hero);
  background: var(--surface-sunken);
}

.whd-hero__media.whd-hero__media img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 50% 20%;
  object-position: 50% 20%;
}

@media (max-width: 47.999rem) {
  .whd-hero__cta.whd-hero__cta .elementor-button {
    inline-size: 100%;
  }
}

@media (min-width: 48rem) {
  .whd-hero__steps ol {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) 2rem;
    max-inline-size: none;
  }

  .whd-hero__steps li:nth-child(n) {
    align-self: auto;
  }

  .whd-hero__steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: calc(100% + 0.5rem);
    inline-size: 1rem;
    block-size: 1rem;
    transform: translateY(-50%);
    background-color: var(--accent-wash);
    -webkit-mask: url("../img/chevron-step.svg") center / contain no-repeat;
    mask: url("../img/chevron-step.svg") center / contain no-repeat;
  }
}

@media (min-width: 64rem) {
  .whd-hero.whd-hero {
    grid-template-columns:
      [full-start] minmax(var(--space-edge), 1fr)
      [text-start] minmax(0, var(--whd-hero-text))
      [text-end] var(--whd-hero-gap)
      [media-start] minmax(
        18rem,
        calc(min(100% - 2 * var(--space-edge), var(--width-content)) - var(--whd-hero-text) - var(--whd-hero-gap))
      )
      [content-end] minmax(var(--space-edge), 1fr)
      [full-end];
    -webkit-padding-before: 0;
    padding-block-start: 0;
  }

  .whd-hero__text.whd-hero__text,
  .whd-hero__media.whd-hero__media {
    grid-row: 1;
  }

  .whd-hero__text.whd-hero__text {
    padding-block: var(--space-fluid-md);
  }

  .whd-hero__media.whd-hero__media {
    min-block-size: clamp(30rem, 60vh, 44rem);
    border-radius: 0 0 0 var(--radius-hero);
  }
}

@media (min-width: 120rem) {
  .whd-hero__media.whd-hero__media {
    grid-column: media-start / content-end;
    border-radius: 0 0 var(--radius-md) var(--radius-hero);
  }
}