/*
 * Styling for the section library.
 *
 * Everything here reads the brand colours from the custom properties set in
 * branding.php, so changing a colour on the Site Setup screen restyles every
 * section without anybody touching this file.
 */

.vsk-hero .wp-block-cover__inner-container { max-width: 760px; }

.vsk-steps .vsk-step-number {
	width: 44px;
	height: 44px;
	margin: 0 0 14px;
	border-radius: 50%;
	background: var(--vsk-accent, #9b1018);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 44px;
	text-align: center;
}

.vsk-stats { background: var(--vsk-brand, #071958); color: #fff; }
.vsk-stats .vsk-stat-figure {
	margin: 0;
	color: var(--vsk-high, #e79200);
	font-size: clamp(2rem, 4vw, 2.8rem);
	font-weight: 700;
	line-height: 1.1;
}
.vsk-stats .vsk-stat-label { margin: 6px 0 0; font-size: .95rem; opacity: .85; }

.vsk-cards .vsk-card {
	padding: 22px;
	border: 1px solid #dfe4ec;
	border-radius: 10px;
	background: #fff;
}
.vsk-cards .vsk-card img { border-radius: 6px; }

/* Plan cards. The grid keeps every card the same height however many there are. */
.vsk-plans .vsk-plan {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px 22px;
	border: 1px solid #dfe4ec;
	border-top: 4px solid var(--vsk-brand, #071958);
	border-radius: 10px;
	background: #fff;
}
.vsk-plans .vsk-plan .vsk-icon img { width: 40px; height: auto; }
.vsk-plans .vsk-plan h3 { margin: 10px 0 6px; color: var(--vsk-brand, #071958); }
.vsk-plans .vsk-plan-blurb { margin: 0 0 14px; color: #5a6475; font-size: .93rem; }
.vsk-plans .vsk-plan-term {
	margin: 0;
	color: #6b7689;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.vsk-plans .vsk-plan-price {
	margin: 2px 0 10px;
	color: var(--vsk-brand, #071958);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.1;
}
.vsk-plans .vsk-plan-band {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 11px;
	border-radius: 20px;
	background: var(--vsk-high, #e79200);
	color: #1a1205;
	font-size: .78rem;
	font-weight: 700;
}
.vsk-plans .vsk-plan-list { margin: 4px 0 18px; padding-left: 0; list-style: none; }
.vsk-plans .vsk-plan-list li {
	position: relative;
	margin-bottom: 7px;
	padding-left: 24px;
	font-size: .93rem;
}
.vsk-plans .vsk-plan-list li::before {
	content: "";
	position: absolute;
	top: .36em;
	left: 4px;
	width: 10px;
	height: 5px;
	border: 2px solid var(--vsk-accent, #9b1018);
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg);
}
.vsk-plans .vsk-plan .wp-block-buttons { margin-top: auto; }

.vsk-pricing-table table { width: 100%; }
.vsk-pricing-table thead th { background: var(--vsk-brand, #071958); color: #fff; }

.vsk-cta { background: var(--vsk-brand, #071958); color: #fff; }
.vsk-cta a.wp-block-button__link { background: var(--vsk-high, #e79200); color: #1a1205; }

.vsk-quotes .vsk-quote blockquote {
	margin: 0;
	padding: 20px 22px;
	border-left: 4px solid var(--vsk-accent, #9b1018);
	background: #f5f7fa;
}
.vsk-quotes .vsk-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: 700; }

.vsk-faq .vsk-faq-item {
	padding: 14px 18px;
	border: 1px solid #dfe4ec;
	border-radius: 8px;
	margin-bottom: 10px;
}
.vsk-faq .vsk-faq-item summary { cursor: pointer; font-weight: 700; color: var(--vsk-brand, #071958); }

.vsk-logos .vsk-logos-label {
	margin-bottom: 18px;
	color: #6b7689;
	font-size: .85rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.vsk-logos img { max-height: 64px; width: auto; }

@media (max-width: 781px) {
	.vsk-logos .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: wrap !important; }
	.vsk-logos .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column { flex-basis: 50% !important; }
}

/* Icon cards — the section this site uses more than any other. */
.vsk-icon-cards .vsk-icon-card {
	padding: 22px 20px;
	border: 1px solid #dfe4ec;
	border-radius: 10px;
	background: #fff;
}
.vsk-icon-cards .vsk-icon img { width: 52px; height: auto; }
.vsk-icon-cards.is-five .vsk-icon-card { padding: 18px 14px; text-align: center; }

.vsk-dark-cta { background: var(--vsk-dark, #161616); color: #fff; }
.vsk-dark-cta .vsk-dark-card {
	padding: 24px 20px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	background: rgba(255, 255, 255, .04);
}
.vsk-dark-cta .vsk-icon.is-light img { filter: brightness(0) invert(1); }
.vsk-dark-cta a.wp-block-button__link { background: var(--vsk-accent, #9b1018); color: #fff; }

.vsk-stats-image .vsk-stat-row { margin-bottom: 4px; }
.vsk-stats-image .vsk-stat-row img { width: 40px; height: auto; }
.vsk-stats-image .vsk-stat-figure {
	margin: 0;
	color: var(--vsk-brand, #071958);
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.2;
}
.vsk-stats-image .vsk-stat-label { margin: 2px 0 0; color: #5a6475; font-size: .92rem; }

@media (max-width: 781px) {
	.vsk-icon-cards.is-five .wp-block-columns { flex-wrap: wrap !important; }
	.vsk-icon-cards.is-five .wp-block-column { flex-basis: calc(50% - 12px) !important; }
}

/* Flexible grids — used where a section has more items than a column row can hold. */
.vsk-icon-grid-section .vsk-icon-card,
.vsk-text-cards .vsk-text-card {
	padding: 20px 18px;
	border: 1px solid #dfe4ec;
	border-radius: 10px;
	background: #fff;
	height: 100%;
}
.vsk-icon-grid-section .vsk-icon img { width: 42px; height: auto; }
.vsk-icon-grid-section .vsk-icon-card h3,
.vsk-text-cards .vsk-text-card h3 { margin-top: 10px; color: var(--vsk-brand, #071958); }
.vsk-icon-grid-section .vsk-icon-card p,
.vsk-text-cards .vsk-text-card p { margin-bottom: 0; color: #4b5563; }

/* Hero where the buttons sit under the artwork instead of being drawn into it. */
.vsk-hero-buttons figure { margin-bottom: 0; }
.vsk-hero-buttons .wp-block-buttons { padding: 0 16px; }

/* Editable pages. The parent theme caps content at 645px, which is right for an
   article but squeezes card grids, so pages built from sections get a wider
   measure. Scoped to .vsk-content so coded pages are untouched. */
.vsk-content {
	--wp--style--global--content-size: 1180px;
	--wp--style--global--wide-size: 1340px;
}
.vsk-content > .alignfull { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
.vsk-content > .alignfull.is-layout-constrained { padding-left: 20px; padding-right: 20px; }
.vsk-content > .wp-block-group.alignfull + .wp-block-group.alignfull { margin-top: 0; }
:is(.vsk-content, .editor-styles-wrapper) .vsk-hero-buttons > .wp-block-heading { max-width: 900px; margin-left: auto; margin-right: auto; }

/* Buttons take the brand colours rather than the parent theme's black. */
:is(.vsk-content, .editor-styles-wrapper) .wp-block-button__link {
	padding: .72em 1.5em;
	border: 2px solid var(--vsk-accent, #9b1018);
	border-radius: 4px;
	background: var(--vsk-accent, #9b1018);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
:is(.vsk-content, .editor-styles-wrapper) .wp-block-button__link:hover { filter: brightness(1.1); color: #fff; }
:is(.vsk-content, .editor-styles-wrapper) .is-style-outline .wp-block-button__link {
	border-color: var(--vsk-brand, #071958);
	background: transparent;
	color: var(--vsk-brand, #071958);
}

/* Dark sections: light text, translucent cards, white icons. */
:is(.vsk-content, .editor-styles-wrapper) .vsk-dark-cta { background: var(--vsk-dark, #161616); color: #fff; }
:is(.vsk-content, .editor-styles-wrapper) .vsk-dark-cta h2,
:is(.vsk-content, .editor-styles-wrapper) .vsk-dark-cta h3,
:is(.vsk-content, .editor-styles-wrapper) .vsk-dark-cta p { color: #fff; }
:is(.vsk-content, .editor-styles-wrapper) .vsk-dark-cta .vsk-icon-card {
	border-color: rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .05);
}
:is(.vsk-content, .editor-styles-wrapper) .vsk-dark-cta .vsk-icon img { filter: brightness(0) invert(1); }
:is(.vsk-content, .editor-styles-wrapper) .vsk-dark-cta .is-style-outline .wp-block-button__link { border-color: #fff; color: #fff; }
:is(.vsk-content, .editor-styles-wrapper) .vsk-icon-card .wp-block-buttons { margin-top: 14px; }

/* A card that holds a quotation is styled as a testimonial. */
:is(.vsk-content, .editor-styles-wrapper) .vsk-icon-card.is-quote { border-left: 4px solid var(--vsk-accent, #9b1018); background: #f7f8fb; }
:is(.vsk-content, .editor-styles-wrapper) .vsk-icon-card.is-quote h3 { font-style: italic; font-weight: 600; line-height: 1.45; }
:is(.vsk-content, .editor-styles-wrapper) .vsk-icon-card h3 { overflow-wrap: anywhere; }

/* Same measure in the page editor, so staff see what visitors will see. */
.editor-styles-wrapper {
	--wp--style--global--content-size: 1180px;
	--wp--style--global--wide-size: 1340px;
}

/* The editor shows the site's own typeface and text colour, so what staff see
   while editing is what visitors will see. */
.editor-styles-wrapper {
	font-family: var(--vsk-font, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	color: #2c2c2c;
}
.editor-styles-wrapper :is(h1, h2, h3, h4, h5, h6, p, li, summary, cite, .wp-block-button__link) {
	font-family: inherit;
}
.editor-styles-wrapper h3 { color: var(--vsk-brand, #071958); }
.vsk-content { font-family: var(--vsk-font, inherit); }
.editor-styles-wrapper { font-size: 16px; line-height: 1.6; }
.editor-styles-wrapper :is(h1, h2, h3, h4) { font-weight: 700; letter-spacing: normal; }
.editor-styles-wrapper .vsk-icon-card p { font-size: .95rem; color: #4b5563; }

/* Text stand-in for a logo that has not been uploaded yet. */
.site-head .logo-text,
.site-foot .logo-text {
	display: inline-block;
	max-width: 260px;
	color: #fff;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .02em;
	text-transform: uppercase;
}

/* Form block, as shown in the editor. */
.vsk-form-placeholder {
	max-width: 760px;
	margin: 28px auto;
	padding: 28px 24px;
	border: 2px dashed #b9c3d6;
	border-radius: 10px;
	background: #f6f8fc;
	text-align: center;
	color: #2c2c2c;
}
.vsk-form-placeholder__icon { font-size: 30px; line-height: 1; color: var(--vsk-brand, #071958); }
.vsk-form-placeholder strong { display: block; margin: 10px 0 4px; font-size: 1.1rem; color: var(--vsk-brand, #071958); }
.vsk-form-placeholder p { margin: 0 auto 14px; max-width: 460px; font-size: .92rem; color: #5a6475; }
.vsk-form-placeholder .components-base-control { max-width: 360px; margin: 0 auto; text-align: left; }

/* Questions keep their boxed look wherever they appear, not only in FAQ sections. */
:is(.vsk-content, .editor-styles-wrapper) .vsk-faq-item {
	max-width: 900px;
	margin: 0 auto 10px;
	padding: 14px 18px;
	border: 1px solid #dfe4ec;
	border-radius: 8px;
	background: #fff;
}
:is(.vsk-content, .editor-styles-wrapper) .vsk-faq-item summary { cursor: pointer; font-weight: 700; color: var(--vsk-brand, #071958); }
:is(.vsk-content, .editor-styles-wrapper) .vsk-faq-item[open] summary { margin-bottom: 8px; }