/*
 * Gwaith Development site stylesheet.
 * No external origins referenced anywhere in this file, per the site's CSP.
 */

:root {
  --brand: #0FA5B7;
  --brand-deep: #0A7581;
  --brand-wash: #E8F6F8;
  --ink: #12181B;
  --ink-soft: #4A555B;
  --rule: #DFE5E8;
  --surface: #FFFFFF;
  --wrap: 68rem;
  --wrap-prose: 50rem;
  --h1-size: clamp(2rem, 5vw, 3rem);
}

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--surface);
}

h1 {
  font-size: var(--h1-size);
  font-weight: 600;
  line-height: 1.25;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
}

a {
  color: var(--brand-deep);
}

#footer a {
  color: #fff;
}

.eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--brand-deep);
  margin-block: 1em;
}

h2.eyebrow {
  font-size: 1.125rem;
}

.lede {
  font-size: 1.25rem;
  color: var(--ink-soft);
}

.legal {
  font-size: 1rem;
  line-height: 1.75;
  padding-block: 5rem;
}

.legal h1 {
  margin-block: 0 1.5rem;
}

.legal h2 {
  margin-block: 3rem 1rem;
}

.legal h3 {
  margin-block: 2rem 0.75rem;
}

.legal p,
.legal ul,
.legal ol {
  margin-block: 0 1.25rem;
}

.legal li {
  margin-block-end: 0.5rem;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table-scroll {
  overflow-x: auto;
  margin-block-end: 1.25rem;
}

.legal caption {
  text-align: left;
  color: var(--ink-soft);
  margin-block-end: 0.75rem;
}

.legal th,
.legal td {
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
}

.legal thead th {
  background: var(--brand-wash);
  color: var(--ink);
  font-weight: 600;
}

/* Structure and layout */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.left-align {
  text-align: left;
}

.right-align {
  text-align: right;
}

.wrap--prose {
  max-width: var(--wrap-prose);
  text-align: justify;
}

.section {
  padding-block: 3.5rem;
  scroll-margin-top: calc(40px + 1.5rem + 1px);
}

/* The section padding alone sets the gap to the first and last content.
   Child margins do not collapse through padding, so they would otherwise add
   to it and leave text sitting lower than images and cards. */
.section > .wrap > :first-child,
.section > .wrap > :first-child > :first-child {
  margin-block-start: 0;
}

.section > .wrap > :last-child,
.section > .wrap > :last-child > :last-child {
  margin-block-end: 0;
}

.section--wash {
  background: var(--brand-wash);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

/* Matches the visible gap above the lede, which is the h1's 0.67em bottom
   margin plus the 0.125em of half-leading below its last line at line-height 1.25. */
.hero__copy .actions {
  margin-top: calc(var(--h1-size) * 0.795);
}

.hero__media {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}

.hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

noscript .noscript-note {
  padding: 1rem 1.25rem;
  border: 1px solid var(--rule);
  border-inline-start: 4px solid var(--brand);
  background: var(--brand-wash);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Cards */

.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.5rem;
  background: var(--surface);
}

/* Buttons */

.button {
  display: inline-block;
  padding: 0.25rem 1.5rem;
  border: none;
  border-radius: 6px;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  background: var(--brand-deep);
  color: #fff;
  font-size: 1.25rem;
}

.button--secondary {
  background: var(--brand-deep);
  color: #fff;
}

/* Contact form fields */

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-block-end: 1.25rem;
}

.field__label {
  font-weight: 600;
}

.field__input {
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
}

.field__error {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
}

/* The honeypot field must stay parseable by bots that ignore CSS, so it is
   moved off-screen rather than hidden with display: none or visibility: hidden. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  font-weight: 600;
}

/* Skip link */

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 100;
  background: var(--brand-deep);
  color: #fff;
  padding: 0.75rem 1.25rem;
}

.skip-link:focus {
  left: 0;
}

/* Focus visibility for every interactive element */

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
}

.site-header__logo img {
  display: block;
  height: 40px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: 1.5rem;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: 3rem;
  background: var(--ink-soft);
  color: #fff;
}

/* Shares the .wrap measurements so the column division falls on the page
   centre and the outer edges line up with the header and the sections. */
.footer-cols {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  max-width: var(--wrap);
  margin: 0 auto 2rem;
  padding-inline: 1.5rem;
}

/* The single breakpoint. Layout is fluid above and below it. */
@media (max-width: 768px) {
  .section {
    padding-block: 3rem;
  }

  .legal {
    padding-block: 3rem;
  }

  .site-nav a:not(:last-child) {
    display: none;
  }

  .hero .wrap {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-cols {
    grid-template-columns: 1fr;
  }

  .footer-cols .left-align,
  .footer-cols .right-align {
    text-align: center;
  }
}