/* =========================================================
   Kotobakun — Additional CSS (clean + working) — UPDATED
   Restores:
   - Keigo overview table styles (.kb-keigo-*)
   - Table hover tone (kb-grey back to original feel)
   Keeps:
   - Videos full-bleed band (image-only) + subtle hover
   - NEWS cards styling
   ========================================================= */
/* -------------------------
   0) Global tokens
   ------------------------- */
:root {
/* Restored to the “original” hover tone used in your tables */
}

/* -------------------------
   1) Course tiles (kb-course-*)
   ------------------------- */
.kb-course-grid {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 28px;
	max-width: var(--kb-max);
	margin: 0 auto;
	padding: 10px 0;
}

@media (max-width:1000px) {
	.kb-course-grid {
		grid-template-columns: repeat(2,minmax(0,1fr));
	}
}

@media (max-width:650px) {
	.kb-course-grid {
		grid-template-columns: 1fr;
	}
}

.kb-course-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--kb-border);
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	text-decoration: none !important;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	min-height: 420px;
}

.kb-course-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(0,0,0,.10);
	border-color: rgba(0,0,0,.18);
}

.kb-course-media {
	padding: 18px 18px 0;
}

.kb-course-thumb {
	width: 100%;
	aspect-ratio: 16/10;
	object-fit: cover;
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.08);
	background: #f3f3f3;
}

.kb-course-body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.kb-course-meta {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	font-size: 12px;
	opacity: .78;
}

.kb-pill {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.10);
	background: rgba(0,0,0,.03);
	font-size: 12px;
	line-height: 1;
}

/* -------------------------
   2) Landing layout (kb-landing / kb-card)
   ------------------------- */
.kb-landing {
	background: var(--kb-bg);
	padding: clamp(28px,4vw,56px) 0;
}

.kb-container {
	max-width: var(--kb-max);
	margin: 0 auto;
	padding: 0 clamp(16px,3vw,24px);
	color: var(--kb-text);
}

.kb-hero {
	padding: clamp(18px,3vw,28px);
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius-lg);
	box-shadow: var(--kb-shadow-sm);
	background: linear-gradient(180deg, rgba(18,24,38,0.02), rgba(18,24,38,0.00));
}

.kb-hero__title {
	margin: 0 0 var(--kb-space-2);
	line-height: 1.08;
	letter-spacing: -.02em;
	font-size: clamp(34px,4.2vw,52px);
}

.kb-hero__subtitle {
	margin: 0 0 var(--kb-space-4);
	color: var(--kb-muted);
	font-size: clamp(16px,1.9vw,19px);
	line-height: 1.6;
	max-width: 58ch;
}

.kb-hero__cta {
	display: flex;
	flex-direction: column;
	gap: var(--kb-space-2);
	align-items: flex-start;
}

.kb-hero__note {
	margin: 0;
	color: var(--kb-muted);
	font-size: 14px;
}

/* Buttons */
.kb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-weight: 700;
	text-decoration: none !important;
	border-radius: 999px;
	padding: 12px 18px;
	border: 1px solid transparent;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
	cursor: pointer;
	line-height: 1;
	white-space: nowrap;
}

.kb-btn--primary {
	background: var(--kb-darkblue);
	color: #ffffff;
	box-shadow: 0 10px 22px rgba(18,24,38,0.18);
}

.kb-btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(18,24,38,0.22);
}

.kb-btn--ghost {
	background: #ffffff;
	border-color: var(--kb-border);
	color: var(--kb-text);
}

.kb-btn--ghost:hover {
	transform: translateY(-2px);
	box-shadow: var(--kb-shadow-sm);
}

/* Focus */
.kb-btn:focus,
.kb-btn:focus-visible,
.kb-card__mediaLink:focus,
.kb-card__mediaLink:focus-visible,
.kb-card__link:focus,
.kb-card__link:focus-visible {
	outline: none;
	box-shadow: var(--kb-focus);
}

/* Grid + cards */
.kb-tiles {
	margin-top: var(--kb-space-5);
}

.kb-grid {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: var(--kb-space-4);
}

.kb-card {
	background: var(--kb-surface);
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius-lg);
	overflow: hidden;
	box-shadow: var(--kb-shadow-sm);
	transition: transform 180ms ease, box-shadow 180ms ease;
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.kb-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--kb-shadow-md);
}

.kb-card__mediaLink {
	display: block;
	text-decoration: none !important;
}

.kb-card__img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	display: block;
}

.kb-card__body {
	padding: var(--kb-space-4);
	display: flex;
	flex-direction: column;
	gap: var(--kb-space-2);
	height: 100%;
}

.kb-card__title {
	margin: 0;
	font-size: 20px;
	letter-spacing: -.01em;
}

.kb-card__text {
	margin: 0;
	color: var(--kb-muted);
	line-height: 1.65;
	font-size: 15px;
}

.kb-card__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--kb-link);
	text-decoration: none !important;
	font-weight: 700;
}

.kb-card__link:hover {
	text-decoration: underline !important;
}

/* Signup card */
.kb-signup {
	margin-top: var(--kb-space-6);
}

.kb-signupCard {
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius-lg);
	background: #ffffff;
	box-shadow: var(--kb-shadow-sm);
	padding: clamp(18px,3vw,26px);
	display: grid;
	grid-template-columns: 1.2fr .8fr;
	gap: var(--kb-space-4);
	align-items: center;
}

.kb-signupCard__title {
	margin: 0 0 var(--kb-space-1);
	font-size: 20px;
}

.kb-signupCard__subtitle {
	margin: 0;
	color: var(--kb-muted);
	line-height: 1.6;
}

.kb-signupCard__fineprint {
	margin: var(--kb-space-2) 0 0;
	color: var(--kb-muted);
	font-size: 13px;
}

.kb-signupCard__cta {
	display: flex;
	justify-content: flex-end;
}

.kb-subscribeBlock {
	margin-top: var(--kb-space-4);
	padding: clamp(16px,2.6vw,22px);
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-radius-lg);
	box-shadow: var(--kb-shadow-sm);
	background: #ffffff;
}

@media (max-width:900px) {
	.kb-grid {
		grid-template-columns: 1fr;
	}
	
	.kb-card__img {
		height: 200px;
	}
	
	.kb-signupCard {
		grid-template-columns: 1fr;
	}
	
	.kb-signupCard__cta {
		justify-content: flex-start;
	}
}

/* -------------------------
   3) Cover hero badge (kb-heroCover / kb-heroBadge)
   ------------------------- */
.kb-heroCover {
	position: relative;
	overflow: hidden;
}

.kb-heroCover.wp-block-cover {
	min-height: clamp(380px,62vh,640px);
}

.kb-heroCover .wp-block-cover__inner-container {
	max-width: 1000px;
	margin: 0 auto;
	padding: clamp(18px,3vw,28px);
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	height: 100%;
}

.kb-heroBadge {
	background: rgba(143,170,192,0.92);
	color: #fff;
	padding: clamp(12px,1.6vw,18px) clamp(14px,2vw,22px);
	border-radius: 12px;
	box-shadow: 0 14px 32px rgba(0,0,0,0.18);
	max-width: min(720px,92vw);
}

.kb-heroBadge h1 {
	margin: 0;
	color: #fff;
	line-height: 1.05;
	letter-spacing: -.02em;
	font-size: clamp(26px,3.2vw,44px);
	max-width: 26ch;
}

.kb-heroBadge p {
	margin: 10px 0 0;
	color: rgba(255,255,255,0.92);
	font-size: clamp(14px,1.4vw,16px);
	line-height: 1.5;
}

.kb-heroBadge .wp-block-buttons {
	margin-top: 14px;
}

.kb-heroBadge .wp-block-button__link {
	display: inline-block;
	background: rgba(255,255,255,0.92);
	color: #1b2a3a;
	border-radius: 999px;
	font-weight: 800;
	padding: 10px 16px;
	text-decoration: none !important;
	border: 1px solid rgba(255,255,255,0.35);
	box-shadow: 0 10px 22px rgba(0,0,0,0.10);
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.kb-heroBadge .wp-block-button__link:hover {
	background: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(0,0,0,0.14);
}

.kb-heroBadge .wp-block-button__link:focus,
.kb-heroBadge .wp-block-button__link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(255,255,255,0.35), 0 14px 28px rgba(0,0,0,0.14);
}

@media (max-width:700px) {
	.kb-heroCover .wp-block-cover__inner-container {
		padding: 16px;
	}
}

/* -------------------------
   4) Header + navigation
   ------------------------- */
header .wp-block-separator {
	border: none;
	height: 3px;
	background: #d0d0d0;
	margin: 0 !important;
}

.header-break {
	padding: 8px 0;
	background: #e6e6e6;
}

.header-break .wp-block-separator {
	border: none;
	height: 3px;
	background: #cfcfcf;
	margin: 0;
}

header nav.wp-block-navigation a.wp-block-navigation-item__content {
	display: inline-block;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none !important;
	transition: background-color 120ms ease, color 120ms ease;
}

header nav.wp-block-navigation a.wp-block-navigation-item__content:hover {
	background-color: #e6e6e6 !important;
}

header nav.wp-block-navigation a.wp-block-navigation-item__content:focus,
header nav.wp-block-navigation a.wp-block-navigation-item__content:focus-visible,
header nav.wp-block-navigation a.wp-block-navigation-item__content:active {
	background-color: #e6e6e6 !important;
	outline: none;
}

header nav.wp-block-navigation .wp-block-navigation-item.current-menu-item > a.wp-block-navigation-item__content,
header nav.wp-block-navigation .wp-block-navigation-item.current_page_item > a.wp-block-navigation-item__content,
header nav.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > a.wp-block-navigation-item__content {
	background-color: #d9d9d9 !important;
	font-weight: 600;
}

/* -------------------------
   5) Home page tweaks
   ------------------------- */
