/*
Theme Name: Welsch Systems
Theme URI: https://welschsystems.com
Description: Child theme of GridStack for Welsch Systems. Abacus palette, glass nav, arrive-blur, and a scroll-focus portfolio gallery.
Author: Lee Welsch
Author URI: https://welschsystems.com
Template: GridStack-WordPress-Theme-1.02/gridstack
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: welschsystems
*/

/* --------------------------------------------------------------------------
   Abacus palette (from the logo pixels and the live GridStack options)
   -------------------------------------------------------------------------- */
:root {
  --terracotta: #AA826E;
  --terracotta-mid: #A47B68;
  --terracotta-deep: #9D7562;
  --terracotta-shadow: #936D5D;
  --terracotta-light: #B79280;
  --bead-light: #C8AC9E;
  --wash: #E7DAD4;
  --paper-cream: #F8F4F2;
  --highlight: #684A0D;
  --heading: #222222;
  --page: #FFFEF8;
}

html {
  background: var(--page);
}

body,
body.gridstack {
  background: var(--page);
  color: var(--heading);
}

a {
  color: var(--highlight);
}

a:hover {
  color: var(--terracotta-deep);
}

#logo a,
#logo h1,
#logo h2 {
  color: var(--heading);
}

#logo img {
  max-height: 52px;
  width: auto;
}

/* --------------------------------------------------------------------------
   Sticky glass nav
   -------------------------------------------------------------------------- */
.top-nav,
.top-nav.glass-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  background: color-mix(in srgb, var(--page) 72%, transparent);
  background: rgba(255, 254, 248, 0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--terracotta) 28%, transparent);
  border-bottom: 1px solid rgba(170, 130, 110, 0.28);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.admin-bar .top-nav,
.admin-bar .top-nav.glass-nav {
  top: 32px;
}

.sf-menu li > a,
.sf-menu a,
.sf-menu a:visited {
  color: var(--heading);
}

.sf-menu a:hover,
.sf-menu li.current-menu-item > a,
.sf-menu li.current_page_item > a {
  color: var(--highlight);
}

/* --------------------------------------------------------------------------
   Arrive-blur: desktop as-is. Touch devices auto-clear after load or first scroll.
   Original rule used min-device-width: 1200px. Kept.
   -------------------------------------------------------------------------- */
@media screen
  and (min-device-width: 1200px)
  and (-webkit-min-device-pixel-ratio: 1) {

  body {
    -webkit-filter: grayscale(96%) blur(30px) brightness(140%);
    filter: grayscale(96%) blur(30px) brightness(140%);
    transition-property: -webkit-filter, filter;
    transition-duration: 1.3s;
    transition-timing-function: ease-in-out;
  }

  body:hover {
    -webkit-filter: grayscale(0%) blur(0px) brightness(100%);
    filter: grayscale(0%) blur(0px) brightness(100%);
  }

  html.arrive-clear body,
  html.arrive-clear body:hover {
    -webkit-filter: grayscale(0%) blur(0px) brightness(100%);
    filter: grayscale(0%) blur(0px) brightness(100%);
  }
}

/* --------------------------------------------------------------------------
   Filters stay visible. Web Design is selected first in JS.
   -------------------------------------------------------------------------- */
.filtercontainer {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
  margin: 28px auto 12px;
}

ul.filter,
ul#filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.filter li,
ul#filters li {
  float: none;
  display: inline-block;
  margin: 0;
}

ul.filter li a,
ul.filter li a:visited,
ul#filters li a,
ul#filters li a:visited {
  color: var(--terracotta-shadow);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  padding: 6px 0;
  background: none;
  box-shadow: none;
  border: 0;
  border-bottom: 2px solid transparent;
}

ul.filter li a:hover,
ul#filters li a:hover,
ul.filter li a.active,
ul#filters li a.active {
  color: var(--highlight);
  background: none;
  box-shadow: none;
  border: 0;
  border-bottom: 2px solid var(--terracotta);
}

