/* Design foundations (design audit Phase 1). Contract and rationale: docs/reference/ui-components.md. */

/* 1. Type roles */
.course-article-content .byline-name,
.course-article-content .byline-meta,
.course-article-content .author-card-kicker,
.course-article-content .article-author-card .author-card-name,
.course-article-content .article-author-card p,
.course-article-content .key-concept-title,
.course-article-content .formula-label,
.course-article-content .pro-tip-title,
.course-article-content .example-box-title,
.course-article-content .warning-box-title,
.course-article-content .comparison-card :is(h4, .roc-account-comparison-title),
.course-article-content .faq-accordion .accordion-button,
.course-article-content .course-article-disclaimer h5,
body .course-article-content :is(.roc-chart, .roc-value-chain),
.course-article-content .roc-chart .roc-chart-heading,
.course-article-content .roc-chart .roc-chart-key,
body .course-article-content .roc-chart :is(.roc-chart-source, .roc-chart-subtitle),
body .course-article-content .roc-value-chain .roc-chain-note,
.course-article-content .roc-chart .roc-chart-details summary,
.course-article-content .roc-value-chain figcaption,
.course-article-content .roc-value-chain .roc-chain-result {
	font-family: var(--roc-font-body);
}

:is(.post-template-single-alpha-picks-review, .post-template-single-fiscal-ai-review, .post-fiscal-ai-review, .post-template-single-marketxls-review, .post-template-single-quant-growth-income-review, .post-quant-growth-income-review, .post-template-single-seeking-alpha-premium-review, .post-template-single-seeking-alpha-pro-review, .post-template-single-snowball-analytics-review, .post-template-single-stock-analysis-review, .post-template-single-zacks-trade-review, .post-template-single-frm-prep-course-comparison) :is(.review-title, .section-heading),
:is(.post-template-single-alpha-picks-review, .post-template-single-quant-growth-income-review, .post-quant-growth-income-review, .post-template-single-seeking-alpha-premium-review, .post-template-single-seeking-alpha-pro-review, .post-template-single-snowball-analytics-review, .post-template-single-zacks-trade-review) .main-content :is(h1, h2),
:is(.post-template-single-fiscal-ai-review, .post-fiscal-ai-review) .fiscal-ai-review-content .review-title,
.post-template-single-frm-prep-course-comparison .roc-frm-body :is(h1, h2) {
	font-family: var(--roc-font-display);
}

:is(.post-template-single-alpha-picks-review, .post-template-single-quant-growth-income-review, .post-quant-growth-income-review, .post-template-single-seeking-alpha-premium-review, .post-template-single-seeking-alpha-pro-review, .post-template-single-snowball-analytics-review, .post-template-single-zacks-trade-review) .main-content :is(h3, h4),
.post-template-single-zacks-trade-review :is(.quick-facts h3, .fact-item .label, .fact-item .value, .pros-list h3, .cons-list h3, .faq-question),
.post-template-single-frm-prep-course-comparison .roc-frm-body :is(h3, h4, .roc-frm-offer-label, .roc-frm-button) {
	font-family: var(--roc-font-body);
}

.partner-discount-content :is(.discount-title, .related-discounts-title),
.partner-discount-content .discount-main-content :is(h1, h2) {
	font-family: var(--roc-font-display);
}

.partner-discount-content .discount-main-content :is(h3, h4) {
	font-family: var(--roc-font-body);
}

body.roc-chrome :is(.roc-thinkific-content-v1, .roc-thinkific-explanation-v1) :is([class*="roc-tf-s-07d8015d83"], [class*="roc-tf-s-15431f40ba"], [class*="roc-tf-s-288215ed61"], [class*="roc-tf-s-304568adbb"], [class*="roc-tf-s-69e253348a"], [class*="roc-tf-s-6e5b4cfca2"], [class*="roc-tf-s-706a4630b5"], [class*="roc-tf-s-8a5c4371c0"], [class*="roc-tf-s-99f97d6aab"], [class*="roc-tf-s-a254effa91"], [class*="roc-tf-s-ca48f686ce"], [class*="roc-tf-s-f832288d49"]) {
	font-family: var(--roc-font-body) !important;
}

