/*
Theme Name: Kadence Child - 笹路かいと
Theme URI: https://benihistudio.art
Description: 笹路かいと 用 Kadence 子テーマ
Author: 笹路かいと
Template: kadence
Version: 1.0.0
Text Domain: kadence-child
*/

/* Heading/name-mark font — matches the reference site (太田好治写真事務所,
   www.yoshiharuota.com) exactly: plain system serif, no custom webfont.
   Times for Latin, Hiragino Mincho / MS PMincho for Japanese. The vertical
   writing-mode layout does the visual work, not a decorative typeface. */
:root {
	--global-heading-font-family: Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	--global-body-font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	--global-palette1: #1a1815;
	--global-palette2: #a13327;
	--global-palette3: #6e685e;
	--global-palette9: #f6f3ec;
}

body,
body.kadence-body {
	background-color: #f6f3ec;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	color: #1a1815;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .site-title, .site-title a,
.sasaji-name-mark {
	font-family: Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif !important;
	font-weight: 500;
	letter-spacing: 0.02em;
}

a { color: #a13327; }

#masthead, .site-header {
	background-color: #f6f3ec;
	border-bottom: 1px solid #e2ddd1;
}

.site-header .main-nav-container a,
.site-header .menu-item a {
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	letter-spacing: 0.03em;
}

.wp-block-button__link {
	border-radius: 0 !important;
	letter-spacing: 0.05em;
}

.site-footer, footer.site-footer, #colophon {
	background-color: #1a1815;
	color: #f6f3ec;
}

.site-footer .footer-html-inner p {
	line-height: 2.2;
}
.site-footer .sasaji-footer-nav {
	font-size: 0.85rem;
	letter-spacing: 0.03em;
}
.site-footer .sasaji-footer-nav a {
	color: #f6f3ec;
}
.site-footer .sasaji-footer-legal {
	font-size: 0.75rem;
	color: #b9b4a9;
}
.site-footer .sasaji-footer-legal a {
	color: #b9b4a9;
}
.site-footer .footer-html-inner p a:hover {
	color: #a13327;
}

/* Masonry-style gallery: full photos, no cropping, no ragged gaps */
.wp-block-gallery.has-nested-images {
	display: block !important;
	column-gap: 0.5rem;
}
.wp-block-gallery.has-nested-images.columns-3 { column-count: 3; }
.wp-block-gallery.has-nested-images.columns-4 { column-count: 4; }
@media (max-width: 767px) {
	.wp-block-gallery.has-nested-images.columns-3,
	.wp-block-gallery.has-nested-images.columns-4 {
		column-count: 2;
	}
}
.wp-block-gallery.has-nested-images figure.wp-block-image {
	display: block !important;
	width: 100% !important;
	break-inside: avoid;
	margin: 0 0 0.5rem !important;
}
.wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: auto;
}

/* Home feed: endless shuffled masonry (Pinterest-style, no crop), with a
   rare Shop CTA card mixed in. See functions.php / js/home-feed.js. */
.sasaji-home-feed {
	column-count: 4;
	column-gap: 1rem;
}
@media (max-width: 1024px) {
	.sasaji-home-feed { column-count: 3; }
}
@media (max-width: 767px) {
	.sasaji-home-feed { column-count: 2; }
}
.sasaji-feed-card {
	display: block;
	break-inside: avoid;
	margin: 0 0 1rem;
}
.sasaji-feed-card img {
	display: block;
	width: 100%;
	height: auto;
}
.sasaji-feed-shop {
	min-height: 200px;
	background: #a13327;
}
.sasaji-feed-shop a {
	display: flex;
	height: 100%;
	min-height: 200px;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	padding: 2rem 1.5rem;
	color: #f6f3ec;
	text-decoration: none;
}
.sasaji-feed-shop-title {
	font-weight: 500;
	letter-spacing: 0.08em;
	font-size: 0.95rem;
}
.sasaji-feed-shop-cta {
	font-size: 0.85rem;
}

/* Portfolio filter bar (被写体・場所・シリーズ・色雰囲気) */
.sasaji-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
}
.sasaji-filter-group {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.sasaji-filter-label {
	font-size: 0.75rem;
	color: #6e685e;
	letter-spacing: 0.05em;
}
.sasaji-filter-pills {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.sasaji-filter-pill {
	border: 1px solid #e2ddd1;
	background: transparent;
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	font-size: 0.8rem;
	font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
	cursor: pointer;
	color: #1a1815;
}
.sasaji-filter-pill.is-active {
	border-color: #a13327;
	background: #a13327;
	color: #f6f3ec;
}
.wp-block-gallery.has-nested-images figure.wp-block-image.is-filtered-out {
	display: none !important;
}

/* Theme default adds a large gap between header and page content; tighten it site-wide */
.content-area {
	margin-top: 1.5rem !important;
	margin-bottom: 3rem !important;
}
@media all and (max-width: 767px) {
	.content-area {
		margin-top: 1rem !important;
	}
}

/* Vertical navigation (縦書き) — HOME PAGE ONLY, desktop width. Reference:
   太田好治写真事務所. All other pages keep Kadence's normal header
   (horizontal nav on desktop, hamburger drawer on mobile) untouched. */
@media (min-width: 1025px) {
	.home #masthead.site-header {
		border-bottom: none;
		padding: 2.5rem 2.5rem 1.5rem;
	}
	.home #main-header .site-main-header-inner-wrap {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 1.75rem;
	}
	.home #main-header .site-title {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		font-size: 1.4rem;
		letter-spacing: 0.2em;
		margin: 0;
		line-height: 1.4;
	}
	.home #main-header .site-header-main-section-left {
		border-left: 1px solid #1a1815;
		padding-left: 1.75rem;
	}
	.home #main-header #primary-menu {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
		gap: 1.25rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.home #main-header #primary-menu .menu-item a {
		writing-mode: vertical-rl;
		text-orientation: mixed;
		font-size: 0.75rem;
		letter-spacing: 0.25em;
		text-transform: uppercase;
		padding: 0;
	}
}

