/* ARC Careers — ported from the Apps Script original Styles.html
 *
 * Scope: every rule lives under .arc-portal (portal markup) or .arc-ui
 * (shared overlays: toast stack + success modal) so the stylesheet can load
 * on any themed page via the shortcodes without leaking into the theme or
 * other plugins — and vice-versa. Keyframes carry the `arc` prefix for the
 * same reason: @keyframes are global namespace and names like `fadeIn`
 * collide easily with themes/builders.
 */

/* ================= Motion system ================= */
@keyframes arcFadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes arcFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes arcSlideInRight { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes arcPopIn { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } }
@keyframes arcShimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes arcPulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,.35); } 50% { box-shadow: 0 0 0 8px rgba(37,99,235,0); } }

.arc-portal .anim-fade-up,
.arc-portal.anim-fade-up { animation: arcFadeInUp .45s cubic-bezier(.16,1,.3,1) both; }
.arc-portal .anim-fade { animation: arcFadeIn .3s ease both; }
.arc-ui .anim-toast { animation: arcSlideInRight .35s cubic-bezier(.16,1,.3,1) both; }
.arc-portal .anim-pop,
.arc-ui .anim-pop { animation: arcPopIn .28s cubic-bezier(.34,1.56,.64,1) both; }
.arc-portal .anim-pulse { animation: arcPulseGlow 1.8s ease-in-out infinite; }
.arc-portal .anim-stagger > * { animation: arcFadeInUp .4s cubic-bezier(.16,1,.3,1) both; }
.arc-portal .anim-stagger > *:nth-child(1) { animation-delay: .03s; }
.arc-portal .anim-stagger > *:nth-child(2) { animation-delay: .07s; }
.arc-portal .anim-stagger > *:nth-child(3) { animation-delay: .11s; }
.arc-portal .anim-stagger > *:nth-child(4) { animation-delay: .15s; }
.arc-portal .anim-stagger > *:nth-child(5) { animation-delay: .19s; }

