/*
Theme Name:        ICC Armenia Industry
Theme URI:         https://iccarmenia.am
Author:            ICC Armenia
Description:       Block theme for the ICC Armenia website — "Industry" design system: blueprint frames, Barlow Condensed headings and a steel-blue accent. Derived from the Claude Design export in /ICC_Armenia_2nd_theme.
Version:           1.0.0
Requires at least: 6.7
Tested up to:      7.1
Requires PHP:      8.0
License:           GPL-2.0-or-later
Text Domain:       icc-armenia
*/

/* ==========================================================================
   Design-system token aliases

   The design export addresses tokens as --color-*, --space-*, --font-* and
   --radius-*. theme.json emits the same values as --wp--preset--* and
   --wp--custom--*. These aliases let markup lifted from the design file work
   unchanged, with theme.json remaining the single source of truth.
   ========================================================================== */

:root {
	--color-bg: var(--wp--preset--color--base);
	--color-surface: var(--wp--preset--color--surface);
	--color-text: var(--wp--preset--color--contrast);
	--color-accent: var(--wp--preset--color--accent);
	--color-accent-2: var(--wp--preset--color--accent-2);
	--color-divider: var(--wp--custom--color--divider);

	--color-neutral-100: var(--wp--custom--color--neutral--100);
	--color-neutral-200: var(--wp--custom--color--neutral--200);
	--color-neutral-300: var(--wp--custom--color--neutral--300);
	--color-neutral-400: var(--wp--custom--color--neutral--400);
	--color-neutral-500: var(--wp--custom--color--neutral--500);
	--color-neutral-600: var(--wp--custom--color--neutral--600);
	--color-neutral-700: var(--wp--custom--color--neutral--700);
	--color-neutral-800: var(--wp--custom--color--neutral--800);
	--color-neutral-900: var(--wp--custom--color--neutral--900);

	--color-accent-100: var(--wp--custom--color--accent--100);
	--color-accent-200: var(--wp--custom--color--accent--200);
	--color-accent-300: var(--wp--custom--color--accent--300);
	--color-accent-400: var(--wp--custom--color--accent--400);
	--color-accent-500: var(--wp--custom--color--accent--500);
	--color-accent-600: var(--wp--custom--color--accent--600);
	--color-accent-700: var(--wp--custom--color--accent--700);
	--color-accent-800: var(--wp--custom--color--accent--800);
	--color-accent-900: var(--wp--custom--color--accent--900);

	--font-heading: var(--wp--preset--font-family--barlow-condensed);
	--font-heading-weight: 600;
	--font-body: var(--wp--preset--font-family--barlow);

	--frame-max: var(--wp--custom--frame--max);
	--frame-gutter: var(--wp--custom--frame--gutter);
	--sticky-offset: var(--wp--custom--sticky-offset);

	--shadow-sm: var(--wp--preset--shadow--sm);
	--shadow-md: var(--wp--preset--shadow--md);
	--shadow-lg: var(--wp--preset--shadow--lg);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

::selection {
	background: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

/* The design squares every component corner. */
.wp-block-button__link,
.wp-block-search__button,
.wp-block-image img,
input,
select,
textarea {
	border-radius: 0;
}

/* Skip link — visible on focus, above the sticky header. */
.skip-link:focus {
	z-index: 100;
	background: var(--color-bg);
	color: var(--color-accent-900);
}

/* ==========================================================================
   Blueprint frame

   Components are wireframe objects: square, transparent, hairline-bordered,
   with registration marks drawn outside the box.
   ========================================================================== */

/* The four registration marks are drawn as background layers on one overlay
   pseudo-element inset -6px, so a frame costs a single class and no extra
   markup — patterns stay clean and the editor shows the real thing. Geometry
   matches the design: an 11px arm pair per corner, offset 5px. */
.icc-blueprint {
	position: relative;
	border: 1px solid var(--color-divider);
	border-radius: 0;
	--icc-mark: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.icc-blueprint::after {
	content: "";
	position: absolute;
	inset: -6px;
	pointer-events: none;
	background-image:
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark));
	background-repeat: no-repeat;
	background-size:
		1px 11px, 11px 1px,
		1px 11px, 11px 1px,
		1px 11px, 11px 1px,
		1px 11px, 11px 1px;
	background-position:
		left 5px top 0, left 0 top 5px,
		right 5px top 0, right 0 top 5px,
		left 5px bottom 0, left 0 bottom 5px,
		right 5px bottom 0, right 0 bottom 5px;
}

/* On a dark band the marks and the hairline invert. */
.icc-band-dark .icc-blueprint {
	border-color: rgba(255, 255, 255, 0.28);
	--icc-mark: rgba(255, 255, 255, 0.55);
}

/* A group can apply the frame to each of its direct children — used for the
   numbered card grids, so a grid pattern carries one class, not one per card. */
.icc-frame-children > :is(.wp-block-group, .wp-block-column, figure, article) {
	position: relative;
	border: 1px solid var(--color-divider);
	border-radius: 0;
	--icc-mark: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.icc-frame-children > :is(.wp-block-group, .wp-block-column, figure, article)::after {
	content: "";
	position: absolute;
	inset: -6px;
	pointer-events: none;
	background-image:
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark)),
		linear-gradient(var(--icc-mark), var(--icc-mark));
	background-repeat: no-repeat;
	background-size:
		1px 11px, 11px 1px,
		1px 11px, 11px 1px,
		1px 11px, 11px 1px,
		1px 11px, 11px 1px;
	background-position:
		left 5px top 0, left 0 top 5px,
		right 5px top 0, right 0 top 5px,
		left 5px bottom 0, left 0 bottom 5px,
		right 5px bottom 0, right 0 bottom 5px;
}

