/**
 * PetroZar — core theme stylesheet.
 *
 * The supplied HTML styles every element with an inline `style` attribute and
 * relies on the DesignCombo runtime for two things this file replaces:
 *
 *   1. `style-hover="…"` attributes, which the runtime compiled into `:hover`
 *      classes at boot. Those are re-materialised here as `.pz-hov-*` classes.
 *   2. `{{ binding }}` expressions that recomputed inline styles from component
 *      state (scrolled header, open menu, open modal…). Those become state
 *      classes (`.is-scrolled`, `.is-open`) toggled by assets/js/theme.js.
 *
 * Declaration values are copied verbatim from the source so the rendering is
 * identical. Page-specific media queries live in `page-*.css` and are enqueued
 * only on the page that needs them.
 *
 * @package PetroZar
 */

/* -------------------------------------------------------------------------
 * 1. Fonts — served locally instead of the original jsDelivr CDN.
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: "Vazirmatn";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/Vazirmatn-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "Vazirmatn";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/Vazirmatn-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "Vazirmatn";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/Vazirmatn-Bold.woff2") format("woff2");
}

@font-face {
	font-family: "Vazirmatn";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/Vazirmatn-ExtraBold.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
 * 2. Design tokens — the palette extracted from the supplied HTML.
 *    Declared for maintainability; the markup keeps its literal hex values so
 *    nothing shifts if a token is ever edited by mistake.
 * ---------------------------------------------------------------------- */

:root {
	--pz-navy-950: #031126;
	--pz-navy-900: #04142B;
	--pz-navy-800: #071D3C;
	--pz-navy-700: #0B2C55;
	--pz-navy-600: #0F2A52;
	--pz-gold-600: #C89B3C;
	--pz-gold-400: #F0BD53;
	--pz-gold-300: #FFD37A;
	--pz-amber: #E9A72C;
	--pz-ink: #15243A;
	--pz-slate-600: #4A5A6E;
	--pz-slate-500: #66737D;
	--pz-slate-300: #9FB0C2;
	--pz-line: #DCE2E6;
	--pz-line-soft: #EDF0F2;
	--pz-surface: #F5F7F8;
	--pz-success: #2E7D5A;
	--pz-warning: #B3661A;
	--pz-shell: 1220px;
	--pz-gutter: 24px;
}

/* -------------------------------------------------------------------------
 * 3. Base — verbatim from the supplied HTML (superset of all ten pages).
 * ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;

	/* The closed mobile drawer sits one panel-width past the right edge, which
	   would otherwise inflate the document's scrollable width. `clip` removes
	   that overflow without creating a scroll container.

	   The source put `overflow-x: hidden` on <body> instead. That works only
	   by accident: the value propagates to the viewport and leaves <body>
	   itself visible. Declare anything on <html> and the propagation stops,
	   <body> keeps `overflow-x: hidden` — which forces `overflow-y: auto` —
	   and <body> becomes a scroll container, at which point the sticky header
	   sticks to <body> rather than the viewport and never pins. So the
	   clipping lives here, and <body> declares no overflow at all. */
	overflow-x: clip;
}

