/*
Theme Name: Alligator
Theme URI: https://alligatordesign.click/
Author: Alligator Design (Geert Valère Allegaert)
Author URI: https://alligatordesign.click/
Description: The Alligator base theme: calm, fast, versatile and plugin-free websites built to last — no tracking scripts, no third-party bloat. Created and maintained by Alligator Design. This theme never receives updates from wordpress.org.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0.56-alligatordesign
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alligator
Update URI: https://alligatordesign.click/alligator-theme
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, sticky-post, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}


/* ============================================================
   Alligator Carousel — scroll-snap, no JavaScript, no plugin.
   Usage: add the class "alligator-carousel" to a Group block
   that contains a Gallery block (or insert the ready-made
   pattern: Alligator → Carousel).
   ============================================================ */
.alligator-carousel .wp-block-gallery.has-nested-images {
	display: flex;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	padding-block-end: 0.75rem; /* room for the scrollbar */
}
.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image {
	flex: 0 0 85% !important;
	width: 85% !important;
	scroll-snap-align: center;
	margin: 0;
}
.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 782px) {
	.alligator-carousel .wp-block-gallery.has-nested-images figure.wp-block-image {
		flex-basis: 45% !important;
		width: 45% !important;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.alligator-carousel .wp-block-gallery.has-nested-images {
		scroll-behavior: smooth;
	}
}
/* ============================================================
   Alligator sticky header — position, glass, edge.
   ============================================================ */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
}