.icc-band-dark .icc-frame-children > :is(.wp-block-group, .wp-block-column, figure, article) {
	border-color: rgba(255, 255, 255, 0.28);
	--icc-mark: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Section scaffolding
   ========================================================================== */

/* Every nav sub-item scrolls to a section anchor; clear the sticky header. */
.icc-section {
	scroll-margin-top: var(--sticky-offset);
}

.icc-rule-top {
	border-top: 1px solid var(--color-divider);
}

.icc-rule-bottom {
	border-bottom: 1px solid var(--color-divider);
}

/* Kicker — the uppercase accent label above a heading. */
.icc-kicker {
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--color-accent-700);
	margin: 0;
}

.icc-band-dark .icc-kicker {
	color: rgba(255, 255, 255, 0.8);
}

/* The square accent bullet that precedes some kickers. */
.icc-tick::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 14px;
	vertical-align: 0.02em;
	background: var(--color-accent);
}

/* Dark band — accent-900 ground, white ink. */
.icc-band-dark {
	background: var(--color-accent-900);
	color: #fff;
}

.icc-band-dark :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

.icc-band-dark p {
	color: rgba(255, 255, 255, 0.92);
}

.icc-band-dark a:not(.wp-block-button__link) {
	color: #fff;
}

/* A button sitting on the dark band reverses to white. */
.icc-band-dark .wp-block-button__link {
	background: #fff;
	border-color: #fff;
	color: var(--color-accent-900);
}

.icc-band-dark .wp-block-button__link:hover {
	background: var(--color-accent-100);
	border-color: var(--color-accent-100);
	color: var(--color-accent-900);
}

/* The 2px ink rule under a hero slogan. */
.icc-rule-ink {
	border-top: 2px solid var(--color-text);
	padding-top: 24px;
}

/* ==========================================================================
   Numbered cards
   ========================================================================== */

.icc-card-num {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 15px;
	letter-spacing: 0.16em;
	color: var(--color-accent);
	margin: 0;
}

.icc-card-title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	line-height: 1.1;
	margin: 0;
}

.icc-card-body {
	color: var(--color-accent-900);
	text-wrap: pretty;
	margin: 0;
}

.icc-band-dark .icc-card-body {
	color: rgba(255, 255, 255, 0.92);
}

/* The meta footer pinned to the bottom of a card. The compound selector beats
   WordPress's `.is-layout-flex > :is(*, div){margin:0}`, which would otherwise
   drop the auto margin and let the line ride up. */
.icc-frame-children .icc-card-meta,
.icc-card-text .icc-card-meta {
	margin-top: auto;
}

.icc-card-meta {
	padding-top: 14px;
	border-top: 1px solid var(--color-divider);
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

/* ==========================================================================
   Stat band — four big accent figures over a hairline grid
   ========================================================================== */

.icc-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.icc-stats > * {
	padding: 44px 28px 44px 0;
}

.icc-stat-value {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: var(--wp--preset--font-size--stat);
	line-height: 1;
	color: var(--color-accent);
	margin: 0;
}

.icc-stat-label {
	font-size: 14px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent-900);
	margin: 8px 0 0;
}

/* The boxed 2x2 variant used on the Commissions head. */
.icc-stats-boxed {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--color-divider);
	border: 1px solid var(--color-divider);
}

.icc-stats-boxed > * {
	background: var(--color-bg);
	padding: 26px 22px;
	margin: 0;
}

.icc-stats-boxed .icc-stat-value {
	font-size: clamp(34px, 3.6vw, 50px);
}

.icc-stats-boxed .icc-stat-label {
	font-size: 13px;
	margin-top: 6px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.icc-topbar {
	background: var(--color-accent-900);
	color: #fff;
	font-size: 11px;
}

.icc-topbar a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.icc-topbar a:hover,
.icc-topbar a[aria-current="true"] {
	color: #fff;
}

/* Language switcher — three square tabs, the current one reversed to white. */
.icc-lang {
	display: flex;
	gap: 2px;
}

.icc-lang__link {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 13px;
	letter-spacing: 0.1em;
	padding: 7px 13px;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.icc-lang__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	text-decoration: none;
}

.icc-topbar .icc-lang__link.is-current,
.icc-topbar .icc-lang__link.is-current:hover {
	background: #fff;
	color: var(--color-accent-900);
}

.icc-topbar__label {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.7;
}

.icc-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-divider);
}

.icc-logo img {
	height: 52px;
	width: auto;
	display: block;
}

/* Primary navigation — Barlow Condensed, letterspaced, square hover wash. */
.icc-nav .wp-block-navigation-item__content {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 15px;
	letter-spacing: 0.06em;
	padding: 8px 12px;
	color: var(--color-text);
}

