/* ==================================================================
   Glossary hub (page-glossary.php) + single term (single-glossary_term.php)
   Relies on shared .page-banner / .breadcrumb from style-page-shared.css
   and .container / .section-head / .eyebrow / .accent-word / .reveal*
   from style.css. Card + grid recipe mirrors .service-card /
   .service-grid in style-services.css.
   ================================================================== */

/* ---------- Glossary hub: category filter ---------- */
.glossary-category-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 2.2rem;
}

/* ---------- Category badge (hub filter pills + single-term + card badges) ---------- */
.glossary-category-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--blue-soft);
    color: var(--blue-dark);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.glossary-category-badge:hover,
.glossary-category-badge.is-active {
    background: var(--blue-dark);
    color: #fff;
}

.glossary-category-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.2rem;
}

/* ---------- Glossary hub: A-Z jump nav ---------- */
.glossary-alphabet {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 clamp(2.6rem, 6vw, 4rem);
}

.glossary-alphabet-pill {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding: 0 0.5rem;
    border-radius: 999px;
    /* Solid, clearly-visible fill rather than a near-white card with a
       faint border — at 1px/pale-border the unselected pills read as
       almost invisible against the white page background. */
    background: var(--blue-soft);
    color: var(--blue-dark);
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.glossary-alphabet-pill:hover {
    /* !important: overrides Astra's own generic button:hover rule — see
       the matching note on .glossary-word-pill:hover above. */
    background: var(--blue-mid) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

.glossary-alphabet-pill.is-active {
    background: var(--blue-dark) !important;
    color: #fff !important;
}

.glossary-alphabet-pill.is-empty {
    background: #eef1f6;
    color: var(--ink-faint);
    pointer-events: none;
}

/* ---------- Glossary hub: interactive A-Z browser (letter + word list + card) ---------- */
.glossary-browser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
}

@media (max-width: 860px) {
    .glossary-browser { grid-template-columns: 1fr; }
}

.glossary-current-letter {
    font-size: clamp(4.5rem, 9vw, 6.5rem);
    font-weight: 800;
    line-height: 1;
    color: var(--blue-dark);
    margin: 0 0 1.5rem;
    opacity: 0.9;
}

.glossary-word-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.glossary-word-pill {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 0.65rem 1.1rem;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.glossary-word-pill:hover {
    /* !important: Astra's own theme CSS ships a generic button:hover rule
       (background-color: var(--ast-global-color-7), which resolves to a
       yellow/gold accent in this site's color palette) targeting plain
       <button> elements site-wide. Its selector list is long enough to
       match this class's specificity, so without !important here the
       cascade order (Astra's stylesheet loads after this one) lets it win
       and paint the pill gold on hover instead of the intended blue. */
    background: #fff !important;
    border-color: var(--blue-mid) !important;
    color: var(--blue-dark) !important;
}

.glossary-word-pill.is-active {
    background: var(--blue-dark) !important;
    border-color: var(--blue-dark) !important;
    color: #fff !important;
}

/* ---------- Glossary hub: definition card ---------- */
.glossary-browser-right {
    position: sticky;
    top: 100px;
}

.glossary-card {
    position: relative;
    background: linear-gradient(160deg, var(--blue-deep), var(--blue-dark) 65%, var(--blue-mid));
    border-radius: 20px;
    padding: clamp(2.2rem, 5vw, 3rem);
    min-height: 280px;
    box-shadow: 0 30px 60px -24px rgba(0, 16, 48, 0.55);
    overflow: hidden;
}

.glossary-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.16) 1.4px, transparent 1.4px);
    background-size: 16px 16px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 100% 0%, #000 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 80% 60% at 100% 0%, #000 40%, transparent 85%);
}

.glossary-card-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.12);
    margin-bottom: 1.4rem;
}

.glossary-card-icon svg { width: 26px; height: 26px; stroke: #fff; }

.glossary-card-title {
    position: relative;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.9rem;
    line-height: 1.3;
}

.glossary-card-description {
    position: relative;
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin: 0 0 1.6rem;
}

.glossary-card-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff !important;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    padding: 0.6rem 1.2rem;
    transition: background 0.2s ease, transform 0.2s ease;
}

