/* ==========================================================================
   La Chenille Gallarguoise — Custom Styles
   ========================================================================== */

/* Global
-------------------------------------------------- */
:root {
	--primary-color: #2563eb;
	--primary-light: #60a5fa;
	--accent-warm: #f59e0b;
	--accent-orange: #f97316;
	--accent-cyan: #06b6d4;
	--accent-green: #10b981;
	--nav-bg: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
	--footer-bg: #1e293b;
	--hero-min-height: 45vh;
}

html {
	scroll-behavior: smooth;
}

body {
	padding-top: 70px;
	color: #374151;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	background-color: #f0f5ff;
}

/* Navbar
-------------------------------------------------- */
.navbar-custom {
	background: var(--nav-bg) !important;
	backdrop-filter: blur(10px);
	transition: background 0.3s ease;
	border-bottom: 3px solid var(--accent-warm);
}

.navbar-brand {
	font-weight: 700;
	letter-spacing: -0.02em;
}

.weather-live .badge {
	font-size: 0.8rem;
	padding: 0.45em 0.7em;
	font-weight: 500;
	border-radius: 2rem;
}

.nav-link {
	transition: color 0.2s ease;
}

.nav-link:hover {
	color: var(--accent-warm) !important;
}

.nav-link.active {
	font-weight: 600;
	border-bottom: 2px solid var(--accent-warm);
}

/* Hero Section
-------------------------------------------------- */
.home-hero {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-height: var(--hero-min-height);
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(img/banner.jpg);
	background-size: cover;
	background-position: center 40%;
	margin-bottom: 0;
}

.home-hero__overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(30,58,95,0.3) 0%, rgba(30,58,95,0.55) 100%);
	z-index: 1;
}

.home-hero__content {
	position: relative;
	z-index: 2;
	padding: 2rem;
}

.home-hero h1 {
	text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
	letter-spacing: -0.02em;
}

.home-hero .lead {
	text-shadow: 1px 1px 4px rgba(0,0,0,0.4);
	color: #fde68a;
}

.hero-logo {
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
	animation: heroFloat 3s ease-in-out infinite;
}

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

/* Section headings
-------------------------------------------------- */
section > h2,
.container > h2 {
	color: #1e3a5f;
}

section > h2 > i,
.container > h2 > i {
	color: var(--accent-warm);
}

/* Forecast Cards
-------------------------------------------------- */
.forecast-card {
	border: none;
	border-radius: 1rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	background: white;
	border-top: 4px solid var(--primary-light);
	overflow: hidden;
}

.forecast-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(37,99,235,0.15) !important;
	border-top-color: var(--accent-warm);
}

.forecast-icon {
	font-size: 5rem;
	display: block;
	color: var(--accent-warm) !important;
}

/* Subscribe Section
-------------------------------------------------- */
.subscribe-section {
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #dbeafe 100%);
	border: 1px solid #fcd34d;
}

.subscribe-section h5 {
	color: #92400e;
}

/* Event Cards
-------------------------------------------------- */
.event-card {
	border: none;
	border-radius: 0.75rem;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	border-left: 4px solid var(--primary-color);
}

.event-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(37,99,235,0.15) !important;
	border-left-color: var(--accent-warm);
}

.event-img {
	height: 100%;
	object-fit: cover;
	min-height: 220px;
}

/* Contact
-------------------------------------------------- */
.card {
	border-radius: 0.75rem;
	border: none;
}

.card-header {
	border-radius: 0.75rem 0.75rem 0 0 !important;
}

.card-header.bg-primary {
	background: var(--nav-bg) !important;
}

/* Images
-------------------------------------------------- */
.img-fluid.rounded.shadow {
	border-radius: 1rem !important;
}

/* Footer
-------------------------------------------------- */
footer {
	background: var(--footer-bg) !important;
	border-top: 3px solid var(--accent-warm);
}

footer a {
	transition: color 0.2s ease, opacity 0.2s ease;
}

footer a:hover {
	opacity: 1;
	color: var(--accent-warm) !important;
}

/* Admin
-------------------------------------------------- */
.admin-card {
	border: none;
	border-radius: 0.75rem;
}

/* Alerts
-------------------------------------------------- */
.alert {
	border-radius: 0.75rem;
	border: none;
}

/* Buttons
-------------------------------------------------- */
.btn {
	border-radius: 0.5rem;
	font-weight: 500;
}

.btn-primary {
	background-color: var(--primary-color);
	border-color: var(--primary-color);
}

.btn-primary:hover {
	background-color: #1d4ed8;
	border-color: #1d4ed8;
}

/* Separator
-------------------------------------------------- */
hr {
	border-color: #bfdbfe;
	opacity: 0.5;
}

/* Description list icons
-------------------------------------------------- */
.list-unstyled .bi {
	color: var(--accent-warm) !important;
}

.btn-primary:hover {
	background-color: #1d4ed8;
	border-color: #1d4ed8;
}

/* Form elements
-------------------------------------------------- */
.form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 0.2rem rgba(37,99,235,0.25);
}

.input-group-text {
	background-color: #f0f4ff;
	border-color: #dee2e6;
}

/* Responsive
-------------------------------------------------- */
@media (max-width: 768px) {
	.home-hero {
		min-height: 40vh;
	}

	.home-hero h1 {
		font-size: 1.8rem;
	}

	.forecast-icon {
		font-size: 3.5rem;
	}

	.event-img {
		min-height: 180px;
	}
}

@media (min-width: 992px) {
	.home-hero {
		min-height: 60vh;
	}
}