/* =====================================================================
   Glossary (template-glossary-archive.php + single-glossary.php)
   Ported from the "new home v3/glossary" design. Loaded after home-v3.css
   and scoped under .hv3: tokens, the hero title, buttons, chips, tags,
   links and the blog cards (.bgrid / .bcard) come from there.
   ===================================================================== */

.hv3 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hv3.glossary-page button { font-family: var(--font); }

/* =====================================================================
   1. HERO — heading + search + latest-term chips
   ===================================================================== */
.hv3 .ghero { position: relative; padding: 72px 0 56px; overflow: hidden; text-align: center; }
.hv3 .ghero__glow { position: absolute; inset: 0 0 auto 0; height: 640px; background:
	radial-gradient(50% 60% at 82% 0%, var(--sky-30), transparent 70%),
	radial-gradient(34% 44% at 8% 12%, rgba(139,92,246,.12), transparent 70%); pointer-events: none; z-index: 0; }
.hv3 .ghero .container { position: relative; z-index: 1; }
.hv3 .ghero__title { max-width: 860px; margin: 0 auto; }

/* search pill: icon · input · clear · button */
.hv3 .gsearch { position: relative; display: flex; align-items: center; gap: 4px; max-width: 680px; margin: 32px auto 0; padding: 7px 7px 7px 0; border: 1px solid var(--line); border-radius: 999px; background: #fff; box-shadow: var(--shadow-md); transition: border-color .2s, box-shadow .2s; }
.hv3 .gsearch:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-15), var(--shadow-md); }
.hv3 .gsearch__ic { position: absolute; left: 22px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--muted); pointer-events: none; }
.hv3 .gsearch input[type="search"] { flex: 1; min-width: 0; height: 46px; margin: 0; padding: 0 4px 0 54px; border: 0; border-radius: 0; background: transparent; font-family: var(--font); font-size: 16.5px; color: var(--navy); box-shadow: none; -webkit-appearance: none; appearance: none; }
.hv3 .gsearch input::placeholder { color: var(--muted); }
.hv3 .gsearch input::-webkit-search-cancel-button, .hv3 .gsearch input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.hv3 .gsearch input:focus { outline: none; box-shadow: none; }
.hv3 .gsearch__clear { flex-shrink: 0; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.hv3 .gsearch__clear .ic { font-size: 15px; }
.hv3 .gsearch__clear:hover { background: var(--surface); color: var(--navy); }
.hv3 .gsearch__clear[hidden] { display: none; }
.hv3 .gsearch__btn { flex-shrink: 0; height: 46px; padding: 0 20px; }
.hv3 .gsearch__btn .ic { font-size: 16px; }
.hv3 .gsearch__btn:hover .ic { transform: none; }

.hv3 .gpop { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--muted); }
.hv3 .gpop button { height: 32px; margin: 0; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.hv3 .gpop button:hover { border-color: var(--blue-200); background: var(--surface-2); color: var(--blue); }

/* =====================================================================
   2. WHY A GLOSSARY
   ===================================================================== */
.hv3 .gwhy { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hv3 .gwhy .section__head--split > div { flex-shrink: 0; }
.hv3 .gwhy .section__head p { max-width: 520px; font-size: 17px; }
.hv3 .ygrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hv3 .ycard { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px 24px 26px; transition: opacity .8s ease-in-out, transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.hv3 .ycard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.hv3 .ycard__ic { width: 40px; height: 40px; border-radius: 11px; background: var(--surface-2); color: var(--blue); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 30px; }
.hv3 .ycard__ic .ic { font-size: 19px; stroke-width: 1.9; }
.hv3 .ycard__ic img { width: 22px; height: 22px; object-fit: contain; }
.hv3 .ycard h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin-bottom: 8px; }
.hv3 .ycard p { font-size: 14.5px; line-height: 1.55; }

/* =====================================================================
   3. GLOSSARY — letter tabs + term cards
   ===================================================================== */
.hv3 .gloss .section__head { margin-bottom: 28px; }

/* sticks just under the 68px theme navbar */
.hv3 .gtabs { position: sticky; top: 69px; z-index: 40; margin-bottom: 36px; padding: 10px 0; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hv3 .gtabs__row { display: flex; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.hv3 .gtab { flex: 1 1 0; min-width: 30px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.hv3 .gtab--all { flex: 0 0 auto; padding: 0 16px; }
.hv3 .gtab:hover { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); }
.hv3 .gtab[aria-pressed="true"] { background: var(--navy); color: #fff; box-shadow: none; }
.hv3 .gtab:disabled { opacity: .35; cursor: not-allowed; background: none; box-shadow: none; color: var(--text); }

.hv3 .gstatus { display: none; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; font-size: 15px; color: var(--text); }
.hv3 .gstatus b { font-weight: 700; color: var(--navy); }
.hv3 .gstatus .link { flex-shrink: 0; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }

.hv3 .ggroup { margin-bottom: 48px; }
.hv3 .ggroup:last-child { margin-bottom: 0; }
.hv3 .ggroup[hidden] { display: none; }
.hv3 .ggroup__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.hv3 .ggroup__letter { width: 48px; height: 48px; border-radius: 14px; background: var(--navy); color: #fff; font-size: 22px; font-weight: 700; letter-spacing: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hv3 .ggroup__head i { flex: 1; height: 1px; background: var(--line); }
.hv3 .ggroup__count { font-size: 13px; color: var(--muted); }

.hv3 .ggrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hv3 .gcard { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px 22px 24px; transition: border-color .2s, box-shadow .2s, background .2s; }
.hv3 .gcard:hover { border-color: var(--blue-200); background: #fff; box-shadow: var(--shadow-md); }
.hv3 .gcard[hidden] { display: none; }
.hv3 .gcard .tag { align-self: flex-start; margin-bottom: 14px; }
.hv3 .gcard h4 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin-bottom: 8px; overflow-wrap: anywhere; }
.hv3 .gcard p { font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; }
.hv3 .gcard__more { margin-top: auto; align-self: flex-start; min-height: 32px; }
.hv3 .gcard mark { background: var(--blue-100); color: inherit; border-radius: 3px; padding: 0 1px; }

.hv3 .gempty { display: none; text-align: center; padding: 56px 24px; border: 1px dashed var(--slate-200); border-radius: var(--r-2xl); background: var(--surface); }
.hv3 .gempty.show { display: block; }
.hv3 .gempty__ic { width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--blue); display: flex; align-items: center; justify-content: center; }
.hv3 .gempty__ic .ic { font-size: 22px; }
.hv3 .gempty h3 { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; overflow-wrap: anywhere; }
.hv3 .gempty p { font-size: 15px; max-width: 420px; margin: 0 auto 22px; }
.hv3 .gempty__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- Search mode: "why" steps aside, results sit right under the search ---------- */
.hv3.is-searching .ghero { padding-bottom: 28px; }
.hv3.is-searching .gwhy { display: none; }
.hv3.is-searching .gloss { padding-top: 4px; }
.hv3.is-searching .gloss .section__head, .hv3.is-searching .gtabs { display: none; }
.hv3.is-searching .gstatus { display: flex; }
.hv3.is-searching .glist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hv3.is-searching .ggroup, .hv3.is-searching .ggrid { display: contents; }   /* flatten the letter groups into one grid */
.hv3.is-searching .ggroup__head { display: none; }

/* =====================================================================
   GLOSSARY TERM PAGE — hero, definition card, CTA band
   ===================================================================== */
.hv3 .ghero--term { padding-bottom: 64px; }
.hv3 .ghero--term .chip { margin-bottom: 18px; transition: border-color .2s, color .2s; }
.hv3 .ghero--term a.chip:hover { border-color: var(--blue); color: var(--navy); }
.hv3 .ghero__sub { max-width: 640px; margin: 16px auto 0; font-size: 18px; color: var(--para); }

.hv3 .gdef { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hv3 .gdef__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 48px 56px 52px; box-shadow: var(--shadow-sm); }
.hv3 .gdef__cta { display: flex; justify-content: center; margin-top: 40px; }
/* The card is the only box: a card / bordered group pasted into the editor content
   (e.g. the design's .gdef__card markup) loses its own border and padding. */
.hv3 .gdef__content > article, .hv3 .gdef__content > .gdef__card, .hv3 .gdef__content .gdef__card, .hv3 .gdef__content > .wp-block-group { border: 0; padding: 0; box-shadow: none; background: none; border-radius: 0; }

/* editor content (block / classic) inside the card */
.hv3 .gdef__content { font-size: 16.5px; line-height: 1.7; color: var(--para); }
.hv3 .gdef__content > * + * { margin-top: 14px; }
.hv3 .gdef__content p { font-size: 16.5px; line-height: 1.7; }
.hv3 .gdef__content h2, .hv3 .gdef__content h3, .hv3 .gdef__content h4 { color: var(--ink); letter-spacing: -.025em; line-height: 1.25; }
.hv3 .gdef__content h2 { font-size: 24px; margin-top: 40px; }
.hv3 .gdef__content h3 { font-size: 20px; margin-top: 32px; }
.hv3 .gdef__content h4 { font-size: 17px; margin-top: 26px; }
.hv3 .gdef__content h2:first-child, .hv3 .gdef__content h3:first-child { margin-top: 0; }
.hv3 .gdef__content strong { color: var(--ink); font-weight: 700; }
.hv3 .gdef__content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.hv3 .gdef__content a:hover { color: var(--blue-700); }
.hv3 .gdef__content ul, .hv3 .gdef__content ol { margin-top: 14px; padding: 0; }
.hv3 .gdef__content li { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--line-2); font-size: 16.5px; line-height: 1.7; }
.hv3 .gdef__content li:last-child { border-bottom: 1px solid var(--line-2); }
.hv3 .gdef__content li > ul, .hv3 .gdef__content li > ol { margin-top: 6px; }
.hv3 .gdef__content li li { border: 0; padding-top: 6px; padding-bottom: 6px; }
.hv3 .gdef__content li li:last-child { border: 0; }
.hv3 .gdef__content ul li::before { content: ""; position: absolute; left: 6px; top: 23px; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.hv3 .gdef__content ol { counter-reset: gdef-counter; }
.hv3 .gdef__content ol li { counter-increment: gdef-counter; padding-left: 36px; }
.hv3 .gdef__content ol li::before { content: counter(gdef-counter) "."; position: absolute; left: 4px; top: 12px; font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; }
.hv3 .gdef__content blockquote { margin: 24px 0 0; padding: 18px 22px; border-left: 4px solid var(--blue); background: var(--surface-2); border-radius: 0 var(--r-md) var(--r-md) 0; }
.hv3 .gdef__content blockquote p { font-style: italic; color: var(--slate-700); }
.hv3 .gdef__content img { height: auto; border-radius: var(--r-lg); }
.hv3 .gdef__content figure { margin: 24px 0 0; }
.hv3 .gdef__content figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
.hv3 .gdef__content table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 15px; }
.hv3 .gdef__content th, .hv3 .gdef__content td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.hv3 .gdef__content th { background: var(--surface); color: var(--ink); font-weight: 700; font-size: 13.5px; }
.hv3 .gdef__content hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0 0; }
.hv3 .gdef__content code { font-size: .92em; padding: 2px 6px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line-2); }
.hv3 .gdef__content pre { padding: 16px 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); overflow-x: auto; font-size: 14px; }
.hv3 .gdef__content pre code { padding: 0; border: 0; background: none; }
.hv3 .gdef__content iframe, .hv3 .gdef__content video { max-width: 100%; }
.hv3 .gdef__content .wp-block-image, .hv3 .gdef__content .wp-block-embed { margin-left: 0; margin-right: 0; }
.hv3 .gdef__content .alignwide, .hv3 .gdef__content .alignfull { max-width: 100%; margin-left: 0; margin-right: 0; }
.hv3 .gdef__pages { margin-top: 24px; font-size: 14px; color: var(--muted); }
.hv3 .gdef__pages a { margin-left: 6px; color: var(--blue); }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
	.hv3 .ygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hv3 .ggrid, .hv3.is-searching .glist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.hv3 .ghero { padding: 48px 0 44px; }
	.hv3 .gwhy .section__head p { max-width: 640px; }
	.hv3 .gtabs__row { overflow-x: auto; scrollbar-width: none; }
	.hv3 .gtabs__row::-webkit-scrollbar { display: none; }
	.hv3 .gtab { flex: 0 0 44px; height: 44px; }
	.hv3 .gtab--all { flex: 0 0 auto; }
}
@media (max-width: 640px) {
	.hv3 .ghero { padding: 40px 0 36px; }
	.hv3 .gsearch { margin-top: 24px; padding: 6px 6px 6px 0; }
	.hv3 .gsearch input[type="search"] { height: 44px; font-size: 16px; padding-left: 48px; }
	.hv3 .gsearch__ic { left: 18px; font-size: 18px; }
	.hv3 .gsearch__btn { height: 42px; padding: 0 14px; font-size: 14px; }
	.hv3 .gpop { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 16px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); scrollbar-width: none; }
	.hv3 .gpop::-webkit-scrollbar { display: none; }
	.hv3 .gpop > * { flex-shrink: 0; }
	.hv3 .gpop button { height: 40px; }
	.hv3 .ygrid { grid-template-columns: 1fr; }
	.hv3 .ycard { padding: 22px; }
	.hv3 .ycard__ic { margin-bottom: 22px; }
	.hv3 .gtabs { margin-bottom: 28px; }
	.hv3 .ggrid, .hv3.is-searching .glist { grid-template-columns: 1fr; }
	.hv3 .ggroup { margin-bottom: 36px; }
	.hv3 .ggroup__letter { width: 44px; height: 44px; font-size: 20px; }
	.hv3 .gcard { padding: 20px; }
	.hv3 .gcard p { margin-bottom: 8px; }
	.hv3 .gcard__more { min-height: 44px; }
	.hv3 .gstatus { font-size: 14.5px; }
	.hv3 .gempty { padding: 40px 18px; }
	.hv3 .ghero--term { padding-bottom: 44px; }
	.hv3 .ghero__sub { font-size: 16.5px; }
	.hv3 .gdef__card { padding: 28px 22px 32px; }
	.hv3 .gdef__content, .hv3 .gdef__content p, .hv3 .gdef__content li { font-size: 16px; }
	.hv3 .gdef__content h2 { font-size: 21px; margin-top: 32px; }
	.hv3 .gdef__content h3 { font-size: 18px; }
	.hv3 .gdef__cta .btn { width: 100%; }
}