/* ----------------------------------------------------------------------------
   Header sizing — baked into CSS instead of Artisteer's runtime script.js.
   The original theme sized/centered the header band to the 960px content width
   in JavaScript, which is why the desktop header broke after a resize to mobile
   and back (the width never got re-applied). Doing it in plain CSS is robust.
   On small screens, template.responsive.css's `.responsive .art-header` rules
   (with !important) take over and reset this to auto.
---------------------------------------------------------------------------- */
.art-header {
  width: 960px;
  margin: -6px auto 0;
  box-sizing: border-box;
}

.responsive .art-header {
  width: auto;
}

/* The corner badge was positioned `left: 100%; margin-left: -96px`, which hangs
   it 71px past the right edge once the header is constrained to 960px. Anchor it
   to the right edge of the header instead so it stays fully in view. */
.art-object2032216607 {
  left: auto;
  margin-left: 0;
  right: 0;
}

/* ----------------------------------------------------------------------------
   Footer — the original used a two-column row with an empty left cell. Collapse
   to a single centered tagline.
---------------------------------------------------------------------------- */
.art-footer-tagline {
  text-align: center;
  margin: 0;
  padding: 8px 10px 0;
}

/* Constrain the footer band to the 960px content width, matching the header
   and sheet (it was full width). Resets to full width on small screens. */
.art-footer {
  width: 960px;
  box-sizing: border-box;
}

.responsive .art-footer {
  width: auto;
}

/* ----------------------------------------------------------------------------
   Header logo links home. The logo is the centered `header.png` background on
   .art-header, so overlay a transparent anchor over that region. Sits above the
   decorative shapes but below the nav (z-index 100) so menu clicks still work.
   Disabled in responsive mode so it can't cover the hamburger button.
---------------------------------------------------------------------------- */
.art-logo-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 540px;
  max-width: 100%;
  height: 130px;
  z-index: 50;
}

/* On mobile the logo now sits in its own band at the top of the header (the
   hamburger is below it), so the logo can be a home link here too — sized to
   just the logo band so it never overlaps the menu button. */
.responsive .art-logo-link {
  display: block;
  /* `.responsive .art-header *` forces position:relative on header children,
     which would make this link occupy flow space and shove the menu button
     down. Force it back to absolute so it overlays the logo band instead. */
  position: absolute !important;
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  height: 78px;
}

/* ----------------------------------------------------------------------------
   Mobile menu — when open it was transparent over the logo and unreadable.
   Give it a solid panel, and a clearer hamburger button.
---------------------------------------------------------------------------- */
.responsive .art-nav .art-hmenu.visible {
  background: #2b1206;
  border: 1px solid #b81f00;
  border-radius: 6px;
  padding: 4px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.responsive .art-nav .art-menu-btn {
  background: #2b1206;
  border: 1px solid #b81f00;
}

/* On mobile the nav switches to relative positioning and flows to the TOP of
   the header, landing on top of the logo. Instead: render the logo banner at a
   fixed height pinned to the top, then reserve space below it (on the dark page
   background) so the hamburger / open menu sit cleanly beneath the logo. */
.responsive .art-header {
  height: auto !important;
  min-height: 0 !important;
  background-size: auto 78px !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  padding-top: 84px;
  margin-top: 0 !important;
}

.responsive .art-nav {
  margin-top: 0 !important;
}