/* ---------------------------------------------------------------------------
   cms.css — styling for the parts the CMS itself renders.

   The converted site keeps its own theme stylesheet, which still does all the
   heavy lifting. This file only covers the chrome the CMS introduces: the
   contact form, the FAQ accordion, the gallery grid, counters, testimonials
   and the blog listing extras.

   Everything here is deliberately low-specificity and scoped to a cms- prefix
   so it cannot fight the theme. Colours come from the theme's own variables
   where they exist, with a neutral fallback, so a site re-themed from the
   admin re-themes these too.
   --------------------------------------------------------------------------- */

:root {
  --cms-fg: var(--cms-text, #21262e);
  --cms-line: rgba(0, 0, 0, .14);
  --cms-accent: var(--cms-primary, #1f6feb);
  --cms-radius: 6px;
}

/* ------------------------------------------------------------- the form */
.cms-form { margin: 0 0 8px; }

/* Twelve columns, because the forms these replace used the theme's own column
   tokens: three fields on a line is one-third, and a two-column grid turned
   that into two-per-line and re-flowed every form on the site. */
.cms-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 16px;
}
.cms-f-w12 { grid-column: span 12; }
.cms-f-w9  { grid-column: span 9; }
.cms-f-w8  { grid-column: span 8; }
.cms-f-w7  { grid-column: span 7; }
.cms-f-w6  { grid-column: span 6; }
.cms-f-w5  { grid-column: span 5; }
.cms-f-w4  { grid-column: span 4; }
.cms-f-w3  { grid-column: span 3; }
/* The gap between rows is the field's own bottom margin, so a themed input
   that already carries one is not spaced twice. */
.cms-f { margin-bottom: 10px; }
/* older markup */
.cms-f-full { grid-column: 1 / -1; }

.cms-f label {
  display: block;
  margin: 0 0 5px;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--cms-fg);
}

/* Zero specificity on purpose — :where() contributes nothing, so the site's
   OWN theme styles these controls if it styles inputs at all, and the form
   looks like the form it replaced instead of like this stylesheet. On a
   Betheme site the difference was 8px of height per field; these are the
   fallback for a theme that styles nothing. */
:where(.cms-f) :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 11px 13px;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--cms-fg);
  background: #fff;
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Width must hold whatever the theme says, or a themed input keeps its own
   fixed width and the two-column grid breaks. */
.cms-f input[type="text"],
.cms-f input[type="email"],
.cms-f input[type="tel"],
.cms-f select,
.cms-f textarea { box-sizing: border-box; width: 100%; max-width: 100%; }
/* No min-height: the textarea's `rows` comes from the form this one replaced,
   and a floor of 128px overrode a two-row message box back up to five. */
:where(.cms-f) :where(textarea) { resize: vertical; }

.cms-f input:focus-visible,
.cms-f select:focus-visible,
.cms-f textarea:focus-visible {
  outline: none;
  border-color: var(--cms-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cms-accent) 22%, transparent);
}

/* the consent tick sits on one line with its notice, not stacked */
/* `.cms-f label` above is (0,1,1) and this was (0,1,0), so the 600 weight won
   and every consent notice rendered bold — the approved forms print it in the
   body weight. Matching the specificity settles it where it is written. */
.cms-f label.cms-check,
.cms-check {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
}
.cms-check input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
}

.cms-consent {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.55;
  opacity: .82;
}

/* The theme styles buttons and inputs with their own margins; these keep the
   form's rhythm close to the CF7 form it replaces instead of stacking ours on
   top of the theme's. */
.cms-submit { margin-top: 10px; margin-bottom: 0; }

.cms-cap input { margin-bottom: 0; }