.glossary-card-link:hover {
    /* !important: guards against the same class of Astra global
       button/link hover override described on .glossary-word-pill:hover
       above, in case a similarly generic a:hover rule ever applies here. */
    background: rgba(255, 255, 255, 0.24) !important;
    color: #fff !important;
    transform: translateX(2px);
}

.glossary-card-link svg { width: 16px; height: 16px; stroke: currentColor; }

@keyframes glossaryCardSwap {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.glossary-card.is-swapping .glossary-card-title,
.glossary-card.is-swapping .glossary-card-description,
.glossary-card.is-swapping .glossary-card-link {
    animation: glossaryCardSwap 0.3s ease both;
}

@media (prefers-reduced-motion: reduce) {
    .glossary-card.is-swapping .glossary-card-title,
    .glossary-card.is-swapping .glossary-card-description,
    .glossary-card.is-swapping .glossary-card-link {
        animation: none;
    }
}

/* ---------- Related-terms grid + card (single-glossary_term.php) — mirrors .service-grid / .service-card ---------- */
.glossary-term-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}

@media (max-width: 1024px) {
    .glossary-term-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .glossary-term-grid { grid-template-columns: 1fr; }
}

.glossary-term-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(10, 104, 238, 0.1);
    border-radius: 16px;
    padding: 1.8rem 1.7rem;
    text-decoration: none;
    box-shadow: 0 10px 26px -18px rgba(0, 32, 80, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.glossary-term-card:hover {
    transform: translateY(-4px);
    background: var(--blue-dark);
    border-color: var(--blue-dark);
    box-shadow: 0 20px 38px -18px rgba(0, 48, 117, 0.45);
}

.glossary-term-card-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--blue-soft);
    margin-bottom: 1.1rem;
    transition: background 0.25s ease;
}

.glossary-term-card-icon svg { width: 24px; height: 24px; stroke: var(--blue-dark); transition: stroke 0.25s ease; }
.glossary-term-card:hover .glossary-term-card-icon { background: #fff; }
.glossary-term-card:hover .glossary-term-card-icon svg { stroke: var(--blue-dark); }

.glossary-term-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--blue-dark);
    margin: 0 0 0.6rem;
    line-height: 1.35;
    transition: color 0.25s ease;
}

.glossary-term-card p {
    font-size: 0.88rem;
    color: var(--ink-muted);
    margin: 0 0 1.1rem;
    line-height: 1.55;
    transition: color 0.25s ease;
}

.glossary-term-card:hover h3 { color: #fff; }
.glossary-term-card:hover p { color: rgba(255, 255, 255, 0.75); }

.glossary-term-card-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--blue);
    transition: color 0.25s ease;
}

.glossary-term-card-link svg { width: 16px; height: 16px; stroke: currentColor; transition: transform 0.25s ease; }
.glossary-term-card:hover .glossary-term-card-link { color: var(--blue-mid); }
.glossary-term-card:hover .glossary-term-card-link svg { transform: translateX(3px); }

/* ---------- Single term: overview ---------- */
.glossary-overview-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
}

@media (max-width: 700px) {
    .glossary-overview-grid { grid-template-columns: 1fr; }
}

.glossary-icon-badge {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: var(--blue-soft);
    flex: none;
    animation: glossaryIconFloat 4s ease-in-out infinite;
}

.glossary-icon-badge svg { width: 40px; height: 40px; stroke: var(--blue-dark); }

@keyframes glossaryIconFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.glossary-content p {
    margin: 0 0 1.1rem;
    line-height: 1.7;
}

.glossary-content p:last-child { margin-bottom: 0; }

.glossary-content ul,
.glossary-content ol {
    margin: 0 0 1.1rem 1.2rem;
    color: var(--ink-muted);
    line-height: 1.7;
}

/* ---------- Single term: back-to-hub link ---------- */
.glossary-back-link {
    margin-top: 2rem;
}

.glossary-back-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
}

.glossary-back-link a:hover { color: var(--blue-mid); }
.glossary-back-link svg { width: 16px; height: 16px; stroke: currentColor; }

@media (prefers-reduced-motion: reduce) {
    .glossary-icon-badge {
        animation: none;
    }
}