/**
 * Legacy utility classes for the ported on1.orig templates
 *
 * The old theme loaded /_assets/css/base.css on every page, and these classes
 * lived in it. The new base.css doesn't have them, so the ported markup lost
 * its link styling and background colors.
 *
 * The 2rem spacing utilities are back. The port dropped them for Bootstrap's
 * mb-4 / mt-4 / p-4 (1.5rem), but the templates were never all converted -
 * mb-2r alone is still on 982 elements, and those had no rule at all.
 *
 * Only the classes the ported templates actually use are here, and only the
 * ones Bootstrap doesn't already provide. Anything Bootstrap covers
 * (container-*, fs-*, fw-*, text-dark, text-light, bg-dark, stretched-link)
 * is left to Bootstrap.
 *
 * These go when the pages using them are rebuilt on real base.css tokens and
 * Bootstrap spacing. Nothing new should use this file.
 *
 * @copyright   2026, ON1
 */

/*------------------------------------------------------------------------------
 * Text links
 -----------------------------------------------------------------------------*/
.text-link {
	border-bottom: 1px solid var(--text-link);
	color: var(--text-link);
}

.text-link-blue {
	border-bottom: 1px solid var(--blue);
	color: var(--blue);
}

.text-link-white {
	border-bottom: 1px solid var(--white);
	color: var(--white);
}

/*------------------------------------------------------------------------------
 * Nav links carry the underline on hover and when active, not at rest
 -----------------------------------------------------------------------------*/
#product-navigation .nav-item .nav-link .text-link,
#product-navigation .nav-item .nav-link .text-link-white,
#gallery-navigation .nav-item .nav-link .text-link,
#gallery-navigation .nav-item .nav-link .text-link-white,
#webinars-navigation .nav-item .nav-link .text-link,
#webinars-navigation .nav-item .nav-link .text-link-white {
	border: none;
}

#product-navigation .nav-item .nav-link:hover .text-link,
#product-navigation .nav-item .nav-link.active .text-link,
#gallery-navigation .nav-item .nav-link:hover .text-link,
#gallery-navigation .nav-item .nav-link.active .text-link,
#webinars-navigation .nav-item .nav-link:hover .text-link,
#webinars-navigation .nav-item .nav-link.active .text-link {
	border-bottom: 1px solid var(--text-link);
}

#product-navigation .nav-item .nav-link:hover .text-link-white,
#product-navigation .nav-item .nav-link.active .text-link-white,
#gallery-navigation .nav-item .nav-link:hover .text-link-white,
#gallery-navigation .nav-item .nav-link.active .text-link-white,
#webinars-navigation .nav-item .nav-link:hover .text-link-white,
#webinars-navigation .nav-item .nav-link.active .text-link-white {
	border-bottom: 1px solid var(--white);
}

#gallery-navigation .nav-item .nav-link:hover .bg-blue.text-link-white,
#webinars-navigation .nav-item .nav-link:hover .bg-blue.text-link-white {
	border-bottom: none;
}

/*------------------------------------------------------------------------------
 * Backgrounds & text colors
 -----------------------------------------------------------------------------*/
.bg-dark-2 {
	background-color: var(--dark-2) !important;
}

.bg-keyword-orange {
	background-color: var(--keyword-orange) !important;
}

.bg-pale-blue {
	background: var(--pale-blue) !important;
}

/*
 * The old --orange was #ff4f37. The new base.css --orange is #fe842a, so the
 * literal is used here rather than the token - the class is a red-orange and
 * pointing it at the current token would repaint it.
 */
.bg-red-orange {
	background-color: #ff4f37 !important;
}

/*
 * The raised surface behind every buy box, and behind the guarantee, login
 * and cookie-notice panels - 899 uses across the ported templates. The old
 * base.css defined it and the new one doesn't, so it was painting nothing and
 * the boxes had disappeared into the page.
 *
 * The old value was #1d232a, a navy-tinted grey that read against the old
 * #040f1d page. The page is #1e1e1e now, which that value is indistinguishable
 * from, so it points at the token instead. No border - the surface step is
 * what defines the box.
 */
