/*
 * REDICO homepage alignment — preview patch, 2026-11-09.
 * Uses the existing redicoReadability layer. Its important declarations
 * precede redicoUsability and redicoBento in the site's cascade.
 * Scope: body.home.rdx-live only.
 */
@layer redicoReadability {
  /* main.rdx-wrap already supplies the outer page gutter. */
  body.home.rdx-live #rdx-layout #content
    > :is(.rdx-hero, .rdx-section, .rdx-closing) {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  /* Restore component heading sizes instead of the legacy global h3 size. */
  body.home.rdx-live #rdx-layout .rdx-role-card h3 {
    font-size: clamp(15px, 1.52vw, 21px) !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
  }

  body.home.rdx-live #rdx-layout .rdx-audience h3 {
    font-size: 17px !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
  }

  /* Match the existing main and footer container on desktop/tablet. */
  @media (min-width: 761px) {
    body.home.rdx-live .rx-header.rpm-header
      .rx-header-in.rr-reference-header {
      width: min(1280px, calc(100% - 72px)) !important;
      max-width: 1280px !important;
      margin-inline: auto !important;
      padding-inline: 0 !important;
    }
  }

  /* 1150px is the existing .rdx-wrap container breakpoint. */
  @media (min-width: 761px) and (max-width: 1150px) {
    body.home.rdx-live .rx-header.rpm-header
      .rx-header-in.rr-reference-header {
      width: calc(100% - 42px) !important;
    }
  }

  /* Use the existing full-menu trigger between mobile and desktop layouts.
     Reset the obsolete <=767px full-width contacts rule explicitly. */
  @media (min-width: 761px) and (max-width: 999px) {
    body.home.rdx-live .rx-header.rpm-header
      .rx-header-in.rr-reference-header {
      display: grid !important;
      grid-template-columns: minmax(131px, 1fr) auto auto auto !important;
      grid-template-rows: auto !important;
      grid-template-areas: "brand menu contacts theme" !important;
      align-items: center !important;
      gap: 12px !important;
      height: auto !important;
      min-height: 76px !important;
      padding-block: 10px !important;
    }

    body.home.rdx-live .rx-header.rpm-header
      .rx-header-in.rr-reference-header > :first-child {
      grid-area: brand !important;
      min-width: 0 !important;
    }

    body.home.rdx-live .rx-header.rpm-header
      .rx-header-in.rr-reference-header > .rpm {
      grid-area: menu !important;
      width: auto !important;
      min-width: 92px !important;
    }

    body.home.rdx-live .rx-header.rpm-header #rpm-primary-nav .rpm-rail {
      display: none !important;
    }

    body.home.rdx-live .rx-header.rpm-header #rpm-primary-nav .rpm-burger {
      display: flex !important;
      visibility: visible !important;
      pointer-events: auto !important;
      min-height: 44px !important;
    }

    body.home.rdx-live .rx-header.rpm-header
      .rx-header-in.rr-reference-header > .rx-header-contacts {
      grid-area: contacts !important;
      position: static !important;
      inset: auto !important;
      width: auto !important;
      inline-size: auto !important;
      min-width: 0 !important;
      flex: 0 0 auto !important;
      display: flex !important;
      flex-flow: row-reverse nowrap !important;
      align-items: center !important;
      gap: 12px !important;
    }

    body.home.rdx-live .rx-header.rpm-header
      .rx-header-in.rr-reference-header > .rx-hdr-right {
      grid-area: theme !important;
      width: auto !important;
      inline-size: auto !important;
      min-width: 64px !important;
      flex: 0 0 auto !important;
    }
  }

  /* Four resource columns cannot contain the existing labels at 761px. */
  @media (max-width: 930px) {
    body.home.rdx-live #rdx-layout .rdx-resource-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }

  @media (max-width: 760px) {
    body.home.rdx-live #rdx-layout .rdx-audience h3 {
      font-size: 15px !important;
    }

    /* Increase only the contact targets' vertical extent. */
    body.home.rdx-live.rdx-native-header .rx-header.rpm-header
      .rx-header-contacts a {
      min-height: 44px !important;
      height: 44px !important;
      min-block-size: 44px !important;
      block-size: 44px !important;
    }
  }

  /* At tablet widths the fixed rail also overlaps the main form.
     This existing body child follows the homepage footer in DOM order. */
  @media (max-width: 1150px) {
    body.home.rdx-live > #rx-app-link.rx-calctab {
      position: relative !important;
      inset: auto !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex-direction: row !important;
      gap: 10px !important;
      width: calc(100% - 42px) !important;
      min-width: 0 !important;
      max-width: none !important;
      height: auto !important;
      min-height: 44px !important;
      margin: 16px auto 24px !important;
      padding: 12px 16px !important;
      border-radius: 12px !important;
      transform: none !important;
      translate: none !important;
      rotate: none !important;
      writing-mode: horizontal-tb !important;
      white-space: normal !important;
      font-size: 14px !important;
      line-height: 1.4 !important;
      z-index: auto !important;
    }

    body.home.rdx-live > #rx-app-link .rx-calctab__t {
      position: static !important;
      display: inline !important;
      width: auto !important;
      height: auto !important;
      transform: none !important;
      translate: none !important;
      rotate: none !important;
      writing-mode: horizontal-tb !important;
      text-orientation: mixed !important;
      white-space: normal !important;
      word-break: normal !important;
      overflow-wrap: normal !important;
      font-size: 14px !important;
      line-height: 1.4 !important;
      letter-spacing: 0.02em !important;
    }

    body.home.rdx-live > #rx-app-link .rx-calctab__i {
      position: static !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      flex: 0 0 auto !important;
      transform: none !important;
      translate: none !important;
      rotate: none !important;
    }
  }

  @media (max-width: 760px) {
    body.home.rdx-live > #rx-app-link.rx-calctab {
      width: calc(100% - 24px) !important;
    }
  }

  @media (max-width: 375px) {
    body.home.rdx-live > #rx-app-link.rx-calctab {
      width: calc(100% - 20px) !important;
    }
  }

  /* Keep full words readable on narrow phones without shrinking the type. */
  @media (max-width: 360px) {
    body.home.rdx-live #rdx-layout
      :is(.rdx-audience-grid, .rdx-resource-grid) {
      grid-template-columns: minmax(0, 1fr) !important;
    }
  }
}


