@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600&family=Poppins:wght@400;500;600&display=swap");

/**
 * Zoneway design tokens — keep in sync with theme.json.
 * @import must stay at the top of this file.
 */
:root {
	--zw-color-base: #ffffff;
	--zw-color-surface: #f3f6f9;
	--zw-color-ink: #212529;
	--zw-color-muted: #666666;
	--zw-color-brand: #027788;
	--zw-color-brand-dark: #024965;
	--zw-color-header-top: #4a6062;
	--zw-color-header: #0b1c20;
	--zw-color-accent: #f2c400;
	--zw-color-accent-contrast: #ffffff;
	--zw-color-on-dark: #ffffff;
	--zw-color-border: #e6e6e6;
	--zw-color-cyan: #45c7e7;
	--zw-footer-grad-top: #00778b;
	--zw-footer-grad-bottom: #002142;

	--zw-font-sans: "Poppins", "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--zw-font-display: "Poppins", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

	--zw-space-xs: 0.5rem;
	--zw-space-sm: 1rem;
	--zw-space-md: 1.5rem;
	--zw-space-lg: 2.5rem;
	--zw-space-xl: 4rem;
	--zw-space-2xl: 6rem;

	--zw-radius: 2px;
	--zw-content: 720px;
	--zw-wide: 1600px;
	--zw-header-offset: 7.5rem;
}

body {
	font-family: var(--zw-font-sans);
}

.zw-container {
	width: min(94%, var(--zw-wide));
	margin-inline: auto;
}

.zw-section {
	padding-block: var(--zw-space-xl);
}

.zw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	border-radius: var(--zw-radius);
	font-family: var(--zw-font-sans);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	text-transform: uppercase;
}

.zw-btn--primary {
	background: var(--zw-color-accent);
	color: var(--zw-color-accent-contrast);
}

.zw-btn--primary:hover {
	opacity: 0.92;
}

/*
 * Full-bleed sections: brand blocks paint edge-to-edge.
 * Inner copy/grids stay on .zw-container / *__inner (94% / --zw-wide).
 * Do NOT zero alignfull side margins when root padding is non-zero —
 * WP uses negative margins on .has-global-padding > .alignfull.
 */
.wp-block-post-content.has-global-padding {
	padding-left: 0;
	padding-right: 0;
}

.wp-block-post-content > .alignfull,
.wp-block-post-content > [class*="wp-block-brand-"],
body .is-layout-constrained > .alignfull,
body .is-layout-constrained > [class*="wp-block-brand-"],
.editor-styles-wrapper .is-root-container > .alignfull,
.editor-styles-wrapper .is-root-container > [class*="wp-block-brand-"],
.editor-styles-wrapper .is-layout-constrained > .alignfull,
.editor-styles-wrapper .is-layout-constrained > [class*="wp-block-brand-"] {
	max-width: none !important;
	width: 100%;
	box-sizing: border-box;
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 0px));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 0px));
}

/*
 * Wide rail = same as .zw-container / brand *__inner.
 * Must cover editor (.editor-styles-wrapper) and nested constrained
 * layouts so Columns/Image alignwide match the front (WYSIWYG).
 */
.wp-block-post-content > .alignwide,
.editor-styles-wrapper .is-root-container > .alignwide,
.editor-styles-wrapper .is-layout-constrained > .alignwide,
body .is-layout-constrained > .alignwide {
	width: min(94%, var(--zw-wide, 1600px)) !important;
	max-width: min(94%, var(--zw-wide, 1600px)) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}