/* Base: reset, type, shared utilities (from the Porch starter, set to the site's current look: Total's
   Customizer values measured in the TC-WO-9 baseline). Header/top bar/menu/templates: chrome.css. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-variant-emoji: text; /* never colour-emoji an arrow or heart (PORCH-WO-27) */
}

body {
  margin: 0;
  background: var(--color-surface-1);
  color: var(--color-text-1);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

iframe,
embed,
object,
video {
  max-width: 100%;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

p {
  margin: 0 0 20px;
}

ul,
ol {
  margin: 0 0 20px 30px;
  padding: 0;
}

strong,
b {
  font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px;
  color: var(--color-text-1);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.375;
  overflow-wrap: break-word;
}

/* H2 inside page/post text (Total's "Entry H2" Customizer setting): condensed, black, capitals. Headings built
   with the Heading element (.tc-heading) and the Latest updates titles set their own look. */
.tc-entry__content h2:not(.tc-heading):not(.tc-card__title) {
  margin: 0 0 5px;
  font-family: var(--font-condensed);
  font-weight: 900;
  font-size: clamp(3.625rem, 2.6875rem + 3vw, 4.375rem);
  line-height: 1;
  text-transform: uppercase;
}

blockquote {
  position: relative;
  margin: 0 0 20px;
  padding: 15px 0 0 55px;
  color: var(--color-quote);
  font-family: var(--font-body);
  font-weight: 100;
  font-size: 1.5em;
  line-height: 1.5;
}

/* Opening quote mark at the left (Total drew one with an icon mask; TC-WO-13). */
blockquote::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 72px;
  line-height: 1;
  opacity: 0.6;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  z-index: 100000;
  top: 10px;
  left: 10px;
  width: auto;
  height: auto;
  padding: 0.75rem 1rem;
  clip-path: none;
  background: var(--color-surface-1);
  color: var(--color-text-1);
}

.tc-container {
  width: var(--container);
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

/* Select chevron, every <select> on the site (#62, #66). */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: var(--select-chevron-size) var(--select-chevron-size), var(--select-chevron-size) var(--select-chevron-size);
  background-position:
    calc(100% - var(--field-padding-x) - 2 * var(--select-chevron-size)) center,
    calc(100% - var(--field-padding-x) - var(--select-chevron-size)) center;
  padding-right: calc(var(--field-padding-x) + 2 * var(--select-chevron-size) + var(--select-chevron-gap));
}

/* Inline SVG icons (inc/icons.php): one text-height glyph in the current colour. */
.tc-icon {
  display: inline-block;
}

.tc-icon svg {
  height: 1em;
  width: auto;
  vertical-align: -0.125em;
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}