.box-bg {
	background-color: var(--bg-800) !important;
}

/*
 * The price the customer actually pays. It's in a <p>, so it inherited body
 * text (--text-300) and sat at the same weight as the struck-through list
 * price beside it. --text-50 is what the headings in the same box use.
 *
 * Every <del> in the buy boxes wraps data-fsc-item-price and nothing else, so
 * targeting the total leaves the struck price muted, which is the point.
 */
.box-bg [data-fsc-item-total] {
	color: var(--text-50);
}

.text-plus-orange {
	color: var(--plus-orange) !important;
}

.text-silver {
	color: var(--silver) !important;
}

/*------------------------------------------------------------------------------
 * Form labels
 -----------------------------------------------------------------------------*/
.form-check-label {
	font-size: 1rem;
	font-weight: 500;
}

.discount-modal .form-check-label {
	line-height: 1.5;
}

/*------------------------------------------------------------------------------
 * FAQ accordions
 *
 * The dividers are what separate one question from the next - without them the
 * list renders as one unbroken wall of text.
 -----------------------------------------------------------------------------*/
#faqs .faq-group {
	border-bottom: 2px solid var(--dark-1);
	padding: 1.5rem;
}

#faqs .faq-group:first-of-type {
	border-top: 2px solid var(--dark-1);
}

#faqs table.table-dark th,
#faqs table.table-dark td {
	padding: 1rem;
}

#faqs .question .question-title {
	color: var(--headline-color);
	cursor: pointer;
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 0;
	padding-right: 3rem;
}

#faqs .question i.fa-angle-down,
#faqs .question i.fa-angle-up {
	cursor: pointer;
	display: inline-block;
	float: right;
	font-size: 1.5rem;
	margin-left: 2rem;
	padding-top: 0;
}

#faqs .answer {
	display: none;
	margin-top: 1.5rem;
	padding-right: 3rem;
}

#faqs .answer li {
	line-height: 1.5;
	margin-bottom: 1rem;
}

#faqs .answer li:last-child {
	margin-bottom: 0;
}

#faqs .answer ul:last-child,
#faqs .answer ol:last-child {
	margin-bottom: 0;
}

/*------------------------------------------------------------------------------
 * FAQ accordion - rebuilt component
 *
 * The .faq-* markup, ported whole. Nothing in the new base sheet styles it, so
 * the questions fell back to UA button chrome and every answer sat open -
 * .faq-a-wrap is what collapses them.
 -----------------------------------------------------------------------------*/
.faq-section {
	background: var(--bg-850);
	padding: 5.625rem 0;
}

.faq-item {
	border-bottom: 1px solid var(--border-subtle);
	padding: 1.75rem 0;
}

.faq-item:first-of-type {
	border-top: 1px solid var(--border-subtle);
}

.faq-q-wrap {
	margin: 0;
}

.faq-q {
	align-items: flex-start;
	background: none;
	border: 0;
	color: var(--text);
	display: flex;
	font-family: inherit;
	font-size: var(--text-base);
	font-weight: 600;
	gap: 0.75rem;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	text-align: left;
	width: 100%;
}

button.faq-q {
	cursor: pointer;
}

.faq-q::before {
	background: rgba(33, 206, 110, 0.12);
	border-radius: 0.25rem;
	color: var(--green);
	content: 'Q';
	flex-shrink: 0;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin-top: 0.125rem;
	padding: 0.25em 0.5em;
}

button.faq-q::after {
	border-bottom: 2px solid var(--text-muted);
	border-right: 2px solid var(--text-muted);
	content: '';
	flex-shrink: 0;
	height: 0.5rem;
	margin-left: auto;
	margin-top: 0.375rem;
	transform: rotate(45deg);
	transition: transform 0.25s ease;
	width: 0.5rem;
}

.faq-item.is-open>.faq-q-wrap>.faq-q::after {
	transform: rotate(-135deg);
}

.faq-a-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.faq-item.is-open>.faq-a-wrap {
	grid-template-rows: 1fr;
}

