/*
Theme Name: Midel
Theme URI: https://midel-photonics.de/
Author: Midel Photonics
Description: Midel's presentation layer. Owns templates, block renderers and front-end assets. The content model lives in the midel-content plugin so it survives a theme change.
Version: 0.1.0-proof
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: midel
*/

/*
 * Scope note: this is proof-stage chrome, not Midel's design system.
 * prototypeV3/assets/advanced.css is the approved visual reference and gets
 * ported in the block system phase (docs/08 §14 Phase 3). docs/08 §17 rules out a
 * new CSS or design pass during content migration, so nothing here should be
 * treated as a design decision.
 *
 * What it does need to get right, because docs/08 §15.3 gates on it: exactly one
 * <main>, a working skip link and a focus outline that is visible and not
 * clipped.
 */

/*
 * This file loads AFTER advanced.css so it can override the design system. That makes
 * it dangerous: anything declared here that advanced.css also declares wins, whether
 * or not that was intended.
 *
 * It used to carry a `*{box-sizing}` reset and a `body` rule with
 * `font-family: system-ui`. advanced.css already resets the same properties, and its
 * first body rule asks for Manrope — so this file was silently replacing the site's
 * typeface with the system font on every page. Both are gone.
 *
 * Rule of thumb for anything added below: if advanced.css has an opinion about the
 * property, this file must not.
 */

:root {
	--midel-ink: #14181d;
	--midel-muted: #5a6472;
	--midel-line: #dfe4ea;
	--midel-accent: #00a3b4;
	--midel-cloud: #f5f7f9;
	--midel-measure: 74ch;

	/*
	 * Vertical section rhythm — the single dial for how much air sits above and below every band.
	 *
	 * advanced.css ships `section{padding:clamp(56px,8vw,96px) 0}`. Because two stacked sections each
	 * pad both sides, that put ~192px between content on a wide screen — generous even for a spacious
	 * marketing site, and the main reason the pages read as long. This tightens it to a modern
	 * 8-point rhythm: 64px per side on the desktop (≈128px at a seam), easing to 40px on the phone.
	 * Heroes keep their own, larger padding (advanced.css .hero--sub / .minihero), so the top of a
	 * page still opens with presence — only the content bands below it move closer together.
	 *
	 * One dial: change the clamp here and the whole site follows. Roomier = raise the 64px cap
	 * (72–80px); tighter = lower it (52–56px).
	 */
	--section-space: clamp(40px, 5.5vw, 64px);
}

/*
 * Same specificity as advanced.css `section{}` (both a single type selector); style.css loads last,
 * so this wins without !important. Only the block axis is set, so the horizontal padding:0 that
 * advanced.css pairs with it (the .wrap owns the gutter) is left untouched.
 */
section {
	padding-block: var(--section-space);
}

/* Skip link: off screen until focused, then unmistakably on screen. */
.midel-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
}

.midel-skip:focus {
	left: 0.5rem;
	top: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: var(--midel-ink);
	color: #fff;
	text-decoration: none;
}

:focus-visible {
	outline: 3px solid var(--midel-accent);
	outline-offset: 2px;
}

.midel-wrap {
	width: min(100% - 2rem, 68rem);
	margin-inline: auto;
}

.midel-header,
.midel-footer {
	border-bottom: 1px solid var(--midel-line);
	padding-block: 1rem;
}

.midel-footer {
	border-bottom: 0;
	border-top: 1px solid var(--midel-line);
	margin-top: 3rem;
	color: var(--midel-muted);
	font-size: 0.875rem;
}

.midel-header__brand {
	font-weight: 700;
	text-decoration: none;
	color: inherit;
}

.midel-langs {
	display: flex;
	gap: 0.75rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 0.875rem;
}

.midel-langs [aria-current="true"] {
	font-weight: 700;
}

.midel-entry__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
	margin-block: 1.5rem 0.5rem;
}

.midel-entry__facts {
	max-width: var(--midel-measure);
	color: var(--midel-muted);
}

/* --- midel/proof-panel ------------------------------------------------- */

.midel-proof-panel {
	margin-block: 2rem;
	padding: 1.5rem;
	border: 1px solid var(--midel-line);
	border-radius: 4px;
	background: var(--midel-cloud);
}

.midel-proof-panel--accent {
	border-left: 4px solid var(--midel-accent);
}

.midel-proof-panel__heading {
	margin-block: 0 0.5rem;
	font-size: 1.375rem;
	line-height: 1.25;
}