header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* The page's own base colour, translucent — not white, so the header
	   belongs to the palette instead of floating on top of it. */
	background-color: color-mix(in srgb, var(--wp--preset--color--base, #fff) 88%, transparent);
	backdrop-filter: blur(8px);
	pointer-events: none;
}

/* Header hide-on-scroll (variant B): assets/js/header-hide.js sets an
   inline "top" (minus the header's own height) when you scroll down past
   the first screen and clears it the moment you scroll up. Only "top"
   moves — never "transform", which would break the fixed mobile-menu
   overlay. Without JavaScript the header simply stays sticky. */
header.wp-block-template-part {
	transition: top 0.35s ease;
}
header.wp-block-template-part:has(.is-menu-open) {
	top: var(--wp-admin--admin-bar--height, 0px) !important;
}
/* ============================================================
   Alligator edge shadows — header casts down, footer casts up.
   One token, two directions, always in sync.
   ============================================================ */
:root {
	--alligator-edge-shadow: 24px rgb(0 0 0 / 0.08);
}
header.wp-block-template-part {
	box-shadow: 0 8px var(--alligator-edge-shadow);
}
footer.wp-block-template-part {
	box-shadow: 0 -8px var(--alligator-edge-shadow);
}

.alligator-languages { font-size: 0.85em; letter-spacing: 0.05em; }
.alligator-languages strong { opacity: 0.5; }

/* ============================================================
   Alligator mono — systeemstack, geen bestanden, geen download.
   ============================================================ */
code, kbd, pre, samp {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	font-size: 0.9em;
}

/* ============================================================
   Alligator taalswitch.
   ============================================================ */
.alligator-languages { font-size: 0.85em; letter-spacing: 0.05em; }
.alligator-languages--dropdown { position: relative; }
.alligator-languages--dropdown summary {
	cursor: pointer;
	list-style: none; /* geen driehoekje */
}
.alligator-languages--dropdown summary::after { content: " ▾"; font-size: 0.8em; }
.alligator-languages--dropdown nav {
	position: absolute;
	right: 0;
	background: var(--wp--preset--color--base);
	box-shadow: 0 8px var(--alligator-edge-shadow);
	padding: 0.5rem 0.9rem;
	display: grid;
	gap: 0.4rem;
	z-index: 101; /* boven de sticky header-inhoud */
}

/* ============================================================
   Alligator image protection — opt-in via class, geen echte
   beveiliging, enkel een drempel tegen de occasionele rechtsklik.
   ============================================================ */
.alligator-protect-image,
.alligator-protect-image img {
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
}

/* ============================================================
   Alligator Previous/Next nav bar — see alligator_render_prevnext_nav()
   in functions.php. Not wired to any template by default; opt in per
   project. Uses theme preset colors, so it follows the active style
   variation automatically.
   ============================================================ */
.alligator-prevnext {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
}
.alligator-prevnext__link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
	color: inherit;
	max-width: 45%;
}
.alligator-prevnext__link--next {
	text-align: right;
	margin-left: auto;
}
.alligator-prevnext__label {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}
.alligator-prevnext__title {
	font-size: 1.05rem;
}
a.alligator-prevnext__link:hover .alligator-prevnext__title {
	color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-prevnext__link--disabled {
	opacity: 0.35;
	cursor: default;
}

/* ============================================================
   Alligator signup form — see [alligator_signup_form] shortcode and
   the honeypot/overlay-feedback pattern in functions.php. Not enqueued
   or shown anywhere until a project actually places the shortcode.
   ============================================================ */
.alligator-signup-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
}
.alligator-signup-form input[type="email"] {
	flex: 1 1 16rem;
	padding: 0.6rem 1rem;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 25%, transparent);
	border-radius: 0.5rem;
}
.alligator-signup-form button {
	padding: 0.6rem 1.4rem;
	border-radius: 0.5rem;
	border: none;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.alligator-signup-overlay {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	opacity: 0;
	transition: opacity 0.35s ease;
}
.alligator-signup-overlay.is-open {
	opacity: 1;
}
.alligator-signup-card {
	position: relative;
	max-width: 28rem;
	padding: 2rem 2.25rem;
	background: var(--wp--preset--color--base);
	border-radius: 0.75rem;
	box-shadow: 0 16px 48px rgb(0 0 0 / 0.25);
	transform: translateY(8px);
	transition: transform 0.35s ease;
}
.alligator-signup-overlay.is-open .alligator-signup-card {
	transform: translateY(0);
}
.alligator-signup-card--error {
	border-top: 3px solid #b32d2e;
}
.alligator-signup-card--success {
	border-top: 3px solid var(--wp--preset--color--accent-1, #2d7a3e);
}
.alligator-signup-overlay__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: 0.6;
}
.alligator-signup-overlay__close:hover {
	opacity: 1;
}


/* ============================================================
   Alligator one-pager — section backgrounds + reveal-on-scroll.
   Origin: the look & feel of the Carrd version of alligatordesign
   (subtle wave/plus textures, content sliding in from the right).
   Usage: give a full-width Group block one of the background classes
   and, optionally, "alligator-reveal" (the whole group slides in) or
   "alligator-reveal-children" (its direct children slide in one after
   another). Script: assets/js/reveal.js — content is always visible
   without JavaScript, and never moves for prefers-reduced-motion.
   ============================================================ */

/* Two textures, straight from the Carrd site: a sparse "plus" pattern on
   a warm base, and soft waves on white. Both are inline SVG (one request
   less) and light: green pluses at 16%, clay waves at 14% opacity. */
.alligator-bg-plus {
	background-color: var(--wp--preset--color--base, #FFFBF7);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1024 1024%22 width=%221024%22 height=%221024%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bstroke-linecap:square%3Bstroke-width:7px%3Bstroke:rgba(58,122,14,0.16)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M 256 192 L 256 320 M 192 256 L 320 256%22/%3E%3Cpath d=%22M 768 704 L 768 832 M 704 768 L 832 768%22/%3E%3C/svg%3E");
	background-size: 221px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
}
.alligator-bg-waves {
	background-color: var(--wp--preset--color--accent-5, #FFFFFF);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bfill:none%3Bstroke-width:6px%3Bstroke:rgba(181,86,31,0.14)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M0,448c128,0,128-128,256-128s128,128,256,128%22/%3E%3Cpath d=%22M0,192c128,0,128-128,256-128s128,128,256,128%22/%3E%3C/svg%3E");
	background-size: 282px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
}

/* Deep section: dark green with light text and faint white waves —
   the contrast beat between the light sections. */
.alligator-bg-deep {
	background-color: var(--wp--preset--color--accent-3, #234A11);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 width=%22512%22 height=%22512%22 preserveAspectRatio=%22none%22%3E%3Cstyle%3Epath%7Bfill:none%3Bstroke-width:6px%3Bstroke:rgba(255,255,255,0.10)%3Bvector-effect:non-scaling-stroke%7D%3C/style%3E%3Cpath d=%22M0,448c128,0,128-128,256-128s128,128,256,128%22/%3E%3Cpath d=%22M0,192c128,0,128-128,256-128s128,128,256,128%22/%3E%3C/svg%3E");
	background-size: 282px auto;
	background-position: 50% 50%;
	background-repeat: repeat;
	color: var(--wp--preset--color--base, #F4F8EE);
}
.alligator-bg-deep h1,
.alligator-bg-deep h2,
.alligator-bg-deep h3,
.alligator-bg-deep .alligator-label,
.alligator-bg-deep .alligator-muted,
.alligator-bg-deep .alligator-top a {
	color: inherit;
}
.alligator-bg-deep .alligator-label,
.alligator-bg-deep .alligator-muted {
	opacity: 0.75;
}
.alligator-bg-deep a {
	color: inherit;
}

/* Reveal: hidden state is only applied once the script has confirmed it
   runs (html.alligator-js) — so without JS nothing is ever invisible. */
.alligator-js .alligator-reveal,
.alligator-js .alligator-reveal-children > * {
	opacity: 0;
	transform: translateX(3rem);
	transition: opacity 0.75s ease 0.125s, transform 0.75s ease 0.125s;
	will-change: opacity, transform;
}
.alligator-js .alligator-reveal.is-visible,
.alligator-js .alligator-reveal-children.is-visible > * {
	opacity: 1;
	transform: none;
	will-change: auto;
}
/* Children arrive one after another (Carrd's "stagger: 125"). */
.alligator-js .alligator-reveal-children.is-visible > :nth-child(2) { transition-delay: 0.25s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(3) { transition-delay: 0.375s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(4) { transition-delay: 0.5s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(5) { transition-delay: 0.625s; }
.alligator-js .alligator-reveal-children.is-visible > :nth-child(n+6) { transition-delay: 0.75s; }

@media (prefers-reduced-motion: reduce) {
	.alligator-js .alligator-reveal,
	.alligator-js .alligator-reveal-children > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Small typographic helpers used by the one-pager pattern. */
.alligator-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-4, #807D7A);
}
.alligator-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}
.alligator-muted {
	color: var(--wp--preset--color--accent-4, #807D7A);
}
/* ============================================================
   Alligator pull quote — magazine style. One sentence lifted out of the
   text, set large, hanging into the margin with the body text flowing
   around it. Use the core "Pull quote" block and give it left or right
   alignment in the toolbar; without an alignment it centres in the
   column, which is the safe fallback for narrow screens.

   The breakout is done with a negative margin that grows with the
   viewport: at 60rem the quote leans a little into the white space, on a
   wide screen it sits almost entirely in the margin. Below 60rem there
   is no margin to hang in, so the float is dropped entirely — a floated
   quote on a phone would leave a two-word-wide column beside it.

   Convention: a pull quote REPEATS a sentence from the text around it.
   It is a signpost for whoever is scanning, not new information.
   ============================================================ */
.wp-block-pullquote,
.alligator-pull {
	margin-block: var(--wp--preset--spacing--60);
}
.wp-block-pullquote blockquote {
	margin: 0;
}
.wp-block-pullquote p,
.alligator-pull {
	margin: 0;
	/* Light and italic rather than bold: at this size weight shouts, and a
	   quote should invite rather than interrupt. Atkinson is a variable
	   font, so weight 300 and italic cost no extra file — the page still
	   loads only two typefaces. (Fraunces was tried here and dropped: too
	   much character for a quiet page.) */
	font-family: var(--wp--preset--font-family--atkinson);
	font-weight: 300;
	font-style: italic;
	/* Between the body text and the x-large preset: big enough to read as a
	   highlight, small enough to stay comfortable in a narrow floating
	   column. Fluid, so it never overwhelms a phone. */
	font-size: clamp(1.5rem, 1.15rem + 0.9vw, 1.85rem);
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast, currentColor);
	text-wrap: balance;
}
/* A light box instead of a rule: it holds the quote together as an object
   on the page, which a floating block needs, and the tinted ground keeps
   it from reading as a form field. Kept deliberately soft — a hard border
   would compete with the text it is quoting. */
.wp-block-pullquote,
.alligator-pull {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1, currentColor) 28%, transparent);
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1, currentColor) 5%, transparent);
}
.wp-block-pullquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--wp--preset--font-family--atkinson);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-4, currentColor);
}
/* No alignment: centred in the column. */
.wp-block-pullquote:not(.alignleft):not(.alignright),
.alligator-pull:not(.alignleft):not(.alignright) {
	text-align: center;
}

