/* ==========================================================================
   CIVAL Core — brand stylesheet
   Derived directly from CIVAL Brand Guidelines V1.0, section 13.
   Rules enforced here:
     · CIVAL Green #2DC91C is never a text colour (2.2:1 on white = WCAG fail)
     · Green as text uses Signal Green #17910F, large text / UI only
     · Green stays under 10% of any layout: CTA, chevrons, section rules only
     · All technical data is IBM Plex Mono, never Sans
   ========================================================================== */

:root {
	--cival-blue: #1532B8;
	--deep-navy: #0B1A5C;
	--cival-green: #2DC91C;   /* accent only, max 10% */
	--signal-green: #17910F;  /* green as text */
	--industrial-steel: #5A6478;
	--resin-white: #F5F7FB;
	--line: #E3E7F0;
	--font-heading: 'IBM Plex Sans', -apple-system, sans-serif;
	--font-arabic: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
	--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* ---------- typography ---------- */
.cival-mono,
.cival-table .cival-mono,
.cival-identity {
	font-family: var(--font-mono);
	font-size: .85em;
	letter-spacing: .03em;
}
.cival-identity {
	color: var(--industrial-steel);
	margin: 0 0 1.2em;
}
.cival-strong { font-weight: 600; color: var(--deep-navy); }
.cival-note {
	font-size: .82rem;
	color: var(--industrial-steel);
	margin-top: .8em;
}
h1.cival-h1, .cival-h1 {
	font-family: var(--font-heading);
	font-weight: 700;
	font-style: italic;   /* H1 is always Bold Italic — Brand Guidelines 08 */
	letter-spacing: -.02em;
}
h2.cival-h, .cival-h {
	font-family: var(--font-heading);
	font-weight: 600;
	color: var(--deep-navy);
	margin: 2.2rem 0 .9rem;
	padding-bottom: .5rem;
	border-bottom: 3px solid var(--cival-green);   /* accent rule, not a field */
}

/* ---------- tables ---------- */
.cival-tablewrap { overflow-x: auto; margin: 0 0 1.4rem; }
.cival-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-family: var(--font-heading);
}
.cival-table th {
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: left;
	background: var(--cival-blue);
	color: #fff;
	padding: .8rem 1rem;
	border: none;
}
.cival-table td {
	padding: .75rem 1rem;
	border-bottom: 1px solid var(--line);
	color: var(--deep-navy);
	font-size: .92rem;
	vertical-align: top;
}
.cival-table tbody tr:nth-child(even) td { background: var(--resin-white); }
.cival-table--kv th {
	background: var(--resin-white);
	color: var(--industrial-steel);
	width: 34%;
	border-bottom: 1px solid var(--line);
}

/* ---------- product-family tag (pellet silhouette, Brand Guidelines 09) ---------- */
.cival-tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .1em;
	color: #fff;
	background: var(--industrial-steel);
	padding: .38rem .9rem;
	border-radius: 0 12px 12px 0;   /* flat one edge, rounded the other */
	margin-bottom: .7rem;
}
.cival-tag--pvc-resin       { background: var(--cival-blue); }
.cival-tag--polymer-granule { background: var(--deep-navy); }
.cival-tag--pvc-additive    { background: var(--industrial-steel); }

/* ---------- chevron bullets (the chevron from the mark) ---------- */
ul.cival-chev { list-style: none; margin: 0 0 1.4rem; padding: 0; }
ul.cival-chev li { position: relative; padding-left: 1.5rem; margin-bottom: .6rem; }
ul.cival-chev li::before {
	content: "›";
	position: absolute;
	left: 0;
	top: -.25em;
	font-size: 1.35em;
	font-weight: 700;
	color: var(--cival-green);
}
ul.cival-chev a { color: var(--deep-navy); text-decoration: none; }
ul.cival-chev a:hover { color: var(--cival-blue); text-decoration: underline; }

/* ---------- callout ---------- */
.cival-callout {
	border-left: 3px solid var(--cival-green);
	background: var(--resin-white);
	padding: 1.1rem 1.3rem;
	margin: 1.6rem 0;
	font-size: .95rem;
	color: var(--deep-navy);
}

/* ---------- buttons ---------- */
.cival-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin: 2rem 0; }
.cival-btn {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading);
	font-size: .88rem;
	font-weight: 600;
	padding: .78rem 1.4rem;
	border: 1px solid transparent;
	text-decoration: none;
	transition: .15s;
	cursor: pointer;
}
.cival-btn--green { background: var(--cival-green); color: #0A2A06; }   /* dark text — green field, never green text */
.cival-btn--green:hover { background: #26B317; color: #0A2A06; }
.cival-btn--blue { background: var(--cival-blue); color: #fff; }
.cival-btn--blue:hover { background: #0F2794; color: #fff; }
.cival-btn--ghost { background: transparent; color: var(--cival-blue); border-color: var(--cival-blue); }
.cival-btn--ghost:hover { background: var(--cival-blue); color: #fff; }

/* ---------- grade finder ---------- */
.cival-filters { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.cival-filters input,
.cival-filters select {
	font-family: var(--font-mono);
	font-size: .82rem;
	padding: .65rem .85rem;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--deep-navy);
	min-width: 190px;
}
.cival-filters input { min-width: 240px; }
.cival-empty { color: var(--industrial-steel); font-size: .9rem; }

/* ---------- cards ---------- */
.cival-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.4rem;
}
.cival-card {
	background: #fff;
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	transition: .18s;
}
.cival-card:hover { border-color: var(--cival-blue); box-shadow: 0 6px 24px rgba(11,26,92,.09); }
.cival-card__thumb img { display: block; width: 100%; height: auto; }
.cival-card__body { padding: 1.2rem; flex: 1; }
.cival-card__body h3 { margin: 0 0 .5rem; font-size: 1.08rem; font-weight: 600; }
.cival-card__body h3 a { color: var(--deep-navy); text-decoration: none; }
.cival-card__body p { font-size: .88rem; color: var(--industrial-steel); margin: 0 0 .9rem; }
.cival-card__specs {
	font-family: var(--font-mono);
	font-size: .74rem;
	border-top: 1px solid var(--line);
	padding-top: .7rem;
	margin: 0;
}
.cival-card__specs div { display: flex; justify-content: space-between; gap: 1rem; padding: .18rem 0; }
.cival-card__specs dt { color: var(--industrial-steel); text-transform: uppercase; letter-spacing: .06em; }
.cival-card__specs dd { margin: 0; color: var(--deep-navy); font-weight: 500; }
.cival-card__foot { padding: 0 1.2rem 1.2rem; display: flex; gap: .6rem; }
.cival-card__foot .cival-btn { padding: .55rem 1rem; font-size: .8rem; }

/* ---------- RTL ---------- */
[dir="rtl"] .cival-tag { border-radius: 12px 0 0 12px; }
[dir="rtl"] ul.cival-chev li { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] ul.cival-chev li::before { left: auto; right: 0; content: "‹"; }
[dir="rtl"] .cival-callout { border-left: none; border-right: 3px solid var(--cival-green); }
[dir="rtl"] .cival-table th { text-align: right; }

/* ---------- print ---------- */
@media print {
	.cival-filters, .cival-cta, .cival-card__foot { display: none; }
	.cival-table th { background: #fff !important; color: #000 !important; border-bottom: 2px solid #000; }
}