/**
 * RuleFence global design system.
 *
 * This file styles global WordPress and Kadence surfaces. Page-specific CSS
 * belongs in the page's own scoped stylesheet or Custom HTML CSS tab.
 */

:root {
	color-scheme: light;

	/* Brand and interaction. */
	--wpam-blue-800: #233bb4;
	--wpam-blue-700: #2945cc;
	--wpam-blue-600: #3858e9;
	--wpam-blue-100: #e9eeff;

	/* Text and dark surfaces. */
	--wpam-ink-950: #09111f;
	--wpam-ink-900: #101a2c;
	--wpam-ink-800: #243044;
	--wpam-ink-700: #37455a;
	--wpam-ink-600: #526071;
	--wpam-ink-500: #677282;

	/* Neutral surfaces. */
	--wpam-line: #d8dee8;
	--wpam-line-soft: #e9edf3;
	--wpam-surface: #ffffff;
	--wpam-surface-alt: #f5f7fa;
	--wpam-header: #fbfcff;

	/* Feedback. */
	--wpam-green-700: #157a36;
	--wpam-green-100: #eaf7ee;
	--wpam-amber-800: #8a4b08;
	--wpam-amber-100: #fff4d6;
	--wpam-red-700: #b42318;
	--wpam-red-100: #fdecea;

	/* Geometry. */
	--wpam-radius-sm: 10px;
	--wpam-radius: 16px;
	--wpam-radius-lg: 22px;
	--wpam-container: 1200px;
	--wpam-gutter: 24px;

	/* Elevation. */
	--wpam-shadow-sm: 0 1px 2px rgba(9, 17, 31, .04), 0 6px 18px rgba(9, 17, 31, .04);
	--wpam-shadow-md: 0 18px 46px rgba(21, 36, 72, .12);
	--wpam-shadow-lg: 0 30px 80px rgba(21, 36, 72, .16), 0 8px 28px rgba(21, 36, 72, .08);

	/* Kadence palette bridge. */
	--global-palette1: var(--wpam-blue-600);
	--global-palette2: var(--wpam-blue-700);
	--global-palette3: var(--wpam-ink-950);
	--global-palette4: var(--wpam-ink-700);
	--global-palette5: var(--wpam-ink-600);
	--global-palette6: var(--wpam-ink-500);
	--global-palette7: var(--wpam-blue-100);
	--global-palette8: var(--wpam-surface-alt);
	--global-palette9: var(--wpam-surface);
	--global-palette-highlight: var(--wpam-blue-600);
	--global-palette-highlight-alt: var(--wpam-blue-700);
	--global-palette-highlight-alt2: var(--wpam-blue-800);
	--global-palette-btn-bg: var(--wpam-blue-600);
	--global-palette-btn-bg-hover: var(--wpam-blue-700);
	--global-palette-btn: #ffffff;
	--global-palette-btn-hover: #ffffff;
	--global-content-width: var(--wpam-container);
	--global-content-edge-padding: var(--wpam-gutter);
}

html {
	scroll-behavior: smooth;
}