body {
	margin: 0;
	direction: rtl;
	background: #FFFFFF;
	color: #15243A;
	font-family: "Vazirmatn", "IRANSansX", Tahoma, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	/* No overflow here on purpose — see the note on <html> above. */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
form,
table,
figure,
blockquote {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

a {
	color: #C89B3C;
	text-decoration: none;
}

a:hover {
	color: #F0BD53;
}

img {
	display: block;
	max-width: 100%;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
}

:focus-visible {
	outline: 2px solid #C89B3C;
	outline-offset: 3px;
	border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * 3b. Article prose.
 *
 * Everywhere else in this theme the inline `style` attributes from the design
 * are kept verbatim on the markup. The article body is the one place that has
 * to work the other way round: its content comes from the WordPress editor,
 * which emits plain <p>, <h2>, <ul>, <table> and <blockquote> with no styling
 * at all. So every declaration the designed post page put on those elements
 * lives here instead, matched value for value. An editor writes ordinary
 * content and gets the design; they never see a style attribute.
 *
 * Selectors target bare tags rather than the editor's `wp-block-*` classes so
 * that the classic editor, the block editor and imported HTML all render the
 * same.
 * ---------------------------------------------------------------------- */

.pz-prose p {
	font-size: 16.5px;
	line-height: 2.1;
	color: #3C4E64;
	margin-block: 0 18px;
	text-wrap: pretty;
}

/* The designed article opens with a larger standfirst paragraph, ruled off
   from the body. Scoped to :first-child so a post that opens with an image or
   a heading is not affected. */
.pz-prose > p:first-child {
	font-size: 19px;
	line-height: 2.05;
	color: #15243A;
	font-weight: 500;
	padding-bottom: 24px;
	border-bottom: 1px solid #E5E9EC;
	margin-bottom: 30px;
}

.pz-prose h2 {
	font-size: clamp(21px, 2.2vw, 28px);
	font-weight: 800;
	color: #071D3C;
	line-height: 1.6;
	margin: 44px 0 16px;
	/* Clears the sticky header when a table-of-contents link jumps here. */
	scroll-margin-top: 150px;
}

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

.pz-prose h3 {
	font-size: 19px;
	font-weight: 800;
	color: #071D3C;
	line-height: 1.65;
	margin: 32px 0 12px;
	scroll-margin-top: 150px;
}

.pz-prose h4 {
	font-size: 17px;
	font-weight: 700;
	color: #071D3C;
	line-height: 1.7;
	margin: 26px 0 10px;
}

.pz-prose ul,
.pz-prose ol {
	display: grid;
	margin-block: 0 24px;
}

.pz-prose ul {
	gap: 12px;
}

.pz-prose ol {
	gap: 14px;
	counter-reset: pz-step;
}

.pz-prose li {
	position: relative;
	font-size: 16px;
	line-height: 2.05;
	color: #3C4E64;
}

.pz-prose ul > li {
	padding-inline-start: 22px;
}

/* The gold dot and the navy step badge are drawn rather than listed, because
   the global reset removes list markers and the design positions both against
   the first line of text rather than the line box. */
.pz-prose ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 14px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #C89B3C;
}

.pz-prose ol > li {
	padding-inline-start: 42px;
	counter-increment: pz-step;
}

.pz-prose ol > li::before {
	content: counter(pz-step, persian);
	position: absolute;
	inset-inline-start: 0;
	top: 6px;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: #071D3C;
	color: #F0BD53;
	display: grid;
	place-items: center;
	font-size: 13.5px;
	font-weight: 700;
}

.pz-prose li > ul,
.pz-prose li > ol {
	margin-block: 12px 0;
}

.pz-prose a {
	color: #C89B3C;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pz-prose blockquote {
	border-top: 2px solid #C89B3C;
	border-bottom: 1px solid #E5E9EC;
	padding: 22px 0;
	margin: 32px 0;
}

.pz-prose blockquote p {
	font-size: 19px;
	line-height: 2;
	font-weight: 600;
	color: #071D3C;
	margin-bottom: 0;
}

.pz-prose blockquote cite {
	display: block;
	margin-top: 12px;
	font-size: 14px;
	font-style: normal;
	color: #7C8DA1;
}

.pz-prose figure {
	margin: 32px 0;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(4, 20, 43, .16);
}

.pz-prose figure img {
	display: block;
	width: 100%;
	height: auto;
}

.pz-prose figcaption {
	background: #F5F7F8;
	border-top: 1px solid #E5E9EC;
	padding: 12px 20px;
	font-size: 13.5px;
	color: #7C8DA1;
	line-height: 1.9;
}

.pz-prose > img {
	border-radius: 20px;
	margin-block: 32px;
	max-width: 100%;
	height: auto;
}

/* A table needs a rounded, clipping wrapper. The block editor supplies one
   (figure.wp-block-table); the classic editor does not, so the table itself
   carries the frame and a plain-table post still looks right. */
.pz-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	border: 1px solid #E5E9EC;
	border-radius: 16px;
	overflow: hidden;
	margin-block: 0 24px;
}

.pz-prose figure:has(> table) {
	border-radius: 16px;
	box-shadow: none;
	overflow-x: auto;
	margin: 0 0 24px;
}

.pz-prose figure > table {
	margin-bottom: 0;
}

.pz-prose caption {
	caption-side: top;
	padding: 0 0 10px;
	font-size: 13.5px;
	color: #7C8DA1;
	text-align: start;
	line-height: 1.9;
}

.pz-prose thead tr {
	background: #071D3C;
}

.pz-prose th {
	text-align: start;
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 700;
	color: #FFFFFF;
}

.pz-prose td {
	padding: 14px 18px;
	color: #3C4E64;
	border-bottom: 1px solid #EDF0F3;
}

.pz-prose tbody tr:nth-child(even) {
	background: #FAFBFC;
}

.pz-prose tbody tr:last-child td {
	border-bottom: 0;
}

.pz-prose td:first-child {
	color: #15243A;
	font-weight: 600;
}

/* The design's amber "safety note" panel. An editor applies it by typing
   `pz-note` into a Group block's Advanced → Additional CSS class field, so no
   custom block or plugin is involved. */
.pz-prose .pz-note {
	border: 1px solid #E3D7B4;
	background: #FCF8EE;
	border-radius: 16px;
	padding: 22px 24px;
	margin-block: 28px;
}

.pz-prose .pz-note > :last-child {
	margin-bottom: 0;
}

.pz-prose .pz-note h2,
.pz-prose .pz-note h3,
.pz-prose .pz-note h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 16px;
	font-weight: 800;
	color: #8A6A16;
	margin: 0 0 10px;
}

