/*
 * The site's own CSS, loaded after webflow.css. Webflow's stylesheet is untouched; everything the
 * rebuild needs on top of it is here, each rule saying why. Rules that change how something looks
 * compared with live securerecycle.com are "Departures" and are listed in PROJECT-STATUS.md.
 */

/* ── Interactions that webflow.js and its boosters used to run ─────────────────────────────── */

/* The nav links' underline grows in on hover: Webflow IX2 "Nav Link Hover In/Out", a 200ms scale
   from 0 to 1 (webflow.css already gives .navbar_link-underline its transition and scale(0)). */
.navbar_link:hover .navbar_link-underline,
.navbar_link:focus-visible .navbar_link-underline {
  transform: scale(1);
}

/* typed.js's cursor, as the typewriter booster injected it. */
.typed-cursor {
  opacity: 1;
}
.typed-cursor.typed-cursor--blink {
  animation: typedjsBlink 0.7s infinite;
}
@keyframes typedjsBlink {
  50% { opacity: 0; }
}

/* ── Forms ────────────────────────────────────────────────────────────────────────────────── */

/* Turnstile sits under the form when it has to show a challenge, never in the layout. */
.footer-form-block {
  position: relative;
}
.form-shield-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  margin-top: 8px;
}

/* ── Accessibility ────────────────────────────────────────────────────────────────────────── */

/* The first tab stop jumps past the header; visible only while focused. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--base-color-brand--blue, #0e3a5b);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  opacity: 0;
}
.skip-link:focus-visible {
  transform: none;
  opacity: 1;
  outline: 3px solid #4d65ff;
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Pages live doesn't have (Learn, legal pages, sitemap) ──────────────────────────────────────
   No Webflow design exists for these, so they are built from the site's own classes; these rules
   only fill in what those classes never had to do (a long article, a linked heading). */

.learn-post-link {
  color: inherit;
  text-decoration: none;
}
.learn-post-link:hover,
.learn-post-link:focus-visible {
  text-decoration: underline;
}
.learn-post-date {
  margin-top: .5rem;
  margin-bottom: 1rem;
  color: var(--text-color--text-secondary, #555);
}
.learn-post-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-bottom: 2rem;
}
.text-page .w-richtext h2,
.learn-post .w-richtext h2 {
  margin: 2.5rem 0 .75rem;
  color: var(--base-color-brand--blue);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
}
.text-page .w-richtext h3,
.learn-post .w-richtext h3 {
  margin: 2rem 0 .5rem;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}
.text-page .w-richtext p,
.learn-post .w-richtext p,
.text-page .w-richtext ul,
.learn-post .w-richtext ul,
.text-page .w-richtext ol,
.learn-post .w-richtext ol {
  margin-bottom: 1rem;
  line-height: 1.7;
}
.text-page .w-richtext li,
.learn-post .w-richtext li {
  margin-bottom: .4rem;
}
.text-page .w-richtext a,
.learn-post .w-richtext a {
  color: var(--text-color--text-green, #1a8f3c);
  text-decoration: underline;
}
/* Site Info: the privacy-choices control is a <button> (it opens the cookie preferences), shown as a link. */
.text-page .w-richtext .site-info-choices {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-color--text-green, #1a8f3c);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
@media screen and (max-width: 767px) {
  .text-page .w-richtext h2,
  .learn-post .w-richtext h2 {
    font-size: 1.4rem;
  }
}

/* ── Departures (PROJECT-STATUS.md, D-xx) ──────────────────────────────────────────────────── */

/* D-02: the home page's hero line is its <h1> (live has a <p> and no <h1>). The class already sets
   its size and shadow; this undoes what h1 adds over p, so it draws exactly as before. */
h1.home-hero-text {
  font-weight: inherit;
  line-height: inherit;
}

/* ── Footer (SECX-11 §7, the enginuityus.com pattern) ────────────────────────────────────────
   D-08: the footer is rebuilt to the ticket's layout from Webflow's own footer classes. A full-width
   column grid (logo · Company · Quick Links · contact over newsletter), then a bottom bar: copyright
   and "Designed by" on the left; the legal links and the privacy-choices link on the right, every
   line the same size and weight. */

.footer-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.4fr);
  column-gap: 3rem;
  row-gap: 2.5rem;
  align-items: start;
}
.footer-brand {
  display: block;
  max-width: 15rem;
}
.footer-brand-column .footer-social-block-two {
  margin-top: 1.5rem;
}
.footer-aside .footer-link-two:first-of-type {
  margin-top: .5rem;
}
.footer-aside .footer-link-two {
  margin-top: .75rem;
}
.footer-aside .footer-form {
  width: 100%;
  max-width: 22rem;
  margin-top: 2rem;
}
.footer-aside .footer-form-container {
  max-width: none;
}
.footer-aside label.footer-title {
  display: block;
  margin-bottom: 0;
}
.footer-aside .footer-form-block {
  margin-top: .75rem;
}
.footer-aside .footer-form-field {
  flex: 1;
  min-width: 0;
}

