/**
 * @file
 * Campaign Monitor subscribe modal, styled to match the jlr_media media site.
 *
 * Plain CSS on purpose, and no tw- utility classes. The Tailwind `content` glob
 * in tailwind.config.js only scans theme templates and jlr_media/vue, never
 * web/modules/custom/drp/drp_rss_feed/templates, so any tw- class used from this
 * module's template would be purged from the build and silently do nothing.
 * Every value below is therefore the hardcoded equivalent of a jlr_media SCSS
 * token, with its source recorded so the two can be kept in step:
 *
 * - #0c121c            $modern-black         scss/_variables.scss:10
 * - rgba(12,18,28,.8)  $modern-hover         scss/_variables.scss:11
 * - #e9ecec            $modern-grey          scss/_variables.scss:12
 * - #f6f6f6            $modern-lightgrey     scss/_variables.scss:13
 * - #c4c4c4            $jlr-greythree        scss/_variables.scss:57
 * - #a94442            $state-danger-text    scss/legacy/_variables.scss:78
 * - overlay / panel    .social-popup         scss/modern-luxury/_social-bar.scss:105
 *                      (the footer's own modal, rendered next to our trigger:
 *                      dark scrim, flat white panel, max-width 496px, bare
 *                      close glyph top right, 0.7 opacity hover)
 * - panel scroll chrome .gallery-item.active  scss/2026/_new-grids.scss:785
 * - submit button      .btn-solid            scss/legacy/_button_styles.scss:47
 *                      (white on $modern-black, 2px border, inverts on hover.
 *                      Brand-neutral since Jan 2024, see _variables.scss:9)
 * - uppercase CTA type .expander-actions__btn scss/2026/_new-grids.scss:856
 * - checkbox fill      .new-grid__checkbox    scss/2026/_new-grids.scss:130
 * - focus ring         focus-ring mixin       scss/legacy/_mixins.scss:22
 *                      (inner 2px $modern-black + outer blue, applied globally
 *                      by scss/2026/_new-focus.scss)
 *
 * Typography is inherited, not declared. jlr_media emits font-family per brand
 * on `body` and on `body.<brand>` from scss/_typography.scss:714, so the modal
 * picks up the active brand's typeface for free. Form controls do not inherit
 * fonts by default, hence the explicit `font-family: inherit` below. The title
 * additionally carries the theme's own `bt-expanded-title` role class, which is
 * what jlr_media's gallery modal titles use (partial--card-expander.html.twig:51),
 * so per-brand size, letter-spacing and case come from the theme; the values
 * here are only the fallback for themes without that role.
 *
 * Module CSS loads before theme CSS, so theme rules win at equal specificity.
 * Selectors that must hold their own against the theme's global element rules
 * (scss/2026/_new-focus.scss targets bare `input` and `button`) are written with
 * two classes.
 */

/* Must stay first: the .drp-cm-subscribe display:flex below would defeat it. */
.drp-cm-subscribe[hidden] {
  display: none;
}

.drp-cm-subscribe {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.drp-cm-subscribe__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.drp-cm-subscribe__dialog {
  position: relative;
  width: 100%;
  max-width: 496px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /*
   * The top padding always clears the close control's 44px hit area (12px inset
   * + 44px = 56px), so the heading can never sit beside it or under it, at any
   * width down to 480px and below.
   */
  padding: 64px 20px 28px;
  border-radius: 0;
  background: #fff;
  color: #0c121c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .drp-cm-subscribe__dialog {
    padding: 64px 47px 47px;
  }
}

@media screen and (max-width: 479px) {
  .drp-cm-subscribe__dialog {
    padding: 64px 16px 24px;
  }
}

/*
 * Close control. 44x44 hit area, well clear of WCAG 2.2 SC 2.5.8's 24x24
 * minimum, with the glyph scaled up and centred so it reads as a deliberate
 * control. No new colour or shape language: square (border-radius 0), the
 * $modern-black glyph, and the $modern-grey hover wash that .new-grid__refine-btn
 * (scss/2026/_new-grids.scss:30) and .menu-search-expandable__button
 * (scss/2026/_new-search-nav.scss:69) use for their own hover state.
 *
 * The 12px inset also keeps the focus ring's 10px outer extent inside the
 * dialog's padding box, which matters because overflow-y: auto makes the
 * horizontal axis clip too.
 */
.drp-cm-subscribe__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #0c121c;
  font-family: inherit;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s linear;
}

.drp-cm-subscribe__close:hover,
.drp-cm-subscribe__close:active {
  background: #e9ecec;
  color: #0c121c;
}

.drp-cm-subscribe__title {
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media screen and (max-width: 990px) {
  .drp-cm-subscribe__title {
    font-size: 16px;
  }
}

.drp-cm-subscribe__field {
  margin-bottom: 20px;
}

.drp-cm-subscribe__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  letter-spacing: 1px;
}

.drp-cm-subscribe__required {
  color: #a94442;
}

.drp-cm-subscribe__input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #c4c4c4;
  border-radius: 0;
  background: #fff;
  color: #0c121c;
  /* Inherit the brand typeface; 16px also stops iOS zooming on focus. */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color 0.15s linear;
}

.drp-cm-subscribe__input:hover {
  border-color: #0c121c;
}

.drp-cm-subscribe .drp-cm-subscribe__input:focus,
.drp-cm-subscribe .drp-cm-subscribe__input:focus-visible {
  border-color: #0c121c;
}