.faq-a-inner {
	overflow: hidden;
}

.faq-a {
	color: var(--text-muted);
	font-size: var(--text-base);
	line-height: 1.7;
	padding-left: 2.25rem;
	padding-top: 0.875rem;
}

.faq-a>* {
	margin-block: 0;
}

.faq-a>*+* {
	margin-top: 0.75rem;
}

.faq-a ul,
.faq-a ol {
	padding-left: 1.25rem;
}

.faq-a li+li {
	margin-top: 0.375rem;
}

.faq-a table {
	border-collapse: collapse;
	width: 100%;
}

.faq-a th,
.faq-a td {
	border-bottom: 1px solid var(--border-subtle);
	padding: 0.5rem 0.75rem;
	text-align: left;
}

.faq-a th {
	color: var(--text);
	font-weight: 600;
}

.faq-sub {
	margin-top: 1.25rem;
	padding-left: 2.25rem;
}

.faq-sub .faq-q::before {
	content: none;
}

.faq-sub .faq-a {
	padding-left: 0;
}

.faq-subitem {
	padding: 1.25rem 0;
}

.faq-subitem:first-child {
	padding-top: 0;
}

/*------------------------------------------------------------------------------
 * ON1 Guarantee
 *
 * The old guarantee markup. The new base sheet styles the rebuilt partial
 * (#on1-guarantee .guarantee-intro) and nothing else, so these pages had no
 * rules for the section they actually render.
 *
 * Every rule is scoped under .guarantee-wrapper, which only the old markup
 * has. partials/guarantee.php reuses #on1-guarantee and .guarantee-boxes and
 * pins itself light, so an #on1-guarantee-only scope puts this section's dark
 * colors - white h4s, muted body copy - onto a near-white panel.
 -----------------------------------------------------------------------------*/
#on1-guarantee .guarantee-wrapper {
	background: url(https://ononesoft.cachefly.net/images/guarantee-bg@2x.jpg) center center no-repeat;
	background-size: cover;
	border: 2px solid var(--green);
	padding: 5rem 1.5rem;
	width: 100%;
}

@media (max-width: 575.98px) {
	#on1-guarantee .guarantee-wrapper {
		background: url(https://ononesoft.cachefly.net/images/guarantee-bg.jpg) center center no-repeat;
		background-size: cover;
	}
}

#on1-guarantee .guarantee-wrapper .box-bg {
	background: rgba(27, 34, 43, 0.7);
	border: 1px solid var(--slate-900);
	padding: 1.5rem 1rem;
}

#on1-guarantee .guarantee-wrapper .guarantee-head {
	margin-bottom: 2.25rem;
}

#on1-guarantee .guarantee-wrapper .guarantee-head p {
	color: var(--text-muted);
	font-size: var(--text-base);
}

#on1-guarantee .guarantee-wrapper h2 {
	margin-bottom: 0.75rem;
}

#on1-guarantee .guarantee-wrapper h3 {
	align-items: center;
	color: var(--green);
	display: flex;
	font-size: var(--text-base);
	font-weight: 700;
	gap: 1rem;
	justify-content: center;
	letter-spacing: 0.05em;
	margin-bottom: 1rem;
	text-transform: uppercase;
}

#on1-guarantee .guarantee-wrapper h3::before,
#on1-guarantee .guarantee-wrapper h3::after {
	background: currentColor;
	content: "";
	flex: 1;
	height: 2px;
	max-width: 80px;
}

#on1-guarantee .guarantee-wrapper .guarantee-boxes i {
	color: var(--green);
	font-size: 2.25rem;
	margin-bottom: 1.25rem;
}

#on1-guarantee .guarantee-wrapper .guarantee-boxes h4 {
	color: var(--white);
	font-size: var(--text-xs);
}

#on1-guarantee .guarantee-wrapper .guarantee-boxes p {
	color: var(--text-muted);
	line-height: 1.1;
}

#on1-guarantee .guarantee-wrapper .guarantee-boxes small {
	font-size: var(--text-mini);
}

#on1-guarantee .guarantee-wrapper .stretched-link {
	text-decoration: none;
}

