/* Link Hub (page-links.php) — hand-authored, not compiled from sass/.
   This template renders a standalone document and never loads style.css,
   so the @font-face rules the rest of the site gets from there are repeated
   here. Keep this file small: it is the only stylesheet on the page. */

@font-face {
  font-family: "Circular Std Book";
  src: url("../fonts/CircularStd-Book.woff2") format("woff2"),
       url("../fonts/CircularStd-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Circular Std Book";
  src: url("../fonts/CircularStd-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.fh-linkhub {
  --fh-bg-start: #c8fff9;
  --fh-bg-end: #f9ffc8;
  --fh-text: #181818;
  --fh-muted: #6e6e6e;
  --fh-line: rgba(24, 24, 24, 0.14);
  --fh-font: "Circular Std Book", Tahoma, Arial, sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body.fh-linkhub {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--fh-bg-start) 0%, var(--fh-bg-end) 100%);
  background-attachment: fixed;
  color: var(--fh-text);
  font: 400 20px/30px var(--fh-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: center;
  padding: clamp(60px, 12vw, 96px) 20px clamp(28px, 6vw, 40px);
}

.fh-linkhub__inner {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Top-aligned, not centred: the logo should sit near the top of the
     viewport rather than drifting down the page when there are few links. */
  margin: 0;
}

/* Caps rather than a fixed height: the field takes square marks and wide
   wordmarks alike, and a small wordmark must not be upscaled into a blur. */
.fh-linkhub__logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 150px;
  max-width: min(100%, 360px);
  margin-bottom: 32px;
}

.fh-linkhub__tagline {
  font-size: 20px;
  line-height: 30px;
  margin: 0 0 36px;
  /* balance keeps the wrap even rather than leaving an orphaned last word. */
  max-width: 300px;
  text-wrap: balance;
}

.fh-linkhub__links {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* .btn.btn_white from style.scss, repeated here because this page never loads
   that stylesheet. Same geometry, the same white fill sliding in on hover and
   the same arrow that slides out of the label -- keep the two in sync.
   min-width is dropped: these stretch to the full column instead. */
.fh-linkhub__link.btn {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
  border: 1px solid #181818;
  background-color: rgba(254, 254, 254, 0);
  padding: 19px 30px;
  text-decoration: none;
  text-align: center;
  color: #181818;
  border-radius: 48px;
  font: 20px/1 var(--fh-font);
  transition: all 0.3s;
}

.fh-linkhub__link.btn_white:before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
  display: block;
  background: #ffffff;
  opacity: 0;
  border-radius: 48px;
  transition: all 0.3s ease-out;
}

.fh-linkhub__link.btn_white:hover:before,
.fh-linkhub__link.btn_white:focus-visible:before {
  opacity: 1;
}

.fh-linkhub__link.btn:focus-visible {
  outline: none;
}

.fh-linkhub__link.btn span {
  display: inline-block;
  position: relative;
  will-change: transform;
  transition: all 0.3s ease-out;
}

.fh-linkhub__link.btn span:after {
  content: "\2192";
  position: absolute;
  width: 1.1em;
  right: 0rem;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  will-change: right, opacity;
  transition: all 0.3s ease-out;
}

.fh-linkhub__link.btn:hover span,
.fh-linkhub__link.btn:focus-visible span {
  transform: translate3d(-1rem, 0, 0);
}

.fh-linkhub__link.btn:hover span:after,
.fh-linkhub__link.btn:focus-visible span:after {
  opacity: 1;
  right: -2rem;
}

.fh-linkhub__link.btn:active span {
  transform: translate3d(0, 0, 0);
}

.fh-linkhub__link.btn:active span:after {
  opacity: 0;
  right: 0;
}

.fh-linkhub__footer {
  margin-top: 40px;
  padding-top: 24px;
  width: 100%;
  border-top: 1px solid var(--fh-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.fh-linkhub__social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.fh-linkhub__social a {
  color: var(--fh-text);
  line-height: 0;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.fh-linkhub__social a:hover,
.fh-linkhub__social a:focus-visible {
  opacity: 1;
}

.fh-linkhub__social svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Copyright + legal links. The text comes from Theme Settings -> copyright,
   the same string the site footer prints, so it is styled to match .footer_cop
   and .footer-lower in style.scss rather than inventing a second treatment. */
.fh-linkhub__meta {
  font-size: 14px;
  line-height: 26px;
  color: var(--fh-text);
  margin: 0;
}

.fh-linkhub__meta .footer-lower {
  color: #444;
  /* 12px, measured: the four document titles plus separators come to 393px,
     which clears the 420px column on one line. 13px overruns by 5px and wraps
     "Accessibility Statement" onto its own line behind a dangling "|". */
  font-size: 12px;
  line-height: 22px;
}

.fh-linkhub__meta a {
  color: #444;
  opacity: 0.75;
  text-decoration: none;
  /* The row has to wrap at this width -- let it break at the "|" separators,
     never inside a document title. */
  white-space: nowrap;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.fh-linkhub__meta a:hover,
.fh-linkhub__meta a:focus-visible {
  color: var(--fh-text);
  opacity: 1;
}

@media screen and (max-width: 480px) {
  .fh-linkhub__logo {
    max-height: 120px;
  }

  .fh-linkhub__tagline {
    font-size: 18px;
    line-height: 28px;
  }

  .fh-linkhub__link.btn {
    font-size: 17px;
    padding: 20px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fh-linkhub__link.btn,
  .fh-linkhub__link.btn:before,
  .fh-linkhub__link.btn span,
  .fh-linkhub__link.btn span:after,
  .fh-linkhub__social a,
  .fh-linkhub__meta a {
    transition: none;
  }
}