.home .wp-block-post-title,
.home h1.wp-block-post-title {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.home .wp-site-blocks > header {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.home .wp-site-blocks > header + main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

.home .wp-site-blocks > header + main > :first-child {
	margin-top: 0 !important;
}

/* -------------------------
   6) Resources hub tiles (kb-hubs / kb-hub)
   ------------------------- */
.kb-hubs {
	padding: clamp(28px,4vw,56px) 0;
}

.kb-hubs__inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 clamp(16px,3vw,24px);
}

.kb-hubs__header {
	margin-bottom: clamp(18px,2.6vw,26px);
}

.kb-hubs__title {
	margin: 0 0 10px;
	line-height: 1.12;
	letter-spacing: -.01em;
	font-size: clamp(26px,3.2vw,34px);
}

.kb-hubs__lede {
	margin: 0;
	max-width: 70ch;
	line-height: 1.65;
	opacity: .85;
	font-size: 16px;
}

.kb-hubs__grid {
	display: grid !important;
	grid-template-columns: repeat(2,minmax(0,1fr)) !important;
	gap: 18px !important;
}

@media (max-width:820px) {
	.kb-hubs__grid {
		grid-template-columns: 1fr !important;
	}
}

.kb-hubs a.kb-hub {
	display: block !important;
	background: #fff !important;
	border: 1px solid rgba(0,0,0,.12) !important;
	border-radius: 14px !important;
	padding: 18px 18px 16px !important;
	text-decoration: none !important;
	color: inherit !important;
	box-shadow: var(--kb-shadow-sm) !important;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
	min-height: 130px;
}

.kb-hubs a.kb-hub:hover {
	transform: translateY(-3px);
	border-color: rgba(0,0,0,.18) !important;
	box-shadow: var(--kb-shadow-md) !important;
}

.kb-hub__title {
	margin: 0 0 8px;
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.kb-hub__text {
	margin: 0 0 10px;
	line-height: 1.6;
	opacity: .82;
	font-size: 15px;
}

.kb-hub__cta {
	display: inline-flex;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	opacity: .92;
}

.kb-hubs a.kb-hub:focus,
.kb-hubs a.kb-hub:focus-visible {
	outline: none;
	box-shadow: var(--kb-focus) !important;
}

/* -------------------------
   7) Cover tiles hover (kb-coverTile)
   ------------------------- */
.wp-block-cover.kb-coverTile,
.kb-coverTile .wp-block-cover {
	border: 1px solid rgba(0,0,0,.12) !important;
	border-radius: 14px !important;
	overflow: hidden !important;
	box-shadow: var(--kb-shadow-sm) !important;
	transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
}

.wp-block-cover.kb-coverTile:hover,
.kb-coverTile .wp-block-cover:hover {
	transform: translateY(-3px) !important;
	border-color: rgba(0,0,0,.18) !important;
	box-shadow: var(--kb-shadow-md) !important;
	cursor: pointer;
}

.wp-block-cover.kb-coverTile:focus-within,
.kb-coverTile .wp-block-cover:focus-within {
	outline: none;
	box-shadow: var(--kb-focus) !important;
}

/* =========================================================
   8) Glossary A–Z (robust rendering)
   ========================================================= */
.kb-glossary {
	padding: clamp(28px,4vw,56px) 0;
}

.kb-glossary__inner {
	max-width: var(--kb-max);
	margin: 0 auto;
	padding: 0 clamp(16px,3vw,24px);
}

#kb-glossary-title,
[id^="kb-g-"] {
	scroll-margin-top: 120px;
}

a[href^="#kb-g-"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,.12);
	background: rgba(0,0,0,.02);
	text-decoration: none !important;
	color: inherit;
	font-weight: 700;
	transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
	margin: 4px 6px 4px 0;
}

a[href^="#kb-g-"]:hover {
	transform: translateY(-1px);
	background: rgba(0,0,0,.05);
	border-color: rgba(0,0,0,.18);
}

a[href^="#kb-g-"]:focus,
a[href^="#kb-g-"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(0,0,0,0.12);
}

.kb-glossaryNav {
	position: sticky;
	top: 88px;
	z-index: 20;
	margin: 18px 0;
	padding: 10px;
	background: rgba(255,255,255,0.92);
	border: 1px solid rgba(0,0,0,.10);
	border-radius: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

@media (max-width:820px) {
	.kb-glossaryNav {
		flex-wrap: nowrap;
		overflow-x: auto;
	}
}

[id^="kb-g-"] {
	padding: 18px 0 6px;
	border-top: 1px solid rgba(0,0,0,.10);
}

a[href="#kb-glossary-title"] {
	font-size: 14px;
	font-weight: 700;
	text-decoration: none !important;
	opacity: .85;
}

a[href="#kb-glossary-title"]:hover {
	text-decoration: underline !important;
}

[id^="kb-g-"]:target {
	background: rgba(0,0,0,.02);
	border-radius: 14px;
	padding-left: 14px;
	padding-right: 14px;
}

/* =========================================================
   9) Tables (RESTORED)
   ========================================================= */
/* (A) Respect table */
.kb-respect-table {
	max-width: 900px;
	margin: 0 auto 2rem;
	padding: 2rem 1.5rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	border-left: 8px solid var(--kb-darkblue);
}

.kb-respect-table__title {
	margin: 0 0 1.5rem;
	font-size: 2rem;
	font-weight: 600;
}

.kb-respect-table__table {
	width: 100%;
	border-collapse: collapse;
	border: 2px solid var(--kb-darkblue);
	font-size: .95rem;
}

.kb-respect-table__head {
	background: #666666;
	color: #ffffff;
	font-weight: 600;
	text-align: center;
	padding: .75rem;
	border-right: 2px solid #ffffff;
}

.kb-respect-table__head--blank {
	text-align: left;
	border-right: 1px solid var(--kb-darkblue);
}

.kb-respect-table__pattern,
.kb-respect-table__cell {
	padding: .6rem .75rem;
	border-top: 1px solid var(--kb-darkblue);
	border-right: 1px solid var(--kb-darkblue);
}

.kb-respect-table__cell:last-child {
	border-right: none;
}

.kb-respect-table__pattern {
	width: 20%;
	white-space: nowrap;
}

.kb-respect-table__pattern--empty {
	border-right: 1px solid var(--kb-darkblue);
}

.kb-respect-table__table tbody tr:hover td {
	background-color: var(--kb-grey);
}

/* (B) Keigo overview tables (your thick-frame style) */
.kb-keigo-wrap {
	max-width: 980px;
	margin: 0 auto;
	padding: 1.75rem 1.25rem;
}

.kb-keigo-tableframe {
	position: relative;
	margin: 0 0 2.25rem;
	padding-left: 14px;
}

.kb-keigo-tableframe::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 10px;
	background: #111;
	border-radius: 2px;
}

.kb-keigo-title {
	margin: 0 0 .85rem;
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.2vw, 2.15rem);
	line-height: 1.2;
}

.kb-keigo-table {
	width: 100%;
	border-collapse: collapse;
	border: 3px solid #111;
	background: #fff;
}

.kb-keigo-table thead th {
	background: #8f8f8f;
	color: #fff;
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	padding: 14px;
	border: 2px solid #111;
	text-align: center;
	letter-spacing: .2px;
}

.kb-keigo-table td {
	border: 2px solid #111;
	padding: 14px;
	vertical-align: middle;
}

.kb-keigo-table tbody tr:hover > td {
	background: var(--kb-grey);
}

.kb-keigo-cat {
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-weight: 700;
	text-align: left;
}

.kb-en {
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-weight: 600;
	text-align: center;
}

.kb-jp {
	font-family: "Noto Serif JP", "Noto Sans JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.25;
}

.kb-hira {
	margin-top: .25rem;
	font-family: "Noto Serif JP", "Noto Sans JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-weight: 500;
	font-size: .95rem;
	opacity: .9;
}

@media (max-width: 720px) {
	.kb-keigo-wrap {
		padding: 1.25rem .9rem;
	}
	
	.kb-keigo-table thead th {
		font-size: .95rem;
		padding: 12px 10px;
	}
	
	.kb-keigo-table td {
		padding: 12px 10px;
	}
}

/* -------------------------
   10) Contact page
   ------------------------- */
body.page-id-5758,
body.page-slug-contact {
}

body.page-id-5758 .wp-block-post-title,
body.page-id-5758 h1.wp-block-post-title,
body.page-slug-contact .wp-block-post-title,
body.page-slug-contact h1.wp-block-post-title {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

body.page-id-5758 .wp-site-blocks > header,
body.page-slug-contact .wp-site-blocks > header {
	margin-block-end: 0 !important;
	padding-bottom: 0 !important;
}

body.page-id-5758 .wp-site-blocks > header + main,
body.page-slug-contact .wp-site-blocks > header + main {
	margin-block-start: 0 !important;
	padding-top: 0 !important;
}

body.page-id-5758 .wp-site-blocks > main + footer,
body.page-slug-contact .wp-site-blocks > main + footer {
	margin-block-start: 32px !important;
}

body.page-id-5758 .wp-block-post-content > :first-child,
body.page-slug-contact .wp-block-post-content > :first-child {
	margin-top: 0 !important;
	margin-block-start: 0 !important;
}

.kb-contact-hero.wp-block-cover {
	min-height: 260px;
}

.kb-contact-hero .wp-block-cover__inner-container {
	height: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: clamp(18px,4vw,42px);
}

.kb-contact-hero .wp-block-cover__background {
	background: #000 !important;
	opacity: .18 !important;
}

.kb-contact-hero .kb-hero-box {
	background: rgba(120,145,170,0.78);
	padding: 18px 20px;
	border-radius: 10px;
	max-width: 560px;
	box-shadow: 0 14px 32px rgba(0,0,0,0.14);
}

.kb-contact-hero .kb-hero-box,
.kb-contact-hero .kb-hero-box * {
	color: #fff !important;
}

.kb-contact-hero .kb-hero-box h1,
.kb-contact-hero .kb-hero-box h2,
.kb-contact-hero .kb-hero-box h3 {
	margin: 0 0 10px;
	line-height: 1.1;
}

.kb-contact {
	max-width: 900px;
	margin: 0 auto;
	padding: 28px 18px 60px;
	font-size: 18px;
	line-height: 1.7;
}

.kb-contact form,
.kb-contact .wp-block-jetpack-contact-form,
.kb-contact .contact-form {
	margin-top: 22px;
}

.kb-contact input[type="text"],
.kb-contact input[type="email"],
.kb-contact input[type="url"],
.kb-contact select,
.kb-contact textarea {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid #d6d6d6;
	border-radius: 6px;
	padding: 12px;
	font-size: 16px;
	line-height: 1.4;
	background: #ffffff;
}

.kb-contact textarea {
	min-height: 200px;
	resize: vertical;
}

.kb-contact input:focus,
.kb-contact select:focus,
.kb-contact textarea:focus {
	outline: none;
	border-color: var(--kb-darkblue);
	box-shadow: 0 0 0 3px rgba(44,56,67,0.18);
}

.kb-contact button,
.kb-contact input[type="submit"],
.kb-contact .wp-block-button__link {
	appearance: none;
	border: 2px solid #1b1b1b;
	background: transparent;
	color: #1b1b1b;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 10px 18px;
	border-radius: 6px;
	cursor: pointer;
}

.kb-contact button:hover,
.kb-contact input[type="submit"]:hover,
.kb-contact .wp-block-button__link:hover {
	background: #1b1b1b;
	color: #ffffff;
}

.kb-contact label {
	font-weight: 600;
}

/* =========================================================
   11) Reading popup (kb-yomi / kb-yomi-pop)
   ========================================================= */
.kb-yomi {
	position: relative !important;
	display: inline-flex !important;
	align-items: baseline;
	cursor: help;
	border-bottom: 1px dotted rgba(0,0,0,.45);
	padding-bottom: 1px;
}

.kb-yomi-pop {
	position: absolute !important;
	left: 50% !important;
	bottom: 145% !important;
	transform: translateX(-50%) translateY(6px);
	background: #ffffff;
	border: 1px solid rgba(0,0,0,.22);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(0,0,0,.14);
	padding: .38rem .6rem;
	white-space: nowrap;
	font-family: "Noto Serif JP", "Noto Sans JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: .95rem;
	line-height: 1.1;
	opacity: 0;
	pointer-events: none;
	z-index: 99999;
	transition: opacity 140ms ease, transform 140ms ease;
}

.kb-yomi-pop::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%) rotate(45deg);
	width: 10px;
	height: 10px;
	background: #ffffff;
	border-right: 1px solid rgba(0,0,0,.22);
	border-bottom: 1px solid rgba(0,0,0,.22);
}

.kb-yomi:hover .kb-yomi-pop,
.kb-yomi:focus-within .kb-yomi-pop {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =========================================================
   12) References page (kb-refpage)
   ========================================================= */
.kb-refpage {
	max-width: 980px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: clamp(20px,3vw,34px) clamp(14px,2.6vw,22px) !important;
}

.kb-refpage__title {
	margin: 0 0 .5rem !important;
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
	font-weight: 900 !important;
	letter-spacing: -.02em !important;
	line-height: 1.1 !important;
	font-size: clamp(1.8rem,2.6vw,2.4rem) !important;
}

.kb-refpage__lede {
	margin: 0 0 1.4rem !important;
	color: rgba(17,24,39,.74) !important;
	line-height: 1.65 !important;
	font-size: 1rem !important;
}

.kb-refsec {
	margin: 1.6rem 0 2.1rem !important;
	border-left: 10px solid var(--kb-darkblue) !important;
	padding-left: 14px !important;
}

.kb-refsec__title {
	margin: 0 0 .85rem !important;
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
	font-weight: 900 !important;
	font-size: clamp(1.35rem,2vw,1.75rem) !important;
	line-height: 1.2 !important;
	position: relative !important;
}

.kb-refsec__title::after {
	content: "";
	display: block;
	width: min(220px,55%);
	height: 4px;
	background: var(--kb-yellow);
	margin-top: .45rem;
	border-radius: 999px;
}

