/* Canvas, masthead, primary nav, mobile nav, footer. */

#canvas {
  /* content-box, matching the source: the 1100px is the *content* width and
     the 100px gutters sit outside it, giving a 1300px overall canvas. The
     global border-box reset would otherwise shrink tiles from 330px to 270px. */
  box-sizing: content-box;
  max-width: var(--canvas-max);
  margin: 0 auto;
  padding: var(--canvas-pad-t) var(--canvas-pad-x) 0;
  background: transparent;
}

/* ---- masthead: logo left, nav right ---------------------------------- */

#header { padding-top: 30px; text-align: center; }

#site-logo { float: none; line-height: 0; }
#site-logo a { display: inline-block; }
#site-logo img { width: var(--logo-w); height: auto; }

#top-nav { float: none; display: inline-block; }
#top-nav[hidden] { display: none !important; }

#top-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#top-nav li { display: inline-block; }
#top-nav li + li { margin-left: var(--nav-gap); }

#top-nav a,
.nav-link {
  display: inline-block;
  padding: var(--nav-pad-y) 0;
  font-family: var(--font-body);
  font-size: var(--fs-controls);
  font-weight: 700;
  letter-spacing: var(--ls-nav);
  line-height: 1.6em;
  text-transform: uppercase;
  color: var(--ink);
}

#top-nav a:hover { color: var(--pink-deep); }
#top-nav li.is-active a { color: var(--pink); }

/* ---- landing-page contact cluster ------------------------------------- */

/* Every route but the landing page shows the logo alone, centred. */
#header-contact { display: none; }

/* The .clear clearfix generates an ::after box, which in a flex container
   becomes a third flex item and claims a trailing gap — leaving the contact
   cluster short of the right edge. Flex needs no clearfix. */
body.route-home #header::after { content: none; }

body.route-home #header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  text-align: left;
}
body.route-home #site-logo img { width: var(--logo-w-home); }

body.route-home #header-contact {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 2.2em;
}

.header-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-body);
  font-size: var(--fs-contact);
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.header-contact-item:hover { color: var(--pink-deep); }
.header-contact-item .contact-icon {
  height: var(--icon-h);
  width: auto;
  display: block;
}

/* ---- optional business-info strip ------------------------------------ */

.site-info {
  clear: both;
  float: left;
  width: 100%;
  margin: 0 0 57px;
  padding: 15px 0;
  font-family: var(--font-body);
  font-size: var(--fs-controls);
  font-weight: 400;
  letter-spacing: var(--ls-nav);
  line-height: 2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--muted);
}
.site-info:empty { display: none; }

/* ---- mobile nav ------------------------------------------------------- */

#mobile-menu-link {
  display: none;
  font-family: var(--font-body);
  font-size: var(--fs-contact);
  font-weight: 700;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--ink);
  padding: 15px 0 0;
}

#mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0 0 10px;
}

#mobile-nav a {
  display: block;
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: var(--fs-controls);
  font-weight: 700;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--ink);
}
#mobile-nav li.is-active a { color: var(--pink); }

/* ---- main + footer ---------------------------------------------------- */

#page {
  clear: both;
  padding-top: var(--stack);
}

#info-footer {
  clear: both;
  margin-top: calc(var(--stack) * 2);
  padding: var(--stack) 0;
  font-family: var(--font-body);
  font-size: var(--fs-controls);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--muted);
}
#info-footer:empty { display: none; }

/* Hidden until content has loaded, so nothing flashes unstyled. */
body:not(.is-ready) #page { visibility: hidden; }

#load-error {
  padding: 2em 0;
  font-family: var(--font-body);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pink);
}

/* Beats the mobile display:block below, so an empty nav hides the toggle. */
#mobile-menu-link[hidden] { display: none !important; }

@media (max-width: 767px) {
  #header { padding-top: 20px; }
  /* Too narrow for one row: stack the mark over the contact details. */
  body.route-home #header {
    display: block;
    text-align: center;
  }
  body.route-home #site-logo img { width: var(--logo-w); }
  body.route-home #header-contact {
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.2em;
    margin-top: 1.4em;
  }
  .header-contact-item { font-size: var(--fs-body); }
  #top-nav { display: none; }
  #mobile-menu-link { display: block; }
  #site-logo { padding-top: 10px; }
  .site-info { margin-bottom: 20px; }
}

h1#site-logo { margin: 0; font-size: 1em; font-weight: 400; }