/* ==========================================================================
   4. Layout Utilities
   ========================================================================== */

.page > div.entry-content > p {
	display: none;
}

.container {
	inline-size: 100%;
	max-inline-size: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding-x);
}

/* Full-width layout: stretches edge-to-edge but keeps side padding */
.container--full {
	inline-size: 100%;
	padding-inline: var(--container-full-padding-x, var(--container-padding-x));
}

.content-area {
	padding-block: var(--content-padding-y);
}

.content-area.content-area--flush {
	padding-block: 0;
}

.content-area.layout-sidebar {
	display: grid;
	grid-template-columns: 1fr var(--sidebar-width);
	gap: calc(var(--gap) * 2);
	align-items: start;
}

/* Sidebar-left: swap column order via CSS */
.content-area.layout-sidebar.layout-sidebar--left {
	grid-template-columns: var(--sidebar-width) 1fr;
}
.content-area.layout-sidebar--left #secondary,
.content-area.layout-sidebar--left #shop-sidebar,
.content-area.layout-sidebar--left .woocommerce-sidebar {
	order: -1;
}

.primary-content {
	min-inline-size: 0;
}

.site--canvas,
.sawatech-canvas-content {
	min-block-size: 100vh;
}

.sawatech-page-canvas {
	background: var(--color-bg);
}

/* ==========================================================================
   5. Header & Navigation
   ========================================================================== */

.site-header {
	background-color: var(--color-header-bg);
	color: var(--color-header-text);
	border-block-end: 1px solid var(--color-border);
	position: relative;
	z-index: var(--z-header);
}

.site-header.is-sticky {
	position: sticky;
	inset-block-start: 0;
}

.header-inner {
	display: flex;
	align-items: center;
	gap: var(--gap);
	block-size: var(--header-height);
}

/* Branding */
.site-branding {
	flex-shrink: 0;
}

.site-branding .custom-logo {
	block-size: 48px;
	inline-size: auto;
}

.site-name-link {
	text-decoration: none;
	color: inherit;
}

.site-title {
	font-family: var(--font-heading);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--color-heading);
	line-height: 1;
	margin-block-end: 0;
}

.site-tagline {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	margin-block-start: 2px;
}

/* Navigation */
.main-navigation {
	flex: 1;
}

.nav-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.nav-menu > li {
	position: relative;
	margin-block-end: 0;
}

.nav-menu > li > a {
	display: block;
	padding: 0.5rem 0.875rem;
	font-weight: 500;
	font-size: 0.9375rem;
	color: var(--color-header-text);
	text-decoration: none;
	border-radius: var(--radius-button);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-menu > li > a:hover,
.nav-menu > li > a:focus,
.nav-menu > li.current-menu-item > a {
	background-color: var(--color-bg-secondary);
	color: var(--color-primary);
}

/* Dropdown */
.nav-menu .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + 8px);
	inset-inline-start: 0;
	min-inline-size: 200px;
	list-style: none;
	padding: 0.5rem;
	margin: 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px); /* intentionally physical */
	transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
	z-index: var(--z-dropdown);
}

.nav-menu li:hover > .sub-menu,
.nav-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-menu .sub-menu li {
	margin-block-end: 0;
}

.nav-menu .sub-menu a {
	display: block;
	padding: 0.5rem 0.875rem;
	color: var(--color-text);
	text-decoration: none;
	font-size: 0.9rem;
	border-radius: var(--radius-base);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-menu .sub-menu a:hover {
	background-color: var(--color-bg-secondary);
	color: var(--color-primary);
}

/* Header Actions */
.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-inline-start: auto;
}

/* Cart button */
.header-cart-btn {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0.5rem;
	color: var(--color-header-text);
	text-decoration: none;
	border-radius: var(--radius-button);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.header-cart-btn:hover {
	background-color: var(--color-bg-secondary);
	color: var(--color-primary);
}

.header-cart-count {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	background: var(--color-primary);
	color: var(--color-white);
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 1;
	min-width: 18px; /* intentionally physical */
	height: 18px; /* intentionally physical */
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
	transform: translate(30%, -20%); /* intentionally physical */
}

.header-cart-count:empty,
.header-cart-count[data-count="0"] {
	display: none;
}

/* Menu toggle (hamburger) */
.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	inline-size: 40px;
	block-size: 40px;
	background: none;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	cursor: pointer;
	padding: 8px;
	transition: background-color var(--transition-fast);
}

.menu-toggle:hover {
	background-color: var(--color-bg-secondary);
}

.hamburger-line {
	display: block;
	inline-size: 100%;
	block-size: 2px;
	background-color: var(--color-header-text);
	border-radius: var(--radius-corner);
	transition: transform var(--transition-base), opacity var(--transition-base);
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) {
	opacity: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   6. Mobile Navigation
   ========================================================================== */

.mobile-navigation {
	border-block-start: 1px solid var(--color-border);
	padding: 1rem 0;
}

.mobile-navigation[hidden] {
	display: none;
}

.mobile-nav-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-nav-menu li {
	margin-block-end: 0;
}

.mobile-nav-menu a {
	display: block;
	padding: 0.625rem 0.5rem;
	color: var(--color-header-text);
	text-decoration: none;
	font-weight: 500;
	border-radius: var(--radius-base);
	transition: background-color var(--transition-fast);
}

.mobile-nav-menu a:hover {
	background-color: var(--color-bg-secondary);
	color: var(--color-primary);
}

.mobile-nav-menu .sub-menu {
	list-style: none;
	padding-inline-start: 1rem;
}

/* ==========================================================================
   7. Content Area & Sidebar
   ========================================================================== */

.page-header {
	margin-block-end: 2rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var(--color-border);
}

.page-title {
	margin-block-end: 0.5rem;
}

.archive-description {
	color: var(--color-text-muted);
	font-size: 1rem;
	margin-block-start: 0.5rem;
}

/* Posts grid */
.posts-grid {
	display: grid;
	grid-template-columns: 1;
	gap: calc(var(--gap) * 1.5);
}