/* Micro Digital Engineering — site styles (child theme of Blocksy).
   Scoped to .entry-content and CF7 forms. No global element resets.
   Uses only the tokens from style.css.

   Page model (17 · Page Production Standard):
   - Commercial pages: every top-level group is a full-width band (alignfull):
     .hero, sections with tone-white / tone-tint / tone-navy, or no tone (page background).
   - Service, sub-service and case pages: sections carry .sheet and an inner
     .section-body group: title left, content right on wide screens.
   - Legal pages: .hero with H1 and version line, then one .doc band with plain sections.
   - No horizontal scrolling anywhere. Tables become vertical records on phones.
*/

/* ---------- 1. Content base ---------- */
.entry-content {
	container-type: inline-size;
	font-family: var(--mde-font-sans);
	font-size: var(--mde-text-body);
	line-height: var(--mde-line-body);
	color: var(--mde-text);
}
.entry-content :where(h1, h2, h3, p, ul, ol, figure, table) { margin: 0; }
.entry-content :where(h1, h2, h3) {
	color: var(--mde-heading);
	line-height: var(--mde-line-heading);
	font-weight: 700;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.entry-content h1 { font-size: var(--mde-text-h1); letter-spacing: -0.025em; max-width: 26ch; }
.entry-content h2 { font-size: var(--mde-text-h2); max-width: 30ch; }
.entry-content h3 { font-size: var(--mde-text-h3); font-weight: 650; letter-spacing: -0.01em; }
.entry-content :where(p, ul, ol) { max-width: var(--mde-measure); }
.entry-content :where(ul, ol) { padding-left: 1.25em; }
.entry-content :where(li + li) { margin-top: 0.35rem; }
.entry-content a { color: var(--mde-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.entry-content a:hover { color: var(--mde-link-hover); text-decoration-thickness: 2px; }
.entry-content :focus-visible { outline: 2px solid var(--mde-focus); outline-offset: 3px; border-radius: 2px; }

/* Unordered lists: short rule as the marker */
.entry-content ul.wp-block-list:not(.links) { list-style: none; padding-left: 0; }
.entry-content ul.wp-block-list:not(.links) > li { position: relative; padding-left: 1.5rem; }
.entry-content ul.wp-block-list:not(.links) > li::before {
	content: ""; position: absolute; left: 0; top: 0.8em; width: 0.6rem; height: 2px; background: var(--mde-rule);
}

/* ---------- 2. Bands (alignfull groups) ---------- */
.entry-content > .alignfull {
	box-sizing: border-box;
	padding-block: var(--mde-space-5);
	padding-left: max(16px, env(safe-area-inset-left, 0px), (100% - var(--mde-wide)) / 2);
	padding-right: max(16px, env(safe-area-inset-right, 0px), (100% - var(--mde-wide)) / 2);
	background: var(--mde-band-bg);
	color: var(--mde-text);
}
.entry-content > .alignfull > * + *,
.entry-content .section-body > * + * { margin-top: var(--mde-space-3); }

.entry-content > .tone-white { --mde-band-bg: var(--mde-white); }
.entry-content > .tone-tint { --mde-band-bg: var(--mde-gray-blue); --mde-link-hover: var(--mde-dark); }
.entry-content > .tone-navy {
	--mde-band-bg: var(--mde-navy);
	--mde-text: var(--mde-gray-blue);
	--mde-heading: var(--mde-white);
	--mde-muted: var(--mde-muted-on-dark);
	--mde-border: var(--mde-line-on-dark);
	--mde-rule: var(--mde-copper);
	--mde-link: var(--mde-gray-blue);
	--mde-link-hover: var(--mde-white);
	--mde-button-bg: var(--mde-copper);
	--mde-button-text: var(--mde-dark);
	--mde-button-hover-bg: var(--mde-gray-blue);
	--mde-button-hover-text: var(--mde-dark);
	--mde-focus: var(--mde-copper);
}

/* Short answer right after the hero (service pages) */
.entry-content > .answer { padding-block: var(--mde-space-4); }
.entry-content > .answer > h2 { font-size: var(--mde-text-h3); max-width: 46ch; }
.entry-content > .answer > * + * { margin-top: var(--mde-space-1); }

/* ---------- 3. Hero ---------- */
.entry-content > .hero { --mde-band-bg: var(--mde-white); border-bottom: 1px solid var(--mde-border); }
.entry-content > .hero > :first-child::before {
	content: ""; display: block; width: 2.5rem; height: 3px;
	background: var(--mde-accent); margin-bottom: var(--mde-space-2);
}
.entry-content > .hero > h1 { margin-top: var(--mde-space-2); }
.entry-content > .hero > .actions { margin-top: var(--mde-space-4); }
.entry-content > .hero > :is(.eyebrow, nav, .ct-breadcrumbs, .rank-math-breadcrumb),
.entry-content .subhead {
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mde-muted);
}
.entry-content > .hero > :is(nav, .ct-breadcrumbs, .rank-math-breadcrumb) a { color: inherit; text-decoration: none; }
.entry-content > .hero > :is(nav, .ct-breadcrumbs, .rank-math-breadcrumb) a:hover { text-decoration: underline; }
.entry-content > .hero > :is(nav, .ct-breadcrumbs, .rank-math-breadcrumb) p { margin: 0; }
.entry-content .lead { font-size: var(--mde-text-lead); line-height: 1.55; max-width: 62ch; }

/* ---------- 4. Actions, buttons, small text ---------- */
.entry-content .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mde-space-2) var(--mde-space-3); }
.entry-content .actions > * { margin: 0; }
.entry-content .actions > .note { flex-basis: 100%; max-width: none; order: 3; }
.entry-content a.btn {
	display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-height: 3rem; padding: 0.75rem 1.4rem;
	background: var(--mde-button-bg); color: var(--mde-button-text);
	border: 1px solid var(--mde-button-bg); border-radius: var(--mde-radius);
	font-weight: 600; text-decoration: none;
}
.entry-content a.btn:hover { background: var(--mde-button-hover-bg); border-color: var(--mde-button-hover-bg); color: var(--mde-button-hover-text); }
.entry-content p:has(> a.btn) + .note { margin-top: var(--mde-space-2); }
.entry-content .note,
.note { font-size: var(--mde-text-small); color: var(--mde-muted); }
/* Notes in the dark Blocksy footer (company-identity widget) */
:is(#footer, .ct-footer) .note { color: inherit; opacity: 0.85; }
.entry-content .reviewed { font-size: var(--mde-text-small); color: var(--mde-muted); }

/* "More" links: drawn chevron, nothing extra for screen readers */
.entry-content .more a { font-weight: 600; text-decoration: none; }
.entry-content .more a:hover { text-decoration: underline; }
.entry-content :is(.more a, .rows h3 a)::after {
	content: ""; display: inline-block; width: 0.42em; height: 0.42em;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor;
	transform: rotate(45deg); margin-left: 0.45em; vertical-align: 0.12em;
}

/* ---------- 5. Cards: customer situations ---------- */
.entry-content .cards { display: grid; gap: var(--mde-space-3); grid-template-columns: minmax(0, 1fr); }
.entry-content .cards > .item {
	display: flex; flex-direction: column; gap: var(--mde-space-1); min-width: 0;
	background: var(--mde-surface); border: 1px solid var(--mde-border); border-radius: var(--mde-radius);
	padding: var(--mde-space-3);
}
.entry-content .cards > .item > * { margin: 0; }
.entry-content .cards > .item > .more { margin-top: auto; padding-top: var(--mde-space-1); }

/* ---------- 6. Rows: name | scope (services, design classes, FAQ) ---------- */
.entry-content .rows > .item { display: flow-root; padding-block: 1.25rem; }
.entry-content .rows > .item:first-child { padding-top: 0.5rem; }
.entry-content .rows > .item + .item { border-top: 1px solid var(--mde-border); }
.entry-content .rows > .item > * { margin: 0; max-width: var(--mde-measure); }
.entry-content .rows > .item > * + * { margin-top: 0.35rem; }
.entry-content .rows h3 a { color: inherit; text-decoration: none; }
.entry-content .rows h3 a:hover { color: var(--mde-link-hover); text-decoration: underline; }

/* Related services */
.entry-content ul.links { list-style: none; padding: 0; }
.entry-content ul.links > li { padding-block: 0.75rem; margin: 0; }
.entry-content ul.links > li + li { border-top: 1px solid var(--mde-border); }
.entry-content ul.links a { font-weight: 600; text-decoration: none; }
.entry-content ul.links a:hover { text-decoration: underline; }

/* ---------- 7. Steps (ordered lists) ---------- */
.entry-content ol.steps { list-style: none; padding: 0; counter-reset: step; max-width: none; }
/* The label sits in its own column via padding, not grid: a step may contain links,
   bold text and shortcodes, which must flow as one line of text. */
.entry-content ol.steps > li {
	counter-increment: step; margin: 0; position: relative;
	padding: 0.9rem 0 0.9rem calc(4.5rem + var(--mde-space-2));
	font-weight: 600; color: var(--mde-heading);
}
.entry-content ol.steps > li + li { border-top: 1px solid var(--mde-border); }
.entry-content ol.steps > li::before {
	content: "Step " counter(step); position: absolute; left: 0; top: 1.05rem;
	font-family: var(--mde-font-mono); font-size: 0.8125rem; font-weight: 500; line-height: 1.5;
	letter-spacing: 0.04em; text-transform: uppercase; color: var(--mde-muted);
}
.entry-content ol.steps > li:lang(ro)::before { content: "Pasul " counter(step); }

/* ---------- 8. Tables: never scroll sideways ---------- */
.entry-content .wp-block-table { overflow: visible; max-width: 100%; }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.9688rem; line-height: 1.5; }
.entry-content .wp-block-table thead { border: 0; }
.entry-content .wp-block-table :where(th, td) {
	text-align: left; vertical-align: top; padding: 0.75rem 0.875rem;
	border: 0; border-bottom: 1px solid var(--mde-border); overflow-wrap: anywhere;
}
.entry-content .wp-block-table thead th {
	font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mde-muted);
	border-bottom: 2px solid var(--mde-rule);
}
.entry-content .wp-block-table td:first-child { font-weight: 600; color: var(--mde-heading); }
.entry-content .wp-block-table.proof td:first-child { width: 34%; }