/* Narrow screens: no floating at all. An aligned quote is reset to the full
   column and centred, exactly like an unaligned one — a floating block beside
   a phone column would leave a ribbon of two words. */
@media (max-width: 65.99rem) {
	.wp-block-pullquote.alignleft,
	.wp-block-pullquote.alignright,
	.alligator-pull.alignleft,
	.alligator-pull.alignright {
		float: none;
		width: auto;
		max-width: 100%;
		margin-inline: 0;
		text-align: center;
	}
}

/* From 66rem there is room for a float AND a readable column beside it.
   The rule behind every step below: whatever the quote takes from the
   42rem text column, at least 24rem of text must remain — about eleven
   words a line, the point where prose still reads as prose. So the quote
   grows only as fast as the margin it can hang in. */
@media (min-width: 66rem) {
	.wp-block-pullquote.alignright,
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignright,
	.alligator-pull.alignleft {
		width: min(20rem, 45%);
		text-align: left;
		margin-block: 0.4rem 1.8rem;
	}
	.wp-block-pullquote.alignright,
	.alligator-pull.alignright {
		float: right;
		margin-left: 2.25rem;
		margin-right: -5rem;
	}
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignleft {
		float: left;
		margin-right: 2.25rem;
		margin-left: -5rem;
	}
}