.pz-prose .pz-note p,
.pz-prose .pz-note li {
	font-size: 15.5px;
	line-height: 2;
	color: #6B5412;
}

/* Small print under a table or figure. */
.pz-prose .pz-fineprint {
	font-size: 13.5px;
	color: #7C8DA1;
	line-height: 1.9;
	margin-bottom: 8px;
}

.pz-prose > :last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 4. Scroll-reveal animation — same attribute contract as the source.
 * ---------------------------------------------------------------------- */

[data-anim][data-hidden] {
	opacity: 0;
	transform: translateY(18px);
}

[data-anim][data-armed] {
	transition: opacity .6s ease, transform .6s ease;
}

/* -------------------------------------------------------------------------
 * 5. Accessibility helpers added by the WordPress conversion.
 * ---------------------------------------------------------------------- */

.pz-skip-link {
	position: absolute;
	inset-inline-start: 50%;
	top: -100px;
	z-index: 200;
	transform: translateX(50%);
	background: #C89B3C;
	color: #04142B;
	font-size: 14.5px;
	font-weight: 700;
	padding: 12px 24px;
	border-radius: 0 0 10px 10px;
	transition: top .2s ease;
}

.pz-skip-link:focus {
	top: 0;
	color: #04142B;
}

.pz-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------------------------------
 * 6. Hover states — generated from the source `style-hover` attributes.
 *    See build/build-css.js for the attribute → class mapping.
 * ---------------------------------------------------------------------- */

.pz-hov-link:hover,
.pz-hov-link:focus-visible {
	color: #F0BD53;
}

.pz-hov-nav:hover,
.pz-hov-nav:focus-visible {
	color: #F0BD53;
	border-bottom-color: rgba(200, 155, 60, .55);
}

.pz-hov-iconbtn:hover,
.pz-hov-iconbtn:focus-visible {
	border-color: #C89B3C;
	color: #F0BD53;
}

.pz-hov-gold:hover,
.pz-hov-gold:focus-visible {
	background: #F0BD53;
}

.pz-hov-ghost:hover,
.pz-hov-ghost:focus-visible {
	background: rgba(255, 255, 255, .09);
	border-color: #F0BD53;
	color: #FFFFFF;
}

.pz-hov-gold-lift:hover,
.pz-hov-gold-lift:focus-visible {
	background: #F0BD53;
	transform: translateY(-2px);
}

.pz-hov-stat:hover,
.pz-hov-stat:focus-within {
	transform: translateY(-5px);
	border-color: rgba(200, 155, 60, .5);
	box-shadow: 0 14px 38px rgba(7, 29, 60, .09);
}

.pz-hov-doc:hover,
.pz-hov-doc:focus-within {
	border-color: #C89B3C;
	box-shadow: 0 14px 34px rgba(4, 20, 43, .08);
	color: #C89B3C;
}

