/**
 * HappyPaws Base Styles
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: var(--hp-font-family);
	font-size: var(--hp-font-size-base);
	font-weight: var(--hp-font-weight-normal);
	line-height: var(--hp-line-height-base);
	color: var(--hp-color-text);
	background-color: var(--hp-color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.hp-nav-open {
	overflow: hidden;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--hp-color-accent);
	text-decoration: none;
	transition: color var(--hp-transition-fast);
}

a:hover,
a:focus-visible {
	color: var(--hp-color-accent-hover);
}

:focus-visible {
	outline: 2px solid var(--hp-color-accent);
	outline-offset: 2px;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--hp-space-4);
	font-weight: var(--hp-font-weight-bold);
	line-height: var(--hp-line-height-tight);
	letter-spacing: var(--hp-letter-spacing-tight);
	color: var(--hp-color-text);
}

h1,
.hp-heading-1 {
	font-size: var(--hp-font-size-3xl);
}

h2,
.hp-heading-2 {
	font-size: var(--hp-font-size-2xl);
}

h3,
.hp-heading-3 {
	font-size: var(--hp-font-size-xl);
}

h4,
.hp-heading-4 {
	font-size: var(--hp-font-size-lg);
}

p {
	margin: 0 0 var(--hp-space-4);
}

.hp-text-muted {
	color: var(--hp-color-text-muted);
}

.hp-text-sm {
	font-size: var(--hp-font-size-sm);
}

.hp-text-lg {
	font-size: var(--hp-font-size-lg);
}

/* Buttons */
.hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--hp-space-2);
	padding: var(--hp-space-3) var(--hp-space-5);
	font-family: inherit;
	font-size: var(--hp-font-size-sm);
	font-weight: var(--hp-font-weight-semibold);
	line-height: 1;
	color: var(--hp-color-text-inverse);
	background: linear-gradient(135deg, var(--hp-pink-400), var(--hp-pink-500));
	border: none;
	border-radius: var(--hp-radius-full);
	box-shadow: var(--hp-shadow-sm);
	cursor: pointer;
	transition:
		transform var(--hp-transition-fast),
		box-shadow var(--hp-transition-fast),
		background var(--hp-transition-fast);
}

.hp-btn:hover,
.hp-btn:focus-visible {
	color: var(--hp-color-text-inverse);
	background: linear-gradient(135deg, var(--hp-pink-500), var(--hp-pink-600));
	box-shadow: var(--hp-shadow-md);
	transform: translateY(-1px);
}

.hp-btn--ghost {
	color: var(--hp-color-accent);
	background: var(--hp-color-accent-soft);
	box-shadow: none;
}

.hp-btn--ghost:hover,
.hp-btn--ghost:focus-visible {
	color: var(--hp-color-accent-hover);
	background: var(--hp-pink-200);
}

.hp-btn--sm {
	padding: var(--hp-space-2) var(--hp-space-4);
	font-size: var(--hp-font-size-xs);
}

/* Cards */
.hp-card {
	background: var(--hp-color-surface);
	border: 1px solid var(--hp-color-border);
	border-radius: var(--hp-radius-xl);
	box-shadow: var(--hp-shadow-card);
}

@keyframes hp-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* Screen reader */
.hp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Live video overlay chips (shared) */
.hp-live-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-height: var(--hp-live-chip-height);
	padding: 0 var(--hp-live-chip-pad-x);
	font-size: var(--hp-live-chip-font);
	font-weight: var(--hp-font-weight-bold);
	line-height: 1;
	white-space: nowrap;
	border-radius: var(--hp-radius-full);
}

.hp-live-chip--live {
	color: #fff;
	background: #ff6b85;
}

.hp-live-chip--meta {
	color: #fff;
	background: rgba(74, 63, 71, 0.65);
	backdrop-filter: blur(4px);
}

.hp-live-chip--icon {
	width: var(--hp-live-chip-height);
	min-width: var(--hp-live-chip-height);
	height: var(--hp-live-chip-height);
	padding: 0;
	font-size: 0.8125rem;
	line-height: 1;
	color: #fff;
	border: 0;
	cursor: pointer;
}

.hp-live-chip--icon svg {
	display: block;
	flex-shrink: 0;
	width: 0.875rem;
	height: 0.875rem;
	color: #fff;
}

.hp-live-chip--name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
	pointer-events: auto;
}

/* Live video — four-corner overlay */
.hp-live-video-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.hp-live-video-overlay__corner {
	position: absolute;
	display: flex;
	align-items: center;
	gap: var(--hp-live-chip-gap);
	max-width: calc(100% - (var(--hp-live-overlay-inset) * 2));
	pointer-events: none;
}

.hp-live-video-overlay__corner--tl {
	top: var(--hp-live-overlay-inset);
	left: var(--hp-live-overlay-inset);
}

.hp-live-video-overlay__corner--bl {
	bottom: var(--hp-live-overlay-inset);
	left: var(--hp-live-overlay-inset);
	max-width: calc(
		100% - (var(--hp-live-overlay-inset) * 2) -
		(var(--hp-live-chip-height) * 2) - (var(--hp-live-chip-gap) * 2) - var(--hp-space-2)
	);
}

.hp-live-video-overlay__corner--tr {
	top: var(--hp-live-overlay-inset);
	right: var(--hp-live-overlay-inset);
	justify-content: flex-end;
}

.hp-live-video-overlay__corner--br {
	right: var(--hp-live-overlay-inset);
	bottom: var(--hp-live-overlay-inset);
	justify-content: flex-end;
	pointer-events: auto;
}

.hp-live-video-overlay .hp-live-chip {
	box-sizing: border-box;
	height: var(--hp-live-chip-height);
	min-height: var(--hp-live-chip-height);
	pointer-events: auto;
}

.hp-live-video-overlay .hp-live-chip--name {
	width: auto;
	max-width: 100%;
	padding: 0 var(--hp-live-chip-pad-x);
}

.hp-live-video-overlay .hp-live-chip--name:hover,
.hp-live-video-overlay .hp-live-chip--name:focus-visible {
	color: #fff;
}

.hp-link-more {
	font-size: var(--hp-font-size-sm);
	font-weight: var(--hp-font-weight-semibold);
	color: var(--hp-color-text-muted);
	text-decoration: none;
	white-space: nowrap;
}

.hp-link-more:hover,
.hp-link-more:focus-visible {
	color: var(--hp-color-accent);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 767px) {
	:root {
		--hp-live-overlay-inset: var(--hp-space-2);
	}
}