@import url('tokens.css');

/* Glenbrook Chiropractic — site styles.
 *
 * Rebuilds the AIT `doctor2` presentation on hand-written CSS. The visual
 * target is the reference capture in _archive/screenshots/. No framework, no
 * jQuery: the original loaded 24 scripts to render six static pages.
 */

/* ---- Fonts -------------------------------------------------------------- */
/* Self-hosted rather than fetched from Google, so the site makes no
 * third-party request and has no render-blocking dependency on a CDN. */
@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/open-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/open-sans-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('/assets/fonts/open-sans-condensed-300.woff2') format('woff2');
  font-weight: 300 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url('/assets/fonts/open-sans-condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

/* ---- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-white);
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--lh-heading);
  color: var(--c-navy);
  margin: 0 0 var(--s-3);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-heading); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-heading); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-heading); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-heading); }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-heading); }

a { color: var(--c-blue); }
a:hover, a:focus-visible { color: var(--c-navy); }

:focus-visible {
  outline: 3px solid var(--c-blue-bright);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--c-white); color: var(--c-navy);
  padding: var(--s-2) var(--s-3); z-index: 999;
}
.skip-link:focus { left: var(--s-3); top: var(--s-3); }

/* ---- Layout ------------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 1000px; }

/* ---- Header ------------------------------------------------------------- */
.site-header { background: var(--c-navy); position: relative; z-index: 500; }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-4) var(--s-3);
}

.site-logo img { width: clamp(200px, 26vw, 300px); height: auto; }

.site-header__aside {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.site-header__contact {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.header-phone,
.header-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-white);
  text-decoration: none;
  font-size: 1rem;
}
.header-phone svg,
.header-icon svg { flex: none; }
.header-phone:hover,
.header-icon:hover,
.header-phone:focus-visible,
.header-icon:focus-visible { color: var(--c-blue-light); }

.aca-badge img { width: 130px; }

/* ---- Navigation --------------------------------------------------------- */
.main-nav { padding-bottom: var(--s-2); }

.nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item { flex: 1 1 auto; }

.nav-item > a {
  display: block;
  text-align: center;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--c-white);
  color: var(--c-navy);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-item > a:hover,
.nav-item > a:focus-visible { background: var(--c-blue-light); color: var(--c-navy); }

/* The active page reads as recessed rather than raised. */
.nav-item--active > a { background: var(--c-navy); color: var(--c-blue-light); box-shadow: inset 0 0 0 1px var(--c-blue-light); }

.nav-item--cta > a { background: var(--c-blue); color: var(--c-white); }
.nav-item--cta > a:hover,
.nav-item--cta > a:focus-visible { background: var(--c-blue-bright); color: var(--c-navy); }

/* ---- Page title band ---------------------------------------------------- */
.page-title {
  background: var(--c-navy);
  padding-block: 40px;
  border-bottom: 2px solid var(--c-rule);
}
.page-title .container { display: flex; align-items: center; }
.page-title h1 {
  margin: 0;
  color: var(--c-white);
  text-transform: uppercase;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

/* ---- Breadcrumb --------------------------------------------------------- */
.breadcrumb {
  border-bottom: 1px solid var(--c-rule);
  font-size: 1rem;
}
.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: var(--s-3) 0;
}
.breadcrumb li + li::before { content: '/'; margin-right: var(--s-2); color: var(--c-rule); }
.breadcrumb a { display: inline-flex; color: var(--c-navy); }

/* ---- Blocks ------------------------------------------------------------- */
.block { margin-block: 0; }
.block--text,
.block--cards,
.block--faq,
.block--columns,
.block--postlist,
.block--infopanel { padding-block: var(--s-7); }

.block__heading { text-align: center; }
.block__intro { text-align: center; max-width: 70ch; margin-inline: auto; }

.block--divider {
  border: 0;
  border-top: 1px solid var(--c-rule);
  max-width: var(--container);
  margin: var(--s-5) auto;
}