.pz-hov-doc-soft:hover,
.pz-hov-doc-soft:focus-within {
	border-color: #C89B3C;
	box-shadow: 0 14px 34px rgba(4, 20, 43, .07);
}

.pz-hov-card:hover,
.pz-hov-card:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 16px 44px rgba(7, 29, 60, .12);
}

/* The zoom sits on the image but is driven by hovering its card, as designed. */
.pz-hov-card:hover .pz-hov-zoom,
.pz-hov-card:focus-within .pz-hov-zoom {
	transform: scale(1.04);
}

.pz-hov-link-gold:hover,
.pz-hov-link-gold:focus-visible {
	color: #C89B3C;
}

.pz-hov-raise:hover,
.pz-hov-raise:focus-within {
	box-shadow: 0 22px 50px rgba(4, 20, 43, .12);
	transform: translateY(-3px);
}

.pz-hov-tint-gold:hover,
.pz-hov-tint-gold:focus-visible {
	border-color: #C89B3C;
	background: #FBF7EF;
	color: #C89B3C;
}

.pz-hov-tint-navy:hover,
.pz-hov-tint-navy:focus-visible {
	border-color: #C89B3C;
	background: #FBF7EF;
	color: #071D3C;
}

.pz-hov-tint:hover,
.pz-hov-tint:focus-within {
	border-color: #C89B3C;
	background: #FBF7EF;
}

.pz-hov-navy:hover,
.pz-hov-navy:focus-visible {
	background: #0B2C55;
	color: #FFFFFF;
}

.pz-hov-ink:hover,
.pz-hov-ink:focus-visible {
	color: #04142B;
}

/* Added by the blog index and article pages. */

.pz-hov-navy-solid:hover,
.pz-hov-navy-solid:focus-visible {
	background: #0B2C55;
}

.pz-hov-gold-ink:hover,
.pz-hov-gold-ink:focus-visible {
	background: #F0BD53;
	color: #04142B;
}

.pz-hov-edge:hover,
.pz-hov-edge:focus-visible {
	border-color: #C89B3C;
}

.pz-hov-edge-gold:hover,
.pz-hov-edge-gold:focus-visible {
	border-color: #C89B3C;
	color: #C89B3C;
}

.pz-hov-tag:hover,
.pz-hov-tag:focus-visible {
	color: #04142B;
	border-color: #C89B3C;
}

.pz-hov-lift:hover,
.pz-hov-lift:focus-within {
	box-shadow: 0 18px 40px rgba(4, 20, 43, .09);
	transform: translateY(-3px);
}

.pz-hov-lift-edge:hover,
.pz-hov-lift-edge:focus-within {
	border-color: #D2C08C;
	box-shadow: 0 18px 40px rgba(4, 20, 43, .09);
	transform: translateY(-3px);
}

/* -------------------------------------------------------------------------
 * 7. Sticky header — replaces the `{{ headerStyle }}` binding.
 * ---------------------------------------------------------------------- */

.pz-topbar {
	background: #04142B;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	display: block;
}

.pz-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #071D3C;
	backdrop-filter: none;
	box-shadow: none;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	transition: background .25s ease, box-shadow .25s ease;
}

