/* additions on top of the Sydney theme */
.hp-field { position:absolute; left:-9999px; }
.search-form input[type="search"] { padding:8px; min-width:260px; }
.wpcf7-response-output { padding:10px 14px; margin-bottom:16px; border:1px solid; }
.wpcf7-mail-sent-ok { border-color:#398f14; color:#398f14; }
.wpcf7-validation-errors { border-color:#f7e700; color:#8a6d3b; }
.mc4wp-alert { padding:10px 14px; margin-bottom:16px; border:1px solid; }
.mc4wp-success { border-color:#398f14; color:#398f14; }
.mc4wp-error { border-color:#b94a48; color:#b94a48; }

/* Several images in one paragraph. WordPress stacks them because each
   carries aligncenter; show them as a row that wraps on small screens. */
.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  align-items: center;
}
.image-row > a,
.image-row > img {
  margin: 0;
  display: block;
}
.image-row img {
  margin: 0;
  display: block;
}

/* Image slider. The SiteOrigin widget that used to drive this is gone
   from the site, so the markup was rendering as a bulleted list of
   images with a "1. 2." list under it. These rules plus /js/slider.js
   bring back the intended behaviour. */
.sow-slider-images {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.sow-slider-images .sow-slider-image {
  display: none;
  background-color: transparent !important;
}
.sow-slider-images .sow-slider-image.is-active { display: block; }
.sow-slider-images .sow-slider-image p { margin: 0; }
.sow-slider-images img { display: block; margin: 0 auto; max-width: 100%; height: auto; }

.sow-slider-pagination {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  text-align: center;
}
.sow-slider-pagination li { display: inline-block; margin: 0 5px; }
.sow-slider-pagination a {
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #2475b5;
  text-indent: -9999px;
  overflow: hidden;
}
.sow-slider-pagination a.is-active { background: #2475b5; }

/* The prev and next arrows used an icon font that is no longer loaded. */
.slider-nav { text-align: center; margin: 0 0 20px; }
.slider-nav a {
  display: inline-block;
  margin: 0 10px;
  font-size: 22px;
  line-height: 1;
  color: #2475b5;
  text-decoration: none;
}
.slider-nav a:hover { color: #1a5a8c; }

/* Social media buttons. The SiteOrigin widget that drew these is gone, so
   the icon spans rendered as blank boxes. The icons are Font Awesome code
   points held in data-sow-icon, and the theme already loads Font Awesome,
   so this puts them back. */
.sow-social-media-button {
  display: inline-block;
  width: 44px;
  height: 44px;
  line-height: 44px;
  margin: 0 6px 6px 0;
  border-radius: 50%;
  background: #2475b5;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s;
}
.sow-social-media-button:hover,
.sow-social-media-button:focus { background: #1a5a8c; color: #fff; }
.sow-social-media-button > span { display: block; }
.sow-icon-fontawesome {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
}
.sow-icon-fontawesome:before { content: attr(data-sow-icon); }

.sow-social-media-button-youtube  { background: #cd201f; }
.sow-social-media-button-linkedin { background: #0077b5; }
.sow-social-media-button-twitter  { background: #1da1f2; }
.sow-social-media-button-facebook { background: #3b5998; }
.sow-social-media-button-envelope { background: #555; }

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 20px 0;
}
.social-row .sow-social-media-button { margin: 0; }

/* Full width page builder rows. The builder saved margins and padding
   worked out for one fixed window width, so the row overflowed sideways
   at every other size. Those values are stripped out now, and the row is
   stretched here instead, which works at any width. */
html { overflow-x: hidden; }

.siteorigin-panels-stretch[data-stretch-type="full"],
.siteorigin-panels-stretch[data-stretch-type="full-stretched"] {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}

/* Panel headings have a small underline that the theme always centres.
   When the heading itself is aligned left or right, the underline was
   left stranded in the middle, so move it to match. */
.panel-grid-cell .widget-title[style*="text-align: left"]:after,
.panel-grid-cell .widget-title[style*="text-align:left"]:after {
  left: 0;
  margin-left: 0;
}
.panel-grid-cell .widget-title[style*="text-align: right"]:after,
.panel-grid-cell .widget-title[style*="text-align:right"]:after {
  left: auto;
  right: 0;
  margin-left: 0;
}

/* Contact form. As built, the three single line fields were 410px wide
   while the message box stretched to 1140px, which read as broken. Hold
   the form to one readable column and give every field the same width. */
.wpcf7-form {
  max-width: 620px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="file"],
.wpcf7-form textarea {
  width: 100%;
  max-width: 100%;
}
.wpcf7-form input[type="submit"] {
  width: auto;
}
.wpcf7-form p {
  margin-bottom: 18px;
}

/* Team grid. The nine people used to run down the page one per row, which
   made /about/ about 6900 pixels long. */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  margin: 30px 0 50px;
}
.team-member {
  text-align: center;
}
.team-photo {
  /* One shape for every photo, so the names line up across a row. */
  width: 100%;
  max-width: 220px;
  aspect-ratio: 27 / 30;
  margin: 0 auto 14px;
  overflow: hidden;
  background: #f0f0f0;
}
.team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.team-name {
  margin: 0 0 4px;
  font-size: 18px;
  color: #2475b5;
}
.team-role {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.45;
  color: #666;
}
.team-link {
  margin: 0;
  font-size: 14px;
}

@media (max-width: 991px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* Two per row on a phone. One per row made /about/ about 6600 pixels
     tall, which is a lot of scrolling for nine people. */
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .team-name { font-size: 16px; }
  .team-role { font-size: 13px; }
}

/* Videos. They carried fixed pixel sizes, one of them 1170 by 878, which
   left a large hole in the page. */
.video-embed {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 0 0 20px;
  background: #000;
}
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.video-row .video-embed { margin: 0; }
@media (max-width: 767px) {
  .video-row { grid-template-columns: 1fr; }
}

/* Endorsements. The portrait used to sit between the quote and the name at
   full size, which broke the reading flow. Now it is a small avatar next to
   the person's name, under the quote. */
.endorsement {
  margin: 0 0 40px;
  max-width: 820px;
}
.endorsement blockquote {
  margin: 0 0 14px;
}
.endorsement-by {
  display: flex;
  align-items: center;
  gap: 14px;
}
.endorsement-photo img {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  /* Slightly below the top, so a headshot shows the face and not the hair. */
  object-position: center 30%;
}
.endorsement-name {
  font-size: 14px;
  color: #666;
}

/* Section headings sat next to a floated image and wrapped around it, so
   the last word dropped below the picture. Start them on a clear line. */
.entry-content h3.widget-title {
  clear: both;
}

/* Every page now opens with an h1, which it never had before. These rules
   keep the heading looking exactly as it did at its old level. */
.entry-content h1.as-h2 { font-size: 42px; }
.entry-content h1.as-h3 { font-size: 32px; }
.entry-content h1.as-h4 { font-size: 25px; }

/* For listings and search there is no visible heading in the design, so the
   h1 is there for screen readers and search engines only. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}