/*
Theme Name: October Moon
Theme URI: 
Description: Child theme for the BlankSlate. 
Author: Alexander Bailey
Author URI: 
Template: blankslate
Text Domain: blankslate
Author URI: 
Version: 0.5.0
*/
/*@import url("../blankslate/style.css");*/



:root {

/* Colors */
--black: #000;
--gray: #5c5b5b;
--gray1: #858484;
--gray0: #b6b6b6;
--orange: #f58324;
--orange2: #b8621b;
--blue: #1f4da2;
--blue2: #173a7a;
	
/*	Element variables */
	
/* Dimensions */
	--fontSize: 18px;
	--lineHeight: 1.3;
	--moonSize: 5em;
	--moonMargin: 1em;
	
}

/* Text meant only for screen readers. -------------------------------------------------------------- */
.screen-reader-text
{
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Standard WP fixes */
.widget-container .wp-block-group.is-layout-flex {gap: 0;} /* Use Stack (Group) block to exempt groups of blocks from larger visual spacing */

.wp-block-image, .wp-block-embed {margin-bottom: 1em;}
.wp-block-file {margin-bottom: 1em;} /* awkward link found and removed on Trance Mission ensemble page*/

/* General stuff
-------------------------------------------------------------- */

html, html * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

@supports (padding: env(safe-area-inset-left)) {
  :root {
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
  }
}

@media (min-width: 900px) {
  :root {--lhs-width: 2.67em;}
}

@media (min-width: 1200px) {
  :root {
    --lhs-width: calc(2.67em + (100vw - 1200px) / 2);
    --rhs-width: calc(.6em + (100vw - 1200px) / 2);
  }
}

html {
	font-size: var(--fontSize);
}

body {
	color: var(--gray);
	font-family: "Courier New", "Courier", monospace;
	font-weight: 400;
	font-style: normal;
	/* 	min-height: 100vh; */
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
	
/* 	What's going on below here? */
	padding:0;
	max-width: var(--safe-width);
	margin: 0 auto;
}
iframe {
  border: none;
}
em, i, cite {
  font-style: italic;
}
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
  line-height: 0;
}
sub {
  top: 0.4em;
}
p {
  margin-bottom: 1em;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}
h1, h2 {font-size:1.5em;}

a {
	color: inherit;
	text-decoration: underline;
}
a:hover, a:focus,
#site-title a:hover #headtext span.artist,
#site-title a:focus #headtext span.artist
{
   color: var(--orange);
}

/*-----------------------------General WP styles--------------------------------- */
.wp-block-columns, .wp-block-group {
margin-bottom: 4em;
}

.entry-content .is-layout-flex, 
.entry-content .is-layout-grid {
	/* 	Caution: row-gap of 4em is part of the solution for figcaption in grid layouts.
		I would prefer a consistent 2em row gap. */
	gap: 4em 4em;
	margin: 0 0 2em 0;
}

.entry-content .is-layout-flex {
	row-gap:2em;
}

.wp-block-column:nth-child(1) {
	color: var(--orange);
}
.wp-block-column:nth-child(2) {
	color: var(--gray1);
}

#content h1, #content h2
{
	margin-bottom: 2rem;
	text-transform:uppercase;
}

article {
	margin-bottom: 5rem;
}

article header h1,
body:not(.category) article header h2, 
body.category #content h1
{
	color: var(--orange);
	text-transform:initial;
	margin-bottom: 3.5rem;
	padding-bottom: 1em;
	border-bottom: 2px solid var(--gray0);
}

/* Make header text size independent from H1 and Moon size  */
#site-title, #site-title h1 {
	font-size: var(--fontSize);
	margin-bottom: var(--moonMargin);
}


#site-title #headtext {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35em;
	width: 100%;
	margin-right: calc(16vw - 4em);
}

#site-title #headtext span:first-child {
	font-size: 2em;
	order: 1;
}

#site-title #headtext::after {
	height: .08em;
	width: 13em;
	background: var(--gray1);
	content:"";
	order:2;
}
#site-title a:hover #headtext::after {
	background: var(--orange);
}
#site-title #headtext span.artist {
	font-size: 1.33em;
	color: var(--gray1);
	order: 3;
}
#site-title a {
	display: flex;
	justify-content: flex-start;
	height: var(--moonSize);
	}

#lune {
		text-indent: -9999px;
		width: var(--moonSize);
		height: var(--moonSize);
		content: "";
		background: center / 118% no-repeat url('gfx/lune3-32-still.gif');
		border-radius:50%;
	}

#lune:hover,
#lune.animated, 
#menu:hover #lune, 
#site-title a:hover:before,
#site-title a.animated:before {
    background-image: url('gfx/lune3-full-full.gif');
}

