/* ====================================================== Blockenberg — Glossary block styles ====================================================== */ .bkbg-gl-title { margin: 0 0 8px; } .wp-block-blockenberg-glossary .bkbg-gl-title { font-family: var(--bkbg-gl-tt-font-family, inherit); font-size: var(--bkbg-gl-tt-font-size-d, 32px); font-weight: var(--bkbg-gl-tt-font-weight, 700); font-style: var(--bkbg-gl-tt-font-style, normal); text-decoration: var(--bkbg-gl-tt-text-decoration, none); text-transform: var(--bkbg-gl-tt-text-transform, none); line-height: var(--bkbg-gl-tt-line-height-d, 1.2); letter-spacing: var(--bkbg-gl-tt-letter-spacing-d, normal); word-spacing: var(--bkbg-gl-tt-word-spacing-d, normal); } .bkbg-gl-subtitle { margin: 0 0 24px; line-height: 1.6; } /* Search */ .bkbg-gl-search-wrap { margin-bottom: 16px; } .bkbg-gl-search { width: 100%; padding: 9px 14px; border-radius: 6px; border: 1px solid #d1d5db; font-size: 14px; box-sizing: border-box; outline: none; transition: border-color 0.15s; } .bkbg-gl-search:focus { border-color: #6c3fb5; box-shadow: 0 0 0 2px rgba(108, 63, 181, 0.15); } /* Alpha nav */ .bkbg-gl-alpha-nav { display: flex; flex-wrap: wrap; gap: 4px; background: #f3f4f6; border-radius: 8px; padding: 8px; margin-bottom: 24px; } .bkbg-gl-nav-btn { min-width: 28px; height: 28px; line-height: 28px; border-radius: 4px; border: none; background: transparent; color: #9ca3af; font-weight: 600; font-size: 13px; cursor: default; text-align: center; text-decoration: none; display: inline-block; transition: background 0.15s, color 0.15s; } .bkbg-gl-nav-btn.active { cursor: pointer; } .bkbg-gl-nav-btn.active:hover { opacity: 0.85; } /* Letter section */ .bkbg-gl-letter-section { margin-bottom: 24px; break-inside: avoid; } .bkbg-gl-letter-head { display: inline-block; border-radius: 6px; padding: 3px 12px; margin-bottom: 12px; font-family: var(--bkbg-gl-lh-font-family, inherit); font-size: var(--bkbg-gl-lh-font-size-d, 18px); font-weight: var(--bkbg-gl-lh-font-weight, 700); font-style: var(--bkbg-gl-lh-font-style, normal); text-decoration: var(--bkbg-gl-lh-text-decoration, none); text-transform: var(--bkbg-gl-lh-text-transform, none); line-height: var(--bkbg-gl-lh-line-height-d, 1.3); letter-spacing: var(--bkbg-gl-lh-letter-spacing-d, normal); word-spacing: var(--bkbg-gl-lh-word-spacing-d, normal); } /* Term items */ .bkbg-gl-item { padding: 10px 0; border-bottom: 1px solid #e5e7eb; transition: background 0.1s; } .bkbg-gl-item:last-child { border-bottom: none; } .bkbg-gl-item.hidden { display: none; } .bkbg-gl-term { font-family: var(--bkbg-gl-tm-font-family, inherit); font-size: var(--bkbg-gl-tm-font-size-d, 16px); font-weight: var(--bkbg-gl-tm-font-weight, 700); font-style: var(--bkbg-gl-tm-font-style, normal); text-decoration: var(--bkbg-gl-tm-text-decoration, none); text-transform: var(--bkbg-gl-tm-text-transform, none); line-height: var(--bkbg-gl-tm-line-height-d, 1.4); letter-spacing: var(--bkbg-gl-tm-letter-spacing-d, normal); word-spacing: var(--bkbg-gl-tm-word-spacing-d, normal); margin-bottom: 4px; } .bkbg-gl-term[aria-expanded="false"] { cursor: pointer; } .bkbg-gl-term[aria-expanded="false"]::after { content: ' ▾'; font-size: 11px; opacity: 0.6; } .bkbg-gl-term[aria-expanded="true"]::after { content: ' ▴'; font-size: 11px; opacity: 0.6; } .bkbg-gl-def { font-family: var(--bkbg-gl-df-font-family, inherit); font-size: var(--bkbg-gl-df-font-size-d, 14px); font-weight: var(--bkbg-gl-df-font-weight, 400); font-style: var(--bkbg-gl-df-font-style, normal); text-decoration: var(--bkbg-gl-df-text-decoration, none); text-transform: var(--bkbg-gl-df-text-transform, none); line-height: var(--bkbg-gl-df-line-height-d, 1.65); letter-spacing: var(--bkbg-gl-df-letter-spacing-d, normal); word-spacing: var(--bkbg-gl-df-word-spacing-d, normal); } /* Typography responsive */ @media (max-width: 1024px) { .wp-block-blockenberg-glossary .bkbg-gl-title { font-size: var(--bkbg-gl-tt-font-size-t, var(--bkbg-gl-tt-font-size-d, 32px)); line-height: var(--bkbg-gl-tt-line-height-t, var(--bkbg-gl-tt-line-height-d, 1.2)); letter-spacing: var(--bkbg-gl-tt-letter-spacing-t, var(--bkbg-gl-tt-letter-spacing-d, normal)); word-spacing: var(--bkbg-gl-tt-word-spacing-t, var(--bkbg-gl-tt-word-spacing-d, normal)); } .bkbg-gl-term { font-size: var(--bkbg-gl-tm-font-size-t, var(--bkbg-gl-tm-font-size-d, 16px)); line-height: var(--bkbg-gl-tm-line-height-t, var(--bkbg-gl-tm-line-height-d, 1.4)); letter-spacing: var(--bkbg-gl-tm-letter-spacing-t, var(--bkbg-gl-tm-letter-spacing-d, normal)); word-spacing: var(--bkbg-gl-tm-word-spacing-t, var(--bkbg-gl-tm-word-spacing-d, normal)); } .bkbg-gl-def { font-size: var(--bkbg-gl-df-font-size-t, var(--bkbg-gl-df-font-size-d, 14px)); line-height: var(--bkbg-gl-df-line-height-t, var(--bkbg-gl-df-line-height-d, 1.65)); letter-spacing: var(--bkbg-gl-df-letter-spacing-t, var(--bkbg-gl-df-letter-spacing-d, normal)); word-spacing: var(--bkbg-gl-df-word-spacing-t, var(--bkbg-gl-df-word-spacing-d, normal)); } .bkbg-gl-letter-head { font-size: var(--bkbg-gl-lh-font-size-t, var(--bkbg-gl-lh-font-size-d, 18px)); line-height: var(--bkbg-gl-lh-line-height-t, var(--bkbg-gl-lh-line-height-d, 1.3)); letter-spacing: var(--bkbg-gl-lh-letter-spacing-t, var(--bkbg-gl-lh-letter-spacing-d, normal)); word-spacing: var(--bkbg-gl-lh-word-spacing-t, var(--bkbg-gl-lh-word-spacing-d, normal)); } } @media (max-width: 767px) { .wp-block-blockenberg-glossary .bkbg-gl-title { font-size: var(--bkbg-gl-tt-font-size-m, var(--bkbg-gl-tt-font-size-t, var(--bkbg-gl-tt-font-size-d, 32px))); line-height: var(--bkbg-gl-tt-line-height-m, var(--bkbg-gl-tt-line-height-t, var(--bkbg-gl-tt-line-height-d, 1.2))); letter-spacing: var(--bkbg-gl-tt-letter-spacing-m, var(--bkbg-gl-tt-letter-spacing-t, var(--bkbg-gl-tt-letter-spacing-d, normal))); word-spacing: var(--bkbg-gl-tt-word-spacing-m, var(--bkbg-gl-tt-word-spacing-t, var(--bkbg-gl-tt-word-spacing-d, normal))); } .bkbg-gl-term { font-size: var(--bkbg-gl-tm-font-size-m, var(--bkbg-gl-tm-font-size-t, var(--bkbg-gl-tm-font-size-d, 16px))); line-height: var(--bkbg-gl-tm-line-height-m, var(--bkbg-gl-tm-line-height-t, var(--bkbg-gl-tm-line-height-d, 1.4))); letter-spacing: var(--bkbg-gl-tm-letter-spacing-m, var(--bkbg-gl-tm-letter-spacing-t, var(--bkbg-gl-tm-letter-spacing-d, normal))); word-spacing: var(--bkbg-gl-tm-word-spacing-m, var(--bkbg-gl-tm-word-spacing-t, var(--bkbg-gl-tm-word-spacing-d, normal))); } .bkbg-gl-def { font-size: var(--bkbg-gl-df-font-size-m, var(--bkbg-gl-df-font-size-t, var(--bkbg-gl-df-font-size-d, 14px))); line-height: var(--bkbg-gl-df-line-height-m, var(--bkbg-gl-df-line-height-t, var(--bkbg-gl-df-line-height-d, 1.65))); letter-spacing: var(--bkbg-gl-df-letter-spacing-m, var(--bkbg-gl-df-letter-spacing-t, var(--bkbg-gl-df-letter-spacing-d, normal))); word-spacing: var(--bkbg-gl-df-word-spacing-m, var(--bkbg-gl-df-word-spacing-t, var(--bkbg-gl-df-word-spacing-d, normal))); } .bkbg-gl-letter-head { font-size: var(--bkbg-gl-lh-font-size-m, var(--bkbg-gl-lh-font-size-t, var(--bkbg-gl-lh-font-size-d, 18px))); line-height: var(--bkbg-gl-lh-line-height-m, var(--bkbg-gl-lh-line-height-t, var(--bkbg-gl-lh-line-height-d, 1.3))); letter-spacing: var(--bkbg-gl-lh-letter-spacing-m, var(--bkbg-gl-lh-letter-spacing-t, var(--bkbg-gl-lh-letter-spacing-d, normal))); word-spacing: var(--bkbg-gl-lh-word-spacing-m, var(--bkbg-gl-lh-word-spacing-t, var(--bkbg-gl-lh-word-spacing-d, normal))); } }