.form-ok, .form-err {
  margin: 0 0 16px;
  padding: 12px 15px;
  border-radius: var(--cms-radius);
  font-size: 15px;
  line-height: 1.5;
}
.form-ok  { background: #e9f7ee; border: 1px solid #a8dcbb; color: #14562c; }
.form-err { background: #fdecec; border: 1px solid #f3b6b6; color: #8d1f1f; }
.form-err ul { margin: 0; padding-left: 18px; }

@media (max-width: 767px) {
  /* Stack on phones — the theme does the same to its own columns. A grid does
     NOT collapse on its own, and the page then overflows sideways and drags. */
  .cms-form-grid { grid-template-columns: 1fr; }
  .cms-form-grid > .cms-f { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- the FAQ */
.cms-faq-item {
  border-bottom: 1px solid var(--cms-line);
}
.cms-faq-item > summary {
  cursor: pointer;
  padding: 15px 30px 15px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  position: relative;
}
.cms-faq-item > summary::-webkit-details-marker { display: none; }
.cms-faq-item > summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
}
.cms-faq-item[open] > summary::after { content: "\2013"; }
.cms-faq-a { padding: 0 0 16px; line-height: 1.65; }

/* --------------------------------------------------------- the gallery */
.cms-gitem { overflow: hidden; border-radius: var(--cms-radius); }
.cms-gitem img { transition: transform .35s ease; }
.cms-gitem a:hover img { transform: scale(1.04); }
.cms-gitem figcaption { padding: 7px 2px 0; font-size: 13px; opacity: .75; }

/* -------------------------------------------------------- the counters */
.mfn-counter .number-wrapper { font-size: 40px; font-weight: 700; line-height: 1.1; }
.mfn-counter .desc { margin-top: 5px; font-size: 15px; opacity: .8; }

/* ---------------------------------------------------- the testimonials */
.testimonials_item blockquote {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  font-style: italic;
  line-height: 1.65;
}
.testimonials_author { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.testimonials_author img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonials_author span { opacity: .7; }

/* ------------------------------------------------------------- the CTA */
.section-cta .cta-text { margin: 8px 0 16px; font-size: 17px; line-height: 1.6; }
.section-cta .cta-buttons { margin: 0; }

/* ------------------------------------------------------------ the blog */
.post-excerpt { line-height: 1.6; }
.post-more { display: inline-block; margin-top: 6px; font-weight: 600; }
.posts-more { margin-top: 22px; }

.pagination { display: flex; gap: 6px; margin: 26px 0 0; flex-wrap: wrap; }
.pagination a, .pagination .current {
  min-width: 36px;
  padding: 7px 10px;
  text-align: center;
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius);
  text-decoration: none;
}
.pagination .current { background: var(--cms-accent); border-color: var(--cms-accent); color: #fff; }

/* The archive/post title in the content is a styled span, because the page's
   real H1 is the banner above it. Styling the CLASS (never the tag) is what
   makes that switch cost zero pixels. */
.archive-title, .post-title.entry-title {
  display: block;
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 10px;
}
.archive-intro { margin: 0 0 22px; line-height: 1.65; }

/* ---------------------------------------------------------- the embeds */
.embed-wrap { position: relative; }
.embed-wrap iframe { display: block; width: 100%; border: 0; }

@media print {
  .cms-form, .pagination { display: none; }
}

/* the math captcha row — the original CF7 forms had one, and it is part of
   the layout the client approved as well as a real anti-spam layer */
.cms-cap { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.cms-cap-q {
  padding: 7px 12px;
  font-weight: 700;
  font-size: 16px;
  background: rgba(0, 0, 0, .06);
  border-radius: var(--cms-radius);
  letter-spacing: .5px;
}
.cms-cap input {
  box-sizing: border-box;
  width: 130px;
  padding: 10px 12px;
  font: inherit;
  border: 1px solid var(--cms-line);
  border-radius: var(--cms-radius);
}
/* The answer box carries the theme's own control classes so it matches the
   fields above it — and those classes bring `width:100%` with them, through a
   selector far more specific than `.cms-cap input`. The box then filled the
   line and the form came out taller than the approved one. This is the one
   place the theme must not win, so it is stated with the same weight the
   theme states it. */
.cms-cap > span,
.cms-cap > span > input { display: inline-block; width: auto; }
.cms-cap input[name="cms_cap"] { width: 130px !important; max-width: 130px !important; }

/* A line the approved form printed between its controls (type 'note').
   The theme owns the typography; this only stops the grid cell adding a
   label's worth of space above it. */
.cms-f-note { margin: 0; }
.cms-f-note p { margin: 0; }