/*
Theme Name: BC Flex
Theme URI: 
Description: Child theme for the BlankSlate. 
Author: Alexander Bailey
Author URI: 
Template: blankslate
Text Domain: blankslate
Author URI: 
Version: 0.3.3
*/
/*@import url("../blankslate/style.css");*/
/*
AVAILABLE FONTS

font-family: "clarendon-text-pro", serif;
font-weight: 400;
font-style: normal;

font-family: "clarendon-text-pro", serif;
font-weight: 400;
font-style: italic;

font-family: "clarendon-text-pro", serif;
font-weight: 700;
font-style: normal;

font-family: "clarendon-text-pro", serif;
font-weight: 700;
font-style: italic;


Clarendon URW  
font-family: "clarendon-urw", serif;
REGULAR
	font-weight: 400;
	font-style: normal;
REGULAR OBLIQUE
	font-weight: 400;
	font-style: italic;
MEDIUM 
	font-weight: 500;
	font-style: normal;
MEDIUM OBLIQUE
	font-weight: 500;
	font-style: italic;
BOLD 
	font-weight: 700;
	font-style: normal;
BOLD OBLIQUE
	font-weight: 700;
	font-style: italic;
EXTRA BOLD (masthead)
	font-weight: 800;
	font-style: normal;

font-family: nimbus-sans, sans-serif;
font-weight: 400;
font-style: normal;

font-family: "nimbus-sans", sans-serif;
font-weight: 400;
font-style: italic;
*/ 


:root {
	--onionBASE: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 145'%3E%3Cpath d='M200 145c0-56 200-32 200-72S200 56 200 0C200 56 0 32 0 73s200 16 200 72Z' style='fill:%23FF9;stroke-width:0'/%3E%3C/svg%3E%0A");
	--onionBURGER: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 145'%3E%3Cpath d='M200 145c0-56 200-32 200-72S200 56 200 0C200 56 0 32 0 73s200 16 200 72Z' style='fill:%23609;stroke-width:0'/%3E%3C/svg%3E%0A");
	--onionBURGER2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 145'%3E%3Cpath d='M200 145c0-56 200-32 200-72S200 56 200 0C200 56 0 32 0 73s200 16 200 72Z' style='fill:%23F63;stroke-width:0'/%3E%3C/svg%3E%0A");
	--onionWHITE: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 145'%3E%3Cpath d='M200 145c0-56 200-32 200-72S200 56 200 0C200 56 0 32 0 73s200 16 200 72Z' style='fill:%23FFF;stroke-width:0'/%3E%3C/svg%3E%0A");
	--onionSHADOW1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 145'%3E%3Cpath d='M200 145c0-56 200-32 200-72S200 56 200 0C200 56 0 32 0 73s200 16 200 72Z' style='fill:%239AE5CD;stroke-width:0'/%3E%3C/svg%3E%0A");
	--onionSHADOW2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 145'%3E%3Cpath d='M200 145c0-56 200-32 200-72S200 56 200 0C200 56 0 32 0 73s200 16 200 72Z' style='fill:%239C6;stroke-width:0'/%3E%3C/svg%3E%0A"); 
	/* for shadow hover */
	--loupeDESK: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61.4 61.4'%3E%3Cpath d='m61 59-8-9a30 30 0 1 0-3 3l9 8 2-2Zm-31-3C16 56 4 44 4 30S16 4 30 4s26 12 26 26-12 26-26 26Z' style='fill:%23039;stroke-width:0'/%3E%3C/svg%3E%0A");
	--loupeMOBILE: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 61.4 61.4'%3E%3Cpath d='m61 59-8-9a30 30 0 1 0-3 3l9 8 2-2Zm-31-3C16 56 4 44 4 30S16 4 30 4s26 12 26 26-12 26-26 26Z' style='fill:%23CFC;stroke-width:0'/%3E%3C/svg%3E%0A");
	--arrowSVG: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 82'%3E%3Cpath d='M0 65h49v17l41-41L49 0v17H0v48z' style='fill:%23690;stroke-width:0'/%3E%3C/svg%3E%0A");
	--arrowSVG2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 82'%3E%3Cpath d='M0 65h49v17l41-41L49 0v17H0v48z' style='fill:%23DECFB4;stroke-width:0'/%3E%3C/svg%3E%0A");

/*   Maybe revisit the SVGs to use an external sprite file with <use> anchors in our CSS file? 	*/

--fontBump: 110; /* treated like a percentage in calculations */
--ONION_width: calc(10em * .8);
--ONION_height: calc(3.875em * .8);

--sidebar-width: clamp(15em, 4vw, 17em);
--column-gap: clamp(2em, 5vw, 3em);

  /* Classic Custer  */

--CCyellow: #FF9;
--CClightgreen: #CFC;
--CCdark_green: #690;
--CCdark_green2: oklch(0.48 0.13 129.48);
--CCaqua: #6CC;
--CCaqua2: oklch(0.65 0.11 194.99);
--CCblue: #039;
--CCblue2: oklch(0.31 0.15 262.09);
--CCpurple: #609;
--CCpurple2: oklch(0.3 0.16 307.18); /* darker */
--CCpurple1: oklch(0.47 0.22 309.47); /* lighter */
--CCorange: #F63;
--CCslight_aqua: #9AE5CD;
--CChalf_dark_green: #9C6;
--CChalf_blue: #6699B2;
--CCfaint_blue: #9BCBC2;
--CChalf_purple_on_green: #B4BFC2;
	
/*	Element variables */
--titlelight: var(--CCdark_green);
--title: var(--CCblue);
--white: #fff;
--navdark: var(--CCblue);
--navcurrent: var(--CCorange);
--reddish: #381916;
--maintext: var(--CCblue);
--inputbutton: var(--white);
--inputbutton-bg: var(--white);
--button-bg: var(--CCdark_green);
--inputbutton-shadow: var(--CCaqua);
--inputbutton-placeholder: var(--CCfaint_blue);
	
/* for background gradients: */
--lhs-width: .4em;
--rhs-width: .6em;
/* overlap values will be doubled */
--overlap: 2.5px;
--overlapRHS: 1.5px;
--safe-left: 0px;
--safe-right: 0px;
  /* Calculate Safe-Area-Aware VW Units */
  --safe-vw: calc((100vw - var(--safe-left) - var(--safe-right)) / 100);
  --safe-width: calc((100vw - var(--safe-left) - var(--safe-right)));
  
/* Background gradient Colors */
--lhs-color: var(--CCaqua);
--ctr-color: var(--CClightgreen); 
--rhs-color: var(--CCyellow);
--lhs-ctr-blend: oklch(0.74 0.14 166.73);
--ctr-rhs-blend: oklch(0.92 0.21 127.89);	

/* Track List counter vertical adjustment */
--counterAdjust: calc(16 * .0125em);

}

/* 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*/

/* Custer styles */

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 {
	background: 
	url("gfx/plywood-a-body-10.jpg");
	background-size: max(1920px/1.8, 100vw) max(5120px/1.8, 267vw);
}

