/* Fixes for a Squarespace site served by Apostrophe (modules/sq-site). */

/* The CMS wraps a section's blocks (and each block's content) in an area
   container; for the grid, the blocks must be its direct children. */
.fluid-engine > .apos-area,
.fluid-engine > .apos-area > [data-apos-widget],
.fe-block .sqs-block-content > .apos-area,
.fe-block .sqs-block-content > .apos-area > [data-apos-widget],
.sqs-html-content > .apos-area,
.sqs-html-content > .apos-area > [data-apos-widget],
.sqs-html-content [data-rich-text] { display: contents; }
.fe-block .sqs-block-content { height: 100%; }
.sqs-html-content p, .sqs-html-content h1, .sqs-html-content h2, .sqs-html-content h3, .sqs-html-content h4 { white-space: pre-wrap; }

/* Agenda, the site's heading face, is an Adobe font licensed to Squarespace;
   the nearest free one stands in. */
:root, body { --heading-font-font-family: "Barlow Semi Condensed", "agenda", sans-serif; }

/* A Vimeo background, sized to cover its section like Squarespace's. */
.section-background { position: absolute; inset: 0; overflow: hidden; }
/* The iframe takes the video's own shape (--sq-ratio, 16:9 until sq-site.js
   reads the real one from Vimeo) at the smallest size that covers the section:
   sized from the section's box (container units), not the window, or the
   player letterboxes the video inside it and leaves black bands. */
.sq-video-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; --sq-ratio: 1.7778; }
.sq-video-bg--file video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sq-video-bg iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 100cqh * var(--sq-ratio)); height: max(100cqh, 100cqw / var(--sq-ratio)); transform: translate(-50%, -50%); border: 0; }
/* The section's colour over its picture, as Squarespace tints it; a video is
   darkened with black (Squarespace darkens it with a brightness filter
   instead, the section's "Video brightness"). */
