/* dsc-design 0.1.0: site-wide layer for digitalstealthcare.com. Tokens are in tokens.css (loaded first).
   EVERY rule is scoped under body.dsd, which the plugin adds only when the layer is active, so with the layer off the
   site is byte-for-byte what it was. Divi writes per-module CSS with high specificity, so fixes are prefixed with
   `body.dsd #page-container` and use !important only where Divi's own rules would otherwise win.
   Not touched by design: the [pd_kit_status] stamp text, [pd_alpha_signup] / [pd_contact] markup and classes, the
   /journey/ timeline widget, the logo wall. Inline hex colours are overridden only where a stable selector exists. */

/* ---------- base ---------- */

body.dsd {
	font-family: var(--dsc-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.dsd #main-content {
	overflow-wrap: break-word;
}

/* Typeface: Fira Sans on the Divi text-bearing modules (they carry a per-module font-family). Anything that sets its
   own mono face inline (eyebrows, chips, the status stamp) keeps it, because only the module containers are switched
   and the inline face lives on the child. */
body.dsd #page-container :is(.et_pb_text, .et_pb_blurb, .et_pb_module_header, .et_pb_button, .et_pb_menu, .et-menu-nav a, .et_pb_number_counter) {
	font-family: var(--dsc-font) !important;
}
body.dsd #page-container :is(h1, h2, h3).et_pb_module_header {
	font-weight: 600 !important;
	letter-spacing: -0.01em;
}
body.dsd #page-container h1.et_pb_module_header {
	font-size: var(--dsc-h1) !important;
	line-height: 1.08 !important;
	text-wrap: balance;
}
body.dsd #page-container h2.et_pb_module_header {
	font-size: var(--dsc-h2) !important;
	line-height: 1.15 !important;
	text-wrap: balance;
}
body.dsd :is(code, kbd, samp, pre) {
	font-family: var(--dsc-mono);
}

/* ---------- links: one blue ---------- */

/* Divi's stray #2ea3f2 becomes the link token. Inline colours on a link still win (no !important on the colour). */
body.dsd #et-main-area .et_pb_text_inner a:not(.et_pb_button),
body.dsd #page-container footer a:not(.et_pb_button) {
	color: var(--dsc-link);
}
body.dsd #et-main-area .et_pb_text_inner a:not(.et_pb_button):hover,
body.dsd #page-container footer a:not(.et_pb_button):hover {
	color: var(--dsc-accent-hover);
}
body.dsd #page-container .et_pb_blurb .et-pb-icon {
	color: var(--dsc-link) !important;
}

/* ---------- focus: a visible ring on everything that takes focus ---------- */

body.dsd :is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), .et_pb_button, .et-menu-nav a):focus-visible,
body.dsd .pdc-dialog :focus-visible,
body.dsd .pdas-card :focus-visible {
	outline: 2px solid var(--dsc-accent) !important;
	outline-offset: 3px !important;
	border-radius: var(--dsc-r-chip);
}
body.dsd :is(input, select, textarea):focus-visible {
	border-color: var(--dsc-accent) !important;
	outline-offset: 1px !important;
	border-radius: var(--dsc-r-btn);
}
body.dsd :is(input, select, textarea) {
	border-color: var(--dsc-line-strong);
}

/* ---------- skip link ---------- */

.dsd-skip {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100000;
	padding: 10px 16px;
	background: var(--dsc-accent);
	font: 600 15px/1.2 var(--dsc-font);
	border-radius: var(--dsc-r-btn);
	text-decoration: none;
	transform: translateY(-200%);
}
.dsd-skip:focus {
	transform: translateY(0);
	outline: 2px solid var(--dsc-text);
	outline-offset: 2px;
}

/* ---------- groups: only real cards get the card shadow ---------- */

body.dsd #page-container .et_pb_group:not(:has(h1, h2, h3, h4, h5, h6)) {
	box-shadow: none !important;
	background-color: transparent !important;
}

/* ---------- buttons: one height, one shape. Fill and outline colours stay as each page sets them (primary filled,
   secondary outlined) until the generators move to the tokens. ---------- */