.pz-header.is-scrolled {
	background: rgba(7, 29, 60, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 30px rgba(4, 20, 43, .28);
}

/* Non-sticky variant, when the administrator disables sticky in Theme Settings. */
.pz-header.is-static {
	position: relative;
}

/* Language switch — replaces `{{ langFaStyle }}` / `{{ langEnStyle }}`. */
.pz-lang {
	background: transparent;
	color: #9FB0C2;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 7px;
	padding: 3px 11px;
	font-size: 12.5px;
	font-weight: 700;
	cursor: pointer;
	line-height: 1.6;
}

.pz-lang.is-active,
.pz-lang[aria-current="true"] {
	background: rgba(200, 155, 60, .18);
	color: #F0BD53;
	border-color: rgba(200, 155, 60, .5);
}

/* Desktop nav current-page state, matching the source's active link. */
.pz-nav a {
	font-size: 12.5px;
	font-weight: 500;
	color: #C6D2DE;
	padding: 6px 1px;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.pz-nav .current-menu-item > a,
.pz-nav .current-menu-ancestor > a,
.pz-nav .current_page_item > a,
.pz-nav .current-menu-parent > a {
	font-weight: 700;
	color: #FFFFFF;
	border-bottom-color: #C89B3C;
}

/* Sub-menus: the supplied design has none, so this only engages if an
   administrator nests menu items. Styling matches the header palette. */
.pz-nav li {
	position: relative;
}

.pz-nav .sub-menu {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	z-index: 70;
	min-width: 220px;
	display: grid;
	background: #071D3C;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	padding: 8px;
	box-shadow: 0 18px 44px rgba(4, 20, 43, .38);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.pz-nav li:hover > .sub-menu,
.pz-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.pz-nav .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-bottom: 0;
	border-radius: 8px;
	white-space: normal;
}

.pz-nav .sub-menu a:hover,
.pz-nav .sub-menu a:focus-visible {
	background: rgba(255, 255, 255, .06);
	color: #F0BD53;
}

/* -------------------------------------------------------------------------
 * 8. Mobile drawer — replaces `{{ menuPanelStyle }}` / `{{ menuScrimStyle }}`.
 * ---------------------------------------------------------------------- */

.pz-menu-scrim {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(4, 20, 43, .6);
	transition: opacity .3s ease;
	opacity: 0;
	pointer-events: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.pz-menu-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Fixed, clipped stage for the drawer. Because it is fixed and clips its
   overflow, the closed panel's off-screen position never widens the document.
   It must not swallow clicks, so pointer events are re-enabled on the panel. */
.pz-menu-clip {
	position: fixed;
	inset: 0;
	z-index: 80;
	overflow: hidden;
	pointer-events: none;
}

.pz-menu-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	pointer-events: auto;
	width: min(340px, 88vw);
	background: #071D3C;
	overflow-y: auto;
	box-shadow: -18px 0 44px rgba(4, 20, 43, .4);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
	transform: translateX(100%);
	visibility: hidden;
}

.pz-menu-panel.is-open {
	transform: translateX(0);
	visibility: visible;
}

.pz-menu-panel nav a {
	padding: 14px 8px;
	font-size: 16px;
	font-weight: 500;
	color: #C6D2DE;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
	display: block;
}

.pz-menu-panel nav .current-menu-item > a,
.pz-menu-panel nav .current_page_item > a,
.pz-menu-panel nav .current-menu-ancestor > a {
	font-weight: 700;
	color: #FFFFFF;
}

.pz-menu-panel nav li:last-child > a {
	border-bottom: 0;
}

.pz-menu-panel .sub-menu a {
	padding-inline-start: 26px;
	font-size: 15px;
}

/* -------------------------------------------------------------------------
 * 9. RFQ modal — replaces `{{ modalOverlayStyle }}` / `{{ modalCardStyle }}`.
 * ---------------------------------------------------------------------- */

.pz-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 20px;
	overflow-y: auto;
	background: rgba(4, 20, 43, .72);
	transition: opacity .25s ease;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.pz-modal.is-open {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.pz-modal__card {
	width: min(660px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: #FFFFFF;
	border-radius: 20px;
	padding: clamp(22px, 3vw, 32px);
	box-shadow: 0 30px 90px rgba(4, 20, 43, .35);
	transition: transform .25s ease, opacity .25s ease;
	transform: scale(.96);
}

.pz-modal.is-open .pz-modal__card {
	transform: scale(1);
}

/* -------------------------------------------------------------------------
 * 10. Forms — `{{ inputStyle }}`, `{{ successStyle }}`, `{{ errorStyle }}`.
 * ---------------------------------------------------------------------- */

.pz-input {
	width: 100%;
	border: 1px solid #DCE2E6;
	background: #FAFBFC;
	border-radius: 10px;
	padding: 12px 13px;
	color: #15243A;
	outline: none;
	min-height: 48px;
}

.pz-input:focus-visible {
	border-color: #C89B3C;
}

textarea.pz-input {
	min-height: 110px;
	resize: vertical;
	line-height: 1.9;
}

.pz-input[aria-invalid="true"] {
	border-color: #B3661A;
	background: rgba(229, 138, 43, .06);
}

.pz-field-error {
	display: none;
	font-size: 12.5px;
	line-height: 1.7;
	color: #B3661A;
}

.pz-input[aria-invalid="true"] ~ .pz-field-error {
	display: block;
}

.pz-form-notice {
	display: none;
	align-items: flex-start;
	gap: 10px;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 14.5px;
	line-height: 1.8;
	margin-bottom: 18px;
}

.pz-form-notice.is-visible {
	display: flex;
}

.pz-form-notice--success {
	background: rgba(46, 125, 90, .09);
	border: 1px solid rgba(46, 125, 90, .3);
	color: #2E7D5A;
}

.pz-form-error {
	display: none;
	margin-top: 16px;
	background: rgba(229, 138, 43, .1);
	border: 1px solid rgba(229, 138, 43, .35);
	color: #B3661A;
	border-radius: 12px;
	padding: 12px 14px;
	font-size: 14px;
	line-height: 1.8;
}

.pz-form-error.is-visible {
	display: block;
}

/* Honeypot: present in the DOM for bots, invisible and unreachable for people.
   Clipped rather than pushed off-screen — a large negative offset extends the
   scrollable area of an RTL document and creates horizontal overflow. */
.pz-hp {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.pz-submit[aria-busy="true"] {
	opacity: .7;
	cursor: progress;
}

/* -------------------------------------------------------------------------
 * 11. Floating CTA — replaces `{{ floatingCtaStyle }}`.
 * ---------------------------------------------------------------------- */

.pz-floating-cta {
	position: fixed;
	left: 22px;
	bottom: 22px;
	z-index: 90;
	width: 56px;
	height: 56px;
	border: 0;
	border-radius: 50%;
	background: #C89B3C;
	box-shadow: 0 12px 32px rgba(4, 20, 43, .3);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .2s ease, transform .2s ease;
}

.pz-floating-cta:hover {
	background: #F0BD53;
	transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
 * 12. Accordion (Contact FAQ) — replaces `{{ f.bodyStyle }}` / `{{ f.iconStyle }}`.
 * ---------------------------------------------------------------------- */

.pz-faq__icon {
	flex: 0 0 auto;
	display: flex;
	transition: transform .25s ease;
	transform: rotate(0deg);
}

.pz-faq__trigger[aria-expanded="true"] .pz-faq__icon {
	transform: rotate(180deg);
}

.pz-faq__body {
	display: none;
	border-top: 1px solid #EEF1F4;
	padding-top: 16px;
}

.pz-faq__body.is-open {
	display: block;
}

/* -------------------------------------------------------------------------
 * 13. Download filters — replaces `{{ c.style }}` and the empty-state binding.
 * ---------------------------------------------------------------------- */

.pz-chip {
	min-height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
	background: #FFFFFF;
	color: #42546B;
	border: 1px solid #DCE2E6;
}

.pz-chip:hover {
	border-color: #C89B3C;
	color: #C89B3C;
}

.pz-chip[aria-pressed="true"] {
	background: #071D3C;
	color: #FFFFFF;
	border-color: #071D3C;
}

.pz-doc-row.is-filtered {
	display: none !important;
}

.pz-docs-empty {
	display: none;
}

.pz-docs-empty.is-visible {
	display: block;
}

/* -------------------------------------------------------------------------
 * 14. Slider dots — replaces `{{ dot.style }}`.
 * ---------------------------------------------------------------------- */

.pz-dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
	background: rgba(15, 42, 82, .18);
}

.pz-dot--light {
	background: rgba(255, 255, 255, .22);
}

.pz-dot[aria-current="true"] {
	width: 20px;
	background: #C89B3C;
}

/* -------------------------------------------------------------------------
 * 15. Blog, search and 404 — new templates, built from the existing design
 *     language (navy/gold cards, 1220px shell, gold rule) rather than
 *     introducing a second visual style.
 * ---------------------------------------------------------------------- */

.pz-shell {
	max-width: 1220px;
	margin: 0 auto;
	padding: 0 24px;
}

.pz-section {
	padding: clamp(64px, 8vw, 104px) 0;
}

.pz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 700;
	color: #C89B3C;
	margin-bottom: 12px;
}

.pz-eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	background: #C89B3C;
}

.pz-post-grid {
	display: grid;
	/* min() keeps the 300px track from exceeding the column on a 320px screen,
	   where the shell's padding leaves only 272px. */
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 22px;
}

.pz-post-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid #E4E9ED;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 10px 28px rgba(13, 38, 65, .07);
	transition: transform .25s ease, box-shadow .25s ease;
}

.pz-post-card__media {
	height: 210px;
	overflow: hidden;
	background: #F5F7F8;
}

.pz-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.pz-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1 1 auto;
	padding: 24px;
}

.pz-post-card__meta {
	font-size: 13px;
	color: #66737D;
}

.pz-post-card__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.7;
	color: #071D3C;
}