.midel-proof-panel__body {
	max-width: var(--midel-measure);
}

.midel-proof-panel__body > :first-child {
	margin-top: 0;
}

.midel-proof-panel__body > :last-child {
	margin-bottom: 0;
}

.midel-proof-panel__placeholder,
.midel-proof-panel__meta {
	margin: 0.5rem 0 0;
	color: var(--midel-muted);
	font-family: ui-monospace, "SFMono-Regular", monospace;
	font-size: 0.75rem;
}

.midel-relations {
	margin-block: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--midel-line);
}

.midel-relations__title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--midel-muted);
}

.midel-proposal-notice {
	padding: 0.75rem 1rem;
	background: #fff6d9;
	border-bottom: 1px solid #e3c766;
	font-size: 0.875rem;
}

/*
 * Editor-only status marker in the navigation and footer.
 *
 * A visitor never sees this: Chrome::status_note() returns an empty string unless the
 * viewer can edit. It exists so that a site whose content is still under review has a
 * usable menu — otherwise nothing is published, the menu is empty, and the person meant to
 * approve the content cannot reach it (docs/09 §15).
 *
 * Deliberately loud. It is a scaffold, and a scaffold that blends in is a scaffold that
 * ships.
 */
/*
 * Per-instance split-visual column measures, desktop only.
 *
 * prototypeV3 inlines grid-template-columns on some .tech-grid / .grid2 bands (1fr 1fr on the
 * ring-core and gaussian, 1fr 240px on the top-hat). The block cannot inline them: an inline
 * declaration would outrank advanced.css's `@media(max-width:820px){grid-template-columns:1fr}`
 * collapse and keep two unreadable columns on a phone. It carries the ratio as the --sv-cols /
 * --sv-gap custom properties instead, and this rule — scoped to desktop, so the collapse below
 * 821px still wins — reads them. This file loads after advanced.css, so the .sv-cols class
 * (specificity 0,2,0) overrides advanced.css's .tech-grid (0,1,0) without !important.
 */
@media (min-width: 821px) {
	.tech-grid.sv-cols,
	.grid2.sv-cols {
		grid-template-columns: var(--sv-cols);
		gap: var(--sv-gap, 40px);
	}
}

.midel-wip {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.05em 0.4em;
	border-radius: 3px;
	background: #fff6d9;
	color: #6b4b00;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: 0.1em;
}

/*
 * Mobile menu polish (WordPress-only — prototypeV3 assembles its header in chrome.js, so this is
 * new ground for the WP build). Scoped to the drawer breakpoint; desktop is untouched.
 */

/*
 * The .mobile-actions row lives inside the nav <ul> so it rides in the mobile drawer, but
 * advanced.css only gives it a display in its own max-width:1080px block — so above that it would
 * show as a stray item in the horizontal nav, duplicating the desktop .right switcher and CTA.
 * Hide it on desktop; the drawer breakpoint below (and advanced.css) turn it back on.
 */
@media (min-width: 1081px) {
	.mobile-actions {
		display: none;
	}
}

