/* =============================================================================
   WordPress additions
   =============================================================================
   assets/css/site.css holds the whole design and is a byte-for-byte copy of the
   stylesheet from the original static site, so it can be re-copied at any time
   without losing anything.

   This second file holds only the handful of rules WordPress itself needs:
   the grey admin bar that appears when you are logged in, and the class names
   WordPress puts on images and captions inside the editor.
   ========================================================================== */


/* --- 1. THE ADMIN BAR ------------------------------------------------------
   When you are logged in, WordPress pins a grey bar across the top of the
   site. The website header is also pinned to the top, so without these rules
   the two would sit on top of each other. Visitors never see this.
   -------------------------------------------------------------------------- */
body.admin-bar .header { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .header { top: 46px; }
}

/* The admin bar is not pinned on short screens, so the offset must go. */
@media screen and (max-width: 600px) {
  body.admin-bar .header { top: 0; }
}


/* --- 2. IMAGES AND CAPTIONS FROM THE EDITOR --------------------------------
   These are the class names WordPress adds when you insert a picture into a
   text box and choose "align left", "align centre" and so on.
   -------------------------------------------------------------------------- */
.prose img,
.prose iframe,
.prose video { max-width: 100%; height: auto; }

.prose img { border-radius: var(--r2, 14px); }

.alignleft {
  float: left;
  margin: 0 var(--s4, 1rem) var(--s3, .75rem) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--s3, .75rem) var(--s4, 1rem);
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide,
.alignfull { max-width: 100%; }

.wp-caption { max-width: 100%; }

.wp-caption-text,
.wp-element-caption,
figcaption {
  margin-top: var(--s2, .5rem);
  font-size: var(--fs-xs, .82rem);
  color: var(--muted, #5b6472);
}

.prose > figure + *,
.prose > .wp-caption + * { clear: both; }

/* On phones a floated image squeezes the text into a column, so stop it. */
@media (max-width: 40rem) {
  .alignleft,
  .alignright {
    float: none;
    display: block;
    margin: var(--s4, 1rem) 0;
  }
}


/* --- 3. CLASSES WORDPRESS EXPECTS EVERY THEME TO DEFINE ------------------- */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  clip-path: none;
  white-space: normal;
}

.sticky,
.bypostauthor { position: relative; }