body.wpam-site {
	color: var(--wpam-ink-600);
	background: var(--wpam-surface);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.wpam-site ::selection {
	color: var(--wpam-ink-950);
	background: #cfd8ff;
}

body.wpam-site :where(.entry-content, .entry-header) h1,
body.wpam-site :where(.entry-title, .page-title) {
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(2.5rem, 4.6vw, 3.5rem);
	font-weight: 700;
	letter-spacing: -.045em;
	line-height: 1.08;
}

body.wpam-site :where(.entry-content) h2 {
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(2.125rem, 3.7vw, 2.875rem);
	font-weight: 700;
	letter-spacing: -.04em;
	line-height: 1.12;
}

body.wpam-site :where(.entry-content) h3 {
	color: var(--wpam-ink-900);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(1.5rem, 2.5vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.2;
}

body.wpam-site :where(.entry-content) h4 {
	color: var(--wpam-ink-900);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: clamp(1.25rem, 2vw, 1.4375rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.3;
}

body.wpam-site :where(.entry-content) h5,
body.wpam-site :where(.entry-content) h6 {
	color: var(--wpam-ink-900);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 700;
}

body.wpam-site :where(.entry-content) h5 {
	font-size: 1.125rem;
	line-height: 1.4;
}

body.wpam-site :where(.entry-content) h6 {
	font-size: .875rem;
	letter-spacing: .06em;
	line-height: 1.4;
	text-transform: uppercase;
}

body.wpam-site :where(p, li) {
	text-wrap: pretty;
}

/*
 * Content links, not buttons.
 *
 * The exclusion list is every class this site uses to mean "this anchor is a
 * button". `.wpam-button` and `.plan-cta` were missing from it, and because
 * `:where()` contributes no specificity this rule is only (0,2,1) -- enough to
 * beat a page-scoped `.wpam-pricing-page .plan-cta`, which is how the buy
 * buttons on the pricing page came out with blue link text on a blue fill at
 * 1.33:1.
 */
body.wpam-site .entry-content :where(a:not(.wp-element-button):not(.button):not(.wp-block-button__link):not(.wpam-btn):not(.wpam-button):not(.plan-cta)) {
	color: var(--wpam-blue-700);
	text-decoration-color: rgba(41, 69, 204, .45);
	text-decoration-thickness: .08em;
	text-underline-offset: .16em;
}

body.wpam-site .entry-content :where(a:not(.wp-element-button):not(.button):not(.wp-block-button__link):not(.wpam-btn):not(.wpam-button):not(.plan-cta)):hover {
	color: var(--wpam-blue-800);
	text-decoration-color: currentColor;
}

body.wpam-site :where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid rgba(56, 88, 233, .32);
	outline-offset: 3px;
}

/* Buttons. */
body.wpam-site :where(.wpam-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"]),
body.wpam-site #masthead .header-button {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 0 22px;
	border: 1px solid var(--wpam-blue-600);
	border-radius: var(--wpam-radius-sm);
	color: #ffffff;
	background: var(--wpam-blue-600);
	box-shadow: 0 10px 24px rgba(56, 88, 233, .2);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1;
	text-decoration: none;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

body.wpam-site :where(.wpam-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"]):hover,
body.wpam-site #masthead .header-button:hover {
	border-color: var(--wpam-blue-700);
	color: #ffffff;
	background: var(--wpam-blue-700);
	box-shadow: 0 14px 26px rgba(56, 88, 233, .24);
	transform: translateY(-1px);
}

body.wpam-site .wpam-button--secondary,
body.wpam-site .is-style-outline > .wp-block-button__link {
	border-color: var(--wpam-line);
	color: var(--wpam-ink-900);
	background: #ffffff;
	box-shadow: none;
}

body.wpam-site .wpam-button--secondary:hover,
body.wpam-site .is-style-outline > .wp-block-button__link:hover {
	border-color: #b8c4e6;
	color: var(--wpam-blue-700);
	background: #ffffff;
	box-shadow: var(--wpam-shadow-sm);
}

/* Forms. */
body.wpam-site :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select) {
	min-height: 48px;
}

body.wpam-site :where(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--wpam-line);
	border-radius: var(--wpam-radius-sm);
	color: var(--wpam-ink-900);
	background: #ffffff;
	box-shadow: none;
	font: inherit;
	transition: border-color .18s ease, box-shadow .18s ease;
}

body.wpam-site textarea {
	min-height: 140px;
	resize: vertical;
}

body.wpam-site :where(input, select, textarea)::placeholder {
	color: var(--wpam-ink-500);
	opacity: 1;
}

body.wpam-site :where(input, select, textarea):hover {
	border-color: #b8c4e6;
}

body.wpam-site :where(input, select, textarea):focus {
	border-color: var(--wpam-blue-600);
	box-shadow: 0 0 0 3px rgba(56, 88, 233, .14);
	outline: 0;
}

body.wpam-site :where(label, legend) {
	color: var(--wpam-ink-700);
	font-size: 13px;
	font-weight: 700;
}

/* Kadence header. Structure remains controlled in the Header Builder. */
body.wpam-site #masthead {
	border-bottom: 1px solid var(--wpam-line);
	background: var(--wpam-header);
}