/*------------------------------------------------------------------------------
 * Reviews
 *
 * The new base sheet scopes the same rules to #reviews, which these pages'
 * markup doesn't use.
 -----------------------------------------------------------------------------*/
.reviews-section {
	background: var(--bg-850);
	padding: 5.625rem 0;
}

.review-card {
	background: var(--bg);
	border: 1px solid var(--border-subtle);
	border-radius: 0.5rem;
	padding: 1.75rem 1.625rem;
}

.review-stars {
	display: flex;
	gap: 0.1875rem;
	margin-bottom: 0.875rem;
}

.star {
	background: var(--gold);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
	display: block;
	height: 0.875rem;
	width: 0.875rem;
}

.review-text {
	border-left: 0;
	color: var(--text-muted);
	font-size: var(--text-sm);
	font-style: normal;
	line-height: 1.7;
	margin: 0 0 1.125rem;
	padding: 0;
}

.review-author {
	color: var(--text-subtle);
	font-size: var(--text-sm);
	font-style: normal;
	font-weight: 600;
}

/*------------------------------------------------------------------------------
 * Section blocks
 -----------------------------------------------------------------------------*/
.section-copy {
	background: var(--bg);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4.375rem;
}

@media (max-width: 575.98px) {
	.section-copy {
		padding-left: 0;
		padding-right: 0;
	}
}

.section-h2 {
	color: var(--text);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 1rem;
}

/*------------------------------------------------------------------------------
 * Colors and gradients
 *
 * Utility classes the old base sheet carried. Bootstrap supplies nothing for
 * these names, so the markup that uses them had no rules at all.
 -----------------------------------------------------------------------------*/
.bg-default {
	background-color: var(--bg-color) !important;
}

.bg-pale-green {
	background-color: var(--pale-green) !important;
}

.bg-pale-pink {
	background-color: var(--pale-pink) !important;
}

.bg-pale-purple {
	background-color: var(--pale-purple) !important;
}

.text-headline {
	color: var(--headline-color) !important;
}

.text-link-green {
	border-bottom: 1px solid var(--green);
	color: var(--green);
}

.text-blue-green-gradient {
	background: linear-gradient(to right, var(--light-blue) 40%, var(--bright-green) 70%);
	color: var(--light-blue);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*------------------------------------------------------------------------------
 * Bursts
 *
 * Gradient-bordered pills. The border is a padding-box/border-box gradient
 * pair, so the inner fill has to be the page background.
 -----------------------------------------------------------------------------*/
.burst.blue,
.burst.blue-green,
.burst.blue-pink,
.burst.orange,
.burst.orange-yellow,
.burst.purple,
.burst.red-pink,
.burst.yellow-orange {
	border: 2px solid transparent;
	border-radius: 50em;
	padding: 0.313rem 1rem;
}

.burst.blue {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--light-blue) 0%, var(--blue) 89%) border-box;
}

.burst.blue span {
	background: linear-gradient(to right, var(--light-blue) 25%, var(--blue) 75%);
	color: var(--light-blue);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.blue-green {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--light-blue) 0%, var(--bright-green) 89%) border-box;
}

.burst.blue-green span {
	background: linear-gradient(to right, var(--light-blue) 0%, var(--bright-green) 89%);
	color: var(--pink);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.blue-pink {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--light-blue) 0%, var(--pink) 100%) border-box;
}

.burst.blue-pink span {
	background: linear-gradient(to right, var(--light-blue) 0%, var(--pink) 89%);
	color: var(--pink);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.orange {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--orange) 0%, var(--orange) 89%) border-box;
}

.burst.orange span {
	background: linear-gradient(to right, var(--orange) 25%, var(--orange) 75%);
	color: var(--orange);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.orange-yellow {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--orange) 0%, var(--yellow) 89%) border-box;
}

.burst.orange-yellow span {
	background: linear-gradient(to right, var(--orange) 25%, var(--yellow) 75%);
	color: var(--orange);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.purple {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--purple) 0%, var(--purple) 89%) border-box;
}

