/* ===========================================================================
   Sentry — hand written styles.

   Plain CSS, no build step, edit it directly. It is loaded after styles.css,
   so it overrides the base rules while still losing to the utility classes
   in the markup (element selectors are weaker than classes).
   =========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   On the old site Museo declared the .woff file with format("woff2"), so the
   browser tried to parse a woff as woff2, failed, and fell back to the second
   source. Here woff2 comes first and the formats are honest.
   Lato was named in font-family but never loaded at all: no @font-face, no
   Google Fonts. All body copy silently fell back to the system sans.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: Museo300; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/Museo300-Regular-webfont-b2bbd211bc04498bcf4eecf540f44e52.woff2) format("woff2"),
       url(../fonts/Museo300-Regular-webfont-59f055629869d8521443bcb1cf7e120b.woff) format("woff");
}
@font-face {
  font-family: Museo500; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/Museo500-Regular-webfont-5ff129f27ee6a303e51c70ea2767f656.woff2) format("woff2"),
       url(../fonts/Museo500-Regular-webfont-b8f05b51f7d4ba68be6698bf7d511e7d.woff) format("woff");
}
@font-face {
  font-family: Museo700; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/Museo700-Regular-webfont-07182fc1ee93d759b1211d6ee404e808.woff2) format("woff2"),
       url(../fonts/Museo700-Regular-webfont-c885c275a65170bbc0fac9387d4de1a7.woff) format("woff");
}
/* @font-face {
  font-family: Lato; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../fonts/lato-300-latin.woff2) format("woff2");
}
@font-face {
  font-family: Lato; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/lato-400-latin.woff2) format("woff2");
}
@font-face {
  font-family: Lato; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/lato-700-latin.woff2) format("woff2");
} */

/* --- Base typography ------------------------------------------------------ */
body {
  font-family: Lato, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Museo700, ui-serif, Georgia, serif;
  font-weight: 700;
  margin-bottom: 1rem;
}
p { color: #000; font-weight: 300; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

thead { background-color: #d9e6ee; font-weight: 700; }
thead tr td { border: 1px solid #b3cdde; padding: .25rem 1rem; text-align: center; }
table tbody tr td { border: 1px solid #d9e6ee; font-weight: 300; padding: .25rem .5rem; }

/* --- Diagonal section cuts ------------------------------------------------ */
section.left,
section.right,
.mask-left,
footer { display: block; margin-top: -25px; }

section.left,
.mask-left,
footer { clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 25px, 40px 0); }
section.right { clip-path: polygon(100% 100%, 0 100%, 0 0, calc(100% - 40px) 0, 100% 25px); }

@media (min-width: 1024px) {
  section.left,
  section.right,
  .mask-left,
  footer { margin-top: -50px; }
  section.left,
  .mask-left,
  footer { clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 50px, 80px 0); }
  section.right { clip-path: polygon(100% 100%, 0 100%, 0 0, calc(100% - 80px) 0, 100% 50px); }
}

/* --- Images: replaces .gatsby-image-wrapper ------------------------------- */
.img-wrap { position: relative; overflow: hidden; }
.img-wrap img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0; max-width: none;
  object-fit: cover;
}
.img-wrap--constrained { display: inline-block; vertical-align: top; }
.img-wrap > div > img[aria-hidden="true"] { position: static; height: auto; }

/* --- Accordion ------------------------------------------------------------ */
.accordion-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .5s ease-in-out, opacity .5s ease-in-out;
}
.accordion-panel > * { overflow: hidden; }
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; opacity: 1; }
.accordion-item.is-open .accordion-icon-bar { transform: rotate(0deg); }

