/*
  Aero Kidz Laravel rebuild — small additions on top of the legacy custom.css.
  Kept separate so the original theme file stays a faithful, diffable copy
  of the static site's stylesheet.
*/

/* Eyebrow labels were semantically <h3> tags in the old markup (invalid
   heading hierarchy — an eyebrow before the section's real <h2>). They're
   now a plain <span class="ak-eyebrow">; this mirrors the old .section-title
   h3 rule exactly so nothing changes visually. */
.section-title .ak-eyebrow{
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	text-transform: capitalize;
	line-height: normal;
	color: var(--primary-color);
	border: 1px solid var(--divider-color);
	border-radius: 100px;
	padding: 6px 15px 6px 36px;
	margin-bottom: 15px;
}

.section-title .ak-eyebrow::before{
	content: '';
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	background: url('../images/icon-sparkle.svg') no-repeat;
	background-position: center center;
	background-size: cover;
	width: 12px;
	height: 12px;
}

.dark-section .section-title .ak-eyebrow{
	background: var(--dark-divider-color);
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);
	color: var(--white-color);
}

@media only screen and (max-width: 767px){
	.section-title .ak-eyebrow{
		margin-bottom: 10px;
	}
}

/* The hero carousel has one heading per slide, but only the first slide
   may use <h1> (one per page). Slides 2+ use <h2>, styled identically to
   the original always-<h1> look. */
.ak-hero-content h2{
	font-size:50px;
	line-height:1.1;
	font-weight:800;
	color: #ffffff;
	margin-bottom:25px;
}
.ak-hero-content h2 span{
	color:#ff306d;
	display:block;
}
@media (max-width: 991px){
	.ak-hero-content h2{font-size:46px}
}
@media (max-width: 576px){
	.ak-hero-content h2{font-size:34px}
}

/* Empty state for a year with no events yet on the Events page. */
.ak-event-empty{
	max-width: 480px;
	margin: 20px auto 40px;
	padding: 50px 30px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--divider-color);
	border-radius: 24px;
}
.ak-event-empty i{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 48, 108, 0.08);
	color: #ff306c;
	font-size: 24px;
	margin-bottom: 20px;
}
.ak-event-empty h3{
	font-size: 20px;
	font-weight: 700;
	color: var(--primary-color);
	margin-bottom: 10px;
}
.ak-event-empty p{
	color: var(--text-color);
	margin: 0;
}

/* .post-date carried no styling anywhere in the original theme — it rendered
   as bare inline text. Styled here as a small date badge to match the
   site's pill/tag visual language used elsewhere (eyebrows, program-age). */
.post-item-content .post-date{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--accent-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #ff306c;
	background: rgba(255, 48, 108, 0.08);
	border-radius: 100px;
	padding: 5px 14px;
	margin-bottom: 12px;
}
.post-item-content .post-date i{
	font-size: 12px;
}

/* Brand colors for social platforms addable from the admin (Site Settings >
   Social Links) that the original theme's fixed social-rail CSS didn't cover. */
.ak-social.linkedin{ background: linear-gradient(135deg, #0A66C2, #084d94); }
.ak-social.linkedin span{ background: #0A66C2; }

.ak-social.twitter{ background: linear-gradient(135deg, #000000, #333333); }
.ak-social.twitter span{ background: #000000; }

.ak-social.pinterest{ background: linear-gradient(135deg, #E60023, #ad001a); }
.ak-social.pinterest span{ background: #E60023; }

.ak-social.threads{ background: linear-gradient(135deg, #000000, #333333); }
.ak-social.threads span{ background: #000000; }

.ak-social.other{ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); }
.ak-social.other span{ background: var(--primary-color); }