@media (max-width: 1080px) {
	/*
	 * Home hero photo: swap in a lighter 1024 px variant on phones. On mobile the photo is only a
	 * faded background behind the text, so ~84 KB does the same job as the full 321 KB image and cuts
	 * the LCP download markedly. Only the image is overridden; advanced.css keeps the size/position
	 * geometry. The preload in header.php fetches this same file for the matching viewport.
	 */
	.hero--photo::before {
		background-image: url("assets/images/hero/logo-mirror-mobile.webp");
	}

	/* In-drawer language switch: both languages are real links, the current one bold. */
	.mobile-actions .lang a {
		color: inherit;
		text-decoration: none;
	}

	.mobile-actions .lang a:hover,
	.mobile-actions .lang a:focus-visible {
		text-decoration: underline;
	}

	.mobile-actions .lang .flag {
		vertical-align: -1px;
		margin-right: 5px;
		border-radius: 2px;
	}

	/*
	 * Subtle structure for the collapsed drawer. It used to be a flat white list whose section
	 * icons appeared only once a row was expanded. A small brand-cyan marker per top-level row,
	 * with the label left-aligned and the chevron pushed right, makes the closed menu read as a
	 * structured menu. The .mobile-actions row (switcher + CTA) is excluded.
	 */
	.nav .links > li:not(.mobile-actions) > a {
		justify-content: flex-start;
		gap: 12px;
	}

	.nav .links > li:not(.mobile-actions) > a::before {
		content: "";
		flex: none;
		width: 7px;
		height: 7px;
		border-radius: 2px;
		background: var(--cyanmid, #00a3b4);
		opacity: 0.85;
	}

	.nav .links > li:not(.mobile-actions) > a .car {
		margin-left: auto;
	}

	.nav .links > li:not(.mobile-actions).open > a::before {
		background: var(--cobalt, #1b3f6a);
	}

	.nav .links > li:not(.mobile-actions):active > a {
		background: var(--cloud, #f5f7f9);
	}
}

/*
 * Contact Form 7 — the consent row on the contact page (midel/contact-form → CF7).
 * advanced.css:826 makes every `.field label` an uppercase/bold field caption; the
 * consent sentence is prose, not a caption, so this one row opts out. And
 * advanced.css:829 sets `.field input{width:100%}` for the text/select/textarea cells,
 * which would stretch the acceptance checkbox across the row — so the checkbox is
 * pulled back to its own size and floated beside the text.
 */
.form .field.is-consent label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--muted, #667085);
}

.form .field.is-consent input[type="checkbox"] {
	width: auto;
	flex: none;
	margin-top: 3px;
}

/*
 * The submit row sits outside a `.field` on purpose. CF7's [submit] is an
 * `<input type="submit">`, and advanced.css:828 (`.field input{background:#fff;
 * border:1px…; width:100%}`) would repaint the CTA as a full-width white text box,
 * beating `.btn-cta`'s fill on specificity. prototypeV3 dodged this by using a
 * `<button>`, which `.field input` never matches; CF7 can't emit a button, so the
 * control leaves the field grid-cell here and keeps its `.btn.btn-cta` styling.
 */
.form .form-actions {
	grid-column: 1 / -1;
	margin-top: 8px;
}

/* --- Legal pages (Impressum / Datenschutzerklärung) --------------------
 *
 * The body is plain core blocks (headings, paragraphs, lists) so it stays
 * editable in Gutenberg. advanced.css resets every element margin to 0, and this
 * classic theme carries no block-layout spacing, so without the rules below the
 * copy renders as one dense wall of text. `.legal` restores a comfortable
 * long-form reading rhythm and measure, using the site's own tokens so it reads
 * as part of the site rather than a stock WordPress page. The dark title band
 * above it is midel/minihero, the same block every other sub-page uses.
 */
.legal {
	width: min(100% - 3rem, 52rem);
	margin-inline: auto;
	padding-block: clamp(48px, 7vw, 88px);
	color: var(--deep, #0d1b2e);
}

.legal > * + * {
	margin-top: 1.15rem;
}

.legal h2 {
	margin-top: 2.6rem;
	margin-bottom: 0.35rem;
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--deep, #0d1b2e);
}

.legal > h2:first-child {
	margin-top: 0;
}

.legal h3 {
	margin-top: 1.7rem;
	font-size: 17px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--deep, #0d1b2e);
}

.legal p,
.legal li {
	line-height: 1.72;
	color: #26333f;
}

.legal p {
	max-width: 68ch;
}

.legal a {
	color: var(--cyanmid, #009dad);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.legal a:hover {
	color: var(--cobalt, #2a5898);
}

.legal ul {
	margin-left: 1.35rem;
	max-width: 68ch;
}

.legal li {
	margin-top: 0.45rem;
	padding-left: 0.2rem;
	list-style: disc;
}

.legal li::marker {
	color: var(--cyanmid, #009dad);
}

.legal strong {
	font-weight: 700;
	color: var(--deep, #0d1b2e);
}

/* The closing "Stand: …" line and the EN translation note read as fine print. */
.legal em {
	color: var(--muted, #6b7a8d);
}

/* --- FAQ answers (midel/disclosure-list reference mode + midel/faq-index) ------
 *
 * A central FAQ answer is formatted WYSIWYG — bold, links, sub/superscript, a cyan
 * highlight, images and lists — so it renders inside a <div class="faq-answer">
 * rather than the single <p> advanced.css styles for an inline answer. These rules
 * give that container the same reading measure and keep an image or list inside an
 * accordion tidy. Global on purpose: the reference FAQ section reuses them on product
 * pages, which never load the FAQ page's faq.css. advanced.css still styles the inner
 * `.faq p`, so answer paragraphs keep their existing rhythm; these only add what a
 * plain <p> answer never had.
 */
.faq-answer {
	max-width: 74ch;
}

.faq-answer > :first-child {
	margin-top: 0;
}

.faq-answer > * + * {
	margin-top: 0.8em;
}

.faq-answer img {
	max-width: 100%;
	height: auto;
	border-radius: var(--r, 10px);
	margin-block: 6px;
}

.faq-answer ul,
.faq-answer ol {
	margin-left: 1.3rem;
	max-width: 74ch;
}

.faq-answer li {
	margin-top: 0.35rem;
	list-style: disc;
}

.faq-answer ol li {
	list-style: decimal;
}

.faq-answer li::marker {
	color: var(--cyanmid, #009dad);
}

/*
 * The onward "Learn more" link under an answer, and the "See all questions" link
 * under a reference FAQ section. `.arrow` is prototypeV3's own cyan link style.
 */
.faq-more {
	margin-top: 0.9em;
}

.faq-index-link {
	margin-top: 18px;
	max-width: 820px; /* the advanced.css .faq measure, so the link aligns with the list */
}

/*
 * The brand highlight — the one colour the FAQ answer WYSIWYG can apply, via the
 * "Highlight (cyan)" style in Fields::wysiwyg_toolbars(). A class, never a free colour
 * picker, so a formatted answer stays on the design token. --cyanmid is the on-light
 * cyan; FAQ answers sit on white/cloud section backgrounds.
 */
.hl-cyan {
	color: var(--cyanmid, #009dad);
	font-weight: 700;
}

/* --- FAQ accordion chrome (reference section + FAQ page) ----------------------
 *
 * prototypeV3's .faq is a thin underline list with a small +/– glyph — legible but
 * flat, and the toggle is easy to miss. This upgrades it to separated cards with a
 * clear rotating chevron and a highlighted open state. David asked for this pass
 * explicitly (barely-visible toggle, weak separation). It loads after advanced.css so
 * it wins without !important, and it targets .faq, which only the two FAQ surfaces
 * use, so nothing else is touched. Single-open is done natively with <details name>
 * in the renderers; this only styles it.
 */
.faq details {
	border: 1px solid var(--pale, #e8f0f8);
	border-radius: 12px;
	background: #fff;
	padding: 0; /* padding moves onto the summary and the answer */
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.faq details + details {
	margin-top: 12px;
}

.faq details:hover {
	border-color: var(--mist, #c2d9ef);
}

.faq summary {
	padding: 15px 18px;
	gap: 16px;
	border-radius: 12px;
}

.faq summary:hover {
	color: var(--cyanmid, #009dad);
}

/* Replace the +/– text glyph with a rotating chevron. */
.faq summary::after,
.faq details[open] summary::after {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-right: 2.5px solid var(--cyanmid, #009dad);
	border-bottom: 2.5px solid var(--cyanmid, #009dad);
	border-radius: 0 0 2px 0;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.faq details[open] summary::after {
	transform: rotate(-135deg);
}

.faq details[open] {
	border-color: var(--cyanmid, #009dad);
	box-shadow: 0 6px 22px -14px rgba(13, 27, 46, 0.35);
}

/* Answer padding inside the card — both the inline <p> and the rich .faq-answer. */
.faq details > p,
.faq .faq-answer {
	padding: 0 18px 18px;
}

.faq details > p {
	margin-top: 0;
}

/* Tool pictograms in the mega menu: centre and size the inline SVG on the dark .th-beam tile. */
.megacol a.item .th.th-beam{display:flex;align-items:center;justify-content:center}
.megacol a.item .th.th-beam svg{width:30px;height:30px;display:block}

/*
 * Swipe rails — one-row card bands that scroll instead of wrapping.
 *
 * Two modes, chosen by the block via data-midel-rail:
 *   "1"      — always a rail. midel/related-usecases (scope: related) and midel/entity-index (a
 *              curated selection), on product and application pages.
 *   "mobile" — a rail only on phones (≤640px); a normal grid / stack above. The home page's
 *              application band (midel/entity-carousel) and use-case band (midel/usecase-highlights):
 *              a stacked column reads long on a phone, but the wide desktop layout is still wanted, so
 *              only the phone collapses to a swipe. entity-carousel's own view.js is gated to the
 *              desktop so it does not also build its arrows-and-dots carousel over this on a phone.
 *
 * The full-grid hubs (products, applications, use cases) carry no attribute and stay grids.
 *
 * style.css loads after advanced.css, so overriding `display` needs no !important. rails.js adds the
 * edge fade (both modes) and the prev/next arrows (mode "1" only — a phone swipes).
 */

/* Scrollbar hidden in either mode: on the phone you swipe, on the desktop you click the arrows. */
[data-midel-rail] {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

[data-midel-rail]::-webkit-scrollbar {
	display: none;
}

/* Mode "1": a rail at every width. */
[data-midel-rail="1"] {
	display: flex;
	flex-wrap: nowrap;
	gap: 20px; /* matches advanced.css .appgrid / .grid2 gap */
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	/* Room for the card's hover lift (-3px) and shadow, which overflow:hidden would clip. */
	padding: 6px 0 16px;
}

/* Each card is a fixed-ish slice: ~1 per view on a phone, ~3 on a wide screen, the rest scroll in. */
[data-midel-rail="1"] > * {
	flex: 0 0 clamp(260px, 30%, 340px);
	scroll-snap-align: start;
}

/* Mode "mobile": the same rail, but only on phones — above 640px the block keeps its own layout. */
@media (max-width: 640px) {
	[data-midel-rail="mobile"] {
		display: flex;
		flex-wrap: nowrap;
		gap: 20px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding: 6px 0 16px;
	}

	/* One prominent card at a time with a peek of the next, so the swipe is obvious. */
	[data-midel-rail="mobile"] > * {
		flex: 0 0 clamp(260px, 82%, 340px);
		scroll-snap-align: start;
	}
}

/* Grab affordance once the row actually scrolls; rails.js paints the active drag. */
[data-midel-rail].is-scrollable {
	cursor: grab;
}

[data-midel-rail].is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

/*
 * The edge fade, on only when there is hidden content and only on the side that hides it. rails.js
 * toggles is-scrollable / at-start / at-end; a row that already fits shows no fade at all.
 */
[data-midel-rail].is-scrollable:not(.at-start):not(.at-end) {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}

[data-midel-rail].is-scrollable.at-start:not(.at-end) {
	-webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
}

[data-midel-rail].is-scrollable.at-end:not(.at-start) {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 100%);
}

/*
 * Prev / next arrows, built by rails.js and reusing the home carousel's .appcar-btn look.
 *
 * Mouse pointers only, and only once the row overflows: on a phone you swipe, so the arrows would be
 * dead weight. `(hover:hover) and (pointer:fine)` is the "has a real mouse" query, and rails.js adds
 * .is-active only when there is something to page to. Below both conditions the row is pure swipe.
 */
.rail-nav {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 18px;
}

@media (hover: hover) and (pointer: fine) {
	.rail-nav.is-active {
		display: flex;
	}
}

/* At an end the arrow that points off the list is spent; dim it and drop the hover fill. */
.rail-nav .appcar-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.rail-nav .appcar-btn:disabled:hover {
	background: #fff;
	color: var(--cobalt);
	border-color: var(--pale);
}

/*
 * Regional-partner cards: the contact lines.
 *
 * advanced.css styles `.partner a` for the card's single closing action — cyan, bold, and
 * `display:inline-block;margin-top:12px`. The phone and mail links sit inside the quiet
 * `.person` line instead, where that spacing would push each of them onto its own gap. This
 * only undoes the inheritance; the colour stays, because a link that does not look like one
 * is worse than a tight one.
 */
.partner .pr-contact {
	margin-top: 8px;
	line-height: 1.55;
}

.partner .pr-contact a {
	display: inline;
	margin-top: 0;
	font-size: inherit;
	font-weight: 600;
}

/*
 * Team cards: the mail and LinkedIn links.
 *
 * `page-local.css` styles `.abp-person` as a centred white card with a name in `b` and a role in
 * `span`. The links are a third line in the same rhythm — the same size as the role, but cyan and
 * bold enough to read as links, side by side rather than stacked so a card with both stays two
 * lines shorter.
 */
.abp-person .abp-links {
	display: flex;
	gap: 14px;
	justify-content: center;
	margin-top: 10px;
}

.abp-person .abp-links a {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--cyanmid);
	text-decoration: none;
}

.abp-person .abp-links a:hover {
	text-decoration: underline;
}

/*
 * Feature-card image tile (the integration diagrams).
 *
 * feature-cards renders a card image inside `.card-figure`. Without a fixed frame each card grows
 * to its diagram's native height — the integration diagrams are portrait and produced ~800px
 * cards. This is a dark, fixed-height panel the image is contained inside: cards in a row stay
 * uniform, and the white arrows and labels baked into the diagrams read against the dark ground
 * (var(--deep)), the same choice the evidence block's `.ev-img` makes.
 */
.card .card-figure {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 240px;
	padding: 18px;
	margin-bottom: 16px;
	background: var(--deep);
	border-radius: 12px;
}

.card .card-figure img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/*
 * Product-compare decision cards.
 *
 * advanced.css `.grid2 .card{padding:0;gap:0;overflow:hidden}` (line 667) is written for the
 * image tiles whose content sits in a padded `.body`. The product-compare cards hold their
 * content (chips, heading, text, bullets, link) directly, so that rule leaves everything flush
 * against the border. Restore the base `.card` values for this block only; the `compare-grid`
 * class keeps it off the image tiles. `.grid3 .card` (three-way compare) has no padding:0 rule,
 * but scoping to both is harmless and future-proofs a third card.
 */
.compare-grid .card {
	padding: 24px;
	gap: 10px;
	overflow: visible;
}

/* Mega layout cols-3: two labelled sub-columns + the promo box (Resources: Use cases & FAQ | Tools). */
.mega .inner.cols-3{grid-template-columns:1fr 1fr 300px;gap:40px;padding:28px 0}
@media (max-width:900px){.nav .links>li .mega .inner.cols-3{grid-template-columns:1fr}}

/*
 * Prose figure on mobile: give the graphic more width.
 *
 * The prose block frames its figure with an inline padding:22px 24px 18px, and the figure sits
 * inside the section .wrap (24px side gutter). On a phone that stacks to ~48px of dead space each
 * side around a diagram that is already the narrowest thing on the page. This trims the figure's
 * own side padding and pulls it halfway into the wrap gutter (net 12px from the screen edge, no
 * overflow), so the diagram — an SVG, so it stays crisp — reads clearly. !important because the
 * base padding is an inline style. Desktop is untouched.
 */
@media (max-width: 560px) {
	.wrap figure[data-midel-field="image"] {
		padding-left: 12px !important;
		padding-right: 12px !important;
		margin-left: -12px !important;
		margin-right: -12px !important;
	}
}

/*
 * Announcement bar: rotating messages + dismiss button (nav.js).
 *
 * advanced.css `.annbar` (a centred flex row) predates the rotation — it assumed one line. These
 * three additions carry the rebuild's version: only the active message shows (nav.js swaps the
 * class; without JS the first stays visible, which is correct); the dismiss control is a real
 * <button> for accessibility, reset to look like the prototype's bare glyph; and the row wraps so
 * a longer line does not overflow a phone.
 */
.annbar { flex-wrap: wrap; }
.annbar .ann-msg { display: none; }
.annbar .ann-msg.is-active { display: inline; }
.annbar .x { background: none; border: 0; font: inherit; line-height: 1; font-size: 16px; }
.annbar .ann-accent { color: var(--yellow); font-weight: 700; }

/*
 * Footer now has four link columns (Products, Applications, Company, Resources) beside the brand
 * block. advanced.css sizes .ftop for three (1.5fr 1fr 1fr 1.3fr = brand + 3). Widen to brand + 4
 * on desktop only; the ≤820px (two-column) and ≤560px (one-column) collapses in advanced.css stay
 * in force below that.
 */
@media (min-width: 821px) {
	footer.site .ftop {
		grid-template-columns: 1.4fr repeat(4, 1fr);
	}
}


/* Product-page tool teaser (calc-teaser) with a preview image: taller, with the tool preview sitting
   behind the brand gradient so the calculator stands out. The gradient stays and complements the image;
   the base .calc gradient is the fallback, .calc-bg is the image, ::after is the blue wash for legibility. */
.calc.has-image{position:relative;overflow:hidden;min-height:220px;background:var(--grad)}
/* The preview sits in the RIGHT half and fades leftwards into the brand gradient (mask), so its
   landscape aspect ratio isn't stretched and the left stays clean gradient for the title/text. */
.calc.has-image .calc-bg{position:absolute;top:0;right:0;bottom:0;left:40%;z-index:0;
  background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%)}
/* the inviting mid-blue gradient laid transparently over everything, tying the image into the card */
.calc.has-image::after{content:"";position:absolute;inset:0;z-index:0;background:var(--grad);opacity:.4}
.calc.has-image>*{position:relative;z-index:1}