.kb-refpage .kb-reftableWrap {
	overflow-x: auto !important;
}

.kb-refpage table.kb-reftable {
	width: 100% !important;
	border-collapse: collapse !important;
	border: 3px solid var(--kb-darkblue) !important;
	background: #fff !important;
	min-width: 740px;
	table-layout: auto !important;
}

.kb-refpage table.kb-reftable thead th {
	background: var(--kb-darkblue) !important;
	color: #fff !important;
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
	font-weight: 900 !important;
	font-size: .95rem !important;
	padding: 14px !important;
	border: 2px solid var(--kb-darkblue) !important;
	text-align: center !important;
	letter-spacing: .02em !important;
}

.kb-refpage table.kb-reftable td {
	border: 2px solid var(--kb-darkblue) !important;
	padding: 14px !important;
	vertical-align: top !important;
	line-height: 1.45 !important;
	background: transparent !important;
}

.kb-refpage table.kb-reftable tbody tr:hover > td {
	background: var(--kb-grey) !important;
}

.kb-refpage .kb-en {
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
	font-weight: 600 !important;
	text-align: left !important;
}

.kb-refpage .kb-jp {
	font-family: "Noto Serif JP", "Noto Sans JP", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
	font-weight: 600 !important;
	text-align: left !important;
}

.kb-refpage .kb-refLink {
	color: var(--kb-red) !important;
	font-weight: 900 !important;
	text-decoration: none !important;
	border-bottom: 2px solid rgba(190,55,57,.25);
}

.kb-refpage .kb-refLink:hover {
	border-bottom-color: var(--kb-red);
}

.kb-refpage .kb-refLink:focus,
.kb-refpage .kb-refLink:focus-visible {
	outline: none;
	box-shadow: var(--kb-focus);
	border-radius: 8px;
}

.kb-refpage .kb-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .32rem .6rem;
	border-radius: 999px;
	border: 2px solid var(--kb-darkblue);
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	font-weight: 900;
	font-size: .78rem;
	letter-spacing: .02em;
	line-height: 1;
	white-space: nowrap;
}

.kb-refpage .kb-tag--article {
	background: var(--kb-lightblue);
	color: #0b1a22;
}

.kb-refpage .kb-tag--book {
	background: var(--kb-purple);
	color: #1c1220;
}

.kb-refpage .kb-tag--site {
	background: var(--kb-pink);
	color: #2a0f08;
}

@media (max-width:760px) {
	.kb-refsec {
		padding-left: 12px !important;
	}
	
	.kb-refpage table.kb-reftable {
		min-width: 680px;
	}
}

/* -------------------------
   Buy button styling
   ------------------------- */
.kb-bmac {
	max-width: var(--kb-max,1040px);
	margin: 0 auto;
	padding: 12px 0;
}

.kb-bmac-card {
	background: var(--kb-surface,#fff);
	border: 1px solid var(--kb-border,rgba(0,0,0,.12));
	border-radius: var(--kb-radius-lg,18px);
	box-shadow: var(--kb-shadow-sm,0 10px 22px rgba(18,24,38,0.08));
	padding: 22px;
}

.kb-bmc-wrap {
	display: grid;
	gap: 10px;
	justify-items: start;
}

.kb-bmc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 999px;
	background: #FBBE01;
	color: #000;
	font-weight: 800;
	text-decoration: none;
	border: 2px solid #000;
	box-shadow: 0 8px 18px rgba(18,24,38,.12);
	transition: transform .12s ease, box-shadow .12s ease;
}

.kb-bmc-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 26px rgba(18,24,38,.18);
}

.kb-bmc-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(251,190,1,.35), 0 12px 26px rgba(18,24,38,.18);
}

/* =========================================================
   Header row classes
   ========================================================= */
.kb-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	padding: 10px 18px;
	min-height: 56px;
	border-bottom: 1px solid rgba(0,0,0,.10);
	background: #fff;
	gap: 12px;
}

.kb-header-row .wp-block-site-logo {
	margin-left: 4px;
}

.wp-block-site-logo {
	text-align: center;
}

.wp-block-site-logo a {
	display: inline-block;
}

.kb-header-nav {
	display: flex;
	justify-content: center;
	min-width: 0;
	flex: 1 1 auto;
}

.kb-header-nav .wp-block-navigation__container {
	display: flex;
	flex-wrap: nowrap !important;
	gap: 12px;
	white-space: nowrap;
	min-width: 0;
	overflow-x: auto;
}

/* === Header dropdown fix (desktop only) === */
@media (min-width:782px) {
	.kb-header-row {
		position: relative;
		z-index: 50;
	}
	
	/* ensure dropdown sits above hero */
	.kb-header-nav .wp-block-navigation__container {
		overflow: visible;
	}
	
	/* stop clipping submenu */
	.kb-header-nav .wp-block-navigation__submenu-icon {
		display: none;
	}
	
	/* hide triangle icon (desktop) */
	.kb-header-nav .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
								  .kb-header-nav .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
	/* open on hover/focus */
	}
}

.kb-header-nav .wp-block-navigation__container::-webkit-scrollbar {
	display: none;
}

.kb-header-nav a.wp-block-navigation-item__content {
	padding: 6px 8px;
	border-radius: 8px;
}

.kb-header-search {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
	white-space: nowrap;
}

.kb-header-search .wp-block-search__label {
	display: none !important;
}

.kb-header-search .wp-block-search__input {
	display: none !important;
}

.kb-header-search,
.kb-header-search .wp-block-search,
.kb-header-search .wp-block-search__inside-wrapper {
	height: 100%;
	align-items: stretch;
}

.kb-header-search .wp-block-search__button {
	height: 100%;
	min-height: 0;
	width: 46px;
	padding: 0;
	border-radius: 0;
	background: #e6e6e6 !important;
/* was transparent */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	border-top: 0;
	border-bottom: 0;
	border-right: 0;
	border-left: 1px solid rgba(0,0,0,.10);
}

.kb-header-search .wp-block-search__button:hover {
	background: #d9d9d9 !important;
/* slightly darker on hover */
	border-left-color: rgba(0,0,0,.16);
}

.kb-header-search .wp-block-search__button:hover {
	background: rgba(0,0,0,.04) !important;
	border-left-color: rgba(0,0,0,.16);
}

.kb-header-search .wp-block-search__button svg {
	width: 17px;
	height: 17px;
}

.kb-header-search .wp-block-search__button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px rgba(251,190,1,.25);
}

/* =========================================================
   Footer wrapper (optional class on footer outer group)
   ========================================================= */
.kb-footer-wrap {
	max-width: none !important;
	width: 100% !important;
	padding-left: 24px !important;
	padding-right: 24px !important;
}

.kb-footer-wrap .wp-block-columns {
	justify-content: space-between;
}

.kb-footer-wrap .wp-block-image {
	margin-left: 0 !important;
}

/* =========================================================
   NEWS cards (clickable) + rectangular thumbnail
   Requires: wrap the post item content in a Group with class "kb-post-card"
   ========================================================= */
.kb-post-card {
	position: relative;
	padding: 16px 18px;
	border-radius: 16px;
	transition: background-color .15s ease, transform .15s ease;
}

.kb-post-card:hover {
	background: rgba(17,24,39,.06);
	transform: translateY(-1px);
}

.kb-post-card:focus-within {
	outline: 3px solid rgba(251,190,1,.45);
	outline-offset: 3px;
}

.kb-post-card .wp-block-post-title a {
	position: static;
}

.kb-post-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	z-index: 1;
}

.kb-post-card .wp-block-post-featured-image,
.kb-post-card .wp-block-post-title,
.kb-post-card .wp-block-post-excerpt,
.kb-post-card .wp-block-post-date {
	position: relative;
	z-index: 2;
}

.kb-post-card .wp-block-post-featured-image {
	margin: 0;
	width: 140px;
	flex: 0 0 140px;
}

.kb-post-card .wp-block-post-featured-image img {
	width: 140px;
	height: 84px;
	object-fit: contain;
	border-radius: 12px;
	background: rgba(17,24,39,.04);
}

.kb-post-card .wp-block-columns {
	flex-wrap: nowrap;
	align-items: center;
	gap: 16px;
	margin: 0;
}

@media (max-width: 520px) {
	.kb-post-card .wp-block-columns {
		flex-wrap: wrap;
		align-items: flex-start;
	}
}

/* =========================================================
   VIDEOS — full-bleed solid band (image-only) + subtle hover
   ========================================================= */
/* Make the videos strip full width of the viewport */
.kb-videos {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
}

/* Keep the heading content aligned while the strip goes full-bleed */
.kb-videos-head {
	max-width: var(--kb-max);
	margin: 0 auto 1.25rem;
	padding: 0 1.25rem;
}

/* Full-bleed grid band (desktop 4-up) */
.kb-videos .kb-video-strip {
	width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: 0 !important;
	overflow: hidden !important;
	border-top: 3px solid rgba(44,56,67,.18) !important;
	border-bottom: 3px solid rgba(44,56,67,.18) !important;
}

/* Mobile: 1 tile per row */
@media (max-width: 640px) {
	.kb-videos .kb-video-strip {
		grid-template-columns: 1fr !important;
	}
}

/* Tiles: no border, no padding, no rounding */
.kb-videos .kb-video-strip > a.kb-video-tile {
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	overflow: hidden !important;
}

/* Image only */
.kb-videos .kb-video-tile img {
	width: 100% !important;
	height: auto !important;
	display: block !important;
	object-fit: contain !important;
	border-radius: 0 !important;
	background: #fff !important;
}

/* Hide the text under each tile */
.kb-videos .kb-video-tag,
.kb-videos .kb-video-title {
	display: none !important;
}

/* Remove any whitespace that might come from line-height */
.kb-videos .kb-video-strip,
.kb-videos .kb-video-strip * {
	line-height: 0;
}

/* Subtle hover */
.kb-videos .kb-video-tile img {
	transition: transform 180ms ease, filter 180ms ease;
}

.kb-videos .kb-video-tile:hover img {
	filter: brightness(.92) contrast(1.03);
	transform: scale(1.01);
}

/* HERO bubble: add breathing room under the button (without moving the bubble) */
.home .kb-heroBadge {
	padding-bottom: clamp(18px, 2.2vw, 34px) !important;
}

/* Optional: slightly more separation between text and button */
.home .kb-heroBadge .wp-block-buttons {
	margin-top: 16px !important;
}

.kb-platform-buttons {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 18px 0;
}

/* Pill button */
.kb-platform-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	border-radius: 10px;
	text-decoration: none;
	font-weight: 700;
	line-height: 1;
	border: 1px solid rgba(0,0,0,.10);
	transition: transform .08s ease, box-shadow .08s ease, opacity .08s ease;
}

/* Spotify look */
.kb-spotify-btn {
	background: #111;
	border-color: rgba(255,255,255,.10);
	box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

.kb-spotify-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(0,0,0,.14);
}

.kb-spotify-logo {
	height: 24px;
/* keeps it crisp + within Spotify’s min-size guidance */
	width: auto;
	display: block;
}

.kb-platform-text {
	color: #1ED760;
/* Spotify green feel */
	font-size: 15px;
}

/* ===============================
   Kotobakun — Episode Catalogue (Coverflow grid + jump-to-player)
   =============================== */
.kb-epCat {
	max-width: var(--kb-max, 1040px);
	margin: 0 auto;
	padding: 14px 16px 28px;
	color: inherit;
}

/* Grid: NOT a slider */
.kb-epCat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	perspective: 1100px;
}

@media (max-width: 820px) {
	.kb-epCat-grid {
		grid-template-columns: 1fr;
	}
}

/* Card */
.kb-epCard {
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 10px 22px rgba(0,0,0,.08);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.kb-epCard:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(0,0,0,.12);
	border-color: rgba(0,0,0,.18);
}

.kb-epCard-top {
	display: block;
	text-decoration: none !important;
	color: inherit;
}

