/*
Theme Name: IMA Theme
Theme URI: https://ima.com
Author: IMA
Author URI: https://ima.com
Description: Tema corporativo personalizado para IMA. Desarrollado con Full Site Editing y Tailwind CSS.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ima-theme
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, corporate
*/

/* ──────────────────────────────────────────────────────────────
   Custom overrides — unminified, edit freely.
   Loaded after assets/css/style.css via functions.php.
   ────────────────────────────────────────────────────────────── */

/* Fluidly scale the 325px side-padding between the 1300px breakpoint
   (40px) and 1450px (325px), so columns don't feel cramped in that range. */
@media (min-width: 1301px) and (max-width: 1449.98px) {
	.ima-sol-detail-content .wp-block-columns {
		padding-left:  clamp(40px, calc(40px + (100vw - 1301px) * 1.9128), 325px);
		padding-right: clamp(40px, calc(40px + (100vw - 1301px) * 1.9128), 325px);
	}
}

/* Darken paragraph text from #b2b2b2 → #636363.
   Step 1: rebind the semantic var (covers .ima-cases-grid__desc,
   .ima-case-card__cat, .ima-about__body, .ima-sol-counter,
   .ima-dienst-card__popup-text, and any future use). */
:root {
	--ima-gray: #636363;
}

/* Step 2: override selectors that hardcode #b2b2b2. */
.ima-bgrid-card__excerpt,
.ima-main .wp-block-post-content li,
.ima-main .wp-block-post-content p,
.ima-main .wp-block-post-content td,
.ima-main .wp-block-post-content blockquote,
.ima-opl-text-image__content,
.ima-opl-kenmerken__card-text,
.ima-aopl__nav-counter,
.ima-sol-detail-content p,
.ima-cdh__eyebrow span,
.ima-cdc__intro,
.ima-cdc__col,
.ima-dsec__content,
.ima-dsec__text .wp-block-paragraph,
.ima-dsec__text p,
.ima-vac-card__cat,
.ima-vdh__eyebrow,
.ima-vdc__left li,
.ima-vdc__left p {
	color: #636363;
}

/* Desktop-only font sizes (≥1201px). Tablet/mobile inherit the existing cascade. */
@media (min-width: 1201px) {
	.ima-solutions__title,
	.ima-diensten__title {
		font-size: 30px;
	}
	.ima-btn {
		font-size: 15px;
	}
}

/* Diensten popup card spacing tweaks. */
.ima-dienst-card__popup-title {
	margin-bottom: 0.8rem;
}
.ima-dienst-card__popup-text {
	line-height: 1;
}

/* Cases title — cap from 60px to 40px (keep clamp scaling on smaller viewports). */
.ima-cases__title {
	font-size: clamp(2rem, 5vw, 40px);
}

/* Partners strip. */
.ima-partners__label {
	font-size: 20px;
}
.ima-partners__logo img {
	max-height: 32px;
}

/* About section title — desktop 70 → 55. Smaller breakpoints keep their clamp. */
@media (min-width: 1201px) {
	.ima-about__title {
		font-size: 55px;
	}
	.ima-blog__title {
		font-size: 40px;
	}
	.ima-mach-cta__title {
		font-size: 30px;
	}
	.ima-mach-cta__sub {
		font-size: 40px;
	}
	.ima-footer__nav-link,
	.ima-footer__connect-title {
		font-size: 13px;
	}
	.ima-footer__nav {
		row-gap: 8px;
		gap: 8px clamp(16px, 1vw, 56px);
	}
}

/* ── Footer: center the nav between the logo (left) and robot arm (right) ──
   The nav is a flex item in the band between .ima-footer__brand and the
   robot's reserved right padding. That band was lopsided because the brand
   box (auto width) didn't match the robot's right-side zone. Sizing the
   brand box to exactly that zone makes the band symmetric, so the nav's
   justify-content:center lands it on the footer's true centre. */

/* Desktop (>1024px): robot zone = clamp(140px,18vw,340px) + 20px gap. */
@media (min-width: 1025px) {
	.ima-footer__brand {
		flex: 0 0 calc(clamp(140px, 13vw, 340px) + 20px);
	}
}

/* Tablet, robot still visible (769–1024px): robot zone = 220px + 40px gap. */
@media (min-width: 769px) and (max-width: 1024px) {
	.ima-footer__brand {
		flex: 0 0 220px;
	}
}

/* ──────────────────────────────────────────────────────────────
   Content lists: restore bullets/numbers.
   Tailwind's preflight resets ol,ul to list-style:none, which also
   strips markers from editor/content lists. Re-enable them for the
   core list block and rich-text block fields (nav/footer menus keep
   their reset because they aren't matched here).
   ────────────────────────────────────────────────────────────── */
