/* ==========================================================================
   Styling for the Elementor-built landing pages.
   Classes here are the ones the section generator attaches, so a change in
   this file moves every page that uses the pattern.
   ========================================================================== */

/* The legacy utilities are the compiled Tailwind from the Next.js build, with
   Tailwind's preflight removed. These are the few reset rules the carried-over
   fragments genuinely relied on, scoped to the HTML widgets that hold them so
   Gutenberg lists elsewhere keep their bullets. */
.elementor-widget-html :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
.elementor-widget-html :is(p, h1, h2, h3, h4, h5, h6, figure, blockquote) { margin: 0; }
.elementor-widget-html img { display: block; max-width: 100%; height: auto; }
.elementor-widget-html svg { display: block; }
.elementor-widget-html * { box-sizing: border-box; }

/* Elementor prints its own <h1>-<h6> inside .elementor-heading-title; the
   brand scale is applied there rather than to the bare tag. */
.elementor-widget-heading .elementor-heading-title { font-family: var(--rd-font-heading); }

/* --- Section furniture --------------------------------------------------- */

.rd-section { width: 100%; }

.rd-eyebrow .elementor-heading-title {
  font-family: var(--rd-font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--rd-blue);
  margin-bottom: 12px;
}
.rd-section--navy .rd-eyebrow .elementor-heading-title,
.rd-section--blue .rd-eyebrow .elementor-heading-title { color: var(--rd-sky); }

/* Section intros are short, so they are centred; DESIGN.md section 3 allows
   centring only for short hero headlines and section intros. */
.rd-section__title .elementor-heading-title,
.rd-section__intro {
  max-width: 42rem;
  margin-inline: auto;
  text-align: center;
}
.rd-section__intro { font-size: 1.0625rem; margin-bottom: 40px; }
.rd-section__intro p { margin: 0; }

@media (min-width: 768px) {
  .rd-section__intro { font-size: 1.125rem; margin-bottom: 56px; }
}

.rd-section--navy .rd-section__intro,
.rd-section--blue .rd-section__intro { color: rgba(255, 255, 255, 0.82); }
.rd-section--mist .rd-section__intro { color: var(--rd-muted-on-mist); }

/* --- Card grids ---------------------------------------------------------- */

.rd-egrid { align-items: stretch; }

.rd-egrid > .e-con,
.rd-egrid > .elementor-element {
  flex: 1 1 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .rd-egrid--2 > .e-con, .rd-egrid--2 > .elementor-element,
  .rd-egrid--4 > .e-con, .rd-egrid--4 > .elementor-element { flex-basis: calc(50% - 12px); }
}

@media (min-width: 900px) {
  .rd-egrid--3 > .e-con, .rd-egrid--3 > .elementor-element { flex-basis: calc(33.333% - 16px); }
  .rd-egrid--4 > .e-con, .rd-egrid--4 > .elementor-element { flex-basis: calc(25% - 18px); }
}

/* The card itself is an Elementor container, so the padding and border come
   from .rd-card in brand.css and only the flow needs setting here. */
.rd-egrid .rd-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.rd-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: var(--rd-radius);
  background: var(--rd-blue);
  color: #fff;
}
.rd-card__icon svg { width: 24px; height: 24px; }

.rd-section--navy .rd-card__icon,
.rd-section--blue .rd-card__icon { background: rgba(255, 255, 255, 0.14); }

.rd-card__title .elementor-heading-title { margin-bottom: 8px; }
.rd-card__title a { color: inherit; text-decoration: none; }
.rd-card__title a:hover { color: var(--rd-blue); text-decoration: none; }
.rd-section--navy .rd-card__title a:hover,
.rd-section--blue .rd-card__title a:hover { color: var(--rd-sky); }

.rd-egrid .rd-card .elementor-widget-text-editor { margin-bottom: 16px; }
.rd-egrid .rd-card .elementor-widget-text-editor:last-child { margin-bottom: 0; }