@media (min-width: 80rem) {
	.wp-block-pullquote.alignright,
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignright,
	.alligator-pull.alignleft {
		width: min(22rem, 45%);
	}
	.wp-block-pullquote.alignright,
	.alligator-pull.alignright {
		margin-right: -9rem;
	}
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignleft {
		margin-left: -9rem;
	}
}

@media (min-width: 95rem) {
	.wp-block-pullquote.alignright,
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignright,
	.alligator-pull.alignleft {
		width: min(24rem, 48%);
	}
	.wp-block-pullquote.alignright,
	.alligator-pull.alignright {
		margin-right: -13rem;
	}
	.wp-block-pullquote.alignleft,
	.alligator-pull.alignleft {
		margin-left: -13rem;
	}
}

/* A heading never starts beside a floating quote. */
h2.wp-block-heading,
h3.wp-block-heading {
	clear: both;
}
/* On the dark section the green would disappear — inherit instead. */
.alligator-bg-deep .wp-block-pullquote p,
.alligator-bg-deep .alligator-pull {
	color: inherit;
}
.alligator-bg-deep .wp-block-pullquote,
.alligator-bg-deep .alligator-pull {
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	background: color-mix(in srgb, currentColor 8%, transparent);
}

/* ============================================================
   Alligator typographic refinements — magazine details that make a page
   feel looked-after without anyone being able to say why.
   ============================================================ */

