/* ===================================================
   GLOBAL UTILITIES
   Link this file in every HTML page:
   <link rel="stylesheet" href="../style/global.css">
   (adjust the path as needed per folder depth)
   =================================================== */

/* ── Animated Gradient Text ── */
/* Usage: <span class="grad-text" data-text="your words">your words</span> */
/* Notes:
   - data-text must match the text content exactly (needed for the border layer)
   - inline-block: abspos ::before + inset:0 must share the same box as the fill; display:inline breaks alignment
   - inherit font metrics so gradient words match sibling title size/tracking
   - border works cleanly on all letters including P, W, R, O
*/
.grad-text {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    /* Contain ::before (z-index: -1) so the stroke stays above section/page backgrounds */
    z-index: 0;
    isolation: isolate;
    overflow: visible;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    background: linear-gradient(
        90deg,
        #38bdf8 0%,
        #f43f8e 20%,
        #ffe600 40%,
        #38bdf8 50%,
        #f43f8e 70%,
        #ffe600 85%,
        #38bdf8 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: grad-text-slide 9s linear infinite;
}

/* Border layer — renders same text behind with stroke only, no fill */
/* paint-order: stroke fill keeps P/W/R/O counters clean */
.grad-text::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    z-index: -1;
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    white-space: pre;
    paint-order: stroke fill;
    -webkit-text-stroke: 0.75px #000;
    -webkit-text-stroke-width: 0.75px;
    -webkit-text-stroke-color: #000;
    -webkit-text-fill-color: transparent;
    color: transparent;
    pointer-events: none;
}

@keyframes grad-text-slide {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── AnekBangla Font Declaration ── */
/* ── Salmond body copy — extra letter spacing ── */
body.hierarchy-font p,
body.hierarchy-font li,
body.hierarchy-font .desc,
body.hierarchy-font .description,
body.hierarchy-font [class*="__copy"],
body.hierarchy-font [class*="__subtitle"],
body.hierarchy-font [class*="__mini-copy"],
body.hierarchy-font [class*="-subtitle"],
body.hierarchy-font [class*="-copy"] {
    letter-spacing: 0.05em;
}

/* ── Button typography — AnekBangla ── */
body.hierarchy-font button,
body.hierarchy-font .btn,
body.hierarchy-font .btn-theme {
    font-family: 'AnekBangla', 'Inter', system-ui, sans-serif;
}

/* ── Main section titles (under tagged section badges) — Title Case ── */
.ds1-section-title,
.school-ds14__title,
.hiw-header-v2__title,
.ds2-title,
.hiw-school-heading,
.ds5-intro__title,
.school-faq-section__title,
.school-stats-section-intro .ds1-section-title,
.fg-section-header .ds1-section-title,
.pp-intro-title,
.id-headline,
.numbers-title,
.card-title,
.header-title {
    text-transform: capitalize !important;
}

/* Make grad-text inside titles inherit Title Case from parent */
.ds1-section-title .grad-text,
.school-ds14__title .grad-text,
.hiw-header-v2__title .grad-text,
.ds2-title .grad-text,
.hiw-school-heading .grad-text,
.ds5-intro__title .grad-text,
.school-faq-section__title .grad-text,
.pp-intro-title .grad-text,
.id-headline .grad-text,
.numbers-title .grad-text,
.card-title .grad-text,
.header-title .grad-text {
    text-transform: capitalize !important;
}