/*
Theme Name: Jila Peacock (Responsive)
Author: Julian Mills
Version: 2.2
Description: Responsive update of the original Jila Peacock theme. Desktop layout matches v1.0; tablet and mobile layouts added. Includes a Leaflet page template (page-leaflet.php). Scales up on large monitors.
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	background: #fff;
	line-height: 1;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

.clear {
	clear: both;
}

/* =Fonts
----------------------------------------------- */

@font-face {
    font-family: 'CentaurMTStd';
    src: url('centaurmtstd-webfont.eot');
    src: url('centaurmtstd-webfont.eot?#iefix') format('embedded-opentype'),
         url('centaurmtstd-webfont.woff') format('woff'),
         url('centaurmtstd-webfont.ttf') format('truetype'),
         url('centaurmtstd-webfont.svg#CentaurMTStdRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CentaurMTStd';
    src: url('centaurmtstd-italic-webfont.eot');
    src: url('centaurmtstd-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('centaurmtstd-italic-webfont.woff') format('woff'),
         url('centaurmtstd-italic-webfont.ttf') format('truetype'),
         url('centaurmtstd-italic-webfont.svg#CentaurMTStdItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'CentaurMTStd';
    src: url('centaurmtstd-bold-webfont.eot');
    src: url('centaurmtstd-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('centaurmtstd-bold-webfont.woff') format('woff'),
         url('centaurmtstd-bold-webfont.ttf') format('truetype'),
         url('centaurmtstd-bold-webfont.svg#CentaurMTStdBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'CentaurMTStd';
    src: url('centaurmtstd-bolditalic-webfont.eot');
    src: url('centaurmtstd-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('centaurmtstd-bolditalic-webfont.woff') format('woff'),
         url('centaurmtstd-bolditalic-webfont.ttf') format('truetype'),
         url('centaurmtstd-bolditalic-webfont.svg#CentaurMTStdBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

body {
	font-family: 'CentaurMTStd', Centaur, Garamond, Times New Roman, New York, serif;
}


/* =Structure
   Desktop (901px and wider) reproduces the v1.0 layout: a 220px left
   column with the logo and menu, a 1px rule, then the page on white.
   Fixed pixel widths from v1.0 are now maximum widths, so the layout
   shrinks on narrow screens.
----------------------------------------------- */

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

html, body {
	padding: 0;
	margin: 0;
	background: #fff;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

img {
	max-width: 100%;
	height: auto;
}

#wrap {
	display: flex;
	align-items: stretch;
	min-height: 100vh;
	width: 100%;
	max-width: none;
}

#left {
	flex: 0 0 220px;
	width: 220px;
	padding: 30px 0 0 30px;
}

#logo {
	margin: 0 0 150px 0;
	padding: 0;
	font-size: 28pt;
	line-height: 1;
}
#logo a {
	font-style: italic;
}

#menu-toggle {
	display: none;
}

#nav ul {
	margin: 0;
	padding: 0;
}

#nav h4,
#nav #menu-pages li,
#nav #menu-works li {
	margin-bottom: 0.4em;
	letter-spacing: 0.1pt;
}

#nav h4,
#nav #menu-pages li a {
	text-transform: uppercase;
}

#nav #menu-works li {
	margin-left: 0.5em;
}

#nav #menu-works li a {
	font-style: italic;
	font-size: 1.2em;
}

#main {
	flex: 1 1 auto;
	min-width: 0;
	border-left: 1px solid #d7dce1;
	background-color: white;
	overflow: hidden;
}

#page,
#primary {
	padding: 30px 60px;
	width: 100%;
	max-width: 770px; /* 650px content + 2 x 60px padding, as v1.0 */
}

#content {
	margin-top: 30px;
}

#subnav {
	padding-top: 4px;
	margin-bottom: 0;
}
#subnav li {
	display: inline-block;
	margin-right: 1em;
}
#subnav li.current_page_item a {
	font-style: italic;
}

/* Home page artwork. The colour box behind it (#splash-bg) is animated
   by js/home.js and shows through transparent PNG artwork. */
#splash {
	margin-top: 30px;
	position: relative;
	width: 100%;
	max-width: 850px;
	aspect-ratio: 850 / 650;
}
#splash img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 1;
}
#splash-bg {
	position: absolute;
	top: 0.77%;   /* 5px of 650px */
	left: 0.12%;  /* 1px of 850px */
	height: 98.46%;
	width: 98.82%;
	z-index: 0;
}