/* Phones and narrow tablets: each row is a vertical record.
   functions.php marks simple tables with .mde-stack and copies each column header
   into data-label; roles added there keep the table semantics.
   Key/value tables without a header row (.proof, case summary): label above value. */
@container (max-width: 48rem) {
	.entry-content .wp-block-table.mde-stack thead {
		position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
	}
	/* The parent theme frames every table; stacked records keep only the row rules,
	   so their text lines up with the rest of the band. */
	.entry-content .wp-block-table:is(.mde-stack, .proof) table { border: 0; }
	.entry-content .wp-block-table.mde-stack :is(table, tbody, tr, td) { display: block; width: auto; }
	.entry-content .wp-block-table.mde-stack tr { padding-block: 0.9rem; border-bottom: 1px solid var(--mde-border); }
	.entry-content .wp-block-table.mde-stack tr:first-child { border-top: 2px solid var(--mde-rule); }
	.entry-content .wp-block-table.mde-stack td { border: 0; padding: 0; }
	.entry-content .wp-block-table.mde-stack td + td { margin-top: 0.5rem; }
	.entry-content .wp-block-table.mde-stack td[data-label]:not(:first-child)::before {
		content: attr(data-label);
		content: attr(data-label) / "";
		display: block; margin-bottom: 0.1rem;
		font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mde-muted);
	}
	.entry-content .wp-block-table.proof :is(table, tbody, tr, td) { display: block; width: auto; }
	.entry-content .wp-block-table.proof tr { padding-block: 0.75rem; border-bottom: 1px solid var(--mde-border); }
	.entry-content .wp-block-table.proof td { border: 0; padding: 0; }
	.entry-content .wp-block-table.proof td:first-child {
		width: auto; margin-bottom: 0.15rem;
		font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mde-muted);
	}
}

