/**
 * Free Resume Builder
 *
 * Shared component styles.
 *
 * @package Free_Resume_Builder
 */


/* ==========================================================================
   1. Header
   ========================================================================== */

.rm-site-header {
	--rm-header-accent: var(--rm-color-primary);
}

.rm-site-header.is-scrolled {
	box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.rm-header-inner {
	position: relative;
}

.rm-brand {
	position: relative;
	flex-shrink: 0;
}

.rm-brand-mark {
	position: relative;
}

.rm-brand-mark svg {
	filter: drop-shadow(0 3px 7px rgba(29, 78, 216, 0.14));
}

.rm-brand-copy {
	justify-content: center;
}

.rm-brand-name {
	letter-spacing: -0.015em;
}

.rm-header-actions {
	flex-shrink: 0;
}

.rm-header-cta {
	box-shadow: 0 4px 12px rgba(29, 78, 216, 0.16);
	transition:
		background-color var(--rm-transition-fast),
		border-color var(--rm-transition-fast),
		box-shadow var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-header-cta:hover {
	box-shadow: 0 6px 16px rgba(29, 78, 216, 0.22);
	transform: translateY(-1px);
}

.rm-header-cta:active {
	transform: translateY(0);
}


/* ==========================================================================
   2. Main Navigation
   ========================================================================== */

.rm-main-navigation {
	flex: 1 1 auto;
	min-width: 0;
}

.rm-navigation-primary {
	min-width: 0;
}

.rm-navigation-link {
	white-space: nowrap;
	transition:
		color var(--rm-transition-fast),
		background-color var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-navigation-link:hover {
	transform: translateY(-1px);
}

.rm-navigation-link:active {
	transform: translateY(0);
}

.rm-navigation-link.is-active {
	font-weight: 650;
}

.rm-navigation-link-primary {
	position: relative;
}

.rm-navigation-link-primary::after {
	position: absolute;
	right: 10px;
	bottom: 3px;
	left: 10px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	content: "";
	opacity: 0;
	transform: scaleX(0.4);
	transition:
		opacity var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-navigation-link-primary:hover::after,
.rm-navigation-link-primary.is-active::after {
	opacity: 0.65;
	transform: scaleX(1);
}


/* ==========================================================================
   3. Navigation Dropdown
   ========================================================================== */

.rm-navigation-dropdown-menu {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	transform-origin: top left;
	transition:
		opacity var(--rm-transition-fast),
		transform var(--rm-transition-fast),
		visibility var(--rm-transition-fast);
}

.rm-navigation-dropdown.is-open .rm-navigation-dropdown-menu,
.rm-navigation-dropdown-menu:not([hidden]) {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.rm-navigation-dropdown-item {
	position: relative;
	transition:
		background-color var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-navigation-dropdown-item:hover {
	transform: translateX(2px);
}

.rm-navigation-dropdown-item-icon {
	flex-shrink: 0;
}

.rm-navigation-dropdown-item strong {
	color: var(--rm-color-text);
	font-weight: 650;
}


/* ==========================================================================
   4. User Menu
   ========================================================================== */

.rm-user-trigger {
	transition:
		background-color var(--rm-transition-fast),
		border-color var(--rm-transition-fast);
}

.rm-user-trigger:focus-visible {
	outline: none;
	box-shadow: var(--rm-focus-ring);
}

.rm-user-dropdown {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px) scale(0.98);
	transform-origin: top right;
	transition:
		opacity var(--rm-transition-fast),
		transform var(--rm-transition-fast),
		visibility var(--rm-transition-fast);
}

.rm-user-menu.is-open .rm-user-dropdown,
.rm-user-dropdown:not([hidden]) {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.rm-dropdown-link {
	transition:
		color var(--rm-transition-fast),
		background-color var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-dropdown-link:hover {
	transform: translateX(2px);
}


/* ==========================================================================
   5. Mobile Navigation
   ========================================================================== */

.rm-mobile-navigation {
	box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
}

.rm-mobile-navigation-inner {
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rm-mobile-nav-link {
	transition:
		color var(--rm-transition-fast),
		background-color var(--rm-transition-fast),
		padding-left var(--rm-transition-fast);
}

.rm-mobile-nav-link:hover {
	padding-left: 16px;
}

.rm-mobile-create-button {
	box-shadow: 0 5px 14px rgba(29, 78, 216, 0.17);
}


/* ==========================================================================
   6. Footer
   ========================================================================== */

.rm-site-footer {
	position: relative;
}

.rm-site-footer::before {
	display: block;
	width: 100%;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(59, 130, 246, 0.65),
		transparent
	);
	content: "";
}

.rm-footer-logo {
	transition:
		opacity var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-footer-logo:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.rm-footer-primary-button {
	box-shadow: 0 5px 14px rgba(29, 78, 216, 0.18);
	transition:
		background-color var(--rm-transition-fast),
		box-shadow var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-footer-primary-button:hover {
	box-shadow: 0 7px 18px rgba(29, 78, 216, 0.24);
	transform: translateY(-1px);
}

.rm-footer-links a {
	display: inline-block;
	transition:
		color var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-footer-links a:hover {
	transform: translateX(2px);
}

.rm-footer-free-badge {
	transition:
		background-color var(--rm-transition-fast),
		border-color var(--rm-transition-fast);
}

.rm-footer-free-badge:hover {
	background: rgba(255, 255, 255, 0.065);
	border-color: rgba(255, 255, 255, 0.12);
}


/* ==========================================================================
   7. Modal Enhancements
   ========================================================================== */

.rm-modal {
	opacity: 1;
	transition: opacity var(--rm-transition-fast);
}

.rm-modal[hidden] {
	opacity: 0;
	pointer-events: none;
}

.rm-modal-overlay {
	opacity: 1;
	transition: opacity var(--rm-transition);
}

.rm-modal-dialog {
	animation: rm-modal-enter 180ms ease-out;
}

.rm-modal-heading {
	min-width: 0;
}

.rm-modal-title-wrap {
	min-width: 0;
}

.rm-modal-title {
	overflow-wrap: anywhere;
}

.rm-modal-close {
	flex-shrink: 0;
	transition:
		color var(--rm-transition-fast),
		background-color var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-modal-close:hover {
	transform: rotate(3deg);
}

.rm-modal-button {
	transition:
		color var(--rm-transition-fast),
		background-color var(--rm-transition-fast),
		border-color var(--rm-transition-fast),
		box-shadow var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-modal-button:hover {
	transform: translateY(-1px);
}

.rm-modal-button:active {
	transform: translateY(0);
}

@keyframes rm-modal-enter {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.985);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}


/* ==========================================================================
   8. Toast Enhancements
   ========================================================================== */

.rm-toast {
	animation: rm-toast-enter 220ms ease-out;
}

.rm-toast-close {
	transition:
		color var(--rm-transition-fast),
		background-color var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-toast-close:hover {
	transform: scale(1.04);
}

.rm-toast-progress {
	transform: scaleX(1);
}

.rm-toast.is-closing {
	animation: rm-toast-exit 180ms ease-in forwards;
}

@keyframes rm-toast-enter {
	from {
		opacity: 0;
		transform: translateY(10px) translateX(10px);
	}

	to {
		opacity: 1;
		transform: translateY(0) translateX(0);
	}
}

@keyframes rm-toast-exit {
	to {
		opacity: 0;
		transform: translateY(8px) translateX(10px);
	}
}


/* ==========================================================================
   9. Loading
   ========================================================================== */

.rm-loading {
	min-width: 0;
}

.rm-loading-spinner-track {
	color: currentColor;
}

.rm-loading-spinner-progress {
	animation: rm-loading-spinner-dash 1.15s ease-in-out infinite;
	transform-origin: center;
}

@keyframes rm-loading-spinner-dash {
	0% {
		stroke-dasharray: 1 126;
		stroke-dashoffset: 0;
	}

	50% {
		stroke-dasharray: 80 126;
		stroke-dashoffset: -20;
	}

	100% {
		stroke-dasharray: 80 126;
		stroke-dashoffset: -100;
	}
}

.rm-loading-dots span {
	will-change: transform, opacity;
}

.rm-loading-bar {
	position: relative;
}

.rm-loading-bar span {
	will-change: transform;
}

.rm-loading-skeleton {
	width: 100%;
}

.rm-skeleton-line {
	will-change: background-position;
}


/* ==========================================================================
   10. Empty State Enhancements
   ========================================================================== */

.rm-empty-state-inner {
	animation: rm-empty-state-enter 240ms ease-out;
}

.rm-empty-state-illustration {
	position: relative;
	box-shadow:
		inset 0 0 0 1px rgba(29, 78, 216, 0.05),
		0 8px 25px rgba(29, 78, 216, 0.06);
}

.rm-empty-state-illustration::after {
	position: absolute;
	inset: -7px;
	border: 1px solid rgba(29, 78, 216, 0.07);
	border-radius: 50%;
	content: "";
}

.rm-empty-state-button {
	transition:
		background-color var(--rm-transition-fast),
		border-color var(--rm-transition-fast),
		color var(--rm-transition-fast),
		box-shadow var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-empty-state-button:hover {
	transform: translateY(-1px);
}

.rm-empty-state-button:active {
	transform: translateY(0);
}

@keyframes rm-empty-state-enter {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ==========================================================================
   11. Export Modal
   ========================================================================== */

.rm-export-option {
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

.rm-export-option:focus-visible {
	outline: none;
	box-shadow: var(--rm-focus-ring);
}

.rm-export-option.is-selected {
	box-shadow:
		0 0 0 2px rgba(29, 78, 216, 0.08),
		0 5px 16px rgba(29, 78, 216, 0.06);
}

.rm-export-option-icon {
	transition:
		transform var(--rm-transition-fast),
		background-color var(--rm-transition-fast);
}

.rm-export-option:hover .rm-export-option-icon {
	transform: translateY(-1px);
}

.rm-export-option-check {
	transition:
		opacity var(--rm-transition-fast),
		transform var(--rm-transition-fast);
}

.rm-export-download-button {
	min-width: 126px;
}

.rm-export-download-button:disabled {
	cursor: not-allowed;
}

.rm-export-status {
	animation: rm-export-status-enter 180ms ease-out;
}

.rm-export-error {
	animation: rm-export-status-enter 180ms ease-out;
}

@keyframes rm-export-status-enter {
	from {
		opacity: 0;
		transform: translateY(4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ==========================================================================
   12. Responsive Component Refinement
   ========================================================================== */

@media (max-width: 1100px) {

	.rm-navigation-primary {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.rm-navigation-primary::-webkit-scrollbar {
		display: none;
	}

	.rm-navigation-link {
		flex-shrink: 0;
	}

}


@media (max-width: 900px) {

	.rm-site-header {
		position: sticky;
		top: 0;
	}

	.rm-header-inner {
		z-index: 2;
	}

	.rm-mobile-navigation {
		position: relative;
	}

	.rm-mobile-navigation-inner {
		padding-bottom: max(
			16px,
			env(safe-area-inset-bottom)
		);
	}

}


@media (max-width: 640px) {

	.rm-site-header {
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
	}

	.rm-mobile-navigation-inner {
		width: calc(100% - 24px);
	}

	.rm-modal-dialog {
		animation: rm-modal-mobile-enter 180ms ease-out;
	}

	.rm-toast {
		animation-name: rm-toast-mobile-enter;
	}

	.rm-footer-links a:hover {
		transform: none;
	}

	.rm-footer-primary-button:hover,
	.rm-empty-state-button:hover,
	.rm-modal-button:hover {
		transform: none;
	}

	.rm-export-option:hover {
		transform: none;
	}

}

@keyframes rm-modal-mobile-enter {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes rm-toast-mobile-enter {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


@media (max-width: 380px) {

	.rm-brand-name {
		max-width: 135px;
	}

	.rm-mobile-navigation-inner {
		width: calc(100% - 20px);
	}

	.rm-export-option {
		padding: 11px;
	}

	.rm-export-option-icon {
		width: 38px;
		height: 38px;
	}

	.rm-export-option-description {
		font-size: 0.68rem;
	}

	.rm-footer-description {
		font-size: 0.8125rem !important;
	}

}


/* ==========================================================================
   13. Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.rm-navigation-link:hover,
	.rm-navigation-dropdown-item:hover,
	.rm-dropdown-link:hover,
	.rm-mobile-nav-link:hover,
	.rm-footer-logo:hover,
	.rm-footer-primary-button:hover,
	.rm-footer-links a:hover,
	.rm-modal-button:hover,
	.rm-empty-state-button:hover,
	.rm-export-option:hover {
		transform: none;
	}

	.rm-modal-dialog,
	.rm-toast,
	.rm-empty-state-inner,
	.rm-export-status,
	.rm-export-error {
		animation: none !important;
	}

	.rm-loading-spinner-progress,
	.rm-loading-dots span,
	.rm-loading-bar span,
	.rm-skeleton-line {
		animation: none !important;
	}

}