/* ==========================================================================
   The Animated Editor — theme layer.
   Loaded AFTER assets/css/app.css (the compiled design-system build).
   Contains only what the original React runtime / WordPress layer added on
   top of the compiled utilities, so rendering matches the original exactly.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global parity rules
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
section[id] {
  scroll-margin-top: 200px;
}
a:hover {
  color: inherit;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
}
button {
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
li {
  list-style: none;
}
main,
.site-main {
  position: relative;
  z-index: 1;
}
.site-main {
  min-height: 60vh;
}
section,
.container {
  max-width: none !important;
}
.group [class*='absolute'][class*='inset-0'][class*='bg-gradient'].opacity-0 {
  opacity: 0 !important;
}
.menu-item {
  position: relative;
  list-style: none !important;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Fixed navigation bar
   -------------------------------------------------------------------------- */
nav.ae-nav {
  z-index: 1000 !important;
}
nav.ae-nav,
nav.ae-nav a,
nav.ae-nav button,
nav.ae-nav span {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease,
              box-shadow 0.3s ease, padding 0.3s ease, color 0.3s ease !important;
}
nav.ae-nav a[class~="bg-primary"],
nav.ae-nav button[class~="bg-primary"] {
  color: hsl(var(--primary-foreground, 0 0% 100%)) !important;
}
nav.ae-nav.ae-nav--scrolled {
  background-color: hsl(var(--background, 0 0% 100%) / 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
/* Current page link */
nav.ae-nav a.ae-nav-link--active {
  font-weight: 600;
  color: hsl(var(--primary)) !important;
}
/* Keep the bar below the WordPress admin bar when logged in */
.admin-bar nav.ae-nav {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  .admin-bar nav.ae-nav {
    top: 46px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile navigation drawer
   -------------------------------------------------------------------------- */
#ae-mobile-nav {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 280px;
  max-width: 85vw;
  z-index: 99999 !important;
  background: hsl(var(--background, 0 0% 100%));
  color: hsl(var(--foreground, 0 0% 10%));
  overflow-y: auto;
  transition: transform 0.3s ease-in-out;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#ae-mobile-nav .nav-inner,
#ae-mobile-nav a,
#ae-mobile-nav button {
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}
#ae-mobile-nav.slide-right {
  right: 0;
  left: auto;
  border-left: 1px solid hsl(var(--border, 0 0% 80%) / 0.3);
  box-shadow: -4px 0 15px rgba(0, 0, 0, 0.2);
  transform: translateX(100%);
}
#ae-mobile-nav.slide-left {
  left: 0;
  right: auto;
  border-right: 1px solid hsl(var(--border, 0 0% 80%) / 0.3);
  box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
}
#ae-mobile-nav.open,
#ae-mobile-nav.slide-right.open,
#ae-mobile-nav.slide-left.open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
}
#ae-mobile-nav .nav-inner {
  padding: 1rem;
  padding-top: 3.5rem;
}
#ae-mobile-nav .close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: inherit;
}
#ae-mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
#ae-mobile-nav li {
  margin: 0;
  border-bottom: 1px solid hsl(var(--border, 0 0% 80%) / 0.15);
}
#ae-mobile-nav li:last-child {
  border-bottom: none;
}
#ae-mobile-nav a {
  display: block;
  padding: 0.875rem 0.5rem;
  text-decoration: none;
  color: hsl(var(--foreground, 0 0% 10%));
  transition: background-color 0.2s;
}
#ae-mobile-nav a:hover {
  background: hsl(var(--accent, 0 0% 95%) / 0.5);
}
#ae-mobile-nav .current-menu-item > a,
#ae-mobile-nav .current_page_item > a {
  color: hsl(var(--primary, 217 91% 60%));
  background: hsl(var(--primary, 217 91% 60%) / 0.1);
}
body.mobile-nav-open {
  overflow: hidden;
}
#ae-mobile-nav-backdrop {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99998 !important;
}
body.mobile-nav-open #ae-mobile-nav-backdrop {
  display: block !important;
}

/* --------------------------------------------------------------------------
   Quick search modal (Ctrl/Cmd + K)
   -------------------------------------------------------------------------- */