/* ---- Prose -------------------------------------------------------------- */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p { margin: 0 0 var(--s-4); }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: 1.4em; }
.prose li { margin-bottom: var(--s-2); }
.prose img { margin-block: var(--s-4); }
.prose img.aligncenter { margin-inline: auto; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-4); }
.prose th, .prose td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--c-rule); text-align: left; }
.prose thead th { background: var(--c-navy); color: var(--c-white); font-family: var(--font-heading); }
.prose tbody tr:nth-child(odd) { background: #f4f4f4; }

/* ---- Feature cards ------------------------------------------------------ */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.feature { background: var(--feature-bg); }
.feature__link {
  display: block;
  padding: var(--s-6) var(--s-5);
  color: var(--c-white);
  text-decoration: none;
  height: 100%;
}
.feature__link:hover,
.feature__link:focus-visible { color: var(--c-white); background: rgba(0, 0, 0, 0.12); }

.feature__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: var(--s-3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
/* Icons are drawn as masked shapes so no icon font is loaded. */
.feature__icon::before {
  content: '';
  width: 22px; height: 22px;
  background: var(--feature-bg);
  mask-position: center; mask-repeat: no-repeat; mask-size: contain;
  -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain;
}
.feature__icon[data-icon='fa-user']::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 1c-2.7 0-5 1.4-5 3.2V15h10v-2.8C13 10.4 10.7 9 8 9Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 1c-2.7 0-5 1.4-5 3.2V15h10v-2.8C13 10.4 10.7 9 8 9Z'/%3E%3C/svg%3E");
}
.feature__icon[data-icon='fa-question-circle']::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm.9 10.5h-1.8v-1.8h1.8v1.8Zm1.3-4.6-.8.8c-.4.4-.5.7-.5 1.4H7.1v-.3c0-.6.2-1.1.6-1.5l1-1c.3-.3.4-.6.4-1 0-.6-.5-1.1-1.1-1.1s-1.1.5-1.1 1.1H5.1c0-1.6 1.3-2.8 2.9-2.8s2.9 1.2 2.9 2.7c0 .6-.2 1.2-.7 1.7Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm.9 10.5h-1.8v-1.8h1.8v1.8Zm1.3-4.6-.8.8c-.4.4-.5.7-.5 1.4H7.1v-.3c0-.6.2-1.1.6-1.5l1-1c.3-.3.4-.6.4-1 0-.6-.5-1.1-1.1-1.1s-1.1.5-1.1 1.1H5.1c0-1.6 1.3-2.8 2.9-2.8s2.9 1.2 2.9 2.7c0 .6-.2 1.2-.7 1.7Z'/%3E%3C/svg%3E");
}
.feature__icon[data-icon='fa-book']::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h7a2 2 0 0 1 2 2v10H5a2 2 0 0 1-2-2V2Zm1.5 1.5v8.2c0 .4.3.8.8.8h5.2V4.3a.8.8 0 0 0-.8-.8H4.5Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2h7a2 2 0 0 1 2 2v10H5a2 2 0 0 1-2-2V2Zm1.5 1.5v8.2c0 .4.3.8.8.8h5.2V4.3a.8.8 0 0 0-.8-.8H4.5Z'/%3E%3C/svg%3E");
}

.feature__title {
  color: inherit;
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}
.feature__subtitle { margin: 0 0 var(--s-3); font-size: 1rem; text-transform: uppercase; opacity: 0.9; }
.feature__excerpt { margin: 0 0 var(--s-4); font-size: 1rem; }
.feature__cta {
  display: inline-block;
  padding: var(--s-2) var(--s-3);
  background: rgba(255, 255, 255, 0.85);
  color: var(--c-navy);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 0.9375rem;
  text-transform: uppercase;
}
.feature__link:hover .feature__cta { background: var(--c-white); }

/* ---- Team cards --------------------------------------------------------- */
.cards { display: grid; gap: var(--s-5); }
.cards--grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards--single { max-width: 340px; margin-inline: auto; }

.card { text-align: center; }
.card__media img { margin-inline: auto; border-radius: var(--radius); }
.card__name { margin-top: var(--s-3); margin-bottom: var(--s-1); }
.card__role { margin: 0; font-size: 1rem; color: var(--c-text); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--c-rule); }
.faq__item { border-bottom: 1px solid var(--c-rule); }

.faq__question {
  cursor: pointer;
  list-style: none;
  padding: var(--s-4) var(--s-5) var(--s-4) 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--fs-h3);
  color: var(--c-navy);
  position: relative;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: '';
  position: absolute; right: 0; top: 50%;
  width: 12px; height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  translate: 0 -70%;
  rotate: 45deg;
  transition: rotate 0.2s ease;
}
.faq__item[open] .faq__question::after { rotate: -135deg; }
.faq__question:hover { color: var(--c-blue); }

