/* Site frame: header, main menu, hero, the white content box, footer, mobile menu. */

.site {
  position: relative;
  overflow-x: clip;
  transition: transform 0.4s;
}

/* ---- Mobile header & slide-out menu (checkbox toggle, no JS) ----------- */

.mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.2em;
  background-color: var(--color-brown);
  color: #fff;
}

.mobile-header__button {
  padding: 0.8em 1.1em;
  color: inherit;
  cursor: pointer;
}

.mobile-header__button:visited {
  color: inherit;
}

.mobile-header__logo {
  font-family: var(--font-title);
  font-style: normal;
  font-size: 1.6em;
  color: inherit;
  text-decoration: none;
}

.mobile-header__logo:visited {
  color: inherit;
}

.mobile-menu {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  box-sizing: border-box;
  width: 16rem;
  padding: 1.5rem 1rem;
  overflow-y: auto;
  background-color: #1a1a1a;
  color: #fff;
  text-align: center;
  transform: translateX(-100%);
  transition: transform 0.4s;
}

.mobile-menu a {
  color: #fff;
  text-decoration: none;
}

.mobile-menu__close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 1.5rem;
  cursor: pointer;
}

.mobile-menu__heading {
  display: block;
  margin: 1.5rem 0 0.5rem;
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 1.2rem;
  color: #fff;
  opacity: 0.4;
}

.mobile-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 700;
  font-style: italic;
}

.mobile-menu__list--primary {
  font-size: 1.3em;
}

.mobile-menu__phone {
  margin-top: 1.5rem;
}

.site__overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}

.mobile-menu-toggle:checked ~ .mobile-menu {
  transform: none;
}

.mobile-menu-toggle:checked ~ .site .site__overlay {
  opacity: 0.7;
  visibility: visible;
}

/* ---- Desktop masthead & main menu -------------------------------------- */

.masthead,
.main-menu {
  display: none;
}

@media (min-width: 850px) {
  .mobile-header,
  .mobile-menu,
  .site__overlay {
    display: none;
  }

  .masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.6%;
  }

  .main-menu {
    display: block;
    margin: 0 0 4%;
    padding: 0 1.6%;
  }
}

.masthead__title {
  font-family: var(--font-title);
  font-style: normal;
  font-size: 2.4rem;
  line-height: 1.2;
  color: #fff;
  text-decoration: none;
}

.masthead__title:visited {
  color: #fff;
}

/* Industry's capitals sit high in their line box (the font reserves room for
   descenders the logo never uses), so centering the box leaves the letters
   high. Trim the box to the capitals; browsers without text-box get a nudge
   by the measured difference instead. */
.masthead__title,
.mobile-header__logo {
  text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {
  .masthead__title,
  .mobile-header__logo {
    position: relative;
    top: 0.14em;
  }
}

.masthead__tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #fff;
}

.masthead__service {
  display: flex;
  flex-direction: column;
  font-size: 0.8em;
  line-height: 1.3;
}

.masthead__service a,
.masthead__service a:visited {
  color: inherit;
  text-decoration: none;
}

.main-menu ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.3em;
  font-weight: 700;
  font-style: italic;
}

.main-menu ul::before,
.main-menu ul::after {
  content: "";
  flex: 1;
  border-top: 3px solid #fff;
}

.main-menu ul::before { margin-right: 1em; }
.main-menu ul::after { margin-left: 1em; }

.main-menu li {
  padding: 0 0.5em;
}

.main-menu a,
.main-menu a:visited {
  color: #fff;
  text-decoration: none;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 0.4em;
  background: #fff;
  color: #555;
  padding: 0 0.4em;
}

.search-form input {
  border: 0;
  padding: 0.2em 0;
  width: 9em;
  outline-offset: 2px;
}

.search-form--mobile {
  margin: 1.5rem auto 0;
  width: fit-content;
}

.search-form--footer {
  margin-top: 1rem;
  width: fit-content;
}

/* ---- Hero (home page) --------------------------------------------------- */

.hero {
  padding: 5% 3% 4%;
  text-align: center;
  color: #fff;
}

.hero__logo {
  width: auto;
  max-height: 8.7rem;
}

.hero__tagline {
  margin: 0;
  font-family: var(--font-title);
  font-style: normal;
  font-size: clamp(2.5rem, 7vw, 4em);
  line-height: 1.1;
  text-transform: uppercase;
}

/* ---- Content box --------------------------------------------------------- */

.content {
  display: flow-root;
  box-sizing: border-box;
  background-color: #fff;
  padding: var(--page-padding);
}

@media (min-width: 1100px) {
  .content {
    width: var(--page-width);
    max-width: var(--page-max-width);
    margin: 14px auto 4%;
    /* The white frame floating around the content box. */
    outline: 7px solid #fff;
    outline-offset: 7px;
  }
}

/* ---- Footer -------------------------------------------------------------- */

.footer {
  color: #fff;
  font-style: italic;
}

.footer a,
.footer a:visited {
  color: inherit;
}

.footer h2 {
  margin: 0 0 0.5rem;
  color: inherit;
}

.footer__primary {
  background-color: var(--color-footer-primary);
}

.footer__secondary {
  background-color: var(--color-footer-secondary);
}

.footer__secondary h2 {
  font-size: 1.2em;
}

.footer__inner {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: var(--page-width);
  max-width: var(--page-max-width);
  margin: auto;
  padding: var(--page-padding) 0;
  text-align: center;
}

@media (min-width: 910px) {
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    padding: 1.6% var(--page-padding);
  }

  .footer__left { text-align: left; }
  .footer__right { text-align: right; }
}

.footer__left,
.footer__right {
  flex: 1 1 20rem;
}

.footer__middle {
  flex: 0 0 7rem;
  align-self: center;
}

.footer__middle img {
  opacity: 0.6;
}

.footer__phone {
  margin-bottom: 1rem;
}

.footer__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__menu li {
  display: inline-block;
}

.footer__menu li + li::before {
  content: "|";
  padding: 0 0.5em;
}

.footer__menu .button {
  font-style: normal;
}

.footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 2em;
}

@media (min-width: 910px) {
  .footer__social { justify-content: flex-end; }
}

.footer__social a {
  display: block;
  width: 1.5em;
  line-height: 1.5;
  text-align: center;
  background-color: var(--color-accent);
}

.footer small {
  font-size: 0.7em;
  opacity: 0.7;
}