/* Between 1100px and 1400px — and in Armenian at any width — the seven groups
   plus the call to action are tight. Let the nav shrink before the button
   wraps onto a line of its own. */
.icc-header .wp-block-navigation {
	min-width: 0;
	flex-shrink: 1;
}

@media (max-width: 1400px) {
	.icc-nav .wp-block-navigation-item__content {
		font-size: 14px;
		letter-spacing: 0.03em;
		padding: 8px 8px;
	}

	.icc-header .wp-block-buttons .wp-block-button__link {
		padding-inline: 14px;
	}
}

.icc-nav .wp-block-navigation-item__content:hover {
	background: var(--color-accent-100);
	color: var(--color-accent-900);
	text-decoration: none;
}

.icc-nav .current-menu-item > .wp-block-navigation-item__content,
.icc-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	background: var(--color-accent-200);
	color: var(--color-accent-900);
}

/* Submenus are square, hairline-bordered panels — no rounded corners. */
.icc-nav .wp-block-navigation__submenu-container {
	background: var(--color-bg);
	border: 1px solid var(--color-divider);
	box-shadow: var(--shadow-lg);
	min-width: 300px;
	padding: 6px 0;
	border-radius: 0;
}

.icc-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: 0;
	padding: 11px 20px;
	width: 100%;
}

/* ==========================================================================
   Member logo marquee
   ========================================================================== */

.icc-marquee {
	display: flex;
	flex-direction: column;
	gap: 22px;
	background: #fff;
	padding: 22px 0;
	border: 1px solid rgba(255, 255, 255, 0.28);
	overflow: hidden;
	min-width: 0;
}

.icc-marquee__row {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.icc-marquee__track {
	display: flex;
	width: max-content;
	gap: 40px;
	padding-right: 40px;
}

.icc-marquee__row--l .icc-marquee__track {
	animation: icc-marquee-l 55s linear infinite;
}

.icc-marquee__row--r .icc-marquee__track {
	animation: icc-marquee-r 60s linear infinite;
}

/* The duplicate track is a wrapper only so it can carry aria-hidden; its
   images must still be flex items of the track itself. */
.icc-marquee__dup {
	display: contents;
}

.icc-marquee__track img {
	height: 64px;
	width: auto;
	display: block;
	flex: none;
	object-fit: contain;
}

@keyframes icc-marquee-l {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@keyframes icc-marquee-r {
	from { transform: translateX(-50%); }
	to { transform: translateX(0); }
}

/* ==========================================================================
   Commission / task-force accordion

   Native <details> so the list works with JavaScript off.
   ========================================================================== */

.icc-accordion {
	border-top: 1px solid var(--color-divider);
}

.icc-accordion__item {
	border-bottom: 1px solid var(--color-divider);
}

.icc-accordion__summary {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 22px 4px;
	cursor: pointer;
	list-style: none;
}

.icc-accordion__summary::-webkit-details-marker {
	display: none;
}

.icc-accordion__summary:hover {
	background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.icc-accordion__num {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 15px;
	letter-spacing: 0.16em;
	color: var(--color-accent);
	flex: none;
}

.icc-accordion__title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.1;
	margin-right: auto;
}

.icc-accordion__lead {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-700);
	text-align: right;
}

.icc-accordion__sign {
	flex: none;
	width: 22px;
	text-align: center;
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 1;
	color: var(--color-accent);
}

.icc-accordion__item[open] .icc-accordion__sign {
	transform: rotate(45deg);
}

.icc-accordion__body {
	padding: 0 4px 28px 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* ==========================================================================
   Members directory
   ========================================================================== */

.icc-member-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1px;
	background: var(--color-divider);
	border: 1px solid var(--color-divider);
}

.icc-member-grid__cell {
	background: #fff;
	display: grid;
	place-items: center;
	padding: 24px 18px;
	min-height: 120px;
}

.icc-member-grid__cell img {
	max-height: 56px;
	width: auto;
	display: block;
}

/* ==========================================================================
   Portrait cards — leadership and task-force leads
   ========================================================================== */

.icc-portrait {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.icc-portrait--wide {
	aspect-ratio: 4 / 3;
}

.icc-linkedin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-top: auto;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-700);
	text-decoration: none;
	border: 1px solid var(--color-divider);
	padding: 6px 10px;
}

.icc-linkedin:hover {
	background: var(--color-accent-100);
	color: var(--color-accent-900);
	text-decoration: none;
}

/* ==========================================================================
   Contact
   ========================================================================== */

.icc-contact-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.icc-contact-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--color-divider);
	font-size: 15px;
}

.icc-contact-row > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.icc-contact-row__label,
.icc-contact-row dt {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-accent-700);
	flex: none;
}

.icc-contact-row dd,
.icc-contact-row > :last-child {
	margin: 0;
	text-align: right;
}

.icc-contact-row > :last-child.icc-contact-row__label {
	text-align: left;
}

/* Contact Form 7 — square fields on the surface tone. */
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit) {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	font: inherit;
	font-size: 15px;
	color: var(--color-text);
	caret-color: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: 0;
}