body:before {
/* Crucial: fixed position and full viewport height needed b/c element has no real content */
    content: '';
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(to right,
/* LHS solid band */
var(--lhs-color) 0,
var(--lhs-color) calc(var(--safe-left) + var(--lhs-width) - var(--overlap)),
/* LHS-CTR blend area (narrow) */
var(--lhs-ctr-blend) calc(var(--safe-left) + var(--lhs-width) - var(--overlap)),
var(--lhs-ctr-blend) calc(var(--safe-left) + var(--lhs-width) + var(--overlap)),
/* CTR solid band */
var(--ctr-color) calc(var(--safe-left) + var(--lhs-width) + var(--overlap)),
var(--ctr-color) calc(100vw - var(--safe-right) - var(--rhs-width) - var(--overlapRHS)),
/* CTR-RHS blend area (narrow) */
var(--ctr-rhs-blend) calc(100vw - var(--safe-right) - var(--rhs-width) - var(--overlapRHS)),
var(--ctr-rhs-blend) calc(100vw - var(--safe-right) - var(--rhs-width) + var(--overlapRHS)),
/* RHS solid band */
var(--rhs-color) calc(100vw - var(--safe-right) - var(--rhs-width) + var(--overlapRHS)),
var(--rhs-color) 100vw
);
    mix-blend-mode: multiply;
}


body {
	color: var(--maintext);
	font-family: nimbus-sans, sans-serif;
	font-weight: 400;
	font-style: normal;
	min-height: 100vh;
	/* padding: 1em; */
	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-family: "clarendon-text-pro", serif;
  font-weight: 700;
  color: var(--CCblue);
}
h1, h2 {font-size:1.5em;}
/*-----------------------------WP styles--------------------------------- */
a {
	color: var(--CCpurple);
	text-decoration: none;
}
main a, aside a { 
/*	text-decoration:underline;*/
/* Underline removed 14 Jul 2025 b/c it seems to busy; might want to add it back for accessibility */
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration:none;
color: var(--CCblue);}

.entry-title a, .entry-summary a, #site-title a, #menu a, #footer a {
  /* text-decoration: none; */
  cursor: pointer;
  /*	force cursor pointer when href is empty */
}
.entry-title a:hover, .entry-summary a:hover, #site-title a:hover, #menu a:hover, #footer a:hover, .entry-title a:focus, .entry-summary a:focus, #site-title a:focus, #menu a:focus, #footer a:focus, a {
/*  text-decoration: underline;*/
/*  text-decoration-style: dotted;*/
/*  text-decoration-thickness: 1px;*/
}
a:hover, a:focus,
a:hover h2, a:focus h2,
a:hover .product-artist, a:focus .product-artist /* search results  */
{
   color: var(--CCorange);
   /* text-shadow: 1px 1px 0 var(--CCorange); */
}
#wrapper {
  max-width: calc(1200px - 2em); /* this seems like sizing that has been taken over by BODY */
  margin: 0 auto;
}
#wrapper img {
  max-width: 100%;
  height: auto;
}
/* move footer content to base of window */
#wrapper {
display: flex;
flex-direction: column;
/* page margins and dock height */
/* min-height: calc(100vh - 2em - 60px);  */
/* page margins only */
min-height: calc(100vh - 2em); 
}
#footer {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
main, #sidebar {
	/* margin-bottom:2em; */
	line-height: 1.3;
}
main > :last-child, #sidebar > :last-child {
	margin-bottom:2em;
}
/* content font size bump, for Lucija */
#container, #footer, #abrl-dock
{ 
	font-size: calc(1em * var(--fontBump) / 100);
}
#gigs-compact, #search_sidebar {
	display:none;
	/* Hide #gigs-compact and #search_sidebar by default, enable display via columns breakpoint. */
}	

/* ==========================================================================
   < COLUMNS BREAKPOINT - independant from nav
   ========================================================================== */

@media screen and (max-width: 749px) {
	#sidebar .ab-socials {display:none;}
}

/* ==========================================================================
   > COLUMNS BREAKPOINT - independant from nav
   ========================================================================== */
   
@media screen and (min-width: 750px) {
  /* Container spans full width with column gap */
  #container {
    display: flex;
    flex-direction: row;
    width: 100%;
    column-gap: var(--column-gap);
    max-width: none; /* Remove any max-width constraints */
  }

  /* Onion / LHS navigation: fixed width, align left */
  nav#menu {
/* width doesn't get set till ≥ 900px breakpoint  */
    /* order: 1; */ /* Ensure it comes first */
  }

  /* Main content: flexible, takes remaining space */
  main {
    flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
    order: 2; /* Comes after nav */
    min-width: 0; /* Prevents flex item from overflowing */
  }

  /* Aside: constrained width, align right */
  #sidebar {
    flex: 0 0 var(--sidebar-width); /* flex-grow: 0, flex-shrink: 0, responsive width between 15-17em */
    width: var(--sidebar-width);
    order: 3; /* Comes last */
  }

	
#gigs-compact {
	display:block;
	margin-top: 0;
	margin-bottom: 2em;
}	
	
#footer {
	/* optional right margin to prevent footer from spanning Main + Sidebar  */
    /* margin-right: calc(var(--sidebar-width) + var(--column-gap)); */
}	
}


#wrapper > header {
  display: flex;
  flex-direction: row;
  column-gap: min(.8vw, 1200px * 0.08);
  justify-content: space-between;
/*   changed 28 Jun 2025 */
  margin-bottom: 1rem;
  font-size: 10.5vw;
  font-size: calc(var(--safe-vw) * 10.5);
}

#branding {
  /* flex-basis: 90%; */
}
#site-title h1, #site-title {
  font-family: "clarendon-urw", serif;
  font-weight: 800;
  font-size: 1em;
  text-transform: uppercase;
  margin: 0 0 0;
  padding-left: 0px;
  word-spacing: calc(-10em / 37);
}
#site-title span  {
	color: var(--title);
	text-shadow: 0.02em 0.030em var(--CCaqua); 
}
#site-title span span {
  color: var(--titlelight);
}
button#nav-toggle {
	display: none;
}
.widget-container {
	margin-bottom: 2em;
}
#footer {
	margin-bottom: 1em;
}
#footer .xoxo > li > * {margin-bottom: 1rem;}
#footer > ul > li {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.widgettitle {
  text-transform: initial;
  /* font-weight: 300; */
  font-size: 1em;
}
#footer .textwidget {
  margin: 0 0 1em;
}
#footer .textwidget ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
#footer .textwidget ul li {
  margin: 0 .6em .5em;
}
#footer .textwidget ul li i {
  /*	font awesome icons*/
  margin-right: .3em;
  font-size: 1.17em;
  vertical-align: -7.5%;
/*  color: #999;*/
}
#footer #copyright {
  font-size: .85em;
}
@media (min-width:450px) {
  #footer .textwidget ul {
    flex-direction: row;
  }
.widget-area h3,	
  #footer .textwidget ul li, .widget-title, .widgettitle {
	  margin: 0 0 .5em 0;
	  font-size: 1.33em;
	 }
}
#sidebar {container-type: inline-size;}
@container (width < 16em) {
  .widget-area h3,	
  #footer .textwidget ul li, .widget-title, .widgettitle {
	  /* shrink to fit longest sidebar head */
	  font-size: calc(83 * .1cqi);
  }
}

