/*
Theme Name: Kanso Child
Template: kanso
Description: Kanso with a profile-style header: spaced all-caps nav, rounded banner image, overlapping avatar and tagline bio.
Version: 1.0.7
Requires at least: 6.5
Text Domain: kanso-child
License: GNU General Public License v2 or later
*/

/* ---------- Accent color ---------- */

:root {
	--kc-accent: #629479;
	--kc-accent-hover: color-mix(in srgb, var(--kc-accent) 80%, #000);
}

body {
	font-weight: 460;
}

/* Buttons */
body .wp-element-button,
body .wp-block-button__link {
	background-color: var(--kc-accent);
	border-color: var(--kc-accent);
	color: #fff;
}

body .wp-element-button:hover,
body .wp-block-button__link:hover,
body .wp-element-button:focus-visible,
body .wp-block-button__link:focus-visible {
	background-color: var(--kc-accent-hover);
	border-color: var(--kc-accent-hover);
	color: #fff;
}

/* Links in posts, pages and the bio */
body .wp-block-post-content a:where(:not(.wp-element-button)),
body .kc-bio a {
	color: var(--kc-accent);
	text-decoration-color: color-mix(in srgb, var(--kc-accent) 40%, transparent);
	transition: color var(--wp--custom--transition--duration) ease-out, text-decoration-color var(--wp--custom--transition--duration) ease-out;
}

body .wp-block-post-content a:where(:not(.wp-element-button)):hover,
body .kc-bio a:hover {
	color: var(--kc-accent-hover);
	text-decoration-color: currentColor;
}

/* Dates: spaced caps in the accent color, above the titles in post lists */
body .kc-byline,
body .kc-byline a {
	color: var(--kc-accent);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	text-decoration: none;
}

body .kc-byline a:hover {
	color: var(--kc-accent-hover);
}

/* Post lists placed inside a page (e.g. the Archive page): match Featured Posts,
   dark title links with accent caps dates */
body .wp-block-post-content .wp-block-post-title a {
	color: var(--wp--preset--color--theme-6);
	text-decoration: none;
}

body .wp-block-post-content .wp-block-post-date,
body .wp-block-post-content .wp-block-post-date a {
	color: var(--kc-accent);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	text-decoration: none;
}

/* ---------- Profile header ---------- */

/* Nav row: page links left, icon links right */
.kc-header .kc-nav-row {
	padding-bottom: var(--wp--preset--spacing--10);
}

.kc-nav a {
	text-decoration: none;
}

.kc-nav .current-menu-item > a,
.kc-nav a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: .5em;
}

.kc-social {
	margin: 0;
}

.kc-social .wp-social-link,
.kc-social .wp-social-link a {
	color: var(--wp--preset--color--theme-5) !important;
	transition: color var(--wp--custom--transition--duration) ease-out;
}

.kc-social .wp-social-link a:hover {
	color: var(--wp--preset--color--theme-6) !important;
}

.kc-header .kc-banner {
	margin: 0;
}

.kc-header .kc-banner img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 1;
	object-fit: cover;
	object-position: center bottom; /* trims from the top */
	border-radius: 14px;
}

/* Avatar sits half inside the banner */
.kc-header .kc-identity {
	position: relative;
	z-index: 1;
	margin-top: -38px !important;
	padding-left: var(--wp--preset--spacing--10);
	padding-right: var(--wp--preset--spacing--30);
	align-items: flex-end;
}

.kc-header .kc-identity .wp-block-site-logo img {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border: 4px solid var(--wp--preset--color--theme-1);
	box-sizing: border-box;
	background: var(--wp--preset--color--theme-1);
}

.kc-header .kc-identity .wp-block-site-title {
	margin: 0 0 8px auto;
	text-align: right;
	line-height: 1.2;
}

.kc-header .kc-identity .wp-block-site-title a {
	text-decoration: none;
}

@media (max-width: 480px) {
	.kc-header .kc-identity .wp-block-site-logo img {
		width: 64px;
		height: 64px;
	}

	.kc-header .kc-identity {
		margin-top: -32px !important;
	}
}

.kc-header .kc-identity .wp-block-site-title {
	font-weight: 600;
}

.kc-header .kc-bio {
	/* Flush with the banner, nav and section labels */
	padding-left: 0;
	padding-right: 0;
}

/* Section labels with a rule running to the right */
.kc-section-label {
	/* Equal space above and below each section label */
	margin-top: var(--wp--preset--spacing--30) !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.kc-section-label::after {
	content: "";
	flex: 1;
	border-top: 1px solid var(--wp--preset--color--theme-4);
}

/* Posts & pages: nav only, with a rule underneath */
.kc-header-minimal .kc-nav-rule {
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--theme-4);
	border-bottom: 0;
	opacity: 1;
}

/* Micro.blog icon (Font Awesome Free v7.3.1, CC BY 4.0 — https://fontawesome.com/license/free).
   WordPress has no Micro.blog social icon, so the link icon is swapped for this logo. */
.kc-social .kc-microblog svg {
	display: none;
}

