/*
Theme Name: Dumoulin Lab
Theme URI: https://dumoulinlab.spinozacentre.nl
Author: Spinoza Centre for Neuroimaging
Description: Block theme for the Dumoulin lab (Computational Cognitive Neuroscience & Neuroimaging). Keeps the look of the original dumoulinlab site — blue accent, dark tab-style navigation, rotating header banner, right-floated bordered images, ruled section headings — modernized for responsive, self-hosted, accessible delivery. Design tokens live in theme.json; this file carries the parts JSON cannot express.
Version: 0.1.2
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dumoulin
*/

/* ---------------------------------------------------------------------------
   Header banner — modern replacement for the old Images/Headers/rotate.php.
   functions.php sets --dml-banner to a random *_header.png each page load.
   The blue band echoes the original #146ED8 header with the banner at left.
--------------------------------------------------------------------------- */
.dml-banner {
	background-color: var(--wp--preset--color--accent);
	background-image: var(--dml-banner, none);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: auto 100%;
	min-height: 128px;
}
@media (max-width: 782px) {
	.dml-banner { min-height: 84px; background-size: cover; }
}
/* Site title sits over the blue band, right-aligned, like the original H1. */
.dml-banner .wp-block-site-title a { color: #fff; text-decoration: none; }
.dml-banner .wp-block-site-title a:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   Navigation — dark bar with white "folder tab" for the current page,
   faithful to #linkList (black bar, rounded-top active tab, rust hover).
--------------------------------------------------------------------------- */
.dml-navbar { background-color: var(--wp--preset--color--navbar); }
/* Keep all tabs on one row; tightened size/gap so 8 items fit the content width.
   On mobile the block collapses to the overlay (hamburger) menu, so nowrap is
   only in effect on wider screens where there is room. */
.dml-navbar .wp-block-navigation {
	font-size: 0.85rem;
	font-weight: 500;
	flex-wrap: nowrap;
	gap: 0.1rem;
}
/* !important is needed: core ships `.…item__content.…item__content{color:inherit}`
   (doubled class, specificity 0,3,0), which otherwise makes the links inherit the
   body's dark text and disappear on the black bar. */
.dml-navbar .wp-block-navigation-item__content { color: #ffffff !important; padding: 0.3em 0.6em; white-space: nowrap; }
.dml-navbar .wp-block-navigation-item__content:hover,
.dml-navbar .wp-block-navigation-item__content:focus { color: var(--wp--preset--color--interaction) !important; }
.dml-navbar .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.dml-navbar .wp-block-navigation-item.current_page_item .wp-block-navigation-item__content {
	background: #ffffff;
	color: #111111 !important;
	font-weight: 700;
	border-top-left-radius: 7px;
	border-top-right-radius: 7px;
}
.dml-navbar .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content:hover {
	color: #111111 !important;
}
/* Mobile overlay menu: dark links on the light overlay panel. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #111111 !important;
	background: transparent;
}

/* ---------------------------------------------------------------------------
   Content images — faithful to #supportingText img (float right, thin black
   border, soft grey drop-shadow), modernized: capped width, clears on mobile.
--------------------------------------------------------------------------- */
@media (min-width: 600px) {
	.wp-block-post-content img,
	.wp-block-post-content iframe {
		float: right;
		margin: 0.35rem 0 1rem 1.5rem;
		max-width: min(46%, 360px);
		height: auto;
	}
}
.wp-block-post-content img {
	border: 1px solid #000;
	box-shadow: 3px 3px 5px #bbb;
	height: auto;
}
@media (max-width: 599px) {
	.wp-block-post-content img,
	.wp-block-post-content iframe {
		float: none;
		display: block;
		max-width: 100%;
		margin: 0 0 1rem;
	}
}
/* Keep long publication/reference lists tidy (no bullets, like the original ul). */
.wp-block-post-content ul { list-style: none; padding-left: 0; }

/* ---------------------------------------------------------------------------
   Quality floor: visible keyboard focus, honour reduced motion.
--------------------------------------------------------------------------- */
:where(a, button, input, .wp-block-navigation-item a):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}