/*
Theme Name: Kimono Seikatsu
Theme URI: https://www.kimonoseikatsu.com
Author: Kimono Seikatsu
Description: A block theme for Kimono Seikatsu — wisteria and indigo natural-dye colors, subtle traditional patterns (asa no ha, shippō, seigaiha, yabane, karakusa), a noren-curtain hero and layered-collar (kasane) image frames. Build new pages from the "Kimono Seikatsu" patterns in the block editor.
Version: 1.3.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kimono-seikatsu
Tags: block-patterns, full-site-editing, custom-colors, editor-style, wide-blocks
*/

/* ------------------------------------------------------------------
   Basics
------------------------------------------------------------------ */
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* Links inside dark sections stay readable */
.has-ai-background-color a:not(.wp-element-button),
.has-ai-night-background-color a:not(.wp-element-button),
.has-fuji-deep-background-color a:not(.wp-element-button),
.is-style-asanoha-dark a:not(.wp-element-button) {
	color: var(--wp--preset--color--paper);
}

/* Outline button */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 1.5px solid currentColor;
	color: var(--wp--preset--color--ai);
	padding: 14.5px 26.5px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--ai);
	border-color: var(--wp--preset--color--ai);
	color: var(--wp--preset--color--white);
}
.has-ai-background-color .wp-block-button.is-style-outline > .wp-block-button__link,
.is-style-asanoha-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--paper);
}

/* ------------------------------------------------------------------
   Header & footer
------------------------------------------------------------------ */
.ks-header { border-bottom: 1px solid var(--wp--preset--color--border); }
.ks-header .wp-block-navigation a:hover { color: var(--wp--preset--color--fuji-deep); }
.ks-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--fuji-deep);
	font-weight: 700;
	border-bottom: 2px solid currentColor;
}
.ks-footer a { color: var(--wp--preset--color--kinu); text-decoration: none; }
.ks-footer a:hover { color: var(--wp--preset--color--white); text-decoration: underline; }
.ks-footer .ks-footer-bottom { border-top: 1px solid #4A5070; padding-top: 22px; }

/* ------------------------------------------------------------------
   Paragraph styles
------------------------------------------------------------------ */
.is-style-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--fuji-deep);
}
.is-style-jp-subtitle {
	font-family: var(--wp--preset--font-family--mincho);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: .1em;
	color: var(--wp--preset--color--fuji-deep);
}
.is-style-tategaki {
	writing-mode: vertical-rl;
	font-family: var(--wp--preset--font-family--mincho);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .5em;
	color: var(--wp--preset--color--fuji-deep);
	border-left: 1px solid var(--wp--preset--color--fuji);
	padding-left: 12px;
	margin: 0;
	flex: none;
}
.is-style-kamon {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--fuji-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--brush);
	font-size: 46px;
	line-height: 1;
	margin-left: auto !important;
	margin-right: auto !important;
}
.is-style-seal {
	box-sizing: content-box;
	width: 2em;
	padding: 4px;
	border: 2px solid currentColor;
	border-radius: 5px;
	font-family: var(--wp--preset--font-family--brush);
	font-size: 18px;
	line-height: 1.05;
	letter-spacing: 0;
	text-align: center;
	word-break: break-all;
	color: var(--wp--preset--color--fuji-deep);
	margin: 0;
}
.is-style-seal a { color: inherit !important; text-decoration: none; }
.is-style-big-number {
	font-family: var(--wp--preset--font-family--mincho);
	font-weight: 800;
	font-size: 64px;
	line-height: 1;
	color: var(--wp--preset--color--fuji-pale);
}
.is-style-brush {
	font-family: var(--wp--preset--font-family--brush);
	font-size: 52px;
	line-height: 1;
	color: var(--wp--preset--color--fuji-deep);
}
.is-style-arrow-link { font-weight: 700; }
.is-style-arrow-link a {
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
}

