/*
 * ArgusTAK — supplementary styles.
 *
 * theme.json owns colours, type and spacing. This file covers only what
 * theme.json cannot express: sticky positioning, the responsive auth-button
 * rules, and the hero composition.
 */

/* ---------------------------------------------------------------- header */

.sts-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.82);
	backdrop-filter: saturate(140%) blur(12px);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* The admin bar is fixed on mobile and would overlap a sticky header. */
.admin-bar .sts-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .sts-header { top: 46px; } }

.sts-header__bar { gap: 1.5rem; }

.sts-brand { gap: 0.625rem; }
.sts-brand__name a,
.sts-brand__name {
	font-weight: 700;
	letter-spacing: -0.015em;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.sts-brand .wp-block-site-logo img { display: block; }

/* ----------------------------------------------------------- buttons */

/*
 * Visual style and placement are deliberately separate concerns.
 *   .sts-btn--primary / .sts-btn--ghost  -> how a button looks, anywhere
 *   .sts-header__login / __register      -> where it sits in the header
 * Overloading one class for both means a header-only rule such as the mobile
 * "hide login" below would silently hide body buttons that borrowed the style.
 *
 * Specificity note: WordPress ships `.wp-block-buttons > .wp-block-button`
 * (0,2,0), so single-class rules lose. Every rule here is at least (0,3,0),
 * which wins on merit rather than with !important.
 */

.wp-block-button.sts-btn--ghost > .wp-block-button__link,
.wp-block-button.sts-btn--primary > .wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

.wp-block-button.sts-btn--ghost > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	padding: 0.5rem 1.125rem;
}
.wp-block-button.sts-btn--ghost > .wp-block-button__link:hover,
.wp-block-button.sts-btn--ghost > .wp-block-button__link:focus-visible {
	border-color: rgba(255, 255, 255, 0.32);
	background-color: rgba(255, 255, 255, 0.06);
}

.wp-block-button.sts-btn--primary > .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	padding: 0.5rem 1.25rem;
	border: 1px solid transparent;
	box-shadow: var(--wp--preset--shadow--card);
}
.wp-block-button.sts-btn--primary > .wp-block-button__link:hover,
.wp-block-button.sts-btn--primary > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary-dark);
}

/* Register is the conversion action and carries the only filled button up top. */
.sts-auth { flex-shrink: 0; }

/* -------------------------------------------------- responsive nav rules */

/*
 * WordPress collapses core/navigation at 600px. Between 600 and 960 the brand,
 * six nav items and two buttons crowd each other, so the overlay is forced up
 * to 960px. This mirrors core's own rules rather than replacing them.
 *
 * The threshold is MEASURED, not chosen, and the margin over the measurement is
 * the whole point. With six items the nav wraps onto a second row at a LAYOUT
 * width below 926px, which grows the sticky header from 73px to 105px -- no
 * overflow and Register stays in the bar, so it breaks nothing this contract
 * asserts, it just looks wrong.
 *
 * 960 rather than 926 because a media query matches the window width INCLUDING
 * the classic scrollbar gutter, while layout gets the width WITHOUT it. On
 * Windows and Linux that gutter is 15-17px and can be larger, so a 936px window
 * lays the header out in ~920px -- inside the broken band -- while the media
 * query happily reports desktop. Measured with the gutter emulated: a 19px
 * gutter still wraps at 946 and a 25px gutter still wraps at 951. 960 clears
 * every gutter we could produce and is a conventional breakpoint besides.
 *
 * macOS and mobile have overlay scrollbars and no gutter, so they pay for this
 * margin with a burger menu between 926 and 959 where the full nav would have
 * fitted. That is the cheaper mistake.
 *
 * Re-measure and move this if you add or rename a nav item. Keep MOBILE_MAX in
 * tools/verify.mjs in step -- it encodes the same boundary and would drift
 * silently. Note the harness CANNOT catch the gutter case: headless Chromium
 * hides scrollbars, so it always measures the no-gutter layout. The margin here
 * is the only thing protecting those platforms.
 */
@media (min-width: 600px) and (max-width: 959px) {
	.sts-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}
	.sts-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Login lives in the bar on wide screens and inside the overlay on narrow ones,
   so it is reachable either way and never duplicated. */
@media (min-width: 960px) {
	.sts-header .sts-nav .sts-nav__login-mobile { display: none; }
}
@media (max-width: 959px) {
	/* Header only. Body buttons using .sts-btn--ghost are untouched. */
	.sts-header .sts-auth .sts-header__login { display: none; }
}

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 0.5rem;
}
.wp-block-navigation__responsive-container.is-menu-open a {
	min-height: 44px;
	display: flex;
	align-items: center;
	font-size: 1.125rem;
}