/* Card link reads as a text link with an arrow, not a filled button. */
.rd-cardlink .elementor-button {
  margin-top: auto;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--rd-blue);
  font-weight: 700;
}
.rd-cardlink .elementor-button:hover { background: none; text-decoration: underline; }
.rd-cardlink .elementor-button::after { content: " \2192"; }
.rd-section--navy .rd-cardlink .elementor-button,
.rd-section--blue .rd-cardlink .elementor-button { color: var(--rd-sky); }

/* --- Button rows --------------------------------------------------------- */

.rd-btnrow { margin-top: 32px; }
.rd-btnrow .elementor-widget-button { width: auto; }

@media (max-width: 479px) {
  .rd-btnrow { flex-direction: column; align-items: stretch; }
  .rd-btnrow .elementor-button { width: 100%; }
}

/* --- Hero ---------------------------------------------------------------- */

.rd-hero__grid { align-items: center; }

.rd-hero__col { flex: 1 1 100%; min-width: 0; }

@media (min-width: 1024px) {
  .rd-hero__col { flex: 1 1 calc(50% - 20px); }
  /* DESIGN.md gives the copy slightly more room than the aside card. */
  .rd-hero__grid > .rd-hero__col:first-child { flex-basis: calc(52.5% - 20px); }
  .rd-hero__grid > .rd-hero__aside { flex-basis: calc(47.5% - 20px); }
}

.rd-hero__title .elementor-heading-title {
  color: #fff;
  text-align: left;
  max-width: none;
  margin-inline: 0;
}

.rd-hero__lead {
  margin-top: 20px;
  max-width: 34rem;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, 0.8);
  text-align: left;
  margin-inline: 0;
}
.rd-hero__lead p { margin: 0; }

@media (min-width: 768px) {
  .rd-hero__lead { margin-top: 24px; font-size: 1.1875rem; }
}

/* --- Long tables inside fragments --------------------------------------- */

.elementor-widget-html table { width: 100%; border-collapse: collapse; }

/* Only tables, diagrams and code may exceed the viewport, each in its own
   scroller, so the page body never scrolls sideways. */
.elementor-widget-html .overflow-x-auto { overflow-x: auto; }

/* --- Lead form ----------------------------------------------------------- */

.rd-lead { max-width: 28rem; }
.rd-section--navy .rd-lead, .rd-hero__aside .rd-lead { max-width: none; }

.rd-lead__field { margin-bottom: 16px; }
.rd-lead__field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--rd-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--rd-navy);
}
.rd-section--navy .rd-lead__field label,
.rd-hero__aside .rd-lead__field label { color: #fff; }

.rd-lead__submit { width: 100%; margin-top: 8px; }

@media (min-width: 640px) {
  .rd-lead__submit { width: auto; }
}

.rd-lead__note { margin: 12px 0 0; font-size: 14px; }
.rd-section--navy .rd-lead__note,
.rd-hero__aside .rd-lead__note { color: rgba(255, 255, 255, 0.7); }

.rd-lead__error {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--rd-radius);
  background: #fef3f2;
  border: 1px solid var(--rd-red);
  color: #8a1c14;
  font-size: 14px;
}

/* The honeypot must be reachable by a bot and invisible to a person, so it is
   moved off-screen rather than display:none. */
.rd-lead__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Tool notice --------------------------------------------------------- */

.rd-toolnotice {
  background: #fff7e6;
  border-bottom: 1px solid #ffd490;
}
.rd-toolnotice__inner {
  max-width: var(--rd-max);
  margin-inline: auto;
  padding: 14px var(--rd-gutter);
}
.rd-toolnotice p {
  margin: 0;
  font-size: 15px;
  color: #6b4a00;
}
.rd-toolnotice a { color: #8a5a00; text-decoration: underline; }

/* A disabled tool form should read as disabled. */
.elementor-widget-html form[aria-disabled="true"] { opacity: 0.6; }
.elementor-widget-html form[aria-disabled="true"] :is(input, textarea, button) { cursor: not-allowed; }