/* Main nav + main content container layout w/mobile drawer */

#main-nav {
  transition: margin-left 0.3s ease;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  margin-left: calc(var(--navWidth) * -1 - 1px);
  width: var(--navWidth);
  z-index: 4;
}

@media (max-width: 767px) {
  .main-nav-drawer-open #main-nav {
    margin-left: 0;
  }
}

#main-nav-links {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2rem;
  padding-top: 100px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

#main-nav-links a,
#main-nav-links button {
  transition: all 0.2s ease;
  width: 100%;
  height: auto;
  display: block;
  /* background-color: var(--background-color); */
  padding: 0rem 1rem;
  text-decoration: none;
  font-weight: normal;
  font-size: 24px;
  text-align: left;
  line-height: 1.6;
  /* border-bottom: 3px solid var(--border-color-softer); */
  outline: 0;
  color: var(--text-color-normal);
}

#main-nav-links a.sub-section {
  color: #9dd6c6;
  font-size: 20px;
  text-indent: 1rem;
}

#main-nav-links .section-header {
  width: 100%;
  height: 24px;
  margin: 1rem 1rem 1rem 0;
  background-color: var(--background-color-richer);
}

.section-home #main-nav-links a[href="/"],
.section-about #main-nav-links a[href="/about"],
.section-commissions #main-nav-links a[href="/commissions"],
.section-contact #main-nav-links a[href="/contact"],
.section-art #main-nav-links a[href="/"],
.subsection-animals #main-nav-links a[href="/art/animals"],
.subsection-carriage-driving #main-nav-links a[href="/art/carriage-driving"],
.subsection-commercial #main-nav-links a[href="/art/commercial"],
.subsection-equine #main-nav-links a[href="/art/equine"],
.subsection-portraits #main-nav-links a[href="/art/portraits"],
.subsection-still-life #main-nav-links a[href="/art/still-life"] {
  /* opacity: 0.6; */
  color: #2DC3EB;
}


/* Client-specific for header link and dark theme toggle override */

#main-nav-links .dark-theme-toggle {
  position: relative;
  top: auto;
  right: auto;
  border-radius: 0;
  box-shadow: none;
}

/* main content container */

#main {
  transition: margin-left 0.3s ease, width 0.3s ease, padding 0.3s ease;
  margin-left: 0;
  width: 100%;
  padding: var(--main-padding);
}

#main a {
  outline: 0;
}

#content-footer {
	margin: 1rem 0;
	line-height: 60px;
}

/* mobile drawer action */

#main-nav-toggle {
  transition: top 0.3s ease, left 0.3s ease;
  position: absolute;
  left: calc(100% + var(--padding));
  z-index: 4;
  padding: 0 1rem;
  font-size: 24px;
  width: auto;
  top: 1.5rem;
  outline: 0;
  border: 0;
  background-color: var(--border-color-softer);
}

#main-nav-toggle:active {
  outline: 0;
}

#main-nav-toggle::after {
  content: "☰";
}

.main-nav-drawer-open #main-nav-toggle::after {
  content: "X";
}

.main-nav-drawer-open #main-nav-toggle {
  left: calc(100% + 2rem);
  left: 2.5rem;
  top: 2rem;
}

/* content blocker layer - initialized by MainMenuToggle.es6 */

#content-blocker {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.9);
  transition: var(--fade-anim);
  opacity: 0;
  visibility: hidden;
}
.main-nav-drawer-open #content-blocker {
  transition: var(--fade-anim-showing);
  opacity: 1;
  visibility: visible;
}

body.main-nav-drawer-open {
  overflow: hidden;
}

/* Drawer helpers */

@media (min-width: 768px) {
  #main-nav {
    margin-left: 0;
  }
  #main {
    margin-left: var(--navWidth);
    width: calc(100% - var(--navWidth));
  }
  #main-nav #main-nav-toggle {
    top: -5rem;
  }
}

/* Content element & loading hide animation */

#content-holder {
  overflow: hidden;
  padding-bottom: 5rem;
  opacity: 1;
	max-width: 860px;
}

@media all and (min-width: 450px) {
  #content-holder {
    padding: 0 2rem 0 2rem;
    border-left: 2px dotted #000;
  }
}


.section-dashboard #content-holder,
.subsection-uploads #content-holder {
  max-width: 100%;
}

.ready #content-holder {
  transition: opacity 0.3s linear;
}

body.page-loading #content-holder {
  opacity: 0;
}

.loader {
  z-index: 6;
}