/* 2. Tables */
.course-article-content .main-content :is(th, td) {
	font-family: var(--roc-font-body);
	font-variant-numeric: var(--roc-numeric);
}

.roc-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.roc-table-scroll.roc-table-scroll--content {
	max-width: calc(100% + 16px);
	margin: 2rem -8px;
	padding: 2px 8px 12px;
}

.roc-table-scroll.roc-table-scroll--content > table {
	margin-block: 0;
}

/* 3. Phone headings */
@media (max-width: 767px) {
	:where(.course-article-content) .main-content h2,
	:where(.post-template-single-alpha-picks-review, .post-template-single-fiscal-ai-review, .post-fiscal-ai-review, .post-template-single-marketxls-review, .post-template-single-quant-growth-income-review, .post-quant-growth-income-review, .post-template-single-seeking-alpha-premium-review, .post-template-single-seeking-alpha-pro-review, .post-template-single-snowball-analytics-review, .post-template-single-stock-analysis-review, .post-template-single-zacks-trade-review, .post-template-single-frm-prep-course-comparison) :is(.main-content, .roc-frm-body) h2 {
		font-size: 1.5rem !important;
		line-height: 1.3 !important;
	}

	.course-article-content .article-author-card .author-card-name {
		font-size: 1.25rem !important;
		line-height: 1.3 !important;
	}

	.roc-arch-section .roc-arch-section__title {
		font-size: 24px !important;
		line-height: 1.25 !important;
	}

	.roc-nl--home .roc-nl__title {
		font-size: 1.5rem !important;
		line-height: 1.2 !important;
	}
}

/* 4. Form fields */
:is(.roc-nl .roc-nl__input, .fluentform :is(input, textarea).ff-el-form-control, .roc-arch-empty .roc-arch-empty__form input, .woocommerce form .form-row input.input-text, .woocommerce .coupon input.input-text) {
	border-color: var(--roc-input-border) !important;
}

:is(.roc-nl .roc-nl__input, .fluentform :is(input, textarea).ff-el-form-control, .roc-arch-empty .roc-arch-empty__form input, .woocommerce form .form-row input.input-text, .woocommerce .coupon input.input-text):hover {
	border-color: var(--roc-slate-600) !important;
}

:is(.roc-nl .roc-nl__input, .fluentform :is(input, textarea).ff-el-form-control, .roc-arch-empty .roc-arch-empty__form input, .woocommerce form .form-row input.input-text, .woocommerce .coupon input.input-text):focus {
	border-color: var(--roc-blue-600) !important;
}

:is(.roc-nl .roc-nl__input[aria-invalid="true"], .fluentform .ff-el-is-error :is(input, textarea).ff-el-form-control, .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row input.input-text[aria-invalid="true"]) {
	border-color: var(--roc-negative) !important;
}

:is(.roc-nl .roc-nl__input, .fluentform :is(input, textarea).ff-el-form-control, .roc-arch-empty .roc-arch-empty__form input, .woocommerce form .form-row input.input-text, .woocommerce .coupon input.input-text):disabled {
	border-color: var(--roc-slate-300) !important;
}

:is(.fluentform .ff-el-group select.ff-el-form-control, .woocommerce form .form-row :is(select, textarea), .woocommerce form .form-row .select2-container .select2-selection) {
	border-color: var(--roc-input-border);
}

:is(.fluentform .ff-el-group select.ff-el-form-control, .woocommerce form .form-row :is(select, textarea), .woocommerce form .form-row .select2-container .select2-selection):hover {
	border-color: var(--roc-slate-600);
}

:is(.fluentform .ff-el-group select.ff-el-form-control, .woocommerce form .form-row :is(select, textarea), .woocommerce form .form-row .select2-container .select2-selection):focus,
.woocommerce form .form-row :is(.select2-container--focus, .select2-container--open) .select2-selection.select2-selection {
	border-color: var(--roc-blue-600);
}

:is(.fluentform .ff-el-is-error select.ff-el-form-control, .woocommerce form .form-row.woocommerce-invalid :is(select, textarea), .woocommerce form .form-row.woocommerce-invalid .select2-container .select2-selection) {
	border-color: var(--roc-negative);
}

