/*
 * The site's base cascade: the document, the elements, and the frame every
 * page is laid out in.
 *
 * This replaces public/avada-site.css, the distilled theme stylesheet —
 * 395KB of someone else's cascade, of which the built site matched 118
 * rules and used far fewer than that. Those rules were read off the live
 * site with Chrome's rule-usage tracking across all 175 pages at three
 * widths, resolved through the theme's own variables to concrete values,
 * and written out here; everything that belonged to one component went to
 * that component instead. Nothing here is transplanted markup's: it is the
 * floor the components stand on.
 *
 * It is linked from the head rather than imported, before the bundle Astro
 * builds from styles/ and the components, because that is where it sits in
 * the cascade: a base a component rule should win against on a tie.
 *
 * The frame it styles is BaseLayout's own: .tm-shell, .tm-frame, .tm-main,
 * .tm-row, .tm-content, .tm-doc. Two ids are kept on it, #wrapper and
 * #main, because several components reach for them to outrank a rule here
 * or in a stylesheet of their own; #content stays because the skip link
 * points at it.
 */

/* ---- document ---------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html,
body,
#wrapper,
#main { background-color: #ffffff; }

body {
  margin: 0;
  padding: 0;
  min-width: 320px;
  /* The scrollbar is always there, so a short page and a long one are the
     same width and nothing shifts sideways between them. */
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.875;
  letter-spacing: 0;
  color: #141617;
}

/* ---- elements ---------------------------------------------------------- */

/* `body a` and not `a`: the weight this carried in the theme is what keeps
   a component's own link colour winning over it, and nothing else. */
body a,
body a::before,
body a::after { color: #141617; }
a { text-decoration: none; }
a,
a::before,
a::after {
  transition-property: color, background-color, border-color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
}
body a:hover { color: #f05d78; }
/* A link inside an article heading takes the body's link colour rather than
   the heading's grey. It needs the id to outrank the article's own link
   rules, which is how it reached the page before. */
#main .tm-doc--article h2 a { color: #141617; }

img {
  max-width: 100%;
  height: auto;
  border-style: none;
  /* Images sit at the top of the line box, not on the baseline, so an image
     alone in a box leaves no descender gap under it. */
  vertical-align: top;
}

iframe { border: none; }

bold,
strong { font-weight: bolder; }

/* The headings' own scale. A component that sets its own type overrides
   this; what reads it is the article body, which is still authored markup. */
h1,
h2,
h3,
h4,
h5,
h6,
.tm-doc h1,
.tm-doc h2,
.tm-doc h3,
.tm-doc h4,
.tm-doc h5,
.tm-doc h6,
table th {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-style: normal;
  line-height: 1.2em;
  letter-spacing: -0.015em;
  text-transform: none;
}

h1, .tm-doc h1 { font-size: 80px; font-weight: 600; color: #141617; }
h2, .tm-doc h2 { font-size: 60px; font-weight: 300; color: #63666b; }
h3, .tm-doc h3 { font-size: 50px; font-weight: 300; color: #63666b; }
h4, .tm-doc h4 { font-size: 24px; font-weight: 600; color: #141617; }
/* A table heading borrows the headings' face and weight, but keeps the
   size and colour of the text around it. */
table th { font-weight: 600; }
h5, .tm-doc h5 { font-size: 20px; font-weight: 600; color: #141617; }
h6, .tm-doc h6 { font-size: 16px; font-weight: 600; color: #141617; }

/* Margins in em, so each level's spacing follows its own size. */
h1 { margin: 0.67em 0; }
h2 { margin: 0 0 1.1em; }
h3 { margin: 1em 0; }
h4 { margin: 1.33em 0; }
h5 { margin: 1.67em 0; }
h6 { margin: 2.33em 0; }

/* The paragraph rule the article body is written against: its paragraphs
   keep their margins to themselves, so the gap above a heading is this 20px
   plus the heading's own, rather than the larger of the two. */
.tm-doc p { margin: 0 0 20px; }

tr td { border-color: #707070; }

/* ---- forms ------------------------------------------------------------- */

fieldset,
form {
  margin: 0;
  padding: 0;
  border-style: none;
}

input,
select,
textarea {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  vertical-align: middle;
  color: #141617;
}

input[type='date'],
input[type='email'],
input[type='number'],
input[type='password'],
input[type='tel'],
input[type='text'],
input[type='time'],
select,
textarea {
  width: 100%;
  padding: 8px 15px;
  background-color: #ffffff;
  border: 1px solid #707070;
  border-radius: 6px;
  font-size: 16px;
  color: #141617;
}

input[type='date'],
input[type='email'],
input[type='number'],
input[type='password'],
input[type='tel'],
input[type='text'],
input[type='time'],
select {
  height: 50px;
  padding-top: 0;
  padding-bottom: 0;
}

input[type='date']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='password']:focus,
input[type='tel']:focus,
input[type='text']:focus,
input[type='time']:focus,
select:focus,
textarea:focus { border-color: #f05d78; }

input::placeholder,
textarea::placeholder { color: #141617; }

/* The theme turned the focus ring off site-wide. Kept, because the fields
   show focus with their own border colour above — but a control that gets
   neither is a control a keyboard cannot find, so this is per-element. */
input,
select,
textarea { outline: 0; }

input[type='date'],
input[type='datetime-local'],
input[type='datetime'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='search'],
input[type='submit'],
input[type='tel'],
input[type='text'],
input[type='time'],
input[type='url'],
input[type='week'] {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

/* ---- the page frame ---------------------------------------------------- */

/* The outer box clips a band that reaches past the window's edge; the
   inner one must not, or a sticky header could not leave it. */
.tm-shell { overflow-x: clip; }

#wrapper {
  position: relative;
  width: 100%;
  max-width: none;
  overflow: visible;
}

/* A 30px gutter each side, which the wide bands pull back out of
   (styles/band.css), and 60px under the last band. Nothing above the first
   one: the theme put 60px there and then removed it per page, and on this
   site every page had it removed — a full-bleed hero starts under the
   header, not 60px down behind a white strip. */
.tm-main {
  clear: both;
  padding: 0 30px 60px;
}

.tm-row { margin: 0 auto; }
/* A narrow page's row stops at the widest screen the design was drawn for;
   a wide page's runs on. */
.tm-row--capped { max-width: 1920px; }

#content {
  position: relative;
  width: 100%;
  min-height: 1px;
}

/* The document itself: whatever the page's template puts in the frame.
   It is a containing block, so anything inside positioned against "the
   page" is positioned against this and not against the window. */
.tm-doc { position: relative; }

/* #main and the row both close over whatever floats inside them. */
.tm-main::before,
.tm-main::after,
.tm-row::before,
.tm-row::after {
  content: ' ';
  display: table;
}
.tm-main::after,
.tm-row::after { clear: both; }

@media only screen and (max-width: 800px) {
  .tm-main > .tm-row {
    display: flex;
    flex-wrap: wrap;
  }
}

/* On a phone the content stands 50px clear of the footer, unless the page's
   last band meets it. The theme asked this of the device's screen width; it
   asks the window's, which is the same thing on a phone and the same answer
   at every width the harness measures. */
@media only screen and (max-width: 640px) {
  #content { margin-bottom: 50px; }
  #content.tm-content--flush { margin-bottom: 0; }
}