.burst.purple span {
	background: linear-gradient(to right, var(--purple) 25%, var(--purple) 75%);
	color: var(--purple);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.red-pink {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--red) 0%, var(--pink) 89%) border-box;
}

.burst.red-pink span {
	background: linear-gradient(to right, var(--red) 25%, var(--pink) 75%);
	color: var(--red);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.burst.yellow-orange {
	background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to right, var(--keyword-yellow) 0%, var(--keyword-orange) 89%) border-box;
}

.burst.yellow-orange span {
	background: linear-gradient(to right, var(--keyword-yellow) 25%, var(--keyword-orange) 75%);
	color: var(--keyword-yellow);
	font-weight: 900;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*------------------------------------------------------------------------------
 * Spacing and buttons
 -----------------------------------------------------------------------------*/
.mb-2r {
	margin-bottom: 2rem;
}

.mt-2r {
	margin-top: 2rem;
}

.p-2r {
	padding-bottom: 2rem;
	padding-left: 2rem;
	padding-right: 2rem;
	padding-top: 2rem;
}

.pt-2r {
	padding-top: 2rem;
}

.px-2r {
	padding-left: 2rem;
	padding-right: 2rem;
}

.py-2r {
	padding-bottom: 2rem;
	padding-top: 2rem;
}

.btn.btn-hover-blur:hover {
	text-shadow: 0 0 15px var(--white), 0 0 15px var(--white);
}

.btn.rounded-pill,
.btn.btn-wide.rounded-pill {
	padding: 0.625rem 2rem !important;
}

/*------------------------------------------------------------------------------
 * Countdowns
 -----------------------------------------------------------------------------*/
.countdown .row-cols-4 {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
}

@media (max-width: 575.98px) {
	.countdown .fs-1 {
		font-size: 2rem !important;
	}

	.countdown small {
		font-size: 0.6875rem;
		font-weight: 700;
		text-transform: uppercase;
	}
}

/*------------------------------------------------------------------------------
 * Typography
 *
 * The old base sheet's headings were 900 at #fff with 1.5rem below, and body
 * copy was --text. The new base gives 700 at --text-50 and --text-300, so
 * every heading on these pages came out lighter and the copy dimmer.
 *
 * Scoped to #site-main: the shared header and footer are styled by the new
 * base and must keep its weights. Color is set on the wrapper because the
 * copy inherits it rather than declaring its own.
 -----------------------------------------------------------------------------*/
#site-main {
	color: var(--text);
}

#site-main h1,
#site-main h2,
#site-main h3,
#site-main h4 {
	color: var(--headline-color);
	margin-bottom: 1.5rem;
}

#site-main h1,
#site-main h2 {
	font-weight: 900;
}

#site-main h1.fw-light,
#site-main h2.fw-light,
#site-main h3.fw-light,
#site-main h4.fw-light {
	color: var(--headline-color);
	font-weight: 400;
}

/*------------------------------------------------------------------------------
 * Visibility
 -----------------------------------------------------------------------------*/
.hide {
	display: none;
}

/* Foundation's small-only breakpoint, kept as the old sheet had it */
@media screen and (max-width: 39.9375em) {
	.hide-for-small-only {
		display: none !important;
	}
}

/*------------------------------------------------------------------------------
 * Bootstrap text color overrides the old global sheet carried
 *
 * The old /_assets/css/base.css redefined these two on top of Bootstrap, and
 * the ported markup is written against those values - Bootstrap's .text-light
 * is near-white, which is what made the webinar date lines invisible on their
 * white cards.
 *
 * Scoped to #site-main so they only reach ported page content. partials/
 * header.php uses .text-light too and sits outside <main>, so it keeps
 * Bootstrap's value and matches the rest of the site.
 -----------------------------------------------------------------------------*/
#site-main .text-dark {
	color: var(--dark) !important;
}

#site-main .text-light {
	color: var(--light) !important;
}