/* ---------- 9. Split: two columns inside a band ---------- */
.entry-content .split { display: grid; gap: var(--mde-space-4); grid-template-columns: minmax(0, 1fr); }
.entry-content .split > * { min-width: 0; }
.entry-content .split > * > * + * { margin-top: var(--mde-space-2); }
.entry-content .split .wp-block-image img { display: block; width: 100%; height: auto; border-radius: var(--mde-radius); }

/* ---------- 10. Service-page sheet: title left, content right ---------- */
.entry-content > .sheet > h2 { font-size: clamp(1.375rem, 1.15rem + 0.8cqi, 1.75rem); }
.entry-content > .sheet > h2::before {
	content: ""; display: block; width: 2rem; height: 2px; background: var(--mde-rule); margin-bottom: 0.75rem;
}

/* ---------- 11. Operator block (legal, contact) ---------- */
.operator {
	font-size: 0.9375rem; line-height: 1.6;
	border-top: 2px solid var(--mde-rule); border-bottom: 1px solid var(--mde-border);
	padding-block: var(--mde-space-2); max-width: var(--mde-measure);
}
.operator dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1.25rem; margin: 0; }
.operator dt { font-weight: 600; color: var(--mde-heading); }
.operator dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- 12. Legal pages: hero + one .doc band with plain sections ---------- */
.entry-content > .doc > section + section { margin-top: var(--mde-space-4); }
.entry-content > .doc > section > * + * { margin-top: var(--mde-space-2); }
.entry-content > .doc > section > h2 { font-size: clamp(1.25rem, 1.1rem + 0.6cqi, 1.5rem); }
.entry-content > section:not(.alignfull) + section:not(.alignfull) { margin-top: var(--mde-space-4); }
.entry-content > section:not(.alignfull) > * + * { margin-top: var(--mde-space-2); }
.entry-content > section:not(.alignfull) > h2 { font-size: clamp(1.25rem, 1.1rem + 0.6cqi, 1.5rem); }

