/* ==========================================================================
   Squarespace native elements — refinements
   --------------------------------------------------------------------------
   Polishes Squarespace's own header, footer, buttons and form block so they
   match the components in ddn.css. Most colours, fonts and button shapes are
   set in Site Styles (see the guide). This file only adds what Site Styles
   cannot do.
   The local preview loads this file too: its contact form uses the same
   class names as Squarespace's form block, so both render alike.
   ========================================================================== */

/* ---------- Global ---------- */
::selection { background: #D9E7E6; color: #14263A; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- Header ---------- */
.header {
  border-bottom: 1px solid rgba(20, 38, 58, 0.12);
}
.header .header-nav-item a {
  position: relative;
  letter-spacing: 0.01em;
  background-image: none !important;
}
.header .header-nav-item a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: #C58B64;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.header .header-nav-item a:hover::after,
.header .header-nav-item--active a::after { transform: scaleX(1); }
.header .header-actions-action--cta .btn { letter-spacing: 0.01em; }
/* Mobile menu: give the nav items the serif treatment */
.header-menu .header-menu-nav-item a {
  font-family: "Newsreader", Georgia, serif;
  letter-spacing: -0.01em;
}

/* ---------- Code blocks: let our components breathe ---------- */
.sqs-block-code .sqs-block-content > .ddn { width: 100%; }
.sqs-block-code { overflow: visible; }

/* ---------- Footer ---------- */
#footer-sections .ddn-footer { padding-top: 1rem; }

/* ---------- About: native image block next to the profile copy ---------- */
section:has(.ddn-about__copy) .sqs-block-image img {
  object-position: 50% 30%;
  filter: saturate(0.88) contrast(1.02);
}
section:has(.ddn-about__copy) .sqs-block-image .sqs-image-shape-container-element,
section:has(.ddn-about__copy) .sqs-block-image .fluid-image-container {
  border-radius: 3px;
  overflow: hidden;
}

/* ---------- Contact: native form block ---------- */
section:has(.ddn-contact) .sqs-block-form .form-wrapper {
  padding: clamp(1.5rem, calc(1rem + 2vw), 2.75rem);
  background: #FCFBF8;
  border: 1px solid rgba(20, 38, 58, 0.14);
  border-radius: 3px;
}
section:has(.ddn-contact) .form-wrapper .field-list .form-item { margin-bottom: 1.4rem; }
section:has(.ddn-contact) .form-wrapper .field-list .title,
section:has(.ddn-contact) .form-wrapper .field-list label,
section:has(.ddn-contact) .form-wrapper .field-list legend {
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #14263A;
}
section:has(.ddn-contact) .form-wrapper .field-list .title .required,
section:has(.ddn-contact) .form-wrapper .field-list .description {
  text-transform: none;
  letter-spacing: 0;
  color: #5A6977;
}
section:has(.ddn-contact) .form-wrapper .field-list .field .field-element,
section:has(.ddn-contact) .form-wrapper .field-list select,
section:has(.ddn-contact) .form-wrapper .field-list textarea {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.9rem 1rem;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  color: #14263A;
  background: #F7F6F2;
  border: 1px solid rgba(20, 38, 58, 0.28);
  border-radius: 3px;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
section:has(.ddn-contact) .form-wrapper .field-list textarea { min-height: 170px; resize: vertical; }
section:has(.ddn-contact) .form-wrapper .field-list .field .field-element:focus,
section:has(.ddn-contact) .form-wrapper .field-list select:focus,
section:has(.ddn-contact) .form-wrapper .field-list textarea:focus {
  outline: none;
  border-color: #347B83;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(52, 123, 131, 0.18);
}
section:has(.ddn-contact) .form-wrapper .form-button-wrapper .button,
section:has(.ddn-contact) .form-wrapper .form-button-wrapper button,
section:has(.ddn-contact) .form-wrapper .form-button-wrapper input[type="submit"] {
  min-height: 52px;
  padding: 0.9rem 1.75rem;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #F7F6F2;
  background: #14263A;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.25s;
}
section:has(.ddn-contact) .form-wrapper .form-button-wrapper .button:hover,
section:has(.ddn-contact) .form-wrapper .form-button-wrapper button:hover,
section:has(.ddn-contact) .form-wrapper .form-button-wrapper input[type="submit"]:hover {
  background: #2A6870;
}
section:has(.ddn-contact) .form-submission-text {
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.45rem;
  line-height: 1.4;
  color: #14263A;
  padding: 1.5rem 0 1.5rem 1.25rem;
  border-left: 3px solid #347B83;
}