article header {
  margin: 0 0 1em;
}
article {margin-bottom:2em;}
article hr {
			display: block;
			margin: 3em 1em 3em;
			color: transparent;
			border: none;
			/* width: 33%;  */
			height: 2em;
			background: calc(50% - .5em) 50% / contain no-repeat url("gfx/hr-waves-5x.svg");
			background: calc(50% - .5em) 50% / contain no-repeat url("gfx/hr-waves-5x-long.svg");
			}
/* 
article hr {
			display: block;
			margin: 2em calc(33%) 3em;
			color: transparent;
			border-bottom: 1px var(--CChalf_blue) solid;
			height: 2px;
			background: var(--CCblue);
			}
 */


footer.entry-footer {
  /* text-align: center; */
  /* margin: 0 0 .5em; */
}
footer.entry-footer .cat-links, footer.entry-footer .tag-links {
  margin: 0 0 1em;
  display: block;
}
footer .nav-links {
  /* text-align: center; */
  /* display: flex; */
  /* gap: 1em; */
}
footer .nav-links > div {
  /* display: inline-block; */
  /* padding: 0 1em; */
}
.entry-content, aside {
  line-height: 1.35;
}

.entry-content * {max-width: 100%;}
.entry-meta {
  display: block;
  font-size: .7em;
  line-height: 1.4em;
  margin-top: .5em; 	/* add space between entry title and post date  */
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

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

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

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);
}
	
/* The side navigation menu */
button#nav-toggle {
  flex-basis: 7.5%;
/* button resets */
  display: inline-block;
  border: none;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background 250ms ease-in-out, 
                transform 150ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
}
	
button#nav-toggle {
  /* set shadow offsets with font-size adjustment */
  font-size: 1.25vw;
  font-size: calc(1.25em / 10.5);
  background: 
	  no-repeat center 0px var(--onionBURGER), 
	  no-repeat center calc(0.01em * 21) var(--onionSHADOW1), 
	  no-repeat center calc(.1em * 21) var(--onionBURGER), 
	  no-repeat center calc(0.11em * 21) var(--onionSHADOW1), 
	  no-repeat center calc(.2em * 21) var(--onionBURGER), 
	  no-repeat center calc(0.21em * 21) var(--onionSHADOW1);
  /* width: calc(100%); */
  background-size: calc(100%);
  height: calc(0.1em * 67);
  margin:0;
  /*   margin-top: 2vw; */
  margin-top: calc(2em / 1.25);
  box-shadow: none;
}
button#nav-toggle:hover {
  background: 
	  no-repeat center 0px var(--onionBURGER2), 
	  no-repeat center calc(0.01em * 21) var(--onionBURGER), 
	  no-repeat center calc(.1em * 21) var(--onionBURGER2), 
	  no-repeat center calc(0.11em * 21) var(--onionBURGER), 
	  no-repeat center calc(.2em * 21) var(--onionBURGER2), 
	  no-repeat center calc(0.21em * 21) var(--onionBURGER)
	  ;
}
nav#menu {
	width: 0;
	max-width: var(--safe-width); 	/* adjustment for screens with notches */
	   /* 0 width - change this with JavaScript */
	position: fixed; /* Stay in place */
	z-index: 9999; /* Stay on top; WC's sale bubbles have z=9, abrl-dock has 9998 */
	top: 0;
	right: var(--safe-right);
	overflow-x: hidden; /* Disable horizontal scroll */
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	display: flex;
	flex-direction: row-reverse;
	background: url(gfx/plywood-a-body-10.jpg);
	background-repeat:no-repeat;
}
#close_nav_group, #search_menu_group {
height: 100vh;
height: 100dvh;
}
#close_nav_group {
	/* flex-basis: 15%;*/
	/* float:right; */
	/* width: 16vw; */
	background: var(--CCyellow);
	flex: 0 0 auto; /* Don't grow, don't shrink, use natural/specified width */
	/* position: fixed; */
	display:flex;
	justify-content: center;
	padding: min(5vw, 2.0em);
	mix-blend-mode: multiply;
	}
#search_menu_group {
        /* flex-basis: 85%; */
        /* width: 80%; */
        background: var(--CClightgreen);
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        mix-blend-mode: multiply;
    }

.menu-lhs-container {
	flex: 1 1 auto;
        overflow-y: auto; /* Scrollable area */
}

#search, .menu {
	font-family: "clarendon-text-pro", serif;
	font-weight: 400;
	font-size: 1.0em;
	}
	.menu li {
		/* padding: .75em; */
	}
	#search {
			background-color: var(--CCpurple);
			padding: 3px;
			padding: 0;
			}

	#search .search-field {
			padding: calc(.75em - 3px);
/* 			loupe left  */
/*			padding-left: calc(2.75em - 3px); */
/*			background: var(--CCpurple) no-repeat calc(.75em - 3px) center / 1.25em 1.25em var(--loupeMOBILE); */
/*			loupe right  */
			/* background: var(--CCpurple) no-repeat calc(100% - .75em) center / 1.25em 1.25em var(--loupeMOBILE); */
			background: var(--CCpurple) ;
			border: none;
			width: 100%;
			color: var(--white);
			font-family: "clarendon-text-pro", serif;;
			font-size: 1rem;
			font-size:1em;
			box-shadow:none;
			margin:0;
			padding: calc(.75em);
	}

 ::placeholder, 
 ::-webkit-input-placeholder, /* Chrome/Opera/Safari */
 ::-moz-placeholder, /* Firefox 19+ */
 :-moz-placeholder, /* Firefox 18- */
 :-ms-input-placeholder /* IE 10+ */ { 
  color: var(--CClightgreen);
/*	  opacity: 1;*/
}
	.menu li a {
display:block; padding: .75em;
}
	.menu li a:hover {
/* 		color: var(--CCorange); */
		color: var(--white);
/* 		background-color: var(--white); */
		background-color: var(--CCorange);
	}
	.menu li:nth-child(odd) {
	background-color: var(--CCaqua);
	}	
	.menu li:nth-child(even) {
	background-color: var(--CCslight_aqua);
	}
	#search, .menu li a { color: var(--CCblue);}
#menu #closebtn {
   width: 5.5vw;
        min-width: 1.5em;
        max-width: 2.5em;
}
	/* Hide sidebar search when mobile nav and dock are visible  */