:is(.fluentform .ff-el-group select.ff-el-form-control, .woocommerce form .form-row :is(select, textarea)):disabled:disabled,
.woocommerce form .form-row .select2-container--disabled .select2-selection.select2-selection {
	border-color: var(--roc-slate-300);
}

/* 5. Reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0.01ms !important;
	}

	.roc-sah .roc-sah-table :is(thead th:first-child, tbody th) {
		animation-duration: auto !important;
	}
}

/* 6. Icons */
.roc-fa { display: inline-block; line-height: 1; }
.roc-fa .roc-icon.roc-icon--glyph { width: 1em; height: 1em; max-width: none; vertical-align: -0.125em; }
.roc-fa--xs { font-size: 0.75em; line-height: 0.08333em; vertical-align: 0.125em; }
.roc-fa--sm { font-size: 0.875em; line-height: 0.07143em; vertical-align: 0.05357em; }
.roc-fa--lg { font-size: 1.25em; line-height: 0.05em; vertical-align: -0.075em; }
.roc-fa--2x { font-size: 2em; }
.roc-fa--3x { font-size: 3em; }
.roc-fa--4x { font-size: 4em; }
.roc-fa--5x { font-size: 5em; }
.roc-fa--fw { text-align: center; width: 1.25em; }
.roc-fa.roc-freelance-play-icon { font-size: 3.75rem; margin-left: 2.5px; }
/* roc-icon-masks:start */
:root {
	--roc-mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l9 15.5H3z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
	--roc-mask-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--roc-mask-circle-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 9-5.5 5.5L8 12'/%3E%3C/svg%3E");
	--roc-mask-circle-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
	--roc-mask-lightbulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
	--roc-mask-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4l2.4 5 5.4.6-4 3.7 1.1 5.4L12 16l-4.9 2.7 1.1-5.4-4-3.7 5.4-.6z'/%3E%3C/svg%3E");
}
/* roc-icon-masks:end */
.course-article-content :is(.key-concept, .pro-tip, .warning-box)::before { content: ""; font: inherit; }
.course-article-content :is(.key-concept, .pro-tip, .warning-box)::after { content: ""; position: absolute; top: -12px; left: 12px; width: 28px; height: 28px; background: var(--roc-white); -webkit-mask: var(--roc-icon-mask) no-repeat; mask: var(--roc-icon-mask) no-repeat; }
.course-article-content .key-concept::after { --roc-icon-mask: var(--roc-mask-lightbulb) 50% / 14px; }
.course-article-content .pro-tip::after { --roc-icon-mask: var(--roc-mask-star) 50% / 13px; }
.course-article-content .warning-box::after { --roc-icon-mask: var(--roc-mask-alert) 50% / 13px; }
.pop-up-wrap .btn-close-pop-up > .fa-circle-xmark, body.single-post .cert-promo-features .fa-check-circle, body.single-post .cert-promo-cta .fa-arrow-right { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background: currentColor; -webkit-mask: var(--roc-icon-mask) no-repeat; mask: var(--roc-icon-mask) no-repeat; }
.pop-up-wrap .btn-close-pop-up > .fa-circle-xmark::before, body.single-post .cert-promo-features .fa-check-circle::before, body.single-post .cert-promo-cta .fa-arrow-right::before { content: none; }
.pop-up-wrap .btn-close-pop-up > .fa-circle-xmark { --roc-icon-mask: var(--roc-mask-circle-x); }
body.single-post .cert-promo-features .fa-check-circle { --roc-icon-mask: var(--roc-mask-circle-check); }
body.single-post .cert-promo-cta .fa-arrow-right { --roc-icon-mask: var(--roc-mask-arrow); }
@media (forced-colors: active) {
	.course-article-content :is(.key-concept, .pro-tip, .warning-box)::after, .pop-up-wrap .btn-close-pop-up > .fa-circle-xmark, body.single-post .cert-promo-features .fa-check-circle, body.single-post .cert-promo-cta .fa-arrow-right { forced-color-adjust: none; background: CanvasText; }
}