/*
Theme Name: AI Resume Architect
Theme URI: https://example.com/
Author: AI Resume Architect
Description: Gold Seal themed AI resume builder — black-and-gold palette matching the CV Builders monogram mark.
Version: 1.6.2
Requires PHP: 8.0
Text Domain: ai-resume-architect
*/

/* -------------------------------------------------------------------- */
/* Palette — centralized as custom properties (the original React app    */
/* hardcoded these hex values in dozens of places instead). Gold/bronze   */
/* values are sampled directly from the CV Builders logo mark             */
/* (assets/img/logo.png), not picked freehand.                           */
/* -------------------------------------------------------------------- */

:root {
	--bg-navy-dark: #050403;
	--bg-navy-light: #171006;
	--accent-gold: #EFC75E;
	--accent-bronze: #C87823;
	--particle-hue-1: #F8D26B;
	--particle-hue-2: #EFC75E;
	--particle-hue-3: #C87823;
	--particle-hue-4: #8C5A1D;

	--glass-fill: rgba(255, 255, 255, 0.05);
	--glass-fill-dark: rgba(5, 4, 3, 0.6);
	--glass-border: rgba(239, 199, 94, 0.15);

	--text-primary: #f8f6f0;
	--text-muted: #a89b7f;

	--font-serif: 'Playfair Display', Georgia, serif;
}

* {
	box-sizing: border-box;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Inter', sans-serif;
	background: var(--bg-navy-dark);
	color: var(--text-primary);
	margin: 0;
}

h1, h2, .ara-logo-wordmark {
	font-family: var(--font-serif);
}

.resume-font {
	font-family: 'Inter', sans-serif;
}

a {
	color: inherit;
}

/* -------------------------------------------------------------------- */
/* Neon Nebula page background + particle canvas                        */
/* -------------------------------------------------------------------- */

.ara-page {
	position: relative;
	min-height: 100vh;
	background: linear-gradient(180deg, var(--bg-navy-dark) 0%, var(--bg-navy-light) 50%, var(--bg-navy-dark) 100%);
	overflow-x: hidden;
}

.ara-page--app {
	background: linear-gradient(135deg, var(--bg-navy-dark) 0%, var(--bg-navy-light) 50%, var(--bg-navy-dark) 100%);
}

.ara-particles {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background: transparent;
}

.ara-orb {
	position: absolute;
	border-radius: 9999px;
	filter: blur(64px);
	opacity: 0.3;
	animation: ara-pulse 4s ease-in-out infinite;
	pointer-events: none;
}

.ara-content {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------- */
/* Glassmorphism                                                        */
/* -------------------------------------------------------------------- */

.glass {
	background: var(--glass-fill);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
}

.glass-dark {
	background: var(--glass-fill-dark);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--glass-border);
}

.card-hover {
	transition: transform 0.3s, box-shadow 0.3s;
}
.card-hover:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(239, 199, 94, 0.12);
}

.btn-press:active {
	transform: scale(0.98);
}

/* -------------------------------------------------------------------- */
/* Gold text glow — a single soft warm halo rather than a stacked neon    */
/* sign glow, to read as gold-foil/lustre instead of Neon Nebula's       */
/* cyberpunk glow.                                                       */
/* -------------------------------------------------------------------- */

.neon-gold {
	text-shadow: 0 0 12px rgba(239, 199, 94, 0.35);
}
.neon-bronze {
	text-shadow: 0 0 12px rgba(200, 120, 35, 0.35);
}

/* -------------------------------------------------------------------- */
/* Keyframes / animation utilities                                       */
/* -------------------------------------------------------------------- */

@keyframes ara-gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}
.animate-gradient {
	animation: ara-gradient 4s ease infinite;
}
.bg-size-200 {
	background-size: 200% 200%;
}

@keyframes ara-float {
	0% { transform: translateY(0); }
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0); }
}
.animate-float {
	animation: ara-float 6s ease-in-out infinite;
}

@keyframes ara-glow {
	0% { box-shadow: 0 0 20px rgba(239, 199, 94, 0.25); }
	100% { box-shadow: 0 0 40px rgba(239, 199, 94, 0.5); }
}
.animate-glow {
	animation: ara-glow 2s ease-in-out infinite alternate;
}

@keyframes ara-pulse-scale {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}
.animate-pulse-scale {
	animation: ara-pulse-scale 3s ease-in-out infinite;
}

@keyframes ara-shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}
.animate-shimmer {
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
	background-size: 200% 100%;
	animation: ara-shimmer 2s infinite;
}

@keyframes ara-skeleton {
	0% { background-position: -200px 0; }
	100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
	background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 37%, rgba(255,255,255,0.05) 63%);
	background-size: 400% 100%;
	animation: ara-skeleton 1.5s ease infinite;
}

@keyframes ara-pulse {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 0.5; }
}

/* -------------------------------------------------------------------- */
/* Scrollbar, selection, focus                                          */
/* -------------------------------------------------------------------- */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(5, 4, 3, 0.8); }
::-webkit-scrollbar-thumb { background: rgba(239, 199, 94, 0.5); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(239, 199, 94, 0.7); }

