/*
Theme Name:        Axismundi
Theme URI:         https://github.com/Jiwoon-Kim/axismundi/tree/main/products/distributables/themes/axismundi
Author:            KIM JIWOON
Author URI:        https://designbusan.ai.kr
Description:       A Material Design 3 block theme built on WordPress core blocks rather than around them. The Material token system -- color roles, type scale, corner shape, motion, elevation, and state layers -- is declared in theme.json and Global Styles, so the editor offers the same palette, sizes, and block styles the front end renders, and your changes stay in the design system. Ships templates and patterns for posts, archives, search, comments, and a magazine front page, with light and dark colour schemes and bundled Roboto Flex, Roboto Serif, Roboto Mono, and Material Symbols. Optional Axismundi companion plugins on WordPress.org extend navigation icons, dialogs, media, and more; the theme is complete without them.
Requires at least: 7.0
Tested up to:      7.1
Requires PHP:      8.1
Version:           0.1.16
License:           GPL-3.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:       axismundi
Tags:              block-patterns, block-styles, blog, custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, template-editing, threaded-comments, translation-ready, wide-blocks
*/

/* ============================================================
 * Global HTML semantic glue.
 *
 * Enqueued on the front (functions.php) and mirrored into the editor canvas
 * (add_editor_style). Kept intentionally tiny: document-wide baselines for raw
 * standard HTML elements that can arrive from any source (Custom HTML block,
 * markdown, federated content). Block-specific pseudo / specificity fixes live
 * in assets/styles/blocks.text.css; component styling in components.*.css.
 * Rendering only — authoring tools (e.g. a <mark> toolbar format, an <abbr>
 * title editor) are a separate RichText plugin concern.
 * ============================================================ */

/* Smooth in-page anchor scrolling — TOC links, hash navigation, "back to top".
 * This is document-wide UX owned by the theme, not any single block, so a TOC
 * plugin must not preventDefault + scroll to own it. Disabled under reduced motion.
 * scroll-behavior applies to the scroll container, which for the page is :root. */
:root {
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	:root {
		scroll-behavior: auto;
	}
}

/* Anchor landing offset for in-content headings. A clicked TOC link (or any hash
 * jump) lands the heading 15% down the viewport — intentionally a touch above the
 * TOC scroll-spy active line (axismundi/toc view.js, innerHeight * 0.2), so a
 * clicked heading settles just above the line, which reads better. :where() keeps
 * specificity at 0 so a block-level scroll-margin override still wins. */
:where(.wp-block-post-content) :is(h2, h3, h4, h5, h6) {
	scroll-margin-top: 15vh;
}

/* Mixed-script wrapping: Korean stays word-grouped while long Latin tokens,
 * URLs, and handles can still break safely on narrow viewports. */
body {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* Content lists — front-end query templates render posts inside
 * `ul.wp-block-post-template > li`, which makes browser UA rules treat the
 * first content list as a nested `ul`. Reset marker depth at post-content root. */
ul.wp-block-list:not([class*="is-style-"]) {
	list-style-type: disc;
}
ul.wp-block-list:not([class*="is-style-"]) ul {
	list-style-type: circle;
}
ul.wp-block-list:not([class*="is-style-"]) ul ul {
	list-style-type: square;
}

/* <mark> — highlight. M3 tertiary-container by default; :not([style]) so the
 * WordPress Highlight format's user-chosen inline colour is never overridden. */
mark:not([style]) {
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
	padding-inline: 0.2em;
	border-radius: 4px;
}

/* <abbr title> — dotted underline + help cursor (the title is the affordance). */
abbr[title] {
	text-decoration: underline dotted;
	text-decoration-skip-ink: auto;
	text-underline-offset: 2px;
	cursor: help;
}

/* <details>/<summary> — disclosure surface for raw HTML, Custom HTML, and
 * attachment metadata. The core/details block mirrors these tokens in
 * theme.json so the Site Editor controls and Stylebook stay in sync. */
details {
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 8px;
	background-color: var(--wp--preset--color--surface-container-low);
	color: var(--wp--preset--color--on-surface);
}
details[open] {
	padding-block-end: var(--wp--preset--spacing--200);
}
details[open]:has(> pre:last-child) {
	padding-block-end: 0;
}
details > summary {
	cursor: pointer;
	padding: var(--wp--preset--spacing--150) var(--wp--preset--spacing--200);
	color: var(--wp--preset--color--on-surface-variant);
	font-weight: 500;
}
details > :not(summary) {
	margin-inline: var(--wp--preset--spacing--200);
}
details > summary + *,
.wp-block-details > summary + * {
	margin-block-start: 0;
}
details > :last-child {
	margin-block-end: 0;
}
details > pre,
details > pre.wp-block-code,
details > pre.wp-block-preformatted,
details > pre:not([class*="wp-block"]) {
	margin: 0;
	margin-inline: 0;
	padding: var(--wp--preset--spacing--200);
	border-start-start-radius: 0;
	border-start-end-radius: 0;
	border-end-start-radius: 8px;
	border-end-end-radius: 8px;
	background-color: var(--wp--preset--color--surface-container-high);
}

/* <figcaption> / <caption> — standard caption semantics for raw figures and
 * tables. WordPress' `elements.caption` styles `.wp-element-caption`, but raw
 * HTML captions from Custom HTML / markdown need the same baseline here. */
figcaption,
caption {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--body-small);
	line-height: 1.333;
	letter-spacing: 0.4px;
	text-align: center;
}
figcaption {
	margin-block-start: var(--wp--preset--spacing--100);
}
caption {
	caption-side: bottom;
	margin-block-start: var(--wp--preset--spacing--100);
}

