/**
 * Matsuri Layout
 *
 * Site structure layout and typography.
 * Uses CSS custom properties from the design tokens.
 *
 * @since 1.0.0
 * @package WAM_Matsuri
 */

/* === Site Layout === */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1;
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--wam-space-lg) var(--wam-space-md);
	width: 100%;
	box-sizing: border-box;
}

/* === Header === */
.site-header {
	background: var(--wam-bg-card);
	border-bottom: 2px solid var(--wam-border-accent);
}

.site-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--wam-space-md);
	gap: var(--wam-space-md);
}

.site-branding a {
	font-family: var(--wam-font-heading);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--wam-text-primary);
	text-decoration: none;
}

.site-branding a:hover {
	color: var(--wam-primary);
}

/* === Navigation === */
.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--wam-space-md);
}

.main-navigation a {
	color: var(--wam-text-primary);
	text-decoration: none;
	font-size: var(--wam-font-size-base);
	transition: color var(--wam-transition);
}

.main-navigation a:hover {
	color: var(--wam-primary);
}

/* === Header Cart === */
.header-cart-link {
	color: var(--wam-text-primary);
	text-decoration: none;
	font-size: var(--wam-font-size-base);
}

.header-cart-link:hover {
	color: var(--wam-primary);
}

.header-cart-count::before {
	content: "🛒 ";
}

/* === Footer === */
.site-footer {
	background: var(--wam-bg-secondary);
	border-top: 2px solid var(--wam-border-accent);
	padding: var(--wam-space-lg) var(--wam-space-md);
}

.footer-widgets {
	max-width: 1200px;
	margin: 0 auto var(--wam-space-md);
}

.site-info {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
	color: var(--wam-text-muted);
	font-size: var(--wam-font-size-sm);
}

/* === Sidebar & Widgets === */
.widget-area {
	padding: var(--wam-space-md) 0;
}

.widget {
	margin-bottom: var(--wam-space-lg);
}

.widget-title {
	font-family: var(--wam-font-heading);
	font-size: 1.1rem;
	border-bottom: 2px solid var(--wam-border-accent);
	padding-bottom: var(--wam-space-xs);
	margin-bottom: var(--wam-space-md);
}

/* === Article / Entry === */
.entry-header {
	margin-bottom: var(--wam-space-md);
}

.entry-title {
	font-family: var(--wam-font-heading);
}

.entry-title a {
	color: var(--wam-text-primary);
	text-decoration: none;
}

.entry-title a:hover {
	color: var(--wam-primary);
}

.entry-meta {
	color: var(--wam-text-muted);
	font-size: var(--wam-font-size-sm);
}

.entry-content {
	margin-bottom: var(--wam-space-lg);
}

.entry-footer {
	color: var(--wam-text-muted);
	font-size: var(--wam-font-size-sm);
	margin-top: var(--wam-space-md);
}

.entry-footer .cat-links,
.entry-footer .tag-links {
	display: inline;
	margin-right: var(--wam-space-md);
}

article.post,
article.page {
	margin-bottom: var(--wam-space-2xl);
}

/* === Page Header (archive, search) === */
.page-header {
	margin-bottom: var(--wam-space-lg);
	padding-bottom: var(--wam-space-md);
	border-bottom: 1px solid var(--wam-border-light);
}

/* === Pagination === */
.nav-links {
	display: flex;
	gap: var(--wam-space-sm);
	justify-content: center;
	margin-top: var(--wam-space-xl);
}

/* === Comments === */
.comments-area {
	margin-top: var(--wam-space-xl);
	padding-top: var(--wam-space-lg);
	border-top: 1px solid var(--wam-border-light);
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list .comment {
	margin-bottom: var(--wam-space-lg);
	padding-bottom: var(--wam-space-md);
	border-bottom: 1px solid var(--wam-border-light);
}

/* === Typography === */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--wam-font-heading);
	line-height: 1.4;
	color: var(--wam-text-primary);
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.3rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1.1rem; }

/* === WooCommerce UI Overrides === */

/* Hide add-to-cart buttons on cart page */
body.woocommerce-cart .add_to_cart_button,
body.woocommerce-cart .single_add_to_cart_button {
	display: none;
}

/* Hide sort/count controls */
.orderby {
	display: none;
}

.woocommerce-result-count {
	display: none;
}

/* === Product Page Styles === */

/* Custom text (lantern/fan text display) */
.custom-text-container {
	font-size: 20px;
	color: var(--wam-primary-dark);
}

.custom-text-container strong {
	font-size: 20px;
	color: var(--wam-secondary);
}

/* Product table */
.product-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--wam-bg-card);
}

.product-table th,
.product-table td {
	border: 1px solid var(--wam-border);
	padding: 8px;
}

.product-table th {
	text-align: center;
	vertical-align: middle;
	background-color: var(--wam-bg-secondary);
}

.product-table td {
	text-align: left;
	vertical-align: middle;
}

.product-table td.right-column {
	color: var(--wam-primary);
	text-align: right;
	vertical-align: bottom;
}

/* === File Upload === */
#upload_custom_file {
	display: none;
	color: var(--wam-secondary);
	margin-left: 10px;
}