.wpcf7 textarea.wpcf7-form-control {
	min-height: 140px;
	resize: vertical;
}

.wpcf7 .wpcf7-form-control:focus-visible {
	border-color: var(--color-accent);
	outline-offset: 0;
}

.wpcf7 label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: var(--color-accent-700);
}

.wpcf7 .wpcf7-submit {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 15px;
	letter-spacing: 0.02em;
	padding: 14px 26px;
	background: var(--color-accent);
	color: var(--color-bg);
	border: 1px solid var(--color-accent);
	border-radius: 0;
	cursor: pointer;
}

.wpcf7 .wpcf7-submit:hover {
	background: var(--color-accent-600);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.icc-footer {
	background: var(--color-text);
	color: #fff;
	margin-top: auto;
}

.icc-footer a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}

.icc-footer a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.icc-footer__brand {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 20px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.icc-footer__colhead {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.55;
	margin: 0;
}

.icc-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 13px;
	opacity: 0.6;
}

/* ==========================================================================
   Responsive — the design is a desktop grid; collapse it in two steps.
   ========================================================================== */

@media (max-width: 1100px) {
	.icc-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.icc-stats > * {
		padding-right: 20px;
	}
}

@media (max-width: 781px) {
	:root {
		--frame-gutter: 20px;
		--sticky-offset: 90px;
	}

	.icc-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.icc-accordion__summary {
		flex-wrap: wrap;
		gap: 10px;
	}

	.icc-accordion__lead {
		text-align: left;
		width: 100%;
		order: 3;
	}

	.icc-accordion__body {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.icc-logo img {
		height: 40px;
	}

	.icc-header {
		position: static;
	}
}

@media (max-width: 480px) {
	.icc-stats {
		grid-template-columns: minmax(0, 1fr);
	}

	.icc-stats > * {
		padding: 28px 0;
		border-bottom: 1px solid var(--color-divider);
	}

	.icc-stats-boxed {
		grid-template-columns: minmax(0, 1fr);
	}

	.icc-member-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.icc-contact-row {
		flex-direction: column;
		gap: 4px;
	}

	.icc-contact-row dd,
	.icc-contact-row > :last-child {
		text-align: left;
	}
}

/* Nothing may scroll the page sideways at 360px. */
.wp-block-table,
.icc-scroll-x {
	overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
	.icc-marquee__track {
		animation: none !important;
	}

	.icc-marquee__row {
		overflow-x: auto;
	}

	html {
		scroll-behavior: auto;
	}
}

/* A blueprint frame on a button wrapper draws the marks only — the button
   element already carries the hairline border from theme.json. */
.wp-block-button.icc-blueprint {
	border: 0;
}

/* The accordion body: prose on the left, a fact list on the right. */
.icc-accordion__prose > :first-child {
	margin-top: 0;
}

.icc-accordion__facts {
	margin: 0;
}

.icc-accordion__facts .icc-contact-row:first-child {
	border-top: 1px solid var(--color-divider);
}

/* — button variants — */
.wp-block-button.is-style-icc-secondary > .wp-block-button__link {
	background: transparent;
	border-color: var(--color-divider);
	color: var(--color-text);
}

.wp-block-button.is-style-icc-secondary > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--color-text) 7%, transparent);
	border-color: var(--color-divider);
	color: var(--color-text);
}

.wp-block-button.is-style-icc-secondary > .wp-block-button__link:active {
	background: color-mix(in srgb, var(--color-text) 14%, transparent);
}

.icc-band-dark .wp-block-button.is-style-icc-secondary > .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

.icc-band-dark .wp-block-button.is-style-icc-secondary > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

/* Hero rule row: the lead paragraph takes the free space so the #WeAreICC
   mark stays on its right rather than wrapping beneath it. */
.icc-rule-ink > :first-child {
	flex: 1 1 320px;
	margin: 0;
}

/* ==========================================================================
   Card internals — keeping rows level across a grid

   A card's text block must fill the height left by its image, so the meta line
   and the fact rows can sit on the card's baseline. Without this the rows ride
   up wherever the description above them is short, and a grid row goes ragged.
   ========================================================================== */

/* WordPress gives every flex group `flex-wrap: wrap; align-items: center`.
   In a vertical card that centres the children and stops the text block from
   filling the height the image leaves, so the meta line cannot reach the
   card's baseline. Opt the cards out of both. */
.icc-frame-children > .wp-block-group.is-layout-flex,
.icc-card-text.is-layout-flex {
	flex-wrap: nowrap;
	align-items: stretch;
}

.icc-card-text {
	flex: 1 1 auto;
	min-height: 0;
}

.icc-frame-children .icc-card-rows {
	margin-top: auto;
	width: 100%;
}

/* A person with no photograph gets initials on a surface tile, so a portrait
   grid keeps its rhythm. */
.icc-monogram {
	display: grid;
	place-items: center;
	width: 100%;
	background: var(--color-neutral-200);
	color: color-mix(in srgb, var(--color-accent-700) 70%, transparent);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(40px, 5vw, 64px);
	letter-spacing: 0.06em;
	line-height: 1;
}