/* <hr> / core/separator — M3 divider: a 1dp full-width line in outline-variant
 * (m3.material.io/components/divider/specs). One baseline drives both the raw
 * <hr> and core/separator, which renders <hr class="wp-block-separator"> — so
 * the separator no longer needs its own theme.json css. Core forces
 * border-top:2px on the block class, so border:0 + the class match here override
 * it; is-style-dots keeps its decorative core styling.
 *
 * The line is a content-box-clipped background, not a border, so the inset /
 * middle-inset variations can shrink the visible line with padding while the
 * element box stays full-width. That matters because the block editor centres
 * each block (max-width + margin:auto); margin/width-based insets get swallowed
 * by that centring (line stays full-width in the canvas), but padding on a
 * full-width box insets the painted line identically on the front and in the
 * editor. */
hr,
.wp-block-separator:not(.is-style-dots) {
	box-sizing: border-box;
	border: 0;
	block-size: 1px;
	background-color: var(--wp--preset--color--outline-variant);
	background-clip: content-box;
}

/* Media — keep raw img / picture / video / audio / iframe / embeds within the
 * content column on narrow viewports. Core media blocks are already responsive,
 * but Custom HTML / markdown / federated media arrive without those wrappers and
 * otherwise overflow horizontally. max-width:100% only constrains oversized
 * media, so small icons/images are untouched; height:auto keeps the aspect ratio
 * of images and video as they scale down. */
img,
picture,
video,
audio,
iframe,
embed,
object,
svg,
canvas {
	max-width: 100%;
	box-sizing: border-box;
}
img,
video {
	height: auto;
}
/* Block-level replaced media — <video>/<audio>/<iframe>/<embed>/<object> are
 * inline replaced elements by default, so the constrained layout's
 * margin-inline:auto can't centre them: bare (Custom HTML / markdown / federated)
 * media left-aligns in a wide content column while block siblings (<figure>,
 * <p>) centre correctly. Promote them to block so they sit in the content column
 * like everything else. <img>/<picture>/<svg> are deliberately left inline so
 * inline images in prose stay inline; block images arrive wrapped in <figure>. */
video,
audio,
iframe,
embed,
object {
	display: block;
	margin-inline: auto;
}
/* Avatars carry explicit width/height attributes and are a fixed size; opt them
 * out of the blanket shrink-to-fit above so a wide flex sibling (a long comment
 * body, a byline row) cannot squeeze the avatar below its size. TT5 ships no
 * blanket img rule so its avatars never hit this; ours does (for unwrapped
 * federated/markdown media), hence this targeted exception. */
.wp-block-avatar {
	flex-shrink: 0;
}
/* Native <audio>/<video> controls render inside a UA shadow DOM that page CSS
 * cannot reach, so color-scheme is the only real lever: it makes the browser
 * paint the controls in its dark or light skin to match the active theme.
 * accent-color is deliberately NOT set — it tints form controls (range,
 * checkbox, progress) but is ignored by media controls in current browsers, so
 * setting it here would be a misleading no-op. A fully M3-styled player would
 * need a custom JS player, which is out of scope for the theme. */
audio,
video {
	color-scheme: inherit;
}

/* iframe canvas — color-scheme on :root (set above for the native controls)
 * makes an iframe paint an OPAQUE Canvas background, which shows as a white box
 * behind transparent embeds and srcdoc content (a regression once the root
 * color-scheme landed; before it, iframe canvases were transparent). Opt iframes
 * back out with color-scheme:normal so the canvas is transparent again and the
 * embed shows on the page background. The embedded document keeps its own
 * scheme; only the iframe's backdrop is affected. */
iframe {
	color-scheme: normal;
}

