/* Amini Holding — layout bovenop fonts → tokens → amini-components → holding.
   Geen schaduwen, scherpe hoeken, accent spaarzaam, geen animaties. */

html { scroll-behavior: auto; scroll-padding-top: 88px; }
/* Onder de footer loopt de donkere band door, zodat hoge schermen geen lege strook tonen */
body { margin: 0; background: #1A1714; }
.site-main { outline: none; }

/* Typografie */
.am h1, .am h2, .am h3 { color: var(--ink); margin: 0; text-wrap: balance; }
.am h3 { font: 600 18px/26px var(--font-sans); }
.am p { margin: 0 0 var(--space-4); }
.am p:last-child { margin-bottom: 0; }
.am .lead { color: var(--ink); max-width: var(--text-max); }
.am .muted { color: var(--ink-muted); }
.am .placeholder { background: color-mix(in srgb, var(--accent) 12%, transparent); outline: 1px dashed var(--accent); padding: 0 4px; color: inherit; }
.am a:hover { text-decoration-thickness: 2px; }

/* Toegankelijkheid */
.site-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: var(--space-3) var(--space-4); background: var(--accent); color: var(--on-accent) !important; }
.site-skip:focus { left: var(--space-4); top: var(--space-4); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Knoppen: minimaal 44 px hoog */
.am .am-btn { min-height: 44px; }
.am .am-btn--text { min-height: 0; padding-block: var(--space-3); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-4) var(--space-12); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.site-brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; min-height: 44px; }
.site-brand img { height: 28px; width: auto; }
.site-brand__label { color: var(--ink-muted); padding-left: var(--space-3); border-left: 1px solid var(--line); line-height: 28px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-8); align-items: center; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 500 13px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current] { border-bottom-color: var(--accent); }
.site-nav-toggle { display: none; }

/* Hamburger onder 900 px: menu en merknaam passen daaronder niet naast elkaar */
@media (max-width: 900px) {
	html { scroll-padding-top: 72px; }
	.site-header__inner { padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
	.site-nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; min-width: 44px; padding: 0 var(--space-3); background: none; border: 1px solid var(--line-strong); border-radius: 0; color: var(--ink); font: 500 13px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
	.site-nav-toggle__bars, .site-nav-toggle__bars::before, .site-nav-toggle__bars::after { display: block; width: 16px; height: 1.5px; background: currentColor; }
	.site-nav-toggle__bars { position: relative; }
	.site-nav-toggle__bars::before, .site-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
	.site-nav-toggle__bars::before { top: -5px; }
	.site-nav-toggle__bars::after { top: 5px; }
	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars { background: transparent; }
	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
	.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }
	.site-nav { flex-basis: 100%; }
	.js .site-nav { display: none; }
	.js .site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--space-2); }
	.site-nav li + li { border-top: 1px solid var(--line); }
	.site-nav a { width: 100%; padding-block: var(--space-2); border-bottom: 0; }
}

/* Secties (basis; de inhoud volgt in mijlpaal 4) */
.section { padding-block: var(--space-24); border-bottom: 1px solid var(--line); }
.section__inner { max-width: var(--content-max); margin: 0 auto; padding-inline: var(--space-12); }
.section .am-eyebrow { margin-bottom: var(--space-4); }
.section h1 + p, .section h2 + p { margin-top: var(--space-6); }
@media (max-width: 760px) {
	.section { padding-block: 56px; }
	.section__inner { padding-inline: var(--space-4); }
}

/* Footer (donkere band) */
.site-footer { background: var(--surface); color: var(--ink-muted); font-size: 14px; line-height: 22px; }
.site-footer__inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-12) var(--space-12) var(--space-8); display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); border-top: 1px solid var(--line); }
.site-footer__brand img { height: 24px; width: auto; margin-bottom: var(--space-4); }
.site-footer strong { color: var(--ink); font-weight: 600; }
.site-footer p { margin: 0 0 var(--space-2); }
.site-footer .am-data { color: var(--ink-muted); }
.site-footer__title { font: 600 12px/16px var(--font-sans) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--ink) !important; margin: 0 0 var(--space-3) !important; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.site-footer a { color: var(--ink-muted); text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.site-footer__brand a { color: var(--ink); }
.site-footer__disclaimer, .site-footer__copy { max-width: var(--content-max); margin: 0 auto !important; padding: 0 var(--space-12) var(--space-6); font-size: 13px; }
.site-footer__copy { padding-bottom: var(--space-8); }
@media (max-width: 760px) {
	.site-footer__inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) var(--space-4) var(--space-6); gap: var(--space-6); }
	.site-footer__disclaimer, .site-footer__copy { padding-inline: var(--space-4); }
}

