/* Styles for seo-box.hbs — the landing's closing SEO copy.
   Ported from the legacy `components/pages/home/HomeSeoBox.vue`; every size and
   colour below was measured off the live site rather than read off the source, so
   the UA defaults the legacy leaned on are pinned here as real numbers.

   There is no media query in this file, which is not an omission: the legacy's
   only breakpoint raised the expanded `max-height` cap from 3000px to 2000px at
   1000px wide, and nothing here is capped. See seo-box.island.js. */

.seo-box-title,
.seo-box-content h2,
.seo-box-content h3 {
  margin: 24px 0 12px;
  color: var(--gray-900);
  font-weight: 700;
}

/* The UA defaults the legacy inherited, written out: 1.5em and 1.17em against
   this page's 16px root are the 24px and 18.72px the live site renders.

   Deliberately not the 21/36px that `.faq-title` and `.articles-title` use — the
   heading scale inside this box is the design's, and the section title sharing a
   size with the headings under it is how the current site reads. */
.seo-box-title,
.seo-box-content h2 {
  font-size: 1.5em;
}

.seo-box-content h3 {
  font-size: 1.17em;
}

/* Prose, not components: the copy is a run of paragraphs, headings and list items
   with no structure of its own, so it is styled by element under the container
   rather than by a class per tag. */
.seo-box-content p,
.seo-box-content ul {
  color: var(--gray-600);
  line-height: 24px;
  text-align: justify;
}

/* The gaps the legacy drew with `<br>`s — between the two halves of the security
   paragraph, and above and below each list. 24px, matching the line-height,
   where the legacy's stray `<br>`s measured 25.6px against `.content`'s own. */
.seo-box-content p + p,
.seo-box-content ul,
.seo-box-content ul + p {
  margin-top: 24px;
}

/* The clamp, and the whole reason the island exists.

   Gated on `html.js` because the button that undoes it is that island: without
   JavaScript there is nothing to reopen the box, so the copy stays open and the
   button is hidden. `html.js` is set by an inline script in head.hbs before the
   first paint, so no scripted visitor sees the open state flash shut.

   The island writes `max-height` inline on this element — a measured pixel height
   to animate to, then `none` — so an inline value deliberately outranks the
   100px here. */
html.js .seo-box-content {
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.5s ease;
  /* Fades the cut line instead of slicing through it. A mask reads only the
     alpha channel, so the colour the legacy put in this gradient never mattered.
     Both spellings: unprefixed `mask-image` is Safari 15.4 and up, and older iOS
     is still worth covering on this audience. */
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

html.js .seo-box-content[data-collapsed='false'] {
  -webkit-mask-image: none;
  mask-image: none;
}

@media (prefers-reduced-motion: reduce) {
  html.js .seo-box-content {
    transition: none;
  }
}

.seo-box-toggle {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  color: var(--gray-900);
  font-size: 16px;
  /* `line-height: normal` is load-bearing: app.css gives buttons `font: inherit`,
     which would otherwise pull in the 1.6 body line-height and make this button
     taller than the one on the site being matched. */
  line-height: normal;
}

html:not(.js) .seo-box-toggle {
  display: none;
}