/* WordPress image lightbox — core paints the backdrop as the global surface at
 * high opacity, which is a near-white canvas in light mode. Use the M3
 * scheme-neutral scrim (neutral-0) instead, with a stronger viewer dim.
 *
 * Two core behaviours force the exact form here:
 *  - The color is written as an inline style on .scrim, so background-color
 *    needs !important to win.
 *  - The `.scrim` opacity is driven by core's turn-on-visibility animation
 *    (forwards), which lands on opacity:1 and overrides any opacity declaration.
 * So the dim is baked into the color's alpha via color-mix rather than set
 * with `opacity`; the fade-in animation still plays. */
.wp-lightbox-overlay .scrim {
	background-color: color-mix(in srgb, var(--md-sys-color-scrim) 72%, transparent) !important;
}
.wp-lightbox-overlay :where(.wp-lightbox-close-button, .wp-lightbox-navigation-button) {
	box-sizing: border-box;
	padding: 0;
	border-radius: 9999px;
	background-color: transparent;
	color: #fff !important;
	fill: currentColor !important;
	transition:
		border-radius var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
		background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.wp-lightbox-overlay .wp-lightbox-close-button {
	inline-size: 40px;
	block-size: 40px;
	padding: var(--wp--preset--spacing--100) !important;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button {
	inline-size: 48px;
	block-size: 48px;
	padding: var(--wp--preset--spacing--100) !important;
}
.wp-lightbox-overlay :where(.wp-lightbox-close-button, .wp-lightbox-navigation-button):has(
		:where(.wp-lightbox-close-text, .wp-lightbox-navigation-text):not([hidden])
	) {
	min-inline-size: 40px;
	inline-size: max-content;
	gap: var(--wp--preset--spacing--100);
	padding-inline: var(--wp--preset--spacing--200) !important;
	font-size: var(--wp--preset--font-size--label-large);
	font-weight: 500;
	line-height: 1.429;
	letter-spacing: 0.1px;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button:has(.wp-lightbox-navigation-text:not([hidden])) {
	min-inline-size: 48px;
}
.wp-lightbox-overlay :where(.wp-lightbox-close-button, .wp-lightbox-navigation-button):hover {
	/* !important: core sets `.wp-lightbox-overlay .wp-lightbox-…-button:hover
	 * { background: none }` at (0,3,0), which our :where() rule (0,2,0) cannot
	 * beat — so the state layer needs !important, like the scrim above. */
	background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), transparent) !important;
}
.wp-lightbox-overlay :where(.wp-lightbox-close-button, .wp-lightbox-navigation-button):focus {
	background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), transparent) !important;
	outline: 3px solid currentColor;
	outline-offset: 2px;
}
.wp-lightbox-overlay :where(.wp-lightbox-close-button, .wp-lightbox-navigation-button):active {
	border-radius: 8px;
	background-color: color-mix(in srgb, currentColor calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent) !important;
}
.wp-lightbox-overlay .wp-lightbox-close-icon,
.wp-lightbox-overlay .wp-lightbox-navigation-icon {
	--md-icon-fill: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1em;
	block-size: 1em;
	overflow: hidden;
	color: #fff;
	font-size: var(--md-icon-size, 24px);
}
.wp-lightbox-overlay :where(.wp-lightbox-close-button, .wp-lightbox-navigation-button):is(:hover, :focus, :active)
	:where(.wp-lightbox-close-icon, .wp-lightbox-navigation-icon) {
	--md-icon-fill: 1;
}
.wp-lightbox-overlay .wp-lightbox-close-icon svg,
.wp-lightbox-overlay .wp-lightbox-navigation-icon svg {
	display: none !important;
}
.wp-lightbox-overlay .wp-lightbox-close-icon::before,
.wp-lightbox-overlay .wp-lightbox-navigation-icon::before {
	font-family: "Material Symbols Outlined", sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 1em;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1em;
	block-size: 1em;
	overflow: hidden;
	white-space: nowrap;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-variation-settings:
		"FILL" var(--md-icon-fill, 0),
		"wght" var(--md-icon-wght, 400),
		"GRAD" var(--md-icon-grad, 0),
		"opsz" var(--md-icon-opsz, 24);
	transition: --md-icon-fill var(--md-sys-motion-duration-short3, 150ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}
.wp-lightbox-overlay .wp-lightbox-close-icon {
	--md-icon-size: 24px;
}
.wp-lightbox-overlay .wp-lightbox-close-icon::before {
	content: "\e5cd"; /* Material Symbols: close */
}
.wp-lightbox-overlay .wp-lightbox-navigation-icon {
	--md-icon-size: 32px;
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev .wp-lightbox-navigation-icon::before {
	content: "\e5cb"; /* Material Symbols: chevron_left */
}
.wp-lightbox-overlay .wp-lightbox-navigation-button-next .wp-lightbox-navigation-icon::before {
	content: "\e5cc"; /* Material Symbols: chevron_right */
}

/* Raw <table> — Custom HTML / markdown / federated content. Core/table exposes
 * its editable source in theme.json and gets WordPress-specific resets in
 * blocks.table.css; this global semantic baseline is for ordinary HTML tables
 * that arrive without a block wrapper. */
table {
	box-sizing: border-box;
	inline-size: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: 8px;
	color: var(--wp--preset--color--on-surface);
	font-size: var(--wp--preset--font-size--body-medium);
	line-height: 1.429;
	letter-spacing: 0.25px;
}
:where(th, td) {
	box-sizing: border-box;
	background-clip: padding-box;
	text-align: start;
	vertical-align: top;
	padding-block: var(--wp--preset--spacing--150);
	padding-inline: var(--wp--preset--spacing--200);
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--outline-variant);
	border-inline-end: 1px solid var(--wp--preset--color--outline-variant);
}
th {
	background-color: var(--wp--preset--color--surface-container-high);
	font-weight: 500;
}
tr > :where(th, td):last-child {
	border-inline-end: 0;
}
tbody tr:last-child > :where(th, td) {
	border-block-end: 0;
}
thead :where(th, td) {
	border-block-end: 1px solid var(--wp--preset--color--outline);
}
thead tr:first-child > :where(th, td):first-child {
	border-start-start-radius: 7px;
}
thead tr:first-child > :where(th, td):last-child {
	border-start-end-radius: 7px;
}
tfoot tr:first-child > :where(th, td) {
	border-block-start: 1px solid var(--wp--preset--color--outline);
}
tfoot tr:last-child > :where(th, td) {
	border-block-end: 0;
}

/* Raw <blockquote> — match core/quote's emphasis bar for Custom HTML,
 * markdown, and federated content without touching pullquote's nested quote. */
blockquote:not([class*="wp-block"]):not(.wp-block-pullquote blockquote) {
	margin-inline: 0;
	padding-block: var(--wp--preset--spacing--100);
	padding-inline-start: var(--wp--preset--spacing--300);
	border-inline-start: 4px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-surface);
}
blockquote:not([class*="wp-block"]):not(.wp-block-pullquote blockquote) > p {
	margin-block: 0;
	color: inherit;
}
blockquote:not([class*="wp-block"]):not(.wp-block-pullquote blockquote) cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--100);
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--body-small);
	font-style: normal;
	font-weight: 400;
	line-height: 1.333;
	letter-spacing: 0.4px;
}

