/*
 * 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); }
.fy-item { transition: background .18s ease; }
.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;
}