/* ---------------------------------------------------------------------------
   RightsfuAlly home page — integration overrides.

   Kept SEPARATE from rightsfually_home.css so that vendored build can be
   re-exported from the prototype and dropped in without merge pain. Everything
   here exists because digitalrights_base.html applies site-wide theme styles
   that the prototype build was never built to sit underneath.

   Load order matters: this file must come AFTER rightsfually_home.css.
   --------------------------------------------------------------------------- */

/* 1. Inherited text colour.
   The base template puts `text-jacarta-500` (#5a5d79, a grey-blue) on <body>.
   That utility class (0-1-0) outranks the prototype's `body { color: ... }`
   (0-0-1), so every prototype element WITHOUT an explicit colour — capability
   headings, list text, most <p> — inherited grey-blue instead of the design's
   near-black. Re-asserting it on the page root fixes all of them at once:
   .rights-page sits below <body>, so it wins inheritance outright. */
.rights-page {
  color: hsl(0 0% 12%);
  background: hsl(0 0% 97%);

  /* Two sizes for everything small on this page — see block 5. */
  --rfa-micro: .72rem;
  --rfa-small: .8rem;
}

/* 2. Dark-mode bleed.
   The base adds `dark` to <html>, and the theme ships `.dark footer`,
   `.dark [type="email"]` etc. Those are 0-1-1 and 0-2-0, so they beat the
   prototype's `.footer` (0-1-0) and `.field` (0-1-0) — the footer rendered
   navy (#0d102d) and form fields rendered navy-on-white.

   The template removes that class on this page, which is the real fix. These
   rules are the safety net for the case where a theme script re-adds it after
   load: they are scoped under .rights-page so they can never affect the rest
   of the site. */
html.dark .rights-page .footer {
  background-color: #0f0f0f;
}

html.dark .rights-page .contact-form .field,
html.dark .rights-page .newsletter-form input {
  background-color: transparent;
  color: hsl(0 0% 97%);
}

/* 3. Header offset from the top of the viewport.
   The base theme gives <header> a 35px top margin. It survives the prototype's
   own reset, and no single rule in the served CSS owns it — it is only visible
   as a computed value. On a `position: fixed; top: 0` header that renders the
   bar 35px down the viewport: a strip of page shows ABOVE the header, and the
   hero's first line pokes out over it instead of scrolling cleanly underneath.
   That is the "gap at the top" and most of the "overlapping" effect.

   `inset` is re-asserted alongside it so the header cannot be nudged by a
   theme rule setting top/left either. */
/* The rule to beat is in style-nft-rights1.css:
       body#home header { margin-top:35px; border-top:1px solid rgba(255,255,255,.4) }
   `body#home header` is specificity 1-0-2 — an ID outranks any number of
   classes, so a plain `.rights-page .site-header` (0-2-0) loses to it. The base
   template puts id="home" on <body> only when request.path == '/en/', i.e.
   exactly this page, which is why the gap appears here and nowhere else.
   Matching the ID puts this at 1-2-2 so it wins on specificity rather than
   needing !important. The unscoped selector is kept as a fallback for any
   route where <body> has no id. */
body#home .rights-page .site-header,
.rights-page .site-header {
  margin: 0;
  border-top: 0;
  inset: 0 0 auto;
}

/* 4. Contact-form anti-abuse fields.
   The honeypot must be in the DOM and reachable by a bot parsing the HTML, but
   invisible and unreachable for a person. `display:none` is what naive scrapers
   check for, so this is hidden by position instead — and taken out of the tab
   order and the accessibility tree in the template. */
.rights-page .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rights-page .contact-captcha { grid-column: 1 / -1; margin-top: .4rem; }

/* The result notice. It is a SIBLING of .contact-form, not a child, so it gets
   the form's own column width — an earlier `grid-column: 1 / -1` here did
   nothing at all and the notice ran the full bleed of the section as a thin
   strip. The theme also paints `.success` / `.error` with its own background,
   which showed through as a green band, so the background is reset and the
   state is carried by the left rule instead. */
