/* ==========================================================================
   Base
   ========================================================================== */

[hidden] {
	display: none;
}

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 
 	PPK: TEST if still necessary
 
 */

html {
  font-family: sans-serif; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
  scroll-behavior: smooth;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}


/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/**
 * Improve readability of pre-formatted text in all browsers.
 */

pre {
  white-space: pre-wrap;
}

/**
 * Set consistent quote types.
 */

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}


/* ==========================================================================
   Forms
   ========================================================================== */

/**
 * Define consistent border, margin, and padding.
 */

form > fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}


/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */

button,
input,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}


/*
 * CSS Day 2025
 * Original styles by Stephen Hay,
 * maintaned for many years by Krijn Hoetmer, https://krijnhoetmer.nl
 * Subsequently messed up by ppk
 */

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font: 100% Source Code Pro, Inconsolata, Menlo, monospace;
  background-color: white;
  margin: 0;
  color: #222;
  -webkit-font-smoothing: antialiased;
  --yearColour: royalblue;
  --lineHeight: 1.618em;
}

ody {	
	transition: --yearColour 2s;
	&:has(.date strong:is(:hover,:active)) {
		--yearColour: royalblue;
		transition-delay: 1s;
	}
	
	/* <pre class="date">.css-day.<strong class="preview">2026</strong> { */
	
}

::selection {
	background: var(--yearColour);
	color: white;
}

@property --yearColour {
	syntax: '<color>';
	inherits: true;
	initial-value: royalblue;
}

.y2013 {--yearColour: red}
.y2014 {--yearColour: navy}
.y2015 {--yearColour: olivedrab}
.y2016 {--yearColour: hotpink}
.y2017 {--yearColour: goldenrod}
.y2018 {--yearColour: tomato}
.y2019 {--yearColour: deepskyblue}
.y2022 {--yearColour: mediumseagreen}
.y2023 {--yearColour: darkorchid}
.y2024 {--yearColour: peru}
.y2025 {--yearColour: firebrick}
.y2026 {--yearColour: royalblue}


.date strong {
	cursor: pointer;
}


.smaller {
	font-size: 80%;
}

strong {
	color: var(--yearColour);
}

header {
  background-color: #e3e2db;
  padding: 0 1em;
  text-align: center;
}

img.filter {
	filter: grayscale(100%);
	opacity: 75%;
	display: block;
	
	*:has(> &) {
		background-color: var(--yearColour);
	}

	.speaker & {
		margin: 0;

		span:has(> &) {
			float: right;
			border-radius: .4rem;
			margin: 0 0 1em 1em;
		}
	}
	

	
}

/* Logo */
header h1 {
  width: 100%;
  height: 5em;
  background: transparent url('pix/cssday-logo.svg') center var(--lineHeight) no-repeat;
  background-size: 5em;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}


#content p,
#content ul,
#content ol,
#content dl,
#content table {
  line-height: var(--lineHeight);
  margin-top: var(--lineHeight);
  margin-bottom: var(--lineHeight);
}
#content :is(ul,ol) :is(ul,ol) {
  font-size: 90%;
  margin-top: 0;
}

#content ol ol {
	list-style-type: lower-alpha;
}

#content ::marker {
	color: var(--yearColour);
}

/* divisions */
#content,
footer {
  padding: 1px 1em;
}

nav,
footer,
#spotlight {
  background-color: #000;
  color: white;
}


/* Headings */
h1,h2,h3,h4,
.speakers::after {
  color: var(--yearColour);
  font-weight: normal;
}

.naked {
	display: none;
}

article > :is(h1,h2):first-child {
	margin-left: -1rem;

	&::after {
		content: ' {';	
	}
	
	article:has(&)::after { 
		margin-left: -1rem;
		content: '} ';
		display: block;
		margin-bottom: 0.67em;
		color: var(--yearColour);
		font-size: 2em;
	}
}


.speakers::after {
  font-size: 2em;
}

.speaker {
  clear: both;
  
  &:nth-of-type(n+2) {
	  border-top: 2px dashed #e3e2db;
  }
}

.aside h3 {
  color: black;
}


/* footer */
footer { text-align: center; }
footer h1 { 
	font-size: 1em; 
	color: white;
}

footer h1:not(:first-of-type)::before,footer ul:last-of-type::after {
	content: '}';
	display: block;	
	margin-bottom: 2em;
}

footer h1::after {
	content: ' {';
}

footer ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
footer li {

}
footer a:hover,
footer a:focus {
  background-color: transparent;
}
footer a[class^=y]:is(:hover,:focus) {
	background-color: var(--yearColour);
}

/* Links */
a { 
  text-decoration: none;
  border-bottom: 1px dotted;
}

