/* 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; }

/* ---------- 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; }
.mod img { max-width: 100%; }
.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 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) ---------- */

@media (min-width: 993px) { .hidden-desktop, .visible-medium, .visible-mobile, .visible-medium-mobile { display: none; } }
@media (min-width: 769px) and (max-width: 992px) { .hidden-medium, .visible-desktop, .visible-mobile { display: none; } }
@media (max-width: 768px) { .hidden-mobile, .hidden-medium-mobile, .visible-desktop, .visible-desktop-medium, .visible-medium { display: none; } }

/* ---------- 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; }
}

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

/* accordion (opened and closed by shared/accordion.js) */
.acc-button { display: flex; align-items: center; cursor: pointer; }
.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 video { height: auto; }

/* button group */
.button-group-row { display: flex; flex-wrap: wrap; }
.group-button { flex: 1 1 auto; }

/* 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; }