/*!
 * GujoAnimes design system (v1.0)
 * Colours come from the Kadence global palette, so changing the palette in
 * Customizer › Colors restyles every page. Classes are added to blocks via
 * "Advanced › Additional CSS class(es)" in the block editor.
 *
 * palette1 primary violet · palette2 violet hover · palette3 headings
 * palette4 strong text · palette5 body · palette6 muted · palette7 borders
 * palette8 light background · palette9 white · palette10 sakura pink
 * palette11 gold · palette12 deep indigo · palette14 cream
 */
:root {
	--gj-primary: var(--global-palette1, #5b34c4);
	--gj-primary-dark: var(--global-palette2, #4421a3);
	--gj-ink: var(--global-palette3, #1a1238);
	--gj-text: var(--global-palette5, #4b4668);
	--gj-muted: var(--global-palette6, #7d7899);
	--gj-line: var(--global-palette7, #ece7fa);
	--gj-soft: var(--global-palette8, #f7f5fd);
	--gj-white: var(--global-palette9, #fff);
	--gj-pink: var(--global-palette10, #e8508a);
	--gj-gold: var(--global-palette11, #f5b942);
	--gj-night: var(--global-palette12, #24175c);
	--gj-cream: var(--global-palette14, #fff6ec);
	--gj-radius: 18px;
	--gj-radius-sm: 12px;
	--gj-shadow: 0 1px 2px rgba(26, 18, 56, .06), 0 8px 28px rgba(26, 18, 56, .08);
	--gj-shadow-hover: 0 2px 4px rgba(26, 18, 56, .08), 0 18px 40px rgba(91, 52, 196, .18);
	--gj-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
	--gj-jp-serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}

/* ---------- Base polish ---------- */
.entry-content :where(h2, h3) { scroll-margin-top: 110px; }
.entry-content :where(h1, h2) { text-wrap: balance; }
.entry-content :where(p, li) { text-wrap: pretty; }
[lang="ja"] { font-family: var(--gj-jp); }
.entry-content a:not(.kb-button):not(.wp-block-button__link):not(.gj-tool-card) { text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(.entry-content) ::selection { background: rgba(232, 80, 138, .2); }

/* ---------- Hero ---------- */
.gj-hero { position: relative; overflow: hidden; isolation: isolate; }
.gj-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
	background-image:
		radial-gradient(ellipse 7px 4px at 12% 22%, rgba(255,255,255,.55) 98%, transparent),
		radial-gradient(ellipse 6px 4px at 82% 14%, rgba(255,255,255,.5) 98%, transparent),
		radial-gradient(ellipse 8px 5px at 68% 72%, rgba(255,255,255,.4) 98%, transparent),
		radial-gradient(ellipse 5px 3px at 30% 80%, rgba(255,255,255,.45) 98%, transparent),
		radial-gradient(ellipse 6px 4px at 92% 56%, rgba(255,255,255,.4) 98%, transparent),
		radial-gradient(ellipse 5px 3px at 48% 12%, rgba(255,255,255,.45) 98%, transparent);
}
.gj-hero .rank-math-breadcrumb, .gj-hero .rank-math-breadcrumb a { color: rgba(255,255,255,.82); }
.gj-hero .rank-math-breadcrumb a:hover { color: #fff; }
.gj-eyebrow {
	display: inline-flex; align-items: center; gap: .4em; margin: 0 0 .9rem; padding: .35em .9em;
	border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25);
}
.gj-eyebrow--light { background: rgba(91,52,196,.08); color: var(--gj-primary); border-color: rgba(91,52,196,.18); }
.gj-hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.gj-hero-meta li { display: inline-flex; align-items: center; gap: .45em; margin: 0; }
.gj-hero-meta li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--gj-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2324175c' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/12px no-repeat; }
.gj-hero-figure img { border-radius: 22px; box-shadow: 0 24px 60px rgba(10, 4, 40, .45); }

/* Text on dark backgrounds (add class gj-on-dark to a column or group) */
.gj-on-dark, .gj-on-dark :where(h1, h2, h3, h4, p, li, a, em, strong) { color: #fff; }
.gj-on-dark .gj-lead { color: rgba(255,255,255,.88); font-size: clamp(1.05rem, 1.6vw, 1.2rem); }
.gj-on-dark h1, .gj-on-dark h1.wp-block-heading { margin-top: 0 !important; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; margin: 0 0 1rem; letter-spacing: -.02em; }
.gj-on-dark .gj-updated { color: rgba(255,255,255,.7); margin: 0; }
.gj-hero .gj-tool-wrap { margin-top: .5rem; }

/* ---------- Breadcrumbs (Rank Math) ---------- */
.rank-math-breadcrumb { font-size: .875rem; margin: 0 0 1rem; }
.rank-math-breadcrumb p { margin: 0; }
.rank-math-breadcrumb .separator { opacity: .6; padding: 0 .35em; }

/* ---------- Section heading helpers ---------- */
.gj-kicker { display: block; margin: 0 0 .4rem; color: var(--gj-pink); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.gj-lead { font-size: 1.125rem; color: var(--gj-text); }
.gj-updated { font-size: .875rem; opacity: .85; }

/* ---------- Content card / panel ---------- */
.gj-panel {
	background: var(--gj-white); border: 1px solid var(--gj-line); border-radius: var(--gj-radius);
	box-shadow: var(--gj-shadow); padding: clamp(1.25rem, 3vw, 2rem);
}
.gj-panel > :first-child { margin-top: 0; }
.gj-panel > :last-child { margin-bottom: 0; }

.gj-panel--boy { border-top: 4px solid #3b74e0; }
.gj-panel--girl { border-top: 4px solid var(--gj-pink); }
.gj-panel--unisex { border-top: 4px solid #13a37a; }
.gj-panel--accent { border-left: 5px solid var(--gj-primary); background: linear-gradient(180deg, #fbfaff, #fff); }
.gj-panel h3 { margin-top: 0; }
.kb-row-layout-wrap .wp-block-kadence-column > .kt-inside-inner-col > .gj-panel:only-child { height: 100%; }

/* ---------- Numbered steps (core/list ordered + class gj-steps) ---------- */
.entry-content ol.gj-steps, ol.gj-steps { margin-left: 0 !important; padding-left: 0 !important; }
ol.gj-steps { list-style: none; counter-reset: gjstep; padding: 0; margin: 1.5rem 0; display: grid; gap: 1rem; }
ol.gj-steps > li {
	counter-increment: gjstep; position: relative; margin: 0; padding: 1.1rem 1.25rem 1.1rem 4.25rem;
	background: var(--gj-white); border: 1px solid var(--gj-line); border-radius: var(--gj-radius-sm); box-shadow: var(--gj-shadow);
}
ol.gj-steps > li::before {
	content: counter(gjstep); position: absolute; left: 1.1rem; top: 1rem; width: 2.25rem; height: 2.25rem; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; color: #fff;
	background: linear-gradient(135deg, var(--gj-primary), var(--gj-pink));
}
ol.gj-steps > li strong:first-child { color: var(--gj-ink); }

/* ---------- Callouts ---------- */
.gj-callout {
	position: relative; border-radius: var(--gj-radius-sm); padding: 1.1rem 1.25rem 1.1rem 3.5rem;
	background: var(--gj-cream); border: 1px solid #f6dfc2; color: var(--gj-ink);
}
.gj-callout::before {
	content: ""; position: absolute; left: 1.1rem; top: 1.15rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
	background: var(--gj-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2324175c' d='M11 7h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E") center/18px no-repeat;
}
.gj-callout > :last-child { margin-bottom: 0; }
.gj-callout--info { background: #f1edff; border-color: #ddd3ff; }
.gj-callout--info::before { background-color: var(--gj-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11 7h2v2h-2zm0 4h2v6h-2z'/%3E%3C/svg%3E"); }

/* ---------- Fact box ---------- */
.gj-factbox {
	border-radius: var(--gj-radius); overflow: hidden; border: 1px solid var(--gj-line); background: var(--gj-white); box-shadow: var(--gj-shadow);
}
.gj-factbox ul { margin: 0; padding-left: 1.2em; }
.gj-factbox li { margin: .45em 0; }
.gj-factbox li::marker { color: var(--gj-pink); }
.gj-source { font-size: .85rem; color: var(--gj-muted); }

/* ---------- Tables (core/table + class gj-table) ---------- */
.gj-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--gj-radius-sm); border: 1px solid var(--gj-line); box-shadow: var(--gj-shadow); background: var(--gj-white); margin: 1.5rem 0; }
.gj-table table { width: 100%; min-width: 560px; border-collapse: collapse; border: 0; margin: 0; font-size: .95rem; }
.gj-table thead { border: 0; }
.wp-block-table.gj-table th, .wp-block-table.gj-table td { border: 0; }
.wp-block-table.gj-table td { border-top: 1px solid var(--gj-line); }
.gj-table th { background: var(--gj-night); color: #fff; text-align: left; font-weight: 700; padding: .85rem 1rem; border: 0; font-size: .85rem; letter-spacing: .02em; }
.gj-table td { padding: .8rem 1rem; border: 0; border-top: 1px solid var(--gj-line); vertical-align: top; }
.gj-table tbody tr:nth-child(even) td { background: var(--gj-soft); }
.gj-table tbody tr:hover td { background: #f0ebff; }
.gj-table td:first-child { font-weight: 700; color: var(--gj-ink); }
.gj-table td:nth-child(2) { font-family: var(--gj-jp); font-size: 1.1em; }
.gj-table.gj-table--plain td:nth-child(2) { font-family: inherit; font-size: inherit; }
.gj-table figcaption { padding: .6rem 1rem; font-size: .85rem; color: var(--gj-muted); text-align: left; margin: 0; }

/* ---------- Role cards (hero / villain / rival / cute) ---------- */
.entry-content ul.gj-role-list, .gj-role-list { margin-left: 0 !important; padding-left: 0 !important; }
.gj-role-list { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.gj-role-list > li {
	margin: 0; padding: 1.1rem 1.2rem; border-radius: var(--gj-radius-sm); background: var(--gj-white); border: 1px solid var(--gj-line);
	box-shadow: var(--gj-shadow); border-top: 4px solid var(--gj-primary);
}
.gj-role-list > li:nth-child(2) { border-top-color: #2b1d3d; }
.gj-role-list > li:nth-child(3) { border-top-color: var(--gj-gold); }
.gj-role-list > li:nth-child(4) { border-top-color: var(--gj-pink); }
.gj-role-list > li strong:first-child { display: block; font-size: 1.05rem; color: var(--gj-ink); margin-bottom: .25rem; }

/* ---------- Tool card grid (related tools) ---------- */
.gj-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
.gj-tool-card {
	display: flex; flex-direction: column; background: var(--gj-white); border: 1px solid var(--gj-line); border-radius: var(--gj-radius);
	overflow: hidden; box-shadow: var(--gj-shadow); transition: transform .2s ease, box-shadow .2s ease; color: inherit; text-decoration: none; height: 100%;
}
a.gj-tool-card:hover, a.gj-tool-card:focus-visible { transform: translateY(-3px); box-shadow: var(--gj-shadow-hover); }
.gj-tool-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0; }
.gj-tool-card__body { padding: .9rem 1rem 1.1rem; }
.gj-tool-card__title { margin: 0 0 .25rem; font-size: 1rem; line-height: 1.3; color: var(--gj-ink); font-weight: 700; }
.gj-tool-card__text { margin: 0; font-size: .9rem; color: var(--gj-muted); line-height: 1.45; }
.gj-tool-card__soon { display: inline-block; margin-top: .6rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gj-primary); background: rgba(91,52,196,.08); padding: .25em .6em; border-radius: 999px; }
/* block-built version (core/columns of images) */
.gj-tool-tile { background: var(--gj-white); border: 1px solid var(--gj-line); border-radius: var(--gj-radius); overflow: hidden; box-shadow: var(--gj-shadow); height: 100%; transition: transform .2s ease, box-shadow .2s ease; }
.gj-tool-tile:hover { transform: translateY(-3px); box-shadow: var(--gj-shadow-hover); }
.gj-tool-tile figure, .gj-tool-tile .wp-block-image { margin: 0 !important; }
.gj-tool-tile img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 0 !important; }
.gj-tool-tile :is(h3, p) { padding-left: 1rem; padding-right: 1rem; }
.gj-tool-tile h3, .gj-tool-tile .gj-tool-card__title { margin: .9rem 0 .25rem !important; font-size: 1rem !important; line-height: 1.3; }
.gj-tool-tile p { margin: 0 0 1rem !important; font-size: .9rem; color: var(--gj-muted); line-height: 1.45; }
.gj-tool-tile p.gj-tool-card__soon { display: inline-block; width: auto; white-space: nowrap; margin: -0.4rem 1rem 1rem !important; padding: .25em .6em; font-size: .7rem; color: var(--gj-primary); }

.gj-tool-grid-block { margin-top: 1.5rem; }
.gj-tool-grid-block > .gj-tool-tile { margin: 0 !important; }

/* ---------- FAQ (Kadence accordion + class gj-faq) ---------- */
.gj-faq .kt-accordion-pane { border-radius: var(--gj-radius-sm) !important; overflow: hidden; box-shadow: var(--gj-shadow); }
.gj-faq .kt-blocks-accordion-header { font-weight: 700 !important; }

/* ---------- Image frames ---------- */
.gj-frame img { border-radius: var(--gj-radius); box-shadow: var(--gj-shadow); }
.gj-frame figcaption { font-size: .85rem; color: var(--gj-muted); }

/* ---------- Footer & header helpers ---------- */
.site-footer :where(h2, h3, h4, .wp-block-heading) { color: #fff; font-size: 1.05rem; margin: 0 0 .9rem; }
.site-footer .wp-block-list { margin: 0; padding-left: 0; list-style: none; }
.site-footer .wp-block-list li { margin: 0 0 .5rem; }
.site-footer .gj-footer-brand h3 { font-size: 1.35rem; }
.site-footer .gj-footer-brand p { max-width: 34em; }
/* same-page anchor items should not all look "current" */
.header-navigation .current-menu-item > a[href*="#"], .mobile-navigation .current-menu-item > a[href*="#"] { color: inherit; }
.gj-footer-note { font-size: .875rem; opacity: .85; }
.site-branding .site-title { letter-spacing: -.01em; }

@media (max-width: 600px) {
	.gj-tool-grid-block { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .75rem !important; }
	.gj-tool-tile :is(h3, p) { padding-left: .75rem; padding-right: .75rem; }
	.gj-tool-tile p.gj-tool-card__soon { margin-left: .75rem !important; }
}
@media (max-width: 767px) {
	.site-footer .site-bottom-footer-inner-wrap { text-align: center; }
	ol.gj-steps > li { padding: 1rem 1rem 1rem 3.6rem; }
	ol.gj-steps > li::before { left: .85rem; width: 2rem; height: 2rem; }
	.gj-callout { padding-left: 3.1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.gj-tool-card, .gj-tool-tile { transition: none; }
}

/* ---------- Block editor preview helpers ---------- */
.editor-styles-wrapper .gj-hero :is(h1, .gj-updated, .gj-lead) { color: #fff; }
.editor-styles-wrapper .gj-hero .gj-lead { color: rgba(255,255,255,.88); }

/* A-Z table row highlight when jumped to */
.gj-az tr.is-hit td { background: #fff3c4 !important; transition: background .3s; }

/* Header: keep the 7-item main menu on one line on small laptops (1025-1279px). */
@media (min-width: 1025px) and (max-width: 1279px) {
	.header-navigation .header-menu-container > ul > li > a { padding-left: .45em !important; padding-right: .45em !important; font-size: 13.5px !important; }
	.site-header .header-button { white-space: nowrap; padding: .55em 1em !important; font-size: 14px !important; }
}
@media (min-width: 1025px) and (max-width: 1179px) {
	.site-header .site-header-item:has(> .header-button-wrap) { display: none !important; }
}