/*
 * DAN Architects — client-requested UI refinements (2026-08-06)
 * Kept separate from the legacy theme and CMS-managed inline CSS so the
 * changes remain easy to review and reverse.
 */

/* Main navigation: retain weight and color states without an underline. */
nav ul li a,
nav ul li a:hover,
nav ul li a:focus,
nav .active,
#elysium_menu > ul > li > a {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

#elysium_menu > ul > li > a::before {
  display: none !important;
}

nav ul li a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* Project filters: the selected category is indicated by weight only. */
.portfolioFilter .cbp-filter-item,
.portfolioFilter .cbp-filter-item:hover,
.portfolioFilter .cbp-filter-item:focus,
.portfolioFilter .cbp-filter-item-active {
  border-bottom: 0 !important;
  text-decoration: none !important;
}

/* Mobile navigation: center the logo and place only three menu lines at left. */
@media only screen and (max-width: 1036px) {
  header .container {
    position: relative;
  }

  header .container > .row {
    flex-wrap: nowrap;
  }

  header .container > .row > .col-md-4 {
    flex: 1 1 auto;
    width: 100%;
    text-align: center !important;
  }

  header .container > .row > .col-md-8 {
    position: static;
    flex: 0 0 0;
    width: 0;
    height: 0;
    padding: 0;
  }

  header .logo {
    padding-bottom: 0;
  }

  .mobile-menu,
  .slicknav_menu {
    position: static;
    width: 0;
    height: 0;
    margin-top: 0;
  }

  .slicknav_btn {
    position: absolute;
    top: 50%;
    left: 12px;
    right: auto;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0;
    padding: 0;
    border-radius: 0;
    z-index: 1001;
    color: #000;
    background: transparent;
    transform: translateY(-50%);
  }

  .page-home .slicknav_btn {
    color: #fff;
  }

  .slicknav_btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
  }

  .slicknav_menu .slicknav_menutxt {
    display: none !important;
  }

  .slicknav_menu .slicknav_icon {
    float: none;
    margin: 0 !important;
  }

  .slicknav_menu .slicknav_icon-bar {
    width: 22px;
    height: 2px;
    border-radius: 0;
    background-color: #000;
  }

  .page-home .slicknav_menu .slicknav_icon-bar {
    background-color: #fff;
  }

  .slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
    margin-top: 4px;
  }

  .slicknav_nav {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 8px);
    right: 12px;
    left: 12px;
    width: auto;
    margin-top: 0;
  }
}

/* Project gallery: use the current thin magnifier at a legible hover size. */
.gallery-projects .fa-magnifying-glass {
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
}

/* Lightcase image viewer: opaque white canvas, instant image changes. */
#lightcase-overlay,
html[data-lc-type="image"] #lightcase-content {
  background: #fff !important;
}

#lightcase-overlay,
#lightcase-case,
#lightcase-content,
#lightcase-content .lightcase-contentInner {
  text-shadow: none !important;
  transition: none !important;
}

html[data-lc-type="image"] #lightcase-case {
  top: 16px !important;
  left: 16px !important;
  width: calc(100vw - 32px) !important;
  height: calc(100vh - 32px) !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

html[data-lc-type="image"] #lightcase-content,
html[data-lc-type="image"] #lightcase-content .lightcase-contentInner {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}

html[data-lc-type="image"] #lightcase-content .lightcase-contentInner > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  animation: none !important;
  transition: none !important;
}

#lightcase-info {
  display: none !important;
}

#lightcase-loading,
#lightcase-loading:focus,
a[class*="lightcase-icon-"],
a[class*="lightcase-icon-"]:focus {
  color: rgba(0, 0, 0, 0.68) !important;
  text-shadow: none !important;
}

a[class*="lightcase-icon-"]:hover,
#lightcase-case:hover ~ a[class*="lightcase-icon-"] {
  color: #000 !important;
}

@media only screen and (max-width: 640px) {
  html[data-lc-type="image"] #lightcase-case {
    top: 8px !important;
    left: 8px !important;
    width: calc(100vw - 16px) !important;
    height: calc(100vh - 16px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #lightcase-loading {
    animation: none !important;
  }
}