/* Componentuitvoer buiten de eigen secties (bijv. Joomla-standaardweergaven) krijgt de inhoudsbreedte */
.site-main > :not(.page-flow):not(.section):not(#system-message-container) { max-width: var(--content-max); margin-inline: auto; padding: var(--space-12); }
@media (max-width: 760px) { .site-main > :not(.page-flow):not(.section):not(#system-message-container) { padding: var(--space-8) var(--space-4); } }

/* Joomla-systeemberichten */
#system-message-container:empty { display: none; }
#system-message-container { max-width: var(--content-max); margin: var(--space-6) auto 0; padding-inline: var(--space-12); }

@media (prefers-reduced-motion: reduce) { .am * { transition: none !important; } }

/* ===== Homepage-secties (mijlpaal 4) ===== */
.page-flow > .section:last-child { border-bottom: 0; }
.lead { font-size: 19px; line-height: 30px; }

/* Oxblood hexagon als masker over de lijn-hexagon (logo-bestand blijft onveranderd) */
.hex-mark { display: block; background: var(--oxblood); -webkit-mask: url("../images/logo/amini-hexagon-line.svg") center / contain no-repeat; mask: url("../images/logo/amini-hexagon-line.svg") center / contain no-repeat; aspect-ratio: 401.84 / 348; }

/* 1 · Hero */
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-12); align-items: center; }
.hero__text h1 { margin-top: var(--space-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8) !important; }
.hero__visual { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: var(--space-12); }
.hero__visual .hex-mark { width: 100%; }

/* 2 · Werkwijze: drie kolommen met verticale haarlijnen */
.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-12); }
.columns__item { padding: 0 var(--space-8); border-left: 1px solid var(--line); }
.columns__item:first-child { padding-left: 0; border-left: 0; }
.columns__item h3 { margin-bottom: var(--space-3); }

/* 3 · Deelnemingen: tegels 3 / 2 / 1 */
.ventures { list-style: none; margin: var(--space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.venture { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8) var(--space-6); background: var(--surface-raised); border: 1px solid var(--line); border-radius: 0; }
.venture__mark { width: 28px; height: auto; }
.venture__name { font: 600 22px/28px var(--font-sans) !important; margin: 0; }
.venture__line { margin: 0 !important; }
.venture__text { color: var(--ink-muted); flex: 1 0 auto; }
.venture__text p { margin: 0; }
.venture__link { margin: 0; }

/* 4 · Focus: twee kolommen, definitielijst met haarlijnen */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); }
.deflist { margin: var(--space-6) 0 0; }
.deflist > div { padding: var(--space-4) 0; border-top: 1px solid var(--line); }
.deflist > div:last-child { border-bottom: 1px solid var(--line); }
.deflist dt { font-weight: 600; color: var(--ink); }
.deflist dd { margin: var(--space-1) 0 0; color: var(--ink-muted); }

/* 5 · Bestuur: portret 4:5 naast de tekst */
.board { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.board__portrait { aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; }
.board__portrait img { width: 100%; height: 100%; object-fit: cover; }
.board__text { max-width: var(--text-max); }
.board__text h2 { margin-bottom: var(--space-6); }

/* 6 · Contact: donkere band */
.section--contact { position: relative; overflow: hidden; border-bottom: 0; background: var(--surface); }
.contact { position: relative; }
.contact__text { position: relative; z-index: 1; max-width: var(--text-max); }
.contact__text h2 { margin-bottom: var(--space-6); }
.contact__mark { position: absolute; right: calc(-1 * var(--space-24)); top: 50%; width: 520px; transform: translateY(-50%); opacity: .55; pointer-events: none; }
.contact__details { margin-top: var(--space-8) !important; }
.contact__details a { color: var(--ink); }

/* Kleiner, lichter merkteken in de contactband zolang het naast de tekst niet past */
@media (max-width: 1240px) {
	.contact__mark { width: 300px; right: -120px; top: auto; bottom: -60px; transform: none; opacity: .2; }
}
@media (max-width: 1000px) {
	.ventures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.hero, .split, .board { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
	.hero__visual { aspect-ratio: auto; height: 240px; padding: var(--space-8); }
	.hero__visual .hex-mark { width: auto; height: 100%; }
	.columns { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-8); }
	.columns__item { padding: var(--space-6) 0; border-left: 0; border-top: 1px solid var(--line); }
	.columns__item:first-child { padding-top: 0; border-top: 0; }
	.ventures { grid-template-columns: minmax(0, 1fr); margin-top: var(--space-8); }
	.board__portrait { max-width: 320px; }
}

/* Tekstpagina's (colofon, privacy) */
.text-page > * { max-width: var(--text-max); }
.text-page h1 { margin-bottom: var(--space-8); }
.text-page h2 { font-size: 22px !important; line-height: 28px !important; margin: var(--space-12) 0 var(--space-3) !important; }
.text-page h1 + h2 { margin-top: 0 !important; }