/* “Cover” area (placeholder art) */
.kb-epArt {
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 16px;
	position: relative;
/* nice “cover art” feel without needing images */
	background: radial-gradient(900px 240px at 20% 10%, rgba(255,255,255,.28), rgba(255,255,255,0)), linear-gradient(135deg, rgba(44,56,67,.92), rgba(44,56,67,.72)), linear-gradient(0deg, rgba(251,190,1,.22), rgba(251,190,1,0));
}

.kb-epArtImg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* =========================================================
   Kotobakun — Stacked page nav (FORCE Montserrat + NO bubbles)
   ========================================================= */
/* centers the whole component */
.kb-stackNav {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

/* Force font + kill theme “pill/bubble” styles */
.kb-stackNav,
.kb-stackNav * {
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

/* Top bar (NEXT) */
.kb-stackNav__top {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
/* center label */
	gap: 18px !important;
	min-width: min(384px, 73.6vw) !important;
/* 480*0.8, 92vw*0.8 */
	height: 44px !important;
/* shorter */
	padding: 10px 18px !important;
/* shorter */
	background: #2C3843 !important;
	color: #fff !important;
	border: 0 !important;
	outline: 0 !important;
	position: relative !important;
/* for absolute arrow + z-index */
	z-index: 3 !important;
/* NEXT above */
	margin-left: 56px !important;
/* stick out to the RIGHT */
}

/* Bottom bar (PREVIOUS) */
.kb-stackNav__bottom {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
/* center label */
	gap: 18px !important;
	min-width: min(384px, 73.6vw) !important;
/* 480*0.8, 92vw*0.8 */
	height: 44px !important;
/* shorter */
	padding: 10px 18px !important;
/* shorter */
	background: #DFE1E0 !important;
	color: #111827 !important;
	border: 0 !important;
	outline: 0 !important;
	position: relative !important;
/* for absolute arrow + z-index */
	z-index: 1 !important;
	margin-top: -18px !important;
/* overlap (tucked under) */
	margin-left: 0 !important;
/* keep PREVIOUS aligned */
}

/* Typography */
.kb-stackNav__label {
	width: 100% !important;
/* center text regardless of arrow */
	text-align: center !important;
	font-weight: 900 !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	font-size: calc(1.15rem * 1.2) !important;
/* +10% */
	line-height: 1 !important;
/* keeps it vertically tight */
}

.kb-stackNav__label--right {
	letter-spacing: .06em !important;
}

/* Icon container (absolute; no theme chip) */
.kb-stackNav__icon {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 28px !important;
	height: 28px !important;
	display: block !important;
	background: currentColor !important;
/* arrow colour follows bar text colour */
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
}

/* Place arrows */
.kb-stackNav__icon--right {
	right: 22px !important;
}

/* more space from right edge */
.kb-stackNav__icon--left {
	left: 22px !important;
}

/* more space from left edge */
/* Stop theme-drawn pseudo elements on the bars */
.kb-stackNav__top::before,
.kb-stackNav__top::after,
.kb-stackNav__bottom::before,
.kb-stackNav__bottom::after {
	content: none !important;
	display: none !important;
}

/* Ensure no old arrow pseudo-elements render */
.kb-stackNav .kb-stackNav__icon::before,
.kb-stackNav .kb-stackNav__icon::after {
	content: none !important;
	display: none !important;
}

/* Fat navigation arrow shape (clip-path) — OUTWARDS */
.kb-stackNav .kb-stackNav__icon--right {
	clip-path: polygon(100% 50%,
		72% 28%,
		72% 40%,
		0% 50%,
		72% 60%,
		72% 72%);
}

.kb-stackNav .kb-stackNav__icon--left {
	clip-path: polygon(0% 50%,
		28% 28%,
		28% 40%,
		100% 50%,
		28% 60%,
		28% 72%);
}

/* Restore “hover rises above” behaviour */
.kb-stackNav__top:hover,
.kb-stackNav__bottom:hover {
	z-index: 5 !important;
	transform: translateY(-2px) !important;
}

/* Optional hover (kept subtle) */
.kb-stackNav__top:hover {
	filter: brightness(.96) !important;
}

.kb-stackNav__bottom:hover {
	filter: brightness(.98) !important;
}

.kb-navWrap {
	display: flex;
	justify-content: center;
}

/* =========================================================
   BEST PRACTICE: Chapter contents + mobile table polish
   (UPDATED: equal row gaps + consistent rhythm)
   ========================================================= */
/* -------------------------
   A) Contents list: keep bullets square + equal spacing
   ------------------------- */
.kb-contentsRow {
	gap: 10px;
/* spacing between bullet + text */
	margin: .45rem 0 !important;
/* equal gap between rows */
	min-height: 56px;
/* keeps rhythm consistent even if title wraps */
	align-items: center !important;
/* center bullet + text within fixed height */
}

/* Bullet never squashes in flex layouts */
.kb-contentsRow .kb-bullet {
	flex: 0 0 auto;
	width: .7rem;
	height: .7rem;
	min-width: .7rem;
	min-height: .7rem;
	margin-top: 0 !important;
/* ensure no leftover nudge offsets */
}

/* Clean wrapping */
.kb-contentsRow > a {
	display: block;
	line-height: 1.35;
}

/* Mobile tweaks */
@media (max-width: 520px) {
	.kb-contentsCard {
		padding: 1.35rem 1.1rem !important;
	}
	
	.kb-contentsRow {
		padding: .45rem .55rem !important;
		min-height: 56px;
	/* adjust 52–60px to taste */
		align-items: center !important;
	}
}

/* Drop the first bullet lower under the yellow header (mobile) */
@media (max-width: 720px) {
	.kb-contentsCard {
		padding-top: 1.9rem !important;
	/* increase/decrease until perfect */
	}
}

/* -------------------------
   B) Tables: proportional on mobile (scroll instead of squish)
   ------------------------- */
/* Keigo tables */
.kb-keigo-tableframe {
	overflow-x: auto;
	padding-bottom: 8px;
}

.kb-keigo-table {
	min-width: 680px;
/* keep columns proportional */
	table-layout: auto;
}

@media (max-width: 720px) {
	.kb-keigo-wrap {
		padding: 1.1rem .85rem;
	}
	
	.kb-keigo-table thead th {
		font-size: .9rem;
		padding: 10px 8px;
	}
	
	.kb-keigo-table td {
		padding: 10px 8px;
	}
	
	.kb-jp {
		font-size: 1rem;
	}
	
	.kb-hira {
		font-size: .92rem;
	}
}

/* Respect table (if used) */
.kb-respect-table {
	overflow-x: auto;
	padding-bottom: 8px;
}

.kb-respect-table__table {
	min-width: 680px;
}

/* =========================================================
   FORCE kb-chapter to match editor content width on desktop
   ========================================================= */
.kb-chapter {
	max-width: var(--wp--style--global--content-size, 900px) !important;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

/* Mobile-only: put 文化 on its own line */
@media (max-width: 781px) {
	.kb-jpTitle {
		white-space: normal !important;
	}
	
	.kb-jpTitle .kb-jpBreak {
		display: block;
	}
}

/* =========================================================
   Kotobakun — Hatsios-style tables page (scoped) — COMBINED REWRITE
   USE THIS AS THE BASE, then it adds ALL combined-state rules
   (Respectful overview + replacing A/B + aux A/B + humble overview)
   ========================================================= */
/* Kotobakun — Hatsios-style tables page (scoped) */
/* Layout: keep centered + full available width (NO 100vw left-shift hack) */
.kb-avail {
	width: 100% !important;
	max-width: none !important;
	margin: 3.5rem auto !important;
	padding: 0 1.5rem !important;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #0f172a;
}

/* Remove the white bubble card */
.kb-avail-card {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.kb-avail-title {
	font-size: 3.2rem;
	line-height: 1.05;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 1.75rem;
	font-weight: 800;
}

.kb-filters {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr !important;
/* Category | Sub-category | Search */
	gap: 3.25rem !important;
	align-items: end !important;
	margin: 0 0 1.5rem !important;
}

@media (max-width: 980px) {
	.kb-filters {
		grid-template-columns: 1fr !important;
		gap: 1.75rem !important;
	}
	
	.kb-avail-title {
		font-size: 2.4rem;
	}
}

.kb-filter-label {
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 800;
	color: rgba(15,23,42,.72);
	margin: 0 0 .55rem;
}

/* Dropdown */
.kb-dd {
	position: relative;
}

.kb-dd summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: 0 0 .85rem;
	border-bottom: 1px solid rgba(15,23,42,.20);
	font-size: 1.05rem;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.kb-dd-caret {
	font-size: 1.1rem;
	opacity: .75;
}

.kb-dd[open] .kb-dd-panel {
	position: absolute;
	top: 2.6rem;
	left: 0;
	width: min(520px, 92vw);
	background: #fff;
	border-radius: 18px;
	border: 1px solid rgba(15,23,42,.10);
	box-shadow: 0 24px 60px rgba(15,23,42,.16);
	padding: 1rem 1rem .75rem;
	z-index: 50;
}

.kb-dd-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .8rem .9rem;
	border-radius: 12px;
	text-decoration: none;
	color: rgba(15,23,42,.92);
	font-size: 1rem;
}

.kb-dd-item:hover {
	background: rgba(15,23,42,.04);
}

.kb-dd-item .kb-dd-item-caret {
	opacity: .55;
}

/* Results row */
.kb-results {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.1rem 0 1.25rem;
}

.kb-results-count {
	font-size: 1.05rem;
	font-weight: 800;
}

.kb-results-clear {
	color: rgba(15,23,42,.55);
	text-decoration: none;
	font-size: .95rem;
	display: flex;
	align-items: center;
	gap: .5rem;
}

.kb-results-clear:hover {
	color: rgba(15,23,42,.8);
}

/* Hide state anchors used by :target */
.kb-stateTarget {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* Sub-category menus: default visible unless Category selected */
.kb-avail .kb-submenu {
	display: none;
}

.kb-avail .kb-submenu-default {
	display: block;
}

#kb-cat-respectful:target ~ .kb-filters .kb-submenu-default {
	display: none;
}

#kb-cat-respectful:target ~ .kb-filters .kb-submenu-respectful {
	display: block;
}

#kb-cat-humble:target ~ .kb-filters .kb-submenu-default {
	display: none;
}

#kb-cat-humble:target ~ .kb-filters .kb-submenu-humble {
	display: block;
}

/* Tables: hidden by default (nothing shows until BOTH are selected) */
.kb-avail .kb-table {
	display: none;
}

.kb-hatsiosScroll {
	overflow-x: auto !important;
}

.kb-hatsios {
	width: 100% !important;
	table-layout: fixed !important;
/* force columns to fit viewport */
	border-collapse: separate;
	border-spacing: 0;
	background: transparent !important;
/* no bubble */
}

.kb-hatsios thead th {
	background: #0b1020;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .12em;
	text-align: left;
/* typography */
	font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
	font-weight: 400 !important;
/* header NOT bold */
	font-size: .9rem;
/* keep sane; avoids the earlier 1.25em conflict */
	padding: .9rem 1rem;
}