/* Two text columns: 310px + 30px gap + 310px on desktop, as v1.0.
   They stack into one column when the content area is narrower than
   560px. */
#content {
	container-type: inline-size;
}
#left-col,
#right-col {
	width: 100%;
	float: none;
}
#content > .clear {
	display: none;
}
@container (min-width: 560px) {
	#left-col {
		float: left;
		width: calc(50% - 15px);
	}
	#right-col {
		float: right;
		width: calc(50% - 15px);
	}
	#content > .clear {
		display: block;
	}
}

.section,
#left-col,
#right-col {
	padding-bottom: 30px;
}

.section img {
	display: block;
}

/* Embedded Vimeo film: keeps its 650 x 365 shape at any width. */
.video-wrap {
	position: relative;
	width: 100%;
	max-width: 650px;
	aspect-ratio: 650 / 365;
	margin-bottom: 7px; /* matches the gap below the inline iframe in v1.0 */
	background-color: #d7dce1;
}
.video-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Slideshow (js/swipe.min.js). The arrows sit 40px outside the image on
   wide screens, as v1.0, and move over the image on narrow screens. */
#slideshow-container {
	position: relative;
	margin-bottom: 30px;
}
#slider div div {
	text-align: center;
}
#slider img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}
.buttons {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 0;
	margin-top: -30px;
}
#prev,
#next {
	width: 30px;
	height: 59px;
	display: block;
	text-indent: -1000px;
	overflow: hidden;
	position: absolute;
	top: 0;
}

#prev {
	background-image: url('images/left.gif');
	left: -40px;
}
#next {
	background-image: url('images/right.gif');
	right: -40px;
}

/* Thumbnail grid: 4 x 140px with 30px gaps on desktop, as v1.0. */
#thumbnails-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	column-gap: 30px;
}
#thumbnails-container > .clear {
	display: none;
}
.thumb,
.thumb.end {
	float: none;
	width: auto;
	overflow: hidden;
	margin-right: 0;
	padding-bottom: 30px;
}
.thumb a {
	display: block;
}
.thumb img {
	max-width: none; /* 150px thumbnail cropped to the column, as v1.0 */
}
.thumb h3 {
	margin-bottom: 0.5em;
}
.thumb p {
	font-size: 10pt
}

/* Images placed in page text by the editor */
.alignleft {
	float: left;
	margin: 0 1em 1em 0;
}
.alignright {
	float: right;
	margin: 0 0 1em 1em;
}
.aligncenter {
	display: block;
	margin: 0 auto 1em;
}
.wp-caption {
	max-width: 100%;
}

/* =Colours
----------------------------------------------- */

html, body,
#nav h4,
#nav #menu-works li a,
#nav #menu-pages li a,
#subnav li a {
	color: #3d4046;
}

#nav #menu-works li.current_page_item a,
#nav #menu-works li.current-page-ancestor a,
#nav #menu-pages li.current_page_item a,
#nav #menu-pages li.current-page-ancestor a {
	color: #ff3600;
}

a,
#logo a,
#subnav li.current_page_item a,
h2 {
	color: #00a8c7;
}

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

#content {
	font-size: 12pt;
	overflow-wrap: break-word;
	letter-spacing: 0.05em;
	line-height: 1.3em;
}

a {
	text-decoration: none;
}

p {
	text-align: justify;
}

b, strong {
	font-weight: bold;
}

#right-col.left p {
	text-align: left;
}

h1,
h2, 
h3 { font-weight: normal; }

h1 { font-size: 28pt; font-style: italic; }
h2 { font-size: 16pt; font-style: italic; line-height: 1.3em }
h3 { font-size: 10pt; text-transform: uppercase; letter-spacing: 0.1em; }

header h1 { 
	padding-bottom: 0.5em; 
	border-bottom: 1px solid #d7dce1;
	margin-bottom: 0;
}
	
h1, h2, h3, h4, h5, h6, p, blockquote, #content ul {
	margin-bottom: 1em;
}
	
#content ul li {
	list-style-position: outside;
	list-style-type: square;
	margin-left: 1em;
}

iframe.vimeo {
	background-color: #d7dce1;
	border: 0;
}

a:focus-visible,
button:focus-visible {
	outline: 1px dotted currentColor;
	outline-offset: 2px;
}

.children {
	display: none;
}

/* =Responsive
----------------------------------------------- */