/*------------------------------------------------------------------------------
 * Below here: what the pages on the v2 chrome lost when they came off
 * /v2/assets/css/base.css
 *
 * Ported verbatim from that sheet, and only the rules whose markup survives
 * the header and footer swap - the old cookie notice, guarantee and site
 * footer rules went with the markup they styled.
 -----------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------
 * Hero
 -----------------------------------------------------------------------------*/
.hero-content {
	padding: 6.25rem 1rem;
}

/*------------------------------------------------------------------------------
 * Fact buckets
 -----------------------------------------------------------------------------*/
#fact-buckets .number {
	font-size: 6rem;
	font-weight: 900;
	line-height: 1;
}

#fact-buckets .col:first-child .number {
	color: var(--pink-200);
}

#fact-buckets .col:nth-child(2) .number {
	color: var(--blue-200);
}

#fact-buckets .col:last-child .number {
	color: var(--gold-200);
}

/*------------------------------------------------------------------------------
 * Trial download forms
 *
 * The select arrow is drawn in --text-color, which the dark pages need since
 * Bootstrap's own arrow is near-black.
 -----------------------------------------------------------------------------*/
.download .download-form .form-select {
	--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ededed' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
	background-position: right 0.75rem center;
	background-repeat: no-repeat;
	background-size: 16px 12px;
}

/*------------------------------------------------------------------------------
 * Discount modal
 -----------------------------------------------------------------------------*/
.discount-modal .form-field {
	background: var(--bg-800);
	border: 1px solid var(--dark);
	color: var(--text-color);
	margin-bottom: 1.5rem;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

.discount-modal .invalid-feedback.missing-terms {
	margin-left: -1.75rem;
	margin-top: 0;
}

/*------------------------------------------------------------------------------
 * Modal close button
 -----------------------------------------------------------------------------*/
.modal .close {
	background: none;
	border-radius: 0;
	box-sizing: initial;
	color: var(--white);
	font-size: 1.25rem;
	font-weight: 400;
	height: auto;
	opacity: 1;
	outline: none;
	padding: 0;
	position: absolute;
	right: 0;
	text-shadow: none;
	top: -1.875rem;
	width: auto;
}

/*------------------------------------------------------------------------------
 * Video players
 -----------------------------------------------------------------------------*/
.video-player {
	box-shadow: none;
	outline: none;
}

/*------------------------------------------------------------------------------
 * Visibility & wrapping
 *
 * .hide-for-small-only is further up this sheet. Foundation's breakpoints, as
 * the old sheet had them.
 -----------------------------------------------------------------------------*/
@media screen and (max-width: 0em),
screen and (min-width: 40em) {
	.show-for-small-only {
		display: none !important;
	}
}

@media (min-width: 576px) {
	.text-sm-nowrap {
		white-space: nowrap !important;
	}
}

@media (min-width: 768px) {
	.text-md-nowrap {
		white-space: nowrap !important;
	}
}

/*------------------------------------------------------------------------------
 * Text on the white and light cards
 *
 * The ported markup puts content on .bg-white panels and let the theme's own
 * body color show through - which worked while these pages rendered light.
 * They're pinned dark now, so body is var(--text-300) and headings are
 * var(--text-50): near-white text on a white card.
 *
 * Bootstrap's .bg-white only ever sets a background, and the old
 * /_assets/css/base.css didn't add a color either, so there was nothing to
 * carry over - this is new. It follows what press-releases.css already does
 * for its own cards: body copy at --dark, headings at --black.
 *
 * Headings need saying separately. base.css gives h1-h6 an explicit color, so
 * they don't inherit from the panel.
 *
 * Scoped to #site-main to stay off the shared header and footer.
 -----------------------------------------------------------------------------*/
#site-main .bg-white,
#site-main .bg-light {
	color: var(--dark);
}

#site-main .bg-white h1,
#site-main .bg-white h2,
#site-main .bg-white h3,
#site-main .bg-white h4,
#site-main .bg-white h5,
#site-main .bg-white h6,
#site-main .bg-light h1,
#site-main .bg-light h2,
#site-main .bg-light h3,
#site-main .bg-light h4,
#site-main .bg-light h5,
#site-main .bg-light h6 {
	color: var(--black);
}

