/**
 * @file
 * Styles for the public self-service help centre pages (#1347).
 *
 * Gives every /self-service form the same visual treatment as the online
 * PIN purchase page (/apply/buy-pin): a centred white card sitting on the
 * grey shell canvas, with brand-navy full-bleed section headers on each
 * fieldset. Form inputs, labels and buttons are already token-styled by the
 * theme's global css/tpemis-forms.css (scoped to .tp-main), so this sheet
 * only supplies the page canvas, the card, and the section header.
 *
 * Layout model: a SINGLE card wraps the whole form (.tp-ss__form). Fieldsets
 * inside are sections of that one card - their default box is stripped and
 * only a navy header band remains - so the dropdown, the identity fieldset,
 * flat result tables and the verify-code step all render coherently on the
 * same card as the consolidated form (#1500) switches between them. The
 * buy-pin page instead uses one card per step; here the single form reads
 * better as one card throughout.
 *
 * Design tokens: --tp-color-surface-default, --tp-color-border-default,
 * --tp-color-brand-primary, --tp-color-text-on-primary, --tp-border-radius-lg,
 * --tp-spacing-*. Every reference carries a plain fallback so the pages still
 * render in token-less contexts.
 */

/* Outer wrapper: full width, vertical padding on the grey canvas. */
.tp-ss {
  width: 100%;
  padding: var(--tp-spacing-7, 2.5rem) var(--tp-spacing-4, 1rem);
}

/* Centred column. Aligned to the same 1200px band as the page hero
 * (.tp-page-hero__inner) and footer so the form card lines up with the top and
 * bottom sections of the page, matching the buy-pin layout. */
.tp-ss__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Messenger output (no-match warning, PIN-used status, link-sent status)
 * renders in the highlighted region above the card. */
.tp-ss__inner > .messages,
.tp-ss__inner > [data-drupal-messages] {
  margin-bottom: var(--tp-spacing-5, 1.5rem);
}

/* ---- Form card ----------------------------------------------------------- */

/* One white rounded card on the grey canvas, matching the buy-pin section
 * cards (surface, border, radius, shadow). Spans the full inner width so the
 * form fills the page like buy-pin; fields inside stack single-column and
 * span the full card width. --ss-pad is a variable so the full-bleed section
 * header can pull out by exactly the card padding. */