.gallery { display: grid; gap: var(--s4, 1rem); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.gallery-item { margin: 0; }
.gallery-caption { font-size: var(--fs-xs, .82rem); color: var(--muted, #5b6472); }


/* --- 4. THE FORM ----------------------------------------------------------
   The quote form is now handled by WordPress itself instead of an outside
   service, so it can show a message back to the person who filled it in.
   -------------------------------------------------------------------------- */
.form__msg {
  margin-bottom: var(--s4, 1rem);
  padding: var(--s3, .75rem) var(--s4, 1rem);
  border-radius: var(--r2, 14px);
  font-size: var(--fs-sm, .94rem);
  font-weight: 600;
  line-height: 1.5;
}

.form__msg--bad {
  color: #7f1d1d;
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.form__msg--ok {
  color: #14532d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}


/* --- 5. PARAGRAPH ALIGNMENT ------------------------------------------------
   Left, centre or right on any body paragraph, chosen in the editor.

   Two things make all three of these have to be explicit rather than just two
   plus a default:

   1. Most of these paragraphs sit inside `.sec-h`, which site.css sets to
      `text-align: center`. So a paragraph with no instruction arrives CENTRED,
      and "line it up on the left" has to actively override that.
   2. `.sec-h p` is `margin: var(--s4) auto 0` with `max-width: 62ch` — the auto
      margins centre the text column itself. Setting text-align alone would leave
      a left-aligned paragraph starting at the left edge of a still-centred
      column, which reads as a smaller indent than the heading above it. So the
      margin on that side is zeroed to match, exactly as site.css's own
      `.sec-h--l p { margin-left: 0 }` does for the left-aligned variant.

   The wrapper is a <span> turned into a block rather than a class on the <p>,
   because the opening <p> of the first paragraph comes from the template while
   the rest are written by fx_paras_value(). A span inside the paragraph works
   for both, needs no template change, and survives the save filter (span keeps
   its class in fx_inline_tags()).
   -------------------------------------------------------------------------- */
.fx-al--l,
.fx-al--c,
.fx-al--r {
  display: block;
}

.fx-al--l { text-align: left; }
.fx-al--c { text-align: center; }
.fx-al--r { text-align: right; }

/* Pull the text column over to match, so the alignment is real rather than
   text nudged inside a still-centred box. Scoped to a paragraph that actually
   holds one of these, so nothing else on the page is touched. */
.sec-h p:has( > .fx-al--l ) { margin-left: 0; margin-right: auto; }
.sec-h p:has( > .fx-al--r ) { margin-left: auto; margin-right: 0; }
.sec-h p:has( > .fx-al--c ) { margin-left: auto; margin-right: auto; }

/* :has() is not everywhere yet. Without it the text still aligns correctly —
   only the column stays centred — so this is a refinement, not a requirement. */


/* --- 6. THE GAP BETWEEN TWO PARAGRAPHS ------------------------------------
   site.css sets `p { margin: 0 }`. In the static design every one of these
   slots held a single paragraph, so a margin would only have added dead space -
   which means a second paragraph she adds sat flush against the first on the
   cards, the promises, the steps, the area panels and the contact boxes.

   .fx-p is put on the second paragraph onwards by fx_paras_value() and
   fx_para_gaps(), never on the first, so a single paragraph is untouched and
   nothing already on the site moves.

   A single class (0,1,0) on purpose. Where site.css already spaces paragraphs
   - `.sec-h p` and `.hero p`, both (0,1,1) - its own larger gap still wins, so
   this only fills the places that had none.
   -------------------------------------------------------------------------- */
.fx-p { margin-top: var(--s4, 1rem); }


/* --- 7. THE ROUND CALL AND WHATSAPP BUTTONS -------------------------------
   Bottom right, on every page, from 768px up.

   DESKTOP ONLY, and deliberately. Below 768px site.css shows the wide
   .action-bar along the bottom edge, site.js slides it in after the hero and
   measures its height into the body's padding so it cannot cover the footer,
   and .totop moves to bottom:70px to sit above it. A second pair of round
   buttons in that same corner would fight all three. A desktop visitor, on the
   other hand, had no lasting way to call once the hero had scrolled away.

   Classes used here are defined in this file, not in site.css, which stays a
   byte-for-byte copy of the static site.
   -------------------------------------------------------------------------- */
.fx-float { display: none; }

@media (min-width: 48rem) {
  .fx-float {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* The scroll-to-top button lives in this corner too, so it moves up to sit
     above the pair: 2 × 52px + 12px gap + 16px base + a 14px breather. */
  body .totop { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); }

  .fx-float__b {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: var(--white, #fff);
    box-shadow: var(--sh-2, 0 4px 16px rgba(16, 35, 46, .18));
    text-decoration: none;
    transition: transform 220ms ease, box-shadow 220ms ease;
  }

  .fx-float__b svg { width: 24px; height: 24px; }

  /* The call button takes the brand blue; WhatsApp keeps its own green, because
     people recognise it and a recoloured one reads as something else. */
  .fx-float__b--call { background: var(--blue-d, #0059B3); }
  .fx-float__b--wa { background: #1FA855; }

  .fx-float__b:hover,
  .fx-float__b:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(16, 35, 46, .28);
    color: var(--white, #fff);
  }

  .fx-float__b:focus-visible {
    outline: 3px solid var(--ink, #10232e);
    outline-offset: 3px;
  }

  /* The label slides out on hover AND on keyboard focus. It is aria-hidden and
     duplicates the button's own aria-label, so it is never the only way to know
     what the button does. */
  .fx-float__t {
    position: absolute;
    right: calc(100% + 10px);
    padding: 7px 12px;
    border-radius: var(--r-sm, 8px);
    background: var(--ink, #10232e);
    color: var(--white, #fff);
    font-size: var(--fs-xs, .82rem);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  }

  .fx-float__b:hover .fx-float__t,
  .fx-float__b:focus-visible .fx-float__t {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-float__b,
  .fx-float__t { transition: none; }

  .fx-float__b:hover,
  .fx-float__b:focus-visible { transform: none; }
}

/* site.css hides .action-bar and .totop when printing; these belong with them. */
@media print {
  .fx-float { display: none !important; }
}


/* --- 8. SERVICE, LOCATION AND BLOG PAGES (1.5.0) -------------------------
   Built from the design's own variables so the new pages look like the rest of
   the site. site.css stays untouched.
   -------------------------------------------------------------------------- */

/* "What we fix" / "Places nearby" - a ticked list beside the writing. */
.fx-ticks {
  display: grid;
  gap: var(--s3, .75rem);
  margin: var(--s5, 1.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.fx-ticks li {
  display: flex;
  gap: var(--s3, .75rem);
  align-items: flex-start;
  font-weight: 500;
}

.fx-ticks svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--blue, #007BFF);
}

/* The blog: category filter. */
.fx-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2, .5rem);
  margin: 0 0 var(--s6, 2rem);
}

.fx-cats a {
  padding: var(--s2, .5rem) var(--s4, 1rem);
  border: 1px solid var(--line, #dfe5ea);
  border-radius: 999px;
  font-size: var(--fs-sm, .875rem);
  font-weight: 600;
  color: var(--ink, #10232e);
  text-decoration: none;
}

.fx-cats a:hover,
.fx-cats a[aria-current="page"] {
  background: var(--blue, #007BFF);
  border-color: var(--blue, #007BFF);
  color: var(--white, #fff);
}

/* A post card: a wide picture instead of a square one. */
.fx-post__img { aspect-ratio: 3 / 2; }

.fx-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2, .5rem) var(--s3, .75rem);
  align-items: center;
  font-size: var(--fs-xs, .82rem);
  color: var(--muted, #5b6472);
}

.fx-post__cat {
  padding: 2px 10px;
  background: var(--tint, #eef5ff);
  border-radius: 999px;
  font-weight: 700;
  color: var(--blue-t, #0059B3);
}

.fx-posts .card__b p:not(.fx-post__meta) { font-size: var(--fs-sm, .875rem); }

/* One article. */
.fx-article {
  max-width: 820px;
  margin-inline: auto;
}

.fx-article__img { margin: 0 0 var(--s6, 2rem); }
.fx-article__img img { width: 100%; height: auto; }

.fx-article__body { max-width: none; }

.fx-article__body h2 {
  margin-top: var(--s7, 3rem);
  font-size: 1.45rem;
}

.fx-article__body h3 { margin-top: var(--s6, 2rem); }
.fx-article__body > p + p { margin-top: var(--s4, 1rem); }

/* The call panel inside a post. */
.fx-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5, 1.5rem);
  align-items: center;
  justify-content: space-between;
}

.fx-cta h2 { font-size: 1.4rem; }
.fx-cta p { margin-top: var(--s2, .5rem); }

.fx-cta__btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3, .75rem);
  margin: 0;
}

/* The pagination WordPress prints under the blog. */
.fx-posts + .navigation {
  margin-top: var(--s7, 3rem);
  text-align: center;
}

.fx-posts + .navigation .nav-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--s2, .5rem);
}

.fx-posts + .navigation .page-numbers {
  min-width: 44px;
  padding: var(--s2, .5rem) var(--s3, .75rem);
  border: 1px solid var(--line, #dfe5ea);
  border-radius: var(--r, 10px);
  color: var(--ink, #10232e);
  text-decoration: none;
}

.fx-posts + .navigation .page-numbers.current {
  background: var(--blue, #007BFF);
  border-color: var(--blue, #007BFF);
  color: var(--white, #fff);
}

/* An extra section placed with "Add more content": its paragraphs get the same
   clear gap as everywhere else. */
.sec .prose > p + p { margin-top: var(--s4, 1rem); }