.thumbnail-border {
	border: 1px solid var(--wam-border);
}

#copy_store_name_to_lantern_text.button {
	font-weight: normal;
	margin-bottom: 10px;
}

/* === Footer Links === */
.footer-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.footer-links a {
	margin-right: 5px;
	text-decoration: none;
	color: inherit;
}

.footer-links a:last-child {
	margin-right: 0;
}

/* Footer nav menu widget — horizontal layout */
.footer-widgets .widget_nav_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 8px;
}

.footer-widgets .widget_nav_menu ul li::after {
	content: "|";
	margin-left: 8px;
	opacity: 0.5;
}

.footer-widgets .widget_nav_menu ul li:last-child::after {
	content: none;
}

/* === Footer Navigation === */
.footer-navigation {
	max-width: 1200px;
	margin: 0 auto var(--wam-space-md);
	text-align: center;
}

.footer-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 8px;
}

.footer-navigation li + li::before {
	content: "|";
	margin-right: 8px;
	opacity: 0.5;
}

.footer-navigation a {
	color: var(--wam-text-muted);
	text-decoration: none;
	font-size: var(--wam-font-size-sm);
}

.footer-navigation a:hover {
	color: var(--wam-primary);
}

/* === Account Page Badges === */
li.account-details {
	position: relative;
}

li.account-details a::after {
	content: "ログイン";
	color: #fff;
	background-color: var(--wam-success);
	display: block;
	padding: 2px 6px;
	border-radius: var(--wam-radius-sm);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
	white-space: nowrap;
	font-size: var(--wam-font-size-xs);
	pointer-events: none;
}

li.registration-steps {
	position: relative;
}

li.registration-steps a::after {
	content: "使い方";
	color: var(--wam-text-primary);
	background-color: var(--wam-primary-bg);
	display: block;
	padding: 2px 6px;
	border-radius: var(--wam-radius-sm);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 100%;
	white-space: nowrap;
	font-size: var(--wam-font-size-xs);
	pointer-events: none;
}

/* === Custom Fields Styles === */
.custom-fields-container .form-row {
	margin-bottom: 20px;
}

.custom-fields-container label {
	display: block;
	margin-bottom: 5px;
	font-weight: bold;
}

.custom-fields-container input[type="text"],
.custom-fields-container input[type="tel"],
.custom-fields-container textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid var(--wam-border);
	border-radius: var(--wam-radius-sm);
}

.custom-fields-container .radio-group label {
	display: inline-block;
	margin-right: 15px;
	font-weight: normal;
}

.custom-fields-container .description {
	font-size: 0.9em;
	color: var(--wam-text-muted);
	margin-top: 2px;
	display: inline-block;
}

.custom-fields-container .form-row p {
	margin-bottom: 2px;
}

.custom-fields-container .form-row p + .description {
	margin-left: 5px;
}

/* Product page custom fields */
.custom-fields-product {
	margin-bottom: 20px;
}

/* Admin custom fields */
.custom-fields-admin {
	max-width: 800px;
}

.custom-fields-admin .form-row {
	display: flex;
	flex-wrap: wrap;
}

.custom-fields-admin .form-row label {
	flex: 0 0 200px;
}

.custom-fields-admin .form-row input,
.custom-fields-admin .form-row textarea {
	flex: 1;
}

.custom-fields-admin .form-field th {
	padding: 20px 10px 20px 0;
	width: 200px;
}

.custom-fields-admin .form-field td {
	padding: 15px 10px;
}

.custom-fields-admin .form-field input.regular-text,
.custom-fields-admin .form-field textarea.large-text {
	width: 25em;
}

.custom-fields-admin .form-field fieldset label {
	margin-right: 1em;
}

.custom-fields-admin .form-field input[type=email],
.custom-fields-admin .form-field input[type=number],
.custom-fields-admin .form-field input[type=password],
.custom-fields-admin .form-field input[type=search],
.custom-fields-admin .form-field input[type=tel],
.custom-fields-admin .form-field input[type=text],
.custom-fields-admin .form-field input[type=url],
.custom-fields-admin .form-field textarea {
	width: auto;
	max-width: 100%;
}

.custom-fields-admin .form-field input.regular-text {
	width: 25em;
	max-width: 100%;
}

.custom-fields-admin .form-field textarea.large-text {
	width: 25em;
	max-width: 100%;
}

/* === Responsive === */
@media (max-width: 768px) {
	.product-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	li.account-details a::after,
	li.registration-steps a::after {
		position: static;
		display: inline-block;
		transform: none;
		margin-left: 5px;
	}

	.custom-fields-admin .form-row {
		flex-direction: column;
	}

	.custom-fields-admin .form-row label {
		flex: none;
		width: 100%;
		margin-bottom: 5px;
	}

	.custom-fields-admin .form-row input,
	.custom-fields-admin .form-row textarea {
		width: 100%;
	}

	.custom-fields-admin .form-field input.regular-text,
	.custom-fields-admin .form-field textarea.large-text {
		width: 100%;
	}

	.custom-fields-container .radio-group label {
		display: block;
		margin-right: 0;
		margin-bottom: 8px;
	}
}