/* ------------------------------------------------------------------
   Kasane (layered collar) image frames
------------------------------------------------------------------ */
.wp-block-image.is-style-kasane { margin: 0 0 30px 30px; }
.wp-block-image.is-style-kasane-right { margin: 0 30px 30px 0; }
.wp-block-image.is-style-kasane img,
.wp-block-image.is-style-kasane-right img {
	display: block;
	width: 100%;
	object-fit: cover;
}
.wp-block-image.is-style-kasane img {
	box-shadow:
		-10px 10px 0 var(--wp--preset--color--fuji-pale),
		-20px 20px 0 var(--wp--preset--color--fuji),
		-30px 30px 0 var(--wp--preset--color--ai);
}
.wp-block-image.is-style-kasane-right img {
	box-shadow:
		10px 10px 0 var(--wp--preset--color--fuji-pale),
		20px 20px 0 var(--wp--preset--color--asagi),
		30px 30px 0 var(--wp--preset--color--ai);
}
/* On indigo backgrounds the layers turn light */
.is-style-asanoha-dark .wp-block-image.is-style-kasane-right img,
.has-ai-background-color .wp-block-image.is-style-kasane-right img {
	box-shadow:
		10px 10px 0 var(--wp--preset--color--fuji),
		20px 20px 0 var(--wp--preset--color--fuji-pale),
		30px 30px 0 var(--wp--preset--color--washi);
}
.is-style-asanoha-dark .wp-block-image.is-style-kasane img,
.has-ai-background-color .wp-block-image.is-style-kasane img {
	box-shadow:
		-10px 10px 0 var(--wp--preset--color--fuji),
		-20px 20px 0 var(--wp--preset--color--fuji-pale),
		-30px 30px 0 var(--wp--preset--color--washi);
}
@media (max-width: 600px) {
	.wp-block-image.is-style-kasane { margin: 0 0 18px 18px; }
	.wp-block-image.is-style-kasane-right { margin: 0 18px 18px 0; }
	.wp-block-image.is-style-kasane img { box-shadow: -6px 6px 0 var(--wp--preset--color--fuji-pale), -12px 12px 0 var(--wp--preset--color--fuji), -18px 18px 0 var(--wp--preset--color--ai); }
	.wp-block-image.is-style-kasane-right img { box-shadow: 6px 6px 0 var(--wp--preset--color--fuji-pale), 12px 12px 0 var(--wp--preset--color--asagi), 18px 18px 0 var(--wp--preset--color--ai); }
}

/* ------------------------------------------------------------------
   Pattern backgrounds (group styles)
------------------------------------------------------------------ */
.is-style-asanoha {
	background-image: url(assets/patterns/asanoha-light.svg);
	background-size: 30px 51.96px;
}
.is-style-asanoha-dark {
	background-color: var(--wp--preset--color--ai);
	background-image: url(assets/patterns/asanoha-dark.svg);
	background-size: 30px 51.96px;
	color: var(--wp--preset--color--paper);
}
.is-style-shippo {
	background-color: var(--wp--preset--color--fuji-mist);
	background-image: url(assets/patterns/shippo-light.svg);
	background-size: 36px 36px;
}
.is-style-shippo-on-color {
	background-image: url(assets/patterns/shippo-white.svg);
	background-size: 36px 36px;
}
.is-style-card {
	background-color: var(--wp--preset--color--paper);
	border-top: 4px solid var(--wp--preset--color--fuji);
	padding: 36px 32px;
}
.is-style-card.has-ai-background-color { border-top-color: var(--wp--preset--color--fuji-pale); }
.is-style-seigaiha-band {
	min-height: 40px;
	background-color: var(--wp--preset--color--ai-night);
	background-image: url(assets/patterns/seigaiha-dark.svg);
	background-size: 40px 20px;
}
.is-style-yabane-band {
	min-height: 18px;
	background-image: url(assets/patterns/yabane.svg);
	background-size: 24px 32px;
}
.is-style-karakusa-band {
	min-height: 40px;
	background-image: url(assets/patterns/karakusa.svg);
	background-size: 96px 40px;
	background-repeat: repeat-x;
	background-position: center;
}

