/* themes/custom/techprosolutions/css/components/mutual-fund-detail.css
 * Shared mutual-fund detail page (node--mutual-funds-graphs).
 * Brand tokens from design-tokens.css; 4px spacing; AA contrast.
 * Data-driven: every dynamic block is hidden by default (.is-empty) and the
 * JS reveals it only when real data exists — no empty shells, no fabrication. */

.mf-detail {
  --mf-pos: #147a3d;          /* AA-safe positive (dark green) on white/wash */
  --mf-neg: #b42318;          /* AA-safe negative (red) */
  --mf-pos-wash: #e8f5e9;
  --mf-neg-wash: #fdece9;
  --mf-line: #1c3557;         /* NAV line = navy (green fails 3:1 non-text) */
  --mf-card-bd: #e6e9ef;
  --mf-shadow: 0 2px 16px rgba(28, 53, 87, .06);
  --mf-radius: 16px;
  --mf-radius-sm: 12px;
  color: var(--et-body-color, #45464F);
  font-family: "Manrope", system-ui, sans-serif;
}

.mf-detail *,
.mf-detail *::before,
.mf-detail *::after { box-sizing: border-box; }

.mf-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--et-space-4, 1rem); }

/* Section rhythm: alternating white / light-wash bands. */
.mf-band { padding: var(--et-space-12, 3rem) 0; }
.mf-band--wash { background: #f6f9f7; }

.mf-detail h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; color: var(--et-navy, #1C3557); margin: 0 0 var(--et-space-6, 1.5rem); }
.mf-detail h3 { font-size: 1.125rem; line-height: 1.25; letter-spacing: -.01em; color: var(--et-navy, #1C3557); margin: 0 0 var(--et-space-4, 1rem); }
.mf-note { font-size: .8125rem; line-height: 1.5; color: #6b6d76; margin: var(--et-space-3, .75rem) 0 0; }

.mf-card {
  background: #fff; border: 1px solid var(--mf-card-bd);
  border-radius: var(--mf-radius); box-shadow: var(--mf-shadow);
  padding: var(--et-space-6, 1.5rem);
}

/* Hide dynamic sections until JS confirms data. */
.mf-detail [data-mf-section].is-empty { display: none !important; }

/* ---------- Hero header ---------- */
.mf-hero { display: block; }
.mf-hero__main { min-width: 0; }
.mf-idrow { display: flex; align-items: center; gap: var(--et-space-4, 1rem); }
.mf-logo { width: 56px; height: 56px; border-radius: var(--mf-radius-sm); object-fit: contain; background: #fff; border: 1px solid var(--mf-card-bd); padding: 4px; flex: 0 0 auto; }
/* Monogram fallback when an AMC has no logo. */
.mf-monogram { display: inline-flex; align-items: center; justify-content: center; background: var(--et-navy, #1C3557); color: #fff; border-color: var(--et-navy, #1C3557); padding: 0; font-weight: 800; letter-spacing: .01em; font-size: .875rem; box-shadow: inset 0 -3px 0 rgba(60,185,68,.55); }
.mf-title { font-size: 1.625rem; line-height: 1.15; letter-spacing: -.02em; color: var(--et-ink, #0A0A0A); margin: 0; font-weight: 800; }
.mf-tags { display: flex; flex-wrap: wrap; gap: var(--et-space-2, .5rem); margin-top: var(--et-space-3, .75rem); }
.mf-tag { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--et-navy, #1C3557); background: var(--et-wash, #E8F5E9); border-radius: 9999px; padding: 4px 12px; }
.mf-tag--risk { background: #fff4e5; color: #8a4b00; }

.mf-navrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--et-space-4, 1rem); margin-top: var(--et-space-6, 1.5rem); }
.mf-nav { font-size: 2.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--et-ink, #0A0A0A); line-height: 1; }
.mf-asof { font-size: .8125rem; color: #6b6d76; }

.mf-change { display: inline-flex; align-items: center; gap: 4px; font-size: .9375rem; font-weight: 700; padding: 4px 10px; border-radius: 9999px; }
.mf-change--pos { color: var(--mf-pos); background: var(--mf-pos-wash); }
.mf-change--neg { color: var(--mf-neg); background: var(--mf-neg-wash); }
.mf-change__arrow { font-weight: 900; }

/* Invest CTA — full-width band (moved out of the hero, sits before the FAQ). */
.mf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--et-green, #3CB944); color: var(--et-ink, #0A0A0A); font-weight: 800; letter-spacing: .02em;
  text-decoration: none; padding: 14px 28px; border-radius: 9999px; border: 0; cursor: pointer; font-size: 1rem;
}
.mf-btn:hover { background: #34a63c; color: var(--et-ink, #0A0A0A); }

.mf-cta__box {
  background: var(--et-navy, #1C3557); border-radius: var(--mf-radius);
  padding: var(--et-space-8,2rem) var(--et-space-10,2.5rem);
  display: flex; align-items: center; justify-content: space-between; gap: var(--et-space-8,2rem); flex-wrap: wrap;
  box-shadow: 0 8px 28px rgba(28,53,87,.18);
}
.mf-cta__text { min-width: 0; }
/* Class-qualified so a global bare `p { color }` cannot darken this on navy. */
.mf-cta .mf-cta__title { color: #fff; font-size: 1.375rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 var(--et-space-2,.5rem); }
.mf-cta .mf-cta__sub { color: rgba(255,255,255,.82); font-size: .9375rem; line-height: 1.55; margin: 0; max-width: 62ch; }
.mf-cta__btn { width: auto; flex: 0 0 auto; white-space: nowrap; }

/* ---------- Loading states (so the page never looks broken while data loads) ---------- */
@keyframes mf-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.mf-detail[data-mf-loading] .mf-nav {
  color: transparent; border-radius: 8px; min-width: 180px; display: inline-block; height: 2.25rem; vertical-align: middle;
  background: linear-gradient(90deg,#eef1f4 25%,#e2e7ee 37%,#eef1f4 63%); background-size: 400% 100%;
  animation: mf-shimmer 1.4s ease infinite;
}
.mf-chart-loading { height: 420px; display: flex; align-items: center; justify-content: center; gap: 12px; color: #6b6d76; font-size: .9375rem; }
.mf-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #dfe4ea; border-top-color: var(--et-green,#3CB944); animation: mf-spin .8s linear infinite; }
@keyframes mf-spin { to { transform: rotate(360deg); } }

/* ---------- Chart ---------- */
.mf-chart { width: 100%; height: 420px; }
.mf-chart-empty { padding: var(--et-space-8,2rem); text-align: center; color: #6b6d76; }

/* ---------- Returns calculator ---------- */
.mf-calc__grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--et-space-8,2rem); align-items: start; }
.mf-toggle { display: inline-flex; background: #eef1f4; border-radius: 9999px; padding: 4px; gap: 4px; margin-bottom: var(--et-space-6,1.5rem); }
.mf-toggle button { border: 0; background: transparent; font-weight: 700; font-size: .875rem; color: var(--et-navy,#1C3557); padding: 8px 20px; border-radius: 9999px; cursor: pointer; }
.mf-toggle button[aria-selected="true"] { background: var(--et-navy,#1C3557); color: #fff; }
.mf-field { margin-bottom: var(--et-space-6,1.5rem); }
.mf-field__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--et-space-3,.75rem); }
.mf-field label { font-weight: 700; color: var(--et-navy,#1C3557); font-size: .9375rem; }
.mf-field__val { font-weight: 800; color: var(--et-ink,#0A0A0A); font-size: 1.0625rem; }
.mf-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 9999px; background: #dfe4ea; outline: none; }
.mf-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--et-green,#3CB944); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer; }
.mf-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--et-green,#3CB944); border: 3px solid #fff; cursor: pointer; }
.mf-range:focus-visible { outline: 2px solid var(--et-green,#3CB944); outline-offset: 4px; }

.mf-result { background: var(--et-wash,#E8F5E9); border-radius: var(--mf-radius); padding: var(--et-space-6,1.5rem); }
.mf-result__row { display: flex; justify-content: space-between; align-items: baseline; padding: var(--et-space-3,.75rem) 0; border-bottom: 1px solid #d6e8d8; }
.mf-result__row:last-of-type { border-bottom: 0; }
.mf-result__k { color: var(--et-body-color,#45464F); font-size: .875rem; }
.mf-result__v { font-weight: 800; color: var(--et-navy,#1C3557); font-size: 1.0625rem; }
.mf-result__v--total { color: var(--et-ink,#0A0A0A); font-size: 1.375rem; }
.mf-result__v--pos { color: var(--mf-pos); }

/* ---------- Stat tiles / returns table ---------- */
.mf-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--et-space-4,1rem); }
.mf-tile { background: #fff; border: 1px solid var(--mf-card-bd); border-radius: var(--mf-radius-sm); padding: var(--et-space-5,1.25rem); }
.mf-tile__k { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: #6b6d76; margin: 0 0 6px; }
.mf-tile__v { font-size: 1.375rem; font-weight: 800; line-height: 1.1; color: var(--et-ink,#0A0A0A); }
.mf-tile__v--pos { color: var(--mf-pos); }
.mf-tile__v--neg { color: var(--mf-neg); }
.mf-tile__sub { font-size: .75rem; color: #6b6d76; margin-top: 4px; }

/* ---------- Data tables ---------- */
.mf-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.mf-table caption { text-align: left; color: #6b6d76; font-size: .8125rem; padding-bottom: var(--et-space-3,.75rem); }
.mf-table th, .mf-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--mf-card-bd); }
.mf-table th { color: var(--et-navy,#1C3557); font-weight: 700; background: #f6f9f7; }
.mf-table td:last-child, .mf-table th:last-child { text-align: right; }
.mf-table tr:last-child td { border-bottom: 0; }

/* ---------- Related / FAQ ---------- */
.mf-related__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap: var(--et-space-3,.75rem); list-style: none; padding: 0; margin: 0; }
.mf-related__list a { display: block; padding: 14px 16px; border: 1px solid var(--mf-card-bd); border-radius: var(--mf-radius-sm); color: var(--et-navy,#1C3557); text-decoration: none; font-weight: 600; background: #fff; }
.mf-related__list a:hover { border-color: var(--et-green,#3CB944); }

.mf-faq details { border: 1px solid var(--mf-card-bd); border-radius: var(--mf-radius-sm); padding: 0; margin-bottom: var(--et-space-3,.75rem); background: #fff; }
.mf-faq summary { cursor: pointer; font-weight: 700; color: var(--et-navy,#1C3557); padding: var(--et-space-4,1rem) var(--et-space-5,1.25rem); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mf-faq summary::-webkit-details-marker { display: none; }
.mf-faq summary::after { content: "+"; font-size: 1.25rem; color: var(--et-green,#3CB944); font-weight: 400; }
.mf-faq details[open] summary::after { content: "\2212"; }
.mf-faq details > p { margin: 0; padding: 0 var(--et-space-5,1.25rem) var(--et-space-5,1.25rem); line-height: 1.6; }

/* ---------- Compliance ---------- */
.mf-disclaimer { border-left: 4px solid var(--et-green,#3CB944); background: #f6f9f7; border-radius: var(--mf-radius-sm); padding: var(--et-space-5,1.25rem) var(--et-space-6,1.5rem); }
.mf-disclaimer p { margin: 0 0 var(--et-space-3,.75rem); font-size: .8125rem; line-height: 1.6; color: #55575f; }
.mf-disclaimer p:last-child { margin-bottom: 0; }
.mf-disclaimer strong { color: var(--et-navy,#1C3557); }

/* Focus visibility everywhere. */
.mf-detail a:focus-visible, .mf-detail button:focus-visible, .mf-detail summary:focus-visible { outline: 2px solid var(--et-green,#3CB944); outline-offset: 2px; border-radius: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .mf-calc__grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .mf-cta__box { flex-direction: column; align-items: flex-start; }
  .mf-cta__btn { width: 100%; }
}
@media (max-width: 600px) {
  .mf-band { padding: var(--et-space-10,2.5rem) 0; }
  .mf-title { font-size: 1.375rem; }
  .mf-nav { font-size: 1.875rem; }
  .mf-chart { height: 320px; }
}

/* Reduced motion: honour user preference (charts add no essential motion). */
@media (prefers-reduced-motion: reduce) {
  .mf-detail * { animation: none !important; transition: none !important; }
}