/* Shared component styles. Any .css file dropped in this folder loads globally via functions.php. */

/* =========================================================================
   Typography utilities — add the class to a block via
   Advanced → Additional CSS class(es).
   ========================================================================= */

/* Heading/H2 — desktop 36/38, mobile 28/32, Dark Blue */
.ns-h2 {
	color: var( --Dark-Blue, #00406D ) !important;
	text-align: center;
	font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	font-size: 36px !important;
	font-style: normal;
	font-weight: 600 !important;
	line-height: 38px !important;
}

/* =========================================================================
   Layout utilities
   ========================================================================= */

/* Constrain a row/group to 680px on desktop (full width on mobile) */
@media ( min-width: 768px ) {
	.ns-mw-680 {
		max-width: 680px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

/* =========================================================================
   Check list — add "ns-check-list" to a <ul>.
   Desktop: 2 columns (row-major), 20px row / 50px column gap.
   Mobile: single column, 16px gap. Figma 6624-10561 / 7706-4911.
   ========================================================================= */
.ns-check-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 20px 60px;
}

.ns-check-list > li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 28px;
	color: #000;
	text-align: left;
}

.ns-check-list > li::before,
.ns-check-list > li::marker {
	content: none;
}

.ns-check-list > li::before {
	content: "";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin-top: 3px;
	background-image: url( "/wp-content/themes/nspharma-support/images/check.svg" );
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

@media ( max-width: 767px ) {
	.ns-check-list {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ns-check-list > li::before {
		width: 22px;
		height: 22px;
	}
}

/* Paragraph/Large — desktop 21/30, mobile 18/28, Black */
.ns-p-large {
	color: var( --Black, #000 ) !important;
	text-align: center;
	font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	font-size: 21px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: 30px !important;
}

@media ( max-width: 767px ) {
	.ns-h2 {
		font-size: 28px !important;
		line-height: 32px !important;
	}

	.ns-p-large {
		font-size: 18px !important;
		line-height: 28px !important;
	}
}

/* Paragraph/Default — 18/24, Black, centered. Same on desktop and mobile.
   Links inside: navy, 600, underlined; underline removed on hover. */
.ns-p-default {
	color: var( --Black, #000 ) !important;
	text-align: center;
	font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	font-size: 18px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: 24px !important;
}

.ns-p-default a {
	color: var( --Navy, #00406D ) !important;
	font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-skip-ink: auto;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
	text-underline-position: from-font;
}

.ns-p-default a:hover {
	text-decoration: none;
}