#sidebar .widget_search {display: none;}
}

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

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

	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);
	}
		
	#site-title h1, #site-title {
	  font-size: min(8vw, 1200px * 0.08);
	}
	#site-title {
		padding-left: min(6vw, 1200px * 0.03);
	}
	
	/*  Desktop Onion Menu   */
	
	nav#menu #search, #close_nav_group { display: none;}
	
	/* Navigation: fixed width, align left */
  nav#menu {
    flex: 0 0 var(--ONION_width); /* flex-grow: 0, flex-shrink: 0, flex-basis: var(--ONION_width) */
    width: var(--ONION_width);
    order: 1; /* Ensure it comes first */
  }
	
	.menu {
	  font-family: "clarendon-text-pro", serif;
	  font-weight: 700;
	  font-size: 1.0em;
	  text-align: center;
	}
	.menu li.menu-item-gigs {
		/* don't show Gigs in desktop nav */
		display:none;}
	
	/* onions */
	.menu li a {
		color: var(--navdark);
		display: block;
		background: 
		  no-repeat center 0px var(--onionBASE), 
		  no-repeat center calc(0.28125em * .9) var(--onionSHADOW1), 
		  no-repeat center calc(0.3125em * .9) var(--onionWHITE);
		width: var(--ONION_width);
		background-size: var(--ONION_width);
		height: var(--ONION_height);
		line-height: var(--ONION_height);
		text-transform: lowercase;
	}
	.menu li a span {
		/*	slight adjustment to baseline for about 1px adjustment for Chrome's benefit at Safari's loss	*/
		position: relative;
		bottom: calc(2 * var(--ONION_height) / 100);
		/* make type size slightly smaller than main, #sidebar and footer areas */
		font-size: calc(100em / var(--fontBump));
	}	
	.menu li.current_page_item a, .menu li a:hover {
	  color: var(--navcurrent);
	  background: no-repeat center 0px var(--onionWHITE), 
		  no-repeat center 0.28125em var(--onionSHADOW1), 
		  no-repeat center 0.3125em var(--onionWHITE);
	}
	.menu li a:hover {
	  background: no-repeat center 0px var(--onionWHITE), 
		  no-repeat center 0.28125em var(--onionSHADOW2), 
		  no-repeat center 0.3125em var(--onionWHITE);
	}
	#footer {
		margin-left: calc(var(--ONION_width) + var(--column-gap));
	}

	#search_sidebar {
		display:block;
		margin-bottom:2em;
	}
	
}
::placeholder,
::-webkit-input-placeholder  /* Chrome/Opera/Safari */
,
::-moz-placeholder  /* Firefox 19+ */
,
:-moz-placeholder  /* Firefox 18- */
,
:-ms-input-placeholder  /* IE 10+ */
{
  color: var(--inputbutton-placeholder);
/*  opacity: 1;*/
	}
form, .entry-content form {
  max-width: calc(100% - 3px) /* adjustment for box-shadow on inputs and buttons */;
}
input, 
button:not(.wc-block-mini-cart__button), 
.wp-block-search__input, 
.wp-block-button__link, .wp-element-button,
.ab-btn, .nav-links a, 
.nav-links > span /* select span only if it's not inside a link */
{
	border: none;
	color: var(--inputbutton);
	background-color: var(--inputbutton-bg);
	font-size: 1rem;
	text-decoration: none;
	box-shadow: 3px 2px 0 0px var(--inputbutton-shadow);
	margin-bottom: 0;
	border-radius: 0;

	height: 2em;
	line-height: 1;
	padding: .5em;
}
#search_menu_group button.search-submit {
	box-shadow:none; /* No shadow in mobile menu */
	background-color: var(--CCpurple2);
	height: auto;
	width: 3em !important;
}
#search_menu_group button.search-submit::before { 
	background-color: var(--CCaqua);
}
#search_menu_group button.search-submit:hover::before { 
	background-color: var(--CCorange);
}
input, 
button:not(.wc-block-mini-cart__button):not(.wc-block-cart-item__remove-link):not(.pswp__scroll-wrap button):not(.pswp__scroll-wrap * button), 
.wp-block-search__input, .variant-buttons-container a.added_to_cart.ab-btn {
/* larger styles with Clarendon */
	font-family: "clarendon-text-pro", serif;
	width: calc(100% - 2px);
	height: calc(2.5em);
	padding: calc(.75em);
}
nav form {max-width: 100%}
nav input, nav button {box-shadow:none;}
input {
	color: var(--CCorange);
	background-color: var(--white);
	/* max-width: 30em; */ /* this takes care of subform in wide site footer  */
}
button:not(.wc-block-mini-cart__button), 
button.search-submit, input[type="button"], input[type="submit"], 
.wp-block-button__link, .wp-element-button,
.ab-btn, .nav-links a
{
	cursor: pointer;
	/* width: inherit; */
	background-color: var(--button-bg);
	color: var(--white);
	font-family: "clarendon-text-pro", serif;
	font-weight:inherit;
}
button:not(.wc-block-mini-cart__button):hover, /* Added for general coverage of block editor widget buttons; does this enable anything we don't want to enable? */
button.search-submit:hover, 
input[type="button"]:hover, 
input[type="submit"]:hover,
.wp-block-button__link:hover, .wp-element-button:hover,

.ab-btn:hover, .nav-links a:hover {
	background-color: var(--CCorange); 
	color: var(--white);
}
.nav-links {
	font-family: "clarendon-text-pro", serif;;
	display: flex;
	gap: .35em;}
.nav-links span.current{
	background: var(--CCblue);
	/* background: var(--CCyellow); */
	/* background: var(--CCfaint_blue); */
	/* background: white; */
	color:white;
	/* color:inherit; */
}
.nav-links span.dots { 
	margin: 0 -0.15em 0 0;
	color: var(--CCdark_green);
	background:none;
	box-shadow:none;
}
.search-form, .mc4wp-form-fields, .woocommerce-product-search {
	display:flex;
}
.search-input {width: calc(100%)}

.search-field {
	background-color: var(--inputbutton-bg);
}

button.search-submit {
	width: calc(2.5em - 1px) !important;
	/* height: calc(1rem + .75em - 3px); */
	margin-left: -3px; /* adjustment for box-shadow on preceding element */
	position: relative;
	/* -webkit-mask: url('gfx/search-eye2.svg') center bottom/contain no-repeat; */
	/* mask: url('gfx/search-eye2.svg') center bottom/contain no-repeat; */
	/* background: var(--button-bg) no-repeat center center / 1.75em 1.75em url('gfx/search-eye2.svg'); */
}
button.search-submit::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.75em;
    height: 1.75em;
    background-color: var(--white); 
    -webkit-mask: url('gfx/search-eye2.svg') center center/contain no-repeat;
    mask: url('gfx/search-eye2.svg') center center/contain no-repeat;
}
.mc4wp-form-fields input[type="submit"] {
	flex-basis: 33%;
}
.mc4wp-form-fields input[type="email"] {
	/* flex-basis:66%; */
}
.wp-block-search__button {margin-left:0;
/* fix default search block CSS */
}

/* Search Results  */
body.search-results main#content header.header {margin-bottom: 1.5em}
/* body.search-results main#content header.header h1 {color: var(--CCorange)} */
body.search-results h1 span.searchterm, body.search-no-results h1 span.searchterm {color: var(--CCpurple)}
body.search-results h1 span.searchterm, body.search-no-results h1 span.searchterm {color: var(--CCorange)}

/* Contact page */
.mc4wp-form {
/* also applies in sidedbar */
	margin-bottom:1em;
	width: 100%;
}
.page-id-2 #sidebar #block-17 {
	display:none;
	/* hide mailing list sub on Contact page */
}


/*SPECIAL CASES */
body.search-no-results .widget_search { display: none;}

h2.artist {
	color: var(--CCdark_green)
		  }
#sidebar #block-21 .wp-block-embed {
	/* fix for embed block not working when nested in stack.  */
	/* Remove bottom margin from preceding block, replicate H3 bottom margin */
	margin-top: calc(-2em + .5 * 1.33em);
}

