/* Digi-Market theme styles.

   The header, and now the services mega menu, are the design's own markup with
   the design's own inline styles. Nothing here restyles them — this file only
   controls when the panel is visible, plus the mobile drawer, which the export
   did not include. */

/* ============ services mega menu ============ */
.dm-mega-host {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	display: flex;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
	z-index: 95;
}
.dm-mega-host.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}
.dm-mega-host > div { pointer-events: auto; }

@media (max-width: 1024px) {
	.dm-mega-host { display: none; }
}

/* ============ mobile drawer ============ */
.dm-drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; }
.dm-drawer.is-open { visibility: visible; }
.dm-drawer-scrim {
	position: absolute; inset: 0;
	background: rgba(6, 14, 34, .55);
	opacity: 0; transition: opacity .35s var(--ease);
}
.dm-drawer.is-open .dm-drawer-scrim { opacity: 1; }
.dm-drawer-panel {
	position: absolute; inset-block: 0; inset-inline-end: 0;
	width: min(340px, 86vw);
	background: var(--g-dark);
	padding: 1.5rem;
	display: flex; flex-direction: column; gap: .2rem;
	transform: translateX(-100%);
	transition: transform .4s var(--ease);
	overflow-y: auto;
}
.dm-drawer.is-open .dm-drawer-panel { transform: none; }
.dm-drawer-panel a {
	color: var(--c-on-dark); text-decoration: none;
	font-size: 1.05rem; font-weight: var(--fw-bold);
	padding: .85rem .4rem;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dm-drawer-close {
	align-self: flex-start; background: none; border: 0;
	color: #fff; cursor: pointer; margin-bottom: .5rem; padding: .2rem;
}

/* ============ mobile drawer (design markup, shown on demand) ============ */
.dm-drawer-host { display: none; }
.dm-drawer-host.is-open { display: block; }

/* ============ footer reveal ============ */
/* The design's scroll-reveal footer is `position: sticky; bottom: 0; z-index: -1`
   so the page slides over it. That negative z-index also paints it behind its own
   wrapper, so the wrapper swallowed every click. Claude Design's own fix traded the
   effect away (relative / z-index 1) to make the links reachable — this restores
   the effect and fixes the clicks properly, by letting pointer events through the
   wrapper instead. */
footer.dm-footer-reveal {
	position: sticky !important;
	bottom: 0 !important;
	z-index: -1 !important;
}
.sc-host:has(> footer.dm-footer-reveal) { pointer-events: none; }
/* Only the wrapper itself must stay transparent — it is the box that overlays
   the page. Everything it contains takes clicks again: the footer, the floating
   call/WhatsApp buttons, and the contact form, which lives in this same wrapper
   and was silently unclickable because the earlier fix named only the footer. */
.sc-host:has(> footer.dm-footer-reveal) > * { pointer-events: auto; }
footer.dm-footer-reveal,
.sc-host:has(> footer.dm-footer-reveal) .dm-fab { pointer-events: auto; }

/* ============ founder block: breathing room under the quote ============ */
/* The stats row (2022 / +100 / 5.0) sits directly under the quote card with
   only its own 0.35rem padding, so the two read as one block. */
.dm-stats { margin-block-start: 1.75rem; }

@media (max-width: 720px) {
	.dm-stats { margin-block-start: 1.25rem; }
}

/* ---- contact form feedback ----
   The design's form had no error or success state because it never submitted;
   these are the two the endpoint can actually produce. */
.dm-form-msg { margin: .8rem 0 0; font-size: .92rem; line-height: 1.6; }
.dm-form-msg[hidden] { display: none; }
.dm-form-msg.is-err { color: #FFB4A2; }
.dm-form-msg.is-ok { color: #7EE2B8; }