/* Rethink extensions: classes the design-system bundle doesn't have yet, written in the same conventions
   (tokens only, body.rm prefix so they beat Elementor's atomic base styles). Candidates to add to the
   design system itself. Registered as Elementor Global Classes with the same names. */

/* Lead / intro text */
body.rm .rm-lead { font-size: 17px; line-height: 27px; color: var(--ink-muted); max-width: var(--measure); margin: 0; }

/* Section heading block: eyebrow + h2 + lead + optional arrow link */
body.rm .rm-section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: var(--measure); padding: 0; }
body.rm .rm-section-head__title { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 38px; letter-spacing: -0.005em; color: var(--ink); margin: 0; }

/* Stack: simple vertical group with the card gap */
body.rm .rm-stack { display: flex; flex-direction: column; gap: var(--space-5); padding: 0; }
body.rm .rm-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: 0; }

/* Page hero: copy + photo */
body.rm .rm-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-9); align-items: center; padding: var(--space-8) 0; }
body.rm .rm-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); padding: 0; }
body.rm .rm-hero__title { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 46px; letter-spacing: -0.005em; color: var(--ink); margin: 0; }
body.rm .rm-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: 0; }
body.rm .rm-hero__media { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: var(--sage-light); padding: 0; }
body.rm .rm-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

/* Trust strip: short facts with a check icon */
body.rm .rm-trust { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; padding: 0; }
body.rm .rm-trust__item { display: inline-flex; gap: var(--space-2); align-items: center; padding: 0; }
body.rm .rm-trust__icon { width: 20px; height: 20px; color: var(--slate); flex-shrink: 0; }
body.rm .rm-trust__icon svg { width: 20px; height: 20px; }
body.rm .rm-trust__text { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); margin: 0; }

/* One step inside .rm-steps when built from Elementor containers (the bundle styles li) */
body.rm .rm-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--pad-card); display: flex; flex-direction: column; gap: var(--space-2); }
body.rm .rm-steps__num { margin: 0; }

/* Atomic element fix-ups for bundle components */
body.rm .rm-card__icon svg, body.rm .rm-card__icon .e-svg-base { width: 22px; height: 22px; }
body.rm .rm-tile .rm-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; padding: 0; margin: 0; border-radius: 0; }
body.rm .rm-tile .rm-tile__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .4s; }
body.rm a.rm-tile:hover .rm-tile__img img { transform: scale(1.04); }
body.rm .rm-author-cta__photo img { border-radius: 50%; }
body.rm :is(.rm-cta, .rm-card, .rm-author-cta, .rm-signup, .rm-tile, .rm-chips) :where(p, h2, h3, h4) { margin: 0; }

@media (max-width: 1024px) {
  body.rm .rm-hero { gap: var(--space-7); }
}
@media (max-width: 767px) {
  body.rm .rm-hero { grid-template-columns: minmax(0, 1fr); padding: var(--space-6) 0; }
  body.rm .rm-hero__title { font-size: 32px; line-height: 38px; }
  body.rm .rm-section-head__title { font-size: 26px; line-height: 32px; }
}

/* Atomic element fix-ups (Elementor 4): line icons, arrow links, flex children */
/* Elementor rewrites uploaded SVGs to fill="currentColor"; the design-system icons are stroke-only. */
body.rm :is(.rm-card__icon, .rm-trust__icon, .rm-icon) svg { fill: none; stroke: currentColor; }
body.rm .rm-card__icon > .e-svg-base { width: 22px; height: 22px; }
body.rm .rm-trust__icon > .e-svg-base { width: 20px; height: 20px; }
body.rm .rm-icon { display: inline-flex; width: 20px; height: 20px; color: var(--slate); }
body.rm .rm-icon > .e-svg-base { width: 100%; height: 100%; }
/* Arrow links built from Elementor buttons: drop the button look */
body.rm .rm-arrow-link { background: none; padding: 0; border: 0; border-radius: 0; width: auto; align-self: flex-start; color: var(--slate); }
body.rm .rm-arrow-link:hover { background: none; color: var(--ink); }
/* Elementor atomic boxes default to full width; let these size to content */
body.rm .rm-signup > .e-con { width: auto; }
body.rm .rm-signup__copy { flex: 1 1 320px; }
body.rm .rm-signup__form { flex: 0 0 auto; }
body.rm :is(.rm-row, .rm-hero__actions, .rm-chips) > * { width: auto; }
/* Elementor atomic boxes add 10px padding by default; bundle classes that don't set padding need 0 */
body.rm :is(.rm-card__icon, .rm-trust__icon, .rm-icon, .rm-chips, .rm-signup__copy, .rm-signup__form, .rm-author-cta__body, .rm-author-cta__photo, .rm-grid-3, .rm-steps, .rm-tile) { padding: 0; }
body.rm .rm-tile { padding: 0; }
body.rm .rm-trust > .e-con { width: auto; }