/* Initial page load animation */
#lune.animated-initial,
#site-title a.animated-initial:before  {
    background-image: url('gfx/lune3-new-full.gif');
}

#menu-main a {
display: block;
padding: 0.5em 0;
font-size: 1.2em;
}

header a, nav a {
	text-decoration:none;
}
#wrapper {

}
#wrapper img {
  max-width: 100%;
  height: auto;
}
/* move footer content to base of window */
#wrapper {
	min-height: calc(100vh - 1em);
	max-width: 1200px;
	margin: 0 auto;
	padding: 1em;
}
#footer {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
main, #sidebar {
	/* margin-bottom:2em; */
	line-height: var(--lineHeight);
}
main > :last-child, #sidebar > :last-child {
	margin-bottom:2em;
}

#container {
	width: 100%;

}
main {
	/* background:antiquewhite; */
}


#menu-main {
	font-size: 1.2em;
	text-align: right;
}


.separator, .fr {
color: var(--gray1);
}

a:hover > * {
	color: inherit;
}


/* ==========================================================================
   < #CONTENT COLUMNS BREAKPOINT - independant from nav
	Overrides WP Blocks standard: max-width: 781px
   ========================================================================== */

@media screen and (max-width: 659px) {
  article  .wp-block-group-is-layout-grid {
		grid-template-columns: unset;
	}
	.wp-block-group-is-layout-grid img {
		max-height: 80vh;
	}
}

/* ==========================================================================
   > #CONTENT COLUMNS BREAKPOINT - independant from nav 
	Overrides WP Blocks standard: min-width: 782px
   ========================================================================== */
   
@media screen and (min-width: 660px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
        flex-basis:0 !important;
        flex-grow: 1 !important;
    }

    .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column[style*=flex-basis] {
        flex-grow: 0 !important;
    }
}


/* ==========================================================================
   MOBILE NAV BREAKPOINT
   ========================================================================== */

@media screen and (max-width: 799px) {

body {
	max-width: var(--safe-width);
	margin: 0 auto;
	padding-top: min(1em, var(--safe-vw) * 2);
	padding-left: min(2em, var(--safe-vw) * 5);
	padding-right: min(2em, var(--safe-vw) * 5);
	}

#site-title a:before {
	width: 5em;
	height: 5em;
	content: "";
	background: center / 125% no-repeat url('gfx/lune3-32-still.gif');
}
#site-title a:hover:before {
	background-image: url('gfx/lune3-32.gif')
}


  /* Container spans full width */
  #container {
    width: 100%;
  }
  
  /* Position menu-moon as fixed bottom bar */
  #menu-moon {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75em 1em;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Home link styling */
  #lune {
	  display:none;
	  --moonSize: 3em;
	  margin-right: .5em;
	 }
  
  /* Menu toggle button */
  #menu-toggle, #menu-toggle-righty  {
    border: .75px solid var(--gray0);
    background: transparent;
    cursor: pointer;
    font-family: inherit;
	/* my styles */
    font-size:1.5em;
    padding: 0.25em .25em;
    margin: 0;
    color: var(--gray);
/* set width styles */
    display:flex;
    min-width: 4em;
    justify-content: center;
  }
  #menu-toggle {
  	/* Optional reflection */
    transform: rotateY(180deg);
    }
  
  /* Menu container - initially hidden off-screen */
  .menu-main-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 999;
    background: rgba(255, 255, 255, 0.95);
    max-height: calc(100vh - 4em);
    overflow-y: auto;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Menu visible state */
  .menu-main-container.is-visible {
    transform: translateY(0);
  }
  
  /* Menu list styling */
  #menu-main {
    padding: 2em 1em 5em 1em;
	transition: transform 0.3s ease-in-out;
  }
  
  #menu-main.lefty {
    transform: rotateY(180deg);
  }
  
  #menu-main li {
    margin-bottom: 1em;
  }
  
  /* Add bottom padding to main content to prevent footer overlap */
  #wrapper {
    padding-bottom: 5em;
  }
  
  /* Optional: Overlay backdrop when menu is open */
  body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 998;
    pointer-events: none;
  }
  
  body.menu-open::after {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  /* Prevent scroll when menu is open */
  body.menu-open {
    overflow: hidden;
  }
	
}

/* ==========================================================================
	SMALL DESKTOP NAVIGATION BREAKPOINT
   ========================================================================== */

