/* R68 — the island newsletter block, in three slots and no modal.
   There is deliberately no `position: fixed`, no full-viewport overlay and no
   backdrop rule anywhere in this file: the block is ordinary page flow in the
   footer, ordinary page flow inline, and a plain link in the header. */

.spi-newsletter {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  padding: 1.1rem 1.15rem 1.25rem;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.6rem;
}

.spi-newsletter--inline,
.spi-newsletter--page {
  border-color: rgba(11, 61, 92, 0.18);
  background: rgba(11, 61, 92, 0.04);
  margin: 2rem 0;
}

.spi-newsletter__title {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.25;
}

.spi-newsletter__lead,
.spi-newsletter__note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.92;
}

.spi-newsletter__note {
  font-size: 0.84rem;
}

/* R89 (Dave): the links in the footer block were the browser's default blue on
   the footer's navy -- unreadable. Links inside any newsletter block take the
   block's own ink (light on the footer, dark inline) and stay underlined. */
.spi-newsletter a:not(.spi-newsletter__submit) {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.spi-newsletter a:not(.spi-newsletter__submit):hover,
.spi-newsletter a:not(.spi-newsletter__submit):focus-visible {
  text-decoration-thickness: 2px;
}

.spi-newsletter__form {
  display: grid;
  gap: 0.65rem;
  margin: 0;
}

/* The honeypot. Removed from the accessibility tree by `aria-hidden` in the
   markup and from the page by these rules; never `display:none`, which some
   form fillers treat as a signal to skip. */
.spi-newsletter__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.spi-newsletter__field {
  display: grid;
  gap: 0.3rem;
  margin: 0;
}

.spi-newsletter__field label,
.spi-newsletter fieldset legend {
  font-size: 0.85rem;
  font-weight: 600;
}

.spi-newsletter__field input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(11, 61, 92, 0.35);
  font: inherit;
  background: #fff;
  color: #10243a;
}

.spi-newsletter fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

.spi-newsletter fieldset legend {
  padding: 0;
  margin-bottom: 0.25rem;
}

.spi-newsletter__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
  min-height: 32px;
}

.spi-newsletter__consent {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

.spi-newsletter__consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.spi-newsletter__consent input {
  margin-top: 0.2rem;
  flex: 0 0 auto;
}

.spi-newsletter__submit {
  justify-self: start;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: #0b6ea8;
  color: #fff;
}

.spi-newsletter__submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

/* R88 (Dave): on /newsletter/membership/ the call to action is an ANCHOR
   wearing the submit class, and the guide shell's link rules (teal, underlined)
   beat the class -- teal text on a blue pill, unreadable. A link dressed as a
   button gets the button's ink, no underline, centred, sized to its label. */
a.spi-newsletter__submit,
a.spi-newsletter__submit:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  color: #fff !important;
  text-decoration: none !important;
  text-align: center;
}
a.spi-newsletter__submit:hover,
a.spi-newsletter__submit:focus-visible,
.spi-newsletter__submit:hover,
.spi-newsletter__submit:focus-visible {
  background: #095a89;
  color: #fff !important;
}

.spi-newsletter__status:empty,
.spi-newsletter__notice:empty {
  display: none;
}

.spi-newsletter__status,
.spi-newsletter__notice {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: rgba(11, 110, 168, 0.1);
}

.spi-newsletter__notice--error,
.spi-newsletter__status[data-tone="error"] {
  background: rgba(168, 32, 32, 0.12);
}