a, .info { color: var(--yearColour); }

a {
  transition-property: background-color, border, color;
  transition-duration: .5s;

}

a:hover,
a:focus {
  background-color: var(--yearColour);
  color: white;
}

.call-to-action a {
  display: inline-block;
  border: 1px dotted;
  padding: .2em .5em;
  
  &:first-child {
	  margin-left: calc(-.5em - 1px);  
  }
  
}

nav a,
footer a { border: none; }

footer a { color: #fff; }

nav a,
#spotlight a {
  color: white;
}

/* Date */
.date {
  color: #222;
  font-size: x-large;
  margin: 0 .4em;
  text-align: left;
}

/* Purchase link */
.purchase {
	background: var(--yearColour);
	transition-property: background;
	transition-duration: .3s;
	
	& a {
		transition-duration: 0s;
		display: block;
		padding: 0.6em 1em 0.7em;
		border: none;
		color: white;
		background: var(--yearColour);
		clip-path: polygon(
			   0% 0%,
			  95% 0%,
			 100% 50%,
			  95% 100%,
			   0% 100%,
			   5% 50%
			   );
	}
	
	&:has(a:hover,a:focus)  {
		background: transparent;
	}
	
}

/* Menus */
#spotlight,
nav ul {
  list-style: none;
  padding-left: 0;
}

/* Navigation */
nav li {
  text-align: center;
  border-bottom: 1px solid #444;
}
nav a {
  display: block;
  color: white;
}

/* List of speakers */
/*
.speakers ul::before { 
  content: '#speakers {'; 
  font-weight: bold;
}
.speakers ul::after { 
  content: '}'; 
  font-weight: bold;
}
.speakers li { padding-left: 2em; }
*/

/* Put a couple of links in the spotlight on small screens */
#spotlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  overflow: hidden;
  display: flex;
}

#spotlight li {
  flex: 1 1 33%;
  border-left: 1px solid #e3e2db;
}
#spotlight li:first-child {
  border-left: none;
  margin-left: -1px;
}
#spotlight a,
nav a {
  display: block;
  padding: .5em 0;
}

/* Testimonials */
.testimonial {
  padding: 1em 0;
  font-style:italic;
  clear: both;
}
.testimonial blockquote {
 margin: 1em;
}
.testimonial blockquote:before {
 content: '.testimonial {';
 color: #C0B8B4;
}
/*
.testimonial blockquote:after {
 content: '}';
 color: #C0B8B4;
}
*/
.testimonial blockquote p {
 margin-left: 2em;
}

/* Contact form */
fieldset {
  margin: 0;
  padding: 0;
  border: none;
  padding: .5em 1em;
  background-color: #e3e2db;
}

fieldset.contact label { 
	text-align: right;
	width: 10em;
	display: inline-block;
}

input,textarea,select {
	background-color: inherit;
	border: 1px solid;
	min-width: 15em;
}

textarea { 
  width: 100%;
  min-height: 5em;
  resize: vertical;
}

:is(input,textarea,select):focus {
	background-color: white;
}

input[type="submit"] {
	text-align: center;
	margin-left: 10em;
	min-width: 0;
	padding: 0.5em;
	display: inline-block;
	color: white;
	background-color: var(--yearColour);
	border: none;
	transition-property: color,background;
	transition-duration: .2s;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
  background-color: black;
}

#content fieldset ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#content .with-caption + p {
  margin-top: 0;
  font-size:small;
}
.img img,
.speaker img {
  max-width: 100%;
  height: auto;
  border-radius: .4rem;
}

.speaker img {
  width: 200px;
  height: 200px;
}

.teaser img {
  width: 224px;
}

body.archive #attendeeTable {
	max-height: 100vh;
	overflow-y: auto;
	clear: both;
	
	& thead {
		position: sticky;
		top: -5px;
		background: white;
	}
	
	& td {
		text-wrap: balance;
	}
	
	& td:not(:first-of-type) a {
		display: inline-block;
		max-width: 12em;
		overflow: hidden;
	}
}

