/*
Theme Name: parent-drg
Theme URI: https://duijtsretailgroup.ddev.site:3010/
Description: Minimal parent theme for DRG, Ameise, and BSRP with localhost logo bar.
Author: Your Name
Version: 1.0
*/

html {
    scroll-behavior: smooth;
}

/* Override WordPress core link underline
   Core adds: a:where(:not(.wp-element-button)) { text-decoration: underline; }
   We prefer links not underlined by default across the site. */
html body a:where(:not(.wp-element-button)) {
  text-decoration: none !important;
}
html body a:where(:not(.wp-element-button)):hover,
html body a:where(:not(.wp-element-button)):focus {
  text-decoration: none !important;
}

/* Opt-in utility if you want underline somewhere specific */
.link-underline { text-decoration: underline !important; text-underline-offset: 2px; }

body.admin-bar .sticky-header {
    top: 32px; /* Adjust based on the height of the admin bar */
}

/* Scroll fade-in base state */
.fade-in-on-scroll,
.fade-in-left-on-scroll,
.fade-in-right-on-scroll,
.fade-in-up-on-scroll {
  opacity: 0 !important;
  transform: translateY(24px) !important;
  transition: opacity .6s ease, transform .6s ease !important; /* fallback */
  will-change: opacity, transform;
}
.fade-in-left-on-scroll { transform: translateX(-24px) !important; }
.fade-in-right-on-scroll { transform: translateX(24px) !important; }
.fade-in-up-on-scroll { transform: translateY(24px) !important; }
html.allow-motion .fade-in-visible,
body.allow-motion .fade-in-visible {
  opacity: 1 !important;
  transform: none !important;
  /* Keyframed reveal for reliability across utility stacks */
  animation: sf-fade-in 0.7s cubic-bezier(.2,.6,.2,1) both !important;
}

/* Directional animation variants */
html.allow-motion .fade-in-left-on-scroll.fade-in-visible,
body.allow-motion .fade-in-left-on-scroll.fade-in-visible { animation-name: sf-fade-in-left !important; }
html.allow-motion .fade-in-right-on-scroll.fade-in-visible,
body.allow-motion .fade-in-right-on-scroll.fade-in-visible { animation-name: sf-fade-in-right !important; }
html.allow-motion .fade-in-up-on-scroll.fade-in-visible,
body.allow-motion .fade-in-up-on-scroll.fade-in-visible { animation-name: sf-fade-in-up !important; }

/* Keyframes */
@keyframes sf-fade-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes sf-fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes sf-fade-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}
@keyframes sf-fade-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
/* Respect reduced motion (unless explicitly overridden with allow-motion on html or body) */
@media (prefers-reduced-motion: reduce) {
  html:not(.allow-motion) .fade-in-on-scroll,
  html:not(.allow-motion) .fade-in-left-on-scroll,
  html:not(.allow-motion) .fade-in-right-on-scroll,
  html:not(.allow-motion) .fade-in-up-on-scroll {
    transition: none !important;
    animation: none !important;
  }
  /* Re-enable when body has allow-motion (override) */
  body.allow-motion .fade-in-on-scroll,
  body.allow-motion .fade-in-left-on-scroll,
  body.allow-motion .fade-in-right-on-scroll,
  body.allow-motion .fade-in-up-on-scroll {
    transition: opacity .6s ease, transform .6s ease !important;
  }
}

/* Disable transitions while JS prepares elements to prevent flicker */
html.fade-init .fade-in-on-scroll,
html.fade-init .fade-in-left-on-scroll,
html.fade-init .fade-in-right-on-scroll,
html.fade-init .fade-in-up-on-scroll {
  transition: none !important;
}

/* Animated underline for modern buttons */
.label-underline-wrap {
  position: relative;
  display: inline-block;
}

.label-underline-wrap .btn-underline {
  position: absolute;
  left: 50%;
  bottom: -4px;
  height: 2px; 
  width: 0;
  background: currentColor;
  border-radius: 3px;
  pointer-events: none;
  transition: width 0.2s cubic-bezier(.4,0,.2,1);
  transform: translateX(-50%);
}

.btn-underline-animate:hover .label-underline-wrap .btn-underline,
.btn-underline-animate:focus-visible .label-underline-wrap .btn-underline {
  width: 80%; /* or 40% for a shorter line */
}