/**
 * MinICT — modern section & pattern components
 *
 * Styling hooks for the block patterns registered in inc/block-patterns.php.
 * Loaded on the front end and inside the block editor so patterns render the
 * same in both. Built on the design tokens defined in theme.json
 * (--wp--preset--color--*, --wp--preset--font-size--*, --wp--preset--spacing--*).
 *
 * @package MinICT
 */

/* -------------------------------------------------------------------------
 * Tokens / helpers
 * ---------------------------------------------------------------------- */
:root {
	--minict-radius: 14px;
	--minict-radius-sm: 10px;
	--minict-shadow: 0 1px 2px rgba(14, 23, 38, .04), 0 12px 30px rgba(14, 23, 38, .06);
	--minict-shadow-hover: 0 2px 4px rgba(14, 23, 38, .06), 0 20px 44px rgba(14, 23, 38, .12);
	--minict-ease: cubic-bezier(.2, .7, .2, 1);
}

/* -------------------------------------------------------------------------
 * Section scaffolding
 * ---------------------------------------------------------------------- */
.minict-section {
	padding-top: clamp(3.5rem, 6vw, 6rem);
	padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

.minict-section--tight {
	padding-top: clamp(2.5rem, 4vw, 4rem);
	padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.minict-section--surface {
	background-color: var(--wp--preset--color--surface, #f6f8fa);
}

.minict-section--ink {
	background-color: var(--wp--preset--color--ink, #0e1726);
}

.minict-section--ink,
.minict-section--ink :where(p, li, h2, h3, h4) {
	color: #e8ecf2;
}

.minict-section--ink h2,
.minict-section--ink h3 {
	color: #fff;
}

/* Eyebrow label above headings */
.minict-eyebrow {
	display: inline-block;
	margin: 0 0 .9rem;
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-weight: 800;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand, #5b7b3a);
}

.minict-section--ink .minict-eyebrow {
	color: var(--wp--preset--color--brand-light, #94a96e);
}

/* A muted lead paragraph under section headings */
.minict-lead {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	line-height: 1.6;
	color: var(--wp--preset--color--muted, #6b7686);
}

.minict-section--ink .minict-lead {
	color: #b9c2cf;
}

/* -------------------------------------------------------------------------
 * Hero
 * ---------------------------------------------------------------------- */
.minict-hero {
	position: relative;
	padding-top: clamp(3rem, 5.5vw, 5rem);
	padding-bottom: clamp(3rem, 5.5vw, 5rem);
	background:
		radial-gradient(1100px 460px at 78% -8%, rgba(148, 169, 110, .20), transparent 60%),
		linear-gradient(180deg, #fbfcfd 0%, #f3f6f4 100%);
	overflow: hidden;
}

.minict-hero h1 {
	max-width: 16ch;
	letter-spacing: -.015em;
}

.minict-hero .minict-lead {
	max-width: 56ch;
}

.minict-hero__actions {
	margin-top: 2rem;
}

/* -------------------------------------------------------------------------
 * Card grids (services, situations, why)
 * The columns block provides the responsive grid; these classes style the
 * inner group of each column as a card.
 * ---------------------------------------------------------------------- */
.minict-card {
	height: 100%;
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
	background: #fff;
	border: 1px solid var(--wp--preset--color--line, #e4e8ee);
	border-radius: var(--minict-radius);
	box-shadow: var(--minict-shadow);
	transition: transform .25s var(--minict-ease), box-shadow .25s var(--minict-ease), border-color .25s var(--minict-ease);
}

.minict-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--minict-shadow-hover);
	border-color: #d3dae3;
}

.minict-card h3 {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin: 0 0 .6rem;
}

.minict-card p {
	margin: 0;
	color: var(--wp--preset--color--body, #3a4554);
	font-size: 1rem;
	line-height: 1.65;
}

.minict-card a.minict-card__link {
	display: inline-block;
	margin-top: 1.1rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--brand, #5b7b3a);
}

.minict-card a.minict-card__link::after {
	content: " \2192";
	transition: margin-left .2s var(--minict-ease);
}

.minict-card a.minict-card__link:hover::after {
	margin-left: .25rem;
}

/* Small index number used on cards / steps */
.minict-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1rem;
	border-radius: 10px;
	background: rgba(91, 123, 58, .10);
	color: var(--wp--preset--color--brand, #5b7b3a);
	font-weight: 800;
	font-family: var(--wp--preset--font-family--body, sans-serif);
}

/* -------------------------------------------------------------------------
 * Feature split (Standard vs custom)
 * ---------------------------------------------------------------------- */
.minict-split {
	border-radius: var(--minict-radius);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line, #e4e8ee);
}

.minict-split__col {
	padding: clamp(1.75rem, 3vw, 2.75rem);
}

.minict-split__col h3 {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.minict-split__col--standard {
	background: var(--wp--preset--color--surface, #f6f8fa);
}

.minict-split__col--custom {
	background: var(--wp--preset--color--ink, #0e1726);
	color: #e8ecf2;
}

.minict-split__col--custom h3 {
	color: #fff;
}

.minict-split__col--custom .minict-eyebrow {
	color: var(--wp--preset--color--brand-light, #94a96e);
}

/* -------------------------------------------------------------------------
 * Process steps (How we work)
 * ---------------------------------------------------------------------- */
.minict-steps {
	counter-reset: minict-step;
}

.minict-step {
	height: 100%;
	padding: 1.6rem 1.5rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--line, #e4e8ee);
	border-radius: var(--minict-radius-sm);
}

.minict-step h3 {
	font-size: 1.1rem;
	margin: .2rem 0 .4rem;
}

.minict-step p {
	margin: 0;
	font-size: .98rem;
	color: var(--wp--preset--color--muted, #6b7686);
}

/* -------------------------------------------------------------------------
 * Stats band
 * ---------------------------------------------------------------------- */
.minict-stat .minict-stat__num {
	font-family: var(--wp--preset--font-family--heading, serif);
	font-size: clamp(2.25rem, 4vw, 3rem);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--brand-light, #94a96e);
}

.minict-stat .minict-stat__label {
	margin: .5rem 0 0;
	font-size: .98rem;
	color: #b9c2cf;
}

/* -------------------------------------------------------------------------
 * CTA band
 * ---------------------------------------------------------------------- */
.minict-cta {
	border-radius: var(--minict-radius);
	padding: clamp(2.5rem, 5vw, 4rem);
	background:
		radial-gradient(700px 300px at 85% 0%, rgba(148, 169, 110, .22), transparent 60%),
		var(--wp--preset--color--ink, #0e1726);
	text-align: center;
}

.minict-cta h2 {
	color: #fff;
	max-width: 22ch;
	margin-inline: auto;
}

.minict-cta p {
	color: #c4ccd6;
	max-width: 52ch;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * Checklist (problems we solve / what you get)
 * ---------------------------------------------------------------------- */
ul.minict-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.minict-checklist li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: .7rem;
	line-height: 1.55;
}

ul.minict-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background:
		var(--wp--preset--color--brand, #5b7b3a)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
		center / .8rem no-repeat;
}

.minict-section--ink ul.minict-checklist li::before {
	background-color: var(--wp--preset--color--brand-light, #94a96e);
}

/* -------------------------------------------------------------------------
 * Service / content page header (service-page.php template)
 * ---------------------------------------------------------------------- */
.minict-page-hero {
	padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 3vw, 3rem);
	background: linear-gradient(180deg, #fbfcfd 0%, #f3f6f4 100%);
	border-bottom: 1px solid var(--wp--preset--color--line, #e4e8ee);
}

.minict-page-hero__inner {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 22px;
}

.minict-page-hero h1 {
	font-family: var(--wp--preset--font-family--heading, serif);
	font-weight: 600;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -.015em;
	color: var(--wp--preset--color--ink, #0e1726);
	margin: 0;
}

.minict-page-hero .minict-page-hero__lead {
	margin: 1rem 0 0;
	max-width: 60ch;
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	color: var(--wp--preset--color--muted, #6b7686);
}

.minict-service-main {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.minict-service-main .minict-service-content {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 22px;
}

/* Bottom CTA appended to service pages */
.minict-service-cta {
	max-width: 1024px;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
	padding: 0 22px;
}

/* -------------------------------------------------------------------------
 * Editor-only adjustments
 * ---------------------------------------------------------------------- */
.editor-styles-wrapper .minict-section--ink {
	color: #e8ecf2;
}

/* -------------------------------------------------------------------------
 * Server-rendered page sections (inc/page-sections.php)
 *
 * The block patterns above rely on Gutenberg's .wp-block-columns / .wp-block-
 * button. The PHP page templates render the same sections without those
 * wrappers, so the container, grid and button styles are defined here.
 * ---------------------------------------------------------------------- */
.minict-inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 22px;
}

/* Keep headings and lead paragraphs at a comfortable reading width, while
   grids and splits use the full container. */
.minict-inner > h1,
.minict-inner > h2,
.minict-inner > p {
	max-width: 60ch;
}

.minict-cta .minict-inner > h2,
.minict-cta .minict-inner > p {
	max-width: none;
}

/* Responsive card / column grid */
.minict-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.75rem);
	margin-top: 2.25rem;
}

.minict-grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.minict-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* How-we-work steps: five across on wide screens */
.minict-grid.minict-steps {
	grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 900px) {
	.minict-grid--3,
	.minict-grid.minict-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.minict-grid--2,
	.minict-grid--3,
	.minict-grid.minict-steps {
		grid-template-columns: 1fr;
	}
}

/* The split section is one grid with no gap (the two halves meet). */
.minict-grid.minict-split {
	gap: 0;
}

/* Buttons (hero, CTA) — mirror the theme.json button styling for the
   server-rendered <a> links. */
.minict-btn {
	display: inline-block;
	margin: .4rem .5rem .4rem 0;
	padding: .9rem 1.6rem;
	border-radius: 8px;
	background: var(--wp--preset--color--ink, #0e1726);
	color: #fff;
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-weight: 700;
	text-decoration: none;
	transition: background-color .2s var(--minict-ease), color .2s var(--minict-ease);
}

.minict-btn:hover {
	background: var(--wp--preset--color--brand, #5b7b3a);
	color: #fff;
}

.minict-btn--outline {
	background: transparent;
	border: 2px solid var(--wp--preset--color--brand, #5b7b3a);
	padding: calc(.9rem - 2px) calc(1.6rem - 2px);
	color: var(--wp--preset--color--brand-dark, #44602a);
}

.minict-btn--outline:hover {
	background: var(--wp--preset--color--brand, #5b7b3a);
	color: #fff;
}

/* On the ink hero/CTA the outline button needs light colours. */
.minict-section--ink .minict-btn--outline {
	border-color: var(--wp--preset--color--brand-light, #94a96e);
	color: #fff;
}

/* Section headings on the server-rendered pages inherit theme.json sizes; make
   sure the first heading has no stray top margin inside the container. */
.minict-inner > :first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * Visual polish for the server-rendered pages (v2.4.0)
 * ---------------------------------------------------------------------- */

/* Header sits flush with the first full-bleed section on section templates:
   remove every spacing layer between the header and the hero — the header's
   own bottom margin AND the template main's vertical padding. The hero then
   provides its own rhythm and a hairline under the header keeps the seam
   crisp. */
body.minict-sections-page .sheader {
	margin-bottom: 0;
}

body.minict-sections-page .minict-service-main {
	padding: 0;
}

body.minict-sections-page .site-content,
body.minict-sections-page #content {
	margin-top: 0;
	padding-top: 0;
}

body.minict-sections-page .top-nav-wrapper {
	border-bottom: 1px solid var(--wp--preset--color--line, #e4e8ee);
}

/* Eyebrow gets a short accent rule to its left */
.minict-eyebrow {
	position: relative;
}
.minict-inner > .minict-eyebrow::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 2px;
	margin-right: 12px;
	vertical-align: middle;
	background: currentColor;
	opacity: .7;
}

/* --- Icons --- */
.minict-icon {
	width: 24px;
	height: 24px;
	display: block;
}

/* Tinted rounded square holding a card icon (replaces the plain number) */
.minict-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.1rem;
	border-radius: 12px;
	color: var(--wp--preset--color--brand, #5b7b3a);
	background: rgba(91, 123, 58, .10);
}
.minict-card:hover .minict-card__icon {
	background: var(--wp--preset--color--brand, #5b7b3a);
	color: #fff;
	transition: background-color .25s var(--minict-ease), color .25s var(--minict-ease);
}

/* Value columns on the ink band */
.minict-value__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 1rem;
	border-radius: 12px;
	color: var(--wp--preset--color--brand-light, #94a96e);
	background: rgba(148, 169, 110, .14);
}
.minict-value h3 {
	margin-bottom: .5rem;
}

/* --- Process steps: numbered circles joined by a connector line --- */
.minict-grid.minict-steps {
	position: relative;
}
.minict-step {
	position: relative;
	text-align: left;
}
.minict-step .minict-index {
	border-radius: 50%;
	background: var(--wp--preset--color--brand, #5b7b3a);
	color: #fff;
}
/* Connector line between step number badges (desktop only) */
@media (min-width: 901px) {
	.minict-step::before {
		content: "";
		position: absolute;
		top: calc(1.6rem + 1.25rem);
		left: calc(50% + 1.6rem);
		width: calc(100% + clamp(1rem, 2vw, 1.75rem) - 3.2rem);
		height: 2px;
		background: repeating-linear-gradient(90deg, rgba(91,123,58,.35) 0 8px, transparent 8px 14px);
	}
	.minict-step:last-child::before {
		display: none;
	}
}

/* Slightly stronger section rhythm: give surface sections a hairline top */
.minict-section--surface + .minict-section--surface {
	padding-top: 0;
}

/* -------------------------------------------------------------------------
 * Contact page (page-templates/page-contact.php)
 * ---------------------------------------------------------------------- */
.minict-contact {
	padding-top: clamp(2rem, 3.5vw, 3rem);
}

.minict-contact__grid {
	align-items: start;
	margin-top: 0;
}

.minict-grid--1 {
	grid-template-columns: 1fr;
	max-width: 640px;
}

/* Form card: keep the plugin-rendered form comfortable inside the card */
.minict-form-card h2 {
	font-size: var(--wp--preset--font-size--x-large, 1.6rem);
	margin: 0 0 1rem;
}

.minict-form-card:hover {
	transform: none;
	box-shadow: var(--minict-shadow);
	border-color: var(--wp--preset--color--line, #e4e8ee);
}

.minict-form-card input[type="text"],
.minict-form-card input[type="email"],
.minict-form-card input[type="tel"],
.minict-form-card input[type="url"],
.minict-form-card textarea {
	width: 100%;
	margin-bottom: .35rem;
}

.minict-form-card input[type="submit"],
.minict-form-card button[type="submit"] {
	display: inline-block;
	padding: .9rem 1.6rem;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--ink, #0e1726);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s var(--minict-ease);
}

.minict-form-card input[type="submit"]:hover,
.minict-form-card button[type="submit"]:hover {
	background: var(--wp--preset--color--brand, #5b7b3a);
}

/* Contact details column */
.minict-contact-details h2 {
	font-size: var(--wp--preset--font-size--x-large, 1.6rem);
	margin: 0 0 1rem;
}

.minict-contact-details h3 {
	font-size: 1.1rem;
	margin: 1.75rem 0 .75rem;
}

ul.minict-contact-list {
	list-style: none;
	margin: 0 0 .5rem;
	padding: 0;
}

ul.minict-contact-list li {
	display: flex;
	align-items: center;
	gap: .8rem;
	margin-bottom: .8rem;
}

.minict-contact-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	flex: 0 0 auto;
	border-radius: 10px;
	color: var(--wp--preset--color--brand, #5b7b3a);
	background: rgba(91, 123, 58, .10);
}

ul.minict-contact-list a {
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--ink, #0e1726);
}

ul.minict-contact-list a:hover {
	color: var(--wp--preset--color--brand, #5b7b3a);
}

/* The recognition block sits between hero and form — trim its outer margin
   inside the tight wrapper section. */
.minict-sections-page .minict-contact-recognition {
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Insights — latest posts grid (minict_section_latest_posts())
 * ---------------------------------------------------------------------- */
.minict-post-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

.minict-post-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--surface, #f6f8fa);
	overflow: hidden;
}

.minict-post-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .35s var(--minict-ease);
}

.minict-post-card:hover .minict-post-card__media img {
	transform: scale(1.04);
}

.minict-post-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: var(--wp--preset--color--brand-light, #94a96e);
}

.minict-post-card__placeholder .minict-icon {
	width: 44px;
	height: 44px;
}

.minict-post-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .45rem;
	padding: 1.4rem 1.5rem 1.6rem;
}

.minict-post-card__cat {
	display: inline-block;
	padding: .25rem .7rem;
	border-radius: 999px;
	background: rgba(91, 123, 58, .10);
	color: var(--wp--preset--color--brand, #5b7b3a);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
}

.minict-post-card__cat:hover {
	background: var(--wp--preset--color--brand, #5b7b3a);
	color: #fff;
}

.minict-post-card__body h3 {
	margin: .2rem 0 0;
	font-size: 1.25rem;
}

.minict-post-card__body h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--ink, #0e1726);
}

.minict-post-card__body h3 a:hover {
	color: var(--wp--preset--color--brand, #5b7b3a);
}

.minict-post-card__body p {
	margin: 0;
}

.minict-insights__all {
	margin-top: 2.25rem;
	text-align: center;
}

/* -------------------------------------------------------------------------
 * Insight article (page-templates/single-insight.php)
 * ---------------------------------------------------------------------- */
.minict-article__hero {
	background: linear-gradient(180deg, #fbfcfd 0%, #f3f6f4 100%);
	border-bottom: 1px solid var(--wp--preset--color--line, #e4e8ee);
}

.minict-article__hero h1 {
	max-width: 24ch;
	margin: .9rem 0 0;
	letter-spacing: -.015em;
}

.minict-article__hero .minict-lead {
	max-width: 60ch;
	margin-top: 1rem;
}

.minict-article__meta {
	margin: 1.25rem 0 0;
	font-size: .92rem;
	font-weight: 700;
	color: var(--wp--preset--color--muted, #6b7686);
}

.minict-article__meta span {
	margin: 0 .5rem;
}

/* Readable article measure */
.minict-article__body {
	max-width: 720px;
}

.minict-article__body p {
	margin: 0 0 1.25rem;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.minict-article__body h2 {
	margin: 2.25rem 0 .9rem;
	font-size: var(--wp--preset--font-size--x-large, 1.6rem);
}

.minict-article__body .minict-article__cta {
	margin-top: 2.25rem;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--brand, #5b7b3a);
	background: var(--wp--preset--color--surface, #f6f8fa);
	border-radius: 0 var(--minict-radius-sm) var(--minict-radius-sm) 0;
}

.minict-article__body .minict-article__cta a {
	color: var(--wp--preset--color--brand, #5b7b3a);
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Navigation safety nets (v2.9.0): card links, footer nav, 404
 * ---------------------------------------------------------------------- */

/* Card titles that link keep the heading colour until hovered */
.minict-card__title-link {
	text-decoration: none;
	color: var(--wp--preset--color--ink, #0e1726);
}

.minict-card__title-link:hover {
	color: var(--wp--preset--color--brand, #5b7b3a);
}

/* Footer navigation: the primary menu repeated above the badges/copyright */
.minict-footer-nav {
	border-top: 1px solid var(--wp--preset--color--line, #e4e8ee);
	padding: 22px 0 4px;
}

.minict-footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem 2rem;
	list-style: none;
	margin: 0;
	padding: 0 22px;
}

.minict-footer-nav__list li {
	margin: 0;
}

.minict-footer-nav__list a {
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	color: var(--wp--preset--color--body, #3a4554);
}

.minict-footer-nav__list a:hover {
	color: var(--wp--preset--color--brand, #5b7b3a);
}

/* 404 hero: center the message */
.minict-404 .minict-inner {
	text-align: center;
}

.minict-404 h1,
.minict-404 .minict-lead {
	margin-inline: auto;
}