/*
 * ConveyLoop page styles
 * ======================
 *
 * Styling for the pages ConveyLoop publishes into this repository. Every
 * generated page in this folder links to it.
 *
 * ---------------------------------------------------------------------------
 * DO NOT EDIT THIS FILE
 * ---------------------------------------------------------------------------
 * It is rewritten from scratch every time ConveyLoop publishes, so anything you
 * change here is lost on the next run. Everything you might want to change can
 * be changed without touching it:
 *
 *
 * TO CHANGE THE COLOURS OR THE TYPEFACE
 *
 *   They come from your own website — ConveyLoop reads them when it crawls you,
 *   so these pages match the rest of your site rather than looking like a
 *   third-party bolt-on. The values it found are in the :root block at the
 *   bottom of this file, each labelled with where it came from.
 *
 *   To change them, change them on your site: your <meta name="theme-color">,
 *   your brand custom properties, or the font-family and colours on your body
 *   rule. Publish that, then either press "Refresh Crawl" in ConveyLoop
 *   (Project Setup -> Crawl Facts) or wait for the next weekly run. The next
 *   publish after that carries the new values.
 *
 *   Background and text colour are only taken as a pair, and only when they
 *   contrast well enough to read. If yours are missing from the block below,
 *   that is why.
 *
 *
 * TO CHANGE ANYTHING ELSE
 *
 *   Write ordinary CSS in your own stylesheet. Every rule in this file sits
 *   inside @layer conveyloop, which means any CSS you write OUTSIDE a layer
 *   beats it — you do not need !important and you do not need a more specific
 *   selector. This is enough:
 *
 *       .cta-book { background: rebeccapurple; color: #fff; }
 *
 *   The classes generated pages use: .conveyloop-page (wraps every page),
 *   .conveyloop-breadcrumb, .pseo-hero, .local-hero, .related-posts, .faqs,
 *   .cta-block, .cta-actions, .cta-phone, .cta-book, .area-list.
 *
 *
 * TO REPLACE THIS FILE, OR STOP IT BEING WRITTEN
 *
 *   In ConveyLoop: Project Setup -> Git repository -> "How should page styling
 *   be delivered?". Choosing "No styling" stops this file being published at
 *   all and leaves the pages to your own CSS.
 */