.faq__answer { padding-bottom: var(--s-4); }

/* ---- Columns ------------------------------------------------------------ */
.columns { display: grid; gap: var(--s-6); }
.columns--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.columns--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.columns .block { padding-block: 0; }
.columns .container { padding-inline: 0; max-width: none; }
.columns .block__heading,
.columns .block__intro { text-align: left; margin-inline: 0; }

/* ---- Post list ---------------------------------------------------------- */
.post-cards { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.post-card { background: #f4f4f4; }
.post-card__link { display: block; text-decoration: none; color: inherit; }

.post-card__strip {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: #3a3a3a;
  color: var(--c-white);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.post-card__category { background: var(--c-navy); padding: 6px 12px; }
.post-card__author { padding: 6px 12px; }

.post-card__media { position: relative; }
.post-card__media img { width: 100%; }

/* Date badge sitting over the foot of the thumbnail. */
.post-card__date {
  position: absolute;
  left: 0; bottom: 0;
  display: flex;
  align-items: stretch;
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
}
.post-card__day {
  background: var(--c-navy);
  color: var(--c-white);
  padding: 6px 12px;
  font-size: 1.375rem;
  display: grid;
  place-items: center;
}
.post-card__month {
  background: var(--c-white);
  color: var(--c-navy);
  padding: 6px 10px;
  font-size: 0.75rem;
  line-height: 1.15;
  max-width: 90px;
  display: grid;
  place-items: center;
}

.post-card__body { padding: var(--s-5); text-align: center; }
.post-card__title { margin: 0 0 var(--s-3); color: var(--c-navy); font-size: var(--fs-h2); }
.post-card__link:hover .post-card__title { color: var(--c-blue); }
.post-card__excerpt { margin: 0 0 var(--s-4); font-size: 1rem; }

.post-card__more {
  display: inline-block;
  background: #9a9a9a;
  color: var(--c-white);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 0.875rem;
  text-transform: uppercase;
}
.post-card__link:hover .post-card__more { background: var(--c-navy); }

/* ---- Info panel --------------------------------------------------------- */
.block--infopanel { background: #f4f4f4; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: #111; color: #c9c9c9; margin-top: var(--s-7); }

.site-footer__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding-block: var(--s-7);
}

.site-footer h2 {
  color: var(--c-white);
  font-size: var(--fs-h3);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.site-footer a { color: var(--c-blue-light); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--c-white); text-decoration: underline; }

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--s-2); font-size: 1rem; }

.site-footer__practitioner { font-size: 1rem; margin: var(--s-4) 0; }
.site-footer__badge { width: 200px; margin-top: var(--s-4); }

.hours__day { color: var(--c-blue-light); font-weight: 700; }

.site-footer__bar { background: #0b0b0b; padding-block: var(--s-3); }
.nav-list--footer { justify-content: center; gap: var(--s-1); }
.nav-list--footer .nav-item { flex: 0 0 auto; }
.nav-list--footer .nav-item > a {
  background: none;
  color: var(--c-blue-light);
  font-size: 0.875rem;
  padding: var(--s-1) var(--s-2);
}
.nav-list--footer .nav-item > a:hover { background: none; color: var(--c-white); }
.nav-list--footer .nav-item--cta > a { background: var(--c-blue); color: var(--c-white); }

/* ---- Narrow screens ----------------------------------------------------- */
@media (max-width: 860px) {
  :root { --fs-body: 1rem; --fs-h1: 1.75rem; --fs-h2: 1.375rem; }

  .site-header__inner { justify-content: center; text-align: center; }
  .site-header__aside { justify-content: center; }

  .nav-item { flex: 1 1 calc(50% - 2px); }


  .block--text, .block--cards, .block--faq,
  .block--columns, .block--postlist, .block--infopanel { padding-block: var(--s-5); }
}

@media (max-width: 480px) {
  .nav-item { flex: 1 1 100%; }
}

/* ---- Motion ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Print -------------------------------------------------------------- */
@media print {
  .site-header, .breadcrumb, .site-footer__bar, .feature__cta { display: none; }
  body { font-size: 11pt; color: #000; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}

/* ---- Section backgrounds ------------------------------------------------ */
/* The theme set these per section in generated per-page CSS. They are carried
 * as custom properties on the section so the markup stays self-describing. */
.has-bg {
  background-color: var(--bg-colour, transparent);
  background-image: var(--bg-image, none);
  background-position: var(--bg-position, center);
  background-repeat: no-repeat;
  background-size: cover;
  padding-block: var(--bg-padding, var(--s-7));
}
/* A tinted panel needs breathing room; a full-bleed photo band does not. */
.has-bg:not([style*="--bg-image"]) { padding: var(--s-5); }

/* Inline hours rendered from practice.json via the {{opening-hours}} token. */
.hours-inline { list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.hours-inline li { margin-bottom: var(--s-2); }
.hours-inline strong { color: var(--c-navy); }
/* The homepage hero is a background image with no text over it, so at narrow
 * widths a 300px band would be most of the screen. */
@media (max-width: 860px) {
  .has-bg { padding-block: min(var(--bg-padding, 4rem), 30vw); }
}

/* ---- Info panel --------------------------------------------------------- */
.infopanel {
  display: grid;
  grid-template-columns: minmax(200px, 22%) 1fr;
  align-items: stretch;
  max-width: var(--container);
  margin-inline: auto;
}
.infopanel__media { overflow: hidden; }
.infopanel__media img { width: 100%; height: 100%; object-fit: cover; }

.infopanel__body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s-6);
  background: #f4f4f4;
  padding: var(--s-6) var(--s-5);
}
.infopanel__content h2 { text-transform: uppercase; }
.infopanel__options h3 { text-transform: uppercase; }
.infopanel__note { font-size: 1rem; margin-top: var(--s-4); }

.data-table { margin: 0; }
.data-table__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
}
.data-table__row:nth-child(odd) { background: #e6e6e6; }
.data-table dt { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; color: var(--c-navy); }
.data-table dd { margin: 0; font-weight: 700; }

@media (max-width: 1000px) {
  .infopanel { grid-template-columns: 1fr; }
  .infopanel__media { max-height: 220px; }
  .infopanel__body { grid-template-columns: 1fr; }
}

/* The theme's shortcode button, restyled rather than re-imported. */
.ait-sc-button {
  display: inline-block;
  background: var(--c-navy);
  color: var(--c-white) !important;
  padding: var(--s-3) var(--s-5);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  text-transform: uppercase;
  text-decoration: none !important;
  margin-block: var(--s-3);
}
.ait-sc-button:hover, .ait-sc-button:focus-visible { background: var(--c-blue); }

/* ---- Enquiry form ------------------------------------------------------- */
.block--form { padding-block: var(--s-7); }

.enquiry-form { max-width: 720px; margin-inline: auto; }
.enquiry-form__row { margin-bottom: var(--s-4); }
.enquiry-form__grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.enquiry-form label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  color: var(--c-navy);
}

.enquiry-form input,
.enquiry-form textarea {
  width: 100%;
  padding: var(--s-3);
  font-family: inherit;
  font-size: 1rem;
  color: var(--c-text);
  background: var(--c-white);
  border: 1px solid #b9b9b9;
  border-radius: var(--radius);
}
.enquiry-form input:focus-visible,
.enquiry-form textarea:focus-visible { border-color: var(--c-blue); }

/* Invalid state is announced by text as well as colour, never colour alone. */
.enquiry-form [aria-invalid='true'] { border-color: #b3261e; }
.enquiry-form__error { margin: var(--s-2) 0 0; color: #b3261e; font-size: 0.9375rem; }
.enquiry-form__hint { margin: calc(var(--s-4) * -0.5) 0 var(--s-4); font-size: 0.9375rem; color: #5c5c5c; }

.enquiry-form__hp {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.enquiry-form__submit {
  display: inline-block;
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: 1.0625rem;
  text-transform: uppercase;
  color: var(--c-white);
  background: var(--c-navy);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.enquiry-form__submit:hover:not(:disabled) { background: var(--c-blue); }
.enquiry-form__submit:disabled { opacity: 0.6; cursor: progress; }

.enquiry-form__status { margin: var(--s-3) 0 0; font-weight: 700; }
.enquiry-form__status[data-state='error'] { color: #b3261e; }
.enquiry-form__status[data-state='ok'] { color: #1b6b3a; }

.enquiry-form__fallback { margin-top: var(--s-3); font-size: 0.9375rem; }

/* ---- Page title band ---------------------------------------------------- */
/* The theme layered a translucent wash over a background photograph. */
.page-title--image {
  /* The theme's shorthand was `background: url(...) no-repeat <pos> scroll
   * rgba(...)`, where the rgba is the background COLOUR sitting behind the
   * image, not a wash over it, and the image is at natural size. Treating it
   * as an overlay washes the photograph out. */
  background-color: var(--hero-wash, var(--c-navy));
  background-image: var(--hero-image);
  background-position: var(--hero-position, center center);
  background-repeat: no-repeat;
  /* 1920x300 source shown at natural size and centred, as the theme had it. */
  background-size: auto;
  position: relative;
}

/* The theme's band read as flat wash on the left and photograph on the right,
 * but only because a 1920px image overhung a wider viewport. At 1440px the
 * heading lands on the busy middle of the photo instead. This scrim reproduces
 * the light-left / image-right reading at any width, so the navy heading stays
 * legible regardless of window size. */
.page-title--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.82) 26%,
    rgba(255, 255, 255, 0.35) 48%,
    rgba(255, 255, 255, 0) 64%
  );
}
.page-title--image .container { position: relative; z-index: 1; }

.page-title--image h1,
.page-title--image .page-title__description {
  /* Navy rather than white: the bands sit behind a light grey wash, where
   * white measured between 1.2:1 and 2.7:1. Navy measures 5.4:1 to 11.7:1 on
   * the same backgrounds. The soft white halo keeps it readable where the
   * photograph behind is busy. */
  color: var(--c-navy);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.85), 0 0 12px rgba(255, 255, 255, 0.7);
}

@media (max-width: 860px) {
  .page-title--image { background-size: cover; }
}

/* ---- Content with a photo sidebar --------------------------------------- */
.with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s-6);
  align-items: start;
}
/* Blocks inside the sidebar layout are already inside a container. */
.with-sidebar .block .container { padding-inline: 0; max-width: none; }

.sidebar-gallery { display: grid; gap: var(--s-4); padding-block: var(--s-7); }
.sidebar-gallery__item { margin: 0; }
.sidebar-gallery__item img { width: 100%; border-radius: var(--radius); }

@media (max-width: 900px) {
  .with-sidebar { grid-template-columns: 1fr; }
  .sidebar-gallery { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); padding-top: 0; }
}

/* ---- Team cards: circular portraits, matching the original -------------- */
.card__media img {
  width: 200px; height: 200px;
  object-fit: cover;
  border-radius: 50%;
}
.cards--single { max-width: 640px; }
.card__name { text-transform: uppercase; }

/* ---- Page title subtitle ------------------------------------------------ */
.page-title__description {
  margin: var(--s-2) 0 0;
  color: var(--c-white);
  font-size: 1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ---- List bullets ------------------------------------------------------- */
/* The theme drew these as a 20px navy disc with a white chevron from a sprite.
 * Reproduced with an inline mask so no sprite image is needed. */
.prose ul { list-style: none; padding-left: 0; }
.prose ul li {
  position: relative;
  padding: 0 0 10px 30px;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--c-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 6l4 4-4 4' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Nested and inline hour lists keep their own treatment. */
.hours-inline li::before, .site-footer li::before { content: none; }
.hours-inline li, .site-footer li { padding-left: 0; }

/* ---- FAQ toggles: match the theme's bordered, tinted headers ------------ */
.faq { border-top: 0; }
.faq__item { border-bottom: 0; margin-top: 10px; }
.faq__item:first-child { margin-top: 0; }

.faq__question {
  border: 1px solid var(--c-rule);
  background: rgba(32, 62, 120, 0.2);
  padding: 8px 15px 6px 36px;
  font-size: var(--fs-h4);
  color: var(--c-navy);
}
.faq__question::after { content: none; }
/* Chevron sits on the left, as the theme had it, and flips when open. */
.faq__question::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  translate: 0 -70%;
  rotate: 45deg;
  transition: rotate 0.2s ease;
}
.faq__item[open] .faq__question::before { rotate: -135deg; translate: 0 -25%; }
.faq__answer { padding: var(--s-4) var(--s-4) var(--s-4) 36px; }