/* Hanging punctuation: quotation marks and dashes sit a fraction outside
   the column, so the left edge of the text looks straight instead of
   nibbled. Supported in Safari today, ignored elsewhere — a refinement
   that costs nothing when it is missing. */
html {
	hanging-punctuation: first last;
}

/* Abbreviations in small capitals: WCAG, PDF, CMS and their kind stop
   shouting in the middle of a sentence. Applies to <abbr> — which is
   also where the expansion belongs, in its title attribute. */
abbr {
	font-variant-caps: all-small-caps;
	letter-spacing: 0.04em;
	text-decoration: none;
}
abbr[title] {
	cursor: help;
	border-bottom: 1px dotted color-mix(in srgb, currentColor 35%, transparent);
}

/* Page metadata — "Last updated: …" on legal pages. Quieter and smaller than
   body text, so it reads as a note about the document rather than as part of
   it. Add the class to the paragraph: block sidebar → Advanced →
   Additional CSS class(es) → alligator-update. */
.alligator-update {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent-4, #807D7A);
}
/* An offer/work card: heading sits close to its text, cards far apart. */
.alligator-card > h3 {
	margin-block-end: 0.5rem;
}
.alligator-card > p:not(:last-child) {
	margin-block-end: 0.75rem;
}
.alligator-card p.alligator-muted {
	font-size: var(--wp--preset--font-size--small);
}
/* Email addresses from [alligator_email]. The plain class is the DEFAULT and
   deliberately quiet: in body text an address should run along with the
   sentence, not shout. Only a long address gets permission to break. */
.alligator-email a {
	word-break: break-word;
}
/* The display version — [alligator_email size=big] — for a contact section
   where the address IS the call to action. The class also works by hand on a
   paragraph, for an address typed without the shortcode. */
.alligator-email--big a,
p.alligator-email--big a {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.02em;
	text-decoration: none;
}
.alligator-email--big a:hover {
	text-decoration: underline;
}
/* The mascot: never wider than its column, gently scaled. */
.alligator-mascot img {
	width: clamp(72px, 12vw, 120px);
	height: auto;
}

/* Kop naar beneden, bijvoorbeeld als de tekening naar de tekst eronder moet
   wijzen. Een halve draai en geen spiegeling: spiegelen keert de krul van de
   staart om, en dat valt op. */
.alligator-mascot--down img {
	transform: rotate(180deg);
}

/* ============================================================
   Alligator header nav — focus without the tall black bars.
   Mouse/touch focus shows nothing (that was the complaint: the
   browser's default outline drawn as vertical bars on inline links);
   keyboard focus (:focus-visible) shows a clear, rounded ring in the
   accent colour, so Tab-navigation always stays visible. WCAG 2.4.7.
   ============================================================ */
.alligator-hs-nav-desktop a:focus {
	outline: none;
	box-shadow: none;
}
.alligator-hs-nav-desktop a:focus-visible,
.alligator-hs-site-title:focus-visible,
.alligator-hs-cta:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1, currentColor);
	outline-offset: 0.25em;
	border-radius: 0.25em;
}

/* ============================================================
   Alligator header (simple / one-pager) — layout of the flat HTML
   headers in patterns/header-simple.php and patterns/header-onepager.php.
   Lived in the Site Editor's "Extra CSS" (database) until 13 Sep 2026;
   now in the theme, so every clone and fresh install gets it.
   Position, glass and hide-on-scroll: see "Alligator sticky header".
   ============================================================ */