.kc-social .kc-microblog a::before {
	content: "";
	display: block;
	width: 1.25em;
	height: 1.25em;
	margin: -0.125em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M495.8 426.2C525.3 391.5 542.9 347.9 542.9 300.4C542.9 187.4 443.3 96 320.4 96C197.5 96 98 187.5 98 300.4C98 413.3 197.6 504.9 320.5 504.9C347.5 504.9 374.4 500.4 399.9 491.5C401.3 491 402.9 491 404.4 491.4C405.9 491.8 407.1 492.8 408 494C426.6 519.1 455.6 536.7 487.9 543.9C489 544.1 490.2 543.9 491.2 543.3C492.2 542.7 492.9 541.7 493.1 540.5C493.2 539.9 493.2 539.2 493.1 538.6C493 538 492.7 537.4 492.3 536.9C480 520.9 473.6 501.1 474.3 480.9C475 460.7 482.7 441.4 496 426.2L495.8 426.3zM426 276.4L368.7 319.9L389.5 388.8C389.9 390.1 389.9 391.5 389.4 392.8C388.9 394.1 388.2 395.2 387.1 396C386 396.8 384.7 397.2 383.3 397.2C381.9 397.2 380.6 396.8 379.5 396L320.4 355L261.3 396.1C260.2 396.9 258.9 397.3 257.5 397.3C256.1 397.3 254.8 396.9 253.7 396.1C252.6 395.3 251.8 394.2 251.4 392.9C251 391.6 250.9 390.2 251.3 388.9L272.1 320L214.8 276.5C213.7 275.7 212.9 274.6 212.5 273.3C212.1 272 212.1 270.6 212.5 269.3C212.9 268 213.7 266.9 214.8 266.1C215.9 265.3 217.2 264.8 218.5 264.8L290.4 263.3L314.1 195.4C314.5 194.1 315.4 193 316.5 192.2C317.6 191.4 318.9 191 320.3 191C321.7 191 323 191.4 324.1 192.2C325.2 193 326 194.1 326.5 195.4L350.2 263.3L422.1 264.8C423.5 264.8 424.8 265.2 425.9 266C427 266.8 427.8 267.9 428.2 269.2C428.6 270.5 428.6 271.9 428.2 273.2C427.8 274.5 427 275.6 425.9 276.5L425.9 276.5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M495.8 426.2C525.3 391.5 542.9 347.9 542.9 300.4C542.9 187.4 443.3 96 320.4 96C197.5 96 98 187.5 98 300.4C98 413.3 197.6 504.9 320.5 504.9C347.5 504.9 374.4 500.4 399.9 491.5C401.3 491 402.9 491 404.4 491.4C405.9 491.8 407.1 492.8 408 494C426.6 519.1 455.6 536.7 487.9 543.9C489 544.1 490.2 543.9 491.2 543.3C492.2 542.7 492.9 541.7 493.1 540.5C493.2 539.9 493.2 539.2 493.1 538.6C493 538 492.7 537.4 492.3 536.9C480 520.9 473.6 501.1 474.3 480.9C475 460.7 482.7 441.4 496 426.2L495.8 426.3zM426 276.4L368.7 319.9L389.5 388.8C389.9 390.1 389.9 391.5 389.4 392.8C388.9 394.1 388.2 395.2 387.1 396C386 396.8 384.7 397.2 383.3 397.2C381.9 397.2 380.6 396.8 379.5 396L320.4 355L261.3 396.1C260.2 396.9 258.9 397.3 257.5 397.3C256.1 397.3 254.8 396.9 253.7 396.1C252.6 395.3 251.8 394.2 251.4 392.9C251 391.6 250.9 390.2 251.3 388.9L272.1 320L214.8 276.5C213.7 275.7 212.9 274.6 212.5 273.3C212.1 272 212.1 270.6 212.5 269.3C212.9 268 213.7 266.9 214.8 266.1C215.9 265.3 217.2 264.8 218.5 264.8L290.4 263.3L314.1 195.4C314.5 194.1 315.4 193 316.5 192.2C317.6 191.4 318.9 191 320.3 191C321.7 191 323 191.4 324.1 192.2C325.2 193 326 194.1 326.5 195.4L350.2 263.3L422.1 264.8C423.5 264.8 424.8 265.2 425.9 266C427 266.8 427.8 267.9 428.2 269.2C428.6 270.5 428.6 271.9 428.2 273.2C427.8 274.5 427 275.6 425.9 276.5L425.9 276.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tags at the end of a post: tinted pills with a # */
.kc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.kc-tags .wp-block-post-terms__separator {
	display: none;
}

body .kc-tags a {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	line-height: 1.4;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--kc-accent) 13%, transparent);
	color: color-mix(in srgb, var(--kc-accent) 70%, var(--wp--preset--color--theme-6));
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--wp--custom--transition--duration) ease-out, color var(--wp--custom--transition--duration) ease-out;
}

body .kc-tags a::before {
	content: "#";
	opacity: 0.6;
}

body .kc-tags a:hover {
	background: var(--kc-accent);
	color: #fff;
}

/* Previous / next post links below a post */
.kc-post-nav {
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--theme-4);
}

.kc-post-nav .wp-block-post-navigation-link {
	flex: 1 1 0;
	min-width: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.4rem;
	align-items: baseline;
	line-height: 1.4;
}

.kc-post-nav .post-navigation-link-next {
	grid-template-columns: 1fr auto;
	text-align: right;
}

/* Small accent caps label above each title */
.kc-post-nav .wp-block-post-navigation-link::before {
	grid-column: 1 / -1;
	margin-bottom: 0.35rem;
	color: var(--kc-accent);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.kc-post-nav .post-navigation-link-previous::before {
	content: "Previous";
}

.kc-post-nav .post-navigation-link-next::before {
	content: "Next";
}

.kc-post-nav .post-navigation-link-next .wp-block-post-navigation-link__arrow-next {
	grid-column: 2;
	grid-row: 2;
}

.kc-post-nav .wp-block-post-navigation-link a {
	color: var(--wp--preset--color--theme-6);
	font-weight: 500;
	text-decoration: none;
}

.kc-post-nav .wp-block-post-navigation-link a:hover {
	color: var(--kc-accent);
}

.kc-post-nav [class*="__arrow"] {
	color: var(--kc-accent);
}