/* Regular Lists */
/* Normal editor content is expected to use .wp-block-list, however, products don't use the block editor (but they use .entry-summary for their descriptions) */
.entry-content ul.wp-block-list, .entry-summary ul,
.entry-content ol.wp-block-list, .entry-summary ol {
	margin-bottom: 1em;
}
.entry-content .wp-block-list li, 
.entry-summary li {
	display: flex;
	gap: .5em;
}
.entry-content .wp-block-list li {
	flex-wrap: wrap;
}
/* Force nested lists to take full width and break to new line */
.wp-block-list li > ol,
.wp-block-list li > ul {
  width: 100%;
  padding-left: 2em;
  margin-top: -0.5em; /* compensate for .5em gap on parent */
  margin-bottom: 0 !important;
}

.entry-content ul.wp-block-list li::before, 
.entry-summary ul li::before, 
.entry-content ol.wp-block-list ul > li::before,
.entry-summary ol.wp-block-list ul > li::before  {
		content: "*";
		font-family: "clarendon-urw", serif;
		line-height:1.1rem;
		font-size: 1.25em;
		font-weight: 700;
		margin-top: .25rem;
} 

.entry-content ol.wp-block-list, 
.entry-summary ol.wp-block-list {
		counter-reset:li; 
}

.entry-content ol.wp-block-list > li::before, 
.entry-summary ol.wp-block-list > li::before {
		content:counter(li) "."; 
		counter-increment:li; 
	font-family: inherit; font-size:inherit; font-weight:inherit;
} 

.entry-content ol.wp-block-list ol,
.entry-summary ol.wp-block-list ol {
    counter-reset: nested-li;
}

.entry-content ol.wp-block-list ol > li::before,
.entry-summary ol.wp-block-list ol > li::before {
    content: counter(nested-li, lower-alpha) "."; 
    counter-increment: nested-li; 
}

/* Tracklist  */
.track_list {
	margin-bottom:1em;
}

.track_list ol {
	counter-reset:li; /* Initiate a counter */
	margin-left:0; /* Remove the default left margin */
	padding-left:0; /* Remove the default left padding */
	padding-top: calc(.75 * var(--counterAdjust));
}

.track_list li {
	margin-bottom: .5em;
	/* background: pink; */
}
/* Track title, link, acts as parent to counter (::before) and play (::after) icon elements  */
.track_list li .abp-audio-link, .track_list ol li:not(:has(> a)) {
	display: flex;
	align-items: flex-start; /* align counters with first line */
	gap: .25em;
	padding-right: 1.5em;
}

/* changed to place list marker inside links so hover effect will work */
/* counter element */
.track_list ol li > a::before, .track_list ol li:not(:has(> a))::before  {
	content:counter(li); /* Use the counter as content */
	counter-increment:li; /* Increment the counter by 1 */
	width:2em; 
	height: 2em;
	border-radius: 1em;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	line-height: 2em;
	font-size: .75em;
	/* Some space between the number and the content in browsers that support generated content but not positioning it (Camino 2 is one example) */
	margin-right:.33em;
	color:#fff;
	background:var(--CCpurple);
	text-align:center;
	flex-shrink: 0; /* prevent counter from shrinking with song title is too long */
	}

.track_list ol li > a:hover::before {
	background: var(--CCorange)
}
.track_list ol li .abp-audio-link::after {
	font-size: 1.25em;
	right: 0;
	position: absolute;
}
.track_list ol li > a::before, .track_list ol li:not(:has(> a))::before,
.track_list ol li .abp-audio-link::after  {
		margin-top: calc(-1 * var(--counterAdjust));
		margin-bottom: var(--counterAdjust);
}

/* Ensembles */
.ensemble-archive-header {margin-bottom:1.5em;}

main h4 {font-weight:400;}

/* Cart Badge Count and Account User Links */

.desktop-cart {
	display: flex;
	gap: .5em;
	padding-top: 2vw;
	align-items: center;
/*	2vw copied from nav toggle */
	font-size: 1rem;
}
@media (max-width: 899px) {
	/* Dock visible, inline CSS created by plugin, overriden by functions.php */
	body {padding-bottom: 60px;} /* matches padding when AB Player is active */
	.desktop-cart {display:none;}
 }
	
/* Cart Badge Styles */

.cart-badge-link {
	/* OLD STYLES */
	/* color: var(--CCblue); */
	/* display: flex; */
	/* align-items: center; */
	/* gap: 8px; */
	text-decoration: none;
	font-weight: 500;
	/* END OLD STYLES  */
	/* -webkit-mask: url('gfx/shopping-bag.svg') center bottom/contain no-repeat; */
	mask: url('gfx/shopping-bag.svg') center bottom/contain no-repeat;
	/* mask: url('gfx/paper-bag-2.svg') center bottom/contain no-repeat; */
	/* mask: url('gfx/paper-bag.svg') center bottom/contain no-repeat; */
	/* mask: url('gfx/lunch-bag.svg') center bottom/contain no-repeat; */

	display: flex;
	align-items: center;
	justify-content:center;
	color: white;
}


.desktop-cart .cart-badge-link, .desktop-cart .abrl-icon {
	background: var(--CCblue);
	width: 2.5em;
	height: 2.5em;
} 

#abrl-dock .cart-badge-link {
	color: var(--CCblue);
}

.cart-badge-link:hover, #abrl-dock .cart-badge-link:hover, 
a:hover .abrl-icon, #abrl-dock a:hover .abrl-icon, 
#abrl-dock button:hover .abrl-icon, a.ab-icon:hover  {
    background-color: var(--CCorange);
    text-decoration: none;
    color: white;
}

#abrl-dock .cart-badge-link:hover {
    color: inherit;
}
.cart-badge-icon {
    font-size: 16px;
    line-height: 1;
}

.cart-badge-count {
    padding-top: .65em;
}

.cart-badge-total {
    white-space: nowrap;
}

/* Overrides for AB Playlister and AB Record Label   */
/* Main Player Container */

/* common background properties  */
#abrl-dock, #abrl-dock .abrl-search-form, .ab_player {
	background: url("gfx/plywood-a-dock-40.jpg"), 
	var(--CCpurple);
	background-blend-mode: multiply;
	background-repeat:no-repeat;
	background-position-y: 2%;
	background-size: 
    max(1920px/1.8, 100vw) max(180px/1.8, 9.375vw), 
    100% 100%;
}

#abrl-dock {
	background-position-y: 2%;

}
#abrl-dock .abrl-search-form  {
	background: url("gfx/plywood-a-dock-40.jpg"), 
	var(--CCpurple2);
	background-position-y: 0%;
}

.ab_player {

}

/* Controls Container */
.abp-controls {
	gap: 0;
    /* display: flex;
    gap: 10px;
    margin-right: 20px; */
}

/* Dock + Player Buttons, Links, Input */
button.abp-btn, #abrl-dock button, #abrl-dock input {
	box-shadow: none;
/* 	background: var(--CCpurple1); */
	background: white;
	}

button.abp-btn, #abrl-dock button {
	/* font-size: 21px; */
/* 	use adjusted font size with standard loupe icon */
	background:none;
	padding: 0px;
	height: 40px;
	width: 40px;
	color: var(--CCaqua)
	}