body.wpam-site #masthead .site-main-header-wrap .site-header-row-container-inner {
	min-height: 88px;
	background: var(--wpam-header);
}

body.wpam-site #masthead .site-title {
	color: var(--wpam-ink-950);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.025em;
}

body.wpam-site #masthead .custom-logo {
	width: auto;
	max-height: 40px;
}

body.wpam-site #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a {
	color: var(--wpam-ink-700);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
}

body.wpam-site #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
body.wpam-site #masthead .main-navigation .primary-menu-container > ul > li.current-menu-item > a,
body.wpam-site #masthead .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a {
	color: var(--wpam-blue-700);
}

body.wpam-site #masthead .header-button {
	min-height: 42px;
	padding-inline: 17px;
	font-size: 14px;
}

/*
 * The account link in the header's HTML slot, because Kadence has no account
 * element and the primary menu is six marketing pages aimed at people who have
 * not bought anything yet.
 *
 * It used to share this slot with a Docs link and carried `margin-left: 20px`
 * to separate the two. Docs moved into the primary menu, the sibling went, and
 * the margin stayed -- so the link sat 20px right of its own container and read
 * as a hole in the header. Kadence already spaces its header elements; this
 * does not need to add more.
 */
body.wpam-site .wpam-header-account {
	display: inline-flex;
	align-items: center;
	color: var(--wpam-ink-700);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

body.wpam-site .wpam-header-account:hover {
	color: var(--wpam-blue-700);
}

/*
 * The header cart, only while it holds something.
 *
 * Every buy button goes straight to checkout, so the cart is empty for almost
 * everyone and a permanent icon would be a control that never does anything.
 * Kadence prints `header-cart-is-empty-true` inside it when it is empty, which
 * is what this matches on -- so the icon appears exactly when it has a job.
 */
body.wpam-site .site-header-item:has(.header-cart-is-empty-true),
body.wpam-site .site-header-item:has(.header-cart-is-empty-true) + .site-header-item-divider {
	display: none;
}

/*
 * The help desk's floating support tab.
 *
 * It ships pinned top-left over the logo, on a 50%-black panel, hanging 78px
 * off the edge of the screen so it can slide in on hover. That is three
 * problems: it covered the brand, white on `rgba(18,17,17,.5)` measures 3.54:1
 * against this site's pages -- under the 4.5:1 everything else here holds to --
 * and the part hanging off the edge is a control a reader cannot see or aim at.
 *
 * Moved to the bottom right in the plugin's own settings, then given a solid
 * ground here so the contrast is a fact rather than a function of whatever
 * happens to be behind it, and pulled back flush so all of it is on screen.
 *
 * The selector carries an id because the plugin's own rule does, and this has
 * to win without `!important`.
 */
body.wpam-site div#js-ticket_screentag {
	/*
	 * The one `!important` in this stylesheet, and it is unavoidable.
	 *
	 * The plugin's own jQuery sets this as an inline style on load --
	 *
	 *   jQuery("div#js-ticket_screentag").css("right", "-"+(textWidth+25)+"px")
	 *
	 * -- to park the label off the edge of the screen so it can slide in on
	 * hover. No stylesheet rule can beat an inline style, whatever its
	 * specificity.
	 *
	 * Pinned flush instead, because the slide-out costs more than it gives: on
	 * a touch screen there is no hover, so the word "Support" is never visible
	 * and the tab is a mystery icon half off the edge. On this site it is the
	 * only persistent route to the help desk, so it should read as one.
	 */
	right: 0 !important;
	bottom: 28px;
	/*
	 * Position and size are stated here rather than inherited from the plugin.
	 *
	 * The help desk's stylesheets are dequeued everywhere except its own pages,
	 * because a ticket system's CSS has no business on a pricing page. This tab
	 * is the one piece of it that appears site-wide, and `position: fixed` came
	 * from the plugin's inline colour CSS -- so without these three lines it
	 * became a static, full-width bar dumped at the bottom of the document.
	 */
	position: fixed;
	z-index: 99;
	width: auto;
	padding: 10px 16px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-right: 0;
	border-radius: var(--wpam-radius-sm) 0 0 var(--wpam-radius-sm);
	background: var(--wpam-ink-950);
	box-shadow: var(--wpam-shadow-md);
	transition: background-color .18s ease;
}

