/* Theme styles. Processed by PostCSS into stylesheets/main.css. */
@layer base {
  :root {
    --font-body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* omnes-pro / europa are Adobe Fonts on the Squarespace site; Roboto stands in. */
    --font-nav: "omnes-pro", var(--font-body);
    --font-button: "europa", var(--font-body);

    --color-text: #575757;
    --color-accent: #2fa9c0;
    --color-header: #3d3d3d;
    --color-footer: #242424;
    --color-button-text: rgba(17, 220, 238, 0.8);

    --site-width: 1020px;
    --gutter: 64px;
  }

  @media (max-width: 539px) {
    :root {
      --gutter: 32px;
    }
  }

  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--color-text);
    background: #fff;
    /* Avoid single-word orphans on the last line of text blocks. */
    text-wrap: pretty;
    /* Keep overflowing content (e.g. the home hero's "independent.") from
       widening the layout viewport on narrow screens. */
    overflow-x: hidden;
  }

  a {
    color: inherit;
  }

  p {
    line-height: 1.5em;
    margin-bottom: 1.5em;
  }

  p:last-child {
    margin-bottom: 0;
  }

  /* The reset's `font: inherit` would otherwise cancel italics. */
  em,
  i {
    font-style: italic;
  }

  /* Sticky footer: the page fills the viewport and #content absorbs the slack. */
  #wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  #content {
    flex: 1 0 auto;
  }

  main {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  @media (max-width: 539px) {
    main {
      padding-top: 48px;
      padding-bottom: 48px;
    }
  }

  /* Centered content column with a horizontal gutter. */
  .interior {
    max-width: calc(var(--site-width) + var(--gutter) * 2 - 80px);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* Pill buttons (Squarespace "small" / banner button styles). */
  .button {
    display: inline-block;
    font-family: var(--font-button);
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-button-text);
    border-radius: 100px;
    background-color: var(--button-bg);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    letter-spacing: 0.15em;
  }

  /* Lighten on hover, like the nav "Sign-in" button. */
  .button:hover {
    background-color: oklch(from var(--button-bg) calc(l + 0.1) c h);
  }

  .button--small {
    padding: 13px 26px;
    font-size: 13px;
    line-height: 1.2em;
    --button-bg: #424242;
  }
}
@layer components {
  /* Content Section block: the page's centered content column. Squarespace
     used a 1020px column (956px content + 32px padding) on regular pages and a
     full 1020px content column on the home page. */
  .content-section .interior {
    padding-top: 96px;
  }

  @media (max-width: 539px) {
    .content-section .interior {
      padding-top: 48px;
    }
  }

  .content-section--narrow .interior {
    max-width: calc(626px + var(--gutter) * 2);
  }

  .content-section hr {
    height: 1px;
    margin: 49px 0;
    border: 0;
    background-color: rgba(87, 87, 87, 0.15);
  }

  /* Page title (page.php) */
  .page-title .interior {
    max-width: calc(956px + var(--gutter) * 2);
    text-align: center;
  }

  .page-title h1 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--color-accent);
  }

  .page-title + .content-section .interior {
    padding-top: 48px;
  }

  .content-section + .content-section .interior {
    padding-top: 0;
  }

  /* Section Heading block */
  .section-heading {
    padding: 17px 0;
    text-align: center;
  }

  .section-heading:first-child {
    padding-top: 0;
  }

  .section-heading:last-child {
    padding-bottom: 0;
  }

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

  .section-heading h1,
  .section-heading h2 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2em;
    color: var(--color-accent);
  }

  .section-heading .section-subheading {
    margin-top: 22px;
    font-size: 22px;
    line-height: 1.4em;
  }

  .section-heading .section-note {
    margin-top: 17px;
    font-size: 17px;
    line-height: 1.5em;
  }

  .section-heading .section-note > * + * {
    margin-top: 16px;
  }

  .section-heading .section-note ol {
    padding-left: 40px;
    list-style: decimal;
  }

  .section-heading strong {
    font-weight: 700;
  }
}

@layer components {
  /* FAQ Item block */
  .faq-heading {
    padding: 17px 0;
    text-align: center;
  }

  .faq-item {
    padding: 17px 0;
    font-size: 17px;
    line-height: 1.5em;
  }

  .faq-item:last-child {
    padding-bottom: 0;
  }
  
  .faq-item strong {
    font-weight: 700;
  }

  /* Core Heading + Paragraph blocks inside a Content Section (question/answer text). */
  .content-section .interior > .wp-block-heading {
    margin-top: 67px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4em;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .content-section .interior > p {
    margin-top: 1em;
    font-size: 17px;
    line-height: 1.5em;
  }

  .content-section .interior > p strong {
    font-weight: 700;
  }
}

/* Heading utility classes. Add to any element (Additional CSS class in the
   editor) to take on a heading style regardless of its tag. Declared after
   `components` so they win over block-specific heading rules. */
@layer utilities {
  .heading-1 {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2em;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-accent);
  }

  .heading-2 {
    &:first-child { margin-block-start: 0 }
    margin-block-start: 2em;
    margin-block-end: 1em;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text);
  }
}