::selection { background: rgba(239, 199, 94, 0.3); color: #fff; }

*:focus { outline: none; }
*:focus-visible { outline: 2px solid rgba(239, 199, 94, 0.5); }

/* -------------------------------------------------------------------- */
/* Basic layout utilities used by the ported pages (a minimal, purpose-  */
/* built subset of what Tailwind's CDN build provided the original app). */
/* -------------------------------------------------------------------- */

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.flex { display: flex; }
.grid { display: grid; }
.hidden { display: none; }
.text-center { text-align: center; }
.rounded { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 9999px;
	font-weight: 600;
	cursor: pointer;
	border: none;
	text-decoration: none;
}
.btn-primary {
	background: linear-gradient(135deg, var(--accent-gold), var(--accent-bronze));
	color: #1a1206;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-outline {
	background: transparent;
	border: 1px solid var(--glass-border);
	color: var(--text-primary);
}

@media (max-width: 640px) {
	.container { padding: 0 16px; }
	h1 { font-size: 2rem !important; }
}

@media print {
	.no-print { display: none !important; }
	body { background: #fff !important; }
	.print-only { display: block !important; }
	@page { margin: 0; }
}
.print-only { display: none; }

/* -------------------------------------------------------------------- */
/* Auth box (Google + native login/register), template-parts/auth-box.php */
/* -------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.ara-auth-box {
	padding: 20px;
	border-radius: 16px;
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
}
.ara-google-btn {
	width: 100%;
	background: #fff;
	color: #1e293b;
	white-space: nowrap;
	box-sizing: border-box;
}
.ara-google-btn:hover { filter: brightness(0.97); }
.ara-auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--text-muted);
	font-size: 12px;
	margin: 14px 0;
}
.ara-auth-divider::before, .ara-auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--glass-border);
}
.ara-native-login {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ara-native-login input {
	background: rgba(255,255,255,0.05);
	border: 1px solid var(--glass-border);
	border-radius: 8px;
	padding: 10px 14px;
	color: var(--text-primary);
	font-size: 14px;
}
.ara-native-login input::placeholder { color: var(--text-muted); }
.ara-auth-register {
	text-align: center;
	font-size: 13px;
	color: var(--text-muted);
	margin: 14px 0 0;
}
.ara-link-btn {
	background: none;
	border: none;
	color: var(--accent-gold);
	cursor: pointer;
	font-weight: 600;
	padding: 0;
	font-size: 13px;
}
.ara-auth-hint {
	font-size: 11px;
	color: var(--text-muted);
	margin: 0;
}
.ara-header-auth-toggle { position: relative; }
.ara-header-auth-toggle .ara-auth-box {
	/* Fixed px width, not the inherited 100%/max-width:320px — as an
	   absolutely positioned box, a percentage width resolves against this
	   toggle wrapper's own (content-shrunk, ~90px) width, not the intended
	   popover size, which made the whole card render far too narrow and
	   wrapped every line of button text. */
	position: absolute;
	right: 0;
	top: calc(100% + 12px);
	width: 300px;
	max-width: 90vw;
	z-index: 50;
	background: var(--bg-navy-light);
}

/* -------------------------------------------------------------------- */
/* App shell (client + admin dashboards)                                 */
/* -------------------------------------------------------------------- */

.ara-app-shell {
	display: flex;
	min-height: 100vh;
}
.ara-sidebar {
	width: 260px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	padding: 24px 16px;
	position: sticky;
	top: 0;
	height: 100vh;
}
.ara-sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 24px 0;
}
.ara-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	color: #cbd5e1;
	text-decoration: none;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	width: 100%;
	text-align: left;
}
.ara-nav-item:hover { background: rgba(255,255,255,0.05); }
.ara-nav-item.is-active { background: linear-gradient(135deg, rgba(239,199,94,0.18), rgba(200,120,35,0.18)); color: #fff; }
.ara-main { flex: 1; padding: 32px; position: relative; z-index: 1; }
.ara-user-footer {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--glass-border);
}
.ara-logo {
	height: 34px;
	width: auto;
	display: block;
}

@media (max-width: 900px) {
	.ara-sidebar {
		position: fixed;
		left: -280px;
		z-index: 60;
		background: var(--bg-navy-dark);
		transition: left 0.3s;
	}
	.ara-sidebar.is-open { left: 0; }
}

.badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 9999px;
	font-size: 11px;
	font-weight: 600;
}
.badge-admin { background: rgba(239,199,94,0.2); color: #f4d78a; }
.badge-client { background: rgba(168,155,127,0.2); color: var(--text-muted); }
.badge-trades { background: rgba(200,120,35,0.25); color: #e8a866; }

/* Resumes grid/list */
[data-view-container][data-view="list"] .resume-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
[data-view-container][data-view="grid"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 20px;
}
[data-view-container][data-view="list"] {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.resume-card-header {
	height: 60px;
	border-radius: 10px 10px 0 0;
}
[data-view-container][data-view="list"] .resume-card-header {
	width: 60px;
	height: 60px;
	border-radius: 10px;
	flex-shrink: 0;
}

.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--glass-border); font-size: 13px; }
.data-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }

.stat-card { padding: 20px; }
.stat-card-value { font-size: 24px; font-weight: 700; }
.stat-card-label { color: var(--text-muted); font-size: 13px; }