/* ---------- 13. Contact Form 7 (loaded only on Contact and Careers) ---------- */
.wpcf7 form { max-width: 44rem; }
.wpcf7 form > p { margin: 0 0 var(--mde-space-3); max-width: none; }
.wpcf7 fieldset { border: 0; padding: 0; margin: 0 0 var(--mde-space-3); }
.wpcf7 legend,
.wpcf7 .field-label { font-weight: 600; color: var(--mde-heading); margin-bottom: var(--mde-space-1); display: block; }
.wpcf7 .hint { display: block; font-size: var(--mde-text-small); color: var(--mde-muted); margin-top: 0.25rem; }
.wpcf7 .wpcf7-list-item { display: block; margin: 0 0 0.5rem; }
.wpcf7 .wpcf7-list-item label { display: inline-flex; gap: 0.5rem; align-items: baseline; min-height: 1.75rem; }
.wpcf7 :where(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	width: 100%; box-sizing: border-box; font: inherit; color: var(--mde-text);
	background: var(--mde-white); border: 1px solid var(--mde-field-border); border-radius: var(--mde-radius);
	padding: 0.65rem 0.75rem; min-height: 3rem;
}
.wpcf7 textarea { min-height: 10rem; }
.wpcf7 select { appearance: auto; cursor: pointer; }
.wpcf7 .wpcf7-acceptance .wpcf7-list-item label { align-items: flex-start; }
.wpcf7 .wpcf7-acceptance input { margin-top: 0.3em; flex: none; }
.wpcf7 :where(input, select, textarea):focus { outline: 2px solid var(--mde-focus); outline-offset: 1px; border-color: var(--mde-navy); }
.wpcf7 .wpcf7-submit {
	font: inherit; font-weight: 600; min-height: 3rem; padding: 0.75rem 1.4rem;
	background: var(--mde-button-bg); color: var(--mde-button-text);
	border: 1px solid var(--mde-button-bg); border-radius: var(--mde-radius); cursor: pointer;
}
.wpcf7 .wpcf7-submit:hover { background: var(--mde-button-hover-bg); border-color: var(--mde-button-hover-bg); }
.wpcf7 .wpcf7-not-valid { border-color: var(--mde-error); }
.wpcf7 .wpcf7-not-valid-tip { color: var(--mde-error); font-size: var(--mde-text-small); }
.wpcf7 form .wpcf7-response-output { margin: var(--mde-space-3) 0 0; padding: var(--mde-space-2); border-radius: var(--mde-radius); }
.wpcf7 form:is(.invalid, .failed, .spam) .wpcf7-response-output { border-color: var(--mde-error); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--mde-success); }