/* Text selection — global document affordance. */
::selection {
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

/* <code> — Roboto Mono everywhere; inline code (NOT inside <pre>) gets a small
 * surface-container pill. The core/code + core/preformatted blocks own their own
 * block layout, so `pre code` resets the inline pill back to flat. */
code {
	font-family: var(--wp--preset--font-family--roboto-mono);
}
:not(pre) > code {
	font-size: var(--wp--preset--font-size--body-medium);
	padding-inline: 0.3em;
	padding-block: 0.15em;
	border-radius: 4px;
	background-color: var(--wp--preset--color--surface-container);
	color: var(--wp--preset--color--on-surface);
}
pre code {
	padding: 0;
	border-radius: 0;
	background-color: transparent;
	color: inherit;
	font-size: inherit;
}

/* Raw <pre> — Custom HTML / markdown code blocks get the same mono card as
 * core/code and core/preformatted. Core blocks own their surface in theme.json
 * so Global Styles controls and Stylebook previews remain editable. */
pre:not([class*="wp-block"]) {
	display: block;
	overflow-x: auto;
	padding: var(--wp--preset--spacing--300);
	border-radius: 8px;
	background-color: var(--wp--preset--color--surface-container);
	color: var(--wp--preset--color--on-surface);
	font-family: var(--wp--preset--font-family--roboto-mono);
	font-size: var(--wp--preset--font-size--body-medium);
	tab-size: 2;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--outline-variant) transparent;
}
pre:not([class*="wp-block"])::-webkit-scrollbar {
	inline-size: 8px;
	block-size: 8px;
}
pre:not([class*="wp-block"])::-webkit-scrollbar-track {
	background: transparent;
}
pre:not([class*="wp-block"])::-webkit-scrollbar-thumb {
	background-color: var(--wp--preset--color--outline-variant);
	border-radius: 9999px;
}
pre:not([class*="wp-block"])::-webkit-scrollbar-thumb:hover {
	background-color: var(--wp--preset--color--outline);
}

/* <kbd> — key cap. Roboto Mono on a slightly higher surface with an inset
 * bottom hairline for the pressed-key affordance. */
kbd {
	font-family: var(--wp--preset--font-family--roboto-mono);
	font-size: var(--wp--preset--font-size--body-medium);
	padding-inline: 0.35em;
	padding-block: 0.15em;
	border-radius: 4px;
	background-color: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface);
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--outline-variant);
}