/* ==========================================================
   UNCHAEE Mutual Funds & Site Enhancements
   Uses the theme brand variables (--unc-gold, --unc-black, --unc-cream)
   ========================================================== */
:root {
	--umf-gold: var(--unc-gold, #C9A24A);
	--umf-black: var(--unc-black, #0B0B0C);
	--umf-cream: var(--unc-cream, #F6F2E9);
	--umf-up: #1E9E57;
	--umf-down: #D0343A;
}

/* ---------------- 1. TOP HEADER BAR ---------------- */
.umf-topbar {
	background: #050506;
	color: #d9d2c2;
	font-size: 13px;
	line-height: 1.2;
	border-bottom: 1px solid rgba(201, 162, 74, .28);
	max-height: 60px;
	overflow: hidden;
	transition: max-height .3s ease, opacity .25s ease, border-color .3s ease;
}
.umf-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 6px;
	padding-bottom: 6px;
	min-height: 40px;
}
.umf-topbar-left {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
}
.umf-topbar-date { display: inline-flex; align-items: center; gap: 6px; color: #bfb8a8; }
.umf-topbar-date svg { color: var(--umf-gold); flex: none; }
.umf-topbar-sep { width: 1px; height: 14px; background: rgba(201, 162, 74, .4); }
.umf-topbar-tag { color: var(--umf-gold); font-weight: 600; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
.umf-topbar-social { display: flex; align-items: center; gap: 8px; flex: none; }
.umf-follow-label { color: #9d9788; margin-right: 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.umf-social-btn {
	width: 30px; height: 30px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	color: #fff;
	border: 1px solid rgba(201, 162, 74, .5);
	background: rgba(255, 255, 255, .03);
	text-decoration: none;
	transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.umf-social-btn:hover, .umf-social-btn:focus-visible { transform: translateY(-2px); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.umf-social-instagram:hover, .umf-social-instagram:focus-visible { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.umf-social-facebook:hover, .umf-social-facebook:focus-visible { background: #1877F2; }
.umf-social-youtube:hover, .umf-social-youtube:focus-visible { background: #FF0000; }
.umf-social-twitter:hover, .umf-social-twitter:focus-visible { background: #000; border-color: #444; }
.umf-social-linkedin:hover, .umf-social-linkedin:focus-visible { background: #0A66C2; }
body.umf-scrolled .umf-topbar { max-height: 0; opacity: 0; border-color: transparent; }
@media (max-width: 640px) {
	.umf-topbar-date, .umf-topbar-sep, .umf-follow-label { display: none; }
	.umf-topbar-tag { font-size: 12px; }
	.umf-social-btn { width: 28px; height: 28px; }
}

/* ---------------- 2. 3D ANIMATED HERO ---------------- */
.unc-hero.umf-hero-enhanced {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: #050506 !important;
	background-image: none !important;
	min-height: 560px;
}
.unc-hero.umf-hero-enhanced > *:not(.umf-hero-stage) { position: relative; z-index: 2; }
.unc-hero.umf-hero-enhanced .unc-hero-graphic { display: none !important; }
.unc-hero.umf-hero-enhanced .unc-hero-title { text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.unc-hero.umf-hero-enhanced .unc-hero-sub { text-shadow: 0 2px 16px rgba(0, 0, 0, .7); }

.umf-hero-stage {
	position: absolute !important;
	inset: 0;
	z-index: 0 !important;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 70% at 78% 42%, rgba(201, 162, 74, .20), transparent 60%),
		radial-gradient(ellipse 45% 50% at 12% 88%, rgba(30, 158, 87, .10), transparent 60%),
		linear-gradient(180deg, #08080b 0%, #0b0b0c 55%, #050506 100%);
}
.umf-hero-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; opacity: 0; transition: opacity 1.2s ease; }
.umf-hero-stage.is-ready .umf-hero-canvas { opacity: 1; }
.umf-hero-overlay {
	position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 5, 6, .88) 0%, rgba(5, 5, 6, .62) 34%, rgba(5, 5, 6, .12) 62%, rgba(5, 5, 6, 0) 80%),
		linear-gradient(0deg, rgba(5, 5, 6, .75) 0%, rgba(5, 5, 6, 0) 28%);
}
@media (max-width: 900px) {
	.unc-hero.umf-hero-enhanced { min-height: 520px; }
	.umf-hero-overlay { background: linear-gradient(180deg, rgba(5,5,6,.72) 0%, rgba(5,5,6,.5) 45%, rgba(5,5,6,.12) 100%); }
}

/* CSS-only fallback (no WebGL / reduced motion off / script blocked): rising bars */
.umf-hero-fallback {
	position: absolute; right: 4%; bottom: 0; width: min(46%, 560px); height: 70%;
	display: flex; align-items: flex-end; gap: 3%; opacity: .55;
}
.umf-hero-stage.is-ready .umf-hero-fallback { display: none; }
.umf-hero-fallback span {
	flex: 1;
	background: linear-gradient(180deg, var(--umf-gold), rgba(201, 162, 74, .05));
	border-radius: 4px 4px 0 0;
	transform-origin: bottom;
	animation: umfBar 3.2s ease-in-out infinite;
}
.umf-hero-fallback span:nth-child(odd) { background: linear-gradient(180deg, #2fd27a, rgba(47, 210, 122, .04)); }
.umf-hero-fallback span:nth-child(1) { height: 22%; animation-delay: -.2s; }
.umf-hero-fallback span:nth-child(2) { height: 30%; animation-delay: -.9s; }
.umf-hero-fallback span:nth-child(3) { height: 26%; animation-delay: -1.4s; }
.umf-hero-fallback span:nth-child(4) { height: 40%; animation-delay: -.5s; }
.umf-hero-fallback span:nth-child(5) { height: 36%; animation-delay: -2.1s; }
.umf-hero-fallback span:nth-child(6) { height: 52%; animation-delay: -1.1s; }
.umf-hero-fallback span:nth-child(7) { height: 48%; animation-delay: -.3s; }
.umf-hero-fallback span:nth-child(8) { height: 64%; animation-delay: -1.7s; }
.umf-hero-fallback span:nth-child(9) { height: 72%; animation-delay: -.7s; }
.umf-hero-fallback span:nth-child(10) { height: 88%; animation-delay: -2.4s; }
@keyframes umfBar { 0%, 100% { transform: scaleY(.82); } 50% { transform: scaleY(1.08); } }
@media (prefers-reduced-motion: reduce) { .umf-hero-fallback span { animation: none; } }
@media (max-width: 900px) { .umf-hero-fallback { width: 80%; right: 10%; opacity: .25; } }

/* ---------------- 3. MUTUAL FUND CARDS ---------------- */
.umf-home-section .unc-section-head { align-items: flex-end; }
.umf-home-sub { margin: 6px 0 0; }
.umf-chips { margin: 4px 0 22px; }
.umf-card-placeholder {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	color: var(--umf-gold);
	background: radial-gradient(circle at 70% 30%, rgba(201,162,74,.22), transparent 60%), linear-gradient(135deg, #111114, #1c1a14);
	aspect-ratio: 16 / 10;
	width: 100%;
}
.umf-card-placeholder span { color: #f1ead8; font-weight: 600; font-size: 14px; text-align: center; padding: 0 12px; }
.umf-amc { margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--umf-gold); }
.umf-returns {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
	margin: 10px 0 12px; padding: 10px; border-radius: 10px;
	background: rgba(201, 162, 74, .08); border: 1px solid rgba(201, 162, 74, .2);
}
.umf-returns div { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.umf-returns span { font-size: 11px; color: #7a7466; text-transform: uppercase; letter-spacing: .06em; }
.umf-ret { font-size: 15px; font-weight: 700; }
.umf-ret-up { color: var(--umf-up); }
.umf-ret-down { color: var(--umf-down); }
.umf-ret-na { color: #999; }
.umf-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.umf-pill { font-size: 11.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: #f1ede3; color: #3d3a33; }
.umf-risk-low { background: #e4f6ea; color: #1b7a43; }
.umf-risk-low-moderate { background: #eef6dc; color: #4f7a12; }
.umf-risk-moderate { background: #fbf2d6; color: #8a6a07; }
.umf-risk-moderately-high { background: #fde9d6; color: #a2520d; }
.umf-risk-high { background: #fde0dc; color: #b3321f; }
.umf-risk-very-high { background: #f9d6d8; color: #9b1c25; }

/* ---------------- 4. SINGLE FUND PAGE ---------------- */
.umf-archive-hero { margin-bottom: 8px; }
.umf-snapshot {
	display: grid; grid-template-columns: 1fr; gap: 16px;
	margin: 20px 0; padding: 18px; border-radius: 14px;
	background: linear-gradient(135deg, #0e0e10, #1a1812); color: #f3ecda;
	border: 1px solid rgba(201, 162, 74, .3);
}
.umf-snapshot-returns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.umf-snap-box { text-align: center; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.umf-snap-box span { display: block; font-size: 12px; color: #b3ac9b; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.umf-snap-box .umf-ret { font-size: 22px; }
.umf-snapshot .umf-ret-up { color: #3fd58a; }
.umf-snapshot .umf-ret-down { color: #ff6b6f; }
.umf-riskometer { display: flex; flex-direction: column; gap: 8px; }
.umf-risk-seg-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.umf-risk-seg { height: 10px; border-radius: 3px; background: rgba(255,255,255,.1); }
.umf-risk-seg.is-on.umf-seg-1 { background: #2fbf6b; }
.umf-risk-seg.is-on.umf-seg-2 { background: #8fcb3a; }
.umf-risk-seg.is-on.umf-seg-3 { background: #e7c33c; }
.umf-risk-seg.is-on.umf-seg-4 { background: #f39a2e; }
.umf-risk-seg.is-on.umf-seg-5 { background: #ef5b33; }
.umf-risk-seg.is-on.umf-seg-6 { background: #d3222f; }
.umf-risk-text { font-size: 13px; color: #d4ccb8; }
.umf-risk-text strong { color: var(--umf-gold); }
@media (min-width: 768px) { .umf-snapshot { grid-template-columns: 1.4fr 1fr; align-items: center; } }

/* If the theme's IPO fact panel styles are missing, keep it readable */
.umf-fact-panel { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 18px 0; }
.umf-fact-panel .unc-ipo-fact { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 10px; background: #fff; border: 1px solid #ece5d4; }
.umf-fact-panel .unc-ipo-fact span { font-size: 12px; color: #7a7466; }
.umf-fact-panel .unc-ipo-fact strong { font-size: 14.5px; color: #1a1a1a; }