/*
 * Global components: the floating glass nav (header.php) and the site footer
 * (footer.php). Converted 1:1 from the approved Site Header / Site Footer
 * components; edit here and every page changes.
 */

/* ===== Accessibility: skip link + main landmark =====
 * The skip link is the first focusable element on every page; it is off-screen
 * until it receives keyboard focus, so it changes nothing visually for mouse
 * users. #main is the focus target (tabindex=-1) and never shows an outline box. */
main { display: block; }
#main:focus { outline: none; }
.skip-link {
	position: fixed;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 12px 18px;
	background: #16042E;
	color: #fff;
	font-family: 'Roboto', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 10px 30px -8px rgba(10, 2, 24, 0.6);
	transition: top .18s ease;
}
.skip-link:focus { top: 0; }

/* ===== Floating glass nav ===== */
nav.glassnav {
	background: rgba(22, 4, 46, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 18px 44px -16px rgba(10, 2, 24, 0.55);
	transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
nav.glassnav.navlight {
	background: rgba(255, 255, 255, 0.72);
	border-color: rgba(26, 8, 48, 0.10);
	box-shadow: 0 18px 44px -16px rgba(22, 4, 46, 0.18);
}
.nlink { color: #C8BCE8; text-decoration: none; border-radius: 999px; transition: color .25s ease, background .2s ease; }
.nlink:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
nav.navlight .nlink { color: #574a6e; }
nav.navlight .nlink:hover { color: #16042E; background: rgba(22, 4, 46, 0.06); }
/* Active state: the nav link for the page we're on takes the purple accent in
 * both nav themes (the higher-specificity :hover rules keep it purple on hover). */
.nlink.nlink-active, .nlink.nlink-active:hover { color: #9385FF; }
nav.navlight .nlink.nlink-active, nav.navlight .nlink.nlink-active:hover { color: #6D5DF3; }
/* ===== Animated logo (inc/animated-logo.php) =====
 * Colour is owned here so it flips for free with whatever theme context wraps
 * the logo. The wrapper carries the ink colour (the mark uses currentColor and
 * the "tarim" letters inherit it) and the spark/V5 colour via --al-spark.
 * Geometry + hover behaviour is the vanilla-JS port at the foot of site.js. */
.atarim-logo .al-stage { color: inherit; transition: color .25s ease; }
.atarim-logo .al-mark path,
.atarim-logo .al-spark path { transition: fill .25s ease; }
.atarim-logo .al-v5 { color: var(--al-spark, #9385FF); transition: color .25s ease; }
/* Motion (the global prefers-reduced-motion rule in tokens.css kills these). */
.atarim-logo .al-word { transition: max-width 640ms cubic-bezier(.16, 1, .3, 1); }
.atarim-logo .al-inner span { transition: opacity 640ms cubic-bezier(.16, 1, .3, 1), transform 640ms cubic-bezier(.16, 1, .3, 1); }
.atarim-logo .al-spark { transition: transform 730ms cubic-bezier(.34, 1.56, .64, 1); }
/* Header nav: ink + spark flip on the .glassnav / .navlight theme probe. */
.nbrand { color: #fff; --al-spark: #9385FF; }
nav.navlight .nbrand { color: #16042E; --al-spark: #6D5DF3; }
/* Help app bar: inherit the help theme tokens (flip with data-theme). */
.hc-root .hc-brand { color: var(--ink); --al-spark: var(--violet); }
.fy-drop { position: relative; }
/* "For you" mega-dropdown. The panel is a top-level sibling of the nav (see
 * header.php), positioned + toggled by site.js, so its backdrop blur is live.
 * IMPORTANT: never animate opacity on the glass card — browsers suppress
 * backdrop-filter while opacity < 1, which flashes "tint then blur". The panel
 * toggles opacity instantly; only the card's margin-top animates the slide-in. */
.fy-panel { position: fixed; z-index: 61; padding-top: 10px; opacity: 0; pointer-events: none; font-family: 'Roboto', system-ui, sans-serif; }
.fy-panel.open { opacity: 1; pointer-events: auto; }
.fy-card {
	background: rgba(22, 4, 46, 0.60);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 26px 56px -22px rgba(10, 2, 24, 0.6);
	margin-top: 6px;
	transition: margin-top .18s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.fy-panel.open .fy-card { margin-top: 0; }
.fy-panel.fylight .fy-card { background: rgba(255, 255, 255, 0.72); border-color: rgba(26, 8, 48, 0.10); box-shadow: 0 26px 56px -22px rgba(22, 4, 46, 0.30), 0 2px 8px rgba(22, 4, 46, 0.06); }
/* The row carries the base ink itself (not just its child spans) so anything that
 * flattens link descendants to `inherit` still lands on the panel's own colour
 * instead of the UA link blue. */
.fy-item { color: #C8BCE8; transition: background .18s ease, color .35s ease; }
.fy-panel.fylight .fy-item { color: #6f6388; }
.fy-item:hover { background: rgba(255, 255, 255, 0.08); }
.fy-panel.fylight .fy-item:hover { background: #f4f0fb; }
.fy-tile { background: rgba(255, 255, 255, 0.08); }
.fy-panel.fylight .fy-tile { background: #f4f0fb; }
.fy-title { color: #ffffff; }
.fy-panel.fylight .fy-title { color: #16042E; }
/* Active "For you" item: tinted row + purple title in both panel themes. */
.fy-item.fy-active { background: rgba(147, 133, 255, 0.12); }
.fy-panel.fylight .fy-item.fy-active { background: #f1edfd; }
.fy-item.fy-active .fy-title { color: #9385FF; }
.fy-panel.fylight .fy-item.fy-active .fy-title { color: #6D5DF3; }
.fy-sub { color: #C8BCE8; }
.fy-panel.fylight .fy-sub { color: #6f6388; }

/* Primary CTA (mint pill). Label "Start Free" is the sentence-case exception. */
.btn-mint { background: #3ED696; color: #16042E; text-decoration: none; transition: background .16s ease; }
.btn-mint:hover { background: #35c98a; }

/* ===== Site footer ===== */
.flink { color: #998CC2; text-decoration: none; transition: color .2s ease; }
.flink:hover { color: #fff; }
/* Active state: the footer link for the page we're on takes the purple accent. */
.flink.flink-active,
.flink.flink-active:hover { color: #9385FF; }

/* ============================================================
 * RESPONSIVE LAYER (global: shell, product-mockup fit, nav, footer).
 * Desktop >=1280px is untouched. See docs/theme-guide.md.
 * ============================================================ */

/* The page shell drops its desktop min-width below 1280 so nothing forces a
 * horizontal scrollbar. */
@media (max-width: 1280px) { .atarim-page { min-width: 0 !important; } }

/* ===== Responsive product-mockup fit (generic, reusable) =====
 * The wrappers (.mk-scroll/.mk-fit-box) are layout-neutral on desktop via
 * display:contents, so >=1280 renders the embed at native size exactly as
 * authored. Below 1280, site.js scales each .mk-fit to fit its container and
 * sizes .mk-fit-box to the scaled box; on phones the embed is rendered larger
 * than the viewport inside .mk-scroll, which becomes a horizontal swipe area. */
.mk-scroll, .mk-fit-box { display: contents; }
@media (max-width: 1279px) {
	.mk-scroll { display: flex; justify-content: center; width: 100% !important; overflow-x: auto !important; overflow-y: hidden; -webkit-overflow-scrolling: touch; margin: 28px 0 0; }
	.mk-fit-box { display: block; flex: 0 0 auto; }
	.mk-fit { transform-origin: top left; margin: 0 !important; will-change: transform; }
	/* keep the scroll-reveal opacity but stop hpRise from animating away the JS scale transform */
	.mk-fit.hp-on { animation: none !important; }
}
@media (max-width: 767px) { .mk-scroll { justify-content: flex-start; } }

/* ===== Nav: hamburger below 768 ===== */
.nav-burger { display: none; }
@media (max-width: 767px) {
	#siteNav .nav-desktop, #siteNav .nav-cta { display: none !important; }
	.nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: none; background: transparent; cursor: pointer; color: #fff; padding: 0; }
	nav.navlight .nav-burger { color: #16042E; }
	.nav-mobile {
		position: absolute; top: calc(100% + 10px); left: 0; right: 0;
		display: flex; flex-direction: column; gap: 2px; padding: 10px;
		border-radius: 18px; background: rgba(22, 4, 46, 0.92);
		backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
		border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 22px 50px -18px rgba(10, 2, 24, 0.6);
		opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease;
	}
	.nav-mobile.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
	.nav-mobile a { color: #C8BCE8; text-decoration: none; font-size: 15px; padding: 11px 14px; border-radius: 11px; }
	.nav-mobile a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
	.nav-mobile a.nm-active, .nav-mobile a.nm-active:hover { color: #9385FF; }
	.nav-mobile .nm-label { font-size: 11.5px; color: #998CC2; padding: 12px 14px 4px; }
	.nav-mobile .nm-cta { background: #3ED696; color: #16042E; font-weight: 700; text-align: center; margin-top: 8px; }
	.nav-mobile .nm-cta:hover { background: #35c98a; color: #16042E; }
}
@media (min-width: 768px) { .nav-mobile { display: none; } }

/* ===== Footer: 6 columns -> 3 (tablet) -> 2 (mobile) ===== */
@media (max-width: 1023px) {
	.sf-pad { padding-left: 24px !important; padding-right: 24px !important; }
	.sf-cols { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
	.sf-pad { padding-left: 16px !important; padding-right: 16px !important; }
	.sf-cols { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; }
}


/* ===== Shared: SOP-flowchart tooltips + floating error glyph =====
 * Used by the homepage workflows section and the Trust page (and any page that
 * embeds the chatbot-vs-SOP comparison). .wf-step shows its .wf-tip on hover;
 * errFloat bobs the error icon on the generic-chatbot card. */
@keyframes errFloat {
	0%, 100% { transform: translateY(-50%); }
	50% { transform: translateY(calc(-50% - 6px)); }
}
.wf-step { position: relative; cursor: default; }
.wf-tip {
	position: absolute; left: 50%; bottom: calc(100% + 9px);
	transform: translateX(-50%) translateY(5px);
	z-index: 40; width: max-content; max-width: 230px; text-align: left;
	background: #16042E; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.5;
	padding: 9px 12px; border-radius: 11px; box-shadow: 0 16px 34px -12px rgba(22, 4, 46, 0.55);
	opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
}
.wf-step:hover .wf-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.wf-tip::after {
	content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	border: 6px solid transparent; border-top-color: #16042E;
}

/* Form inputs at 16px so iOS Safari never zooms on focus (Website Specification:
   mobile form inputs). The per-form rules already set 16px, but Gravity Forms'
   orbital theme CSS enqueues after ours and overrides text controls to 14px, so
   this global override needs !important to win. Text controls only; the pill
   submit buttons keep their own type. */
.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container textarea,
.gform_wrapper .ginput_container select {
	font-size: 16px !important;
}