body.wpam-site div#js-ticket_screentag:hover {
	background: var(--wpam-ink-900);
}

body.wpam-site div#js-ticket_screentag a.js-ticket_screentag_anchor {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #ffffff;
}

/* The icon was sized by the plugin's stylesheet, which no longer loads here. */
body.wpam-site div#js-ticket_screentag img.js-ticket_screentag_image {
	width: 22px;
	height: 22px;
	margin: 0;
	display: block;
}

body.wpam-site div#js-ticket_screentag span.text {
	color: #ffffff;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
}

body.wpam-site div#js-ticket_screentag img.js-ticket_screentag_image {
	width: 22px;
	height: 22px;
	margin: 0;
}

@media (max-width: 767px) {
	body.wpam-site div#js-ticket_screentag {
		bottom: 16px;
		padding: 9px 13px;
	}

	body.wpam-site div#js-ticket_screentag span.text {
		font-size: 13px;
	}
}

body.wpam-site .header-cart-wrap .kadence-cart-total {
	background: var(--wpam-blue-600);
	color: #ffffff;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 700;
}

body.wpam-site .item-is-fixed #masthead,
body.wpam-site #masthead.item-is-fixed {
	border-bottom-color: var(--wpam-line-soft);
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 8px 24px rgba(9, 17, 31, .08);
	backdrop-filter: blur(14px);
}

body.wpam-site .item-is-fixed #masthead .site-main-header-wrap .site-header-row-container-inner,
body.wpam-site #masthead.item-is-fixed .site-main-header-wrap .site-header-row-container-inner {
	min-height: 72px;
	background: transparent;
}

/* Kadence footer. Structure remains controlled in the Footer Builder. */
body.wpam-site #colophon,
body.wpam-site #colophon .site-footer-row-container-inner {
	color: #c3ccda;
	background: var(--wpam-ink-950);
}

body.wpam-site #colophon {
	border-top: 0;
}

body.wpam-site #colophon :where(h2, h3, h4, h5, h6, .widget-title) {
	color: #ffffff;
}

body.wpam-site #colophon .widget-title {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

body.wpam-site #colophon :where(a, .footer-navigation .menu-item a) {
	color: #97a5b9;
	font-size: 13px;
	text-decoration: none;
}

body.wpam-site #colophon :where(a, .footer-navigation .menu-item a):hover {
	color: #ffffff;
}

body.wpam-site .wpam-footer-brand img {
	width: 205px;
	height: auto;
}

body.wpam-site .wpam-footer-brand p {
	margin: 21px 0 3px;
	color: #dce3ed;
	font-size: 14px;
}

body.wpam-site .wpam-footer-brand span {
	color: #7f8da3;
	font-size: 12px;
}

/* Reusable primitives for future pages. */
.wpam-container {
	width: min(var(--wpam-container), calc(100% - (2 * var(--wpam-gutter))));
	margin-inline: auto;
}

.wpam-section {
	padding-block: 112px;
}

.wpam-section--compact {
	padding-block: 88px;
}

.wpam-section--alt {
	background: var(--wpam-surface-alt);
}

.wpam-section--dark {
	color: #d8dfec;
	background: var(--wpam-ink-950);
}

.wpam-card {
	border: 1px solid var(--wpam-line);
	border-radius: var(--wpam-radius-lg);
	background: #ffffff;
	box-shadow: var(--wpam-shadow-sm);
}

.wpam-eyebrow {
	margin: 0 0 18px;
	color: var(--wpam-blue-700);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
}

.wpam-screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
}

@media (max-width: 1024px) {
	:root {
		--wpam-gutter: 20px;
	}

	.wpam-section {
		padding-block: 88px;
	}

	.wpam-section--compact {
		padding-block: 72px;
	}

	body.wpam-site #masthead .site-main-header-wrap .site-header-row-container-inner {
		min-height: 72px;
	}

	body.wpam-site #masthead .custom-logo {
		max-width: 185px;
		max-height: 36px;
	}
}