body.dsd #page-container .et_pb_button_module_wrapper {
	margin: 0 !important;
}
body.dsd #page-container .et_pb_button,
body.dsd #page-container .et_pb_button:hover {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--dsc-btn-h);
	padding: 0 20px !important;
	line-height: 1.1 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	color: var(--dsc-on-accent) !important;
	border-radius: var(--dsc-r-btn) !important;
	white-space: nowrap;
}
body.dsd #page-container .et_pb_button:hover {
	transform: translateY(-1px);
}
body.dsd #page-container .et_pb_button::after,
body.dsd #page-container .et_pb_button::before {
	display: none !important;
}
body.dsd #page-container .et_pb_button {
	transition: background-color var(--dsc-dur-1) var(--dsc-ease), border-color var(--dsc-dur-1) var(--dsc-ease), transform var(--dsc-dur-1) var(--dsc-ease);
}
/* A row of buttons: even gaps, no stray indents. */
body.dsd #page-container .et_pb_group:has(> .et_pb_button_module_wrapper) {
	gap: var(--dsc-s3) !important;
	padding: 0 !important;
}
/* The two plugin forms keep their markup; only their primary buttons take the one shape. */
body.dsd :is(.pdc-btn, .pdas-btn) {
	min-height: var(--dsc-btn-h);
	border-radius: var(--dsc-r-btn) !important;
}

/* ---------- card rows: equal heights, links on one line ---------- */

body.dsd #page-container .et_pb_row > .et_pb_column > .et_pb_module:only-child {
	flex-grow: 1;
	height: auto;
}
body.dsd #page-container .et_pb_row > .et_pb_column:has(> .et_pb_module:only-child) {
	display: flex;
	flex-direction: column;
}
/* One inner padding for every surface (24 px), so text starts at the same x from section to section. */
body.dsd #page-container .et_pb_row:has(> .et_pb_column:nth-child(2)) > .et_pb_column > .et_pb_text:only-child,
body.dsd #page-container .et_pb_group:has(h1, h2, h3, h4, h5, h6) {
	padding-left: var(--dsc-s5) !important;
	padding-right: var(--dsc-s5) !important;
}
body.dsd #page-container .et_pb_row:has(> .et_pb_column:nth-child(2)) > .et_pb_column > .et_pb_text:only-child {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}
body.dsd #page-container .et_pb_group:has(h1, h2, h3, h4, h5, h6) {
	padding-top: var(--dsc-s5) !important;
	padding-bottom: var(--dsc-s5) !important;
	border-radius: var(--dsc-r-card) !important;
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}
/* Pin the last module (the "Open ... " link) to the bottom of a card so links align across a row. */
body.dsd #page-container .et_pb_group:has(h1, h2, h3, h4, h5, h6) > .et_pb_module:last-child:not(:first-child) {
	margin-top: auto !important;
	padding-top: var(--dsc-s3);
}

/* Custom card grids the generators emit as code modules (.dscfeat-card and friends): same surface radius, and the
   trailing link sits at the bottom. Their own layout CSS is left alone. */
body.dsd .dscfeat-card {
	border-radius: var(--dsc-r-card);
}
body.dsd .dscfeat-card > .dscfeat-more {
	margin-top: auto;
}

/* Tile rows (the logo wall, six across) keep their own layout: a forced three-column grid broke it on 2026-09-30. */

/* ---------- eyebrows: mono caps, teal, 12 px above the heading ---------- */

/* The generators write every eyebrow as <p style="...text-transform:uppercase;..."> in a text module, and the footer
   uses <h6>. Colour goes to the accent (green is status-only now). */
body.dsd #et-main-area h6,
body.dsd #page-container footer h6,
body.dsd #page-container footer .dsd-fh {
	text-transform: uppercase !important;
	padding-bottom: 0 !important;
	font-family: var(--dsc-mono) !important;
	font-size: 12px !important;
	letter-spacing: 0.14em !important;
	color: var(--dsc-accent) !important;
}
body.dsd #page-container .et_pb_text_inner > p[style*="text-transform:uppercase"] {
	color: var(--dsc-accent) !important;
	margin-bottom: 0 !important;
}
/* Divi's column gap is 30 px; the eyebrow module pulls the next module up by 18 px, leaving 12. */
body.dsd #page-container .et_pb_column > .et_pb_heading:has(h6),
body.dsd #page-container .et_pb_column > .et_pb_text:has(> .et_pb_text_inner > p[style*="text-transform:uppercase"]) {
	margin-bottom: -18px !important;
}
@media (max-width: 600px) {
	body.dsd #et-main-area h6,
	body.dsd #page-container .et_pb_text_inner > p[style*="text-transform:uppercase"] {
		letter-spacing: 0.08em !important;
		font-size: 11px !important;
		line-height: 1.5 !important;
	}
}

/* ---------- footer ---------- */

body.dsd #page-container .et_pb_image_0_tb_footer,
body.dsd #page-container .et_pb_image_0_tb_footer .et_pb_image_wrap,
body.dsd #page-container .et_pb_image_0_tb_footer img {
	width: 132px !important;
	max-width: 132px !important;
	height: auto !important;
}
body.dsd #page-container footer .et_pb_text_inner p {
	line-height: 1.7;
}
body.dsd #page-container footer .et_pb_text_inner p + p {
	margin-top: var(--dsc-s3);
}

/* ---------- atmosphere: the app's static grid wash ---------- */

