/* Comments and send-me-this-link, in the site's own look */
.sfas-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sfas-comments {
  padding-top: var(--wp--preset--spacing--60, 48px);
  padding-bottom: var(--wp--preset--spacing--60, 48px);
}
.sfas-comments__inner {
  max-width: var(--wp--style--global--content-size, 680px);
  margin: 0 auto;
  border-top: 1px solid var(--sfas-rule, #c9cec9);
  padding-top: 32px;
}
.sfas-comments__head {
  font-family: var(--sfas-display, Alegreya, Georgia, serif);
  font-size: var(--wp--preset--font-size--heading-2, 30px);
  margin: 0 0 16px;
  color: var(--sfas-ink, #23262a);
}
.sfas-comments__list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.sfas-comment {
  margin: 0 0 22px;
  padding: 0 0 18px;
  border-bottom: 1px dashed var(--sfas-rule, #c9cec9);
}
.sfas-comment p {
  margin: 6px 0;
}
.sfas-comment__meta {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--sfas-mono, "Sometype Mono", monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sfas-muted, #565c63);
}
.sfas-comment__name {
  color: var(--sfas-ink, #23262a);
  font-weight: 500;
}
.sfas-comments__empty,
.sfas-comments__note {
  color: var(--sfas-muted, #565c63);
  font-size: 16px;
}

.sfas-comments__form,
.sfas-sendlink {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sfas-comments__form label,
.sfas-sendlink label {
  font-family: var(--sfas-mono, "Sometype Mono", monospace);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sfas-ink, #23262a);
  margin-top: 8px;
}
.sfas-comments__form input,
.sfas-comments__form textarea,
.sfas-sendlink input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-family: var(--sfas-sans, "Alegreya Sans", sans-serif);
  font-size: 16px;
  line-height: 24px;
  color: var(--sfas-ink, #23262a);
  background: var(--sfas-surface, #f6f7f5);
  border: 1px solid var(--sfas-ink, #23262a);
  border-radius: 2px;
}
.sfas-comments__form input:focus,
.sfas-comments__form textarea:focus,
.sfas-sendlink input:focus {
  outline: 2px solid var(--sfas-blue, #2d4e8a);
  outline-offset: 1px;
}
.sfas-comments__form button,
.sfas-sendlink button {
  align-self: flex-start;
  margin-top: 12px;
  padding: 10px 18px;
  font-family: var(--sfas-sans, "Alegreya Sans", sans-serif);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--sfas-inverse, #f6f7f5);
  background: var(--sfas-ink, #23262a);
  border: 1px solid var(--sfas-ink, #23262a);
  border-radius: 2px;
  cursor: pointer;
}
.sfas-comments__form button:hover,
.sfas-sendlink button:hover {
  background: var(--sfas-blue-deep, #1f3866);
  border-color: var(--sfas-blue-deep, #1f3866);
}
.sfas-comments__form button:disabled,
.sfas-sendlink button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.sfas-comments__msg,
.sfas-sendlink__msg {
  font-size: 15px;
  min-height: 1em;
  margin: 8px 0 0;
}

.sfas-sendlink {
  max-width: 520px;
  margin: 16px auto;
  padding: 18px 20px;
  background: var(--sfas-raised, #fff);
  border: 1px solid var(--sfas-rule, #c9cec9);
  border-radius: 4px;
}
.sfas-sendlink__lead {
  margin: 0 0 4px;
  font-size: 17px;
}
.sfas-sendlink__fine {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--sfas-muted, #565c63);
}

/* Projects dropdown in the header: 5px rounded corners, like everything else on the site */
.wp-block-navigation .wp-block-navigation__submenu-container { border-radius: 5px; overflow: hidden; }

/* Phones: menu items start at the left edge, one line where the screen allows */
@media (max-width: 600px) {
  .sfas-site-header .wp-block-navigation__container { justify-content: flex-start !important; flex-wrap: wrap !important; column-gap: 14px !important; row-gap: 6px !important; }
  .sfas-site-header .wp-block-navigation { font-size: 14.5px; }
  .sfas-site-header .wp-block-navigation .sfas-projects-menu > .wp-block-navigation__submenu-container { min-width: 220px !important; right: 0; left: auto !important; }
}