button.abp-btn:hover, #abrl-dock button:hover, #abrl-dock a:hover {
	background:none; 
	color: var(--CCorange);
}

 #abrl-dock .abrl-search-input {color: var(--CCorange);}
.abrl-account-link { 
	display:flex;
}

#abrl-dock .abrl-icon, #abrl-dock .cart-badge-link {
    width: 2em;
    height: 2em;
    background-color: var(--CCaqua);
}

#abrl-dock .abrl-icon-account, 
.desktop-cart
.abrl-icon-account {
    -webkit-mask: url('gfx/icon_beth.svg') center bottom/contain no-repeat;
    mask: url('gfx/icon_beth.svg') center bottom/contain no-repeat;
    width: 2.25em;
}

#abrl-dock .abrl-icon-search {
	-webkit-mask: url('gfx/search-eye2.svg') center bottom/contain no-repeat;
	mask: url('gfx/search-eye2.svg') center bottom/contain no-repeat;
	/* width: 1.5em; */
}
#abrl-dock .abrl-search-toggle.search-expanded .abrl-icon-search {
	-webkit-mask: url('gfx/close-blob-fine.svg') center bottom/contain no-repeat;
	mask: url('gfx/close-blob-fine.svg') center bottom/contain no-repeat;
	width: 1.75em;
}

#ab_player button.abp-play-pause {
	font-size:36px;
}

.abp-btn {
    /* background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    font-size: 20px;
    line-height: 1;
    transition: opacity 0.2s;
    outline: none; */
	/* box-shadow: none; */
	
}

.abp-btn:hover {
    /* opacity: 0.8; */
}

.abp-btn:focus {
    /* outline: 1px dotted #fff;
    outline-offset: 2px; */
}

/* Seek Bar Container */
.abp-seek-container {

}

.abp-seek-bar {
    /* position: relative;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden; */
	border-radius: initial;
	/* background: none; */
	/* border: 1px solid var(--CCslight_aqua) */

}

/* Progress Bar */
.abp-seek-progress {
    /* position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    width: 0%;
    transition: width 0.1s linear;
    pointer-events: none; */
	background: var(--CCyellow); 
	background: var(--CCpurple); 
	background: black;  
	opacity: 0.45;
  background-blend-mode: saturation;
}

/* Track Title */
.abp-track-title {
    /* position: absolute;
    top: 50%;
    left: 15px;
    right: 15px;
    transform: translateY(-50%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    font-size: 14px;
    line-height: 1.4; */
}

.ab-socials {
	display:flex;
	justify-content: space-between;
	font-size: 2.25em;
	font-size: 2.125em;
}
#footer .ab-socials {
	gap: .5em;
	justify-content: flex-start;
}
.ab-social  {
	height: 1em;
	display: flex;
	align-content: center;
	justify-content: center;
	flex-wrap: wrap;
} 

.ab-social .ab-icon {
	background: var(--CCblue);
	width: 1em;
	height: .625em;
} 
.ab-social .ab-icon:hover {
	background: var(--CCorange);
}

.ab-icon.ab-network {
	-webkit-mask: url('gfx/icon_beth.svg') center bottom/contain no-repeat;
    mask: url('gfx/icon_beth.svg') center bottom/contain no-repeat;
    width: 2.25em;
}

.ab-icon.ab-facebook {
	-webkit-mask: url('gfx/networks/facebook.svg') center bottom/contain no-repeat;
    mask: url('gfx/networks/facebook.svg') center bottom/contain no-repeat;
    /* width: 2.25em; */
}

.ab-icon.ab-instagram {
	-webkit-mask: url('gfx/networks/instagram.svg') center bottom/contain no-repeat;
    mask: url('gfx/networks/instagram.svg') center bottom/contain no-repeat;
    /* width: 2.25em; */
}

.ab-icon.ab-twitterx {
	-webkit-mask: url('gfx/networks/twitterx.svg') center bottom/contain no-repeat;
    mask: url('gfx/networks/twitterx.svg') center bottom/contain no-repeat;
    /* width: 2.25em; */
	
	-webkit-mask: url('gfx/networks/twitter.svg') center bottom/contain no-repeat;
    mask: url('gfx/networks/twitter.svg') center bottom/contain no-repeat;
    /* width: 2.25em; */
}

.ab-icon.ab-bandcamp {
	-webkit-mask: url('gfx/networks/bandcamp.svg') center bottom/contain no-repeat;
	mask: url('gfx/networks/bandcamp.svg') center bottom/contain no-repeat;
	width: 1.125em;
/* alternate BC logo */
	-webkit-mask: url('gfx/networks/bandcamp-bc.svg') center bottom/contain no-repeat;
	mask: url('gfx/networks/bandcamp-bc.svg') center bottom/contain no-repeat;
	width: 2.25em;
	width: 2.0em;
	width: 1.875em;
	width: 1.75em;
}

.ab-icon.ab-youtube {
	-webkit-mask: url('gfx/networks/youtube.svg') center bottom/contain no-repeat;
	mask: url('gfx/networks/youtube.svg') center bottom/contain no-repeat;
	width: 0.95em;
	width: 0.875em;
}



/* Woocommerce */

/*
single-product elements to change:
woocommerce-product-gallery woocommerce-product-gallery--with-images woocommerce-product-gallery--columns-4 images
summary entry-summary

single-product page body classes: 
wp-singular product-template-default single single-product postid-1766 wp-embed-responsive wp-theme-blankslate wp-child-theme-bc_flex theme-blankslate pvt_loaded woocommerce woocommerce-page woocommerce-js

*/

.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
    float: none;
    width: 100%;
    /* max-width: 500px; */
}
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
    float: none;
    width: 100%;
	/* max-width: 500px; */
/*    clear: none*/
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-bottom: 1em; /* tame excessive margin on product grid */
    margin-bottom: 1.5em; /* alternate */
    margin-bottom: 2em; /* alternate */
}
.woocommerce ul.products li.product .woocommerce-loop-category__title, .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3 {
    padding: 0;
	margin-bottom: 1em;
	margin-bottom: .5em;
}

.woocommerce div.product .product_title {
	margin-bottom:0.5em;
}

.product-artist, a .product-artist  {
	color: var(--CCdark_green);
}
.product-artist::after { 
  content: "\A";
  white-space: pre;
}


/* Variant Button Styles */
.variant-buttons-container {
    display: flex;
    flex-wrap: wrap;
/*for >2 buttons */
    flex-direction: column;
    gap: .5em;
    margin: .5em 0 1.5em;
    margin: 0 0 1.5em;
}
.products .variant-buttons-container {
	margin-bottom: 0; /* remove bottom margin in product grid */
}

.abrl-add-to-cart-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.single-product .abrl-add-to-cart-button {
	/* make the narrower button width kick in when page/main content is wide enough */
/*    width: calc(50% - .5em);*/
}

.abrl-add-to-cart-button:hover {
    /* background: #0073aa;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 115, 170, 0.3); */
}

.abrl-add-to-cart-button.out-of-stock,
.abrl-add-to-cart-button:disabled,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .out-of-stock 
{
    opacity: 0.5;
    cursor: not-allowed;
	background-color: var(--CCslight_aqua); 
	color: var(--CCorange);
}

.variant-name {
    /* font-weight: 600; */
    flex: 1;
    text-align: left;
}