/* Text sitting on a pattern gets a soft backing so it stays readable */
.ks-readable {
	background-color: var(--wp--preset--color--washi);
	padding: 24px 24px 24px 0;
}
.is-style-asanoha-dark .ks-readable { background-color: var(--wp--preset--color--ai); }

/* ------------------------------------------------------------------
   Noren curtain (columns style)
------------------------------------------------------------------ */
.wp-block-columns.is-style-noren {
	position: relative;
	gap: 8px !important;
	flex-wrap: nowrap !important;
	padding-top: 10px;
	margin-bottom: 0;
}
.wp-block-columns.is-style-noren::before {
	content: "";
	position: absolute;
	top: 0;
	left: -14px;
	right: -14px;
	height: 10px;
	border-radius: 5px;
	background: var(--wp--preset--color--sumi);
}
.wp-block-columns.is-style-noren > .wp-block-column {
	flex-basis: 0 !important;
	flex-grow: 1;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	gap: 10px;
	padding: 0 16px 34px;
	background-image: url(assets/patterns/asanoha-dark.svg);
	background-size: 30px 51.96px;
	color: var(--wp--preset--color--paper);
}
.wp-block-columns.is-style-noren > .wp-block-column:nth-child(even) {
	background-image: url(assets/patterns/shippo-white.svg);
	background-size: 36px 36px;
}
.wp-block-columns.is-style-noren > .wp-block-column > * {
	margin: 0;
	background-color: inherit;
	padding-left: 10px;
	padding-right: 10px;
}
.wp-block-columns.is-style-noren > .wp-block-column > .is-style-kamon { padding: 0; }
.wp-block-columns.is-style-noren a { color: inherit; text-decoration: none; }
.wp-block-columns.is-style-noren a:hover { text-decoration: underline; }
.wp-block-columns.is-style-noren.ks-noren-short > .wp-block-column { min-height: 120px; justify-content: center; padding-bottom: 0; }
@media (max-width: 781px) {
	.wp-block-columns.is-style-noren > .wp-block-column { min-height: 230px; padding: 0 6px 22px; }
	.wp-block-columns.is-style-noren .is-style-kamon { width: 60px; height: 60px; font-size: 32px; }
	.wp-block-columns.is-style-noren > .wp-block-column > * { padding-left: 4px; padding-right: 4px; }
	.wp-block-columns.is-style-noren .ks-noren-label { font-size: 19px !important; }
	.wp-block-columns.is-style-noren .ks-noren-note { display: none; }
}

/* ------------------------------------------------------------------
   Price table
------------------------------------------------------------------ */
.wp-block-table.is-style-price {
	background: var(--wp--preset--color--paper);
	border-top: 4px solid var(--wp--preset--color--fuji-deep);
	margin: 0;
}
.wp-block-table.is-style-price table { border-collapse: collapse; width: 100%; min-width: 520px; }
.wp-block-table.is-style-price thead { border: 0; }
.wp-block-table.is-style-price th,
.wp-block-table.is-style-price td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--fuji-mist);
	padding: 16px 24px;
	text-align: left;
	vertical-align: middle;
}
.wp-block-table.is-style-price th {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--nezumi);
	border-bottom: 1px solid var(--wp--preset--color--sumi);
}
.wp-block-table.is-style-price td:first-child {
	font-family: var(--wp--preset--font-family--mincho);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
}
.wp-block-table.is-style-price td:first-child em {
	display: block;
	font-family: var(--wp--preset--font-family--gothic);
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	color: var(--wp--preset--color--nezumi);
}
.wp-block-table.is-style-price td:last-child { font-weight: 700; color: var(--wp--preset--color--fuji-deep); }
.wp-block-table.is-style-price figcaption { padding: 12px 24px; margin: 0; }

