/**
 * AnimFolio — Format 11: Student Fresh
 * Bright, energetic design with playful colors and Nunito typography.
 */

.animfolio-container--format-11 {
	--af11-accent-rgb: 245, 158, 11;
	--af11-secondary-rgb: 236, 72, 153;
	--animfolio-font-heading: 'Nunito', sans-serif;
	--animfolio-font-body: 'Nunito', sans-serif;

	font-family: 'Nunito', sans-serif;
	background: var(--af11-bg);
	color: var(--af11-text);
}

/* ──────────────────────────────────────────────────────────────
   DUAL-SCHEME PALETTE
   Both private --af11-* vars and the --animfolio-* mapping (read by
   base.css) are scoped per scheme so the toggle works in both modes.
   The no-scheme block (light, default_scheme) doubles as the pre-JS
   fallback. --af11-link/badge tokens carry AA-safe text colors.
   ────────────────────────────────────────────────────────────── */

/* Light scheme (config default_colors.light) + no-scheme fallback */
.animfolio-container--format-11,
.animfolio-container--format-11.animfolio-container--light {
	--af11-accent: var(--animfolio-accent, #F59E0B);
	--af11-secondary: var(--animfolio-secondary, #EC4899);
	--af11-bg: #FFFBF0;
	--af11-bg-secondary: #FFF7E0;
	--af11-text: #1A1A2E;
	--af11-text-muted: #6B7280;
	--af11-border: rgba(0, 0, 0, 0.08);
	/* Card / bubble surface (white reads on cream bg) */
	--af11-surface: #FFFFFF;
	/* AA-safe link & badge text on cream surfaces (raw amber #F59E0B fails) */
	--af11-link: #B45309;
	--af11-link-hover: #92400E;
	/* On the amber-tint badge fill the link amber dips to 4.46; use deeper amber */
	--af11-badge-amber-text: #92400E;
	--af11-badge-pink-text: #BE185D;
	/* AA-safe pink for secondary text (raw #DB2777 fails as body text) */
	--af11-secondary-text: #BE185D;
	/* Dark text reads on the bright amber pill button (#1A1A2E on #F59E0B) */
	--af11-on-accent: #1A1A2E;
	/* Text on the solid pink secondary CTA fill (white on #DB2777 = 4.6) */
	--af11-on-secondary: #FFFFFF;

	/* Inherit the plugin-injected --animfolio-accent / --animfolio-secondary so a
	   user's chosen accent applies. (A self-referential var(--animfolio-accent, …)
	   here would cycle and blank the token, so we simply do not re-pin a constant.) */
	--animfolio-accent-light: color-mix(in srgb, var(--animfolio-accent, #F59E0B) 10%, transparent);
	/* accent (#F59E0B) fails AA as link/title text on light bg; darker amber for text use */
	--animfolio-accent-text: #B45309;
	--animfolio-bg: #FFFBF0;
	--animfolio-bg-secondary: #FFF7E0;
	--animfolio-bg-tertiary: #FEF3C7;
	--animfolio-text: #1A1A2E;
	--animfolio-text-secondary: #4B5563;
	--animfolio-text-muted: #6B7280;
	--animfolio-border: rgba(0, 0, 0, 0.08);
}

/* Dark scheme (config default_colors.dark) */
.animfolio-container--format-11.animfolio-container--dark {
	--af11-accent: var(--animfolio-accent, #F59E0B);
	--af11-secondary: var(--animfolio-secondary, #EC4899);
	--af11-bg: #1A1A2E;
	--af11-bg-secondary: #25253E;
	--af11-text: #F5F5F5;
	--af11-text-muted: #B0B0C8;
	--af11-border: color-mix(in srgb, var(--animfolio-accent, #F59E0B) 18%, transparent);
	/* Card / bubble surface (slightly lighter than bg) */
	--af11-surface: #25253E;
	/* On dark bg the bright amber/pink read directly as link/badge text */
	--af11-link: var(--animfolio-accent, #F59E0B);
	--af11-link-hover: #FBBF24;
	--af11-badge-amber-text: var(--animfolio-accent, #F59E0B);
	--af11-badge-pink-text: #F9A8D4;
	/* AA-safe pink for secondary text on dark (raw #EC4899 dips to 4.21 on bg2) */
	--af11-secondary-text: #F472B6;
	/* Dark text reads on the bright amber pill button */
	--af11-on-accent: #1A1A2E;
	/* Dark text on the bright pink secondary CTA fill (#1A1A2E on #EC4899 = 4.84) */
	--af11-on-secondary: #1A1A2E;

	/* Inherit the plugin-injected --animfolio-accent / --animfolio-secondary so a
	   user's chosen accent applies. (A self-referential var(--animfolio-accent, …)
	   here would cycle and blank the token, so we simply do not re-pin a constant.) */
	--animfolio-accent-hover: #FBBF24;
	--animfolio-accent-text: var(--animfolio-accent, #F59E0B);
	--animfolio-accent-light: color-mix(in srgb, var(--animfolio-accent, #F59E0B) 15%, transparent);
	--animfolio-bg: #1A1A2E;
	--animfolio-bg-secondary: #25253E;
	--animfolio-bg-tertiary: #303052;
	--animfolio-text: #F5F5F5;
	--animfolio-text-secondary: #B0B0C8;
	--animfolio-text-muted: #B0B0C8;
	--animfolio-border: color-mix(in srgb, var(--animfolio-accent, #F59E0B) 18%, transparent);
}

/* ── Nav: Colorful pill-style nav links ── */

.animfolio-container--format-11 .animfolio-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: color-mix(in srgb, var(--af11-bg) 92%, transparent);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--af11-border);
	padding: 0 2rem;
}

.animfolio-container--format-11 .animfolio-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--animfolio-container, 1200px);
	margin: 0 auto;
	height: 60px;
}

.animfolio-container--format-11 .animfolio-nav__logo {
	font-family: 'Nunito', sans-serif;
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--af11-text);
	text-decoration: none;
}

.animfolio-container--format-11 .animfolio-nav__logo span {
	background: linear-gradient(135deg, var(--af11-accent), var(--af11-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.animfolio-container--format-11 .animfolio-nav__links {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.animfolio-container--format-11 .animfolio-nav__link {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--af11-text-muted);
	text-decoration: none;
	padding: 6px 16px;
	border-radius: 999px;
	border: 2px solid transparent;
	transition: all 0.2s ease;
}

.animfolio-container--format-11 .animfolio-nav__link:hover {
	color: var(--af11-text);
	border-color: var(--af11-accent);
	background: color-mix(in srgb, var(--animfolio-accent, #F59E0B) 8%, transparent);
}

.animfolio-container--format-11 .animfolio-nav__link--active {
	/* Dark ink stays legible across the amber→pink gradient (white fails on the amber end) */
	color: #1A1A2E;
	background: linear-gradient(135deg, var(--af11-accent), var(--af11-secondary));
	border-color: transparent;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--animfolio-accent, #F59E0B) 30%, transparent);
}

/* ── Hero: Friendly and inviting ── */

.animfolio-container--format-11 .animfolio-hero {
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 72px 20px 64px;
	position: relative;
	overflow: hidden;
}

.animfolio-container--format-11 .animfolio-hero::before {
	content: '';
	position: absolute;
	top: -100px;
	left: -100px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--animfolio-accent, #F59E0B) 10%, transparent);
	pointer-events: none;
}

.animfolio-container--format-11 .animfolio-hero::after {
	content: '';
	position: absolute;
	bottom: -80px;
	right: -80px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--animfolio-secondary, #EC4899) 8%, transparent);
	pointer-events: none;
}

.animfolio-container--format-11 .animfolio-hero__wave {
	font-size: 3rem;
	margin-bottom: 16px;
}

.animfolio-container--format-11 .animfolio-hero__title {
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 16px;
}

.animfolio-container--format-11 .animfolio-hero__title span {
	background: linear-gradient(135deg, var(--af11-accent), var(--af11-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.animfolio-container--format-11 .animfolio-hero__subtitle {
	font-size: 1.2rem;
	color: var(--af11-text-muted);
	max-width: 500px;
	line-height: 1.7;
	margin-bottom: 32px;
}

/* ── Colorful CTA buttons ── */

.animfolio-container--format-11 .animfolio-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
}

.animfolio-container--format-11 .animfolio-cta:hover {
	transform: translateY(-3px) scale(1.02);
	opacity: 1;
}

.animfolio-container--format-11 .animfolio-cta--primary {
	background: var(--af11-accent);
	color: var(--af11-on-accent);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--animfolio-accent, #F59E0B) 35%, transparent);
}

.animfolio-container--format-11 .animfolio-cta--secondary {
	background: var(--af11-secondary);
	color: var(--af11-on-secondary);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--animfolio-secondary, #EC4899) 30%, transparent);
}

/* ── Section alternating backgrounds ── */

.animfolio-container--format-11 .animfolio-section:nth-child(even) {
	background: var(--af11-bg-secondary);
}

/* ── Base button override: dark text on amber for contrast ── */

.animfolio-container--format-11 .animfolio-button--primary,
.animfolio-container--format-11 a.animfolio-button--primary {
	background: var(--af11-accent);
	color: var(--af11-on-accent);
	box-shadow: 0 4px 16px color-mix(in srgb, var(--animfolio-accent, #F59E0B) 30%, transparent);
	border-radius: 999px;
	padding: 12px 28px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
	overflow: hidden;
}

.animfolio-container--format-11 .animfolio-button--primary:hover,
.animfolio-container--format-11 a.animfolio-button--primary:hover {
	color: var(--af11-on-accent);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px color-mix(in srgb, var(--animfolio-accent, #F59E0B) 40%, transparent);
}

.animfolio-container--format-11 .animfolio-button--secondary,
.animfolio-container--format-11 a.animfolio-button--secondary {
	color: var(--af11-text);
	border: 2px solid var(--af11-border);
	border-radius: 999px;
	padding: 12px 28px;
	font-weight: 700;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	transition: border-color 0.2s ease, background 0.2s ease;
	white-space: nowrap;
}

.animfolio-container--format-11 .animfolio-button--secondary:hover,
.animfolio-container--format-11 a.animfolio-button--secondary:hover {
	border-color: var(--af11-accent);
	background: color-mix(in srgb, var(--animfolio-accent, #F59E0B) 6%, transparent);
	color: var(--af11-text);
}

/* ── Links: AA-safe amber (scheme-aware) ── */

.animfolio-container--format-11 a {
	color: var(--af11-link);
}

.animfolio-container--format-11 a:hover {
	color: var(--af11-link-hover);
}

/* ── Section titles: Playful underline ── */

.animfolio-container--format-11 .animfolio-section {
	padding: 80px 0;
}

.animfolio-container--format-11 .animfolio-section__title {
	font-size: 2rem;
	font-weight: 800;
	text-align: center;
	margin-bottom: 8px;
}

.animfolio-container--format-11 .animfolio-section__subtitle {
	text-align: center;
	color: var(--af11-text-muted);
	margin-top: 8px;
	margin-bottom: 48px;
}

/* ── Colorful cards ── */

.animfolio-container--format-11 .animfolio-card {
	background: var(--af11-surface);
	border: 2px solid var(--af11-border);
	border-radius: 20px;
	padding: 28px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	/* prevent double border when base styles add one */
	box-sizing: border-box;
}

.animfolio-container--format-11 .animfolio-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	border-color: var(--af11-accent);
}

.animfolio-container--format-11 .animfolio-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--animfolio-accent, #F59E0B) 15%, transparent), color-mix(in srgb, var(--animfolio-secondary, #EC4899) 10%, transparent));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.animfolio-container--format-11 .animfolio-card__title {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 8px;
	word-break: break-word;
	overflow-wrap: break-word;
}

.animfolio-container--format-11 .animfolio-card__meta {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--af11-secondary-text);
	margin-bottom: 12px;
	word-break: break-word;
}

.animfolio-container--format-11 .animfolio-card__description {
	color: var(--af11-text-muted);
	font-size: 0.95rem;
	line-height: 1.7;
	word-break: break-word;
	overflow-wrap: break-word;
}

/* ── GPA badge ── */

.animfolio-container--format-11 .animfolio-gpa-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 20px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--af11-accent), var(--af11-secondary));
	/* Dark ink stays legible across the amber→pink gradient */
	color: #1A1A2E;
	font-weight: 700;
	font-size: 0.9rem;
}

/* ── Extracurricular badges ── */

.animfolio-container--format-11 .animfolio-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border-radius: 12px;
	font-size: 0.8rem;
	font-weight: 700;
	background: color-mix(in srgb, var(--animfolio-accent, #F59E0B) 12%, transparent);
	color: var(--af11-badge-amber-text);
}

.animfolio-container--format-11 .animfolio-badge--pink {
	background: color-mix(in srgb, var(--animfolio-secondary, #EC4899) 12%, transparent);
	color: var(--af11-badge-pink-text);
}

/* ── Fun grid layout ── */

.animfolio-container--format-11 .animfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

/* ── Responsive ── */

@media (max-width: 1024px) {
	.animfolio-container--format-11 .animfolio-nav__links {
		gap: 4px;
	}

	.animfolio-container--format-11 .animfolio-nav__link {
		padding: 6px 12px;
		font-size: 0.8125rem;
	}

	.animfolio-container--format-11 .animfolio-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

@media (max-width: 768px) {
	.animfolio-container--format-11 .animfolio-nav__links {
		display: none;
	}

	.animfolio-container--format-11 .animfolio-hero {
		padding: 80px 16px 60px;
	}

	.animfolio-container--format-11 .animfolio-hero__title {
		word-break: break-word;
		overflow-wrap: break-word;
	}

	.animfolio-container--format-11 .animfolio-hero__subtitle {
		font-size: 1rem;
	}

	.animfolio-container--format-11 .animfolio-section {
		padding: 60px 0;
	}

	.animfolio-container--format-11 .animfolio-grid {
		grid-template-columns: 1fr;
	}

	.animfolio-container--format-11 .animfolio-gpa-badge {
		font-size: 0.8rem;
	}
}

@media (max-width: 480px) {
	.animfolio-container--format-11 .animfolio-hero {
		padding: 72px 12px 48px;
	}

	.animfolio-container--format-11 .animfolio-hero__wave {
		font-size: 2rem;
	}

	.animfolio-container--format-11 .animfolio-hero__title {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
	}

	.animfolio-container--format-11 .animfolio-cta,
	.animfolio-container--format-11 .animfolio-button--primary,
	.animfolio-container--format-11 .animfolio-button--secondary {
		width: 100%;
		justify-content: center;
	}

	.animfolio-container--format-11 .animfolio-section__title {
		font-size: 1.5rem;
	}

	.animfolio-container--format-11 .animfolio-card {
		padding: 20px;
	}
}

/* Hero is one full viewport: the inner .animfolio-hero owns the 100vh + its own
   nav-clearance padding, so the hero SECTION must not add the standard section
   spacing on top (that pushed the hero past one screen and the content low).
   Higher specificity (.animfolio-section.animfolio-section--hero) beats the
   format's own .animfolio-section padding at every breakpoint. */
.animfolio-container--format-11 .animfolio-section.animfolio-section--hero {
	padding-top: 0;
	padding-bottom: 0;
}