@media screen and (min-width: 800px) {

	:root {
		--moonSize: 10em;
		--moonMargin: 2em;
	}
	
	body {
		padding-top: min(1em, var(--safe-vw) * 2); /* top padding is same as <899px */
		padding-left: min(1em, var(--safe-vw) * 5);
		padding-right: min(1em, var(--safe-vw) * 5);
	}

	#wrapper {
		display: flex;
		flex-direction: row;
		gap: clamp(1em, 9vw - 54px, 3em);
	}
	
	#menu {
		font-size: var(--fontSize);
		width: var(--moonSize);
		position: sticky;
		top: 1em;
		height: 100vh;
		overflow-y: auto;
		flex-shrink: 0;
		/* background: aliceblue; */
	}

	#lune {
		display: block;
		text-indent: -9999px;
		width: var(--moonSize);
		height: var(--moonSize);
		content: "";
		background: center / 118% no-repeat url('gfx/lune3-32-still.gif');
		margin-bottom: 2em;
	}

	#lune:hover {
		background-image: url('gfx/lune3-32.gif')
	}

	#menu-toggle, #menu-toggle-righty {
		display:none;
	}
	
	.menu-main-container {
		padding-right: 0.5em;
	}

	  #menu-main a {
		  font-size:inherit;
		  font-size:.75em;
		  padding: .15em 0;
	  }

   #container {
		flex: 1;
		min-width: 0; /* Important for flex overflow handling */
		display: flex;
		flex-direction: column;
	}
	#header #site-title {
		height: var(--moonSize);
	}
	#site-title #headtext {
		font-size: 1.3em;
		margin-right: .5em;
	}
}


/* ==========================================================================
	BIG DESKTOP NAVIGATION BREAKPOINT
	
	TO-DO: lots of redundancy with SMALL Moon styles
   ========================================================================== */

@media screen and (min-width: 1000px) {

	:root {
		--moonSize: 15em;
		--moonMargin: 2em;
	}
	
	body {
		padding-top: min(1em, var(--safe-vw) * 2); /* top padding is same as <899px */
		padding-left: min(1em, var(--safe-vw) * 5);
		padding-right: min(1em, var(--safe-vw) * 5);
	}

	#wrapper {
		display: flex;
		flex-direction: row;
		gap: clamp(1em, 9vw - 54px, 3em);
	}
	
	#menu {
		font-size: var(--fontSize);
		width: var(--moonSize);
		position: sticky;
		top: 1em;
		height: 100vh;
		overflow-y: auto;
		flex-shrink: 0;
		/* background: aliceblue; */
	}

	#lune {
		display: block;
		text-indent: -9999px;
		width: var(--moonSize);
		height: var(--moonSize);
		content: "";
		background: center / 118% no-repeat url('gfx/lune3-32-still.gif');
		margin-bottom: 2em;
	}

	#lune:hover {
		background-image: url('gfx/lune3-32.gif')
	}

	#menu-toggle, #menu-toggle-righty {
		display:none;
	}
	
	.menu-main-container {
		padding-right: 3em;
	}

	  #menu-main a {
		  font-size:inherit;
		  font-size:.95em;
		  padding: .15em 0;
	  }

   #container {
		flex: 1;
		min-width: 0; /* Important for flex overflow handling */
		display: flex;
		flex-direction: column;
	}
	#header #site-title {
		height: var(--moonSize);
	}
	#site-title #headtext {
		font-size: 1.3em;
		margin-right: .5em;
	}
}

/* ==========================================================================
	GALLERY LAYOUTS
   ========================================================================== */

.artwork-title, .artwork-description {
	display:block;
}
article .artwork-title {
	color: var(--black);
	font-weight: bold;
}
article .artwork-description {
	color: var(--gray1);
	margin-bottom: -1em;
	font-size: .85em;
	word-break: break-word;
}

/* Lightbox */
.mwl .mwl__metadata .exifs,.mwl .mwl__metadata h2,.mwl .mwl__metadata p,
.mwl .mwl__topbar .mwl__topbar__slide-counter {
	font-family: inherit;
}

/* ==========================================================================
	SPECIAL CASES
   ========================================================================== */

/* ==========================================================================
	DIAGNOSTIC COLORS
   ========================================================================== */
/* 
main, aside {
  background: #76b8fb;
}
main > *, aside > * {
  background: #767cfb;
}
main > * > *, aside > * > *{
  background: #c476fb;
}
main > * > * > *, aside > * > * > * {
  background: #fb76f4;
}
main > * > * > *:nth-child(odd), aside > * > * > *:nth-child(odd) {
  background: #fb7691;
}
 */



/* ============================================
   Default Grid Layout - Natural Aspect Ratios
   Images display at natural aspect ratios, captions align at bottom
   ============================================ */