/* ---------- 14. Wider containers ---------- */
@container (max-width: 30rem) {
	.entry-content ol.steps > li { padding-left: 0; }
	.entry-content ol.steps > li::before { position: static; display: block; margin-bottom: 0.2rem; }
	.entry-content a.btn,
	.wpcf7 .wpcf7-submit { width: 100%; }
	.operator dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.operator dd { margin-bottom: 0.5rem; }
}
@container (min-width: 48rem) {
	.entry-content .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 56rem) {
	/* Rows: name floats left (40%), everything else forms the right column */
	.entry-content .rows > .item > h3 { float: left; width: calc(40% - var(--mde-space-4) / 2); }
	.entry-content .rows > .item > :not(h3) { margin-left: calc(40% + var(--mde-space-4) / 2); }
	.entry-content .rows > .item > h3 + * { margin-top: 0; }
	.entry-content .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mde-space-5); }

	.entry-content ol.steps.is-columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mde-space-3); }
	.entry-content ol.steps.is-columns > li { display: block; border-top: 2px solid var(--mde-rule); padding: var(--mde-space-2) 0 0; }
	.entry-content ol.steps.is-columns > li + li { border-top: 2px solid var(--mde-rule); }
	.entry-content ol.steps.is-columns > li::before { position: static; display: block; margin-bottom: 0.3rem; }

	/* Sheet: explicit two-column structure, h2 | .section-body */
	.entry-content > .sheet {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		column-gap: var(--mde-space-4); align-items: start;
	}
	.entry-content > .sheet > .section-body { margin-top: 0; }
}

/* ---------- 15. Header dropdown (Services): light panel, one line per service ---------- */
html [data-header] .ct-header [data-id="menu"] .sub-menu {
	--dropdown-divider: none;
	width: max-content; min-width: 16rem;
	padding-block: 0.4rem;
	background: var(--mde-white);
	border: 1px solid var(--mde-line); border-top: 2px solid var(--mde-navy);
	border-radius: 0 0 var(--mde-radius) var(--mde-radius);
	box-shadow: 0 12px 24px rgba(15, 23, 34, 0.08);
}
html [data-header] .ct-header [data-id="menu"] .sub-menu .ct-menu-link {
	--theme-link-initial-color: var(--mde-navy);
	--theme-link-hover-color: var(--mde-copper-text);
	--theme-link-active-color: var(--mde-copper-text);
	--theme-font-size: 0.875rem;
	--theme-font-weight: 500;
	padding: 0.55rem 1.15rem;
	white-space: nowrap;
}
html [data-header] .ct-header [data-id="menu"] .sub-menu .ct-menu-link:hover { background: var(--mde-neutral); }
html [data-header] .ct-header [data-id="menu"] .sub-menu > li:last-child {
	margin-top: 0.4rem; border-top: 1px solid var(--mde-line); padding-top: 0.4rem;
}
html [data-header] .ct-header [data-id="menu"] .sub-menu > li:last-child .ct-menu-link { --theme-font-weight: 600; }
/* Mobile panel: services sit one step in, smaller than the top-level items */
html [data-id="mobile-menu"] .sub-menu {
	margin: 0.15rem 0 0.6rem; padding-left: 0.9rem; border-left: 2px solid var(--mde-line);
}
html [data-id="mobile-menu"] .sub-menu .ct-menu-link {
	--theme-font-size: 1rem;
	--theme-font-weight: 500;
	padding-block: 0.4rem;
}
html [data-id="mobile-menu"] .sub-menu > li:last-child .ct-menu-link { --theme-font-weight: 600; }