/* remove rounded corners so it’s not a “card” */
.kb-hatsios thead th:first-child,
.kb-hatsios thead th:last-child {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.kb-hatsios tbody td {
/* spacing (smaller rows) */
	padding: .9rem 1rem !important;
	line-height: 1.35 !important;
/* row/col sizing unchanged (fixed height) */
	height: 70px !important;
	vertical-align: middle !important;
/* look */
	border-bottom: 1px solid rgba(15,23,42,.10);
	background: transparent !important;
/* text behavior (no horizontal scroll) */
	white-space: normal !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
/* body text size */
	font-size: 1.25em !important;
}

/* Hover highlight */
.kb-hatsios tbody tr:hover td {
	background: rgba(180,220,255,.18) !important;
}

/* Word Type column (2nd column) not bold */
.kb-hatsios tbody td:nth-child(2),
.kb-hatsios tbody td:nth-child(2) strong {
	font-weight: 400 !important;
}

/* Montserrat for the table title */
.kb-avail h2.kb-keigo-title {
	font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
	font-weight: 800 !important;
}

/* Prevent page-level horizontal scroll */
html,
body {
	overflow-x: hidden !important;
}

/* --- Show chosen values instead of SELECT (CSS-only via :target) --- */
/* Give the value spans a stable layout */
.kb-dd-value {
	display: inline-block;
	min-height: 1.1em;
}

/* Remove the grey arrows inside dropdown menu items */
.kb-dd-item-caret {
	display: none !important;
}

/* Default: when open, show panel */
.kb-dd[open] .kb-dd-panel {
	display: block;
}

/* =========================================================
   COMBINED STATE RULES (THE IMPORTANT PART)
   Adds all missing combined states + labels + dropdown behavior
   ========================================================= */
/* --- Keep correct submenu visible when ANY Respectful combined state is selected --- */
#kb-cat-respectful__overview:target ~ .kb-filters .kb-submenu-default,
#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-submenu-default,
#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-submenu-default,
#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-submenu-default,
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-submenu-default,
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-submenu-default {
	display: none;
}

#kb-cat-respectful__overview:target ~ .kb-filters .kb-submenu-respectful,
#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-submenu-respectful,
#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-submenu-respectful,
#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-submenu-respectful,
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-submenu-respectful,
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-submenu-respectful {
	display: block;
}

/* --- Keep Humble submenu visible when Humble Overview is selected --- */
#kb-cat-humble__overview:target ~ .kb-filters .kb-submenu-default {
	display: none;
}

#kb-cat-humble__overview:target ~ .kb-filters .kb-submenu-humble {
	display: block;
}

/* --- Show tables for EACH combined state --- */
#kb-cat-respectful__overview:target ~ .kb-tables #kb-table-resp-overview {
	display: block;
}

#kb-cat-respectful__replacing-a:target ~ .kb-tables #kb-table-resp-replacing-a {
	display: block;
}

#kb-cat-respectful__replacing-b:target ~ .kb-tables #kb-table-resp-replacing-b {
	display: block;
}

#kb-cat-respectful__aux-a:target ~ .kb-tables #kb-table-resp-aux-a {
	display: block;
}

#kb-cat-respectful__aux-b:target ~ .kb-tables #kb-table-resp-aux-b {
	display: block;
}

#kb-cat-respectful__rareru:target ~ .kb-tables #kb-table-resp-rareru {
	display: block;
}

#kb-cat-humble__overview:target ~ .kb-tables #kb-table-hum-overview {
	display: block;
}

/* --- CATEGORY label (Respectful) for category-only + all respectful combined states --- */
#kb-cat-respectful:target ~ .kb-filters .kb-dd-cat .kb-cat-value,
#kb-cat-respectful__overview:target ~ .kb-filters .kb-dd-cat .kb-cat-value,
#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-dd-cat .kb-cat-value,
#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-dd-cat .kb-cat-value,
#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-dd-cat .kb-cat-value,
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-dd-cat .kb-cat-value,
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-dd-cat .kb-cat-value {
	font-size: 0;
}

#kb-cat-respectful:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after,
#kb-cat-respectful__overview:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after,
#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after,
#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after,
#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after,
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after,
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after {
	content: "Respectful Language";
	font-size: 1.05rem;
}

/* --- CATEGORY label (Humble) for category-only + humble overview combined state --- */
#kb-cat-humble:target ~ .kb-filters .kb-dd-cat .kb-cat-value,
#kb-cat-humble__overview:target ~ .kb-filters .kb-dd-cat .kb-cat-value {
	font-size: 0;
}

#kb-cat-humble:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after,
#kb-cat-humble__overview:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after {
	content: "Humble Language";
	font-size: 1.05rem;
}

/* --- SUB-CATEGORY labels for combined states --- */
#kb-cat-respectful__overview:target ~ .kb-filters .kb-dd-sub .kb-sub-value,
#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-dd-sub .kb-sub-value,
#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-dd-sub .kb-sub-value,
#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-dd-sub .kb-sub-value,
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-dd-sub .kb-sub-value,
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-dd-sub .kb-sub-value,
#kb-cat-humble__overview:target ~ .kb-filters .kb-dd-sub .kb-sub-value {
	font-size: 0;
}

#kb-cat-respectful__overview:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "Respectful Verbs Overview";
	font-size: 1.05rem;
}

#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "Respectful Replacing Verbs A";
	font-size: 1.05rem;
}

#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "Respectful Replacing Verbs B";
	font-size: 1.05rem;
}

#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "Respectful Verbs in the Auxiliary Position A";
	font-size: 1.05rem;
}

#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "Respectful Verbs in the Auxiliary Position B";
	font-size: 1.05rem;
}

/* ADDED: (ra)reru Forms sub-label */
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "(ra)reru Forms";
	font-size: 1.05rem;
}

#kb-cat-humble__overview:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "Humble Verbs Overview";
	font-size: 1.05rem;
}

/* If user picks Category but no Sub-category yet, keep Sub-category as SELECT */
#kb-cat-respectful:target ~ .kb-filters .kb-dd-sub .kb-sub-value,
#kb-cat-humble:target ~ .kb-filters .kb-dd-sub .kb-sub-value {
	font-size: 1.05rem;
}

#kb-cat-respectful:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after,
#kb-cat-humble:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "";
}

/* When cleared, revert labels back to SELECT */
#kb-clear:target ~ .kb-filters .kb-cat-value,
#kb-clear:target ~ .kb-filters .kb-sub-value {
	font-size: 1.05rem !important;
}

#kb-clear:target ~ .kb-filters .kb-cat-value::after,
#kb-clear:target ~ .kb-filters .kb-sub-value::after {
	content: "" !important;
}

/* Auto-hide dropdown panels AFTER a selection (desktop), but allow reopen (focus-within) */
#kb-cat-respectful:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-humble:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__overview:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-humble__overview:target ~ .kb-filters .kb-dd[open] .kb-dd-panel {
	display: none;
}

#kb-cat-respectful:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel,
#kb-cat-humble:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel,
#kb-cat-respectful__overview:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel,
#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel,
#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel,
#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel,
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel,
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel,
#kb-cat-humble__overview:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel {
	display: block;
}

/* MOBILE FIX: make dropdowns tappable + allow selecting sub-categories */
@media (max-width: 980px) {
	.kb-dd[open] .kb-dd-panel {
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		margin-top: .75rem !important;
		z-index: auto !important;
	}
	
	#kb-cat-respectful:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
							#kb-cat-humble:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
							#kb-cat-respectful__overview:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
							#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
							#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
							#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
							#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
							#kb-cat-respectful__rareru:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
							#kb-cat-humble__overview:target ~ .kb-filters .kb-dd[open] .kb-dd-panel {
		display: block !important;
	}
}

/* MOBILE: keep table proportions + allow sideways scroll */
@media (max-width: 980px) {
	.kb-hatsios {
		table-layout: auto !important;
		width: max-content !important;
		min-width: 680px !important;
	}
	
	.kb-hatsiosScroll {
		overflow-x: auto !important;
	}
	
	.kb-hatsios th,
							.kb-hatsios td {
		white-space: nowrap !important;
		word-break: normal !important;
		overflow-wrap: normal !important;
	}
	
	.kb-hatsios td:last-child {
		white-space: normal !important;
	}
}

/* MOBILE: table flush to screen edges (no white border left/right) */
@media (max-width: 980px) {
	.kb-avail {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	.kb-avail-card {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	
	.kb-hatsiosTable,
							.kb-hatsiosScroll {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* MOBILE: make the TABLE area full-bleed (removes theme padding gutters) */
@media (max-width: 980px) {
	.kb-hatsiosTable {
		width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
	}
	
	.kb-hatsiosScroll {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Smooth scroll to the table when a sub-category is tapped */
html {
	scroll-behavior: smooth;
}

/* If you have a sticky header, adjust this number */
.kb-table {
	scroll-margin-top: 110px;
}

/* Tables stay hidden by default, but show when their own ID is targeted */
.kb-avail .kb-table {
	display: none;
}

.kb-avail .kb-table:target {
	display: block;
}

/* (Optional) Hide the mobileOnly UI if it's still in your HTML */
.kb-mobileOnly {
	display: none !important;
}

.kb-desktopOnly {
	display: block !important;
}

html {
	scroll-behavior: smooth;
}

.kb-topBtn {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 999999;
/* ensure it's above page UI */
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	background: #2C3843;
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 22px rgba(18,24,38,0.18);
}

.kb-topBtn-ico {
	font-size: 16px;
	line-height: 1;
}

.kb-topBtn:hover {
	transform: translateY(-1px);
}

.kb-topBtn:focus {
	outline: 3px solid rgba(44,56,67,0.35);
	outline-offset: 4px;
}

/* mobile spacing */
@media (max-width: 480px) {
	.kb-topBtn {
		right: 14px;
		bottom: 14px;
		padding: 10px 13px;
	}
}

/* ================================
   Hatsios-style tables (scoped)
   ================================ */
.kb-hatsiosTable {
	margin: 1rem 0 1.75rem;
}

/* The scroll frame (rounded + border + shadow) */
.kb-hatsiosScroll {
	overflow-x: auto;
	border: 1px solid rgba(44,56,67,0.18);
	border-radius: 16px;
	background: #ffffff;
	box-shadow: 0 10px 22px rgba(18,24,38,0.08);
}

/* Table base */
table.kb-hatsios {
	width: 100%;
	min-width: 560px;
/* prevents squish; enables scroll on mobile */
	border-collapse: separate;
	border-spacing: 0;
	font-size: .98rem;
	color: #0f172a;
}

/* Sticky header */
table.kb-hatsios thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #2C3843;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .78rem;
	font-weight: 900;
	padding: .95rem 1rem;
	text-align: left;
	white-space: nowrap;
}

/* Round the header corners nicely */
table.kb-hatsios thead th:first-child {
	border-top-left-radius: 16px;
}

table.kb-hatsios thead th:last-child {
	border-top-right-radius: 16px;
}

/* Body cells */
table.kb-hatsios tbody td {
	padding: .95rem 1rem;
	vertical-align: top;
	border-top: 1px solid rgba(44,56,67,0.12);
	background: transparent;
}

/* Zebra striping */
table.kb-hatsios tbody tr:nth-child(even) {
	background: #f8fafc;
}

/* Row hover highlight */
table.kb-hatsios tbody tr:hover {
	background: rgba(193,201,2,0.12);
/* #C1C902 tint */
}

/* “Lime bar” accent on hover (left edge of first column) */
table.kb-hatsios tbody tr:hover td:first-child {
	box-shadow: inset 5px 0 0 #C1C902;
	padding-left: calc(1rem - 5px);
}

/* Make multi-line cells breathe a bit */
table.kb-hatsios tbody td div {
	margin: .1rem 0;
}

/* Optional: slightly bolder first column labels */
table.kb-hatsios tbody td:first-child strong {
	font-weight: 900;
	color: #111827;
}

/* Mobile tweaks */
@media (max-width: 480px) {
	table.kb-hatsios {
		font-size: .95rem;
		min-width: 520px;
	}
	
	table.kb-hatsios thead th,
							table.kb-hatsios tbody td {
		padding: .85rem .9rem;
	}
}

/* =========================================
   NEW: Respectful > Auxiliary Position B state
   ========================================= */
/* Show the table when this combined state is targeted */
#kb-cat-respectful__aux-b:target ~ .kb-tables #kb-table-resp-aux-b {
	display: block;
}

/* Ensure correct dropdown value text appears (CSS replaces SELECT) */
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-cat-value {
	color: transparent;
}

#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-cat-value::before {
	content: "Respectful Language";
	color: #0f172a;
}

#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-sub-value {
	color: transparent;
}

#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-sub-value::before {
	content: "Respectful Verbs in the Auxiliary Position B";
	color: #0f172a;
}

/* Make sure the correct submenu is visible when Aux B is selected */
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-submenu-default {
	display: none;
}

#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-submenu-humble {
	display: none;
}