/* Shop pages (shop/product/cart/checkout/account) only: force the
   hamburger drawer even on desktop, so the only persistent nav there is
   the Cart/Account icons below + a toggle for everything else. This was
   only requested for shop pages, not site-wide. */
@media screen and (min-width: 1025px) {
	.woocommerce-page #main-header,
	.woocommerce.woocommerce-shop #main-header {
		display: none !important;
	}
	.woocommerce-page #mobile-header,
	.woocommerce.woocommerce-shop #mobile-header {
		display: block !important;
	}
}

/* Shop product cards: fixed mat + object-fit:contain so prints/photo books
   of any orientation never get cropped or cut off (see docs/02-decisions.md). */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 1px solid #e2ddd1;
	aspect-ratio: 1 / 1.1;
	padding: 1.5rem;
	overflow: hidden;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin-top: 0.75rem;
	font-size: 0.9rem;
}
.woocommerce ul.products li.product .price {
	color: #6e685e;
	font-size: 0.85rem;
}

/* WooCommerce Blocks (Cart/Checkout): the "Order summary" title on
   Checkout renders as a <p role="heading">, not a real h-tag, so it
   misses the global h1-h6 serif rule above — match it explicitly. Also
   square off the block inputs to match the site's sharp-edged buttons. */
.wc-block-components-checkout-order-summary__title-text {
	font-family: Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif !important;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.wc-block-checkout .wc-block-components-text-input input,
.wc-block-checkout select,
.wc-block-components-address-form input,
.wc-block-components-text-input input {
	border-radius: 0 !important;
}

/* Product thumbnails in Cart / Checkout order summary: same fixed
   mat + object-fit:contain treatment as Shop product cards, so no
   photo (print or photo book, any orientation) gets cropped here either. */
.wc-block-cart-item__image {
	background: #ffffff;
	border: 1px solid #e2ddd1;
	width: 96px !important;
	height: 96px;
	padding: 0.5rem;
	box-sizing: border-box;
}
.wc-block-cart-item__image a,
.wc-block-cart-item__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}
.wc-block-components-order-summary-item__image {
	position: relative;
	background: #ffffff;
	border: 1px solid #e2ddd1;
	width: 64px;
	height: 64px;
	padding: 0.375rem;
	box-sizing: border-box;
	flex-shrink: 0;
}
.wc-block-components-order-summary-item__image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

/* My Account > Orders: outline status pills + line-divided rows,
   matching the rest of the site instead of WooCommerce's default
   pastel status backgrounds. */
.woocommerce-orders-table {
	border-collapse: collapse;
	width: 100%;
}
.woocommerce-orders-table thead th {
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6e685e;
	text-align: left;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid #e2ddd1;
	font-weight: 500;
}
.woocommerce-orders-table td {
	padding: 1rem 0.5rem 1rem 0;
	border-bottom: 1px solid #e2ddd1;
}
.woocommerce-orders-table .woocommerce-button {
	display: inline-block;
	border: 1px solid #1a1815;
	background: transparent;
	color: #1a1815;
	border-radius: 0;
	padding: 0.4rem 1rem;
	font-size: 0.8rem;
	text-decoration: none;
}
.woocommerce-orders-table .woocommerce-button:hover {
	background: #1a1815;
	color: #f6f3ec;
}
mark.order-status {
	display: inline-block;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	color: #6e685e;
}
mark.order-status.status-processing,
mark.order-status.status-on-hold {
	color: #a13327;
}
.woocommerce-orders-table__cell-order-status .sasaji-order-status-badge {
	display: inline-block;
	border: 1px solid #6e685e;
	color: #6e685e;
	border-radius: 999px;
	padding: 0.25rem 0.9rem;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
}
.woocommerce-orders-table__cell-order-status .sasaji-order-status-badge.is-active {
	border-color: #a13327;
	color: #a13327;
}

/* WooCommerce notices (cart/account messages) default to pastel blue/
   green/red banners that clash with the paper/ink/beni palette. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background: #ffffff !important;
	border: 1px solid #e2ddd1 !important;
	border-left: 3px solid #a13327 !important;
	color: #1a1815 !important;
	border-radius: 0 !important;
	padding: 1rem 1.5rem !important;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	background: transparent;
	border: 1px solid #1a1815;
	color: #1a1815;
	border-radius: 0;
	padding: 0.4rem 1rem;
	font-size: 0.8rem;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
	background: #1a1815;
	color: #f6f3ec;
}

/* Cart / My Account icons — shop-context pages only, see functions.php */
.sasaji-shop-icons {
	display: flex;
	justify-content: flex-end;
	gap: 1.25rem;
	padding: 0 0 1.5rem;
}
.sasaji-shop-icons a {
	position: relative;
	display: inline-flex;
	color: #1a1815;
}
.sasaji-shop-icons a:hover {
	color: #a13327;
}
.sasaji-cart-count {
	position: absolute;
	top: -0.5rem;
	right: -0.6rem;
	min-width: 1rem;
	height: 1rem;
	padding: 0 0.2rem;
	border-radius: 999px;
	background: #a13327;
	color: #f6f3ec;
	font-size: 0.65rem;
	line-height: 1rem;
	text-align: center;
}