/* ------------------------------------------------------------------
   Small helpers used by patterns
------------------------------------------------------------------ */
.ks-row { border-bottom: 1px solid var(--wp--preset--color--border); padding: 22px 0; }
.ks-rows { border-top: 1px solid var(--wp--preset--color--sumi); }
.ks-link-card { border: 1px solid var(--wp--preset--color--border); padding: 28px; }
.ks-quote-mark {
	font-family: var(--wp--preset--font-family--mincho);
	font-size: 96px;
	line-height: .5;
	color: var(--wp--preset--color--fuji);
	margin-bottom: 0;
}
.ks-tag {
	display: inline-block;
	background: var(--wp--preset--color--fuji-pale);
	color: var(--wp--preset--color--sumi);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 4px 12px;
}
.ks-diamond-list p { padding-left: 22px; position: relative; margin: 0; }
.ks-diamond-list p::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .65em;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--fuji);
	transform: rotate(45deg);
}
.ks-collar-tile { background: var(--wp--preset--color--fuji-mist); }
.ks-collar-tile .wp-block-image img { width: 180px; }

/* Noren panel text */
.ks-noren-label { font-weight: 700; line-height: 1.2; }
.ks-noren-jp { font-size: 15px; letter-spacing: .15em; color: var(--wp--preset--color--fuji-pale); }
.has-fuji-deep-background-color .ks-noren-jp { color: #E6E3EE; }

/* Steps */
.ks-step { border-top: 1px solid var(--wp--preset--color--fuji); padding-top: 28px; }

/* Event rows */
.ks-row.is-layout-flex > :first-child { min-width: 170px; }
.ks-row.is-layout-flex > :nth-child(2) { flex: 1 1 280px; }
.ks-row a { text-decoration: none; }

/* Closing CTA */
.wp-block-columns.ks-cta { gap: 0 !important; border: 1px solid var(--wp--preset--color--border); }
.ks-collar-tile { padding: 40px 24px; }
.ks-collar-tile .wp-block-image { text-align: center; margin: 0; }
.ks-collar-tile .wp-block-image img { width: 240px; max-width: 100%; display: inline-block; }

/* Link cards */
.ks-link-card a { text-decoration: none; color: var(--wp--preset--color--sumi); font-weight: 700; }
.ks-link-card .is-style-arrow-link a { color: var(--wp--preset--color--fuji-deep); }

/* Images inside grids fill their cell */
.wp-block-group.is-layout-grid > .wp-block-image { margin: 0; }
.wp-block-group.is-layout-grid > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 2 / 3; }

/* Image cards (events community, specialty outfits) */
.ks-image-card { border: 1px solid var(--wp--preset--color--border); }
.ks-image-card > .wp-block-image { margin: 0; }
.ks-image-card > .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* Expandable archive (Details block) */
.ks-archive { border-top: 1px solid var(--wp--preset--color--sumi); }
.ks-archive .wp-block-details,
.wp-block-details { border-bottom: 1px solid var(--wp--preset--color--border); padding: 0; margin: 0; }
.wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 22px 0;
	font-family: var(--wp--preset--font-family--mincho);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.3;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::after {
	content: "+";
	margin-left: auto;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1.5px solid var(--wp--preset--color--fuji);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--gothic);
	font-weight: 400;
	font-size: 22px;
	color: var(--wp--preset--color--fuji-deep);
}
.wp-block-details[open] > summary::after { content: "−"; background: var(--wp--preset--color--fuji-deep); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--fuji-deep); }
.wp-block-details > summary:hover { color: var(--wp--preset--color--fuji-deep); }
.wp-block-details > summary:focus-visible { outline: 2px solid var(--wp--preset--color--fuji-deep); outline-offset: 4px; }
.wp-block-details[open] > :not(summary) { padding-bottom: 32px; }
.wp-block-details .wp-block-image img { width: 100%; height: auto; display: block; }