/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
	font-family: 'Roboto', sans-serif;
}

/* Gradient headline accent */
.animated-gradient-text {
	background: linear-gradient(90deg, #F3D3BD, #B2DDF7, #F3D3BD);
	background-size: 200% auto;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradient-animation 4s ease infinite;
	display: inline-block;
}

@keyframes gradient-animation {
	0% { background-position: 0% center; }
	50% { background-position: 100% center; }
	100% { background-position: 0% center; }
}

/* FAQ accordion */
.faq-item summary::marker { display: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary { cursor: pointer; }
.faq-item summary .toggle { transition: transform 0.3s ease; }
.faq-item[open] summary .toggle { transform: rotate(45deg); }
.faq-content {
	opacity: 0;
	transition: opacity 180ms ease, margin-top 180ms ease;
	margin-top: 0;
}
.faq-item[open] .faq-content {
	opacity: 1;
	margin-top: 0.75rem;
}

/* Header shadow on scroll hook (toggle .scrolled in JS if desired) */
#main-header.scrolled {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Animated borders for sections */
@keyframes gradient-flow {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.animated-border { position: relative; overflow: hidden; }
.animated-border::before {
	content: "";
	position: absolute;
	inset: 0;
	height: 3px;
	background: linear-gradient(90deg, #F3D3BD, #B2DDF7, #F3D3BD);
	background-size: 300% 300%;
	animation: gradient-flow 6s ease infinite;
}

.border-top-animated::before { top: 0; bottom: auto; }
.border-bottom-animated::before { bottom: 0; top: auto; }