/* Flextro base: design tokens and the pieces the header and footer need on every page,
   including Elementor pages that do not load a design stylesheet. */
:root{
  --ink:#1F2935;
  --teal:#46C6C3;
  --teal-dark:#176B69;
  --green:#8AC646;
  --shadow-sm:0 12px 34px rgba(31,41,53,.08);
}

.flextro-theme .fx-header,
.flextro-theme .live-footer{
  font-family:Montserrat,"Montserrat Fallback",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-align:left;
}
.flextro-theme .live-footer *,
.flextro-theme .live-footer *:before,
.flextro-theme .live-footer *:after{box-sizing:border-box}
.flextro-theme .live-footer .container{width:min(calc(100% - 40px),1200px);margin-inline:auto}
.flextro-theme .fx-header a,
.flextro-theme .live-footer a{text-decoration:none}
/* Clear the page builder's default top margins in the footer, but never beat the design's
   own spacing: :where() keeps this at zero specificity, so any rule in the design's
   stylesheets (e.g. the gap under the footer logo) wins. */
.flextro-theme .live-footer :where(h2,h3,p,ul){margin-top:0}
.flextro-theme .fx-header img,
.flextro-theme .fx-header svg,
.flextro-theme .live-footer img,
.flextro-theme .live-footer svg{display:block;max-width:100%}
.flextro-theme .fx-header ul,
.flextro-theme .live-footer ul{list-style:none}
/* Neutralise the page builder's button styling, but leave the design's own font size and
   weight alone: `font: inherit` here would reset them and leave the Courier Services
   button lighter than the menu links beside it. */
.flextro-theme .fx-header button,
.flextro-theme .live-footer button{font-family:inherit;text-transform:none;letter-spacing:inherit;box-shadow:none}
.flextro-theme .fx-header [hidden],
.flextro-theme .live-footer [hidden]{display:none!important}
.flextro-theme .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Header bar edges line up with the page container (the hero badge, headings and body text)
   instead of sitting inside their own extra 5% inset. Container is 100%-40px, 100%-28px
   below 760px and 100%-22px below 380px. */
@media(max-width:1140px){
  body.flextro-theme .fx-header{padding-left:0;padding-right:0}
  body.flextro-theme .fx-bar{width:min(calc(100% - 40px),1320px)}
}
@media(max-width:760px){
  body.flextro-theme .fx-bar{width:min(calc(100% - 28px),1320px)}
}
@media(max-width:380px){
  body.flextro-theme .fx-bar{width:min(calc(100% - 22px),1320px)}
}

.admin-bar .fx-header{top:32px}
@media(max-width:782px){.admin-bar .fx-header{top:46px}}
@media(max-width:600px){.admin-bar .fx-header{top:0}}
body.fx-menu-open{overflow:hidden}

/* Quote form: Turnstile check, send status and confirmation */
.fx-turnstile:not(:empty){margin:4px 0 16px}
.fx-form-msg{margin:0 0 14px;padding:12px 14px;border-radius:12px;font-size:.86rem;line-height:1.5;font-weight:600}
.fx-form-msg[data-tone="error"]{background:#FDECEC;color:#8A1F1F;border:1px solid #F3C4C4}
.fx-form-msg[data-tone="info"]{background:var(--mist,#ECF9F9);color:var(--ink);border:1px solid var(--line,#D9E7E7)}
#quoteForm [aria-invalid="true"]{border-color:#C43D3D!important;box-shadow:0 0 0 3px rgba(196,61,61,.14)!important}
#quoteForm[aria-busy="true"] [type="submit"]{opacity:.7;cursor:progress}
.fx-quote-success{padding:8px 0 4px;outline:none}
.fx-quote-success h3{margin:0 0 10px;font-size:1.3rem;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.fx-quote-success p{margin:0 0 10px;color:var(--muted,#60707C);font-size:.92rem;line-height:1.6}
.fx-quote-success a{color:var(--teal-dark);font-weight:800;text-decoration:underline}

/* Breadcrumb: never reflow when the web font swaps in.
   On a phone the trail first paints in the fallback font on one line, then Montserrat
   arrives wider and wraps the last crumb onto a second line, pushing the hero down ~27px
   (measured CLS 0.308 on slow 4G). Showing only the first and current crumb below 620px
   keeps it to one line at any town-name length. The dot separator still renders, because
   `li + li::before` matches a hidden sibling, and the BreadcrumbList schema is unaffected. */
@media(max-width:620px){
  .flextro-theme .fx-breadcrumb ol{flex-wrap:nowrap}
  .flextro-theme .fx-breadcrumb li{white-space:nowrap}
  .flextro-theme .fx-breadcrumb li:nth-child(n+2):nth-last-child(n+2){display:none}
}

/* Page-information strip: last-changed date and the official guidance the service runs under.
   Quiet by design — it is provenance, not marketing. */
.flextro-theme .fx-page-meta{padding:22px 0 30px;border-top:1px solid var(--line,#D9E7E7);background:var(--paper,#F6FAFA)}
.flextro-theme .fx-page-meta p{margin:0;font-size:.78rem;line-height:1.6;color:var(--muted,#60707C)}
.flextro-theme .fx-page-updated{font-weight:700}
.flextro-theme .fx-page-sources a{color:var(--teal-dark,#176B69);text-decoration:underline}
@media(max-width:620px){.flextro-theme .fx-page-meta{padding:18px 0 24px}}