.variant-price {
    /* font-weight: 500; */
    white-space: nowrap;
}
.abrl-add-to-cart-button:disabled .variant-price {
display:none;
}
.variant-buttons-container a.added_to_cart.ab-btn {
	display:flex;
	order:10;
	color:white;
	background-color: var(--CCblue);
	/* justify-content:center; */
}
.variant-buttons-container a.added_to_cart.ab-btn:hover {
	background-color: var(--CCorange);
}
.variant-buttons-container a.added_to_cart.ab-btn::after {
	content:  '\2192';
	margin-left: 1ch;
}

/* Sale! badges and prices */
.variant-buttons-container ins {
	text-decoration:none;
}
.woocommerce span.onsale {
	padding:0; /* WC's standard padding results in oval shape */
	background-color: var(--CCorange);
	font-family: "clarendon-text-pro", serif;
	font-weight:400;
	--size: 3.5em;
	width: var(--size);
	height: var(--size);
	line-height: calc(var(--size) + .1em);
}

/* WooCommerce Blocks Integration */
/*
.wc-block-grid__product .wc-block-grid__product-add-to-cart,
.wc-block-grid__product .wc-block-grid__product-price,
.wc-block-grid__product .wc-block-components-product-price {
    display: none !important;
}
*/

.wc-block-grid__product .variant-buttons-container {
    margin-top: 0;
}

.wc-block-grid__product .wc-block-grid__product-title {
	text-align:initial;
	font-family: "clarendon-text-pro", serif;
	font-weight: 400;
	font-size: 1.1em; 
	line-height: 1.3;
	}

.wc-block-grid__product a {
	text-decoration:none;
}
.wc-block-grid__product .abrl-add-to-cart-button {
    font-size: 12px;
    /* padding: 8px 12px; */
    /* min-height: 36px; */
    /* width: calc(100% - 3px); */
}

.wc-block-grid__product .abrl-add-to-cart-button .variant-price del 
{
	/* hide original price when there isn't enough space  */
	display: none;
}

/*CART */
a.wc-block-components-product-name {
	color: inherit;
	font-family: "clarendon-text-pro", serif;
	text-decoration: inherit;
}

/* AB Gigs */

.bars-header {margin-bottom:1em;}
#gigs-compact .gig-year-header {
	margin-bottom: .5em;
}

.gig-year-header, .entry-meta, .bars-header {
  display: flex;
  align-items: center;
  text-align: center;
  font-family: "clarendon-text-pro", serif;
  font-weight: 700;
}

.gig-year-header::before, 
.gig-year-header::after, 
.entry-meta::before,
.entry-meta::after, 
.bars-header::before,
.bars-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--CCblue);
}

.gig-year-header::before, .entry-meta::before, .bars-header::before {
  margin-right: .25em;
}

.gig-year-header::after, .entry-meta::after, .bars-header::after {
  margin-left: .25em;
}

.entry-meta {
/* adjustments for post dates */
	font-weight:400;
}
.entry-meta::before, .entry-meta::after {
	height: .5px;
	/* disable horizontal bars with display:none */
/* 	display: none; */
}
#gigs-compact .gig {
  margin-bottom: 1.5em;
}
#gigs-compact .gig a.gig-link{
	display: flex;
	flex-direction: row;
	gap: 1em;
	text-decoration: none;
	color: inherit;
	font-size:inherit;
}
#gigs-compact .gig .event {
  display: flex;
  flex-direction: column;
	margin-top: -.175em; /* align with top of badge */
}

#gigs-compact .gig a.gig-link:hover .event  > * {color: var(--CCorange);}

/* badged dates */
.date-badge {
	width: 4em;
	height: 4.9em;
	font-family: "clarendon-text-pro", serif;
	line-height: 1;
	padding-top: .5em;
	color: white;
	/* font-size: 1em; */
	/* font-weight: 400; */
	/* font-style: normal; */
	/* min-width: 0; */ /* Override flexbox default, prevents .date-badge from growing */
	/* flex-shrink: 0; */ /* Prevent shrinking, maybe unneeded */
	
/* Polygon shape - percentages scale automatically with element dimensions */
	clip-path: polygon(
	100% 90%,  /* bottom-right with slight inset */
	50% 100%,  /* bottom-center point */
	0% 90%,    /* bottom-left with slight inset */
	0% 0%,     /* top-left */
	100% 0%    /* top-right */
	);
	
/* Multilayered background with blend mode */
	background: 
	/* Solid color layer - set by artist classes or nth-child fallback */
	linear-gradient(var(--gig), var(--gig)),
	/* Texture layer - position controlled by nth-child */
	url('gfx/plywood-a-badges-20.jpg')
	var(--wood-x, 0%) 0% / auto auto;
	background-blend-mode: multiply;
	background-repeat:no-repeat;
	}

#gigs-compact .date-badge {
	width: 3.67em;
	height: 4em;
}

/* Texture positioning with nth-child */
.gig:nth-child(5n+1) .date-badge { --wood-x: 0%; }
.gig:nth-child(5n+2) .date-badge { --wood-x: 20%; }
.gig:nth-child(5n+3) .date-badge { --wood-x: 40%; }
.gig:nth-child(5n+4) .date-badge { --wood-x: 60%; }
.gig:nth-child(5n) .date-badge { --wood-x: 80%; }

/* Fallback colors for elements without artist classes */
/* These have lower specificity, so artist classes will override them */
.gig:nth-child(7n+1) .date-badge { --gig: var(--CCdark_green); }
.gig:nth-child(7n+2) .date-badge { --gig: var(--CCaqua); }
.gig:nth-child(7n+3) .date-badge { --gig: var(--CCblue); }
.gig:nth-child(7n+4) .date-badge { --gig: var(--CCpurple); }
.gig:nth-child(7n+5) .date-badge { --gig: var(--CCpurple2); }
.gig:nth-child(7n+6) .date-badge { --gig: var(--CCaqua2); }
.gig:nth-child(7n) .date-badge { --gig: var(--CCdark_green2); }
/* Artist-specific colors (highest priority) */
/* Edit styles to match most-frequently used artists  */
.artist1 { --gig: var(--CCdark_green); }
.artist2 { --gig: var(--CCaqua); }
.artist3 { --gig: var(--CCblue); }
.artist4 { --gig: var(--CCpurple); }
.artist5 { --gig: var(--CCpurple2); }
.artist6 { --gig: var(--CCaqua2); }
.artist7 { --gig: var(--CCdark_green2); }
.artist8 { --gig: var(--CCblue2); }

/* example */
.gig .gig-artist-TheSlugs .date-badge
 { --gig: var(--CCblue2); }

.gig-title, .gig-subtitle {
	font-family: "clarendon-text-pro", serif;
	margin-bottom: 0;
}
.gig-title > a {
	text-decoration: none;
/* 	undecided about weight and color, currently sticking with bold to match other "title" styled elements on search results page */
	/* 	font-weight: 400; */
	/* color: inherit; */
	/* font-weight:inherit; */
}
.gig-venue-info {margin:0;}
.gig-address {margin:0;}
.gig-time-info {
/* undecided about size. currently 0.9em */
/* font-size: 1rem; */
/* font-size: inherit; */
}