/* Table fun */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  padding: .5em;
}
th { 
	text-align: left; 
	
	& a {
		color: white;
	}
	
}
tr:nth-child(2n+2) {
  background-color: #e3e2db;
}
#attendees tr>td.header {
  background-color: #222;
  color: white;
}
thead.scripted th {
  cursor:pointer;
}
#attendees {
  font-size: small;
  width: 100%;
}
caption {
  margin-bottom: 1em;
}
@media only screen and (max-width: 30em) {
  #attendees thead {
    position: absolute;
    top: -9999px;
  }
  #attendees thead.scripted {
    position:static;
  }
  #attendees thead tr {
    background-color: #e3e2db;
  }
  #attendees thead.scripted tr:before {
    content: 'Sort by:';
    margin: 0 0 .5em .5em;
  }
  thead.scripted tr>td.header {
    position: static;
  }
  #attendees tbody tr {
    position: relative;
    margin-top: .75em;
    margin-bottom: .75em; 
    border-bottom: 1px solid #e3e2db;
    background-color: white;
    padding: .2em .2em 1em;
  }
  #attendees td {
    padding: 0;
  }
  #attendees tr, 
  #attendees td { 
    display:block; 
  }
  #attendees tr>td:first-child {
    font-weight: bold;
  }
  #attendees tr>td:last-child {
    position: absolute;
    top: 0;
    right: 0;
    color: #C0B8B4;
  }
  #attendees tr>td.header {
    position: static;
    color: white;
  }
}

@media only screen and (min-width: 48em) {
  #spotlight { z-index: 3; width: 0; margin-top: 1em; }


#spotlight:has(a:focus) {
	overflow: visible;
	width: max-content;
	right: 0;
	left: auto;
	top: 0.35em;
	
	& li {
		border: none;
	}
	
	& a {
		width: max-content;	
		border: none;
		padding: 0;
		margin-left: 0.5em;
		&::before {
			content: '⠿ '; 
			transition: .2s;
		}
	}
	
	& a:is(:hover,:focus) {
		background: var(--yearColour);
	}
}

  #page {
    border-right: 1em solid var(--yearColour);
  }

  .purchase {
    display: inline-block;
  }
  

  /* Navigation */
  nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }
  nav ul {
    margin-bottom: 0;
    padding-left: 1em;
  }
  nav li {
    display: inline-block;
    text-align: left;
    margin-right: 0.3em;
  }
  nav a {
    border-bottom: .5em solid transparent;  
  }

  nav a.current,
  body.home nav a.home,
  body.speakers nav a.speakers,
  body.workshop nav a.workshop,
  body.attendees nav a.attendees,
  body.schedule nav a.schedule,
  body.venue nav a.venue,
  body.tickets nav a.tickets,
  body.livestream nav a.livestream,
  body.contact nav a.contact,
  body.sponsorships nav a.sponsorships,
  nav a:hover,
  nav a:focus {
    border-bottom-color: var(--yearColour);
    background-color: transparent;
  }

  /* Header */
  header {
    position: relative; /* sticky;
	animation: test 2s linear forwards;
	animation-timeline: view(); 
   	top: -14.6em; */
    z-index: 1;
    height: 17em;
    padding: 0;
    min-height: 17em;
    text-align: left;
	--vert: center;
  }
  header h1,
  .info {
    position: absolute;
    width: 50%;
  }
  header h1 {
    bottom: -1em;
    height: 7em;
    margin: 0;
    background-size: 7em;
    background-position: 50% .4em;
    border-bottom: 1em solid #222;
    verflow-x: clip;
    verflow-y: visible;
  }
  
  
header h1 span {
	--start: calc(50% + 0.5em);
	--step: 1em;
	box-sizing: border-box;
	border: 0.2em solid black;
	background-color: black;
	display: none;
	position: absolute;
	bottom: -1em;
	width: 100%;
	height: 1em;
	z-index: 1;
	background-image: url(pix/logo-c-inv.png), 
		url(pix/logo-s-inv.png), 
		url(pix/logo-s-inv.png),
		url(pix/logo-d-inv.png),
		url(pix/logo-a-inv.png),
		url(pix/logo-y-inv.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 
		calc(var(--start) + var(--step)*-3) var(--vert),
		calc(var(--start) + var(--step)*-2) var(--vert),
		calc(var(--start) + var(--step)*-1) var(--vert),
		calc(var(--start) + var(--step)*0) var(--vert),
		calc(var(--start) + var(--step)*1) var(--vert),
		calc(var(--start) + var(--step)*2) var(--vert);
}
  
  @keyframes test {
  	0% {
		--vert: -1em;
  	}
  	
  	20% {
		--vert: center;
  	}
  }
  
  
  
  .info {
    right: 0;
    bottom: 0;
  }
  .date {
    margin: 0;
  }
  .purchase {
    margin-bottom: 0;
  }
  #content {
    padding: 2em 0;
  }
  footer { text-align: left; }
  footer li {
    display: inline-block;
    margin-left: 2em;
    vertical-align: middle;
  }
  .img.right,
  .speaker img {
    float: right;
    margin: 0 0 1em 1em;
  }
  
}

.book { float: right; margin: 0 0 1em 1em; width: 25%; }

a:has(svg) {
	border: none;
}

a:has(svg):is(:hover,:focus) {
	background: none;
	color: transparent;
}