#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-submenu-respectful {
	display: block;
}

/* Small note styling used in the English column */
.kb-hatsios .kb-note {
	font-style: italic;
	font-size: .92em;
	opacity: .85;
}

/* =========================================
   NEW: Respectful > (ra)reru Forms
   ========================================= */
/* Show the table when this combined state is targeted */
#kb-cat-respectful__rareru:target ~ .kb-tables #kb-table-resp-rareru {
	display: block;
}

/* Ensure correct dropdown value text appears (CSS replaces SELECT) */
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-cat-value {
	color: transparent;
}

#kb-cat-respectful__rareru:target ~ .kb-filters .kb-cat-value::before {
	content: "Respectful Language";
	color: #0f172a;
}

#kb-cat-respectful__rareru:target ~ .kb-filters .kb-sub-value {
	color: transparent;
}

#kb-cat-respectful__rareru:target ~ .kb-filters .kb-sub-value::before {
	content: "(ra)reru Forms";
	color: #0f172a;
}

/* Make sure the correct submenu is visible when (ra)reru is selected */
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-submenu-default {
	display: none;
}

#kb-cat-respectful__rareru:target ~ .kb-filters .kb-submenu-humble {
	display: none;
}

#kb-cat-respectful__rareru:target ~ .kb-filters .kb-submenu-respectful {
	display: block;
}

/* =========================================
   NEW: Humble > Humble Replacing Verbs A
   ========================================= */
/* Show the table when this combined state is targeted */
#kb-cat-humble__replacing-a:target ~ .kb-tables #kb-table-hum-replacing-a {
	display: block;
}

/* Ensure correct dropdown value text appears (CSS replaces SELECT) */
#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-cat-value {
	color: transparent;
}

#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-cat-value::before {
	content: "Humble Language";
	color: #0f172a;
}

#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-sub-value {
	color: transparent;
}

#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-sub-value::before {
	content: "Humble Replacing Verbs A";
	color: #0f172a;
}

/* Make sure the correct submenu is visible when Humble Replacing Verbs A is selected */
#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-submenu-default {
	display: none;
}

#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-submenu-respectful {
	display: none;
}

#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-submenu-humble {
	display: block;
}

/* Ensure dropdown auto-hide behavior also applies to this combined state */
#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-dd[open] .kb-dd-panel {
	display: none;
}

#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel {
	display: block;
}

/* =========================================
   NEW: Humble > Humble Replacing Verbs B
   ========================================= */
/* Show the table when this combined state is targeted */
#kb-cat-humble__replacing-b:target ~ .kb-tables #kb-table-hum-replacing-b {
	display: block;
}

/* Ensure correct dropdown value text appears (CSS replaces SELECT) */
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-cat-value {
	color: transparent;
}

#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-cat-value::before {
	content: "Humble Language";
	color: #0f172a;
}

#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-sub-value {
	color: transparent;
}

#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-sub-value::before {
	content: "Humble Replacing Verbs B";
	color: #0f172a;
}

/* Make sure the correct submenu is visible when Humble Replacing Verbs B is selected */
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-submenu-default {
	display: none;
}

#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-submenu-respectful {
	display: none;
}

#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-submenu-humble {
	display: block;
}

/* Ensure dropdown auto-hide behavior also applies to this combined state */
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-dd[open] .kb-dd-panel {
	display: none;
}

#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel {
	display: block;
}

/* =========================================
   NEW: Humble > Hai-initial Sino-Japanese Verbs
   (matches the (ra)reru combined-state style)
   ========================================= */
/* Show the table when this combined state is targeted */
#kb-cat-humble__hai-initial:target ~ .kb-tables #kb-table-hum-hai-initial {
	display: block !important;
}

/* Ensure correct dropdown value text appears (CSS replaces SELECT) */
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-cat-value {
	color: transparent;
}

#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-cat-value::before {
	content: "Humble Language";
	color: #0f172a;
}

#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-sub-value {
	color: transparent;
}

#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-sub-value::before {
	content: "Hai-initial Sino-Japanese Verbs";
	color: #0f172a;
}

/* Make sure the correct submenu is visible when selected */
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-submenu-default {
	display: none;
}

#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-submenu-respectful {
	display: none;
}

#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-submenu-humble {
	display: block;
}

/* Ensure dropdown auto-hide behavior also applies to this combined state */
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd[open] .kb-dd-panel {
	display: none;
}

#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd[open]:focus-within .kb-dd-panel {
	display: block;
}

/* Mobile allowlist (so panels stay usable on small screens) */
@media (max-width: 980px) {
	#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd[open] .kb-dd-panel {
		display: block !important;
	}
}

/* =========================================================
   Hatsios Dropdown FIX — PATCH (keeps your table visuals)
   Paste at END of CSS
   ========================================================= */
/* ---------------------------------------------------------
   1) IMPORTANT: kill the conflicting “::before + transparent” label system
      (this is what causes disappearing/indented selected text)
   --------------------------------------------------------- */
.kb-filters .kb-cat-value,
.kb-filters .kb-sub-value {
	color: inherit !important;
}

.kb-filters .kb-cat-value::before,
.kb-filters .kb-sub-value::before {
	content: "" !important;
}

/* ---------------------------------------------------------
   2) Make auto-hide work, BUT allow reopen without “double click”
      Logic:
      - After a selection (:target), hide any open dropdown panel (auto-close)
      - If the user interacts (hover OR focuses summary), show it again
   --------------------------------------------------------- */
/* A) Auto-hide panels after ANY selection state */
#kb-cat-respectful:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-humble:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,

#kb-cat-respectful__overview:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,

#kb-cat-humble__overview:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd[open] .kb-dd-panel {
	display: none !important;
}

/* B) Reopen behaviour (prevents “double click”)
      Show panel when the dropdown is interacted with */
#kb-cat-respectful:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,
#kb-cat-humble:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,

#kb-cat-respectful__overview:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,
#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,
#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,
#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,

#kb-cat-humble__overview:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,
#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel,
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd[open]:hover .kb-dd-panel {
	display: block !important;
}

/* Same idea, but for keyboard/tap focus on the summary */
#kb-cat-respectful:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,
#kb-cat-humble:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,

#kb-cat-respectful__overview:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,
#kb-cat-respectful__replacing-a:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,
#kb-cat-respectful__replacing-b:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,
#kb-cat-respectful__aux-a:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,
#kb-cat-respectful__aux-b:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,
#kb-cat-respectful__rareru:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,

#kb-cat-humble__overview:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,
#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel,
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd[open] summary:focus + .kb-dd-panel {
	display: block !important;
}

/* ---------------------------------------------------------
   3) Humble combined states: make submenu + labels behave like respectful
      (using your original font-size:0 + ::after system)
   --------------------------------------------------------- */
/* Keep Humble submenu visible for ALL humble combined states */
#kb-cat-humble__overview:target ~ .kb-filters .kb-submenu-default,
#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-submenu-default,
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-submenu-default,
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-submenu-default {
	display: none !important;
}

#kb-cat-humble__overview:target ~ .kb-filters .kb-submenu-humble,
#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-submenu-humble,
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-submenu-humble,
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-submenu-humble {
	display: block !important;
}

/* Show tables for humble combined states */
#kb-cat-humble__replacing-a:target ~ .kb-tables #kb-table-hum-replacing-a,
#kb-cat-humble__replacing-b:target ~ .kb-tables #kb-table-hum-replacing-b,
#kb-cat-humble__hai-initial:target ~ .kb-tables #kb-table-hum-hai-initial {
	display: block !important;
}

/* CATEGORY label (Humble) for added combined states */
#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-dd-cat .kb-cat-value,
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-dd-cat .kb-cat-value,
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd-cat .kb-cat-value {
	font-size: 0 !important;
}

#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after,
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after,
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd-cat .kb-cat-value::after {
	content: "Humble Language";
	font-size: 1.05rem;
}

/* SUBCATEGORY labels for added humble combined states */
#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-dd-sub .kb-sub-value,
#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-dd-sub .kb-sub-value,
#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd-sub .kb-sub-value {
	font-size: 0 !important;
}

#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "Humble Replacing Verbs A";
	font-size: 1.05rem;
}

#kb-cat-humble__replacing-b:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "Humble Replacing Verbs B";
	font-size: 1.05rem;
}

#kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd-sub .kb-sub-value::after {
	content: "Hai-initial Sino-Japanese Verbs";
	font-size: 1.05rem;
}

/* ---------------------------------------------------------
   4) Mobile allowlist: keep the panel usable on small screens
      (your allowlist didn’t include these humble states)
   --------------------------------------------------------- */
@media (max-width: 980px) {
	#kb-cat-humble__replacing-a:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
					  #kb-cat-humble__replacing-b:target ~ .kb-filters .kb-dd[open] .kb-dd-panel,
					  #kb-cat-humble__hai-initial:target ~ .kb-filters .kb-dd[open] .kb-dd-panel {
		display: block !important;
	}
}

/* =========================================================
   PDF LESSON — SAFE PATCH (page_id=1484)
   - Affects ONLY page 1484
   - Affects ONLY inside .kb-pdfSeries
   - Includes fallback “auto-detect” for wrappers if you missed a class
   Paste at VERY BOTTOM of Additional CSS
   ========================================================= */
body.page-id-1484 .kb-pdfSeries {
	max-width: 900px !important;
	margin: 0 auto !important;
	padding: 2.5rem 1.25rem !important;
	line-height: 1.65 !important;
	color: var(--kb-ink) !important;
}