/* REDICO homepage: restrained feedback, 2026-11-09.
 * Existing --ease is kept as the site's motion token.
 * No new runtime or event handlers. Existing dialog/focus logic is preserved.
 */
@layer redicoReadability {
  body.home.rdx-live #rdx-layout .rdx-button {
    transition:
      transform 140ms var(--ease),
      background-color 160ms ease,
      border-color 160ms ease,
      color 160ms ease !important;
  }

  @media (prefers-reduced-motion: no-preference) {
    body.home.rdx-live #rdx-layout .rdx-button:active:not(:disabled):not([aria-disabled="true"]):not(:focus-visible) {
      transform: scale(.97) !important;
    }
  }

  @media (hover: none), (pointer: coarse) {
    body.home.rdx-live #rdx-layout .rdx-button:hover:not(:active),
    body.home.rdx-live #rdx-layout .rdx-button:hover svg {
      transform: none !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.home.rdx-live #rdx-layout .rdx-button,
    body.home.rdx-live #rdx-layout .rdx-button svg {
      transform: none !important;
      transition-property: background-color, border-color, color !important;
      transition-duration: 100ms !important;
    }
  }
}

/* Opening-only transitions: the existing close handler immediately restores
 * the form to the page and returns focus. Do not delay that behaviour.
 * Browsers without @starting-style retain an immediate, usable dialog.
 */
@media (prefers-reduced-motion: no-preference) {
  body.home.rdx-live #rdx-quote-dialog[open] {
    opacity: 1;
    transform: scale(1);
    transform-origin: center;
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }

  body.home.rdx-live #rpm-dialog[open] {
    opacity: 1;
    transition: opacity 180ms var(--ease);
  }

  @starting-style {
    body.home.rdx-live #rdx-quote-dialog[open] {
      opacity: 0;
      transform: scale(.96);
    }
    body.home.rdx-live #rpm-dialog[open] {
      opacity: 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home.rdx-live #rdx-quote-dialog[open],
  body.home.rdx-live #rpm-dialog[open] {
    animation: none;
    transition: none;
    transform: none;
  }
}
