/* =========================
   Common Header
========================= */

.pd-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: calc(
		44px +
		var(--petdori-safe-top)
	);
	padding:
			calc(8px + var(--petdori-safe-top))
				14px
				0px
				12px;
	background:
		var(--petdori-surface);
}


/* =========================
   Left
========================= */

.pd-header-left {
	display: flex;
	align-items: center;
	min-width: 0;
	gap: 6px;
}

.pd-header-title {
	color:
		var(--petdori-text);
	font-size:
		var(--petdori-font-lg);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.025em;
}


/* =========================
   Actions
========================= */

.pd-header-actions {
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: 2px;
}


/* =========================
   Icon Button
========================= */

.pd-header-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color:
		var(--petdori-text);
}

.pd-header-icon-button svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pd-header-icon-button:active {
	background:
		var(--petdori-secondary);
}


/* =========================
   WordPress Admin Bar
========================= */

.admin-bar .pd-header {
	margin-top: 0;
}