/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* ============================================
   SCROLL-TRIGGERED FADE ANIMATIONS
   Powered by js/scroll-animations.js (IntersectionObserver).
   Elements start hidden; JS adds .is-visible on scroll entry,
   which fires the CSS transition.
   ============================================ */

/* Fade Up */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Right */
.fade-in-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade Left */
.fade-in-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade In (opacity only) */
.fade-in {
  opacity: 0;
  transition: opacity 0.7s ease;
}

.fade-in.is-visible {
  opacity: 1;
}

/* Manual delay utilities — combine with any fade class */
.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.45s; }
.delay-5 { transition-delay: 0.60s; }

/* Disable stagger delays on mobile — animations fire immediately */
@media (max-width: 768px) {
  .delay-1,
  .delay-2,
  .delay-3,
  .delay-4,
  .delay-5 { transition-delay: 0s; }
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up,
  .fade-in-right,
  .fade-in-left,
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================
   TEXT HIGHLIGHT EFFECT
   ============================================ */

.text-highlight {
  color: var(--contrast);
  position: relative;
  display: inline-block;
}

.text-highlight::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 12px;
  background: var(--base-3);
  z-index: -1;
  border-radius: 4px;
}

.text-highlight-bright {
  color: var(--accent);
  position: relative;
  display: inline-block;
}

.text-highlight-bright::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  height: 12px;
  /* Adds 20% opacity to the default GP accent color */
  background: color-mix(in srgb, var(--accent) 20%, transparent); 
  z-index: -1;
  border-radius: 4px;
}

.text-highlight::after,
  .text-highlight-bright::after {
    bottom: 4px;
  }


/* ============================================
   NAV - GeneratePress Menu Styling
   ============================================ */

@media (min-width: 768px) {
  .gb-menu.gb-menu--base {
    display: flex;
    gap: 2.5rem;
    list-style: none;
  }

  .gb-menu--base .gb-menu-link {
    text-decoration: none;
    /* Base link color */
    color: var(--contrast); 
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
    position: relative;
	padding: 0.25em!important;
  }

  .gb-menu--base .gb-menu-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    /* Underline color */
    background: var(--accent); 
    transition: width 0.3s ease;
  }

  .gb-menu--base .gb-menu-link:hover {
    /* Hover text color */
    color: var(--accent) !important; 
  }

  .gb-menu--base .gb-menu-link:hover::after {
    width: 100%;
  }

  /* Active/Current Page Indicator */
  .gb-menu--base .current-menu-item .gb-menu-link {
    /* Active text color */
    color: var(--accent) !important; 
    font-weight: 500;
  }

  .gb-menu--base .current-menu-item .gb-menu-link::after {
    width: 100%;
  }
}

/* ============================================
   FAQ ACCORDION
   ============================================ */

.gb-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gb-accordion__item {
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.gbp-card--border {
  /* Border color */
  border: 1px solid var(--base-3) !important; 
  /* Standard white/background */
  background: var(--base); 
}

.gbp-card--border:hover {
  /* 6% opacity of your darkest text color for a universal soft shadow */
  box-shadow: 0 4px 20px color-mix(in srgb, var(--contrast) 6%, transparent);
}

.gb-accordion__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  gap: 1rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.gb-accordion__toggle:hover {
  /* Subtle off-white hover background */
  background: var(--base-2); 
}

.gb-accordion__toggle[aria-expanded="true"] {
  background: var(--base-2);
}

.gb-accordion .gbp-card__title {
  font-size: 1rem;
  font-weight: 500;
  /* Dark heading color */
  color: var(--contrast); 
  margin: 0;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.gb-accordion__toggle:hover .gbp-card__title,
.gb-accordion__toggle[aria-expanded="true"] .gbp-card__title {
  /* Hover/Active text color */
  color: var(--accent); 
}

.gb-accordion__toggle-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  /* Lighter secondary text color for the inactive icon */
  color: var(--contrast-2); 
  transition: color 0.2s ease;
}

.gb-accordion__toggle:hover .gb-accordion__toggle-icon,
.gb-accordion__toggle[aria-expanded="true"] .gb-accordion__toggle-icon {
  /* Hover/Active icon color */
  color: var(--accent); 
}

.gb-accordion__content {
  border-top: none;
}

.gb-accordion__toggle[aria-expanded="true"] + .gb-accordion__content {
  border-top: 1px solid var(--base-3);
}

.gb-accordion__content .gb-text {
  font-size: 0.95rem;
  /* Lighter paragraph text color */
  color: var(--contrast-2); 
  line-height: 1.75;
  margin: 0;
  padding: 1rem 1.5rem 1.25rem;
}

.gb-accordion__content .gb-text a {
  /* Inline link color */
  color: var(--accent); 
  text-decoration: none;
  /* 30% opacity of the accent color for the underline */
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); 
  transition: border-color 0.2s ease;
}

.gb-accordion__content .gb-text a:hover {
  border-color: var(--accent);
}

/* ============================================
    BUTTON STYLES
   ============================================ */

.gbp-button--primary:hover {
  filter: brightness(1.15); 
}

/* ============================================
   STICKY RIGHT SIDEBAR
   ============================================ */

@media (min-width: 769px) {
  .inside-right-sidebar {
    position: sticky;
    /* Adjust this value based on the height of your website's header */
    top: 1rem; 
    
    /* Optional: prevents the sticky jump from feeling too abrupt */
    transition: top 0.3s ease; 
  }
}