/*
 Theme Name:   Instituto Korpo
 Theme URI:    https://institutokorpo.com.br/
 Description:  Tema filho personalizado para o Instituto Korpo (Nutrição de precisão e Estética avançada), baseado no GeneratePress.
 Author:       Instituto Korpo
 Author URI:   https://institutokorpo.com.br/
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  generatepress-child-korpo
*/

/* ==========================================================================
   1. GENERATEPRESS LAYOUT OVERRIDES
   Forces full-width block display on Korpo custom pages.
   ========================================================================== */

body.korpo-custom-layout #page,
body.korpo-custom-layout #content,
body.korpo-custom-layout .site-content {
	display: block !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}

body.korpo-custom-layout #primary {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================================================
   2. RESET GENERATEPRESS DEFAULT LINK STYLES
   GP adds text-decoration: underline to links. We remove it globally
   on Korpo pages so Tailwind classes take full control.
   ========================================================================== */

body.korpo-custom-layout a {
	text-decoration: none !important;
}

body.korpo-custom-layout a:hover {
	text-decoration: none !important;
}

/* Also reset any GP-generated content area link overrides */
body.korpo-custom-layout .site-content a,
body.korpo-custom-layout .entry-content a,
body.korpo-custom-layout #primary a,
body.korpo-custom-layout footer a,
body.korpo-custom-layout nav a {
	text-decoration: none !important;
}

/* ==========================================================================
   3. SCROLL-TRIGGERED FADE-IN ANIMATIONS
   Replaces Framer Motion's whileInView / initial animations.
   Elements start invisible and slide up; the .korpo-visible class triggers them.
   ========================================================================== */

@keyframes korpoFadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes korpoFadeInScale {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Sections / blocks waiting to be revealed (visible by default as progressive fallback) */
.korpo-fade-in {
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.korpo-scale-in {
	transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Hide only when JavaScript is loaded and initialized */
.korpo-init-hidden {
	opacity: 0 !important;
	transform: translateY(30px) !important;
}

.korpo-init-hidden.korpo-scale-in {
	transform: scale(0.95) !important;
}

/* Animate back in when visible */
.korpo-init-hidden.korpo-visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

.korpo-init-hidden.korpo-scale-in.korpo-visible {
	transform: scale(1) !important;
}

/* Staggered children — adds incremental delay */
.korpo-stagger-1 { transition-delay: 0.07s; }
.korpo-stagger-2 { transition-delay: 0.14s; }
.korpo-stagger-3 { transition-delay: 0.21s; }
.korpo-stagger-4 { transition-delay: 0.28s; }
.korpo-stagger-5 { transition-delay: 0.35s; }

/* ==========================================================================
   4. MOBILE MENU ANIMATION
   Smooth slide-down/slide-up for the mobile menu (replaces Framer Motion
   AnimatePresence height animation).
   ========================================================================== */

.korpo-mobile-menu {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.35s ease-out, opacity 0.3s ease-out;
}

.korpo-mobile-menu.korpo-menu-open {
	max-height: 400px;
	opacity: 1;
}

/* ==========================================================================
   5. BUTTON & INTERACTIVE ELEMENT TRANSITIONS
   Ensures all hover/focus states from the React project are preserved.
   ========================================================================== */

/* CTA buttons — smooth color transition on hover */
body.korpo-custom-layout .rounded-pill {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.15s ease;
}

body.korpo-custom-layout .rounded-pill:hover {
	transform: translateY(-1px);
}

body.korpo-custom-layout .rounded-pill:active {
	transform: translateY(0);
}

/* Navbar smooth background transition on scroll */
.korpo-navbar {
	transition: background-color 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease, padding 0.5s ease !important;
}

/* Footer social icon circles — hover to terracotta */
body.korpo-custom-layout footer .rounded-full {
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Link hover color transitions (nav links, footer links) */
body.korpo-custom-layout .transition-colors {
	transition: color 0.3s ease, background-color 0.3s ease;
}

body.korpo-custom-layout .transition-all {
	transition: all 0.3s ease;
}

/* ==========================================================================
   6. DECORATIVE FLOATING CIRCLES (Hero)
   Subtle pulse animation matching the React design's ambient feel.
   ========================================================================== */

@keyframes korpoFloat {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

body.korpo-custom-layout .bg-terracotta\/10,
body.korpo-custom-layout .bg-terracotta\/15 {
	animation: korpoFloat 6s ease-in-out infinite;
}

/* ==========================================================================
   7. FORM INPUT FOCUS TRANSITIONS (Agende page)
   ========================================================================== */

body.korpo-custom-layout input:focus,
body.korpo-custom-layout select:focus,
body.korpo-custom-layout textarea:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(134, 72, 57, 0.3);
	border-color: #864839 !important;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* ==========================================================================
   8. CAPSULE CARDS HOVER LIFT (Two Paths section)
   ========================================================================== */

body.korpo-custom-layout .rounded-capsule {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

body.korpo-custom-layout .rounded-capsule:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(61, 38, 32, 0.08);
}

/* ==========================================================================
   9. CONDITION CARDS HOVER (ForWho section — terracotta bg items)
   ========================================================================== */

body.korpo-custom-layout .bg-white\/10 {
	transition: background-color 0.3s ease, transform 0.2s ease;
}

body.korpo-custom-layout .bg-white\/10:hover {
	background-color: rgba(255, 255, 255, 0.18);
	transform: translateY(-2px);
}