.sts-nav a { text-decoration: none; color: var(--wp--preset--color--contrast); }
.sts-nav a:hover,
.sts-nav a:focus-visible { color: var(--wp--preset--color--primary); }
.sts-nav .current-menu-item a { color: var(--wp--preset--color--primary); }

/* ------------------------------------------------------------------ hero */

.sts-hero {
	position: relative;
	background-color: var(--wp--preset--color--base);
	background-image: url("../img/hero-topo.svg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* The overlay card, matching the console's rgba(0,0,0,.8) at 12px radius. */
.sts-hero__card {
	background-color: rgba(0, 0, 0, 0.8);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.sts-hero__accent { color: var(--wp--preset--color--primary); }

/* ----------------------------------------------------------------- cards */

.sts-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	height: 100%;
	transition: border-color 160ms ease, transform 160ms ease;
}
.sts-card:hover {
	border-color: rgba(255, 255, 255, 0.24);
	transform: translateY(-2px);
}

.sts-industry {
	border: 1px solid var(--wp--preset--color--border-soft);
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.02);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------- pricing */

.sts-plan { display: flex; flex-direction: column; }
.sts-plan--featured {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary), var(--wp--preset--shadow--lift);
}
.sts-plan__badge {
	display: inline-block;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 0.125rem 0.625rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.sts-plan__list { list-style: none; padding-left: 0; }
.sts-plan__list li {
	padding-left: 1.5rem;
	position: relative;
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
}
.sts-plan__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------- footer */

.sts-footer__list { list-style: none; padding-left: 0; }
.sts-footer__list li { margin-bottom: 0.5rem; font-size: 0.9375rem; }
.sts-footer__list a { color: var(--wp--preset--color--muted); text-decoration: none; }
.sts-footer__list a:hover,
.sts-footer__list a:focus-visible { color: var(--wp--preset--color--contrast); }

/* ------------------------------------------------------------- a11y misc */

:where(a, button, input, textarea, select, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.skip-link:focus {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	padding: 0.75rem 1rem;
	z-index: 200;
}

@media (prefers-reduced-motion: reduce) {
	.sts-card, .sts-card:hover { transition: none; transform: none; }
	html { scroll-behavior: auto; }
}

/* Industry chips are labels first, links second. */
.sts-industry a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 600;
}
.sts-industry:hover { border-color: var(--wp--preset--color--primary); }
.sts-industry:hover a { color: var(--wp--preset--color--primary); }

/* Four pillars stack rather than squeeze; WordPress only breaks columns at 781px. */
@media (max-width: 1100px) and (min-width: 782px) {
	.sts-card { min-width: 0; }
}

/* Plan CTAs align across the row regardless of how much copy each tier carries. */
.sts-plan > .wp-block-buttons { margin-top: auto; padding-top: 0.5rem; }
.sts-plan__list { margin-bottom: 0; }

/* ---------------------------------------------------------------- contact form
 * The enquiry form ships as bare Contact Form 7 markup, so everything below is
 * the theme dressing it to match the rest of the page.
 */
.sts-form p { margin: 0 0 var(--wp--preset--spacing--30); }

.sts-form label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.sts-form input[type="text"],
.sts-form input[type="email"],
.sts-form select,
.sts-form textarea {
	/* Without this the padding and border are added to the 100%, which pushes the
	   field 10px past a 390px viewport -- verify.mjs catches it as overflow. */
	box-sizing: border-box;
	width: 100%;
	margin-top: 0.375rem;
	padding: 0.625rem 0.75rem;
	color: var(--wp--preset--color--contrast);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.sts-form textarea { resize: vertical; }

/* Turnstile draws its own widget in an iframe; this only spaces it and stops it
 * overflowing at 390px. */
.sts-turnstile {
	display: block;
	margin-top: 0.375rem;
	max-width: 100%;
}

/* Shown when the keys are missing, which is a deployment error rather than a
 * visitor's problem -- so it reads as an apology, not a validation failure. */
.sts-turnstile--unconfigured {
	padding: 0.75rem 1rem;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
}

/* Off-screen rather than display:none, which some bots skip over. It carries no
 * aria-hidden on purpose: the label tells a screen reader to leave it empty,
 * while a scraper sees an ordinary labelled field. The previous honeypot
 * announced itself with aria-hidden="true", and its class still read "hp". */
.sts-aux-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}