.drp-cm-subscribe__input::placeholder {
  color: rgba(12, 18, 28, 0.5);
}

/*
 * :user-invalid, not :invalid. A required empty field matches :invalid the
 * moment the modal opens, which painted both inputs red before the user had
 * typed anything. :user-invalid only matches after the user has edited the
 * field or attempted a submit, and is supported in every current engine, so no
 * JS state class is needed.
 */
.drp-cm-subscribe .drp-cm-subscribe__input:user-invalid {
  border-color: #a94442;
}

.drp-cm-subscribe__honeypot {
  /*
   * display:none, never an sr-only/clip class. Clipped fields get filled by
   * browser autofill and password managers, and Campaign Monitor then silently
   * rejects genuine subscribers.
   */
  display: none;
}

.drp-cm-subscribe__consent {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}

.drp-cm-subscribe__checkbox {
  flex: 0 0 auto;
  /* 17px square with a $modern-black fill, as the facet checkboxes. Kept as a
     native control rather than the theme's label::before construction so the
     real focus ring and announcement are preserved. */
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  accent-color: #0c121c;
  cursor: pointer;
}

.drp-cm-subscribe__consent-label {
  flex: 1 1 0;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.drp-cm-subscribe .drp-cm-subscribe__checkbox:user-invalid {
  outline: 2px solid #a94442;
  outline-offset: 1px;
}

.drp-cm-subscribe .drp-cm-subscribe__checkbox:user-invalid + .drp-cm-subscribe__consent-label {
  color: #a94442;
}

.drp-cm-subscribe__consent-links {
  /* 27px keeps the links flush with the label: 17px control + 10px gap. */
  flex: 1 0 100%;
  margin: 0;
  padding-left: 27px;
  font-size: 14px;
}

.drp-cm-subscribe__consent-links a {
  margin-right: 16px;
  color: #0c121c;
  text-decoration: underline;
}

.drp-cm-subscribe__consent-links a:hover {
  color: rgba(12, 18, 28, 0.8);
}

/*
 * aria-live status region. drp-cm-subscribe.js writes textContent only and adds
 * no state class, so there is no success/error variant to style. :empty keeps
 * the panel from reserving a gap for a message that is not there.
 */
.drp-cm-subscribe__status {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

.drp-cm-subscribe__status:not(:empty) {
  margin-bottom: 20px;
  padding: 10px 12px;
  border-left: 3px solid #0c121c;
  background: #f6f6f6;
}

.drp-cm-subscribe__submit {
  min-height: 44px;
  padding: 12px 28px;
  border: 2px solid #0c121c;
  border-radius: 0;
  background: #0c121c;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.1;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 0.15s linear all;
}

.drp-cm-subscribe__submit:hover:not([disabled]),
.drp-cm-subscribe__submit:focus:not([disabled]) {
  background: #fff;
  color: #0c121c;
}

.drp-cm-subscribe__submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/*
 * Focus indicators, last so they beat the error and hover states above.
 * Same geometry as the theme's focus-ring mixin: 2px inner ring, 2px gap, 2px
 * outer blue ring. Inputs use a flush ring (offset 0) exactly as the theme's
 * form-control variant does, and the dark submit button gets the inverted
 * inner ring so it stays visible against #0c121c.
 */
.drp-cm-subscribe .drp-cm-subscribe__close:focus,
.drp-cm-subscribe .drp-cm-subscribe__input:focus,
.drp-cm-subscribe .drp-cm-subscribe__checkbox:focus,
.drp-cm-subscribe .drp-cm-subscribe__submit:focus,
.drp-cm-subscribe .drp-cm-subscribe__consent-links a:focus,
.drp-cm-subscribe-trigger:focus {
  outline: none;
}

.drp-cm-subscribe .drp-cm-subscribe__close:focus-visible,
.drp-cm-subscribe .drp-cm-subscribe__checkbox:focus-visible,
.drp-cm-subscribe .drp-cm-subscribe__consent-links a:focus-visible,
.drp-cm-subscribe-trigger:focus-visible {
  outline: 2px solid #0c121c;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px blue;
  transition: outline-color 0s, box-shadow 0s;
}

.drp-cm-subscribe .drp-cm-subscribe__input:focus-visible {
  outline: 2px solid #0c121c;
  outline-offset: 0;
  box-shadow: 0 0 0 4px blue;
  transition: outline-color 0s, box-shadow 0s;
}

.drp-cm-subscribe .drp-cm-subscribe__submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
  box-shadow: 0 0 0 2px blue;
  transition: outline-color 0s, box-shadow 0s;
}

/*
 * Footer trigger. It sits inside h4.social-bar__title.bt-footer-header, so it
 * inherits the footer-header role's typeface, size, 1px tracking and uppercase
 * from scss/_typography.scss:148. Only the button chrome is stripped, and the
 * hover underline matches .footer .nav-stacked li a:hover
 * (scss/legacy/_footer.scss:27) and .social-bar__link a:hover.
 */
.drp-cm-subscribe-trigger {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.drp-cm-subscribe-trigger:hover {
  text-decoration: underline;
}

body.drp-cm-subscribe-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .drp-cm-subscribe__close,
  .drp-cm-subscribe__input,
  .drp-cm-subscribe__submit {
    transition: none;
  }
}