/* ==========================================================================
   Minimal reset + page shell (nav, footer) for the static Malizia Sign site.
   Loaded before malizia-2026.css, which supplies the design-system tokens
   and all .ms-* component styles reused from the WordPress build.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: var(--ms-paper);
	color: var(--ms-ink);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0; }
ul { margin: 0; }
button { font: inherit; cursor: pointer; }

/* ---- Nav ---- */
.ms-nav {
	position: sticky; top: 0; z-index: 500;
	background: color-mix(in srgb, var(--ms-paper) 85%, transparent);
	backdrop-filter: saturate(180%) blur(18px);
	-webkit-backdrop-filter: saturate(180%) blur(18px);
	border-bottom: 1px solid var(--ms-line);
}
.ms-nav-inner {
	display: flex; align-items: center; justify-content: space-between;
	height: 68px;
}
.ms-nav-logo img { height: 30px; width: auto; }
.ms-nav-links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.ms-nav-links a {
	text-decoration: none; font-size: 0.875rem; font-weight: 600;
	color: var(--ms-ink-soft); letter-spacing: 0.01em;
	position: relative; padding: 4px 0;
}
.ms-nav-links a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
	background: var(--ms-accent); transform: scaleX(0); transform-origin: left;
	transition: transform 0.3s var(--ms-ease);
}
.ms-nav-links a:hover::after { transform: scaleX(1); }
.ms-nav-links a.is-active { color: var(--ms-accent); }
@media (max-width: 900px) {
	.ms-nav-links { display: none; }
}

/* ---- Footer ---- */
.ms-footer { background: var(--ms-paper); border-top: 1px solid var(--ms-line); padding: 72px 0 32px; }
.ms-footer-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; }
.ms-footer-brand img { height: 28px; margin-bottom: 18px; }
.ms-footer-brand p { color: var(--ms-steel); font-size: 0.9rem; max-width: 32ch; }
.ms-footer-social { display: flex; gap: 12px; margin-top: 24px; }
.ms-footer-social a {
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ms-line-strong);
	display: flex; align-items: center; justify-content: center; color: var(--ms-ink-soft);
	transition: all 0.3s var(--ms-ease); text-decoration: none;
}
.ms-footer-social a:hover { background: var(--ms-accent); border-color: var(--ms-accent); color: #17110a; }
.ms-footer-social svg { width: 17px; height: 17px; }
.ms-footer-col h4 { font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ms-steel-dim); margin-bottom: 20px; font-weight: 700; }
.ms-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ms-footer-col a { text-decoration: none; color: var(--ms-ink-soft); font-size: 0.9375rem; }
.ms-footer-col a:hover { color: var(--ms-accent); }
.ms-footer-bottom {
	border-top: 1px solid var(--ms-line); padding-top: 28px;
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
	font-size: 0.8125rem; color: var(--ms-steel-dim);
}
@media (max-width: 900px) {
	.ms-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.ms-footer-top { grid-template-columns: 1fr; gap: 32px; }
	.ms-footer-bottom { flex-direction: column; align-items: flex-start; }
}