/* ==========================================================================
   Armenian and French typography

   Noto Sans Armenian has a larger apparent size than Barlow Condensed and
   Armenian words are long, so the display sizes that suit English overflow
   here. Step the biggest sizes down and let long words break rather than
   push the page sideways.
   ========================================================================== */

:lang(hy) h1,
:lang(hy) .icc-card-title {
	letter-spacing: 0;
	overflow-wrap: break-word;
}

:lang(hy) h1 {
	font-size: clamp(30px, 3.6vw, 52px);
	line-height: 1.1;
}

:lang(hy) h2 {
	font-size: clamp(26px, 2.8vw, 36px);
}

:lang(hy) .icc-stat-value {
	font-size: clamp(34px, 3.4vw, 46px);
}

:lang(fr) h1 {
	font-size: clamp(34px, 4.4vw, 56px);
}

/* The design keeps every nav item visible and simply lets the row wrap, so an
   earlier attempt to collapse Armenian and French into the overlay menu was
   wrong — it hid the navigation entirely. Instead, when the row cannot fit, the
   nav takes a line of its own beneath the logo and the call to action, which
   keeps all seven groups on screen in every language. */
@media (max-width: 1500px) {
	:lang(hy) .icc-header > .wp-block-group,
	:lang(fr) .icc-header > .wp-block-group {
		row-gap: 4px;
	}

	:lang(hy) .icc-header .wp-block-navigation,
	:lang(fr) .icc-header .wp-block-navigation {
		order: 3;
		flex-basis: 100%;
		margin-right: 0;
	}
}

/* The banner is a tall photograph; in a letterbox slot the default centre crop
   lands mid-sentence, so bias it towards the top of the sign. */
.icc-banner-crop img {
	object-position: center 22%;
}

/* Perk lists inside a membership card. */
.icc-card-list {
	margin: 0;
	padding-left: 1.1em;
	font-size: 16px;
	color: var(--color-accent-900);
}

.icc-card-list li {
	margin-bottom: 4px;
}

/* ==========================================================================
   Membership branches

   The design draws membership as two branching diagrams: a dark label block,
   an SVG connector, and the tiers it fans out to.
   ========================================================================== */

.icc-branch {
	display: grid;
	grid-template-columns: minmax(200px, 260px) 120px minmax(0, 1fr);
	align-items: stretch;
	margin-bottom: var(--wp--preset--spacing--70);
}

.icc-branch__label {
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	background: var(--color-accent-900);
	color: #fff;
	--icc-mark: rgba(255, 255, 255, 0.55);
}

.icc-branch__for {
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.8;
}

.icc-branch__labeltext {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1;
	color: #fff;
}

.icc-branch__link {
	width: 120px;
	height: 100%;
	display: block;
}

/* Equal-height rows: the connector is drawn on a fixed 0 0 120 300 viewBox
   stretched over the branch, so its three endpoints only meet the tiers when
   the tiers divide that height evenly. */
.icc-branch__tiers {
	display: grid;
	grid-template-rows: repeat(var(--icc-branch-rows, 3), minmax(0, 1fr));
	gap: 16px;
}

.icc-branch__row {
	display: flex;
	align-items: stretch;
}

/* The arrowhead where a branch meets its tier. */
.icc-branch__pointer {
	width: 0;
	height: 0;
	align-self: center;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 10px solid var(--color-accent);
	margin-left: -10px;
	flex: none;
}

.icc-branch__tier {
	flex: 1;
	padding: 22px 26px;
	display: grid;
	grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
	gap: 24px;
	align-items: center;
}

.icc-branch__kicker {
	display: block;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 14px;
	letter-spacing: 0.16em;
	color: var(--color-accent);
}

.icc-branch__name {
	display: block;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.05;
}

.icc-branch__body {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-accent-900);
	text-wrap: pretty;
}

@media (max-width: 900px) {
	.icc-branch {
		grid-template-columns: minmax(0, 1fr);
	}

	.icc-branch__link {
		display: none;
	}

	.icc-branch__label {
		margin-bottom: 16px;
	}

	.icc-branch__pointer {
		display: none;
	}

	.icc-branch__tier {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}
}

/* — application steps — */
.icc-step {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.icc-step__num {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 30px;
	line-height: 1.1;
	color: var(--color-accent);
	min-width: 44px;
}

.icc-step__title {
	display: block;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 22px;
}

.icc-step__body {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-accent-900);
}

/* — ruled sub-heading with an index marker — */
.icc-ruled-head {
	border-bottom: 2px solid var(--color-text);
	padding-bottom: 16px;
}

/* ==========================================================================
   Person cards — leadership and advisory board

   The design sets a person's name and role in a brighter blue than the steel
   accent, with the role directly beneath the name.
   ========================================================================== */

:root {
	--color-person: #2b6cc4;
}

.icc-person__name {
	color: var(--color-person);
}

.icc-person__role {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 17px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
	color: var(--color-person);
	margin: 0;
}

/* The design gives a portrait a fixed band rather than a square crop. */
.icc-frame-children figure.wp-block-image img {
	height: 300px;
	object-fit: cover;
	object-position: center top;
}

@media (max-width: 600px) {
	.icc-frame-children figure.wp-block-image img {
		height: 240px;
	}
}

/* ==========================================================================
   Contact
   ========================================================================== */