/* The header slot: one task pill that scrolls away with the task row.

   R71 polish (from the R68 browser gate): it used to be a small outlined link
   on its own line under the nav row, which read as a stray box rather than as
   one of the header's tasks. It is rendered as a SIBLING of `.spi-easy-nav`
   inside `.spi-header-navigation` (base_templates.rs), so the row itself has
   to become a flex line before the pill can join it. Both selectors are
   two-class/child forms, so they win over `spi-easy.css`'s single-class rules
   whatever order the two stylesheets load in.

   R69p (Dave, after seeing R68 live): the translucent fill this carried --
   `background: rgba(255,255,255,.16)` under white text -- was a wash rather
   than a task, so it took a FILLED token from the header's own palette
   (`spi-easy.css`): `#073b4c` on `#d9f6ef`, the same pair
   `.spi-easy-nav a:hover` and `a[aria-current]` use, alongside the "My Trip"
   pill's `#073b4c` on `#fde68a` -- two filled pills of equal weight, so the
   newsletter slot is never the quieter of the pair.

   R84a fix -- the ratios R69p quoted (10.6:1 and 9.7:1) were measured against
   the ink band this row used to carry, and that band is gone: the row is
   inside the floating header now and sits on the header's own ground. The
   PROPERTY still holds, because both pills carry their own fill and their own
   dark text and neither depends on what is behind them; only the quoted
   numbers were about a ground that no longer exists, and they are not repeated
   here rather than restated wrongly. What did depend on the ink was the
   RESTING link colour, and that is fixed in `spi-easy.css` (it follows
   `--luperiq-header-text` now).

   It still does NOT take My Trip's amber, which is the R71 argument and
   stands: two filled amber pills in one row read as two primary actions.
   Hover and focus move TO the amber rather than to something lighter, so the
   pressed state is never dimmer than the resting one. Same geometry, same
   type, a different fill. */
.spi-header-navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: calc(100% - 1rem);
  max-width: 62rem;
  margin: 0 auto;
  box-sizing: border-box;
}

.spi-header-navigation > .spi-easy-nav {
  width: auto;
  max-width: none;
  flex: 1 1 auto;
  margin: 0;
}

.spi-newsletter-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  border: 0;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 750;
  text-decoration: none;
  color: #073b4c;
  background: #d9f6ef;
}

.spi-header-navigation > .spi-newsletter-slot {
  flex: 0 0 auto;
  /* R87 (Dave): the mint pill washed out against the hero header. Yellow with
     ink text is the one pairing that reads on the photo AND on the pale news
     front page; !important because the themed header recolours its links. */
  color: #073b4c !important;
  background: #fde68a !important;
  border: 1px solid rgba(7, 59, 76, .35);
}
.spi-header-navigation > .spi-newsletter-slot:hover,
.spi-header-navigation > .spi-newsletter-slot:focus-visible { background: #ffd95c !important; }

.spi-newsletter-slot:hover,
.spi-newsletter-slot:focus-visible {
  color: #073b4c;
  background: #fde68a;
}

@media (max-width: 650px), (max-height: 520px) {
  .spi-newsletter-slot {
    font-size: 0.84rem;
    padding: 0.65rem 0.55rem;
  }

  .spi-header-navigation {
    gap: 0.25rem;
  }
}

/* The second phone row: the task grid keeps its three columns and the pill
   sits with it as a full-width task of the same weight. */
/* R85: phone layout of the header (pill beside the brand, one scrolling task row) lives in spi-search.css. */

.spi-newsletter-admin__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.spi-newsletter-admin__table th,
.spi-newsletter-admin__table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(11, 61, 92, 0.2);
  word-break: break-word;
}

@media (max-width: 640px) {
  .spi-newsletter {
    padding: 0.9rem;
  }

  .spi-newsletter__submit {
    justify-self: stretch;
    width: 100%;
  }
}

/* R82a — the membership join step on the three signup surfaces, and the two
   member pages. Same block, same tokens; nothing here restyles R68's form. */

.spi-newsletter__member {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.spi-newsletter__blurb {
  display: block;
  font-size: 0.8rem;
  opacity: 0.85;
  padding-left: 1.6rem;
}

.spi-membership__join {
  display: grid;
  gap: 0.75rem;
  max-width: 44rem;
}

.spi-membership__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.spi-membership__signin {
  font-size: 0.9rem;
}

.spi-membership__section {
  margin: 0 0 1.5rem;
}

.spi-membership__ladder {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0 0 0 1.1rem;
}

.spi-membership__ladder .spi-membership__ladder {
  border-left: 2px solid rgba(11, 61, 92, 0.15);
}

.spi-membership__stops {
  margin: 0.35rem 0 0.75rem;
  padding-left: 1.2rem;
  font-size: 0.85rem;
}

.spi-admin-table {
  width: 100%;
  max-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

.spi-admin-table caption {
  text-align: left;
  font-weight: 700;
  padding: 0 0 0.25rem;
}

.spi-admin-table th,
.spi-admin-table td {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(11, 61, 92, 0.2);
}

@media (max-width: 640px) {
  .spi-membership__actions {
    display: grid;
  }
}