/* --------------------------------------------------------------------------
   Scroll-focus cards
   Start frosted. Sharpen as the card hits the middle of the viewport.
   Hover and keyboard focus stay sharp on desktop. No hover required on mobile.
   -------------------------------------------------------------------------- */
.isotopecontainer .isobrick {
  --focus: 0;
}

.isotopecontainer .isobrick .postphoto {
  overflow: hidden;
}

.isotopecontainer .isobrick a.postlink img,
.isotopecontainer .isobrick .postphoto img {
  -webkit-filter: blur(calc((1 - var(--focus)) * 14px)) saturate(calc(90% + var(--focus) * 10%));
  filter: blur(calc((1 - var(--focus)) * 14px)) saturate(calc(90% + var(--focus) * 10%));
  -webkit-transform: scale(calc(1.08 - var(--focus) * 0.08));
  transform: scale(calc(1.08 - var(--focus) * 0.08));
  transition-property: -webkit-filter, filter, -webkit-transform, transform;
  transition-duration: 0.35s;
  transition-timing-function: ease;
}

.isotopecontainer .isobrick:hover a.postlink img,
.isotopecontainer .isobrick:hover .postphoto img,
.isotopecontainer .isobrick.is-sharp a.postlink img,
.isotopecontainer .isobrick.is-sharp .postphoto img,
.isotopecontainer .isobrick:focus-within a.postlink img,
.isotopecontainer .isobrick:focus-within .postphoto img {
  -webkit-filter: blur(0) saturate(100%);
  filter: blur(0) saturate(100%);
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* CSS scroll-driven path when the browser supports it */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .has-scroll-timeline .isobrick a.postlink img,
    .has-scroll-timeline .isobrick .postphoto img {
      animation: welsch-card-focus linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      transition: none;
    }

    .has-scroll-timeline .isobrick:hover a.postlink img,
    .has-scroll-timeline .isobrick:hover .postphoto img,
    .has-scroll-timeline .isobrick.is-sharp a.postlink img,
    .has-scroll-timeline .isobrick.is-sharp .postphoto img,
    .has-scroll-timeline .isobrick:focus-within a.postlink img,
    .has-scroll-timeline .isobrick:focus-within .postphoto img {
      animation: none;
      -webkit-filter: blur(0) saturate(100%);
      filter: blur(0) saturate(100%);
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }
}

@keyframes welsch-card-focus {
  0%   { filter: blur(14px) saturate(90%);  transform: scale(1.08); }
  38%  { filter: blur(0) saturate(100%);    transform: scale(1); }
  62%  { filter: blur(0) saturate(100%);    transform: scale(1); }
  100% { filter: blur(14px) saturate(90%);  transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .isotopecontainer .isobrick {
    --focus: 1;
  }

  .isotopecontainer .isobrick a.postlink img,
  .isotopecontainer .isobrick .postphoto img,
  .has-scroll-timeline .isobrick a.postlink img,
  .has-scroll-timeline .isobrick .postphoto img,
  body,
  body:hover {
    animation: none !important;
    transition: none !important;
    -webkit-filter: none !important;
    filter: none !important;
    -webkit-transform: none !important;
    transform: none !important;
  }
}

/* Keep titles visible and readable over a frosted image */
.isotopecontainer .isobrick .title,
.isotopecontainer .isobrick a.postlink .title {
  display: block;
  opacity: 1;
  visibility: visible;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: auto;
  width: 100%;
  padding: 10px 12px;
  z-index: 2;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  background: rgba(255, 254, 248, 0.88);
}
.isotopecontainer .isobrick .title h2 {
  color: var(--heading);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}

#footer.dark {
  background: var(--terracotta-shadow);
  color: var(--paper-cream);
}

#footer.dark a {
  color: var(--wash);
}

#footer .copyright {
  color: var(--paper-cream);
}