.section-background-overlay { position: absolute; inset: 0; pointer-events: none; }
.sq-video-bg + .section-background-overlay { background-color: #000; }

/* Every Fluid Engine button fills its block, as Squarespace's own script
   makes it (sqs-stretched and a content flex of 1 on all of them). */
.fe-block .sqs-block-button { --sqs-block-content-flex: 1; }
.fe-block .sqs-block-button-container { width: 100%; height: 100%; }
.fe-block .sqs-block-button-container .sqs-block-button-element { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }

/* Review cards (sq-reviews-widget): a card per review, the quote-mark picture
   on its top left corner, dealt into one to three columns. */
.sq-reviews { display: grid; grid-template-columns: 1fr; column-gap: 11px; row-gap: 60px; padding-top: 30px; width: 100%; }
@media (min-width: 768px) {
  .sq-reviews--2 { grid-template-columns: repeat(2, 1fr); row-gap: 50px; }
  .sq-reviews--3 { grid-template-columns: repeat(3, 1fr); row-gap: 50px; }
  .sq-reviews { padding-top: 16px; }
}
.sq-review { position: relative; display: flex; }
.sq-review__icon { position: absolute; z-index: 1; left: 10px; top: -30px; width: 59px; height: 59px; object-fit: contain; }
.sq-review__card { flex: 1; background: var(--sq-card, #fff); border-radius: 8px; box-shadow: 1.1px 1.6px 3px hsla(var(--lightAccent-hsl), 1); padding: 34px 21px 26px; min-height: 240px; box-sizing: border-box; }
@media (min-width: 768px) {
  .sq-review__icon { left: 0; top: -16px; width: 45px; height: 45px; }
  .sq-review__card { padding: 26px 26px 30px; min-height: 290px; }
}
.sq-review__card p { margin: 16px 0; }
.sq-review__card p:first-child { margin-top: 0; }
.sq-review__card p:last-child { margin-bottom: 0; }
.sq-reviews-block .sqs-block-content { width: 100%; }

/* The phone menu, opened by sq-site.js. */
body.header--menu-open { overflow: hidden; }
body.header--menu-open .header-menu { visibility: visible; opacity: 1; }

/* Forms: the bot trap, and the message after sending. */
.sq-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.sq-form-said { margin-top: 1em; }
.sq-form-said.bad { color: #b42318; }
form[data-sq-form] .field-element { width: 100%; box-sizing: border-box; }
form[data-sq-form] fieldset.form-item.fields { display: flex; flex-wrap: wrap; gap: 0 14px; border: 0; padding: 0; }
form[data-sq-form] fieldset.form-item.fields > legend { width: 100%; }
form[data-sq-form] fieldset.form-item.fields > .field { flex: 1 1 200px; }
form[data-sq-form] .caption-text { display: block; font-size: .85em; opacity: .8; }

/* Editing: the CMS's own controls need room, so blocks stack in edit mode. */
/* Editing: Apostrophe wraps the blocks in its own area markup, which cannot sit
   in the section grid, so the blocks stack while the page is in edit mode */
.fluid-engine:has(.apos-areas-widgets-list) { display: block !important; height: auto !important; padding: 24px 4vw; }
.fluid-engine:has(.apos-areas-widgets-list) .apos-area,
.fluid-engine:has(.apos-areas-widgets-list) .apos-area-widget-wrapper { width: 100% !important; }
.fluid-engine:has(.apos-areas-widgets-list) .fe-block { position: relative !important; grid-area: auto !important; min-height: 40px; margin: 8px 0; height: auto !important; }
.page-section:has(.apos-areas-widgets-list) { min-height: 0 !important; }
body:has(.apos-admin-bar) #header { position: relative !important; top: 0 !important; }

/* The blog list: Squarespace places its masonry cards in script; sq-site.js
   deals them into two columns (one on a phone). */
.blog-masonry-wrapper { height: auto !important; }
.blog-masonry-wrapper.sq-masonry { display: flex; gap: var(--blog-horizontal-spacing, 30px); align-items: flex-start; }
.sq-masonry > .sq-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--blog-vertical-spacing, 20px); }
.blog-masonry-wrapper .blog-item { position: static !important; transform: none !important; opacity: 1 !important; visibility: visible !important; width: auto !important; }
.blog-masonry-wrapper .image-wrapper { display: block; height: auto !important; padding: 0 !important; position: static !important; }
.blog-masonry-wrapper .image-wrapper img { position: static !important; opacity: 1 !important; width: 100% !important; height: auto !important; display: block; }

/* Enquiry forms, styled after the quote form the site embedded: a pale panel,
   white boxes, a full-width button. */
form[data-sq-form] { background: #eaf1f8; border-radius: 6px; padding: 26px 24px; font-family: "IBM Plex Sans", sans-serif; color: #16232c; }
form[data-sq-form] .field-list { display: flex; flex-direction: column; gap: 16px; }
form[data-sq-form] .title, form[data-sq-form] legend.title { display: block; font-weight: 600; font-size: 14px; margin: 0 0 6px; color: #16232c; }
form[data-sq-form] .required { color: #c62828; }
form[data-sq-form] .field-element { font: inherit !important; font-size: 14px !important; background: #fff !important; border: 1px solid #c9d6e2 !important; border-radius: 4px !important; padding: 10px 12px !important; color: #16232c !important; min-height: 42px; }
form[data-sq-form] .field-element:focus { outline: 2px solid #1d8fe0; outline-offset: 0; border-color: #1d8fe0; }
form[data-sq-form] textarea.field-element { min-height: 96px; resize: vertical; }
form[data-sq-form] select.field-element { appearance: auto; }
form[data-sq-form] fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
form[data-sq-form] .option label { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0; cursor: pointer; }
form[data-sq-form] .option input { width: 16px; height: 16px; margin: 0; accent-color: #1d8fe0; }
form[data-sq-form] .caption-text { font-size: 12px; margin-bottom: 4px; }
form[data-sq-form] .form-button-wrapper { margin-top: 20px; }
form[data-sq-form] .form-button-wrapper button { width: 100%; border: 0; border-radius: 999px; padding: 14px 20px; font: 600 14px "Poppins", sans-serif; letter-spacing: .02em; background: var(--primaryButtonBackgroundColor, #1d8fe0); color: var(--primaryButtonTextColor, #fff); cursor: pointer; }
form[data-sq-form] .form-button-wrapper button:disabled { opacity: .6; cursor: default; }
form[data-sq-form] input[type=file].field-element { padding: 8px; }
form[data-sq-form] .caption-text, form[data-sq-form] .option label { color: #4a5a66 !important; }
/* The menu button is a plain button; the site's general button styles would
   paint it. */
.header-burger-btn { background: none !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; color: inherit; cursor: pointer; }
.header-burger .top-bun, .header-burger .bottom-bun, .header-burger .patty { height: 1px !important; }

/* Signed in, Apostrophe's own .container rule would cap the page at 1280px */
#page.container { max-width: none; width: 100%; padding: 0; }
/* The text editor keeps the section behind it */
#sections .apos-rich-text-editor, #footer-sections .apos-rich-text-editor { background: transparent !important; color: inherit !important; }

/* Squarespace's column layouts carry the class columns-12, which the CMS
   bundle loaded for signed-in editors also defines (a Tailwind utility:
   12 newspaper columns), squeezing a blog post into slivers while editing. */
.sqs-layout.columns-12 { columns: auto; }