#ae-search-modal {
  display: none;
  position: fixed !important;
  inset: 0;
  z-index: 100000;
  padding: 1rem;
  padding-top: 15vh;
}
#ae-search-modal.open {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#ae-search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#ae-search-container {
  position: relative;
  width: 100%;
  max-width: 32rem;
  background: hsl(var(--background, 0 0% 100%));
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: ae-search-slide-down 0.2s ease-out;
}
@keyframes ae-search-slide-down {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#ae-search-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid hsl(var(--border, 0 0% 80%) / 0.3);
}
#ae-search-icon {
  flex-shrink: 0;
  margin-right: 0.75rem;
  color: hsl(var(--muted-foreground, 0 0% 45%));
}
#ae-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  color: hsl(var(--foreground, 0 0% 10%));
}
#ae-search-input::placeholder {
  color: hsl(var(--muted-foreground, 0 0% 45%));
}
#ae-search-close {
  flex-shrink: 0;
  padding: 0.5rem;
  margin-left: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: hsl(var(--muted-foreground, 0 0% 45%));
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}
#ae-search-close:hover {
  background: hsl(var(--accent, 0 0% 95%) / 0.5);
}
#ae-search-results {
  max-height: 50vh;
  overflow-y: auto;
  padding: 0.5rem;
}
#ae-search-results:empty::after {
  content: "Type to search...";
  display: block;
  padding: 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground, 0 0% 45%));
  font-size: 0.875rem;
}
.ae-search-empty {
  padding: 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground, 0 0% 45%));
  font-size: 0.875rem;
}
.ae-search-result {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: hsl(var(--foreground, 0 0% 10%));
  border-radius: 0.375rem;
  transition: background-color 0.2s;
}
.ae-search-result:hover {
  background: hsl(var(--accent, 0 0% 95%) / 0.5);
  text-decoration: none;
}
.ae-search-result-title {
  font-weight: 500;
  margin-bottom: 0.25rem;
}
.ae-search-result-url {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground, 0 0% 45%));
}
#ae-search-hint {
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground, 0 0% 45%));
  border-top: 1px solid hsl(var(--border, 0 0% 80%) / 0.3);
}
#ae-search-hint kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  margin: 0 0.125rem;
  font-size: 0.7rem;
  font-family: inherit;
  background: hsl(var(--muted, 0 0% 95%));
  border-radius: 0.25rem;
  border: 1px solid hsl(var(--border, 0 0% 80%) / 0.5);
}

/* --------------------------------------------------------------------------
   Video lightbox
   -------------------------------------------------------------------------- */
#ae-video-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
#ae-video-modal.open {
  display: flex;
}
.ae-video-modal__inner {
  position: relative;
  width: 100%;
  max-width: 960px;
}
.ae-video-modal__close {
  position: absolute;
  top: -40px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  padding: 4px 8px;
  z-index: 1;
  line-height: 1;
}
.ae-video-modal__frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.ae-video-modal__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* --------------------------------------------------------------------------
   Contact form status
   -------------------------------------------------------------------------- */
.ae-form-status {
  display: none;
  padding: 12px 16px;
  margin-top: 12px;
  border-radius: 8px;
  font-size: 14px;
}
.ae-form-status.is-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.ae-form-status.is-error {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
.ae-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Blog / generic content (index, single, page, 404)
   -------------------------------------------------------------------------- */
.ae-entry {
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
}
.ae-entry > * + * {
  margin-top: 1.25rem;
}
.ae-entry h1, .ae-entry h2, .ae-entry h3, .ae-entry h4 {
  color: hsl(var(--foreground));
  font-weight: 700;
  margin-top: 2rem;
}
.ae-entry h2 { font-size: 1.875rem; line-height: 2.25rem; }
.ae-entry h3 { font-size: 1.5rem; line-height: 2rem; }
.ae-entry a { color: hsl(var(--primary)); }
.ae-entry ul, .ae-entry ol { padding-left: 1.5rem; }
.ae-entry ul li { list-style: disc; }
.ae-entry ol li { list-style: decimal; }
.ae-entry blockquote {
  border-left: 3px solid hsl(var(--primary));
  padding-left: 1rem;
  font-style: italic;
}
.ae-entry img, .ae-entry iframe, .ae-entry video {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.ae-entry pre {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
}
.ae-entry table { width: 100%; border-collapse: collapse; }
.ae-entry th, .ae-entry td { border: 1px solid hsl(var(--border)); padding: 0.5rem 0.75rem; text-align: left; }
.ae-entry .alignleft { float: left; margin: 0.5rem 1.5rem 1rem 0; }
.ae-entry .alignright { float: right; margin: 0.5rem 0 1rem 1.5rem; }
.ae-entry .aligncenter { display: block; margin: 1rem auto; }
.ae-entry .wp-caption-text { font-size: 0.875rem; text-align: center; }
.ae-pagination { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 3rem; }
.ae-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding: 0 0.75rem;
  border: 1px solid hsl(var(--border)); border-radius: 0.375rem;
  color: hsl(var(--muted-foreground)); font-size: 0.875rem;
}
.ae-pagination .page-numbers.current,
.ae-pagination .page-numbers:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); text-decoration: none; }
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}


