/*!
 * Webinar recording pages (template-webinar-recording.php) — 26816 PL /
 * 62711 EN. Hand-written plain CSS, not built from SCSS: this template has no
 * Gulp entry, same as css/legal-document.css. (css/confirmation.css was the
 * other example here until it gained an SCSS source.)
 *
 * Every number here was MEASURED on live remotesensei.org (2026-08-12,
 * viewports 1280 and 375) rather than guessed, because the page it replaces was
 * pure Elementor and its geometry came from the kit, not from any source file:
 *
 *   section padding          80px 0     (mobile 40px 0)
 *   boxed container          max-width 1140px, 10px inner padding  -> 1120 content
 *   video                    1120 x 630 desktop / 355 x 200 mobile  = 16:9, black
 *   gap after video          20px
 *   chevron                  34px, centred, #34383C, 20px below it
 *   CTA                      #FFC94B bg / #34383C text, Montserrat 600 18px/1.2,
 *                            15px 30px padding, 5px radius,
 *                            shadow 0 20px 40px -10px rgba(38,50,56,.2)
 *                            hover #FFB710, focus #E5B137 (style.css:1613-1626)
 *   CTA width                shrink-to-fit desktop, full width at <=767
 *
 * Colours use the design tokens where a token exists for the exact value
 * (--rs-yellow-00 IS #FFC94B, --rs-yellow-btn-hover IS #FFB710,
 * --rs-black-prime IS #34383C); the
 * legacy hex is kept as the fallback so the page is still correct if
 * rs-design-tokens.css ever fails to load.
 *
 * Scoped entirely under .rs-webinar so nothing leaks onto another page.
 */

.rs-webinar__section {
  padding: 80px 0;
}

/* 10px on all four sides, not just the horizontal pair: Elementor's
   `.elementor-widget-wrap` padded the column uniformly, so the live content
   starts 10px below the section's 80px and ends 10px above it. Dropping the
   vertical half shortens the block by 20px against live for no reason. */
.rs-webinar__inner {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px;
}

/* The page title. Hidden the same way Bootstrap's .visually-hidden hides
   things — kept in the accessibility tree and in the document outline, unlike
   the theme-wide `h1.entry-title{display:none}` it replaces. Delete this rule
   to make the heading visible; nothing else has to change. */
.rs-webinar__title {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rs-webinar__player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 20px;
  background-color: #000;
  object-fit: cover;
}

.rs-webinar__config-warning {
  margin: 0 0 20px;
  padding: 16px;
  border: 1px dashed var(--rs-coral-00, #F35B54);
  color: var(--rs-coral-dark-30, #B73F3A);
}

.rs-webinar__scroll {
  display: block;
  margin: 0 0 20px;
  color: var(--rs-black-prime, #34383C);
  font-size: 34px;
  /* 1.265, not 1: Elementor's icon widget left the glyph on the inherited
     `line-height: normal`, which measured a 43px box around the 34px icon.
     `line-height: 1` makes it 37px and the whole page ends up 6px shorter than
     live at every breakpoint. 34 x 1.265 = 43. */
  line-height: 1.265;
  text-align: center;
  text-decoration: none;
  transition: color 0.3s ease-in-out;
}

.rs-webinar__scroll:hover,
.rs-webinar__scroll:focus-visible {
  color: var(--rs-yellow-btn-hover, #FFB710);
}

.rs-webinar__cta {
  text-align: center;
}

.rs-webinar__cta-btn {
  display: inline-block;
  padding: 15px 30px;
  border: 0;
  border-radius: 5px;
  background-color: var(--rs-yellow-00, #FFC94B);
  box-shadow: 0 20px 40px -10px rgba(38, 50, 56, 0.2);
  color: var(--rs-black-prime, #34383C);
  font-family: Montserrat, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.rs-webinar__cta-btn:hover {
  background-color: var(--rs-yellow-btn-hover, #FFB710);
  box-shadow: 0 10px 20px -5px rgba(38, 50, 56, 0.3);
  color: var(--rs-black-prime, #34383C);
}

.rs-webinar__cta-btn:focus-visible {
  background-color: var(--rs-yellow-dark-10, #E5B137);
  box-shadow: 0 5px 10px -5px rgba(38, 50, 56, 0.4);
  color: var(--rs-black-prime, #34383C);
  outline: 2px solid var(--rs-black-prime, #34383C);
  outline-offset: 2px;
}

/* Elementor had `align_mobile: justify` + `_element_width_mobile: inherit` on
   the button, which renders as a full-bleed CTA below the tablet breakpoint. */
@media (max-width: 767px) {
  .rs-webinar__section {
    padding: 40px 0;
  }

  .rs-webinar__cta-btn {
    display: block;
    width: 100%;
  }
}