/* The bottom bar: one size, one weight, one colour for every line and link. */
.footer-bottom {
  align-items: flex-start;
  gap: 1.5rem;
}
.footer-bottom-side {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.footer-bottom-side.is-right {
  align-items: flex-end;
  text-align: right;
}
.footer-copyright,
.footer-bottom .footer-legal-link {
  color: #3a4554;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
}
.footer-bottom .footer-legal-link {
  display: inline-block;
  min-height: 24px;   /* WCAG 2.2 target size */
  margin-left: 0;
  text-decoration: none;
}
.footer-bottom .footer-legal-link:hover,
.footer-bottom .footer-legal-link:focus-visible {
  color: var(--base-color-brand--blue);
  text-decoration: underline;
}
.footer-legal-block {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-legal-block li + li::before {
  content: "·";
  margin: 0 .5rem;
  color: #3a4554;
}
button.footer-legal-link {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  text-align: inherit;
}

@media screen and (max-width: 991px) {
  .footer-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .footer-aside {
    grid-column: 1 / -1;
  }
}
@media screen and (max-width: 767px) {
  .footer-bottom-side.is-right {
    align-items: flex-start;
    text-align: left;
  }
  .footer-legal-block {
    justify-content: flex-start;
    margin-left: 0;
  }
}
@media screen and (max-width: 479px) {
  .footer-columns {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .footer-columns .footer-block-two {
    margin-top: 2.5rem;
  }
  .footer-columns .footer-brand-column {
    margin-top: 0;
  }
}

/* D-09: the heading levels follow the page's outline (SECX-11: logical heading order) while each heading
   draws exactly as the tag Webflow used. `as-hN` is that tag's look, copied from webflow.css's element
   rules. Written as h2:where(.as-h3) so it outranks the h2 element rule (same specificity, later) but not
   the utility classes on the same element (text-weight-bold, text-color-dark-blue …). */
h2:where(.as-h3) {
  color: var(--base-color-brand--blue);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.5;
}
h3:where(.as-h4),
div:where(.as-h4) {
  color: inherit;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
}
h2:where(.as-h5) {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  h2:where(.as-h3) { font-size: 1.5rem; }
  h3:where(.as-h4), div:where(.as-h4) { font-size: 1.25rem; }
  h2:where(.as-h5) { font-size: 1rem; }
}

.learn-more-guides {
  margin-top: 3rem;
}

/* Phones see only a band of the home hero photo: at 767px or less the section is 50rem tall (45rem at 479px)
   and webflow.css scales the 2560x1775 photo to that height and slides it to 88% (87%), so only image x
   755-2457 (1200-2381) ever shows. Each file below is that band, cut at c with width 2560 - c/p (p the
   position): with the same percentage every visible pixel lands where it did, for under half the bytes.
   -767: c 740, 1719 wide; -479: c 1180, 1204 wide. home.blade.php preloads the same file per width. */
@media screen and (max-width: 767px) {
  .section-hero.hero--home {
    background-image: linear-gradient(135deg, var(--base-color-neutral--neutral-dark), transparent), url(/assets/backgrounds/hero-home-v5-767.avif);
  }
}
@media screen and (max-width: 479px) {
  .section-hero.hero--home {
    background-image: linear-gradient(135deg, var(--base-color-neutral--neutral-dark), transparent), url(/assets/backgrounds/hero-home-v5-479.avif);
  }
}