.rights-page .contact-result {
  max-width: 1080px;
  margin: 3rem auto 0;
}

.rights-page .contact-result p {
  margin: 0 0 .6rem;
  padding: .9rem 1.1rem;
  background: transparent !important;
  border: 1px solid #4a4a4a;
  border-left-width: 3px;
  color: #e8e8e8;
  font-family: var(--app-font-serif);
  font-size: 1rem;
  line-height: 1.5;
}

.rights-page .contact-result p:last-child { margin-bottom: 0; }
.rights-page .contact-result p.success { border-left-color: #6fbf8b; }
.rights-page .contact-result p.error { border-left-color: #e07a7a; color: #ffd9d9; }

/* 5. The small-text scale.
   The prototype build set the small end of the type scale ad hoc: twelve
   distinct sizes between .55rem and .8rem, several of them a hundredth of a rem
   apart. Read on a real screen that is not a hierarchy, it is noise — a kicker
   above one section rendered visibly smaller than the identical kicker above
   the next, and the assistant panel's labels were smaller again.

   So there are now exactly TWO sizes below body copy, both a step up from what
   was there:

     --rfa-micro (.72rem)  uppercase, letter-spaced labels: kickers, eyebrows,
                           step numbers, table headers, panel chrome.
                           Absorbs the old .55 / .58 / .62 / .65 / .68.
     --rfa-small (.8rem)   short sentences and controls: nav, buttons, footer,
                           the security table body, form results.
                           Absorbs the old .70 / .72 / .75 / .76 / .78.

   Two rather than one because a letter-spaced uppercase label and a sentence
   are doing different jobs; collapsing them would flatten the page, not tidy
   it. Within each job everything now matches.

   Each selector below mirrors one in the vendored build and beats it on
   specificity (.rights-page adds a class), so the build can still be
   re-exported from the prototype without this being merged into it. Where the
   build used the `font:` shorthand only the size is replaced — family,
   line-height and spacing are left alone. */
.rights-page .eyebrow,
.rights-page .section-kicker,
.rights-page .capability-number,
.rights-page .step-no,
.rights-page .answer-label,
.rights-page .window-label,
.rights-page .audit-list span,
.rights-page .infrastructure-layers article > span,
.rights-page .infrastructure-layers h4 small {
  font-size: var(--rfa-micro);
}

.rights-page .site-nav a,
.rights-page .header-contact,
.rights-page .button-primary,
.rights-page .button-quiet,
.rights-page .form-submit,
.rights-page .newsletter-form button,
.rights-page .footer-column,
.rights-page .footer-bottom,
.rights-page .confirmation-card,
.rights-page .audit-list small,
.rights-page .infrastructure-layers p,
.rights-page .security-table-row {
  font-size: var(--rfa-small);
}

/* The header row of the security table carries BOTH .security-table-row and
   .security-table-header, so the two rules above tie on specificity and the
   last one wins — which put the header at body size and left it looking like
   another data row. It is a label, so it belongs to the micro tier; stating it
   after the small tier is what settles the tie. */
.rights-page .security-table-header {
  font-size: var(--rfa-micro);
}

/* 6. Footer subscribe box.
   The prototype's `.newsletter-form` is one flex row carrying the underline.
   The captcha cannot live in that row — a 304px widget beside the field would
   either squeeze it or push the rule down under the widget — so the row moved
   into its own element and the form became a plain block. */
.rights-page .newsletter-form {
  display: block;
  border-bottom: 0;
}

.rights-page .newsletter-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #777;
}

.rights-page .newsletter-row input { flex: 1; min-width: 0; }

.rights-page .newsletter-captcha {
  margin-top: 1.1rem;
  /* The widget is a fixed 304px; on a narrow footer column it is allowed to
     scale rather than overflow (`.rights-page` is overflow:hidden, so an
     overflow here is silently clipped, not scrollable). */
  transform-origin: left top;
}

@media (max-width: 400px) {
  .rights-page .newsletter-captcha { transform: scale(.85); height: 67px; }
}

.rights-page .newsletter-result { margin-top: 1rem; }

.rights-page .newsletter-result p {
  margin: 0 0 .4rem;
  padding: .7rem .9rem;
  background: transparent !important;
  border: 1px solid #4a4a4a;
  border-left-width: 3px;
  color: #e8e8e8;
  font-size: var(--rfa-small);
  line-height: 1.5;
}

.rights-page .newsletter-result p.success { border-left-color: #6fbf8b; }
.rights-page .newsletter-result p.error { border-left-color: #e07a7a; color: #ffd9d9; }

/* 7. Focus styling on form controls.
   The theme ships Tailwind's forms plugin, whose
       [type="email"]:focus, [type="text"]:focus, textarea:focus … {
           border-color: #2563eb; outline: transparent solid 2px; box-shadow: …ring…
       }
   paints a blue-600 border and a ring on focus. On the footer subscribe box —
   an underline field with no border of its own — that renders as a bright blue
   rectangle around the input, which is what shows up in the design. The
   prototype's `.field:focus` happens to out-order it on the contact form, but
   nothing covered the newsletter input.

   Focus must stay VISIBLE (removing the indicator outright fails keyboard
   users), so it is restated in the page's own language: the field's rule goes
   white, and the ring is dropped. */
.rights-page .newsletter-form input:focus,
.rights-page .newsletter-form input:focus-visible {
  border: 0;
  box-shadow: none;
  outline: none;
}

.rights-page .contact-form .field:focus,
.rights-page .contact-form .field:focus-visible {
  border-color: #f7f7f7;
  box-shadow: none;
  outline: none;
}

/* Focus is shown by the RULE UNDER the field, not by a box around it — the
   subscribe box is an underline field and a rectangle is not its design.

   `:focus-visible` is covered above rather than given its own outline: a text
   input matches `:focus-visible` on a plain mouse click as well as on keyboard
   focus, so an outline meant "for keyboard users" is in fact drawn every time
   anyone clicks the field. That is what replaced the theme's blue rectangle
   with a white one. The underline going bright and doubling in weight is the
   indicator, and it is visible however focus arrived. */
.rights-page .newsletter-row:focus-within {
  border-bottom-color: #f7f7f7;
  border-bottom-width: 2px;
  padding-bottom: 0;   /* absorb the extra pixel so nothing shifts */
}

/* 8. The Subscribe control.
   The prototype leaves it as bare text on the shared underline, which reads as
   a label rather than something you can press — the field looks interactive and
   the actual control does not. It becomes an outlined chip that fills on hover,
   the same treatment the header CTAs get, so the row still reads as one
   underlined unit but the button is unmistakably a button. */
.rights-page .newsletter-form button {
  align-self: center;
  margin: 0 0 .55rem .8rem;
  padding: .55rem 1.1rem;
  border: 1px solid #777;
  color: #f7f7f7;
  font-size: var(--rfa-small);
  line-height: 1;
  white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}

.rights-page .newsletter-form button:hover {
  background: #f7f7f7;
  border-color: #f7f7f7;
  color: #111;
}

/* 9. Footer newsletter column alignment.
   The prototype bottom-aligns the two columns (`align-items: end`), which was
   right when the right-hand column was a single input row. With the captcha
   under it that column is ~155px tall against the heading's ~90px, so bottom
   alignment pushed the heading down and the field floated above it. Aligning
   the tops puts "Stay informed" level with the field, which is how the pair
   reads as one row. */
.rights-page .footer-newsletter { align-items: start; }

/* Aligning the two columns' BOXES still leaves their TEXT out of line: the
   field carries `padding: 1rem 0`, so its placeholder sits 16px below the top
   of its box while the kicker sits at the very top of its own. Pushing the
   heading column down by the same 1rem puts "Stay informed" on the same line
   as the text in the box, which is the alignment you actually see. */
.rights-page .footer-newsletter > div:first-child { padding-top: 1rem; }