.arc-portal .skeleton { background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 37%, #eef1f6 63%); background-size: 800px 100%; animation: arcShimmer 1.4s linear infinite; border-radius: .5rem; }

.arc-portal .btn, .arc-portal button,
.arc-ui .btn, .arc-ui button { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.arc-portal .btn:active, .arc-portal button:active,
.arc-ui .btn:active, .arc-ui button:active { transform: scale(.97); }

.arc-ui .modal-card { animation: arcPopIn .3s cubic-bezier(.34,1.56,.64,1) both; }
.arc-ui.overlay { animation: arcFadeIn .2s ease both; overflow-y: auto; }
.arc-ui.overlay > .modal-card { max-height: 92vh; overflow-y: auto; }

/* ================= Collapsible sections ================= */
/* The original toggled an `.active` class that had no CSS, so sections never
   collapsed. Here they start expanded (markup carries `active`) and the
   toggle actually folds them. */
.arc-portal .section-content { display: none; }
.arc-portal .section-content.active { display: grid; }
.arc-portal .section-toggle .toggle-icon { transition: transform .2s ease; }

/* ================= Honeypot =================
   Invisible to humans but present in the DOM — display:none is detectable by
   bots, so it is pushed off-screen instead. */
.arc-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }

/* ================= Layering ================= */
#successOverlay { z-index: 1300; }
#toastWrap { z-index: 1400; }

/* ================= International phone input (flags) =================
   intl-tel-input's own classes — left unscoped on purpose: the country
   dropdown is appended to <body> (dropdownContainer option), outside
   .arc-portal, and sharing the rules with other iti instances is harmless. */
.iti { width: 100%; }
.iti__flag-container { border-radius: .5rem 0 0 .5rem; }
input.iti__tel-input,
.iti input[type="tel"] { width: 100%; }
.iti__country-list { z-index: 9999 !important; max-height: 260px; }

/* ================= Toasts & inline notices ================= */
#toastWrap { display: grid; gap: .6rem; }

.arc-ui .toast {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	padding: .85rem 1rem;
	border-radius: .85rem;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(10px);
	border: 1px solid #e2e8f0;
	border-left: 4px solid #64748b;
	box-shadow: 0 10px 30px -10px rgba(15,23,42,.35);
	color: #0f172a;
	font-size: .875rem;
	transition: opacity .24s ease, transform .24s ease;
}
.arc-ui .toast strong { font-size: .8rem; letter-spacing: .01em; }
.arc-ui .toast .mini { font-size: .8rem; color: #475569; }
.arc-ui .toast .icon {
	flex: 0 0 auto;
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	font-size: .75rem; font-weight: 700; line-height: 1;
	background: #e2e8f0; color: #334155;
}
.arc-ui .toast.success { border-left-color: #16a34a; }
.arc-ui .toast.success .icon { background: #dcfce7; color: #15803d; }
.arc-ui .toast.error { border-left-color: #dc2626; }
.arc-ui .toast.error .icon { background: #fee2e2; color: #b91c1c; }
.arc-ui .toast.info { border-left-color: #2563eb; }
.arc-ui .toast.info .icon { background: #dbeafe; color: #1d4ed8; }

.arc-ui .toast.opacity-0 { opacity: 0; }
.arc-ui .toast.transform-translate-y-8 { transform: translateY(8px); }

.arc-portal .notice,
.arc-ui .notice {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	padding: .8rem .95rem;
	border-radius: .75rem;
	border: 1px solid #e2e8f0;
	background: #f8fafc;
	color: #0f172a;
	font-size: .875rem;
}
.arc-portal .notice .icon,
.arc-ui .notice .icon {
	flex: 0 0 auto;
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; font-size: .75rem; font-weight: 700;
	background: #e2e8f0; color: #334155;
}
.arc-portal .notice .text strong,
.arc-ui .notice .text strong { display: block; margin-bottom: .15rem; font-size: .8rem; }
.arc-portal .notice .mini,
.arc-ui .notice .mini { color: #475569; }
.arc-portal .notice.success,
.arc-ui .notice.success { background: #f0fdf4; border-color: #bbf7d0; }
.arc-portal .notice.success .icon,
.arc-ui .notice.success .icon { background: #dcfce7; color: #15803d; }
.arc-portal .notice.error,
.arc-ui .notice.error { background: #fef2f2; border-color: #fecaca; }
.arc-portal .notice.error .icon,
.arc-ui .notice.error .icon { background: #fee2e2; color: #b91c1c; }
.arc-portal .notice.info,
.arc-ui .notice.info { background: #eff6ff; border-color: #bfdbfe; }
.arc-portal .notice.info .icon,
.arc-ui .notice.info .icon { background: #dbeafe; color: #1d4ed8; }

/* helper utilities used by the feedback markup */
.arc-portal .display-block,
.arc-ui .display-block { display: block; }
.arc-portal .margin-bottom-4,
.arc-ui .margin-bottom-4 { margin-bottom: .25rem; }
.arc-portal .line-height-1-5,
.arc-ui .line-height-1-5 { line-height: 1.5; }
.arc-portal .line-height-1-6,
.arc-ui .line-height-1-6 { line-height: 1.6; }
.arc-portal .mini,
.arc-ui .mini { font-size: .8rem; }

@media (prefers-reduced-motion: reduce) {
	.arc-portal .anim-fade-up, .arc-portal.anim-fade-up,
	.arc-portal .anim-fade, .arc-ui .anim-toast,
	.arc-portal .anim-pop, .arc-ui .anim-pop,
	.arc-portal .anim-pulse, .arc-portal .anim-stagger > *,
	.arc-portal .skeleton, .arc-ui .modal-card, .arc-ui.overlay {
		animation: none !important;
		transition: none !important;
	}
}