/* Test-card title styles (registry: inc/hub-title.php). Loaded only on pages that show the test cards
   (.hub-card: home, /تست-ها/, «تست‌های من») and only when the chosen style is not "original".
   Switch: <html data-hub-title="bold|band|mark|blip|tab">. Every style centres the title and makes it the
   first thing the eye lands on; the description/facts/button below stay as they are. */

html[data-hub-title] .hub-card__title { text-align: center; font-family: var(--font-display); line-height: 1.45; }
html[data-hub-title] .hub-card__title a { color: inherit; }

/* ---------- 1) bold — big weight + a short green rule ---------- */
html[data-hub-title="bold"] .hub-card__title { margin: 6px 0 16px; font-size: 23px; font-weight: 700; color: var(--ink); }
html[data-hub-title="bold"] .hub-card__title::after { content: ""; display: block; width: 38px; height: 3px; margin: 10px auto 0; border-radius: 3px; background: var(--mpt-green, var(--lc-4d7c62, #4d7c62)); }
html[data-hub-title="bold"] .hub-card__title a:hover { color: var(--mpt-green, var(--lt-4d7c62, #4d7c62)); }

/* ---------- 2) band — the title sits in a sage strip that runs edge to edge under the picture ---------- */
html[data-hub-title="band"] .hub-card__title { margin: -18px -20px 16px; padding: 15px 16px; font-size: 21px; font-weight: 700; color: var(--mpt-green-deep, var(--lt-244a39, #244a39)); background: var(--lc-eef5f0, #eef5f0); border-bottom: 1px solid rgba(77,124,98,.16); }
html[data-hub-title="band"] .hub-card__title a:hover { color: var(--mpt-green, var(--lt-4d7c62, #4d7c62)); }
html[data-theme="dark"][data-hub-title="band"] .hub-card__title { color: var(--ink); background: rgba(134,195,163,.12); border-bottom-color: rgba(134,195,163,.18); }

/* ---------- 3) mark — a peach highlighter stroke behind the lower half of the words ---------- */
html[data-hub-title="mark"] .hub-card__title { margin: 4px 0 16px; font-size: 22px; font-weight: 700; color: var(--ink); }
html[data-hub-title="mark"] .hub-card__title a {
  padding: 0 8px; background: linear-gradient(transparent 58%, var(--lc-fbe1d1, #fbe1d1) 58%, var(--lc-fbe1d1, #fbe1d1) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html[data-theme="dark"][data-hub-title="mark"] .hub-card__title a { background: linear-gradient(transparent 58%, rgba(196,130,90,.42) 58%, rgba(196,130,90,.42) 92%, transparent 92%); }

/* ---------- 4) blip — bold title with a small EEG blip as its underline (echoes the header/hero brain wave) ---------- */
html[data-hub-title="blip"] .hub-card__title { margin: 4px 0 12px; font-size: 22px; font-weight: 700; color: var(--ink); }
html[data-hub-title="blip"] .hub-card__title::after {
  content: ""; display: block; width: 140px; height: 14px; margin: 8px auto 0; background: var(--mpt-green, var(--lc-4d7c62, #4d7c62));
  -webkit-mask: url("hub-title-blip.svg") center / 140px 14px no-repeat; mask: url("hub-title-blip.svg") center / 140px 14px no-repeat;
}
html[data-hub-title="blip"] .hub-card__title a:hover { color: var(--mpt-green, var(--lt-4d7c62, #4d7c62)); }
html[data-theme="dark"][data-hub-title="blip"] .hub-card__title::after { background: var(--color-accent-100, var(--lc-98bfaa, #98bfaa)); }

/* ---------- 5) tab — a solid green label that straddles the picture's bottom edge ---------- */
html[data-hub-title="tab"] .hub-card__title {
  position: relative; z-index: 2; width: fit-content; max-width: calc(100% - 8px);
  margin: -32px auto 16px; padding: 9px 22px; border-radius: 12px;
  font-size: 19px; font-weight: 600; color: var(--lt-ffffff, #fff); background: var(--fill-700, var(--lc-2a4335, #2a4335));
  box-shadow: 0 12px 22px -12px rgba(20,40,28,.6);
}
html[data-hub-title="tab"] .hub-card__title a:hover { color: var(--lt-fbe1d1, #fbe1d1); }
html[data-theme="dark"][data-hub-title="tab"] .hub-card__title { background: var(--fill-600, var(--lc-3b604c, #3b604c)); box-shadow: 0 12px 22px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.10); }

@media (max-width: 600px) {
  html[data-hub-title="bold"] .hub-card__title { font-size: 21px; }
  html[data-hub-title="band"] .hub-card__title { margin: -14px -16px 12px; padding: 13px 14px; font-size: 19px; }
  html[data-hub-title="mark"] .hub-card__title, html[data-hub-title="blip"] .hub-card__title { font-size: 20px; }
  html[data-hub-title="tab"] .hub-card__title { margin: -28px auto 12px; padding: 8px 18px; font-size: 17px; }
}