/* The three jump links under the page head. */
.icc-jumps {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.icc-jumps a {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 15px;
	letter-spacing: 0.08em;
	padding: 8px 14px;
	border: 1px solid var(--color-divider);
	color: var(--color-text);
	text-decoration: none;
}

.icc-jumps a:hover {
	background: var(--color-accent-100);
	color: var(--color-accent-900);
	text-decoration: none;
}

.icc-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	align-items: stretch;
}

.icc-contact-card {
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.icc-contact-card__head {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.icc-contact-card__title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 30px;
	line-height: 1.1;
}

.icc-contact-card__sub {
	font-size: 15px;
	color: var(--color-accent-900);
}

.icc-contact-card__lines {
	display: flex;
	flex-direction: column;
	margin-top: auto;
}

/* Label in its own narrow column, value left-aligned beside it — not pushed to
   opposite edges, which is what made the rows read as misaligned. */
.icc-contact-line {
	display: grid;
	grid-template-columns: 80px minmax(0, 1fr);
	gap: 14px;
	padding: 12px 0;
	border-top: 1px solid var(--color-divider);
}

.icc-contact-line__label {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.icc-contact-line__value {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 21px;
	line-height: 1.25;
	color: var(--color-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

a.icc-contact-line__value:hover {
	color: var(--color-accent-700);
	text-decoration: underline;
}

.icc-map {
	min-height: 380px;
}

.icc-map iframe {
	width: 100%;
	height: 100%;
	min-height: 380px;
	border: 0;
	display: block;
}

/* — the topics the form routes to — */
.icc-touch {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.icc-touch__num {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 15px;
	letter-spacing: 0.16em;
	color: var(--color-accent);
	min-width: 28px;
}

.icc-touch__title {
	display: block;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 20px;
	line-height: 1.2;
}

.icc-touch__body {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-accent-900);
}

/* ==========================================================================
   Task force cards
   ========================================================================== */

.icc-tf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	align-items: stretch;
}

.icc-tf {
	padding: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 260px;
}

.icc-tf__cover {
	height: 230px;
	border-bottom: 1px solid var(--color-divider);
	background-size: cover;
	background-position: center;
}

.icc-tf__cover--empty {
	display: grid;
	place-items: center;
	background: var(--color-neutral-200);
	color: color-mix(in srgb, var(--color-accent-700) 70%, transparent);
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 56px;
	letter-spacing: 0.06em;
}

.icc-tf > .icc-card-num {
	padding: 4px 28px 0;
}

.icc-tf__title {
	margin: 0;
	padding: 0 28px;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 30px;
	line-height: 1.08;
}

.icc-tf__title a {
	color: inherit;
	text-decoration: none;
}

.icc-tf__title a:hover {
	color: var(--color-accent-700);
	text-decoration: underline;
}

.icc-tf__body {
	margin: 0;
	padding: 0 28px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--color-accent-900);
	text-wrap: pretty;
}

.icc-tf .icc-card-meta {
	margin-top: auto;
	margin-inline: 28px;
}

/* The commission list leads with its open/close sign, as the design draws it. */
.icc-accordion__title {
	color: var(--color-person);
}

/* A tier's perks list, split out of its copy paragraph. */
.icc-branch__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.icc-branch__perks {
	margin: 0;
	padding-left: 1.1em;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-accent-900);
}

.icc-branch__perks li {
	margin-bottom: 3px;
}

/* ==========================================================================
   Hairline cell grid

   Global commissions and the ADR services read as one table: cells on the page
   ground with the divider showing through a 1px gap.
   ========================================================================== */

.icc-cellgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--icc-cell-min, 250px), 1fr));
	gap: 1px;
	background: var(--color-divider);
	border: 1px solid var(--color-divider);
}

.icc-cell {
	background: var(--color-bg);
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.icc-cell__title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	line-height: 1.1;
}

.icc-cell__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-accent-900);
}

/* — the standard arbitration clause — */
.icc-clause {
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.icc-clause__text {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 22px;
	line-height: 1.35;
}

/* — the dark procedure band — */
.icc-procgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px;
}

.icc-proc {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
	padding-top: 20px;
}

.icc-proc__num {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 44px;
	line-height: 1;
}

.icc-proc__title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 24px;
	color: #fff;
}

.icc-proc__body {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	opacity: 0.9;
}

/* ==========================================================================
   Membership growth — one card of bars per year
   ========================================================================== */

.icc-yeargrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}

.icc-year {
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.icc-year__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.icc-year__label {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 34px;
}

.icc-year__total {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 48px;
	color: var(--color-accent);
}

.icc-year__plot {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	height: 300px;
}

.icc-year__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1;
}

.icc-year__bar span {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 20px;
}

.icc-year__bar i {
	display: block;
	width: 100%;
}

.icc-year__legend {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-900);
}

.icc-year__reach {
	border-top: 1px solid var(--color-divider);
	padding-top: 12px;
	font-size: 15px;
	color: var(--color-accent-900);
}

/* ==========================================================================
   New corporate member welcome card
   ========================================================================== */

.icc-welcome {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 0;
}