/* ── Primary nav: hover dropdown, matched to site design tokens ──────── */
.ae-has-dropdown{position:relative;display:inline-flex;align-items:center}
.ae-nav-link--parent{display:inline-flex;align-items:center;gap:.3rem}
.ae-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%,-.25rem) scale(.98);transform-origin:top center;min-width:14rem;padding:.5rem;background:hsl(var(--popover)/.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:0 18px 40px -12px hsl(220 30% 2%/.75),0 8px 30px -10px hsl(var(--primary)/.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s cubic-bezier(.16,1,.3,1),visibility .2s;z-index:60}
.ae-has-dropdown::after{content:"";position:absolute;top:100%;left:0;right:0;height:.85rem}
.ae-has-dropdown:hover .ae-dropdown,.ae-has-dropdown:focus-within .ae-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,.55rem) scale(1)}
.ae-dropdown__link{position:relative;display:block;padding:.55rem .85rem;border-radius:calc(var(--radius) - .35rem);font-size:.875rem;line-height:1.35;white-space:nowrap;text-decoration:none;color:hsl(var(--muted-foreground));transition:color .18s ease,background-color .18s ease}
.ae-dropdown__link:hover,.ae-dropdown__link:focus-visible{color:hsl(var(--foreground));background:hsl(var(--primary)/.1)}
.ae-dropdown__link--active{color:hsl(var(--primary))}
.ae-dropdown__chevron{flex:none;opacity:.8;transition:transform .2s ease}
.ae-has-dropdown:hover .ae-dropdown__chevron{transform:rotate(180deg)}
@media (max-width:767px){.ae-dropdown{display:none}}


/* No hover underlines */
a:hover,
a:focus,
a:active,
.hover\:underline:hover,
.ae-entry a:hover {
  text-decoration: none;
}


/* Project details modal */
.ae-project-details { display: none !important; }
#ae-project-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  padding: 2rem 1rem;
  background: hsl(220 30% 2% / 0.8);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
#ae-project-modal.open { display: block; }
.ae-project-modal__inner {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
  padding: 2.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px hsl(220 30% 2% / 0.8);
}
.ae-project-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 9999px;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border: 1px solid transparent;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.ae-project-modal__close:hover,
.ae-project-modal__close:focus-visible {
  color: hsl(var(--foreground));
  background: hsl(var(--muted));
  border-color: hsl(var(--border));
}
.ae-project-details__title {
  margin: 0 0 0.35rem;
  padding-right: 2.5rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}
.ae-project-details__meta {
  margin: 0 0 1.5rem;
  font-size: 0.875rem;
  color: hsl(var(--primary));
}
.ae-project-details__shots {
  display: grid;
  /* One shot fills the width; two or more share it evenly. */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: start;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.ae-project-details__shots--many {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (max-width: 720px) {
  .ae-project-details__shots,
  .ae-project-details__shots--many { grid-template-columns: 1fr; }
}
.ae-shot { margin: 0; }
.ae-shot img {
  display: block;
  width: 100%;
  height: auto; /* never crop a screenshot */
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 0.25rem);
  background: hsl(var(--muted));
}
.ae-shot figcaption {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}
.ae-project-details__body { margin-bottom: 1.75rem; }
.ae-project-details__cta { margin: 0; }
@media (max-width: 640px) {
  .ae-project-modal__inner { padding: 1.5rem; }
  .ae-project-details__title { font-size: 1.35rem; }
}