/*
 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;
    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;
    background: var(--accent); 
    transition: width 0.3s ease;
  }

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

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

  .gb-menu--base .current-menu-item .gb-menu-link {
    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; 
  }
}

/* ============================================
    PULSATING RING ANIM
   ============================================ */

/* Add this class to your image alongside gb-media-10653658 */
.pulsating-ring {
  border-radius: 50%; /* Ensures the image and shadow are perfectly circular */
  animation: pulsateRing 2s ease-out infinite; 
}

@keyframes pulsateRing {
  0% {
    /* Starting state: thin and semi-transparent orange */
    box-shadow: 0 0 0 0px rgba(228, 131, 35, 0.7);
  }
  70% {
    /* Expanding and fading completely */
    box-shadow: 0 0 0 15px rgba(228, 131, 35, 0);
  }
  100% {
    /* Keep it faded as the animation loops */
    box-shadow: 0 0 0 20px rgba(228, 131, 35, 0);
  }
}

/* ============================================
	FLOAT ANIM
   ============================================ */

.float {
  animation: float-and-rotate 5s ease-in-out infinite;
}

/* The animation logic */
@keyframes float-and-rotate {
  0% {
    transform: translateY(0) rotate(5deg);
  }
  50% {
    transform: translateY(-7px) rotate(8deg); /* Moves up and rotates slightly more */
  }
  100% {
    transform: translateY(0) rotate(5deg); /* Returns to starting position */
  }
}

.float-left {
  animation: float-and-rotate-left 5s ease-in-out infinite;
}

/* The animation logic */
@keyframes float-and-rotate-left {
  0% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-7px) rotate(-8deg); /* Moves up and rotates slightly more */
  }
  100% {
    transform: translateY(0) rotate(-5deg); /* Returns to starting position */
  }
}

/* ============================================
	SPINNER ANIM
   ============================================ */


/* Apply this to your SVG */
.loading-spinner {
  /* Absolute positioning */
  position: absolute;
  top: 50%;
  left: 50%;
  
  /* linear makes the speed constant, so it doesn't slow down between loops */
  animation: spin-centered 3s linear infinite; 
}

/* The combined centering and spinning animation */
@keyframes spin-centered {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* ============================================
	DASHED BORDER
   ============================================ */

.dashed-border {
	border-radius: 20px;
	outline: 2px dashed var(--base);
	outline-offset: -3px; /* Pulls the border inward */
}

/* ============================================
	HEADER OVERLAY TOGGLE
   ============================================ */


:where(.gb-navigation[data-gb-mobile-menu-type=full-overlay]) .gb-menu-container--mobile .gb-menu-toggle--clone {
	position: relative!important;
	right: unset!important;
	top: unset!important;
	align-self: center;
	margin-top: 2rem;
}

.gb-menu-toggle-630e3361:is(:focus) {
	border: solid var(--contrast-3) 1px!important;
}

.gb-menu-toggle--toggled:hover {
	background-color: var(--contrast)!important;
}

.gb-menu-toggle--toggled:hover svg {
	color: black!important;
}
/* 
.gb-menu-toggle-630e3361.gb-menu-toggle--toggled:hover {
    background-color: var(--contrast-3)!important;
}

.gb-menu-toggle-630e3361.gb-menu-toggle--toggled:hover svg {
    fill: #000000 !important;
    color: #000000 !important; 
}
 
button.gb-menu-toggle-630e3361:hover,
button.gb-menu-toggle-630e3361:focus {
    background-color: var(--contrast);
    color: #ffffff;
}
*/

.big-hero-txt {
	font-size: 6rem;
	line-height: 0.8;
	color: var(--accent-2);
}

@media (max-width: 769px) {
	.big-hero-txt {
		font-size: 5.5rem;
		line-height: 0.8;
		color: var(--accent-2);
	}
	
}

.secondary-hero {
    background-color: #2a2a20;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 18px, rgba(255, 255, 255, 0.018) 18px, rgba(255, 255, 255, 0.018) 19px);
    border-bottom: 1px solid rgba(200, 148, 58, 0.35);
    border-top: 1px solid rgba(200, 148, 58, 0.35);
    color: var(--contrast-2);
}

:where(.gb-navigation[data-gb-mobile-menu-type=full-overlay]) .gb-menu-container--mobile .gb-menu-toggle--clone+.gb-menu {
	margin-top: 12px!important;
}