@layer conveyloop {
  :root {
    --cl-text: #1a202c;
    --cl-muted: #4a5568;
    --cl-accent: #0f62fe;
    --cl-accent-contrast: #ffffff;
    --cl-rule: #e2e8f0;
    --cl-surface: #ffffff;

    /* A font stack, never a webfont — this file loads nothing over the wire. */
    --cl-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    --cl-measure: 68ch;
    --cl-leading: 1.65;

    /* Spacing. One step; everything else is a multiple of it. */
    --cl-step: 1rem;
    --cl-radius: 6px;
  }

  /* Document defaults. On body rather than on the page wrapper, so your own
     body rule overrides them and the page inherits yours instead. */
  body {
    color: var(--cl-text);
    background: var(--cl-surface);
    font-family: var(--cl-font);
    line-height: var(--cl-leading);
    margin: 0;
  }

  .conveyloop-page {
    max-width: var(--cl-measure);
    margin-inline: auto;
    padding: calc(var(--cl-step) * 2) var(--cl-step) calc(var(--cl-step) * 4);
  }

  /* Headings. */
  .conveyloop-page h1 {
    font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 calc(var(--cl-step) * 1.25);
  }

  .conveyloop-page h2 {
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
    line-height: 1.25;
    margin: calc(var(--cl-step) * 2.25) 0 calc(var(--cl-step) * 0.5);
  }

  .conveyloop-page h3 {
    font-size: 1.05rem;
    margin: calc(var(--cl-step) * 1.5) 0 calc(var(--cl-step) * 0.25);
  }

  .conveyloop-page p {
    margin: 0 0 var(--cl-step);
  }

  .conveyloop-page ul {
    margin: 0 0 var(--cl-step);
    padding-inline-start: calc(var(--cl-step) * 1.25);
  }

  .conveyloop-page li {
    margin-bottom: calc(var(--cl-step) * 0.35);
  }

  /* Links in the page's text and in the section page's list. Left to the
     browser they were its default blue, which a dark brand background turns
     unreadable. The breadcrumb's rule further down keeps its links quiet. */
  .conveyloop-page a {
    color: var(--cl-accent);
  }

  /* Hero image. Sized on the element too, so the page does not jump when it
     loads. */
  .pseo-hero,
  .local-hero {
    margin: 0 0 calc(var(--cl-step) * 1.75);
  }

  .pseo-hero img,
  .local-hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--cl-radius);
  }

  /* FAQ. Location pages use <details>; topic pages use headings. */
  .faqs details {
    border-bottom: 1px solid var(--cl-rule);
    padding: calc(var(--cl-step) * 0.6) 0;
  }

  .faqs summary {
    cursor: pointer;
    font-weight: 600;
  }

  .faqs summary::marker {
    color: var(--cl-muted);
  }

  /* Call to action. */
  .cta-block {
    margin: calc(var(--cl-step) * 2.5) 0 var(--cl-step);
    padding: calc(var(--cl-step) * 1.5);
    border: 1px solid var(--cl-rule);
    border-radius: var(--cl-radius);
  }

  /* The panel supplies its own spacing; the first and last children should not
     add to it. */
  .cta-block > :first-child {
    margin-top: 0;
  }

  .cta-block > :last-child {
    margin-bottom: 0;
  }

  .cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--cl-step) * 0.75);
  }

  .cta-phone,
  .cta-book {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(var(--cl-step) * 0.6) calc(var(--cl-step) * 1.2);
    border-radius: var(--cl-radius);
    font-weight: 600;
    text-decoration: none;
    /* Comfortable touch target — these pages are mostly read on a phone. */
    min-height: 44px;
    line-height: 1.3;
  }

  .cta-phone {
    background: var(--cl-accent);
    color: var(--cl-accent-contrast);
    border: 1px solid var(--cl-accent);
  }

  .cta-book {
    border: 1px solid var(--cl-accent);
    color: var(--cl-accent);
    background: transparent;
  }

  /* Coverage areas, as a set rather than a stack. */
  .area-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--cl-step) * 0.4) var(--cl-step);
    list-style: none;
    padding-inline-start: 0;
  }

  /* Breadcrumb. An <ol> without this is a numbered list, which reads as a
     broken page rather than as navigation. */
  .conveyloop-breadcrumb {
    margin-bottom: var(--cl-step);
    font-size: 0.875rem;
    color: var(--cl-muted);
  }

  .conveyloop-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--cl-step) * 0.35);
    list-style: none;
    margin: 0;
    padding-inline-start: 0;
  }

  /* The separator is generated rather than written into the markup: a reader
     using a screen reader hears the list, and does not need a slash read out
     between every crumb. */
  .conveyloop-breadcrumb li + li::before {
    content: "/";
    margin-inline-end: calc(var(--cl-step) * 0.35);
    color: var(--cl-rule);
  }

  .conveyloop-breadcrumb a {
    color: inherit;
  }

  .conveyloop-breadcrumb [aria-current="page"] {
    color: var(--cl-text);
  }

  /* Related pages. */
  .related-posts {
    margin-top: calc(var(--cl-step) * 2.5);
    padding-top: var(--cl-step);
    border-top: 1px solid var(--cl-rule);
  }

  .related-posts ul {
    list-style: none;
    padding-inline-start: 0;
  }

  .related-posts a {
    color: var(--cl-accent);
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --cl-text: #e2e8f0;
      --cl-muted: #a0aec0;
      --cl-rule: #2d3748;
      --cl-surface: #1a202c;
      --cl-accent: #63b3ed;
      --cl-accent-contrast: #1a202c;
    }
  }
}

/*
 * Your brand, read from your own site
 * ----------------------------------
 * These came from your website the last time ConveyLoop crawled it, so
 * these pages carry your colours and typeface rather than a generic set.
 *
 *   --cl-text  <-  stylesheet body color
 *   --cl-surface  <-  stylesheet body background
 *
 * To change them, change them on your site and publish, then press
 * "Refresh Crawl" in ConveyLoop (Project Setup -> Crawl Facts), or wait
 * for the next weekly run. Editing them here does nothing lasting: this
 * whole file is rewritten on the next publish.
 *
 * Anything not listed above was either not found on your site or was not
 * safe to use -- background and text are only taken as a pair, and only
 * when they contrast well enough to read.
 *
 * --cl-muted and --cl-rule are blended from your background and text
 * rather than read separately, so the whole palette stays yours and
 * stays readable however your reader has their device set.
 *
 * No accent colour was found on your site, so links and buttons use
 * ours, chosen to read on your background. Publish a
 * <meta name="theme-color"> or a --brand / --accent custom property
 * and the next crawl uses yours instead.
 */
:root {
  --cl-accent: #63b3ed;
  --cl-accent-contrast: #111111;
  --cl-surface: #0b1120;
  --cl-text: #fff;
  --cl-muted: #b6b8bc;
  --cl-rule: #282e3b;
}