.gig-main-info {
	/* Gap below set by parent's flex */
	margin-top: -.25em; /* align with top of badge */
}
.gig-description  
/* .ab-gigs-navigation */
{
	/* Match visual alignment of .gig-main-info */
	margin-left: calc(4em + 1em);
}
.gig-links .ab-btn {
	min-width: calc(33.3% - .5em);
	text-align:center;
	font-weight: normal;
	/* font-family: inherit; */
}
.past-gig .gig-links .ab-btn {
	background-color: var(--CCslight_aqua); 
}
.ab-gigs-navigation {
    text-align: left;
}

/* Arrow Navigation Button Styling */
.post-navigation {
    display: flex;
    gap: 1em;
    margin: 0 0;
    justify-content: space-between;
}

.post-navigation .nav-links, .ab-gigs-navigation {
    display: flex;
    justify-content: space-between;
    gap: .5em;
    flex-wrap: wrap;
}
.ab-gigs-navigation {
/* margin-left: inherit; */
/* I can't make up my mind */
}

.post-navigation .nav-previous {
	padding-right:3px;
	/* margin-right:3px; */
}
.post-navigation .nav-next {
	margin-left:auto; /* aligns to left edge when wrapping */
}

/* Arrow button adjustments */
.ab-btn.ab-arrow {
margin-bottom: .5em;
}

.ab-btn.ab-arrow, 
.ab-btn.ab-arrow span {
	/* The arrow head shadow on the left arrow will stack above .ab-btn but the nested SPAN finds its way to the top! */
	position: relative;
	display: flex;
	align-items: center;
    /* Ensure pseudo-elements are clickable */
	z-index: 1;
	height: 3em;
	/* font-family: nimbus-sans, sans-serif; */
}
.ab-btn.ab-arrow span {
    background: var(--CCdark_green);
    pointer-events: none;
}

/* Adjust padding and margins to account for arrow heads */
.ab-btn.ab-arrow-left {
    padding-left: 0;
    margin-left: 1.0em; /* Space for arrow head */
    /* margin-left: 0em; */	/* move left to invade padding on .post-navigation */ 
}

.ab-btn.ab-arrow-right {
    padding-right: 0em;
    margin-right: 2em; /* Space for arrow head */
    margin-right: 1.0em;
}

/* Arrow head common styles */
.ab-btn.ab-arrow::before,
.ab-btn.ab-arrow::after {
	content: '';
    position: absolute;
    width: 0;
    height: 0;
    transform: translateY(-50%);

}

.ab-btn.ab-arrow::before {
    top: 50%;
    pointer-events: none;
    z-index: -1;
}

.ab-btn.ab-arrow::after {
top: calc(50% + 2px); /* 2px offset for shadow */
    z-index: -2;
}

/* Arrow head STANDARD SIZING */

/* Left arrow head (previous post) */
.ab-btn.ab-arrow-left::before {
    left: -1.5em;
    border-top: 2em solid transparent;
    border-bottom: 2em solid transparent;
    border-right: 2em solid var(--button-bg);
}

/* Left arrow head shadow */
.ab-btn.ab-arrow-left::after {
    left: calc(-1.5em + 3px); /* 3px offset for shadow */
    border-top: 2em solid transparent;
    border-bottom: 2em solid transparent;
    border-right: 2em solid var(--inputbutton-shadow);
}

/* Right arrow head (next post) */
.ab-btn.ab-arrow-right::before {
    right: -1.5em;
    border-top: 2em solid transparent;
    border-bottom: 2em solid transparent;
    border-left: 2em solid var(--button-bg);
}

/* Right arrow head shadow */
.ab-btn.ab-arrow-right::after {
    right: calc(-1.5em + -3px); /* 3px offset for shadow */
    border-top: 2em solid transparent;
    border-bottom: 2em solid transparent;
    border-left: 2em solid var(--inputbutton-shadow);
}

/* SMALLER Arrow heads */
/* Left arrow head */
.ab-btn.ab-arrow-small, .ab-btn.ab-arrow-small span {
	height: 2em; /* Resize shaft */
}

.ab-btn.ab-arrow-small.ab-arrow-left::before {
    left: -1em;
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-right: 1em solid var(--button-bg);
}

/* Left arrow head shadow */
.ab-btn.ab-arrow-small.ab-arrow-left::after {
    left: calc(-1em + 3px); /* 3px offset for shadow */
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-right: 1em solid var(--inputbutton-shadow);
}

/* Right arrow head  */
.ab-btn.ab-arrow-small.ab-arrow-right::before {
    right: -1em;
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid var(--button-bg);
}

/* Right arrow head shadow */
.ab-btn.ab-arrow-small.ab-arrow-right::after {
    right: calc(-1em + -3px); /* 3px offset for shadow */
     border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid var(--inputbutton-shadow);
}

/* Hover effects for arrow heads and nested SPAN */
.ab-btn.ab-arrow-left:hover::before {
    border-right-color: var(--CCorange);
}
.ab-btn.ab-arrow-right:hover::before {
    border-left-color: var(--CCorange);
}
.ab-btn.ab-arrow:hover span {
	background: var(--CCorange)
}

.read-more {display:flex;}

select {
/* styling */
	background-color: white;
	border: thin solid var(--CCdark_green);
	border:none;
	box-shadow: 3px 2px var(--inputbutton-shadow);
	height: 2.5em;
	display: inline-block;
	font-family: "clarendon-text-pro", serif;;
	color: var(--CCdark_green);
	font-size:1em;
	font-size:.85em;
	line-height: 1;
	/* padding: 0.5em 3.5em 0.5em 1em; */
	margin-right:3px;
	padding-left: .75em;

/* reset */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;

/* arrows */
  background-image:
    linear-gradient(45deg, transparent 50%, white 50%),
    linear-gradient(135deg, white 50%, transparent 50%),
    linear-gradient(to right, var(--CCdark_green), var(--CCdark_green));
	background-position: 
	calc(100% - 100 * .0125em) calc(1em + .125em),
    calc(100% - 60 * 0.0125em) calc(1em + .125em),
    100% 0;
	background-size:
    .5em .5em,
    .5em .5em,
    2.5em 2.5em;
  background-repeat: no-repeat;
}

select:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, var(--CCaqua), var(--CCaqua));
  background-position:
    calc(100% - 60 * 0.0125em) 1em,
    calc(100% - 100 * .0125em) 1em,
    100% 0;
  background-repeat: no-repeat;
  outline: 0;
  /* border-color: var(--CCaqua); */
}

/* Not sure what the stuff below does for the styling above */
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.press-assets-grid {
	display:flex;
	gap: 1em;
	flex-wrap: wrap;
	margin: .33em 0 2em;
	justify-content: space-between;
}
.press-asset {
	width: calc(50% - .5em);
}
@media (min-width: 655px) and (max-width: 749px) {
	.press-asset {
		width: calc(33.3% - .67em);
	}
}
@media (min-width: 1180px) {
	.press-asset {
		width: calc(33.3% - .67em);
	}
}
.press-asset a h3 {font-weight:normal; color: var(--CCpurple)}
.press-asset a:hover h3 {color: var(--CCorange);}
.press-asset a > img {width:100%;}
.press-asset-meta p {margin:0;}

/* 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;
}
 */