/*
Theme name: Theo Passingham
Theme url: http://www.theopassingham.com
Author: Theo Passingham
Version: 0.01
*/

/* 
----
import
----
*/

@import url('https://fonts.googleapis.com/css2?family=Encode+Sans:wght@100&display=swap');
@import url('normalize.css');

/* 
----------------
ROOT
----------------
*/

html {
    min-height: 100%;
}

:root {
    font-family: "Encode Sans";
	--major-third: calc(5/4);
	--fourth: calc(4/3);
	--fifth: calc(3/2);
	--major-sixth: calc(5/3);
	
	--column-count: 8;
	--column-margin: calc(1rem * var(--fourth));
	--grid-width: calc((3 * 17rem) + (2 * var(--column-margin)));
	--single-column-width: calc((var(--grid-width) - (var(--column-count) - 1) * var(--column-margin))/var(--column-count));
	
	--list-column-count: 3;
	
	--centred-blank-columns: 2;
	--centred-start-column: calc(var(--centred-blank-columns)/2 + 1);
	--centred-padding: 0rem;
	
	--header-image-height: calc(var(--grid-width)/161 * 42);
	
	--default-colour: rgba(0, 0, 0, 0.8);
	--lighter-colour: rgba(0, 0, 0, 0.6);
	--lightest-colour: rgba(0, 0, 0, 0.1);
	--alternate-colour: rgba(21, 162, 146, 0.8);
	
	--wp--style--block-gap: var(--column-margin);
	--gallery-block--gutter-size: 1rem;
	
	color: var(--default-colour);
}

@media only screen and (min-width: 1880px) {
	:root {
		font-size: 30px;
	}
}

@media only screen and (max-width: 1440px) {
	:root {
		font-size: 20px;
	}
}

@media only screen and (max-width: 1090px) {
	:root {
		--column-count: 6;
		--grid-width: calc((2 * 17rem) + (2 * var(--column-margin)));
		--centred-blank-columns: 0;
		--centred-padding: 0;
		--list-column-count: 2;
	}
}

@media only screen and (max-width: 768px) {
	:root {
		--column-count: 2;
		--grid-width: 80vw; 
	}
}

@media only screen and (max-width: 600px) {
	:root {
		--list-column-count: 1;
		--column-count: 1;
	}
	
	header[role="banner"] nav ul li {
		font-size: calc(0.65rem / var(--fifth));
		margin: 0 0.3rem .5rem 0;
	}
}

/* Mobile responsive text sizing for product titles */
@media only screen and (max-width: 768px) {
	.productTitle {
		font-size: 1.2em;
	}
}

@media only screen and (max-width: 600px) {
	.productTitle {
		font-size: 1em;
	}
}

body {
	line-height: 1rem;
	background-color: rgb(255, 255, 255);
	min-height: 100%;
	background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6, header li, footer li, footer p {
	font-family: "Encode Sans";
}

p, dl, h1, h2, h3, h4, h5, h6, ol, ul, pre, figure, date {
	margin: 0 0 1rem;
	font-size: calc(1rem / var(--major-sixth));
	line-height: 1rem;
}

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

blockquote {
	margin: 0 0 1rem;
	padding: 1rem 3rem;
	quotes: "\201C""\201D""\2018""\2019";
	font-style: italic;
	font-family: "Encode Sans";
	font-size: calc(1rem / var(--fifth));
	font-weight: 400;
}

blockquote p {
	margin: 0;
	font-style: italic;
	position: relative;
}

blockquote p::before,
blockquote p::after {
	content: open-quote;
	font-size: 4rem;
	line-height: 4rem;
	position: absolute;
	font-weight: 300;
	color: rgba(0, 0, 0, 0.2);
}

blockquote p::before {
	top: -0.7rem;
	left: -3rem;
}

blockquote p::after {
	content: close-quote;
	bottom: -3rem;
	right: -1.7rem;
}

blockquote cite {
	display: block;
	text-align: right;
	padding: 1rem 4rem 0;
	font-style: normal;
}

blockquote cite::before {
	content: '\2014';
}

figcaption {
	text-align: center;
	font-size: 12px;
	font-family: 'Courier New', Courier, monospace;
	background-color: #000;
	color: #fff;
}

a {
	text-decoration: none;
	color: var(--lighter-colour);
}

a:hover {
	color: var(--alternate-colour);
}

header a,
footer a,
a h1,
h1 a,
a h2,
a h3,
a p {
	color: var(--default-colour);
}

header a:hover,
footer a:hover,
a:hover h1,
h1 a:hover,
a:hover h2,
a:hover h3,
a:hover p {
	color: var(--alternate-colour);
}

/* Increase heading line-height to prevent wrap overlap */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.25;
}

