/*!
Theme Name: あづま屋
Theme URI: https://example.com/
Author: あづま屋開発チーム
Author URI: https://example.com/
Description: 老舗飲食店「あづま屋」のためのオリジナルWordPressテーマ。和の伝統美と現代的なUI/UXを融合させ、信頼感と安心感を醸成します。
Version: 1.1.0
Tested up to: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: adumaya
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, restaurant, food, japanese, traditional

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

あづま屋テーマは Underscores https://underscores.me/ を基盤としています。(C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# パフォーマンス最適化 & リファクタリング (Premium Edition)
--------------------------------------------------------------*/

/* 1. CSS変数 - Urban Spicy Luxury */
:root {
	/* フォントシステム */
	--font-heading: 'Noto Serif JP', 'Noto Sans JP', serif;
	/* Shifted to Serif for Headers */
	--font-body: 'Noto Sans JP', sans-serif;
	--font-accent: 'Cinzel', serif;

	/* カラーパレット - Urban Spicy Luxury */
	--color-base: #0a0a0a;
	/* Deep Black */
	--color-main: #b30000;
	/* Deep Red (Crimson) */
	--color-accent: #c5a059;
	/* Muted Gold (Champagne Gold) */
	--color-text: #f0f0f0;
	/* Off-White */
	--color-text-muted: #cccccc;

	/* Functional Colors */
	--color-overlay: rgba(0, 0, 0, 0.7);
	--color-border: rgba(197, 160, 89, 0.2);

	/* スペーシング (More Breathing Room) */
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 4rem;
	--spacing-xl: 6rem;
	--spacing-xxl: 10rem;

	/* ボーダー */
	--border-radius: 2px;
	/* Sharper edges for luxury fee */
	--border-width: 1px;

	/* シャドウ (Subtle & Elegant) */
	--shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.2);
	--shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.5);

	/* トランジション */
	--transition-base: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);

	/* ブレークポイント */
	--breakpoint-sm: 480px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
}

/* 2. リセット & ベーススタイル */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--color-base);
	color: var(--color-text);
	font-family: var(--font-body);
	line-height: 2;
	letter-spacing: 0.08em;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

/* 3. タイポグラフィ (Refined) */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-heading);
	color: var(--color-text);
	line-height: 1.4;
	margin-bottom: var(--spacing-md);
	font-weight: 500;
	/* Lighter weight for elegance */
}

h1 {
	font-size: 3.5rem;
	letter-spacing: 0.1em;
}

h2 {
	font-size: 2.5rem;
	letter-spacing: 0.1em;
	padding-bottom: 2rem;
}

h3 {
	font-size: 1.8rem;
	letter-spacing: 0.05em;
}

p {
	margin-bottom: var(--spacing-md);
	color: var(--color-text-muted);
}

a {
	color: var(--color-text);
	text-decoration: none;
	transition: all var(--transition-base);
}

a:hover {
	color: var(--color-accent);
}

.text-gradient {
	background: linear-gradient(to right, #ffffff 0%, #c5a059 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

/* 4. レイアウト & コンテナ */
.container {
	width: 100%;
	max-width: var(--breakpoint-xl);
	margin: 0 auto;
	padding: 0 var(--spacing-md);
}

/* 5. ヘッダー (Glassmorphism Removed for Solid Luxury) */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	padding: 1.2rem 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 100%);
	backdrop-filter: blur(5px);
	/* Premium glass effect */
	transition: background-color var(--transition-base), padding var(--transition-base);
}

.site-header.scrolled {
	background-color: rgba(5, 5, 5, 0.98);
	backdrop-filter: blur(10px);
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.navbar-brand img {
	height: 50px;
	width: auto;
	transition: height var(--transition-base);
}

.site-header.scrolled .navbar-brand img {
	height: 40px;
}

/* Navigation Links */
.navbar-nav {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.navbar-nav .nav-link {
	color: #ffffff !important;
	font-family: var(--font-accent);
	font-size: 0.85rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.5rem 1.2rem !important;
	position: relative;
	transition: color 0.3s ease;
}

.navbar-nav .nav-item {
	list-style: none !important;
	padding: 0;
	margin: 0;
}

/* Ensure desktop menu is horizontal */
/* Ensure desktop menu is horizontal */
@media (min-width: 992px) {
	.navbar-expand-lg .navbar-nav {
		flex-direction: row !important;
		/* Force row */
		align-items: center;
	}

	.navbar-nav .nav-item {
		margin: 0 0.8rem;
		/* Relaxed spacing */
	}

	.navbar-nav .nav-link {
		font-size: 0.75rem !important;
		/* Smaller, more elegant */
		letter-spacing: 0.2em;
		/* Wider tracking for premium feel */
	}
}

.navbar-nav .nav-link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 1px;
	background-color: var(--color-accent);
	transition: width var(--transition-base);
}

.navbar-nav .nav-link:hover::after {
	width: 100%;
}

/* Responsive Tables */
table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 2rem;
}