/* ---------- 16. Enquiry dialog (after the form is sent; script in functions.php, section 11) ---------- */
.mde-dialog {
	box-sizing: border-box; width: min(30rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
	margin: auto; padding: 0; overflow: auto;
	font-family: var(--mde-font-sans); color: var(--mde-text); background: var(--mde-white);
	border: 1px solid var(--mde-line); border-top: 4px solid var(--mde-navy); border-radius: var(--mde-radius);
	box-shadow: 0 24px 48px rgba(15, 23, 34, 0.18);
}
.mde-dialog::backdrop { background: rgba(15, 23, 34, 0.55); }
.mde-dialog__body { padding: 1.75rem 1.5rem 1.5rem; }
.mde-dialog__eyebrow {
	margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--mde-copper-text);
}
.mde-dialog__eyebrow::before {
	content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.5rem;
	border-radius: 50%; background: var(--mde-success); vertical-align: 0.05em;
}
.mde-dialog__title { margin: 0 0 0.6rem; font-size: 1.5rem; line-height: 1.25; color: var(--mde-navy); }
.mde-dialog__text { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.55; }
.mde-dialog__meta {
	margin: 0 0 1.4rem; padding: 0.8rem 1rem; font-size: 0.9375rem; line-height: 1.45;
	background: var(--mde-neutral); border-left: 3px solid var(--mde-copper);
}
.mde-dialog__meta[hidden] { display: none; }
.mde-dialog__meta dt { font-size: 0.8125rem; color: var(--mde-muted); }
.mde-dialog__meta dd { margin: 0.1rem 0 0; overflow-wrap: anywhere; color: var(--mde-heading); }
.mde-dialog__meta dd + dt { margin-top: 0.6rem; }
.mde-dialog__meta dd.is-code { font-family: var(--mde-font-mono); font-size: 0.875rem; }
.mde-dialog__close {
	display: block; width: 100%; min-height: 3rem; padding: 0.75rem 1.4rem;
	font: inherit; font-weight: 600; cursor: pointer;
	background: var(--mde-button-bg); color: var(--mde-button-text);
	border: 1px solid var(--mde-button-bg); border-radius: var(--mde-radius);
}
.mde-dialog__close:hover { background: var(--mde-button-hover-bg); border-color: var(--mde-button-hover-bg); color: var(--mde-button-hover-text); }
.mde-dialog__close:focus-visible { outline: 2px solid var(--mde-focus); outline-offset: 2px; }
.mde-dialog[data-kind="error"] { border-top-color: var(--mde-error); }
.mde-dialog[data-kind="error"] .mde-dialog__eyebrow { color: var(--mde-error); }
.mde-dialog[data-kind="error"] .mde-dialog__eyebrow::before { background: var(--mde-error); }
.mde-dialog[data-kind="error"] .mde-dialog__meta { border-left-color: var(--mde-error); }
@media (min-width: 40rem) {
	.mde-dialog__body { padding: 2rem 2rem 1.75rem; }
	.mde-dialog__close { display: inline-block; width: auto; }
}

/* ---------- 17. Sticky header: stays on top, compact after scrolling (functions.php, section 12) ---------- */
#header.ct-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; }
#header [data-row] { transition: box-shadow 0.2s ease; }
#header [data-row] > div,
#header .site-logo-container { transition: min-height 0.2s ease, height 0.2s ease; }
#header.is-compact [data-row] {
	--shrink-height: 60px;
	box-shadow: 0 1px 0 var(--mde-line), 0 6px 16px rgba(15, 23, 34, 0.06);
}
#header.is-compact .site-logo-container { --logo-shrink-height: 34px; }
@media (max-width: 999.98px) {
	#header.is-compact [data-row] { --shrink-height: 56px; }
	#header.is-compact .site-logo-container { --logo-shrink-height: 32px; }
}
@media (max-width: 600px) {
	/* The admin bar scrolls away on phones, so the header sticks to the very top. */
	#header.ct-header { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
	#header [data-row], #header [data-row] > div, #header .site-logo-container { transition: none; }
}
/* Anchor targets are not hidden under the sticky header. */
html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 72px); }