.pz-post-card__title a {
	color: inherit;
}

.pz-post-card__title a:hover {
	color: #C89B3C;
}

.pz-post-card__excerpt {
	font-size: 14.5px;
	line-height: 1.85;
	color: #66737D;
}

.pz-post-card__more {
	margin-top: auto;
	padding-top: 14px;
	font-size: 14.5px;
	font-weight: 700;
	color: #C89B3C;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* Matches the designed pager: 44px squares, white by default, navy when
   current. `paginate_links()` emits <a>/<span>.page-numbers, so the design's
   two computed styles (pgBtn and arrow) become one rule plus a current state. */
.pz-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 34px;
}

.pz-pagination .page-numbers {
	min-width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	background: #FFFFFF;
	border: 1px solid #DCE2E6;
	border-radius: 11px;
	font-size: 14.5px;
	font-weight: 700;
	color: #42546B;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.pz-pagination .page-numbers:hover {
	border-color: #C89B3C;
	color: #C89B3C;
}

.pz-pagination .page-numbers.current {
	background: #071D3C;
	border-color: #071D3C;
	color: #FFFFFF;
}

.pz-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 24px;
	padding: 0;
}

.pz-pagination .prev,
.pz-pagination .next {
	padding: 0;
	min-width: 44px;
}

.pz-searchform {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.pz-searchform input[type="search"] {
	flex: 1 1 auto;
}

.pz-searchform button {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 24px;
	background: #C89B3C;
	color: #04142B;
	border: 0;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: background .2s ease;
}

.pz-searchform button:hover {
	background: #F0BD53;
}

/* Header search panel — the source had a search button wired to nothing. */
.pz-search-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .28s ease;
	background: #04142B;
	border-top: 1px solid rgba(255, 255, 255, .07);
}

