/* Shared layout base for the client sites.
   These are the rules the page builder applies to every row, column and module, written once with plain class names.
   Each page then adds its own spacing and sizes (css/<page>.css); each site adds its look (theme.css). */

*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, figure, pre { margin: 0; }
ul, ol { padding: 0; }

/* ---------- Rows ---------- */

.row, .row-content { margin-left: auto; margin-right: auto; min-width: 0; }
.row-body { position: relative; padding: 20px; }              /* the builder's default row padding */
.row-fixed, .row-content-fixed { max-width: 1100px; }                      /* the builder's default content width */
.row::before, .row::after, .row-content::before, .row-content::after, .cols::before, .cols::after,
.col::before, .col::after, .mod::before, .mod::after, .mod-body::before, .mod-body::after { content: " "; display: table; }
.row::after, .row-content::after, .cols::after, .col::after, .mod::after, .mod-body::after { clear: both; }
.row-overlay .row-body::after { content: ""; display: block; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.row-overlay .row-content { position: relative; z-index: 1; }

/* ---------- Columns ---------- */

.col { float: left; min-height: 1px; }
.col-body { margin: 0; }
.cols-equal-height { display: flex; flex-wrap: wrap; width: 100%; }
.cols-equal-height::before, .cols-equal-height::after,
.cols-equal-height .col::before, .cols-equal-height .col::after,
.cols-equal-height .col-body::before, .cols-equal-height .col-body::after { content: none; }
.cols-equal-height .col, .cols-equal-height .col-body { display: flex; flex: 1 1 auto; }
.cols-equal-height .col-body { flex-direction: column; flex-shrink: 1; min-width: 0; }
.cols-equal-height.cols-align-top .col-body { justify-content: flex-start; }
.cols-equal-height.cols-align-center .col-body { justify-content: center; }
.cols-equal-height.cols-align-bottom .col-body { justify-content: flex-end; }

/* ---------- Modules ---------- */

.mod-body { margin: 20px; }
:where(.mod) img { max-width: 100%; }   /* lowest priority: a picture's own rules (one class) win, as they did over the builder's rule */
.heading { margin: 0; padding: 0; }
.text strong { font-weight: bold; }
.mod a, .mod a:hover, .mod a:focus { text-decoration: none; }

.photo { position: relative; line-height: 0; }
.photo-center { text-align: center; }
.photo-left { text-align: left; }
.photo-right { text-align: right; }
.photo-content { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.photo-content img { display: inline; height: auto; max-width: 100%; }

.button-wrap.button-left { text-align: left; }
.button-wrap.button-center { text-align: center; }
.button-wrap.button-right { text-align: right; }
.button-wrap.button-full .button { display: block; text-align: center; }
.button-wrap.button-custom .button { display: inline-block; max-width: 100%; text-align: center; }
a.button, a.button:visited {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: normal;
  line-height: 18px;
  text-decoration: none;
  text-shadow: none;
}
a.button:hover { text-decoration: none; }
a.button i { font-size: 1.3em; height: auto; width: auto; vertical-align: middle; }
a.button .button-icon-before { margin-right: 8px; }
a.button .button-icon-after { margin-left: 8px; }
a.button:active { position: relative; top: 1px; }

.icon-wrap { display: inline-block; }
.icon { display: table-cell; vertical-align: middle; }
.icon-text { display: table-cell; vertical-align: middle; text-align: left; padding-left: 15px; }   /* the builder's default gap after the icon */
.icon-text span { display: block; }
.icon-text p { margin: 0; }
.icon i { float: right; height: auto; width: auto; }

.separator { border-top: 1px solid #ccc; }

/* ---------- Show and hide by screen size (992px and 768px are the builder's breakpoints) ---------- */

/* the builder has four ranges: desktop (1201+), large (993-1200), medium (769-992), mobile (up to 768); an element with several visible-* classes shows in each of those ranges */
@media (min-width: 1201px) { .visible-large:not(.visible-desktop), .visible-medium:not(.visible-desktop), .visible-mobile:not(.visible-desktop), .hidden-desktop { display: none !important; } }
@media (min-width: 993px) and (max-width: 1200px) { .visible-desktop:not(.visible-large), .visible-medium:not(.visible-large), .visible-mobile:not(.visible-large), .hidden-large { display: none !important; } }
@media (min-width: 993px) { .visible-medium-mobile:not(.visible-desktop):not(.visible-large) { display: none !important; } }
@media (min-width: 769px) and (max-width: 992px) { .hidden-medium, .visible-desktop:not(.visible-medium), .visible-large:not(.visible-medium), .visible-mobile:not(.visible-medium) { display: none !important; } }
@media (max-width: 768px) { .hidden-mobile, .hidden-medium-mobile, .visible-desktop:not(.visible-mobile), .visible-large:not(.visible-mobile), .visible-desktop-medium, .visible-medium:not(.visible-mobile) { display: none !important; } }

/* ---------- Phones and small tablets (768px and narrower): columns stack ---------- */

@media (max-width: 768px) {
  .cols-equal-height { display: block; }
  .cols-responsive-reversed { display: flex; flex-wrap: wrap; flex-direction: column-reverse; }
  .cols-responsive-reversed > .col { flex-basis: 100%; width: 100% !important; }
  .col { clear: both; float: none; margin-left: auto; margin-right: auto; width: auto !important; }
  .col-small:not(.col-small-full-width) { max-width: 400px; }
  /* the builder's own reset of side spacing on phones; written as strong as the builder writes it, so a page's own phone rules (later) still win */
  .row.row .row-body { margin: 0; padding-left: 0; padding-right: 0; }
  .col.col .col-body { margin: 0; padding-left: 0; padding-right: 0; }
  .photo-content { width: 100%; }
  .row-body { background-attachment: scroll; }
}

/* rows with a set height: the content is placed inside the row's height */
.row-full-height > .row-body, .row-custom-height > .row-body, .row-default-height > .row-body { display: flex; min-height: 100vh; }
.row-custom-height > .row-body, .row-default-height > .row-body { min-height: 0; }
.row-full-height > .row-body > .row-content, .row-custom-height > .row-body > .row-content, .row-default-height > .row-body > .row-content { flex: 1 1 auto; min-width: 0; }
.row-full-height .row-content-fixed, .row-custom-height .row-content-fixed, .row-default-height .row-content-fixed { width: 100%; }
.row-full-height.row-align-center > .row-body, .row-custom-height.row-align-center > .row-body, .row-default-height.row-align-center > .row-body { align-items: center; }
.row-full-height.row-align-bottom > .row-body, .row-custom-height.row-align-bottom > .row-body, .row-default-height.row-align-bottom > .row-body { align-items: flex-end; }

/* icon group (several icons in a row) */
.icon-group { display: inline-block; }
.icon-group .icon { display: inline-block; margin-top: 10px; margin-bottom: 10px; vertical-align: top; }

/* accordion (opened and closed by shared/accordion.js) */
.acc-button { display: table; width: 100%; cursor: pointer; }
.acc-icon, .acc-label { display: table-cell; vertical-align: middle; }
.acc-label { width: 100%; }
.acc-icon i { display: block; }
.acc-icon-before .acc-label { padding-left: 20px; }
.acc-icon-after .acc-label { padding-right: 20px; }
.acc-content { display: none; }
.acc-item.open > .acc-content { display: block; }

/* testimonial slider (one shown at a time by shared/slider.js) */
.t-item[hidden] { display: none; }
.t-dots { text-align: center; }

/* video */
.video video, .video iframe { display: block; max-width: 100%; margin: 0 auto; }
.video iframe { width: 100%; height: auto; border: 0; }
.video video { height: auto; }
/* a picture with a play button that turns into the player when clicked (video.js) */
.video-poster { position: relative; display: block; background: #000; cursor: pointer; aspect-ratio: 16 / 9; }
.video-poster.video-4-3 { aspect-ratio: 4 / 3; } .video-poster.video-3-2 { aspect-ratio: 3 / 2; } .video-poster.video-21-9 { aspect-ratio: 21 / 9; } .video-poster.video-1-1 { aspect-ratio: 1 / 1; }
.video-poster img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.video-play { position: absolute; top: 50%; left: 50%; width: 75px; height: 75px; transform: translate(-50%, -50%); }
.video-play svg { display: block; width: 100%; height: 100%; }

/* button group */

/* colour layer over a column's background photo */
.col-bg-overlay > .col-body { position: relative; }
.col-bg-overlay > .col-body::after { content: ""; display: block; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.col-bg-overlay > .col-body > .mod { position: relative; z-index: 2; }

/* pieces written as they look: real buttons start from nothing */
.fb button { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.fb input, .fb textarea, .fb select { font: inherit; }


/* a text block written without the module wrapper: its last paragraph has no space below it */
.mod-lean .text p:last-child { margin-bottom: 0; }
.posts-empty { padding-bottom: 79px; }   /* room the original gave its (unused) search box */

/* picture slider (slider.js shows one picture at a time) */
.slide { height: var(--slides-height, auto); }
.slide[hidden] { display: none; }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) { .slide { height: auto; padding-bottom: var(--slides-extra-small, 0px); } .slide img { height: auto; } }
.slides-dots { box-sizing: border-box; height: var(--slides-below, auto); }

/* picture mosaic: pictures in a few columns (mosaic.js puts each picture into the shortest column) */
.mosaic { display: flex; margin-left: calc(-1 * var(--mosaic-gap, 20px)); align-items: flex-start; }
.mosaic-col { flex: 1 1 0; min-width: 0; padding-left: var(--mosaic-gap, 20px); }
.mosaic-item { margin: 0 0 var(--mosaic-row-gap, 20px); }
.mosaic-item img { display: block; width: 100%; height: auto; }

/* picture carousel: a few pictures in a row; carousel.js moves on by a page at a time */
.carousel-view { overflow: hidden; }
.carousel-track { display: flex; align-items: flex-start; transition: transform .5s ease; }
.carousel { --carousel-show: var(--carousel-show-large, 1); }
.carousel-item { flex: 0 0 calc(100% / var(--carousel-show, 1)); box-sizing: border-box; margin: 0; }
.carousel-item img { display: block; width: 100%; height: auto; }
@media (max-width: 991px) { .carousel { --carousel-show: var(--carousel-show-medium, 3); } }
@media (max-width: 767px) { .carousel { --carousel-show: var(--carousel-show-small, 2); } }
.tl-item:last-child { margin-bottom: 0; }

/* picture masonry: the same, with a small space all round each picture */
.masonry { display: flex; margin: calc(-1 * var(--masonry-pad, 0px)); align-items: flex-start; }
.masonry-col { flex: 1 1 0; min-width: 0; }
.masonry-item { margin: 0; padding: var(--masonry-pad, 0px); }
.masonry-item img { display: block; width: 100%; height: auto; }

.video-ratio { position: relative; }
.video-ratio video { background-color: #000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* pictures placed inside written text (the editor's alignment classes) */
.alignleft { float: left; margin-right: 1.5em; }
.alignright { float: right; margin-left: 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }
.wp-caption { max-width: 100%; margin-bottom: 1.5em; }
.wp-caption img { display: block; max-width: 100%; height: auto; }
.wp-caption-text { margin: 0.8075em 0; font-size: 0.9em; }

/* share links under a written post */
.share { margin: 26px 0 0; }
.share a { display: inline-block; height: 32px; line-height: 32px; padding: 0 12px; margin: 0 4px 0 0; background: #0166ff; color: #fff; border-radius: 4px; font-size: 14px; text-decoration: none; }
.post-card { box-sizing: border-box; }
.post-pic { display: block; }
.post-pic img { display: block; width: 100%; height: auto; }
.post-title { margin-top: 0; }
.carousel-item { padding: var(--carousel-pad, 0); }
.carousel.posts .carousel-view { margin: 0 calc(-1 * var(--carousel-pad, 0px)); }
.carousel.posts .carousel-item { padding: 0 var(--carousel-pad, 0) var(--carousel-pad-bottom, 0); }
.acc-content > :last-child { margin-bottom: 0; }
.p-content > :last-child { margin-bottom: 0; }

/* credit line on pages that have no footer */
.credit { clear: both; text-align: center; font-size: 13px; line-height: 1.5; padding: 12px 20px 16px; opacity: .85; }
.credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.masonry.posts { gap: var(--posts-gap, 0); }
.post-more-text { display: block; }
.masonry.posts .masonry-item { padding-top: 0; padding-bottom: 0; }
.masonry.posts { --posts-vgap: var(--posts-vgap-large, 30px); }
.masonry.posts .masonry-item { margin-bottom: var(--posts-vgap); }
@media (max-width: 992px) { .masonry.posts { --posts-vgap: var(--posts-vgap-medium, 30px); } }
@media (max-width: 768px) { .masonry.posts { --posts-vgap: var(--posts-vgap-small, 30px); } }

.accordion-plain .acc-content { display: none; }
.accordion-plain .acc-item.open > .acc-content { display: block; }

/* YouTube feed: the main video large, the others in a grid, then the channel buttons */
.yt-feed { width: 100%; }
.yt-main { padding: 5px 5px 0; }
.yt-main iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; background: #000; }
.yt-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 5px; }
.yt-cols-1 { grid-template-columns: minmax(0, 1fr); }
.yt-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yt-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.yt-item { padding: 5px; }
.yt-item iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.yt-foot { text-align: center; font-size: 13px; line-height: 1.5; }
.yt-foot a { display: inline-block; margin: 5px 2px 0; padding: 7px 14px; border-radius: 4px; color: #fff; text-decoration: none; }
.yt-more { background: #333; }
.yt-sub { background: rgb(64, 139, 209); }
.yt-sub svg { width: 15px; height: 15px; margin: 0 7px -2px 0; }
@media (max-width: 480px) {
  .yt-mob-1 { grid-template-columns: minmax(0, 1fr); }
  .yt-mob-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yt-mob-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* a page without header and footer that fills the screen (the theme's page box is at least as tall as the window) */
main.fill-screen { min-height: 100vh; }

/* a picture beside text in a post (two columns; stacked on phones when the original is) */
.media-text { display: grid; grid-template-columns: 50% 1fr; }
.media-text-media { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
.media-text-media img { width: 100%; height: auto; vertical-align: middle; }
.media-text-content { grid-column: 2; grid-row: 1; align-self: center; padding: 0 0 0 8%; overflow-wrap: break-word; }
.media-right { grid-template-columns: 1fr 50%; }
.media-right .media-text-media { grid-column: 2; }
.media-right .media-text-content { grid-column: 1; padding: 0 8% 0 0; }
@media (max-width: 600px) {
  .media-stack { grid-template-columns: 100%; }
  .media-stack .media-text-media { grid-column: 1; grid-row: 1; }
  .media-stack .media-text-content { grid-column: 1; grid-row: 2; padding: 8% 0 0; }
}
/* a wide block in a post reaches into the page's side padding on tablets and phones (as the theme does) */
@media (max-width: 921px) {
  .p-content .alignwide { margin-left: -20px; margin-right: -20px; }
}

/* a line of text that scrolls sideways without end (the text is there twice; the second copy is hidden from screen readers) */
.ticker { overflow: hidden; width: 100%; position: relative; }
.ticker-text { display: inline-block; white-space: nowrap; animation: ticker var(--ticker-time, 60s) linear infinite; }
.ticker-text p { display: inline; margin: 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-text { animation: none; } }

/* slide-in phone menu (built by menu.js from the header's menu; its colours and type come from the site's theme.css) */
.m-drawer { position: fixed; inset: 0; z-index: 100000; }
.m-drawer[hidden] { display: none; }
.m-backdrop { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.5); }
.m-panel { position: absolute; top: 0; bottom: 0; width: 90%; max-width: 400px; overflow-y: auto; background-color: #fff; padding-top: 60px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); }
.m-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; color: inherit; }
.m-nav ul { list-style: none; margin: 0; padding: 0; }
.m-nav li { position: relative; border-bottom: 1px solid #eaeaea; }
.m-nav a { display: block; padding: 15px 20px; text-decoration: none; text-align: center; }
.m-nav li li a { font-size: 0.9em; }
.m-nav li ul { display: none; border-top: 1px solid #eaeaea; }
.m-nav li.m-sub-open > ul { display: block; }
.m-nav li li:last-child { border-bottom: 0; }
.m-sub { position: absolute; top: 4px; right: 8px; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: inherit; }
.m-sub::before { content: ""; display: inline-block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -4px; }
.m-has-sub.m-sub-open > .m-sub::before { transform: rotate(-135deg); margin-top: 4px; }
body.m-open { overflow: hidden; }

/* timeline: the darker line fills in as the timeline scrolls up the window, as on the original (browsers without scroll-driven animation show it filled) */
@keyframes tl-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@supports (animation-timeline: view()) {
  .tl-line-fill { transform-origin: top; animation: tl-grow linear both; animation-timeline: view(); animation-range: entry 0% exit 30%; }
}
@media (prefers-reduced-motion: reduce) { .tl-line-fill { animation: none; } }

/* embedded players and media never wider than their column (as the theme does) */
iframe, embed, object, video { max-width: 100%; }

/* photos that stay put while the page scrolls are switched off on phones and touch screens (as the page builder does; phones draw them badly) */
@media (max-width: 768px), (hover: none) {
  .row-body, .col-body { background-attachment: scroll !important; }
}

/* a row's background slideshow: the pictures fade from one to the next (menu.js moves them on) */
.row-slides { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.row-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s; }
.row-slides img.on, .row-slides img:first-child:not(.off) { opacity: 1; }
.row-slides ~ .row-content { position: relative; z-index: 1; }

/* a pop-up that opens by itself after a moment (menu.js), closed with its × or Esc */
.popup { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 20px; }
.popup[hidden] { display: none; }
.popup-backdrop { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.7); }
.popup-box { position: relative; max-width: 100%; max-height: 90vh; overflow: auto; }
.popup-close { position: absolute; top: -40px; right: -10px; z-index: 2; width: 40px; height: 40px; border: 0; background: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.popup-box .popup-close { top: 6px; right: 6px; }

/* nothing on a page pushes it wider than the screen (a sideways wobble on phones) */
html, body { overflow-x: clip; }

/* a "Previous" link made for a post shell that only had "Next" */
.p-postnav .p-prev { text-align: left !important; grid-column-start: 1 !important; margin-right: auto; }
.p-postnav .p-prev ~ div { margin-left: auto; }
.p-nofeat { margin-top: 0 !important; position: static !important; }
/* the theme keeps paragraphs inside list items tight */
.p-content li > p { margin-bottom: 0; }

/* a theme's own phone menu: an item's list, opened by its "Open submenu" button (menu.js) */
.m-sub-list { display: none; list-style: none; margin: 0; padding: 0; }
li.sub-open > .m-sub-list { display: block; }
.site-header li.sub-open > ul, .site-header-post li.sub-open > ul { display: block !important; visibility: visible !important; opacity: 1 !important; }
.site-header li.tap-open > ul, .site-header-post li.tap-open > ul { left: 0 !important; }
.site-header li li.tap-open > ul, .site-header-post li li.tap-open > ul { left: 100% !important; }

/* the copy of the menu that stays at the top once the page has scrolled: its drop-downs open on hover (or keyboard focus) like the
   menu at the top of the page; a list inside a list opens beside it */
@media (min-width: 922px) {
  .site-header.stuck li:hover > ul,
  .site-header.stuck li:focus-within > ul {
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .site-header.stuck li li:hover > ul,
  .site-header.stuck li li:focus-within > ul {
    left: 100% !important;
  }
}