h1 {
    font-size: calc(1rem / var(--major-third));
    line-height: 1.25;
    text-transform: uppercase;
    font-weight: 500;
}

/* Liquid Layout Text Rendering */
.ll-flow-text {
	width: 100%;
	margin-bottom: 1rem;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ll-flow-text p {
	margin: 0 0 0.5rem;
}

.ll-flow-text p:last-child {
	margin-bottom: 0;
}

.ll-flow-text h1,
.ll-flow-text h2,
.ll-flow-text h3,
.ll-flow-text h4,
.ll-flow-text h5,
.ll-flow-text h6 {
	margin: 0 0 0.5rem;
	font-family: "Encode Sans";
}

.ll-flow-text ul,
.ll-flow-text ol {
	margin: 0 0 0.5rem;
	padding-left: 1.5rem;
}

.ll-flow-text li {
	margin: 0 0 0.25rem;
}

.ll-flow-text blockquote {
	margin: 0 0 0.5rem;
	padding: 0.5rem 1rem;
	border-left: 3px solid var(--lightest-colour);
	font-style: italic;
}

.ll-flow-text strong,
.ll-flow-text b {
	font-weight: 700;
}

.ll-flow-text em,
.ll-flow-text i {
	font-style: italic;
}

.ll-flow-text u {
	text-decoration: underline;
}

.ll-flow-text a {
	color: var(--lighter-colour);
	text-decoration: none;
}

.ll-flow-text a:hover {
	color: var(--alternate-colour);
}

/* Liquid Layout Absolute Layout */
.ll-abs-container {
	width: 100%;
	margin: 0 auto;
}

.ll-abs-stage {
	position: relative;
	margin: 0 auto;
}

.ll-abs-stage > div {
	position: absolute;
	box-sizing: border-box;
}

.ll-abs-stage .ll-text-content {
	width: 100%;
	height: 100%;
	overflow: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.ll-abs-stage .ll-text-content p {
	margin: 0 0 0.5rem;
}

.ll-abs-stage .ll-text-content p:last-child {
	margin-bottom: 0;
}

.ll-abs-stage .ll-text-content h1,
.ll-abs-stage .ll-text-content h2,
.ll-abs-stage .ll-text-content h3,
.ll-abs-stage .ll-text-content h4,
.ll-abs-stage .ll-text-content h5,
.ll-abs-stage .ll-text-content h6 {
	margin: 0 0 0.5rem;
	font-family: "Encode Sans";
}

.ll-abs-stage .ll-text-content ul,
.ll-abs-stage .ll-text-content ol {
	margin: 0 0 0.5rem;
	padding-left: 1.5rem;
}

.ll-abs-stage .ll-text-content li {
	margin: 0 0 0.25rem;
}

.ll-abs-stage .ll-text-content blockquote {
	margin: 0 0 0.5rem;
	padding: 0.5rem 1rem;
	border-left: 3px solid var(--lightest-colour);
	font-style: italic;
}

.ll-abs-stage .ll-text-content strong,
.ll-abs-stage .ll-text-content b {
	font-weight: 700;
}

.ll-abs-stage .ll-text-content em,
.ll-abs-stage .ll-text-content i {
	font-style: italic;
}

.ll-abs-stage .ll-text-content u {
	text-decoration: underline;
}

.ll-abs-stage .ll-text-content a {
	color: var(--lighter-colour);
	text-decoration: none;
}

.ll-abs-stage .ll-text-content a:hover {
	color: var(--alternate-colour);
}

/* Caption styles */
.ll-cap {
	margin-top: 6px;
	color: var(--lighter-colour);
	font-size: 12px;
	font-style: italic;
	text-align: center;
	width: 100%;
	max-width: 100%;
    background: transparent; /* ensure no black background on mobile */
}

/* Responsive behavior */
@media (max-width: 900px) {
	.ll-abs-container {
		display: none;
	}
}

@media (min-width: 901px) {
	.ll-flow {
		display: none;
	}
}

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

/* Responsive media embeds */
iframe,
video {
	max-width: 100%;
	height: auto;
	max-height: 500px;
}

/* Editor.js UI alignment: keep + in a left gutter without overlapping text */
.codex-editor .ce-toolbar__plus {
	left: -32px !important;
	right: auto !important;
}
.codex-editor .ce-toolbar__actions {
	right: 0 !important;
	left: auto !important;
}

/* Maintain 16:9 for YouTube embeds */
iframe[src*="youtube.com"],
iframe[src*="youtu.be"] {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
}

@media only screen and (max-width: 768px) {
	/* Force full-width videos/embeds on mobile */
	.gallery iframe,
	.gallery video,
	iframe,
	video {
		width: 100% !important;
		height: auto !important;
	}
}

/* Header
   ========================================================================== */
   
header[role="banner"] {
	width: var(--grid-width);
	margin: .5rem auto;
	padding: 1rem 0 1rem;
	overflow: auto;
}

/* Header layout - direct children approach */
header[role="banner"] {
	display: flex;
	flex-direction: column;
}

/* Keep navigation right-aligned on desktop */
header[role="banner"] nav {
	align-self: flex-end;
}

/* Center navigation on mobile */
@media only screen and (max-width: 768px) {
	header[role="banner"] nav {
		padding-top: 1rem;
		align-self: center;
	}
}

header[role="banner"] h1,
header[role="banner"] h3 {
	float: left;
	margin: 0;
	font-size: calc(1rem / var(--major-third));
	line-height: 1.5rem;
	font-size: calc(1.5rem);
	grid-column: span 2;
	font-family: "Encode Sans";
	font-weight: bold;
	text-indent: -2px;
}

header[role="banner"] h1 + span {
	display: none;
}

/* Header tagline styling */
header[role="banner"] .header-tagline {
	font-size: .5rem;
	line-height: .4rem;
	font-family: "Encode Sans";
	color: var(--lighter-colour);
	margin: 0.5rem 0 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	width: 100%;
	text-align: left;
	letter-spacing: -0.02em;
}

/* Mobile tagline - almost too small */
@media only screen and (max-width: 768px) {
	header[role="banner"] .header-tagline {
		font-size: 0.4rem;
		line-height: 0.3rem;
		letter-spacing: -0.03em;
	}
}

header[role="banner"] nav {
	grid-column: span calc(var(--column-count) - 2);
}

header[role="banner"] nav ul {
	margin: 0;
	padding: 0;
	text-align: right;
}

header[role="banner"] nav ul li {
	display: inline-block;
	margin: .25rem 0 .25rem var(--column-margin);
	font-size: calc(1.5rem / var(--fifth));
	font-weight: normal;
	white-space: nowrap;
}

@media only screen and (max-width: 1090px) {
	header[role="banner"] {
		margin: 0 auto;
		padding: 1rem 0;
	}
	
	header[role="banner"] h1,
	header[role="banner"] h3 {
		grid-column: span calc(var(--column-count) - 1);
	}
	
	header[role="banner"] nav {
		grid-column: span var(--column-count);
	}

	header[role="banner"] nav ul li {
		margin: 0 1rem .5rem 0;
		font-size: calc(0.9rem / var(--fifth));
	}
}

@media only screen and (max-width: 768px) {
	header[role="banner"] h1 + span {
		display: block;
		grid-column: span 1;
		text-align: right;
		padding: .25rem 0;
	}
	
	header[role="banner"] h1 + span a svg {
		width: 1rem;
		height: 1rem;
	}
	
	header[role="banner"] nav.active {
		display: block;
		margin-bottom: .5rem;
	}
	
	header[role="banner"] nav ul li {
		font-size: calc(0.75rem / var(--fifth));
		margin: 0 0.5rem .5rem 0;
	}
	
	header[role="banner"] nav ul li a {
		padding: calc(.25rem - 1px) 0 .25rem;
	}
	
	header[role="banner"] nav ul li:last-child a {
		padding: calc(.25rem - 1px) 0 calc(.25rem - 1px);
	}
}

header[role="banner"] nav ul li.current-menu-item a,
header[role="banner"] nav ul li.current-menu-parent a,
header[role="banner"] nav ul li.current_page_item a,
header[role="banner"] nav ul li.current-post-parent a,
.single-post header[role="banner"] nav ul li.current_page_parent a,
header[role="banner"] nav ul li.current-post-ancestor a,
.single-kh_work header[role="banner"] nav ul li.menu-item-object-kh_work a,
.single-kh_event header[role="banner"] nav ul li.menu-item-object-kh_event a {
	color: var(--alternate-colour);
}

/* Header background logo */
header[role="banner"] {
	position: relative;
}
header[role="banner"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("/media/Theo Passingham pixel art logo 2025.png");
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 3rem auto;
	opacity: 0.4;
	pointer-events: none;
	z-index: 0;
}
header[role="banner"] > * {
	position: relative;
	z-index: 1;
}
@media only screen and (max-width: 768px) {
	header[role="banner"]::before {
		background-size: 2.5rem auto;
		background-position: top right;
		opacity: 0.4;
	}
}

/* Ensure grids are centered on mobile */
@media only screen and (max-width: 768px) {
	main {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	.grid-container {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Main
   ========================================================================== */


main {
	margin: 0 auto 1rem;
	width: var(--grid-width);
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(var(--column-count),var(--single-column-width)); 
	grid-gap: 1rem var(--column-margin);
	justify-content: center;
	padding-bottom: 1rem;;
}

/* small case
====================================================================================================*/
.case {
	grid-column: span 2;
	text-align: left;
	overflow: hidden;
	border: solid 1px grey;
	opacity: 0.85;
	text-align: center;
	color: #fff;
	background-color: #000;
	position: relative;
}

.case a {
	display: block;
	position: relative;
	height: 7.5rem;
}

#myCanvasId {
	width: var(--grid-width);
}

.case:hover {
	background-color: rgb(215, 219, 221);
	opacity: 1.0;
}

.case img{
	object-fit: cover;
	height: 100%;
	width: 100%;
}

/* Overlay caption from bottom without changing tile height */
	.case figcaption{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.25rem 0.5rem;
	background: rgba(0,0,0,1);
	color: #fff;
	margin: 0;
	font-weight: normal;
}

.case p{
	margin: 0 1em 0 1em;
	height: 5rem;
	overflow: scroll;
}

/* large case
====================================================================================================*/

.product {
	border: solid 1px grey;
	opacity: 0.85;
	margin-bottom: 2em;
	margin-top: 2em;
	position: relative;
	height: 5em;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	text-decoration: none;
}

.product img{
	object-fit: cover;
	height: 5em;
	width: 100%;
}

.productTitle {
	text-align: left;
	font-weight: bold;
	color: #333333;
	font-size: 1em;
	padding: 0 0 0.5em 1em;
}

/* Text colors for different background shades */
.product-1 .productTitle,
.product-2 .productTitle {
	color: #ffffff;
}

.product-3 .productTitle {
	color: #ffffff;
}

.product-4 .productTitle,
.product-5 .productTitle {
	color: #333333;
}

.product-1 .productTitle:hover,
.product-2 .productTitle:hover,
.product-3 .productTitle:hover {
	color: #cccccc;
}

.product-4 .productTitle:hover,
.product-5 .productTitle:hover {
	color: #000;
}

.product:hover {
	background-color: rgb(215, 219, 221);
	opacity: 1.0;
}

/* Different grey backgrounds for each product - dark to light gradient */
.product-1 {
	background-color: #1a1a1a;
}

.product-2 {
	background-color: #404040;
}

.product-3 {
	background-color: #666666;
}

.product-4 {
	background-color: #8c8c8c;
}

.product-5 {
	background-color: #c4c4c4;
}


.mainPhoto {
	grid-column: span var(--column-count);
	width: 100%;
	padding-bottom: 2rem;
}

.mainPhoto img{
	grid-column: span var(--column-count);
	width: 100%;
	height: 15em;
	object-fit: cover;
}

.mainContent {
	grid-column: span var(--column-count);
	margin: 1em 1em 0 1em;
}

.mainContent a {
	text-decoration: underline;
}

.mainContent figcaption{
	font-size: 20px;
	margin-bottom: 1rem;
}

.gallery {
	grid-column: span var(--column-count);
}

.gallery img{
	margin-bottom: 1em;
	grid-column: span var(--column-count);
}

/* Two-column responsive image grid for galleries */
.image-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	padding-bottom: 1rem;
}

.image-grid img {
	width: 100%;
	height: auto;
	display: block;
	grid-column: auto;
	margin-bottom: 0;
}

/* Inline media grid and responsive embeds - unified styles */
.inline-grid { 
	display: grid; 
	grid-template-columns: 1fr; 
	gap: 1rem; 
}

.inline-item { 
	width: 100%; 
}

.inline-media { 
	max-width: 100%; 
	height: auto; 
	display: block; 
	margin: 0 auto; 
}

.inline-text { 
	grid-column: 1 / -1; 
}

/* Unified caption style for inline images/videos */
.image-caption {
	font-size: calc(1rem / var(--major-sixth) * 0.9);
	color: var(--lighter-colour);
	text-align: center;
	margin-top: 0.25rem;
	font-style: italic;
}

/* Toolbar styling for CMS (Squarespace-like) */
.cms-toolbar {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	border: 1px solid var(--lightest-colour);
	background: var(--lightest-colour);
	padding: 6px 8px;
	margin-bottom: 6px;
}
.cms-toolbar .btn { margin: 0; }

/* Block alignment helpers */
.inline-item.align-left { justify-self: start; }
.inline-item.align-right { justify-self: end; }
/* Text sizing helpers */
.inline-text.size-s, .inline-item.size-s { font-size: 0.9em; }
.inline-text.size-l, .inline-item.size-l { font-size: 1.15em; }
@media (max-width: 768px){
	.inline-item.align-left,
	.inline-item.align-right{ justify-self: center; }
}

/* Ensure top-level media items (not inside explicit data-cols grids) span full width and can center */
.inline-grid > .inline-item {
	grid-column: 1 / -1;
	justify-self: center;
}

/* Ensure nested grids (CMS gallery blocks) span full width */
.inline-grid > .inline-grid { 
	grid-column: 1 / -1; 
}

.yt-wrap { 
	width: 100%; 
	aspect-ratio: 16 / 9; 
	max-height: 500px;
}

.yt-wrap iframe { 
	display: block;
	width: 100%; 
	height: 100%; 
}

/* Layout block (two-column snap grid) */
.layout-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 16px; /* overridden inline per block */
	gap: 1rem;
}
.layout-item { }
@media (max-width: 768px){
	.layout-grid { grid-template-columns: 1fr; }
	.layout-item { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

@media (min-width: 768px) {
	.inline-grid { 
		grid-template-columns: repeat(2, 1fr); 
	}
	
	/* Center single items in parent grid - use class-based approach */
	.inline-grid.single-item {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	
	.inline-grid[data-cols="1"] { 
		grid-template-columns: 1fr; 
		justify-items: center;
	}
	
	.inline-grid[data-cols="3"] { 
		grid-template-columns: repeat(3, 1fr); 
	}
	
	.inline-grid[data-cols="4"] { 
		grid-template-columns: repeat(4, 1fr); 
	}
	
	/* Centered sizing: keep items in 3-col grids narrower; single-col should be full width */
	.inline-grid[data-cols="3"] .inline-item,
	.inline-grid[data-cols="3"] .yt-wrap {
		max-width: 400px;
	}
	
	/* Center single media items that aren't in a grid */
	.inline-media {
		margin-left: auto;
		margin-right: auto;
	}
	
	.yt-wrap {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Footer
   ========================================================================== */

.footer {
	margin-top: 1rem;
	font-family: 'Courier New', Courier, monospace;
	text-align: center;
}



.footer a:hover{
	color: var(--alternate-colour);
}

/* social buttons */

.fa {
	font-size: 20px;
	text-align: center;
	text-decoration: none;
  }
  
  /* Add a hover effect if you want */
  .fa:hover {
	opacity: 0.7;
  }
  
  /* Set a specific color for each brand */
  
th {
	font-size: 20px;
}

td {
	font-size: 12px;
}

/* Image Banner Styles - Continuous Scroll */
.banner-container {
	width: 100%;
	max-width: 100vw;
	height: 200px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	position: relative;
	background-color: #f5f5f5; /* Light background while images load */
}

.banner-scroll {
	width: 100%;
	height: 100%;
	display: flex;
	animation: scroll-left 60s linear infinite;
}

.banner-track {
	display: flex;
	height: 100%;
	min-width: 100%;
	flex-shrink: 0;
}

.banner-image {
	height: 100%;
	width: auto;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
	opacity: 1;
	transition: none; /* Remove any transitions that might cause flickering */
}

/* Keyframe animation for continuous left scroll */
@keyframes scroll-left {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}

/* Pause animation on hover */
.banner-container:hover .banner-scroll {
	animation-play-state: paused;
}

/* Responsive banner */
@media only screen and (max-width: 768px) {
	.banner-container {
		height: 150px;
	}
	
	.banner-scroll {
		animation-duration: 45s; /* Slightly faster on mobile */
	}
}

@media only screen and (max-width: 480px) {
	.banner-container {
		height: 120px;
	}
	
	.banner-scroll {
		animation-duration: 40s; /* Even faster on small mobile */
	}
}