.pz-search-panel.is-open {
	grid-template-rows: 1fr;
}

.pz-search-panel > div {
	overflow: hidden;
}

.pz-search-panel form {
	max-width: 1220px;
	margin: 0 auto;
	padding: 16px 24px;
}

.pz-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-size: 13.5px;
	color: #9FB0C2;
}

.pz-entry-meta a {
	color: #C6D2DE;
}

.pz-entry-meta a:hover {
	color: #F0BD53;
}

.pz-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.pz-tags a {
	font-size: 13px;
	font-weight: 700;
	color: #42546B;
	border: 1px solid #DCE2E6;
	border-radius: 999px;
	padding: 6px 14px;
	transition: border-color .2s ease, color .2s ease;
}

.pz-tags a:hover {
	border-color: #C89B3C;
	color: #C89B3C;
}

@media (max-width: 600px) {
	.pz-searchform {
		flex-direction: column;
	}

	.pz-post-card__media {
		height: 180px;
	}
}

/* -------------------------------------------------------------------------
 * 15b. Blog index and article furniture.
 *
 * The designed blog page recomputed a chip, a sidebar row, a count pill and a
 * table-of-contents link on every React render, switching between an "on" and
 * an "off" style string. Server-rendered, those become a base rule plus an
 * `.is-active` modifier carrying exactly the declarations that differed.
 *
 * Category filtering and search are real links and a real GET form here rather
 * than the source's client-side state, so the archive works with JavaScript
 * off, is crawlable, and can be linked to directly.
 * ---------------------------------------------------------------------- */

.pz-cat-chip {
	display: inline-flex;
	align-items: center;
	min-height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	background: #FFFFFF;
	color: #42546B;
	border: 1px solid #DCE2E6;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.pz-cat-chip:hover {
	border-color: #C89B3C;
	color: #04142B;
}

.pz-cat-chip.is-active {
	background: #071D3C;
	color: #FFFFFF;
	border-color: #071D3C;
}

