/* Landing page: black clock bar on top, logo centred on white below. */

.ad-landing {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

.ad-clock {
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ad-clock__date {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.ad-clock__time {
	font-weight: 700;
}

.ad-landing__logo {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ad-landing__tagline {
	margin: 1em 0 0;
}

.ad-landing__logo .wp-block-image {
	width: min(90vw, 1100px);
	margin: 0;
}

.ad-landing__logo img {
	width: 100%;
	height: auto;
	transition: opacity 0.2s ease;
}

.ad-landing__logo a:hover img,
.ad-landing__logo a:focus-visible img {
	opacity: 0.75;
}

/* Header menu stays on the right, also when it wraps below the logo. */

header .wp-block-navigation {
	margin-left: auto;
}

header .wp-block-navigation__container {
	justify-content: flex-end;
}

/* Inner pages: small logo in the header. */

.ad-header-logo {
	margin: 0;
}

.ad-header-logo img {
	width: clamp(180px, 22vw, 280px);
	height: auto;
}

/* Spaced lowercase labels, as on the current site. */

.is-style-ad-spaced,
.ad-spaced {
	text-transform: lowercase;
	letter-spacing: 0.3em;
}

/* Editor: the landing page must not fill the whole canvas height. */

.editor-styles-wrapper .ad-landing {
	min-height: 70vh;
}

/*
 * Home picture grid. Small tiles are one column and one row, medium two by two,
 * large three by three. Row height keeps small images at 4:5 plus the caption.
 */

.is-style-ad-mosaic {
	--ad-cols: 9;
	--ad-gap: 10px;
	--ad-pad: var(--wp--preset--spacing--40);
	--ad-caption: 2.75rem;
	--ad-col: calc((100vw - 2 * var(--ad-pad) - (var(--ad-cols) - 1) * var(--ad-gap)) / var(--ad-cols));
	display: grid;
	grid-template-columns: repeat(var(--ad-cols), minmax(0, 1fr));
	grid-auto-rows: calc(var(--ad-col) * 1.25 + var(--ad-caption));
	grid-auto-flow: dense;
	gap: var(--ad-gap);
	padding-left: var(--ad-pad) !important;
	padding-right: var(--ad-pad) !important;
}

.is-style-ad-mosaic > * {
	margin: 0 !important;
	max-width: none !important;
}

.is-style-ad-mosaic .wp-block-image {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.is-style-ad-mosaic .wp-block-image.is-style-ad-tile-medium {
	grid-column: span 2;
	grid-row: span 2;
}

.is-style-ad-mosaic .wp-block-image.is-style-ad-tile-large {
	grid-column: span 3;
	grid-row: span 3;
}

.is-style-ad-mosaic .wp-block-image > a {
	display: block;
	flex: 1;
	min-height: 0;
}

.is-style-ad-mosaic .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #eceff3;
	transition: opacity 0.2s ease;
}

.is-style-ad-mosaic .wp-block-image > img {
	flex: 1;
	min-height: 0;
}

.is-style-ad-mosaic .wp-block-image a:hover img,
.is-style-ad-mosaic .wp-block-image a:focus-visible img {
	opacity: 0.85;
}

.is-style-ad-mosaic .wp-element-caption {
	flex: 0 0 var(--ad-caption);
	margin: 0;
	padding-top: 0.6rem;
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}

@media (max-width: 1199px) {
	.is-style-ad-mosaic {
		--ad-cols: 6;
	}
}

@media (max-width: 781px) {
	.is-style-ad-mosaic {
		--ad-cols: 2;
		--ad-gap: 8px;
	}

	.is-style-ad-mosaic .wp-block-image.is-style-ad-tile-large {
		grid-column: span 2;
		grid-row: span 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ad-landing__logo img,
	.is-style-ad-mosaic .wp-block-image img {
		transition: none;
	}
}

/* Home menu grid: one large and four small picture links, captions styled like the menu. */

.is-style-ad-mosaic.ad-mosaic-menu {
	--ad-cols: 4;
	/* Tiles carry their own words, so no caption row. */
	--ad-caption: 0px;
}

.ad-mosaic-menu .wp-element-caption {
	font-size: 0.8125rem;
	font-weight: 400;
	text-transform: lowercase;
	letter-spacing: 0.3em;
}

@media (max-width: 781px) {
	.is-style-ad-mosaic.ad-mosaic-menu {
		--ad-cols: 2;
	}
}

/* On wider screens the two rows shrink to fit below the header and page title, so the whole grid shows without scrolling. */
@media (min-width: 782px) {
	.is-style-ad-mosaic.ad-mosaic-menu {
		grid-auto-rows: max(140px, min(var(--ad-col) * 1.25, (100svh - 21rem - var(--ad-gap)) / 2));
	}
}

/* Small body text (10pt), used for the Services page. Headings stay bold but drop to text size. */

.ad-text-small {
	font-size: 10pt;
	line-height: 1.6;
}

.ad-text-small :is(h2, h3) {
	font-size: 10pt;
	font-style: normal;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.6;
	margin-block: 2em 0.5em;
}

.ad-text-small > :first-child {
	margin-top: 0;
}

.ad-text-small ul {
	padding-left: 1.2em;
}

/* Keep the footer at the bottom of the window on short pages. */

.wp-site-blocks {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group:has(> main) {
	flex: 1;
}

.wp-site-blocks > footer {
	margin-top: 0;
}

/* Consultant name that opens a dropdown bio. */

.ad-bio summary {
	display: inline-block;
	cursor: pointer;
	font-size: 14pt;
	font-weight: 700;
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ad-bio summary::-webkit-details-marker {
	display: none;
}

.ad-bio summary::after {
	content: " +";
}

.ad-bio[open] summary::after {
	content: " −";
}

.ad-bio summary:hover {
	text-decoration: none;
}

.ad-bio summary:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.ad-bio[open] > :not(summary) {
	max-width: 65ch;
}

.ad-bio[open] summary {
	margin-bottom: 1em;
}

.ad-bio summary + * {
	margin-top: 0;
}

/* Home grid tile that shows words instead of a picture. */

.is-style-ad-mosaic .ad-tile-text {
	display: flex;
	flex-direction: column;
	min-height: 0;
	container-type: inline-size;
}

.ad-tile-text__words {
	flex: 1;
	min-height: 0;
	margin: 0;
	display: flex;
}

.ad-tile-text__words a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eceff3;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	/* Scales with the tile so the longest word (PRODUCTION) fits on one line. */
	font-size: min(3rem, 11.5cqi);
	line-height: 0.95;
	padding: 0.5em;
	overflow-wrap: anywhere;
	letter-spacing: -0.01em;
	text-align: center;
	transition: opacity 0.2s ease;
}

.ad-tile-text__words a:hover,
.ad-tile-text__words a:focus-visible {
	opacity: 0.85;
}

.is-style-ad-mosaic .ad-tile-text.is-style-ad-tile-medium {
	grid-column: span 2;
	grid-row: span 2;
}

.ad-tile-text.is-style-ad-tile-medium .ad-tile-text__words a {
	font-size: clamp(2.5rem, 7vw, 6.5rem);
}

@media (max-width: 781px) {
	.ad-tile-text.is-style-ad-tile-medium .ad-tile-text__words a {
		font-size: clamp(2rem, 12vw, 4rem);
	}
}

/* Manufacturer world map: production countries are tinted, and hovering or tapping one shows a white supplier bubble. */

.ad-map {
	position: relative;
	/* Narrow enough that the cropped map (1908 by 1020) fits below the header and page title without scrolling. */
	max-width: min(1200px, (100svh - 19rem) * 1908 / 1020);
	margin-left: auto !important;
	margin-right: auto !important;
}

.ad-map__svg {
	display: block;
	width: 100%;
	height: auto;
}

.ad-map__country {
	fill: #000;
	fill-opacity: 0.12;
	/* Invisible stroke widens the hover area of small countries such as Portugal. */
	stroke: #000;
	stroke-opacity: 0;
	stroke-width: 12;
	stroke-linejoin: round;
	cursor: pointer;
	outline: none;
	transition: fill-opacity 0.2s ease;
}

.ad-map__country:hover,
.ad-map__country:focus {
	fill-opacity: 0.35;
}

.ad-map__country:focus-visible {
	stroke-opacity: 1;
	stroke-width: 3;
}

.ad-map__bubble {
	position: absolute;
	transform: translate(-60%, calc(-100% - 14px));
	width: max-content;
	max-width: min(16rem, 60vw);
	padding: 0.75rem 1rem;
	background: #fff;
	color: #000;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	font-size: 10pt;
	line-height: 1.5;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ad-map__bubble strong {
	display: block;
}

.ad-map__bubble::after {
	content: "";
	position: absolute;
	left: 60%;
	top: 100%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: #fff;
}

/* Klein blue for countries with a supplier. */

.ad-map__country.is-blue {
	fill: #1e1cb9;
	fill-opacity: 1;
	transition: fill 0.2s ease;
}

.ad-map__country.is-blue:hover,
.ad-map__country.is-blue:focus {
	fill: #13117a;
}

.ad-map:has([data-country="sweden"]:hover, [data-country="sweden"]:focus) .ad-map__bubble[data-country="sweden"],
.ad-map:has([data-country="portugal"]:hover, [data-country="portugal"]:focus) .ad-map__bubble[data-country="portugal"],
.ad-map:has([data-country="italy"]:hover, [data-country="italy"]:focus) .ad-map__bubble[data-country="italy"],
.ad-map:has([data-country="china"]:hover, [data-country="china"]:focus) .ad-map__bubble[data-country="china"],
.ad-map:has([data-country="vietnam"]:hover, [data-country="vietnam"]:focus) .ad-map__bubble[data-country="vietnam"] {
	opacity: 1;
	visibility: visible;
}

/* Contact form on the Get in touch page. */

.ad-contact {
	max-width: 480px;
	font-size: 10pt;
}

.ad-contact__field {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin: 0 0 1.25em;
}

.ad-contact input,
.ad-contact textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6em 0.75em;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.ad-contact textarea {
	resize: vertical;
}

.ad-contact input:focus-visible,
.ad-contact textarea:focus-visible,
.ad-contact__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.ad-contact__submit {
	padding: 0.7em 2em;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.ad-contact__submit:hover {
	opacity: 0.85;
}

.ad-contact__trap {
	position: absolute;
	left: -9999px;
}

.ad-contact__notice {
	font-size: 10pt;
}

.ad-contact__notice--error {
	font-weight: 700;
}

/* Who we are picture grid: three equal 4:5 pictures in a row, stacked on phones. */

.ad-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.ad-photo-grid > .wp-block-image {
	margin: 0;
}

.ad-photo-grid .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: #eceff3;
}

/* On wider screens each picture is capped so its 4:5 height fits below the header and page title without scrolling. */
@media (min-width: 782px) {
	.ad-photo-grid {
		grid-template-columns: repeat(3, minmax(0, max(160px, (100svh - 19rem) * 4 / 5)));
		justify-content: start;
	}
}

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

/* Picture captions show as a white 80% bubble over the picture on hover or tap. */

.ad-photo-grid > .wp-block-image {
	position: relative;
}

.ad-photo-grid .wp-element-caption {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	margin: 0;
	padding: 0.7rem 0.8rem;
	background: rgba(255, 255, 255, 0.8);
	color: #000;
	font-size: 8pt;
	line-height: 1.5;
	text-align: left;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}

.ad-photo-grid .wp-element-caption strong {
	display: inline-block;
	margin-bottom: 0.4em;
	font-size: 10pt;
	font-weight: 900;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1;
}

.ad-photo-grid > .wp-block-image:hover .wp-element-caption,
.ad-photo-grid > .wp-block-image:focus-within .wp-element-caption {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ad-photo-grid .wp-element-caption {
		transition: none;
	}
}

/* Footer: brand links sit on the same line, right of the copyright. */

.ad-footer__link {
	margin-left: 2.5em;
	color: inherit;
	text-decoration: underline;
}

.ad-footer__link:hover,
.ad-footer__link:focus-visible {
	text-decoration: none;
}

@media (max-width: 781px) {
	.ad-footer__link {
		display: block;
		margin: 0.6em 0 0;
	}
}

/* Footer text uses tighter letter spacing than other spaced text. */

.ad-footer .ad-spaced {
	letter-spacing: 0.1em;
	text-align: center;
}

/* Home grid tile colours, picked by the page each tile links to. */

.ad-tile-text__words a[href*="/what-we-do/"] {
	background: #002fa7;
	color: #fff;
}

.ad-tile-text__words a[href*="/how-we-do-it/"] {
	background: #e8562a;
	color: #000;
}

.ad-tile-text__words a[href*="/past-projects/"] {
	background: #d9f26b;
	color: #000;
}

.ad-tile-text__words a[href*="/who-we-are/"] {
	background: #f4b8c8;
	color: #000;
}

.ad-tile-text__words a[href*="/get-in-touch/"] {
	background: #000;
	color: #fff;
}