/*
 * Links need saying too, and for the same reason. base.css sets a on the
 * theme's --link, which is --blue-200 in dark - #a9d0ff, which is what these
 * cards were showing on white. These take the light theme's link pair
 * directly rather than the token, since the token is pinned dark here.
 */
#site-main .bg-white a,
#site-main .bg-light a {
	color: var(--blue-600);
}

#site-main .bg-white a:hover,
#site-main .bg-light a:hover {
	color: var(--blue-700);
}

/*------------------------------------------------------------------------------
 * Classes from the old theme's style.css
 *
 * The old theme had a second stylesheet beside /_assets/css/base.css - its own
 * style.css - and these lived there. The soft backgrounds are the ones that
 * matter: the requirements panel on the gallery uploaders is
 * .alert.bg-blue-soft.text-blue, and without .bg-blue-soft it renders as a
 * bare white block with blue text.
 *
 * Values copied as they were, !important included - they are utilities layered
 * over Bootstrap and several of the places using them need to win.
 *
 * .buy .buy-box and its children are deliberately not carried over. That block
 * needs a .buy ancestor no ported template has, and the one .vat-note use
 * carries the same font-size and margin inline and is .hide anyway.
 -----------------------------------------------------------------------------*/
.bg-blue-soft {
	background-color: rgba(10, 126, 250, 0.25) !important;
}

.bg-green-soft {
	background-color: rgba(33, 206, 110, 0.25) !important;
}

/*
 * The other three the old style.css carried. The Photo RAW Project's status
 * pills use five of these between them - Under Review is .bg-red-soft,
 * Working On It is .bg-orange-soft, and anything outside the known five
 * falls through to .bg-purple-soft - so without them those pills render as
 * bare colored text with no background at all.
 */
.bg-orange-soft {
	background-color: rgba(253, 111, 22, 0.25) !important;
}

.bg-purple-soft {
	background-color: rgba(125, 30, 255, 0.25) !important;
}

.bg-red-soft {
	background-color: rgba(255, 61, 87, 0.25) !important;
}

.bg-dark-accent {
	background-color: #303030 !important;
}

.bg-darkest {
	background-color: #1e1e1e !important;
}

.text-darkest {
	color: #303030 !important;
}

.text-light-subtitle {
	color: #eaeaea !important;
}

.edit-post-link {
	display: inline-block;
	line-height: 1.6;
}

.fs125 {
	font-size: 1.25rem !important;
}

.fs15 {
	font-size: 1.5rem !important;
	font-weight: 400;
}

.lh-15 {
	line-height: 1.5 !important;
}

/*------------------------------------------------------------------------------
 * WPForms structural rules
 *
 * WPForms is set to "No styling", so it loads only
 * wpforms-no-styles.min.css - which does not hide the anti-spam honeypot or
 * the hidden fields. The theme has to, and the old one did it in its
 * style.css. Without these the honeypot renders as a real field: WPForms
 * labels it from a rotating set, which is where the stray "Phone" (and
 * "Message" before it) on the gallery uploader came from.
 *
 * Everything else about how these forms look is already in
 * legacy/galleries.css, scoped to .gallery-uploader.
 -----------------------------------------------------------------------------*/
.wpforms-container .wpforms-field-hp {
	display: none !important;
	left: -9000px !important;
	position: absolute !important;
}

.wpforms-container .wpforms-field-hidden {
	display: none;
}

.wpforms-container .wpforms-screen-reader-element {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/*------------------------------------------------------------------------------
 * strong and b take the color around them
 *
 * base.css gives strong and b an explicit var(--text-100), which is near
 * white in dark mode. The ported markup was written against a theme that
 * never colored them - they inherited - so any emphasis inside a tinted or
 * white panel comes out white: the "1920px" and "2 MB" in the gallery
 * uploader's requirements list.
 *
 * Same shape as the heading rule above: an explicit color doesn't inherit, so
 * it has to be said. Scoped to #site-main to stay off the shared chrome.
 -----------------------------------------------------------------------------*/
#site-main strong,
#site-main b {
	color: inherit;
}