.is-layout-grid .wp-block-image {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.is-layout-grid .wp-block-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.is-layout-grid .wp-block-image figcaption {
  min-height: calc(5em * var(--lineHeight, 1.5)); /* 4 lines, fallback to 1.5 */
  margin-bottom: 0;
  margin-bottom: -4em; /* Offset for min-height; needed with "naturual" aspect ratio grid layout */
  padding-top: 1em;
  position: relative;
  z-index: 1;
  background: #ffffff;
}

/* ============================================
   Grid-Level Crop Classes
   Apply to grid block to affect all nested images
   Override the default natural layout
   ============================================ */

.group-square-crop .wp-block-image {
  overflow: hidden;
  justify-content: flex-start;
  height: auto;
}

.group-square-crop .wp-block-image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
}

.group-aspect-3x2 .wp-block-image {
  overflow: hidden;
  justify-content: flex-start;
  height: auto;
}

.group-aspect-3x2 .wp-block-image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.group-aspect-4x3 .wp-block-image {
  overflow: hidden;
  justify-content: flex-start;
  height: auto;
}

.group-aspect-4x3 .wp-block-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.group-contain-fit .wp-block-image {
  background: #ffffff;
  justify-content: flex-start;
  height: auto;
  overflow: visible;
}

.group-contain-fit .wp-block-image img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  object-position: center;
}

/* ============================================
   Scale/Zoom Classes for Whitespace Trimming
   These scale up the image to crop out edges
   ============================================ */

/* Tiny zoom - crops ~5% from edges */
.zoom-105 img {
  transform: scale(105%);
}

/* Mild zoom - crops ~9% from edges */
.zoom-110 img {
  transform: scale(110%);
}

/* Moderate zoom - crops ~17% from edges */
.zoom-120 img {
  transform: scale(120%);
}

/* Medium zoom - crops ~25% from edges */
.zoom-130 img {
  transform: scale(130%);
}

/* Strong zoom - crops ~33% from edges */
.zoom-150 img {
  transform: scale(150%);
}

/* Aggressive zoom - crops ~43% from edges */
.zoom-175 img {
  transform: scale(175%);
}

/* Extreme zoom - crops ~50% from edges */
.zoom-2x img {
  transform: scale(2);
}

/* ============================================
   Transform Origin - Controls Zoom Center Point
   Combine with zoom classes to control what stays visible
   ============================================ */

/* Zoom from center (default) */
.origin-center img {
  transform-origin: center center;
}

/* Zoom keeping top visible */
.origin-top img {
  transform-origin: center top;
}

/* Zoom keeping bottom visible */
.origin-bottom img {
  transform-origin: center bottom;
}

/* Zoom keeping left visible */
.origin-left img {
  transform-origin: left center;
}

/* Zoom keeping right visible */
.origin-right img {
  transform-origin: right center;
}

/* Zoom keeping top-left visible */
.origin-top-left img {
  transform-origin: left top;
}

/* Zoom keeping top-right visible */
.origin-top-right img {
  transform-origin: right top;
}

/* Zoom keeping bottom-left visible */
.origin-bottom-left img {
  transform-origin: left bottom;
}

/* Zoom keeping bottom-right visible */
.origin-bottom-right img {
  transform-origin: right bottom;
}

/* Fine-tune: slightly off-center origins */
.origin-upper-center img {
  transform-origin: center 33%;
}

.origin-lower-center img {
  transform-origin: center 67%;
}

/* ============================================
   Object Position Variants
   For use with cropping classes (without zoom)
   These shift the image within the crop area
   With 10% buffer from edges
   ============================================ */

.position-top img {
  object-position: center 10% !important;
}

.position-bottom img {
  object-position: center 90% !important;
}

.position-left img {
  object-position: 10% center !important;
}

.position-right img {
  object-position: 90% center !important;
}

.position-top-left img {
  object-position: 10% 10% !important;
}

.position-top-right img {
  object-position: 90% 10% !important;
}

.position-bottom-left img {
  object-position: 10% 90% !important;
}

.position-bottom-right img {
  object-position: 90% 90% !important;
}

/* ============================================
   Usage Examples
   ============================================ */

/* Default behavior (no classes needed):
   - All grids in .entry-content display images at natural aspect ratios
   - Captions align at bottom of each row
   
   Apply to grid block to override default:
   - "group-aspect-3x2"
   - "group-square-crop"
   - "group-aspect-4x3"
   
   Apply to individual image blocks for fine-tuning:
   - "zoom-120" (with any group-* class)
   - "zoom-150 position-top" (adjust visible area)
   - "position-bottom" (shift focus without zoom)
   
   Example workflow:
   1. Grid has "group-aspect-3x2" - all images cropped to 3:2
   2. Image with excess whitespace gets "zoom-120"
   3. Image that needs vertical adjustment gets "position-top"
*/