/**
 * Paripoorn Base
 * Base element styling: focus states, forms, buttons, links.
 */

/*
 * overflow-x:hidden on BOTH html and body — body alone doesn't contain a
 * fixed-position element. The mobile off-canvas menu (.pp-mobile-nav) is
 * position:fixed with transform:translateX(100%) when closed, which is
 * the correct way to hide it, but that transform is computed relative to
 * the viewport, not body: the element's untransformed box still ends up
 * counted in the document's scrollWidth, letting the page scroll
 * horizontally by exactly the panel's width even though nothing is
 * visibly out of place. html needs the same clip as body for a
 * fixed-position child to be truly contained.
 */
html {
	overflow-x: hidden;
	/* width:100% pins the root's own box to the viewport width. Some
	   mobile browsers (notably iOS Safari) allow a touch-drag to scroll
	   past position:fixed content even with overflow-x:hidden set, because
	   that property only prevents scrollBAR-driven scrolling, not the
	   rubber-band/touch-pan gesture. Capping the width directly removes
	   the extra scrollable distance regardless of which mechanism a given
	   browser uses to reach it. */
	width: 100%;
}

body {
	background: var(--pp-bg);
	overflow-x: hidden;
	width: 100%;
	position: relative;
}

/* Focus visibility — never remove outlines without a replacement */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--pp-primary);
	outline-offset: 2px;
	border-radius: var(--pp-radius-sm);
}

a {
	transition: color var(--pp-transition), border-color var(--pp-transition);
}

a.pp-link {
	color: var(--pp-heading);
	border-bottom: 1px solid transparent;
}

a.pp-link:hover {
	color: var(--pp-primary);
	border-bottom-color: currentColor;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea,
select {
	background: var(--pp-input-bg);
	border: 1px solid var(--pp-input-border);
	border-radius: var(--pp-radius-sm);
	padding: var(--pp-space-3) var(--pp-space-4);
	width: 100%;
	transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--pp-primary);
	box-shadow: 0 0 0 3px rgba(242, 13, 22, 0.1);
	outline: none;
}

/* Buttons — global button system, configurable via Theme Settings */
.pp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pp-space-2);
	font-family: var(--pp-font-button);
	font-weight: var(--pp-weight-button);
	font-size: var(--pp-fs-small);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: var(--pp-btn-bg, var(--pp-primary));
	color: var(--pp-btn-text, var(--pp-light-text));
	border: 1px solid var(--pp-btn-border, transparent);
	border-radius: var(--pp-btn-radius, var(--pp-radius-sm));
	padding: var(--pp-btn-padding-y, 14px) var(--pp-btn-padding-x, 32px);
	transition: transform var(--pp-transition), background-color var(--pp-transition), color var(--pp-transition), border-color var(--pp-transition), box-shadow var(--pp-transition);
	cursor: pointer;
	white-space: nowrap;
}

.pp-button:hover,
.pp-button:focus-visible {
	background: var(--pp-btn-hover-bg, var(--pp-primary-dark));
	color: var(--pp-btn-hover-text, var(--pp-light-text));
	border-color: var(--pp-btn-hover-border, transparent);
}

.pp-animations-on .pp-button:hover {
	transform: translateY(-2px);
}

.pp-button--outline {
	background: transparent;
	color: #fff;
	border-color: var(--pp-btn-bg, var(--pp-primary));
}

.pp-button--outline:hover,
.pp-button--outline:focus-visible {
	background: var(--pp-btn-bg, var(--pp-primary));
	color: var(--pp-btn-text, var(--pp-light-text));
}

.pp-button--secondary {
	background: var(--pp-secondary);
	color: var(--pp-light-text);
}

.pp-button--secondary:hover,
.pp-button--secondary:focus-visible {
	background: var(--pp-heading);
}

.pp-button--ghost {
	background: transparent;
	color: var(--pp-heading);
	border-color: var(--pp-border);
}

.pp-button--ghost:hover,
.pp-button--ghost:focus-visible {
	border-color: var(--pp-heading);
}

.pp-button:disabled,
.pp-button[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Cards — shared card treatment used across widgets */
.pp-card {
	background: var(--pp-bg-card);
	border-radius: var(--pp-radius-md);
	transition: transform var(--pp-transition), box-shadow var(--pp-transition);
}

.pp-animations-on .pp-card--hoverable:hover {
	transform: translateY(-4px);
	box-shadow: var(--pp-shadow-md);
}

/* Screen-reader text (WP core convention) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}