/* pd-ambient-bg's script and stylesheet are dequeued while the layer is on (dsc-design.php, 0.4.0): its script walked every
   div for its computed background (a 470 ms task on a phone) and its glows were hidden anyway. The static wash (32 px
   teal grid at 3%) is drawn on ::before. */
body.dsd::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	width: auto;
	height: auto;
	border-radius: 0;
	will-change: auto;
	animation: none;
	transform: none;
	background-image:
		linear-gradient(var(--dsc-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--dsc-grid-line) 1px, transparent 1px);
	background-size: var(--dsc-grid-size) var(--dsc-grid-size);
}

/* Root network canvas (roots-bg.js adds body.dsd-roots once it is drawing): page-ground fills go transparent so it shows
   through. Only fills that equal the page background; cards, panels, inputs and nodes keep their own opaque surfaces. */
body.dsd.dsd-roots :is(#page-container, #et-boc, #et-main-area, #main-content, .et-l, .et_builder_inner_content, .et_pb_post_content, .et_pb_section_0_tb_body, .dsdh-sec, .dsdm-fw-posts) {
	background: transparent !important;
}

/* ---------- links inside running text: underline as the non-colour cue (WCAG 1.4.1, Lighthouse link-in-text-block) ---------- */

body.dsd:not(.dsd-home) #main-content :is(p, li, dd, .et_pb_blurb_description) a:not(.et_pb_button):not([class*="dsdh-"]) {
	text-decoration: underline;
	text-decoration-color: rgba(79, 157, 255, 0.5);
	text-underline-offset: 3px;
}
body.dsd:not(.dsd-home) #main-content :is(p, li, dd, .et_pb_blurb_description) a:not(.et_pb_button):not([class*="dsdh-"]):hover {
	text-decoration-color: currentColor;
}

/* ---------- mobile: stacked, full-width actions ---------- */

@media (max-width: 767px) {
	body.dsd #page-container .et_pb_group:has(> .et_pb_button_module_wrapper) {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	body.dsd #page-container .et_pb_group:has(> .et_pb_button_module_wrapper) > .et_pb_button_module_wrapper {
		width: 100% !important;
		text-align: left !important;
	}
	body.dsd #page-container .et_pb_group:has(> .et_pb_button_module_wrapper) .et_pb_button {
		width: 100% !important;
		max-width: none !important; /* Divi caps buttons at max-content */
	}
	body.dsd #page-container .et_pb_group:not(:has(h1, h2, h3, h4, h5, h6)):not(:has(> .et_pb_button_module_wrapper)) {
		gap: var(--dsc-s2) !important;
	}
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
	body.dsd #page-container .et_pb_button,
	body.dsd #page-container .et_pb_button:hover {
		transition: none;
		transform: none;
	}
	body.dsd *,
	body.dsd *::before,
	body.dsd *::after {
		scroll-behavior: auto !important;
	}
}

/* "In the network" footer line (shared with cannalib.org; docs/DSC-NETWORK-LINE-HANDOVER.md). One slim line, never tiles. */
body.dsd .et-l--footer .dsd-net-row { border-top: 1px solid var(--dsc-line); padding-top: 16px !important; margin-top: 12px !important; }
body.dsd .cl-net { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font: 400 13px/1.4 var(--dsc-font); }
body.dsd .cl-net-label { font: 500 11px/1.4 var(--dsc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dsc-accent); margin-right: 4px; }
body.dsd .cl-net-item { display: inline-flex; align-items: center; gap: 8px; color: var(--dsc-muted-long) !important; text-decoration: none !important; transition: color var(--dsc-dur-1) ease; }
body.dsd a.cl-net-item:hover { color: var(--dsc-text) !important; }
body.dsd a.cl-net-item:focus-visible { outline: 2px solid var(--dsc-accent); outline-offset: 3px; border-radius: 4px; }
body.dsd .cl-net-item.is-here { color: var(--dsc-text) !important; }
body.dsd .cl-net-item img { width: 20px !important; height: 20px !important; flex: none; border-radius: 5px; }

/* roots: water reaching the soil line glows into the header; footer hint for explorers (0.6.7) */
body.dsd .et-l--header { transition: box-shadow 1.4s ease; }
body.dsd.dsd-drank .et-l--header { box-shadow: 0 1px 0 rgba(126, 196, 240, 0.28), 0 6px 22px -8px rgba(126, 196, 240, 0.22); }
body.dsd .et-l--footer .dsd-explore { margin: 10px auto 0; max-width: 1180px; padding: 0 16px 6px; font: 400 12px/1.5 var(--dsc-mono, monospace); letter-spacing: .04em; color: #6f7a90; text-align: center; }
@media (prefers-reduced-motion: reduce) { body.dsd .et-l--header { transition: none; } }