/* Home artwork is 850px wide: scale it down when the window is too
   narrow to show it beside the side column. */
@media (max-width: 1100px) {
	#splash {
		margin-right: 30px;
		width: auto;
	}
}

/* Narrow desktops and tablets in landscape: keep the side column, but
   reduce the space around the page. */
@media (max-width: 1000px) {
	#page,
	#primary {
		padding: 30px 40px;
		max-width: 730px;
	}
}

/* Not enough room for the arrows outside the slideshow image:
   put them over the image instead. */
@media (max-width: 1000px) {
	#prev {
		left: 0;
	}
	#next {
		right: 0;
	}
	#prev,
	#next {
		background-color: rgba(255, 255, 255, 0.75);
		background-position: center;
		background-repeat: no-repeat;
	}
}

/* Tablets in portrait and phones: the side column becomes a header bar
   with the logo and a Menu button. */
@media (max-width: 900px) {
	#wrap {
		display: block;
		min-height: 0;
	}

	#left {
		width: auto;
		padding: 20px 20px 16px;
		border-bottom: 1px solid #d7dce1;
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		position: relative;
	}

	#logo {
		margin: 0;
		font-size: 24pt;
	}

	#menu-toggle {
		display: block;
		font: inherit;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: #3d4046;
		background: none;
		border: 0;
		padding: 10px 0 10px 16px;
		margin: -10px 0;
		cursor: pointer;
	}

	#nav {
		flex: 0 0 100%;
		padding-top: 16px;
	}

	.js #nav {
		display: none;
	}
	.js #left.menu-open #nav {
		display: block;
	}

	#nav #menu-pages li {
		margin: 0;
		border-top: 1px solid #eef0f2;
	}
	#nav #menu-pages li:first-child {
		border-top: 0;
	}
	#nav #menu-pages li a {
		display: block;
		padding: 12px 0;
		font-size: 1.05em;
	}

	#main {
		border-left: 0;
		min-height: 0;
	}

	#page,
	#primary {
		padding: 24px 20px 40px;
		max-width: 690px;
	}

	#splash {
		margin: 20px 20px 30px;
		width: auto;
	}

	p {
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	#subnav {
		padding-top: 8px;
	}
	#subnav li {
		margin: 0 1.2em 0.4em 0;
		line-height: 1.6;
	}
}

/* Phones */
@media (max-width: 600px) {
	#logo {
		font-size: 21pt;
	}

	#content {
		font-size: 13pt;
		letter-spacing: 0.03em;
		line-height: 1.4em;
		margin-top: 20px;
	}

	h1 { font-size: 24pt; }
	h2 { font-size: 15pt; }

	/* Justified text leaves wide gaps on narrow lines. */
	p {
		text-align: left;
	}

	#thumbnails-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 20px;
	}
	.thumb {
		padding-bottom: 24px;
	}
	.thumb p {
		font-size: 11pt;
	}
	#left-col {
		padding-bottom: 10px;
	}
	.thumb img {
		display: block;
		width: 100%;
		aspect-ratio: 1;
		object-fit: cover;
	}

	.alignleft,
	.alignright {
		float: none;
		margin: 0 0 1em 0;
	}

	#splash {
		margin: 10px 12px 20px;
	}
}

@media print {
	#menu-toggle,
	.buttons {
		display: none;
	}
	.js #nav {
		display: block;
	}
}

/* =Large monitors
   Screens set to 100% scaling report a very wide window (e.g. 2560px),
   which leaves the fixed-width layout small in the corner. Scale the
   whole site up as 125% / 150% display scaling would. Phones, tablets
   and normal desktops are not affected.
----------------------------------------------- */

@media (min-width: 1900px) {
	html { zoom: 1.25; }
	/* zoom also enlarges vh units; divide so the page is exactly one
	   screen tall, not 1.25 screens. */
	#wrap { min-height: calc(100vh / 1.25); }
	/* The image lightbox (Fancybox 1.3.4) positions itself in real
	   screen pixels, so cancel the zoom on its elements. */
	#fancybox-wrap,
	#fancybox-tmp,
	#fancybox-loading,
	#fancybox-overlay { zoom: 0.8; }
}
@media (min-width: 2400px) {
	html { zoom: 1.5; }
	#wrap { min-height: calc(100vh / 1.5); }
	#fancybox-wrap,
	#fancybox-tmp,
	#fancybox-loading,
	#fancybox-overlay { zoom: 0.6667; }
}