.tp-ss__form {
  --ss-pad: 1.75rem;
  width: 100%;
  padding: var(--ss-pad);
  background: var(--tp-color-surface-default, #fff);
  border: 1px solid var(--tp-color-border-default, #e3e8ef);
  border-radius: var(--tp-border-radius-lg, 16px);
  box-shadow: 0 1px 3px rgba(20, 24, 50, 0.06);
}

/* ---- Fieldset sections --------------------------------------------------- */

/* Normalise Olivero's default fieldset boxing so EVERY fieldset in the card is
 * a clean, consistent section on the same (transparent) background. Olivero's
 * fieldset.css otherwise gives the top-level fieldset a white box with a 2px
 * grey border, draws a 2px grey border box around nested radio-group wrappers,
 * and pads every wrapper - none of which matches the single-card design. This
 * one reset removes all of it for the section fieldset, the nested radio groups
 * and the CAPTCHA alike, so their backgrounds and layout are identical. */
.tp-ss__form fieldset,
.tp-ss__form .fieldset {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.tp-ss__form .fieldset__wrapper {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Olivero draws a bordered box around a visible nested group's wrapper; remove
 * it so radio groups sit flush with the other fields. */
.tp-ss__form .fieldset--group .fieldset__legend--visible ~ .fieldset__wrapper {
  border: 0;
}

/* .tp-main fieldset (tpemis-forms.css) gives every fieldset a 1rem padding
 * box, meant for top-level bordered sections (e.g. CAPTCHA); nested radio
 * groups (Identity document, Gender) are excluded from the top-level-only
 * rule above (:not(.fieldset--group)) so they still inherit that padding,
 * pushing their legend and options 1rem right of every other field's label.
 * Zero it so they sit flush left like the rest. */
.tp-ss__form .fieldset--group {
  padding: 0;
}

/* Top-level section fieldsets (identity / verify / code sections) carry the
 * navy header band; give them their inter-section spacing. */
.tp-ss__form fieldset:not(.fieldset--group):not(.captcha) {
  margin: 0 0 var(--tp-spacing-6, 1.5rem);
  padding: 0;
  background: transparent;
}

.tp-ss__form fieldset:not(.fieldset--group):not(.captcha):last-of-type {
  margin-bottom: 0;
}

/* Full-bleed brand-navy section header with a leading document icon, matching
 * the buy-pin step headers. Bleeds to the card edges via negative side margins
 * equal to the card padding (--ss-pad). Olivero floats the legend, so the
 * float is reset first (the theme's own buy-pin sheet resets it the same way).
 * Scoped to top-level section fieldsets so nested radio-group and CAPTCHA
 * legends are NOT turned into navy bars. */
.tp-ss__form fieldset:not(.fieldset--group):not(.captcha) > legend {
  float: none;
  display: block;
  box-sizing: border-box;
  width: calc(100% + 2 * var(--ss-pad, 1.75rem));
  margin: 0 calc(-1 * var(--ss-pad, 1.75rem)) 1.25rem;
  padding: 0.75rem var(--ss-pad, 1.75rem);
  background: var(--tp-color-brand-primary, #1b3a6b);
  color: var(--tp-color-text-on-primary, #fff);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}

/* Nested radio-group and CAPTCHA legends render as plain dark field labels -
 * NOT the grey bar with white text Olivero gives them - so every sub-label in
 * the card looks the same. */
.tp-ss__form .fieldset--group > legend,
.tp-ss__form .captcha > legend {
  float: none;
  width: auto;
  margin: 0 0 0.5rem;
  padding: 0;
  background: none;
  color: var(--tp-color-text-default, #1a2230);
  font-size: 0.9375rem;
  font-weight: 600;
}

.tp-ss__form .fieldset--group > legend .fieldset__label,
.tp-ss__form .captcha > legend .fieldset__label,
.tp-ss__form .captcha > legend .captcha__title {
  display: inline;
  padding: 0;
  color: inherit;
}

/* The label text carries the icon so it sits beside the words, not the band. */
.tp-ss__form fieldset:not(.fieldset--group):not(.captcha) > legend .fieldset__label,
.tp-ss__form fieldset:not(.fieldset--group):not(.captcha) > legend {
  color: var(--tp-color-text-on-primary, #fff);
}

.tp-ss__form fieldset:not(.fieldset--group):not(.captcha) > legend .fieldset__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.tp-ss__form fieldset:not(.fieldset--group):not(.captcha) > legend .fieldset__label::before {
  content: '';
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cline x1='10' y1='9' x2='8' y2='9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Fieldset description sits under the header band, muted. */
.tp-ss__form fieldset > .fieldset__description,
.tp-ss__form fieldset > .description {
  margin: -0.5rem 0 1rem;
  color: var(--tp-color-text-muted, #5b6473);
  font-size: 0.9375rem;
}

/* ---- Field layout --------------------------------------------------------- */

/* Every field spans the full form width, one per row, at every breakpoint.
 * tpemis-forms.css already sets width: 100% on the input/select/textarea
 * itself; this keeps the .form-item wrapper single-column too so that full
 * width is measured against the whole card, not a 2-up grid cell. */

/* Nested radio options (e.g. NIN / Passport, Male / Female) sit side by side
 * on wider screens, instead of stacked one per row, so the group is not tall
 * and empty - this is most of the form's height reduction on MD/LG/XL.
 * .fieldset__wrapper--group only has ONE child, .form-boolean-group (Drupal
 * 10.2+/11 wraps every radios/checkboxes set in that div), which is where
 * the individual options actually stack - flexing the wrapper alone has no
 * visible effect since a 1-child flex container lays out the same either
 * way. Mobile (below 48rem) keeps native one-per-row stacking, which reads
 * better at narrow widths and keeps tap targets full width. */
@media (min-width: 48rem) {
  .tp-ss__form .fieldset__wrapper--group .form-boolean-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
  }
}

/* ---- Result block (shown on a proven match) ------------------------------ */

/* handleMatch() appends the result above the form (weight -10). Give it room
 * from the fields below. */
.tp-ss__form .tpemis-self-service__result {
  margin-bottom: var(--tp-spacing-6, 1.5rem);
}

.tp-ss__form .tpemis-self-service__result + * {
  margin-top: 0;
}

/* ---- Actions ------------------------------------------------------------- */

/* Space the button row from the fields; buttons themselves are styled by the
 * theme's global button component. */
.tp-ss__form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tp-spacing-4, 1rem);
  margin-top: var(--tp-spacing-6, 1.5rem);
}

/* ---- Editable footer note ------------------------------------------------ */

/* Admin-editable plain-text note (tpemis_self_service.settings:footer_text),
 * shown centred and muted under the card on the hub and every form. */
.tp-ss__footer {
  max-width: 760px;
  margin: var(--tp-spacing-5, 1.5rem) auto 0;
  text-align: center;
  color: var(--tp-color-text-muted, #5b6473);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Tablet and below: drop the outer wrapper's side padding and tighten the
 * shared .tp-main gutter on self-service pages (scoped via :has so other pages
 * are unaffected) so the card uses the available width, matching buy-pin. */
@media (max-width: 1024px) {
  .tp-ss {
    padding: var(--tp-spacing-6, 2rem) 0;
  }

  .tp-main:has(.tp-ss) {
    padding-inline: var(--tp-spacing-3, 0.75rem);
  }
}

@media (max-width: 480px) {
  .tp-ss {
    padding: var(--tp-spacing-4, 1rem) 0;
  }

  .tp-main:has(.tp-ss) {
    padding-inline: var(--tp-spacing-2, 0.5rem);
  }

  .tp-ss__form {
    --ss-pad: 1.1rem;
  }

  .tp-ss__form .form-actions .button {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* Support-channels directory (tpemis_self_service.settings:support_channels).
 * The card grid itself (.tp-support / .tp-support-card) is styled in the portal
 * shell stylesheet; this only spaces the block and its optional heading below
 * the form card, matching the footer note's rhythm. */
.tp-support-block {
  margin-top: var(--tp-spacing-6, 2rem);
}

.tp-support-block__heading {
  margin: 0 0 var(--tp-spacing-4, 1rem);
  text-align: center;
  color: var(--tp-color-heading, #0b1f3a);
  font-size: 1.25rem;
  line-height: 1.3;
}