.icc-welcome__copy {
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.icc-tag {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	font-size: 11px;
	letter-spacing: 0.02em;
	padding: 3px 10px;
	background: var(--color-accent-100);
	color: var(--color-accent-800);
}

.icc-welcome__name {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.02;
}

.icc-welcome__person {
	font-size: 17px;
	color: var(--color-accent-900);
}

.icc-welcome__body {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	text-wrap: pretty;
}

.icc-welcome__facts {
	display: flex;
	gap: 28px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--color-divider);
}

.icc-welcome__flabel {
	display: block;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.icc-welcome__fvalue {
	display: block;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 24px;
}

.icc-welcome__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 781px) {
	.icc-welcome {
		grid-template-columns: minmax(0, 1fr);
	}

	.icc-welcome__copy {
		padding: 28px;
	}

	.icc-year__plot {
		height: 220px;
	}
}

/* Task forces come in two groups, each with its own ruled heading. */
.icc-tf-groups {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--80);
}

.icc-tf-group {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.icc-tf-group .icc-ruled-head h2 {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 44px);
}

/* A flag is contained on a neutral ground, with the country badge over it. */
.icc-tf__cover--flag {
	background-size: contain;
	background-repeat: no-repeat;
	background-color: var(--color-neutral-100);
	position: relative;
}

.icc-tf__cover {
	position: relative;
}

.icc-tf__code {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--color-accent);
	color: #fff;
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 18px;
	letter-spacing: 0.12em;
	padding: 6px 12px;
}

/* "Իրավաբանական անձինք" is wider than the branch label at the display size the
   design uses for "Organisation"; let the label scale down and break rather
   than run out over the connector. */
.icc-branch__labeltext {
	overflow-wrap: anywhere;
	hyphens: auto;
}

:lang(hy) .icc-branch__labeltext,
:lang(fr) .icc-branch__labeltext {
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.08;
}

/* The dark band's statement is capped like the design's (820px) so the button
   sits beside it instead of wrapping underneath. */
.icc-band-dark .icc-band__title,
.icc-band-dark .is-layout-flex > p {
	max-width: 820px;
	margin: 0;
}

/* Application form: the design lays the fields out two across, with the
   message and the submit spanning the row. Contact Form 7 wraps each field in
   a <p>, so the grid is applied to the form itself. */
.icc-apply .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: start;
}

.icc-apply .wpcf7-form > p {
	margin: 0;
}

.icc-apply .wpcf7-form > p:has(textarea),
.icc-apply .wpcf7-form > p:has(select),
.icc-apply .wpcf7-form > p:has(.wpcf7-submit),
.icc-apply .wpcf7-form > .wpcf7-response-output {
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	.icc-apply .wpcf7-form {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Design parity pass — measured against the rendered design bundle
   ========================================================================== */

/* The design sets Barlow Condensed at REGULAR weight everywhere except real
   headings and buttons. Everything below had inherited the 600 heading weight. */
.icc-card-title,
.icc-card-num,
.icc-stat-value,
.icc-branch__name,
.icc-branch__kicker,
.icc-branch__labeltext,
.icc-contact-card__title,
.icc-contact-line__value,
.icc-cell__title,
.icc-tf__title,
.icc-tf__code,
.icc-step__num,
.icc-step__title,
.icc-touch__title,
.icc-year__label,
.icc-year__total,
.icc-year__bar span,
.icc-welcome__name,
.icc-welcome__fvalue,
.icc-proc__num,
.icc-proc__title,
.icc-accordion__title,
.icc-accordion__num,
.icc-accordion__sign,
.icc-clause__text,
.icc-person__name,
.icc-person__role,
.icc-monogram,
.icc-jumps a,
.icc-lang__link,
.icc-nav .wp-block-navigation-item__content,
.icc-footer__brand,
.icc-ruled-cols__num,
.icc-ruled-cols__title,
.icc-bar__title,
.icc-event-row__title,
.icc-event-row__fact,
.icc-numbered-head__num {
	font-weight: 400;
}

/* Section intro paragraphs are capped at 900px in the design. */
.icc-intro {
	max-width: 900px;
}

/* Cover cards: a 200px icon band bleeding to the card edge with a hairline
   under it; the text sits in the padded area below. */
.icc-card-cover img {
	height: 200px;
	aspect-ratio: auto;
	object-fit: cover;
	border-bottom: 1px solid var(--color-divider);
}

/* Person cards: the portrait is INSET inside the padded card, 300px tall. */
.icc-frame-children .icc-card-portrait img {
	height: 300px;
	object-fit: cover;
	object-position: center top;
}

/* Grid children that are raw HTML blocks inherit WordPress's flow margin on
   every item but the first, which lifts the first card out of line. */
.icc-contact-grid > *,
.icc-frame-children > * {
	margin-block-start: 0;
}

/* — ruled columns ("How a commission works") — */
.icc-ruled-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px;
}

.icc-ruled-cols > div {
	border-top: 2px solid var(--color-text);
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.icc-ruled-cols__num {
	font-family: var(--font-heading);
	font-size: 40px;
	line-height: 1;
	color: var(--color-accent);
}

.icc-ruled-cols__title {
	font-family: var(--font-heading);
	font-size: 24px;
	line-height: 1.1;
}

.icc-ruled-cols__body {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-accent-900);
}

/* — blueprint call-to-action bar ("Take a seat", "Propose a task force") — */
.icc-bar {
	padding: 36px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}

.icc-bar__title {
	display: block;
	font-family: var(--font-heading);
	font-size: 32px;
	line-height: 1.1;
}

.icc-bar__sub {
	margin: 4px 0 0;
	font-size: 17px;
	color: var(--color-accent-900);
}

/* — the three-photo mosaic on the ICC profile — */
.icc-mosaic {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, 240px);
	gap: 20px;
}