.alligator-site-header-simple {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.5rem;
	max-width: var(--wp--style--global--wide-size, 72rem);
	margin-inline: auto;
	padding-block: 0.75rem;
	padding-inline: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--medium);
}
.alligator-hs-brand {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}
.alligator-hs-site-title {
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, currentColor);
	white-space: nowrap;
}
.alligator-hs-site-title:hover {
	color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-hs-middle {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1.5rem;
	min-width: 0;
}
.alligator-hs-nav-desktop {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
}
.alligator-hs-nav-desktop a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast, inherit);
	padding-block: 0.25rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: -0.01em;
}
.alligator-hs-nav-desktop a:hover {
	color: var(--wp--preset--color--contrast, inherit);
	text-decoration: underline;
	text-underline-offset: 0.35em;
	text-decoration-color: var(--wp--preset--color--accent-1, currentColor);
}
.alligator-hs-cta {
	display: inline-block;
	padding: 0.55rem 1.3rem;
	border-radius: 2rem;
	/* Outlined, in the brand colour: the header stays two-tone (contrast +
	   accent-1); the filled clay button is reserved for the page itself. */
	border: 1.5px solid var(--wp--preset--color--accent-1, currentColor);
	background: transparent;
	color: var(--wp--preset--color--accent-1, currentColor);
	font-family: var(--wp--preset--font-family--manrope);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.alligator-hs-cta:hover {
	background: var(--wp--preset--color--accent-1, currentColor);
	color: var(--wp--preset--color--base, #fff);
}
/* The hamburger (wp:navigation, header-simple only) is a phone thing. */
.alligator-nav-simple-mobile {
	display: none;
}
@media (max-width: 781px) {
	/* header-simple: hide the inline nav, show the hamburger next to the logo. */
	.alligator-site-header-simple:not(.alligator-site-header-onepager) .alligator-hs-middle {
		display: none;
	}
	.alligator-site-header-simple:not(.alligator-site-header-onepager) .alligator-nav-simple-mobile {
		display: block;
	}
	/* header-onepager: no hamburger — the nav wraps onto a second row. */
	.alligator-site-header-onepager {
		grid-template-columns: 1fr auto;
		row-gap: 0.5rem;
	}
	.alligator-site-header-onepager .alligator-hs-middle {
		grid-column: 1 / -1;
		justify-content: flex-start;
	}
	.alligator-site-header-onepager .alligator-hs-nav-desktop {
		font-size: var(--wp--preset--font-size--small);
		gap: 0.25rem 1rem;
	}
}

/* ============================================================
   Alligator in-page navigation helpers (one-pager).
   ============================================================ */
/* Jumping to a section lands on its top edge, flush with the top of the
   window: the texture of the section you are going to starts exactly where
   the window starts, with no sliver of the previous one left above it.
   No allowance is made for the header, for two reasons: it hides itself on
   the way down (so any allowance would show up as an empty strip), and
   every section carries enough padding of its own to keep its heading clear
   of the header on the way up. Other anchor targets — a heading inside an
   article, say — do need the allowance, hence the second rule. */
section.wp-block-group[id] {
	scroll-margin-top: 0;
}

:where(h1, h2, h3, h4)[id],
.wp-block-group:not(section)[id] {
	scroll-margin-top: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
/* Losse blokken tekst die iets groter en rustiger mogen staan dan de
   lopende tekst — bijvoorbeeld de afgesloten projecten onder "Earlier work".
   Zet de class op de Group (blok → Geavanceerd → Extra CSS-class), niet op
   elke alinea apart: dan blijft de opmaak uit de inhoud, en verandert ze mee
   als de typografie van de site ooit verandert. */
.alligator-note-large p {
	font-size: 1.35rem;
	line-height: 1.3;
}

@media (max-width: 47.99rem) {
	.alligator-note-large p {
		font-size: 1.15rem;
	}
}

/* Small "↑ Top" link at the end of a section. */
.alligator-top {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.alligator-top a {
	text-decoration: none;
	color: var(--wp--preset--color--accent-4, currentColor);
	padding: 0.5rem 0.9rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 2rem;
}
.alligator-top a:hover,
.alligator-top a:focus-visible {
	color: var(--wp--preset--color--contrast, currentColor);
	border-color: currentColor;
}