/* --- Desktop dropdown ----------------------------------------------------- */
.nav-sub {
  position: absolute; top: 100%; left: 0; min-width: 16rem;
  display: flex; flex-direction: column;
  background: #00568f; padding: .5rem 0;
  opacity: 0; visibility: hidden; transform: translateY(.5rem);
  transition: opacity .3s ease-in-out, transform .3s ease-in-out, visibility .3s;
  z-index: 60;
}
.nav-item:hover .nav-sub,
.nav-item:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sub a {
  display: block; padding: .5rem 1.25rem;
  color: #fff; font-size: .875rem; white-space: nowrap;
  transition: background .3s ease-in-out, color .3s ease-in-out;
}
.nav-sub a:hover { background: #fff; color: #00568f; }

/* --- Mobile menu ----------------------------------------------------------
   The panel is a full-screen blue sheet with the logo and the close button
   at the top, the menu under it and the Contact Us button at the foot. Its
   layout is entirely utilities, as on the live site; what is left here is
   showing and hiding it, which React did by mounting and unmounting the
   whole thing.

   The panel and the dropdown are the two pieces of the header that are not
   in the static build — React built them in the browser — so the live site,
   read in a browser, is the reference for both.
   -------------------------------------------------------------------------- */
.mobile-menu {
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease-in-out, visibility .4s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

/* --- Utilities the purged stylesheet does not carry -----------------------
   styles.css is the live site's own build, and the classes it keeps are the
   ones the static pages use. The mobile panel never reached a static page,
   so the handful it needs are declared here instead. */
.h-screen { height: 100vh; }
.overflow-scroll { overflow: scroll; }
.z-\[9999\] { z-index: 9999; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.hover\:underline:hover { text-decoration-line: underline; }
.hover\:opacity-100:hover { opacity: 1; }

/* --- Sliders --------------------------------------------------------------
   The class names come from splide, but its script is not used — site.js
   drives the sliders. These are the only rules the vendor CSS was needed for.
   -------------------------------------------------------------------------- */
.splide { position: relative; visibility: hidden; }
.splide.is-initialized,
.splide.is-rendered { visibility: visible; }
.splide__track { position: relative; overflow: hidden; z-index: 0; }
.splide__list {
  display: flex; height: 100%; margin: 0; padding: 0;
  backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.25, .72, .51, .96);
}
.splide__slide {
  flex: 0 0 100%; min-width: 0;
  box-sizing: border-box; position: relative;
  list-style: none; margin: 0;
  backface-visibility: hidden;
}
.splide__slide img { vertical-align: bottom; }
/* People carousel: several cards in view, the count is set by site.js. */
.splide--multi .splide__list { margin: 0 -4px; }
.splide--multi .splide__slide {
  flex: 0 0 calc(100% / var(--per-page, 1));
  padding: 0 4px;
}
.splide__dots {
  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .5rem; z-index: 20;
}
.splide__dot {
  width: .75rem; height: .75rem; border-radius: 9999px;
  background: rgba(255, 255, 255, .45); border: 0; cursor: pointer; padding: 0;
  transition: background .3s ease-in-out;
}
.splide__dot[aria-selected="true"] { background: #fff; }
.splide__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .85); color: #00568f;
  font-size: 1.25rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 20;
}
.splide__nav--prev { left: .5rem; }
.splide__nav--next { right: .5rem; }

/* --- Person bio modal -----------------------------------------------------
   Each person's text sits hidden inside their card and site.js moves it into
   the overlay. Shown via an own class rather than the `hidden` utility, so it
   does not depend on rule order inside styles.css.
   -------------------------------------------------------------------------- */
.person-bio { display: none; }
.person-modal { display: none; }
.person-modal.is-open { display: flex; }
.person-modal [data-modal-body] p { margin-bottom: 1rem; }

/* --- Header --------------------------------------------------------------- */
.header-sticky { transition: opacity .4s ease-in-out, transform .4s ease-in-out; }

/* --- Links typed into a rich-text field -----------------------------------
   The original gave these classes the editor cannot type. Same trick as the
   lists below: inside <main> every link and list the theme renders itself
   carries a class, so :not([class]) reaches only editor content. The scope
   matters — the navigation in the header and footer is built from bare
   <ul> and <li>, and an unscoped rule would restyle the menu. */
main a:not([class]) {
  color: rgb(0 86 143); text-decoration: underline;
  transition: color .5s ease-in-out;
}
main a:not([class]):hover { color: rgb(94 174 165); }

/* --- Lists typed into a rich-text field -----------------------------------
   The original rendered these as a flex row with an arrow icon per item. An
   editor cannot type that markup, so the shape comes from here instead and a
   bullet list added in the admin looks like the imported ones. */
main ul:not([class]),
main ol:not([class]) { margin-bottom: 1rem; }
main ul:not([class]) > li,
main ol:not([class]) > li {
  display: flex; align-items: flex-start; gap: 1rem;
  padding-bottom: .25rem; font-weight: 300;
}
main ul:not([class]) > li:last-child,
main ol:not([class]) > li:last-child { padding-bottom: 0; }
main ul:not([class]) > li::before {
  content: ""; flex: 0 0 auto;
  width: 1rem; height: 1rem; margin-top: .25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2300568f' stroke-width='3' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
}
main ol:not([class]) { counter-reset: sentry-ol; }
main ol:not([class]) > li::before {
  counter-increment: sentry-ol; content: counter(sentry-ol) ".";
  flex: 0 0 auto; width: 1rem; color: #00568f; font-weight: 600;
}

/* --- The Lead paragraph format --------------------------------------------
   inc/editor.php puts this one class in the editor's style dropdown. The
   original markup was `text-xl font-normal first-of-type:font-semibold`, so
   the weight only lifts when the paragraph opens its container, which is the
   only place the source data ever used the style. */
main p.lead { font-size: 1.25rem; line-height: 1.75rem; font-weight: 400; }
main p.lead:first-of-type { font-weight: 600; }

/* --- Tables typed into a rich-text field ----------------------------------
   Two of the SFI answers hold one. The original wrapped each in a
   horizontally scrolling div, which an editor cannot add; a scrolling block
   box on the table itself does the same job with one element fewer. */
main table:not([class]) { display: block; max-width: 100%; overflow-x: auto; margin-bottom: 1rem; }
main table:not([class]) td { padding-right: 1rem; vertical-align: top; }

/* --- The two Contact Form 7 forms -----------------------------------------
   The original forms posted to Netlify Forms and their controls carried
   Tailwind utilities. CF7 generates the controls itself and its tag syntax
   cannot express a class with a colon in it — `focus:border-blue` is not
   expressible — so the look is reproduced here instead.

   `.sentry-form` is the light form on /contact/; `.sentry-form--dark` is the
   campaign form on /sfi-funding/, which sits on black. Both classes come from
   html_class in the form's Additional Settings. */
main .sentry-form label { display: block; margin-bottom: .25rem; }
main .sentry-form label span { color: #00568f; }
main .sentry-form input[type="text"],
main .sentry-form input[type="tel"],
main .sentry-form input[type="email"],
main .sentry-form textarea {
  width: 100%; padding: .75rem;
  border: 2px solid #657373; outline: none;
  transition: border-color .5s ease-in-out;
}
main .sentry-form input[type="text"]:focus,
main .sentry-form input[type="tel"]:focus,
main .sentry-form input[type="email"]:focus,
main .sentry-form textarea:focus { border-color: #00568f; }
main .sentry-form input[type="submit"] {
  display: inline-flex; width: auto; white-space: nowrap;
  font-family: Museo700, ui-serif, serif; font-weight: 700;
  background: #00568f; color: #fff; padding: .5rem 1rem;
  border: 0; cursor: pointer;
  transition: background-color .5s ease-in-out;
}
main .sentry-form input[type="submit"]:hover { background: #39749f; }

/* The light form ranges its button right and fills the column height. */
main .sentry-form--light .sentry-form__submit { text-align: right; }
main .sentry-form--light textarea { height: 100%; }

/* On black: the fields are black too, and the button spans the form. */
main .sentry-form--dark label { color: #fff; }
main .sentry-form--dark input,
main .sentry-form--dark textarea { background: #000; color: #fff; }
main .sentry-form--dark textarea { height: 12rem; }
main .sentry-form--dark input[type="submit"] {
  width: 100%; justify-content: center;
  padding: 1rem 2rem; font-size: 1.25rem; line-height: 1.75rem;
}

/* --- A service card that is a link ----------------------------------------
   One card in twenty is clickable — Properties, pointing at the client's
   Rightmove listing — and nothing in the card's own markup says so. The arrow
   after the title is the signal that works everywhere; the hover is for a
   pointer, which a phone does not have. Plain CSS rather than Tailwind
   utilities, so this needs no rebuild of styles.css. */
.service-link .img-wrap img { transition: transform .5s ease-in-out; }
.service-link:hover .img-wrap img { transform: scale(1.05); }
.service-link h3 { transition: color .5s ease-in-out; }
.service-link:hover h3 { color: rgb(94 174 165); }
.service-link__arrow {
  display: inline-block; vertical-align: -.15em;
  width: 1.25rem; height: 1.25rem; margin-left: .5rem;
  transition: transform .5s ease-in-out;
}
.service-link:hover .service-link__arrow { transform: translateX(.25rem); }

/* --- Headings typed into a rich-text field --------------------------------
   The three policies are a single column of prose broken up by headings, and
   the original carried the sizes as utilities the editor cannot type. Same
   :not([class]) scope as the lists and links above: every heading the theme
   renders itself has a class, so this reaches editor content only. The weight
   and the bottom margin come from the base rule at the top of this file. */
main h2:not([class]) { color: #00568f; font-size: 1.875rem; line-height: 2.25rem; }
main h3:not([class]) { color: #00568f; font-size: 1.5rem; line-height: 2rem; }
main h4:not([class]) { color: #00568f; font-size: 1.125rem; line-height: 1.75rem; }

/* --- The two fixed header bars -------------------------------------------
   `site-bar` is a hook of our own, for a signed-in editor: the admin bar is
   fixed over the top of the page and a bar at top:0 disappears behind it.
   The widths are WordPress's own breakpoints — the admin bar is 32px tall,
   46px on a narrow screen, and below 600px it scrolls with the page instead.

   The bars themselves carry `h-18`, which has no rule anywhere: the class is
   inert on the live site and the bars size to their contents. Giving it the
   4.5rem it looks like it wants makes the bars shorter than what is in them
   — 80px of logo plus 2rem of padding on the campaign header, a 64px
   hamburger on a phone — and the contents hang out over the page. See
   README, "Fixed compared with the live site". */
body.admin-bar .site-bar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-bar { top: 46px; }
}
@media screen and (max-width: 600px) {
  body.admin-bar .site-bar { top: 0; }
}

/* --- Contact Form 7's own two additions ----------------------------------
   The spinner is an inline-block 24px wide with 24px of margin either side,
   hidden but still taking its place in the line. In the submit row, which is
   ranged right, that pushed the button 72px off the right edge the original
   lines it up with; on the dark form, which has a full-width button, it
   wrapped onto a line of its own. Out of the flow it keeps working and costs
   no space.

   The control wrap is the other one: CF7 puts every field inside an inline
   <span>, and the message column is a flex column whose textarea used to be
   a direct child and filled it. Through an inline span `height: 100%` has
   nothing to resolve against, so the textarea fell back to its rows and grew
   past the column. The wrap becomes the flex child the textarea was. */
main .sentry-form__submit { position: relative; }
main .sentry-form .wpcf7-spinner {
  position: absolute; left: 0; top: 50%;
  margin: 0; transform: translateY(-50%);
}
main .sentry-form .wpcf7-form-control-wrap { display: block; }
main .sentry-form--light .wpcf7-form-control-wrap:has(textarea) {
  display: flex; flex: 1 1 auto; min-height: 0;
}