/* Force horizontal scroll for tables on mobile */
@media (max-width: 767px) {

	.wp-block-table,
	table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Mobile Menu Overrides (CRITICAL FIX) */
.navbar-toggler {
	border: none;
	padding: 0;
	color: var(--color-accent);
	/* Make hamburger gold */
}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28197, 160, 89, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-collapse {
	background-color: #000000;
	/* Solid Black Background for Mobile */
	background: rgba(10, 10, 10, 0.98);
	/* Almost solid with slight texture */
	backdrop-filter: blur(10px);
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	padding: 2rem;
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

@media (min-width: 992px) {
	.navbar-collapse {
		position: static;
		background-color: transparent;
		background: transparent;
		backdrop-filter: none;
		padding: 0;
		border: none;
		box-shadow: none;
	}
}

/* 6. Hero Section (Refined) */
.section-hero {
	height: 100vh;
	min-height: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Subpage Hero (Premium) */
.premium-page-header {
	background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
	padding: 8rem 0 4rem;
	/* Top padding accounts for fixed header */
	margin-bottom: 4rem;
	position: relative;
	overflow: hidden;
}

/* Mobile adjustments for header */
@media (max-width: 767px) {
	.premium-page-header {
		padding: 6rem 0 3rem;
		margin-bottom: 3rem;
	}
}

.premium-page-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url('assets/images/pattern-grid.png');
	/* Texture overlay if available, or just keeping gradient */
	opacity: 0.1;
	pointer-events: none;
}

.premium-page-header .page-title {
	font-family: var(--font-heading);
	letter-spacing: 0.1em;
	margin-bottom: 1rem;
}

.hero-overlay {
	background: rgba(0, 0, 0, 0.5);
	/* Slightly darker for legibility */
}

/* Mobile Hero Fixes */
@media (max-width: 767px) {
	.hero-title span {
		display: block !important;
	}

	.hero-title .text-gradient {
		font-size: 15vw !important;
		/* Scale with viewport */
		line-height: 1.1;
	}

	.hero-subtitle {
		font-size: 0.9rem !important;
		margin-bottom: 2rem !important;
	}

	.hero-actions .btn {
		width: 100%;
		display: block;
		margin-bottom: 1rem;
	}
}

/* 7. Section Spacing & Layout */
section {
	padding: var(--spacing-xl) 0;
	position: relative;
	overflow: hidden;
	/* Prevent horizontal scroll artifacts */
}

/* Typography Polish */
p {
	line-height: 2.0;
	/* Luxury readability */
	margin-bottom: 2rem;
	color: #cccccc;
	/* Ensure high contrast against black */
}

.section-title {
	color: var(--color-text);
	/* Fallback */
}

.section-story {
	padding: 0;
	/* Full bleed */
}

.story-content {
	padding: var(--spacing-xl);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 600px;
	background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(20, 20, 20, 0.95) 100%);
}

.story-content h2,
.story-content h3 {
	color: var(--color-accent) !important;
	/* Force Gold for visibility */
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* 8. Buttons (Premium Style) */
.btn-premium {
	background-color: var(--color-main);
	color: #fff;
	border: 1px solid var(--color-main);
	padding: 1rem 3rem;
	font-family: var(--font-heading);
	letter-spacing: 0.1em;
	border-radius: 50px;
	transition: all var(--transition-base);
}

.btn-premium:hover {
	background-color: transparent;
	border-color: var(--color-main);
	color: var(--color-main);
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(179, 0, 0, 0.2);
}

.btn-outline-light {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
	padding: 1rem 3rem;
	border-radius: 50px;
}

.btn-outline-light:hover {
	background-color: #fff;
	color: #000;
	border-color: #fff;
}

/* 9. Footer (Clean & Spacious) */
.site-footer {
	background-color: #000000;
	color: #888;
}

.footer-heading {
	letter-spacing: 0.15em;
	border-left: 3px solid var(--color-accent);
	padding-left: 10px;
}

.footer-menu li {
	margin-bottom: 0.8rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	padding-bottom: 0.5rem;
}

.footer-menu li:last-child {
	border-bottom: none;
}

.footer-menu a {
	color: #aaa;
	text-decoration: none;
	transition: all 0.3s ease;
	display: block;
}

.footer-menu a:hover {
	color: var(--color-accent);
	padding-left: 8px;
	/* Slide effect */
	color: #fff;
}

.hover-lift {
	transition: transform 0.3s ease;
}

.hover-lift:hover {
	transform: translateY(-3px);
}

/* 10. Utility Classes */
.text-gold {
	color: var(--color-accent) !important;
}

.text-red {
	color: var(--color-main) !important;
}

.bg-darker {
	background-color: #0f0f0f;
}

/* Grid System Adjustments for Mobile */
@media (max-width: 767px) {
	section {
		padding: 3rem 0;
	}

	h1 {
		font-size: 2.5rem !important;
		line-height: 1.2 !important;
	}

	h2 {
		font-size: 1.8rem !important;
		margin-bottom: 1.5rem !important;
	}

	.container {
		padding: 0 20px;
		/* Safe Area for Mobile */
	}

	.story-content {
		padding: 2rem 1rem;
		min-height: auto;
		/* Remove fixed height on mobile */
	}

	/* Stack Grids on Mobile */
	.row {
		margin-left: 0;
		margin-right: 0;
	}

	.col-md-4,
	.col-lg-6 {
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 2rem;
	}

	/* Better Touch Targets */
	.btn {
		padding: 1rem 2rem;
		width: 100%;
		display: block;
		margin-bottom: 1rem;
	}

	/* Hero Text Overlap Fix */
	.hero-title .text-gradient {
		font-size: 4rem !important;
		/* Fixed size instead of VW to prevent overflow */
		display: block;
		margin-top: 0.5rem;
	}

	.hero-title span.d-block {
		font-size: 1rem !important;
		letter-spacing: 0.1em !important;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	:root {
		font-size: 93.75%;
	}

	.container {
		padding: 0 var(--space-lg);
	}

	.grid-2,
	.grid-3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	:root {
		font-size: 100%;
	}

	.container {
		padding: 0 var(--space-xl);
	}

	.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 13. Premium Utilities - Urban Spicy Luxury */
.bg-base {
	background-color: var(--color-base);
}

.bg-darker {
	background-color: #000000;
}

.bg-glass {
	background-color: var(--color-glass);
	backdrop-filter: blur(10px);
}

.text-gradient {
	background: linear-gradient(135deg, #FFFFFF 0%, #D4AF37 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
}

.text-gold {
	color: var(--color-accent) !important;
}

.text-red {
	color: var(--color-main) !important;
}

.text-white {
	color: #ffffff !important;
}

/* 8b. Consolidated Button Styles (Fixed) */
.btn-premium {
	background: linear-gradient(45deg, #b30000 0%, #8a0000 100%) !important;
	color: #fff !important;
	border: none;
	padding: 1rem 3rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(204, 0, 0, 0.4);
	transition: all 0.3s ease;
	display: inline-block;
	text-decoration: none;
}

.btn-premium:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(204, 0, 0, 0.6);
	color: #fff !important;
	background: linear-gradient(45deg, #cc0000 0%, #a30000 100%) !important;
}

.btn-gold {
	background: linear-gradient(45deg, #D4AF37 0%, #AA8C2C 100%) !important;
	color: #000 !important;
	box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
	padding: 1rem 3rem;
	border-radius: 50px;
	font-weight: bold;
	text-decoration: none;
	display: inline-block;
}

.btn-gold:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
	color: #000 !important;
}

/* Price Badge - Explicit Definition */
.price-badge {
	background-color: #c5a059 !important;
	/* Gold */
	color: #000 !important;
	padding: 0.5rem 1rem;
	font-weight: bold;
	z-index: 10;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* Background Utilities */
.bg-premium {
	background-color: #b30000 !important;
	color: #fff !important;
}

/* Card/Box Styles for Archive/Lists */
.post,
.page {
	background-color: #1a1a1a;
	border: 0px solid #333;
	color: #fff;
}

.post h1,
.post h2,
.page h1 {
	color: #fff;
}

/* Form Styles */
input,
textarea,
select {
	background-color: #222;
	border: 1px solid #444;
	color: #fff;
}

input:focus,
textarea:focus {
	border-color: var(--color-accent);
	background-color: #000;
}

/* 14. Menu Grid Utilities (Legacy Bootstrap Support) */
.row {
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

.col-lg-6,
.col-md-4 {
	position: relative;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

/* Global Typography Utilities */
.display-1 {
	font-size: 4rem;
	font-weight: 700;
	line-height: 1.2;
}

.display-2 {
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.display-3 {
	font-size: 2.5rem;
	font-weight: 700;
}

.display-4 {
	font-size: 2rem;
	font-weight: 700;
}

.fw-bold {
	font-weight: 700 !important;
}

.text-shadow {
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Layout Utilities */
.object-fit-cover {
	object-fit: cover;
}

.img-fluid {
	max-width: 100%;
	height: auto;
}

.w-100 {
	width: 100% !important;
}

.h-100 {
	height: 100% !important;
}

.position-relative {
	position: relative !important;
}

.position-absolute {
	position: absolute !important;
}

.top-0 {
	top: 0 !important;
}

.start-0 {
	left: 0 !important;
}

.end-0 {
	right: 0 !important;
}

.bottom-0 {
	bottom: 0 !important;
}

.translate-middle-x {
	transform: translateX(-50%);
}

.start-50 {
	left: 50% !important;
}

/* Background Colors */
.bg-danger {
	background-color: var(--color-main) !important;
}

.bg-secondary {
	background-color: #333 !important;
}

.bg-dark {
	background-color: #222 !important;
}

.bg-gold {
	background-color: var(--color-accent) !important;
}

/* Text Colors */
.text-dark {
	color: #000 !important;
}

.text-gold {
	color: var(--color-accent) !important;
}

.border {
	border: 1px solid var(--color-border) !important;
}

.border-secondary {
	border-color: #444 !important;
}

/* Mobile Responsive Overrides */
@media (max-width: 767px) {
	.display-1 {
		font-size: 2.5rem;
	}

	.display-2 {
		font-size: 2rem;
	}

	.hero-actions {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.hero-actions .btn {
		width: 100%;
		margin-right: 0 !important;
	}
}

/* Grid Columns Responsive */
@media (min-width: 768px) {
	.col-md-4 {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}

@media (min-width: 992px) {
	.col-lg-6 {
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* Border Utilities */
	.border {
		border: 1px solid #444 !important;
	}

	.border-secondary {
		border-color: #444 !important;
	}

	.border-danger {
		border-color: var(--color-main) !important;
	}

	.border-white {
		border-color: #fff !important;
	}

	.border-bottom {
		border-bottom: 2px solid #444 !important;
	}

	.fw-bold {
		font-weight: 700 !important;
	}

	.small {
		font-size: 0.875rem;
	}

	.card-image {
		overflow: hidden;
	}

	.card-body {
		padding: 1.5rem;
	}

	.price-badge {
		z-index: 10;
		font-size: 1.1rem;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
		min-width: 80px;
		text-align: center;
	}

	/* 15. News Section Styles */
	.news-item {
		transition: background-color 0.3s ease;
	}

	.news-item:hover {
		background-color: rgba(255, 255, 255, 0.05);
	}

	.news-date {
		font-family: 'Noto Sans JP', monospace;
		/* Monospaced digits for alignment if possible */
		letter-spacing: 0.05em;
	}

	.hover-gold:hover {
		color: var(--color-accent) !important;
	}

	.transition-base {
		transition: all 0.3s ease;
	}

	.text-decoration-underline {
		text-decoration: underline;
		text-underline-offset: 4px;
		text-decoration-thickness: 1px;
		text-decoration-color: rgba(255, 255, 255, 0.3);
	}

	.text-decoration-underline:hover {
		text-decoration-color: var(--color-accent);
		color: var(--color-accent) !important;
	}
}