@media (max-width: 767px) {
	:root {
		--wpam-gutter: 16px;
	}

	.wpam-section {
		padding-block: 72px;
	}

	.wpam-section--compact {
		padding-block: 64px;
	}

	body.wpam-site #masthead .custom-logo {
		max-width: 180px;
		max-height: 34px;
	}

}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media (forced-colors: active) {
	body.wpam-site :where(.wpam-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"]),
	body.wpam-site #masthead .header-button,
	.wpam-card {
		border: 1px solid currentColor;
	}
}

/* ---------------------------------------------------------------------------
 * Pointer target sizes.
 *
 * WCAG 2.2 asks for a 24x24 CSS pixel minimum. Several standalone links --
 * card CTAs, breadcrumbs -- render 19-22px tall. Raising only the minimum
 * height grows the hit area without moving the text or touching anything
 * already large enough.
 *
 * This used to be scoped to `max-width: 1024px`, on the reasoning that a thumb
 * needs the bigger target and a mouse does not. That left the same link 24px on
 * a tablet and 19px on a desktop, which is a distinction the reader never asked
 * for: SC 2.5.8 covers every pointer, and accurate pointing is hardest for the
 * people least able to spare the precision, whatever they are holding. The
 * desktop targets did technically pass, but only via the spacing exception --
 * they are isolated enough that no two 24px circles overlap -- and passing on a
 * technicality is not the same as being comfortable to hit.
 *
 * `min-height` is inert on a non-replaced inline box, so prose links inside
 * paragraphs are unaffected; only the inline-flex, flex and block links grow.
 * Measured across the site that is 7 links on the homepage (9px of total page
 * growth), 3 card CTAs on Security and the breadcrumb trail on the generated
 * pages (3px each).
 * ------------------------------------------------------------------------ */

body.wpam-site :where(article a, .text-link, .inline-link, .console-start a) {
	min-height: 24px;
}

/* ---------------------------------------------------------------------------
 * Header and footer alignment.
 *
 * Kadence nests two containers that each apply the edge padding, so the header
 * and footer content column came out at 1104px while every page's content
 * column is 1200px. The logo therefore sat 48px inside the first line of page
 * content on desktop, and 16px inside it on phones.
 *
 * Dropping the padding from the outer wrap and widening both containers by the
 * one remaining gutter puts the innermost content box on 1200px, matching
 * `--wpam-container`. The inner container keeps its padding, so narrow screens
 * keep a gutter — and it is now the same gutter the page content uses, which
 * is what aligns the two at every width.
 * ------------------------------------------------------------------------ */

body.wpam-site #masthead .site-main-header-wrap,
body.wpam-site #colophon .site-footer-row-container {
	max-width: calc(var(--wpam-container) + (2 * var(--wpam-gutter)));
	padding-left: 0;
	padding-right: 0;
}

body.wpam-site #masthead .site-container,
body.wpam-site #colophon .site-container {
	max-width: calc(var(--wpam-container) + (2 * var(--wpam-gutter)));
}

/* ---------------------------------------------------------------------------
 * Footer bottom navigation contrast.
 *
 * Kadence styles the footer's bottom navigation with
 *
 *     #colophon .footer-navigation .footer-menu-container > ul > li > a
 *
 * at specificity (1,2,3), and colours it with --global-palette5. The palette
 * bridge above maps palette5 to --wpam-ink-600, which is a text colour for
 * light backgrounds. On the near-black footer that lands at 2.94:1, under the
 * 4.5:1 minimum — so the legal links read as barely-there grey while the widget
 * links above them are correct.
 *
 * The general footer link rule cannot win this: it is (1,1,1). Matching
 * Kadence's own selector is what makes the intended colour apply.
 * ------------------------------------------------------------------------ */

body.wpam-site #colophon .footer-navigation .footer-menu-container > ul > li > a {
	color: #97a5b9;
}

body.wpam-site #colophon .footer-navigation .footer-menu-container > ul li a:hover,
body.wpam-site #colophon .footer-navigation .footer-menu-container > ul li a:focus {
	color: #ffffff;
}