/* ---------- Header: prevent your site-wide .kb-hero styles leaking in ---------- */
body.page-id-1484 .kb-pdfSeries .kb-hero {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 1.25rem !important;
	text-align: left !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

/* Bookmark */
body.page-id-1484 .kb-pdfSeries .kb-bookmark {
	display: block !important;
	width: 54px !important;
	min-width: 54px !important;
	height: 78px !important;
	min-height: 78px !important;
	background: var(--kb-accent) !important;
	border-radius: 8px 8px 0 0 !important;
	position: relative !important;
	font-size: 0 !important;
	line-height: 0 !important;
}

body.page-id-1484 .kb-pdfSeries .kb-bookmark::after {
	content: "" !important;
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: -18px !important;
	margin: auto !important;
	width: 0 !important;
	height: 0 !important;
	border-left: 27px solid transparent !important;
	border-right: 27px solid transparent !important;
	border-top: 18px solid var(--kb-accent) !important;
}

/* ---------- Section line (if wrapper class exists) ---------- */
body.page-id-1484 .kb-pdfSeries .kb-sectionLine {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	gap: .75rem !important;
	align-items: start !important;
	margin: 1.25rem 0 1.75rem !important;
}

body.page-id-1484 .kb-pdfSeries .kb-sectionText {
	padding-bottom: .35rem !important;
	border-bottom: 2px solid var(--kb-ink) !important;
}

/* Fallback: if you forgot kb-sectionLine on the wrapper, auto-detect it */
body.page-id-1484 .kb-pdfSeries .wp-block-group:has(> .kb-chevrons):has(> .kb-sectionText) {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	gap: .75rem !important;
	align-items: start !important;
	margin: 1.25rem 0 1.75rem !important;
}

body.page-id-1484 .kb-pdfSeries .wp-block-group:has(> .kb-chevrons):has(> .kb-sectionText) .kb-sectionText {
	padding-bottom: .35rem !important;
	border-bottom: 2px solid var(--kb-ink) !important;
}

/* ---------- Objectives ---------- */
body.page-id-1484 .kb-pdfSeries .kb-objectives {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	gap: .9rem !important;
	align-items: start !important;
	margin: 0 0 1.75rem !important;
}

/* Fallback: if you forgot kb-objectives on the wrapper */
body.page-id-1484 .kb-pdfSeries .wp-block-group:has(> .kb-objIcon) {
	display: grid !important;
	grid-template-columns: auto 1fr !important;
	gap: .9rem !important;
	align-items: start !important;
	margin: 0 0 1.75rem !important;
}

/* Pencil bubble */
body.page-id-1484 .kb-pdfSeries .kb-objIcon {
	width: 38px !important;
	height: 38px !important;
	border-radius: 999px !important;
	background: var(--kb-accent) !important;
	display: grid !important;
	box-shadow: 0 6px 16px rgba(0,0,0,.12) !important;
}

body.page-id-1484 .kb-pdfSeries .kb-objIcon p {
	margin: 0 !important;
	line-height: 1 !important;
	font-weight: 800 !important;
	color: rgba(0,0,0,.78) !important;
}

/* ---------- Mustard band ---------- */
/* Normal (if you added kb-band class) */
body.page-id-1484 .kb-pdfSeries .kb-band {
	background: var(--kb-accent) !important;
	border-radius: 26px !important;
	padding: 2.25rem 1.75rem 1.75rem !important;
	margin-top: 1.75rem !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 16px 40px rgba(0,0,0,.12) !important;
}

/* Fallback: if you forgot kb-band on the wrapper,
   auto-detect the band as “the group that directly contains the vertTag”. */
body.page-id-1484 .kb-pdfSeries .wp-block-group:has(> .kb-vertTag) {
	background: var(--kb-accent) !important;
	border-radius: 26px !important;
	padding: 2.25rem 1.75rem 1.75rem !important;
	margin-top: 1.75rem !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 16px 40px rgba(0,0,0,.12) !important;
}

/* Band inner grid: (if you added kb-bandInner) */
body.page-id-1484 .kb-pdfSeries .kb-bandInner {
	position: relative !important;
	display: grid !important;
	gap: 1.1rem !important;
	padding-right: 3.25rem !important;
}

/* Fallback: bandInner = “group whose direct children include .kb-card” */
body.page-id-1484 .kb-pdfSeries .wp-block-group:has(> .kb-card) {
	position: relative !important;
	display: grid !important;
	gap: 1.1rem !important;
	padding-right: 3.25rem !important;
}

/* Vertical tag + triangle */
body.page-id-1484 .kb-pdfSeries .kb-vertTag {
	position: absolute !important;
	top: 1.1rem !important;
	right: .2rem !important;
	display: grid !important;
	gap: .35rem !important;
	align-items: center !important;
	justify-items: center !important;
	width: 2.75rem !important;
	z-index: 2 !important;
}

body.page-id-1484 .kb-pdfSeries .kb-vertTagArrow {
	width: 0 !important;
	height: 0 !important;
	border-left: 10px solid transparent !important;
	border-right: 10px solid transparent !important;
	border-top: 12px solid var(--kb-accent) !important;
	opacity: 1 !important;
}

/* Cards */
body.page-id-1484 .kb-pdfSeries .kb-card {
	background: #fff !important;
	border: 0 !important;
	border-radius: 18px !important;
	box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;
	overflow: hidden !important;
	max-width: 760px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Pill label inside PDF only (does NOT affect other site pills) */
body.page-id-1484 .kb-pdfSeries .kb-pill {
	display: inline-block !important;
	font-size: .85rem !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: rgba(0,0,0,.55) !important;
	padding: .25rem .65rem !important;
	border-radius: 999px !important;
	border: 0 !important;
	margin: 0 0 .75rem !important;
}

/* Responsive */
@media (max-width:700px) {
	body.page-id-1484 .kb-pdfSeries {
		padding: 2rem 1rem !important;
	}
	
	body.page-id-1484 .kb-pdfSeries .kb-vertTag {
		display: none !important;
	}
	
	body.page-id-1484 .kb-pdfSeries .kb-bandInner,
					  body.page-id-1484 .kb-pdfSeries .wp-block-group:has(> .kb-card) {
		padding-right: 0 !important;
	}
}

/* =========================================================
   SAFETY PATCH — stop site-wide leakage
   (paste at VERY BOTTOM)
   ========================================================= */
/* Undo global page-wide rules (keep site normal) */
html {
	scroll-behavior: auto !important;
}

html, body {
	overflow-x: visible !important;
}

/* Re-apply ONLY where needed (your Tables page) */
body.page-id-1468 {
	overflow-x: hidden !important;
}

body.page-id-1468 html {
	scroll-behavior: smooth !important;
}

/* =========================================================
   HEADER DROPDOWN — SAUSAGE STACK (NO COLLAPSE GAP)
   ========================================================= */
@media (min-width:782px) {
	.kb-header-nav {
		position: relative !important;
		z-index: 9999 !important;
	}
	
	/* 1) FORCE remove the white panel wherever the theme puts it */
	.kb-header-nav :where(.wp-block-navigation__submenu-container,
				                        .wp-block-navigation-submenu__submenu-container,
				                        ul.wp-block-navigation__submenu-container) {
		background: transparent !important;
		background-color: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
		border-radius: 0 !important;
	}
	
	.kb-header-nav :where(.wp-block-navigation__submenu-container,
				                        .wp-block-navigation-submenu__submenu-container,
				                        ul.wp-block-navigation__submenu-container)::before,
				  .kb-header-nav :where(.wp-block-navigation__submenu-container,
				                        .wp-block-navigation-submenu__submenu-container,
				                        ul.wp-block-navigation__submenu-container)::after {
		content: none !important;
		display: none !important;
	}
	
	/* 2) Parent submenu item */
	.kb-header-nav :where(.wp-block-navigation-item.has-child,
				                        .wp-block-navigation-item.has-submenu) {
		position: relative !important;
	}
	
	/* INVISIBLE HOVER BRIDGE (prevents collapse while moving mouse down) */
	.kb-header-nav :where(.wp-block-navigation-item.has-child,
				                        .wp-block-navigation-item.has-submenu)::after {
		content: "" !important;
		position: absolute !important;
		left: -14px !important;
		right: -14px !important;
		top: 100% !important;
		height: 16px !important;
	/* bridge height */
		background: transparent !important;
	}
	
	/* 3) Submenu positioning + show/hide */
	.kb-header-nav :where(.wp-block-navigation-item.has-child,
				                        .wp-block-navigation-item.has-submenu)
				  > :where(.wp-block-navigation__submenu-container,
				           .wp-block-navigation-submenu__submenu-container) {
		position: absolute !important;
	/* close gap so menu doesn't collapse */
		top: calc(100% + 2px) !important;
		left: 0 !important;
		margin: 0 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		pointer-events: none !important;
		transform: translateY(4px) !important;
		transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease !important;
		z-index: 99999 !important;
		min-width: 260px !important;
	}
	
	.kb-header-nav :where(.wp-block-navigation-item.has-child,
				                        .wp-block-navigation-item.has-submenu):hover
				  > :where(.wp-block-navigation__submenu-container,
				           .wp-block-navigation-submenu__submenu-container),
				  .kb-header-nav :where(.wp-block-navigation-item.has-child,
				                        .wp-block-navigation-item.has-submenu):focus-within
				  > :where(.wp-block-navigation__submenu-container,
				           .wp-block-navigation-submenu__submenu-container) {
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: translateY(0) !important;
	}
	
	/* 4) Sausage stack */
	.kb-header-nav :where(.wp-block-navigation__submenu-container,
				                        .wp-block-navigation-submenu__submenu-container) {
		list-style: none !important;
	}
	
	.kb-header-nav :where(.wp-block-navigation__submenu-container,
				                        .wp-block-navigation-submenu__submenu-container)
				  > :where(.wp-block-navigation-item) {
		margin: 0 !important;
		padding: 0 !important;
		min-height: 0 !important;
		height: auto !important;
		line-height: normal !important;
		background: transparent !important;
	}
	
	/* slight overlap so no dead bands */
	.kb-header-nav :where(.wp-block-navigation__submenu-container,
				                        .wp-block-navigation-submenu__submenu-container)
				  > :where(.wp-block-navigation-item + .wp-block-navigation-item) {
		margin-top: -6px !important;
	}
	
	/* 5) Pills — WHITE fill + GREY border */
	.kb-header-nav :where(.wp-block-navigation__submenu-container,
				                        .wp-block-navigation-submenu__submenu-container)
				  :where(a.wp-block-navigation-item__content, .wp-block-navigation-item__content) {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
		background: #ffffff !important;
		background-color: #ffffff !important;
		color: #111827 !important;
		border: 1px solid #cfcfcf !important;
	/* grey border */
		border-radius: 999px !important;
		padding: 11px 16px !important;
		margin: 0 !important;
		line-height: 1.2 !important;
		text-decoration: none !important;
		box-shadow: none !important;
		white-space: nowrap !important;
		position: relative !important;
		z-index: 1 !important;
	}
	
	/* Hover highlight — still a sausage, rises above overlap */
	.kb-header-nav :where(.wp-block-navigation__submenu-container,
				                        .wp-block-navigation-submenu__submenu-container)
				  :where(a.wp-block-navigation-item__content, .wp-block-navigation-item__content):hover,
				  .kb-header-nav :where(.wp-block-navigation__submenu-container,
				                        .wp-block-navigation-submenu__submenu-container)
				  :where(a.wp-block-navigation-item__content, .wp-block-navigation-item__content):focus-visible {
		background: #e9e9e9 !important;
	/* highlight */
		background-color: #e9e9e9 !important;
		border-color: #bdbdbd !important;
		outline: none !important;
		filter: none !important;
		z-index: 2 !important;
	}
}

/* =========================================================
   MOBILE NAV (overlay): REMOVE the black “L-box” around submenus
   Paste at VERY BOTTOM
   ========================================================= */
@media (max-width:781px) {
	/* Only when the mobile menu overlay is open */
	.kb-header-nav .wp-block-navigation__responsive-container.is-menu-open
				  :where(.wp-block-navigation-item,
				         .wp-block-navigation-item.has-child,
				         .wp-block-navigation-item.has-submenu,
				         .wp-block-navigation__submenu-container,
				         .wp-block-navigation-submenu__submenu-container,
				         .wp-block-navigation-item__submenu-container) {
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		background-color: transparent !important;
	}
	
	/* Some themes draw that “L” as a left border + padding on the submenu container */
	.kb-header-nav .wp-block-navigation__responsive-container.is-menu-open
				  :where(.wp-block-navigation__submenu-container,
				         .wp-block-navigation-submenu__submenu-container,
				         .wp-block-navigation-item__submenu-container) {
		border-left: 0 !important;
		border-bottom: 0 !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
	}
	
	/* Kill pseudo-elements that sometimes draw the box */
	.kb-header-nav .wp-block-navigation__responsive-container.is-menu-open
				  :where(.wp-block-navigation__submenu-container,
				         .wp-block-navigation-submenu__submenu-container,
				         .wp-block-navigation-item__submenu-container)::before,
				  .kb-header-nav .wp-block-navigation__responsive-container.is-menu-open
				  :where(.wp-block-navigation__submenu-container,
				         .wp-block-navigation-submenu__submenu-container,
				         .wp-block-navigation-item__submenu-container)::after {
		content: none !important;
		display: none !important;
	}
	
	/* Also remove focus outlines on the tapped parent link/button (can look like a box) */
	.kb-header-nav .wp-block-navigation__responsive-container.is-menu-open
				  :where(a.wp-block-navigation-item__content,
				         button.wp-block-navigation-item__content,
				         .wp-block-navigation-item__content):focus,
				  .kb-header-nav .wp-block-navigation__responsive-container.is-menu-open
				  :where(a.wp-block-navigation-item__content,
				         button.wp-block-navigation-item__content,
				         .wp-block-navigation-item__content):focus-visible {
		outline: 0 !important;
		box-shadow: none !important;
	}
}

/* Kotobakun — Lesson pages: use full mobile width WITHOUT affecting anything else */
@media (pointer: coarse) {
	/* Debug (remove after confirming): should show on phones/tablets */
	/* .kb-lesson { outline: 3px solid red !important; } */
	.kb-lesson {
	/* break out of WP content column */
		width: calc(100vw - 24px) !important;
		max-width: none !important;
		margin-left: calc(50% - 50vw + 12px) !important;
		margin-right: calc(50% - 50vw + 12px) !important;
	/* keep comfortable inside padding */
		padding-left: 14px !important;
		padding-right: 14px !important;
		box-sizing: border-box !important;
	}
}

/* =========================================================
   Free Downloads (1565) — full-width canvas + readable inner
   ========================================================= */
/* 1) Stop parent wrappers from clipping the breakout */
body.page-id-1565 .wp-site-blocks,
body.page-id-1565 main,
body.page-id-1565 .wp-block-post-content {
	overflow: visible !important;
}

/* 2) Break the OUTER group to full viewport width */
body.page-id-1565 .kb-downloads-wrap {
	width: 100vw !important;
	max-width: 100vw !important;
/* the key part */
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
/* keep some page gutters */
	padding-left: clamp(16px, 4vw, 56px) !important;
	padding-right: clamp(16px, 4vw, 56px) !important;
	box-sizing: border-box !important;
}

/* 3) Keep the INNER group nicely readable */
body.page-id-1565 .kb-downloads-inner {
	max-width: 1400px !important;
/* adjust to taste */
	width: 100% !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
}

/* =========================================================
   Free Downloads (page-id-1565) — widen the *actual content blocks*
   (not just the wrapper)
   ========================================================= */
/* (A) Make the outer wrapper full-bleed */
body.page-id-1565 .kb-downloads-wrap {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	padding-left: clamp(16px, 4vw, 56px) !important;
	padding-right: clamp(16px, 4vw, 56px) !important;
	box-sizing: border-box !important;
}

/* (B) Set NEW “content width” variables inside the inner wrapper */
body.page-id-1565 .kb-downloads-inner {
	width: 100% !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

/* (C) Force child blocks to respect the widened content width */
body.page-id-1565 .kb-downloads-inner > * {
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

/* =========================================================
   Free Downloads (page-id-1565) — widen ALL constrained blocks inside wrapper
   ========================================================= */
body.page-id-1565 .kb-downloads-wrap {
/* change to taste (1200–1600) */
}

/* Any nested constrained layout inside the wrapper should inherit the wider size */
body.page-id-1565 .kb-downloads-wrap :where(.is-layout-constrained) {
}

/* Force the constrained children + common inner containers to actually use the wider max */
body.page-id-1565 .kb-downloads-wrap :where(
  .is-layout-constrained > *,
  .wp-block-group__inner-container,
  .wp-block-columns,
  .wp-block-column
) {
	max-width: var(--kb-downloads-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box !important;
}

/* Keep full-bleed blocks full-bleed (if you use them) */
body.page-id-1565 .kb-downloads-wrap :where(.alignfull) {
	max-width: 100vw !important;
}

/* =========================================================
   Kotobakun — Patreon Pack Ad (Compact, Palette, No Preview)
   UPDATED: includes “center left media + keep image ratio” patch
   Palette:
   Dark blue: #2C3843
   Red:       #BE3739
   Grey:      #DFE1E0
   Purple:    #C2A5C2
   Pink:      #E79784
   Light Blue:#8FAAC0
   Yellow:    #FBBE01
   Green:     #C1C902
   ========================================================= */
.kb-packAd {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	padding: 1.4rem 1.25rem;
}

.kb-packAd * {
	box-sizing: border-box;
}

/* Main card: 2-up friendly, compact height */
.kb-packCard {
	display: grid;
	grid-template-columns: minmax(220px, 300px) 1fr;
	gap: 14px;
	align-items: stretch;
/* Dark blue background panel */
	background: linear-gradient(135deg, rgba(44,56,67,.96), rgba(44,56,67,.90));
	border: 1px solid var(--kb-line);
	border-radius: 18px;
	padding: 14px;
	box-shadow: 0 14px 28px rgba(0,0,0,.14);
	position: relative;
	overflow: hidden;
}

/* Subtle accent glow (yellow/green/sky) */
.kb-packCard::before {
	content: "";
	position: absolute;
	background: radial-gradient(520px 260px at 14% 18%, rgba(251,190,1,.22), transparent 60%), radial-gradient(520px 260px at 86% 80%, rgba(193,201,2,.18), transparent 60%), radial-gradient(520px 260px at 88% 22%, rgba(143,170,192,.18), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

.kb-packCard > * {
	position: relative;
	z-index: 1;
}

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

/* =========================================================
   LEFT MEDIA (UPDATED)
   - centers image + “Patreon Pack” label both ways
   - keeps image’s original ratio (no crop)
   ========================================================= */
/* Cover area: allow label below + center content */
.kb-packMedia {
	margin: 0;
	border-radius: 14px;
	position: relative;
	border: 1px solid rgba(223,225,224,.32);
	background: rgba(223,225,224,.10);
/* Let the label sit below the image */
	overflow: visible !important;
/* Use flex to center items */
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
/* horizontal centering */
	justify-content: center !important;
/* vertical centering */
	gap: 10px !important;
/* Ensure enough height to center within */
	min-height: 260px !important;
}

/* Link no longer needs to fill height */
.kb-packMediaLink {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: auto !important;
	text-decoration: none !important;
	color: inherit;
}

/* Image: keep original ratio (no cropping) */
.kb-packCover {
	display: block;
	width: min(240px, 92%) !important;
	height: auto !important;
	object-fit: contain !important;
	border-radius: 14px !important;
}

/* =========================================================
   RIBBONS / LABELS
   ========================================================= */
/* If any old overlay ribbon exists, neutralise it */
.kb-packRibbon {
	display: none !important;
}

.kb-packLock {
	display: none !important;
}

/* New below-image label */
.kb-packRibbonBelow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.92);
	color: #111;
	border: 1px solid rgba(0,0,0,.12);
	font-weight: 950;
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* =========================================================
   White copy card
   ========================================================= */
.kb-packBody {
	background: rgba(255,255,255,.92);
	border: 1px solid rgba(223,225,224,.65);
	border-radius: 14px;
	padding: 14px 14px 12px;
}

/* Copy styling */
.kb-packKicker {
	margin: 0 0 .45rem;
	font-size: .76rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kb-navy);
	font-weight: 950;
}

.kb-packTitle {
	margin: 0 0 .55rem;
	font-size: 1.35rem;
	line-height: 1.15;
	font-weight: 950;
	color: var(--kb-navy);
}

.kb-packLead {
	margin: 0 0 .8rem;
	color: rgba(44,56,67,.92);
	line-height: 1.55;
	font-size: .98rem;
}

/* Small heading */
.kb-packMini {
	margin: 0 0 .5rem;
	font-size: 1.02rem;
	font-weight: 950;
	color: rgba(44,56,67,.95);
}

/* Bullets tighter */
.kb-packBullets {
	margin: 0 0 .85rem;
	padding-left: 1.05rem;
	line-height: 1.45;
	font-size: .95rem;
}

.kb-packBullets li {
	margin: .18rem 0;
}

/* Feature badges */
.kb-packBadges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 .85rem;
	padding: 0;
}

.kb-packBadges span {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(223,225,224,.95);
	border: 1px solid rgba(44,56,67,.16);
	color: var(--kb-navy);
	font-weight: 950;
	font-size: .8rem;
}

/* Buttons */
.kb-packCtas {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: .1rem;
}

.kb-packBtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 12px;
	border-radius: 12px;
	text-decoration: none !important;
	font-weight: 950;
	border: 1px solid rgba(44,56,67,.22);
	transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.kb-packBtn:active {
	transform: translateY(1px);
}

.kb-packBtnPrimary {
	background: var(--kb-yellow);
	color: #111;
}

.kb-packBtnPrimary:hover {
	background: var(--kb-green);
	border-color: rgba(44,56,67,.30);
}

.kb-packBtnGhost {
	background: rgba(255,255,255,.80);
	color: var(--kb-navy);
}

.kb-packBtnGhost:hover {
	background: rgba(143,170,192,.20);
	border-color: rgba(44,56,67,.28);
}

/* Fine print */
.kb-packFine {
	margin: .7rem 0 0;
	color: rgba(44,56,67,.78);
	font-size: .9rem;
	line-height: 1.5;
}

/* Optional: If WP theme adds extra top/bottom margins around images/figures */
.kb-packAd figure {
	margin: 0;
}

.kb-packAd img {
	margin: 0;
}

/* === SAFETY: never hide x-overflow site-wide === */
html, body {
	overflow-x: visible !important;
}

/* === Only hide horizontal overflow on pages that truly need it === */
/* (example: your Hatsios tables page) */
body.page-id-1468 {
	overflow-x: hidden !important;
}

/* =========================================================
   PATCH — remove the extra inner box around the image + label
   (keeps position/centering exactly the same)
   ========================================================= */
.kb-packMedia {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* =========================================================
   Kotobakun — FAQ (Tables & Downloads) — NO  TAG
   ========================================================= */
.kb-faq {
	margin: 3rem 0;
	padding: 2rem 2.25rem;
	background: #ffffff;
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,.12);
	box-shadow: 0 10px 22px rgba(18,24,38,0.08);
}

.kb-faq * {
	box-sizing: border-box;
}

.kb-faqTitle {
	font-size: 1.05rem;
	margin: 0 0 1.25rem;
	font-weight: 900;
	color: #2C3843;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-family: Montserrat, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

.kb-faqItem {
	margin: 0 0 1.15rem;
	border-top: 1px solid rgba(251,190,1,.55);
	padding-top: 1rem;
}

.kb-faqItem:last-child {
	margin: 0;
}

.kb-faqQ {
	list-style: none;
	font-size: 1.05rem;
	margin: 0;
	font-weight: 800;
	color: #111827;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: Montserrat, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* Remove default marker */
.kb-faqQ::-webkit-details-marker {
	display: none;
}

.kb-faqQ::marker {
	content: "";
}

/* Chevron */
.kb-faqChevron {
	font-size: 1.05rem;
	color: #8FAAC0;
	line-height: 1;
	transform: rotate(0deg);
	transition: transform .16s ease;
	flex: 0 0 auto;
}

details[open] .kb-faqChevron {
	transform: rotate(180deg);
}

.kb-faqA {
	margin-top: .65rem;
	border-left: 6px solid #FBBE01;
	padding-left: 12px;
	color: rgba(17,24,39,.80);
	font-size: .98rem;
	line-height: 1.7;
	font-family: 'Noto Serif JP', 'Noto Sans JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
}

.kb-faqA p {
	margin: .5rem 0 0;
}

.kb-faqA p:first-child {
	margin-top: 0;
}

.kb-faqQ:hover {
	opacity: .92;
}

/* Outer container: stop it expanding forever on large screens */
.kb-downloads-wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 2vw, 28px);
	padding-right: clamp(16px, 2vw, 28px);
}

/* Make the Columns layout spacing consistent */
.kb-downloads-wrap .wp-block-columns {
	gap: 32px;
	margin-top: 0;
	margin-bottom: 0;
}

/* Prevent “mystery overflow” differences across DPIs */
.kb-downloads-wrap .wp-block-columns,
.kb-downloads-wrap .wp-block-column {
	min-width: 0;
}

@media (max-width: 1100px) {
	.kb-downloads-wrap .wp-block-columns {
		flex-wrap: wrap;
	}
}

@media (max-width: 780px) {
	.kb-downloads-wrap .wp-block-columns {
		gap: 22px;
	}
}

/* Outer container: stop it expanding forever on large screens */
.kb-downloads-wrap {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(16px, 2vw, 28px);
	padding-right: clamp(16px, 2vw, 28px);
}

/* Turn the Columns wrapper into a responsive grid */
.kb-downloads-wrap .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
	gap: 32px;
	align-items: stretch;
	margin-top: 0;
	margin-bottom: 0;
}

/* Make each column behave as a normal grid item */
.kb-downloads-wrap .wp-block-column {
	width: 100%;
	min-width: 0;
}

/* Back-to-top: ensure it's always tappable above overlays */
.kb-topBtn {
	pointer-events: auto !important;
}

/* Target should not create layout gaps */
#site-top {
	display: block;
	height: 0;
	width: 0;
	overflow: hidden;
}