/* ==========================================================================
   modern.css — optional polish layered on top of site.css / pages.css (loaded last).
   Every rule here is progressive: a browser without the feature ignores it and the site looks exactly as before.
   Delete this file and its <link> in _Layout.cshtml to switch the layer off.
   ========================================================================== */

/* page-to-page cross-fade for same-origin navigations (the header stays put while the content fades) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
  .site-header { view-transition-name: site-header; }
}

/* gentle scroll reveal for card grids. Only opacity and the individual `translate` property are animated, so the hover lift
   (which uses `transform`) keeps working after the animation has finished. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card-grid > *, .pf-grid > .pf-item, .pf-manage > .pf-card {
      animation: md-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes md-rise {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

/* one calm placeholder behind lazily loaded pictures instead of a white flash */
.course-card-media img, .article-card-media img, .podcast-card-media img, .pf-open img, .pf-card img { background-color: var(--surface-2); }

/* the same focus ring on every field and a pressed state on every button */
.form-control:focus, .form-select:focus {
  border-color: var(--lapis-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lapis-light) 24%, transparent);
}
.btn:active:not(:disabled) { transform: translateY(0) scale(.98); }

/* the eNAMAD seal stays on a white plate so it is readable on the dark footer */
.footer-trust-slot { box-shadow: 0 10px 26px -14px rgb(0 0 0 / .6); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.footer-trust-slot:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgb(0 0 0 / .7); }
.footer-trust-slot img { width: 112px; height: 112px; max-width: 100%; max-height: 112px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .footer-trust-slot { transition: none; }
  .footer-trust-slot:hover { transform: none; }
}

/* ---------- share links (Telegram / WhatsApp / e-mail): plain links, no script ---------- */
.share-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.share-link { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: .85rem; font-weight: 700; line-height: 1.7; text-decoration: none; transition: border-color .18s, transform .15s, background-color .18s; }
.share-link:hover { border-color: var(--gilt-line); background: var(--surface-2); color: var(--text); transform: translateY(-1px); }
.share-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.share-link .bi { font-size: 1rem; }
.share-telegram .bi { color: #229ed9; }
.share-whatsapp .bi { color: #1fa855; }

/* ---------- article reading helpers (article-tools.js): progress bar and table of contents ---------- */
.read-progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 1200; block-size: 3px; background: linear-gradient(90deg, var(--citron), var(--gilt-deep)); transform: scaleX(0); transform-origin: right center; pointer-events: none; }
.article-toc { margin-block: 0 1.25rem; padding: .85rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.article-toc > summary { cursor: pointer; font-weight: 800; color: var(--ink); }
[data-bs-theme="dark"] .article-toc > summary { color: var(--text); }
.article-toc ol { margin: .6rem 0 0; padding-inline-start: 1.6rem; list-style-type: decimal; list-style-type: persian; }
.article-toc li { margin-block: .2rem; line-height: 1.8; }
.article-toc li.is-sub { margin-inline-start: 1rem; font-size: .93em; }
.article-toc a { color: var(--text); text-decoration: none; }
.article-toc a:hover, .article-toc a.is-active { color: var(--lapis-light); text-decoration: underline; }
[data-bs-theme="dark"] .article-toc a:hover, [data-bs-theme="dark"] .article-toc a.is-active { color: var(--citron); }
@media (prefers-reduced-motion: reduce) { .share-link { transition: none; } .share-link:hover { transform: none; } }