/* Josefin Sans, self-hosted (SIL Open Font License) */
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/josefin-sans-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/josefin-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/josefin-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/josefin-sans-latin-700-normal.woff2) format('woff2')}

/* Static-site layer: replaces behaviour React used to provide.
   Loaded after the Tailwind build CSS. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Theme toggle icon swap */
.theme-icon-sun { display: none; }
html.dark .theme-icon-moon { display: none; }
html.dark .theme-icon-sun { display: inline-block; }

/* Contact pop-up: opens via any link to #get-in-touch, no JS needed */
.contact-modal { display: none; }
.contact-modal:target { display: flex; }

/* Mobile menu (home, about, calculator) */
#mobile-menu.is-open {
  max-height: 32rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-top: 1px solid hsl(var(--border));
}
/* Without JS the menu button can't work, so just show the links */
html.no-js #mobile-menu { max-height: none; padding: 1rem 0; border-top: 1px solid hsl(var(--border)); }
html.no-js [aria-controls="mobile-menu"] { display: none; }

/* "On this page" drawer (Investing with Integrity, mobile) */
.toc-drawer { display: none; }
.toc-drawer.is-open { display: block; }
html.no-js [data-toc-toggle] { display: none; }

/* Native <details> dropdowns (FAQ, year-by-year table) */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .accordion-chevron { transform: rotate(180deg); }

/* Calculator sliders */
.calc-range { accent-color: hsl(var(--primary)); height: 1.25rem; cursor: pointer; }

/* Calculator chart */
#calc-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
#calc-chart .grid line { stroke: hsl(var(--border)); stroke-dasharray: 3 3; }
#calc-chart .axis text { fill: hsl(var(--muted-foreground)); font-size: 12px; }
#calc-chart .axis line { stroke: hsl(var(--muted-foreground)); stroke-opacity: .5; }
#calc-chart .line-total { stroke: hsl(var(--primary)); }
#calc-chart .line-contrib { stroke: hsl(210 80% 55%); }
#calc-chart .legend { font-size: 13px; }
#calc-chart .legend .t { fill: hsl(var(--primary)); }
#calc-chart .legend .c { fill: hsl(210 80% 55%); }

/* Back-to-top link (Investing with Integrity) */
.to-top {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50;
  display: none; padding: .75rem; border-radius: 9999px;
  background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-lg);
}
.to-top.is-visible { display: inline-flex; }