.icc-mosaic > .icc-blueprint:first-child {
	grid-row: 1 / span 2;
}

.icc-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 781px) {
	.icc-mosaic {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 260px 200px 200px;
	}

	.icc-mosaic > .icc-blueprint:first-child {
		grid-row: auto;
	}
}

/* — numbered sub-head without a rule ("03 Get in touch") — */
.icc-numbered-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.icc-numbered-head__num {
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.icc-numbered-head h2 {
	margin: 0;
	font-size: clamp(28px, 3vw, 40px);
}

/* Contact: rows follow the description (not pinned), topics are ruled rows. */
.icc-contact-card__lines {
	margin-top: 0;
}

.icc-touch {
	padding: 14px 0;
	border-top: 1px solid var(--color-divider);
}

.icc-touch:last-of-type {
	border-bottom: 1px solid var(--color-divider);
}

/* Form labels are sentence-case and quiet in the design, not uppercase. */
.wpcf7 label {
	font-size: 12px;
	letter-spacing: 0;
	text-transform: none;
	color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* — commission accordion body: ICC Armenia | ICC Global — */
.icc-accordion__body {
	padding: 4px 8px 30px 84px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.icc-accordion__prose {
	max-width: 900px;
	font-size: 18px;
	line-height: 1.6;
}

.icc-accordion__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
	align-items: start;
}

.icc-accordion__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.icc-accordion__colhead {
	font-family: var(--font-heading);
	font-size: 18px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--color-text);
}

.icc-accordion__role {
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-accent-700);
}

.icc-accordion__person {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-divider);
	font-family: var(--font-heading);
	font-size: 20px;
}

.icc-accordion__person small {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--color-accent-900);
}

/* International task-force cards are narrower in the design (300px). */
.icc-tf-grid--international {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* — event rows (Upcoming Events) — */
.icc-event-row {
	border-top: 2px solid var(--color-text);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.icc-event-row__title {
	margin: 0;
	font-family: var(--font-heading);
	font-size: 30px;
	line-height: 1.1;
}

.icc-event-row__title a {
	color: inherit;
	text-decoration: none;
}

.icc-event-row__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 40px;
	align-items: start;
}

.icc-event-row__cover img {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
	display: block;
}

.icc-event-row__details {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.icc-event-row__facts {
	display: flex;
	flex-direction: column;
}

.icc-event-row__fact {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid var(--color-divider);
	font-size: 17px;
}

.icc-event-row__fact > :first-child {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent-700);
	font-family: var(--font-body);
}

.icc-event-row .wp-block-button__link {
	font-size: 17px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 16px 30px;
}

@media (max-width: 781px) {
	.icc-event-row__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The forms created by scripts/create-forms.php wrap fields in their own
   .icc-form__row / .icc-field / .icc-form__actions containers rather than
   Contact Form 7's <p>, so the two-across grid is applied to those. */
.icc-apply .wpcf7-form > .icc-form__row {
	display: contents;
}

.icc-apply .wpcf7-form .icc-field > p,
.icc-apply .wpcf7-form .icc-form__actions > p {
	margin: 0;
}

.icc-apply .wpcf7-form > .icc-field:has(textarea),
.icc-apply .wpcf7-form > .icc-field:has(select),
.icc-apply .wpcf7-form > .icc-form__actions,
.icc-apply .wpcf7-form > fieldset,
.icc-apply .wpcf7-form > .wpcf7-response-output {
	grid-column: 1 / -1;
}

/* Undated events: the design still shows the left column (a dashed poster
   slot) and reads "To be confirmed" in the date facts. */
.icc-event-row__grid > .icc-event-row__details:first-child {
	grid-column: 2;
}

.icc-event-row__grid:has(> .icc-event-row__details:first-child)::before {
	content: "";
	grid-column: 1;
	grid-row: 1;
	min-height: 300px;
	border: 1px dashed color-mix(in srgb, var(--color-text) 35%, transparent);
	background: var(--color-neutral-200);
}

.icc-event-row__fact > p:last-child:empty::before {
	content: "To be confirmed";
}

.icc-event-row > .icc-kicker:empty::before {
	content: "Date to confirm";
}

/* The same fallbacks in the other two site languages. */
:lang(hy) .icc-event-row__fact > p:last-child:empty::before {
	content: "Ճշտվում է";
}

:lang(hy) .icc-event-row > .icc-kicker:empty::before {
	content: "Ամսաթիվը ճշտվում է";
}

:lang(fr) .icc-event-row__fact > p:last-child:empty::before {
	content: "À confirmer";
}

:lang(fr) .icc-event-row > .icc-kicker:empty::before {
	content: "Date à confirmer";
}