.pz-cat-row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-bottom: 1px solid #E5E9EC;
	padding: 11px 2px;
	text-align: start;
	font-size: 14.5px;
	color: #42546B;
	font-weight: 500;
	transition: color .2s ease;
}

.pz-cat-row:hover {
	color: #C89B3C;
}

.pz-cat-row.is-active {
	color: #C89B3C;
	font-weight: 700;
}

.pz-cat-count {
	flex: 0 0 auto;
	font-size: 12.5px;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 10px;
	background: #EDF0F3;
	color: #7C8DA1;
}

.pz-cat-row.is-active .pz-cat-count {
	background: rgba(200, 155, 60, .16);
	color: #B3821F;
}

/* No-results panel — the source's `emptyStyle`, shown by the template rather
   than toggled by a display binding. */
.pz-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	background: #F5F7F8;
	border: 1px dashed #CBD4DC;
	border-radius: 18px;
	padding: 38px 30px;
}

.pz-empty p {
	font-size: 15.5px;
	color: #5E718A;
	line-height: 1.9;
}

.pz-empty a {
	display: inline-flex;
	align-items: center;
	min-height: 46px;
	background: #F5F7F8;
	border: 1px solid #DCE2E6;
	border-radius: 11px;
	padding: 0 20px;
	font-size: 14.5px;
	font-weight: 700;
	color: #15243A;
}

.pz-empty a:hover {
	border-color: #C89B3C;
	color: #C89B3C;
}

/* Table of contents. `.is-active` is set by assets/js/page-post.js as the
   reader scrolls; without JavaScript every link still works as an anchor. */
.pz-toc-link {
	display: block;
	padding: 9px 12px;
	border-radius: 9px;
	font-size: 14px;
	line-height: 1.7;
	color: #5E718A;
	font-weight: 500;
	transition: background .2s ease, color .2s ease;
}

.pz-toc-link:hover {
	color: #071D3C;
}

.pz-toc-link.is-active {
	background: #FFFFFF;
	color: #071D3C;
	font-weight: 700;
	box-shadow: 0 2px 10px rgba(4, 20, 43, .07);
}

/* Reading-progress bar across the top of an article. */
.pz-progress {
	position: fixed;
	top: 0;
	inset-inline: 0;
	z-index: 95;
	height: 3px;
	background: transparent;
	pointer-events: none;
}

.pz-progress > span {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #C89B3C, #FFD37A);
	transition: width .1s linear;
}

/* "Address copied" confirmation next to the share buttons. */
.pz-copied {
	font-size: 13px;
	font-weight: 700;
	color: #2E7D5A;
	opacity: 0;
	transition: opacity .2s ease;
}

.pz-copied.is-visible {
	opacity: 1;
}

/* The share row's copy button is a <button>; without JavaScript it is removed
   by the template rather than left as a control that does nothing. */
.pz-share-btn {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: #FFFFFF;
	border: 1px solid #DCE2E6;
	border-radius: 11px;
	color: #42546B;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.pz-share-btn:hover,
.pz-share-btn:focus-visible {
	border-color: #C89B3C;
	color: #C89B3C;
}

/* -------------------------------------------------------------------------
 * 16. Shared responsive rules present on every supplied page.
 * ---------------------------------------------------------------------- */

@media (max-width: 1280px) {
	[data-nav] {
		display: none !important;
	}

	[data-burger] {
		display: inline-flex !important;
	}
}

@media (max-width: 768px) {
	[data-topbar] {
		display: none !important;
	}
}

/* The closing call-to-action's buttons carry `white-space: nowrap` so they keep
   their shape on wide screens. Below 600px that is wider than the column, so
   they go full width and are allowed to wrap. Some page stylesheets set the
   flex basis already; the white-space reset is needed on all of them. */
@media (max-width: 600px) {
	[data-cta-btns],
	[data-hero-cta] {
		width: 100%;
	}

	[data-cta-btns] > *,
	[data-hero-cta] > * {
		flex: 1 1 100% !important;
		white-space: normal !important;
	}
}

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

	[data-anim] {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.pz-menu-panel,
	.pz-modal,
	.pz-modal__card,
	.pz-hov-card,
	.pz-hov-stat,
	.pz-hov-raise {
		transition: none;
	}
}