svg.icon {
	width: 20px;
	height: 20px;
	fill: var(--yearColour);
}

table#attendees td {
	max-width: 12em;
	text-wrap: balance;
}

body:has(table#attendees) .header {
	background: var(--yearColour);
	color: white;
	/* onduidelijk waar dit voor is; wel ppkstyle */
}


@media only screen and (min-width: 54em) {
  #page {
    border-width: 1.5em;
  }
  /* There's gold in them thar hills. */
  header h1 {
    width: 38.2%;
  }
  .info {
    width: 61.8%;
  }
  div#content {
  	--margin: 39.5;
  }
  .testimonial {
    margin-left: 36%;
  }
  #content:after {
    margin-left: 36%;
  }
  .home #content:after {
    margin-left: 0;
  }

  /* Speakers homepage */


}

@media screen and (min-width: 72em) {
  body {
    font-size: 112.5%;
  }
  .home #content {
    background-position: 34% 4em;
    background-position: 34% 4em;
  }
}

@media screen and (min-width: 80em) {
  body {
    font-size: 125%;
    background-color: dimgray;
  }
  #page {
    margin: 0 auto;
    max-width: 80em;
    background-color: white;
  }
}

@media screen and (min-width: 90em) {
  nav { text-align: center; }
  nav ul { padding-left: 0; }
  nav a { padding: .5em .3em; }
}

@media only screen and (min-width: 54em) {
 section#sponsorships {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 2em;
  font-size: 90%;
 }
 section#sponsorships {
  margin-left: -70%;
 }
}

section#sponsorships p.amount {
	font-size: 120%;
	color: var(--yearColour);
	margin: 0;
	font-weight: bold;
}

section#sponsorships ul {
  list-style-type: none;
  margin: 0; padding: 0;
}
section#sponsorships li {
  border-top: 1px dotted;
  margin: 0;
  padding: 0.3em 0;
}
section#sponsorships > section > ul > li:last-of-type {
  border-bottom: 1px dotted;
}

#content {
	--margin: 2; /* or 39.5 */
	container-type: inline-size;
}

	article {
		margin-left: calc(var(--margin) * 1cqw);
		margin-right: 10%;
	}

	div.photos { 
		display: flex; 
		gap: 2px; 
		padding: 1px; 
		width: 100cqw;
		margin-left: calc(var(--margin) * -1cqw);
		margin-bottom: 1rem;
		
		& div {
			flex-grow: 1;
			overflow: hidden;
	
			&:nth-child(4),&:nth-last-child(4) {
				min-width: 25px;		
			}
		
			&:nth-child(3),&:nth-last-child(3) {
				min-width: 50px;		
			}
		
			&:nth-child(2),&:nth-last-child(2) {
				min-width: 75px;		
			}
		
			&:first-child,&:last-child {
				min-width: 100px;
			}
		
			& img {
				width: 100%;
				min-width: 100px;
				max-width: 300px;
				display: block;
				justify-self: center;
			} 
			
			&:hover,&:active {
				overflow: visible;
				z-index: 1;			
			}
		
		}
		
	}

dialog {
	max-height: 90vh;
	background: var(--yearColour);
}

dialog img {
	display: block;
	max-height: 100%;
}

body.attendees div#content {
	container-type: inline-size;
	container-name: content;
	--margin: 39.5;
}

body.attendees article {
	margin-left: calc(var(--margin) * 1%);

}

body.attendees div.photos {
	width: 100cqw;
	margin-left: calc(var(--margin) * -1cqw) !important;
}


    

/*
.photos { position: relative; background: #e3e2db; display: flex; }
@media only screen and (min-width: 48em) {
.photos::after { content: ''; position: absolute; height: 2em; width: 50%; bottom: -2em; background: #222; }
}
@media only screen and (min-width: 54em) {
.photos::after { width: 38.2%; }
}
@media (max-width: 60em) {
  .photos-div:nth-child(5) ~ * { display: none; }
 }
 @media (max-width: 50em) {
  .photos-div:nth-child(4) ~ * { display: none; }
 }
 @media (max-width: 40em) {
  .photos-div:nth-child(3) ~ * { display: none; }
 }
  .photos-a { display: block; border: none; }
   .photos-img { display: block; width: 100%; height: auto; }

#content > .photos { margin-left: -1em; margin-right: -1em; }
@media only screen and (min-width: 48em) {
 #content > .photos { margin-left: -12.5%; margin-right: -12.5%; }
}
#content > .photos::after { display: none; }
*/


.video { margin: 2em 0; position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden; }
 .video > iframe { display: block; height: 100%; width: 100%; position: absolute; }

.submitted { scroll-margin: 2em; font-weight: bold; }

@view-transition { navigation: auto; }