/* =====================================================================
   components.css
   Small, reusable pieces used across more than one section — buttons,
   the circular icon buttons in the header/footer, the status badge,
   and the section heading pattern (h2 + supporting paragraph) that
   the work grid, case studies, and résumé sections will all reuse.
   ===================================================================== */

/* ---- Buttons ---------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85rem 1.5rem;
	border-radius: var(--radius-pill);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: var(--text-sm);
	border: 2px solid var(--ink);
	text-decoration: none;
	cursor: pointer;
	background: transparent;
	color: var(--ink);
	transition: background-color var(--duration) var(--ease),
		color var(--duration) var(--ease),
		border-color var(--duration) var(--ease);
}
.btn.primary {
	background: var(--ink);
	color: var(--paper);
}
.btn.primary:hover {
	background: var(--accent, var(--brand));
	border-color: var(--accent, var(--brand));
	color: #fff;
}
.btn.ghost:hover {
	background: var(--ink);
	color: var(--paper);
}
.btn.small {
	padding: 0.5rem 1.1rem;
	font-size: var(--text-xs);
}

/* Round icon-only buttons: the header's theme toggle, and the
   footer's social icons once they're styled the same way. */
.icon-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: none;
	color: var(--ink);
	cursor: pointer;
	text-decoration: none;
	transition: border-color var(--duration) var(--ease),
		background-color var(--duration) var(--ease),
		color var(--duration) var(--ease);
}
.icon-btn:hover {
	border-color: var(--ink);
}

.theme-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	background: none;
	color: var(--ink);
	cursor: pointer;
	font-size: 1.1rem;
}
.theme-toggle:hover {
	border-color: var(--ink);
}

.site-footer-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.site-footer-social a:hover {
	background: var(--ink);
	color: var(--paper);
}
.site-footer-social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}
.site-footer-social-mono {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* ---- Status badge (used in the hero) ---------------------------------- */

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	border: 1.5px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 0.4rem 1rem;
	font-family: var(--font-ui);
	font-weight: 500;
	font-size: var(--text-xs);
	background: var(--surface);
}
.status-badge .dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--brand);
	display: inline-block;
}

/* ---- Section heading pattern ------------------------------------------- */

.pfs-section-head h2 {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-3);
}
.pfs-section-head p {
	color: var(--muted);
	margin: 0;
}

/* ---- Empty-state message (shown before any content is added) --------- */

.pfs-empty {
	color: var(--muted);
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	padding: var(--space-5);
	border: 1.5px dashed var(--line);
	border-radius: var(--radius-md);
}