/*
 * Nazenprint base layer — loaded on every page.
 * Tokens (--nz-*) are printed inline before this file (see class-assets.php).
 * Breakpoint-specific values live in the tokens or in Elementor's responsive
 * controls; this file has no hard-coded breakpoints.
 */

/* Anchored sections land below the floating header. */
html {
	scroll-padding-top: 120px;
}

body.nz-site {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Visible focus everywhere (Figma NZ/focus/ring-light, ring-dark in .nz-dark). */
body.nz-site :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid rgba(20, 113, 115, 0.45);
	outline-offset: 2px;
}

body.nz-site .nz-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: rgba(234, 245, 107, 0.6);
}

/* Context colour for native widgets placed in a dark container. */
.nz-dark {
	color: var(--nz-color-text-primary);
}

/* Section helpers, attached with the container's CSS Classes field. */
.e-con.nz-surface-light,
.nz-surface-light {
	background: var(--nz-gradient-light);
}

.e-con.nz-clip-x {
	overflow-x: clip;
}

/* Button "Touch area 44 px" (Style → Button → Icon (Nazenprint)). */
.nz-touch-yes .elementor-button {
	position: relative;
}

.nz-touch-yes .elementor-button::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

/* Stroke icons from the Figma set keep their outline look in any button. */
.elementor-button-icon svg path[fill="none"] {
	fill: none;
}

/* Status badge — Figma NZ/Status badge (Queued, Printing, Packing, Shipped). */
.nz-status {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	padding: 4px 12px 4px 10px;
	border-radius: var(--nz-radius-pill);
	font-family: var(--nz-font-family);
	font-size: var(--nz-font-size-caption);
	font-weight: 600;
	line-height: var(--nz-line-height-caption);
	white-space: nowrap;
}

.nz-status__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
}

.nz-status--shipped {
	background-color: var(--nz-color-feedback-success-bg);
	color: var(--nz-color-feedback-success);
}

.nz-status--printing {
	background-color: var(--nz-color-feedback-warning-bg);
	color: var(--nz-color-feedback-warning);
}

.nz-status--packing {
	background-color: var(--nz-color-surface-accent-subtle);
	color: var(--nz-color-text-brand);
}

.nz-status--queued {
	background-color: var(--nz-color-surface-subtle);
	color: var(--nz-color-text-muted);
}

/* Header (Figma NZ/Nav): the Pro Nav Menu keeps its natural width on desktop
   and its hamburger is the 44 px round button of the Mobile variant. */
.nz-header-bar .nz-nav {
	flex: 0 0 auto;
	width: auto;
}

.nz-header-bar .nz-nav .elementor-nav-menu--main .elementor-nav-menu {
	flex-wrap: nowrap;
}

.nz-header-bar .nz-nav .elementor-menu-toggle {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border: 1px solid var(--nz-color-border-default);
	border-radius: 50%;
	background-color: transparent;
}

.nz-header-bar .nz-nav .elementor-menu-toggle svg {
	width: 22px;
	height: 22px;
}

.nz-header-bar .nz-nav .elementor-menu-toggle svg path[fill="none"] {
	fill: none;
}

/* A word longer than its box (narrow value columns such as "3-5 designs",
   long product names) breaks inside the box instead of spilling out. Only
   words that do not fit are affected, so the Figma layout is unchanged. */
body.nz-site .elementor-heading-title,
body.nz-site .elementor-button-text,
.nz-pcard__name,
.nz-ptop__name {
	overflow-wrap: break-word;
}

/* hello-elementor gives h1–h6 a .5rem top margin; Elementor's own widgets
   (icon box, image box) do not reset it, so the title sits 8 px low. */
body.nz-site .elementor-icon-box-title,
body.nz-site .elementor-image-box-title {
	margin-block-start: 0;
}

/* Logo image widgets: no inline line box around the SVG (keeps 20.5 px rows).
   The link hugs the logo (not the empty row next to it) and gets a 44 px
   tall touch area; the equal negative margin keeps the layout unchanged. */
.elementor-widget-image.nz-logo {
	display: block;
	line-height: 0;
}

.elementor-widget-image.nz-logo a {
	display: inline-block;
	vertical-align: top;
	line-height: 0;
	padding-block: 12px;
	margin-block: -12px;
}

/* Icon list links (contact rows): 24 px touch height, same layout. */
.elementor-widget-icon-list .elementor-icon-list-item > a {
	padding-block: 2px;
	margin-block: -2px;
}

/* Decorative absolutely positioned art (footer outline wordmark). */
.nz-deco {
	pointer-events: none;
	user-select: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Icon widget: the inline-block icon sits on the text baseline and the
   wrapper grows by the descender (44 px tile → 51 px row). */
body.nz-site .elementor-widget-icon .elementor-icon-wrapper {
	line-height: 0;
}

body.nz-site .elementor-widget-icon .elementor-icon {
	vertical-align: top;
}

/* Helper classes for containers (Advanced → CSS Classes). */
/* Value + unit on one baseline (Figma "Value" rows: 3-5 designs). */
.e-con.nz-align-baseline {
	--align-items: baseline;
}

/* Frosted plate on a photo (Figma: teal 78 % + 16 px background blur). */
.e-con.nz-glass {
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

/* Map widget with rounded corners (class nz-map): the iframe is clipped. */
.elementor-widget-google_maps.nz-map {
	overflow: hidden;
}

.elementor-widget-google_maps.nz-map iframe {
	display: block;
}

/* Legal pages (Figma NZ/Legal text). The policy body is one Text Editor
   widget with the class nz-legal-text: headings (H2) and paragraphs pasted
   from the client's document get the Figma item style. */
.nz-legal-text h2,
.nz-legal-text h3 {
	margin: var(--nz-space-lg) 0 var(--nz-space-xs);
	font-family: var(--nz-font-display);
	font-size: var(--nz-font-size-h4);
	font-weight: 600;
	line-height: var(--nz-line-height-h4);
	letter-spacing: 0;
	color: var(--nz-color-text-primary);
}

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

.nz-legal-text p,
.nz-legal-text ul,
.nz-legal-text ol {
	margin: 0 0 var(--nz-space-xs);
}

.nz-legal-text > :last-child {
	margin-bottom: 0;
}

/* Policy menu (Appearance → Menus → "Policies"): list on desktop, chips on
   tablet and mobile — two Nav Menu widgets reading the same menu. */
.nz-policy-nav .elementor-nav-menu .elementor-item {
	padding: 10px 12px;
	border-radius: 8px;
}

.nz-policy-nav .elementor-nav-menu .elementor-item.elementor-item-active,
.nz-policy-nav .elementor-nav-menu .elementor-item:hover {
	background-color: var(--nz-color-surface-subtle);
}

.nz-policy-chips .elementor-nav-menu--main .elementor-nav-menu {
	flex-wrap: wrap;
	gap: 8px;
}

.nz-policy-chips .elementor-nav-menu--main .elementor-nav-menu > li {
	margin: 0;
}

.nz-policy-chips .elementor-nav-menu .elementor-item {
	box-sizing: border-box;
	padding: 6px 12px;
	border: 1px solid var(--nz-color-border-default);
	border-radius: 999px;
	background-color: var(--nz-color-surface-page);
}

.nz-policy-chips .elementor-nav-menu .elementor-item.elementor-item-active {
	border-color: var(--nz-color-surface-accent);
	background-color: var(--nz-color-surface-accent);
}