.wp-block-list,
:is(.ima-opl-text-image__content, .ima-about__body-wrap, .ima-cdc__col,
    .ima-cdc__intro, .ima-cdc__meerwaarde-text, .ima-contact__body,
    .ima-opl-kenmerken__card-text, .ima-vdh__interest-text) :is(ul, ol) {
	padding-left: 1.5em;
	margin: 0 0 1.25em;
}

ul.wp-block-list,
:is(.ima-opl-text-image__content, .ima-about__body-wrap, .ima-cdc__col,
    .ima-cdc__intro, .ima-cdc__meerwaarde-text, .ima-contact__body,
    .ima-opl-kenmerken__card-text, .ima-vdh__interest-text) ul {
	list-style: disc;
}

ol.wp-block-list,
:is(.ima-opl-text-image__content, .ima-about__body-wrap, .ima-cdc__col,
    .ima-cdc__intro, .ima-cdc__meerwaarde-text, .ima-contact__body,
    .ima-opl-kenmerken__card-text, .ima-vdh__interest-text) ol {
	list-style: decimal;
}

.wp-block-list li,
:is(.ima-opl-text-image__content, .ima-about__body-wrap, .ima-cdc__col,
    .ima-cdc__intro, .ima-cdc__meerwaarde-text, .ima-contact__body,
    .ima-opl-kenmerken__card-text, .ima-vdh__interest-text) li {
	margin-bottom: .35em;
}

/* ──────────────────────────────────────────────────────────────
   Solution detail (ima_oplossing) post-content list font.
   List items inherited the default near-black colour and system font
   instead of matching the body paragraphs (Barlow / #636363), so bullet
   lists looked like a different font. Match them to the paragraph styling.
   ────────────────────────────────────────────────────────────── */
.ima-sol-detail-content li {
	color: #636363;
	font-family: var(--font-barlow, "Barlow", sans-serif);
	font-size: 18px;
	line-height: 1.65;
}
@media (max-width: 768px) {
	.ima-sol-detail-content li { font-size: 16px; }
}
@media (max-width: 480px) {
	.ima-sol-detail-content li { font-size: 15px; }
}

/* ──────────────────────────────────────────────────────────────
   Buttons block alignment.
   Core block-library CSS is dequeued site-wide (Tailwind handles styling),
   which also removed the flex layout that powers the Buttons block's
   "justify left/center/right" control — so a centred button stayed
   left-aligned on the frontend. Restore just that layout behaviour.
   ────────────────────────────────────────────────────────────── */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}
.wp-block-buttons.is-content-justification-left          { justify-content: flex-start; }
.wp-block-buttons.is-content-justification-center        { justify-content: center; }
.wp-block-buttons.is-content-justification-right         { justify-content: flex-end; }
.wp-block-buttons.is-content-justification-space-between { justify-content: space-between; }
.wp-block-buttons.is-vertical                            { flex-direction: column; }
.wp-block-buttons.is-vertical.is-content-justification-center { align-items: center; }
.wp-block-buttons.is-vertical.is-content-justification-right  { align-items: flex-end; }

/* Keep a buttons row inside the solution content aligned to the same text
   column as the paragraphs (mirrors the > p / > ul side padding). */
.ima-sol-detail-content .wp-block-post-content > .wp-block-buttons {
	box-sizing: border-box;
	padding-left: 325px;
	padding-right: 325px;
}
@media (max-width: 1300px) {
	.ima-sol-detail-content .wp-block-post-content > .wp-block-buttons {
		padding-left: 40px;
		padding-right: 40px;
	}
}
@media (max-width: 768px) {
	.ima-sol-detail-content .wp-block-post-content > .wp-block-buttons {
		padding-left: 24px;
		padding-right: 24px;
	}
}
@media (max-width: 480px) {
	.ima-sol-detail-content .wp-block-post-content > .wp-block-buttons {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* ──────────────────────────────────────────────────────────────
   Vacature detail content — nested bullet lists use a dash marker
   instead of another disc, so a deeper level reads as "– …".
   ────────────────────────────────────────────────────────────── */
.ima-vdc__left ul ul {
	list-style-type: "–  ";
}

/* ──────────────────────────────────────────────────────────────
   Core Video block inside a column.
   The solution-content rule `.ima-sol-detail-content .wp-block-video`
   adds 325px side padding (meant for a full-width, top-level video so it
   lines up with the text column). When a video is dropped INSIDE a column
   that padding is wider than the column itself, collapsing the video to
   zero width — it disappears on desktop. Reset it so the video fills its
   column at every breakpoint.
   ────────────────────────────────────────────────────────────── */
.ima-sol-detail-content .wp-block-column .wp-block-video {
	padding-left: 0;
	padding-right: 0;
}