/*
    Theme Name: Goldman Arts
    Theme URI: https://www.hamiltrowebsitedesign.com
    Description: Custom theme for Jonathan Goldman
    Version: 2025.1.0
    Author: hamiltro
    Author URI: https://www.hamiltrowebsitedesign.com
*/

/* Dev only for debugging
*************************************************************************/
/*@import url('css/debug.css');  can comment out for live *******************/
p.screensize {display: none;} /* set to "block" for testing breakpoints */
/* color changes at 344, 375, 500, 600, 768, 1024, 1440, 1920, 2560 *****/
div.container { border: 0px solid #666;} /* set to 1px for testing ******/
p.editLink {display: block;} /* set to none to view without edit links*/

li#menu-item-21 {display: block;} 	/* home */
li#menu-item-20 {display: block;} 	/* about */
li#menu-item-23 {display: block;} 	/* projects */
li#menu-item-22 {display: block;} 	/* events */
li#menu-item-xx {display: block;} 	/* contact */


/* PALETTE / VARIABLES
*****************************************/
:root {

/* palette */
	--color: #2b2b2b;
	--color-strong: #333;
	--color-background: WHITE;
	--color-accent1: #484848; /* DARKEST GREY rgba(72,72,72,1)*/
	--color-accent2: #002a5d; /* DARK BLUE */
	--color-accent3: #bb0606; /* DARK RED */
	--color-accent4: #ca0202; /* BRIGHT RED;  */
	--color-accent5: #DDDDDD; /* PALE - readMoreBG;  */
	--color-a: var(--color-accent2);
	--color-a-hover: var(--color-accent1);
	--color-banner-background: transparent;
	--color-editLink: BLACK;
	--color-hero-span-line1: white; /* blue*/
	--color-hero-span-line2: var(--color-accent3);
	--color-row-border: transparent;

/* siteTitle/mainNav */
	--color-mainNav-text-link: var(--color-accent5);
	--color-mainNav-text-link-hover: var(--color-accent3);
	--color-mob-menu-li-current-background-color:var(--color-accent1);
	--color-mob-menu-li-background-color:var(--color-accent1);
	--color-mob-menu-li-border: TRANSPARENT;
	--color-navbar-wrapper-background: var(--color-accent2);
	--color-navbar-wrapper-border:  var(--color-accent2);
	--color-outline: #DDD; /* tabbing */
	--color-sub-menu-li-background: var(--color-navbar-wrapper-background);
	--color-sub-menu-li-background-hover: rgba(243,243,243,0.98);
	--color-sub-menu-li-border: rgba(209,209,209,0.25);

/* headers by class */
	--color-headers-default: var(--color-accent1); /* or black */
	--color-siteSlogan: var(--color-accent5); 
	--color-siteTitle: var(--color-accent5); 
	--color-siteTitle-hover: var(--color-accent3); 
	--color-siteTitle-shadow-hover: TRANSPARENT;
	--color-overBanner: WHITE;
	--color-pageTitle: var(--color-accent1);
	--color-sectionTitle: var(--color-accent1);
	--color-rowHeader: var(--color-accent1);

/* buttons */
	--color-a-button: var(--color-accent1);
	--color-a-button-background: WHITE;
	--color-a-button-border: var(--color-accent1);
	--color-a-button-hover: WHITE;
	--color-a-button-background-hover: var(--color-accent3); 
	--color-a-button-border-hover: var(--color-accent1);

	--color-readMore-a: var(--color-strong);
	--color-readMore-a-background: var(--color-accent5);
	--color-readMore-a-border: var(--color-strong);
	--color-readMore-a-hover: var(--color-accent3);
	--color-readMore-a-hover-background: var(--color-accent5);
	--color-readMore-a-hover-border: var(--color-accent3);

/* forms */
	--color-form-input-border: TRANSPARENT;
	--color-form-button-background: TRANSPARENT;
	--color-form-button-text: TRANSPARENT;
	--color-form-button-bg-hover: TRANSPARENT;
	--color-wpcf7-sent: GREY;
	--color-wpcf7-sent-border: GREY;
	--color-wpcf7-sent-background: WHITE; 

/* footer */
	--color-cta: #eee;
	--color-cta-a: #DDD;
	--color-cta-a-hover:#FFF;
	--color-cta-background: #aa9e9e;
	--color-cta-background: var(--color-accent2);
	--color-footer: #eee;
	--color-footer-a: #DDD;
	--color-footer-a-hover:#FFF;
	--color-footer-background: var(--color-accent1);
	--color-footer-background: #001732;
	--color-footer-background: var(--color-accent2);
	--color-footer-border: var(--color-footer-background);
	--color-footer-credit: #aaa;
	--color-footer-credit-a:#bbb;
	--color-footer-credit-a-hover:#FFF;
	--color-icon-style-circleFill: var(--color-readMore-a-background); 
	--color-icon-style-circleFill-hover: var(--color-accent3);	
	/* edit the detail svgs for the detail colors */

/* fonts */
	--font-body: 'Open Sans', sans-serif; 
	--font-input: 'Open Sans', sans-serif; 
	--font-nav:   'Open Sans', sans-serif;
	--font-quote: 'Open Sans',sans-serif;
	--font-readMore:  'DIN Condensed','Open Sans', sans-serif;
	--font-siteTitle:  'Nutmeg Headline Extra','Open Sans', sans-serif;
	--font-siteSubTitle: 'Open Sans', sans-serif;
	--font-pageTitle:  'DIN Condensed','Nutmeg Headline Extra','Open Sans', sans-serif;
	--font-sectionTitle:  'Open Sans', sans-serif;
	--font-captions: 'DIN Condensed';

/* misc styles */
	--p-maxWidth: min(100%, 52rem); /* smallest of these values */
	
/*breakpoints
global: 400,414,440,600,768
style: 360,600/601,768/769,821,900,992
*/
	--breakpoint-begin-17px-min: 360px;
	--breakpoint-desktop-only-min: 601px;
	--breakpoint-footer-3cols-min: 601px;
	--breakpoint-left-right-50%-min: 768px;
	--breakpoint-flex>rows-min: 769px;
	--breakpoint-mobNav-max: 900px;
	--breakpoint-wideNav-min: 901px;
	--breakpoint-squish-menu-max: 1000px;    
}

.pageTitle, .siteTitle{
	text-transform: uppercase;
	font-weight: bold;
}

@media (min-width: 360px) {
html {font-size: 17px;} /* default is 16px */
}
body {line-height: calc(1.1em + 0.5rem);}

p,li { font-size: clamp(.9rem, .9rem + .2vw, 1.3rem);}
h1 {font-size: clamp(2rem, 2rem + .8vw, 2.94rem); line-height: calc(1.1em + 0.5rem);}
h2 {font-size: clamp(1.5rem, 1.5rem + .6vw, 2rem);line-height: calc(1.1em + 0.5rem);}
h3 {font-size: clamp(1.17rem, 1.17rem + .4vw, 1.67rem);line-height: calc(1.1em + 0.5rem);}
h4 {font-size: clamp(1rem, 1rem + .3vw, 1.5rem); line-height: calc(1.1em + 0.4rem);font-weight: bold;}
h5 {font-size: clamp(.83rem, .75rem + .35vw, 1rem);line-height: calc(1.1em + 0.4rem);}
h6 {font-size: clamp(.67rem, .64rem + .22vw, .8rem); line-height: calc(1.1em + 0.4rem); margin-bottom: .5rem}

p.editLink.text	{font-size: 12px;}
h2.siteTitle {font-size: clamp(1.3rem, 1.3rem + .6vw, 2rem);}
h2.pageTitle {font-size: clamp(2rem, 2rem + .8vw, 2.94rem); line-height: calc(1.1em + 0.5rem); margin-top: 50px;}

h1,h2,h3,h4,h5,p {
	margin: 0 auto calc(.1em + 1rem);
	padding: 0;
	font-weight: normal;
}

h2.siteTitle	{
	margin-bottom: .5vh;
}

p	{	
	width: var(--p-maxWidth);
	font-weight: 300;
	text-align: left;
}

.excerpt p	{
	width: 100%;
}

.mainContent p a:not(a.button, a.discreteLink) {
	text-decoration: underline;
	text-decoration-thickness: .8px;
}
/* rems (or % or vh?) for divs and ems for font-sizes within divs) */



.bottomTextBg {
	background: linear-gradient(-40deg, #01fdee 18%,#69fcf3 28%,#a8fcf7 49%,#fff 100%);
}

#nav-single	{ /* for prev/next nav */
	margin: 3vh 0;
}

/* BREAKPOINTS
****************************************/
.mobileOnly { display:block; padding-bottom:15px;}
.desktopOnly { display:none; }
.flex, .flexContainer {display: flex; flex-direction: column;}
	
@media (min-width:601px) {
	.mobileOnly { display:none;}
	.desktopOnly { display:block; }
	div.left { width: 50%; padding-right: 2px;}
	div.right { width: 50%; padding-left: 2px;}
}

@media (min-width:769px) {
	.flex, .flexContainer {flex-direction: row;}
	.flex-col-11 {width: 91.7%;padding: 0 1%;}
	.flex-col-10 {width: 83.3%;padding: 0 1%;}
	.flex-col-9 {width: 75%;padding: 0 1%;}
	.flex-col-8 {width: 66.7%;padding: 0 1%;}	
	.flex-col-7 {width: 58.3%;padding: 0 1%;}
	.flex-col-6 {width: 50%;padding: 0 1%;}
	.flex-col-5 {width: 41.7%;padding: 0 1%;}
	.flex-col-4 {width: 33.3%;padding: 0 1%;}
	.flex-col-3 {width: 25%;padding: 0 1%;}
	.flex-col-2 {width: 16.7%;padding: 0 1%;}
	.flex-col-1 {width: 8.3%;padding: 0 1%;}
	
	.thumb.flex-col-3, .thumb.flex-col-4	{padding-left: 0;} /* for two-col archive pages */
	.excerpt.flex-col-8, .excerpt.flex-col-9	{padding-right: 0;} /* for two-col archive pages */

}

.sub-menu {width: 180px;}
@media (max-width: 900px) {.sub-menu {width: 100%;} } /* adjust breakpoint as needed */


/* SITE TITLE / MAIN NAVIGATION (default breakpoint from menu-icon @ 992px - change as needed)
================================================================================== */
.navbar-wrapper { 
	width: 100%;
	padding: .5vh 0 0; /* 1/2/25 */
	min-height: 30px;  /* 1/2/25 */
	position: fixed; 
	box-shadow: 0px 4px 8px rgba(60,46,46, 0.2); /* Adjust the values to control the shadow */
	z-index: 9999;
}

.mainContent {
	margin-top: 50px; /* 1/2/25 */
}

.navbar-wrapper .container	{
	width: 92%;
}

#navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav.navbar {
	width: 100%;
}

.siteTitle {
  flex: 1;
  white-space: nowrap; /* Ensures site title stays on one line */
  text-shadow: 
        1px 1px 0px #333,  /* Dark shadow close to the text */
        2px 2px 0px #333,  /* Dark shadow slightly further away */
        3px 3px 5px rgba(0, 0, 0, 0.5); /* Softer shadow for depth */
}

.mainNavigation {
  flex-grow: 1;
  text-align: right;
}

.navbar-menu {
  white-space: nowrap; /* Prevents links from wrapping */
}

.menu-main-navigation-container ul.nav.navbar-nav>li.menu-item {
	text-align: center;
}

ul.navbar-nav.flexContainer	{
	flex-wrap:wrap;
	justify-content: flex-end;
	list-style: none;
	margin: .5em 0 0;
    max-width: none;
    padding-left: 0;
    position: relative;
}

@media (max-width: 900px) { /* adjust breakpoint as needed */
	ul.navbar-nav.flexContainer	{margin: 0; }
}

.menu-main-navigation-container ul.nav.navbar-nav>li.menu-item>a{
    font-size: 1em;
    letter-spacing: 0.09em;
    padding: 0 0 0 2vw;
    text-transform: uppercase;
}

@media (max-width: 900px) { /* adjust breakpoint for less link-padding IF NECESSARY */
	.menu-main-navigation-container ul.nav.navbar-nav>li.menu-item>a { padding: 0 0 0 1vw;}
}

.navbar-nav > li {
    height: 30px;
    position: relative;
}

.navbar-nav > li.menu-item-home {
	padding-left: 0;
}

.sub-menu {
	padding:10px;
	font-size: 1em;	
	text-transform: uppercase;
	width: 180px;
	z-index: 10000;
}

@media (max-width: 900px)	{/* adjust breakpoint as needed */
	.sub-menu	{width: 100%;}
}

.sub-menu > li {
    padding:10px;
	margin-top: 0px;
}

.sub-menu > li a	{
	font-size: .9em;
	text-transform: none;
}

.navbar-toggle {
    height: 40px;
    width: 40px;
}

.icon-bar,  /* span.icon-bar */
.navbar-toggle:focus .icon-bar, 
.navbar-toggle:hover .icon-bar	{
	height: 4px; /* fat */
	margin: 2px;
	width: 25px; /* ??? */
}

.icon-bar { 
    transition: background-color 0.2s ease-in-out,
                transform 0.2s ease-in-out,
                opacity 0.2s ease-in-out;
}

#navbar.opened .navbar-toggle .icon-bar:first-child,
#navbar.opened .navbar-toggle .icon-bar:last-child {
    width: 30px; /* ??? */
}
/* see global.css for rotate transition - needs js? */

/* .sub-menu .sub-menu, .sub-menu{ } */

@media screen and (min-width: 900px) { /* adjust breakpoint as needed */
    .navbar-toggle {
        display: none;
    }   
    #navbar .navbar-menu,
    #navbar.opened .navbar-menu {
        display: block!important;
        height: 100%;
        opacity: 1;
        position: static;
        visibility: visible;
    }

    #navbar .navbar-links,
    #navbar.opened .navbar-links {
        box-shadow: none;
        flex-direction: row;
        height: 100%;
        list-style-type: none;
       margin: 0;
        max-height: max-content;
        padding: 0;
        position: static;
        width: 100%;
    }

    #navbar .navbar-link:last-child {
        margin-right: 0;
    }
	.sub-menu {
		left: 34px;
		list-style: none;
		margin: 0;
		opacity: 0;
		padding: 0;
		position: absolute;
		top: 50px;
		transform: translateY(-2em);
		transition: all 0.5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;
		visibility: hidden;
		width: 200px;
		-webkit-transform:translate3d(0,0,0); /* for Safari */
	}
	.menu-main-navigation-container ul.nav.navbar-nav>li.menu-item>ul>li {
		text-align: left;
	}
	.navbar-nav li:hover > ul{
		opacity: 1;
		transform: translateY(0%);
		transition-delay: 0s, 0s, 0.3s;
		visibility: visible; 
		z-index: 999;
		-webkit-transform:translate3d(0,0,0); /* for Safari */
	}
} 

@media screen and (max-width: 900px) { /* adjust breakpoint as needed */
	.mainNavigation{
		width: 100%;
	}
	.navbar-header.navbar-icon{
		position: absolute;
		right: 20px;
		top: .5vh; /* 1/2/25 */
		z-index: 1000;
	}
	.navbar.flexContainer, .navbar-nav.flexContainer{
		display: block;
	}
	.navbar-nav > li{
		height: auto;
		width: 100%;
	}
	#menu-main-navigation{
    	background-color: transparent;
		margin-bottom: 0px;
		margin-left: -4%;
		width: 100%;
	}
	.navbar-nav {border-top:  1px solid var(--color-mob-menu-li-border);}
	.navbar-nav > li.menu-item {
		display: block;
		border-bottom: 1px solid var(--color-mob-menu-li-border);
		border-left: 1px solid var(--color-mob-menu-li-border);
		border-right: 1px solid var(--color-mob-menu-li-border);
		padding: 20px 0;
		background-color: var(--color-mob-menu-li-background-color);
		text-align: center;
	}

	.navbar-collapse {
		position: absolute;
		width: 100%;
		z-index: 999999;
	}
	ul.navbar-nav, ul.navbar-nav li {
		list-style: none;
	}
	.navbar-nav > li .caret{
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 8px dashed;
		border-top: 8px solid\9;
		height: 0;
		margin-left: 2px;
		position: absolute;
		right: 15px;
		top: 20px;
		width: 0;
		vertical-align: middle;
	}
	.navbar-nav .sub-menu > li.menu-item {
		padding: 14px 0;
		text-align:center;
	}

	.navbar-nav .sub-menu li .sub-menu > li.menu-item a {
		padding-left: 40px;
	}
	.sub-menu.open{
		display: block;
	}
	.navbar-nav  li.current-menu-item{
		background: var(--color-mob-menu-li-current-background-color);
	}
	/* .navbar-nav > li.current-menu-item .sub-menu{
		display: block;
	} */
}

/*@media only screen and (min-width: 992px)	{
	li.current_page_item a	{color: var(--color);}
}*/
@media only screen and (min-width: 900px)	{ /* adjust breakpoint as needed */
	li.current_page_item a:hover	{
		color: var(--color-mainNav-text-link);
		cursor: default;
	}
}

/* MAIN CONTENT LAYOUT, CONTAINERS & COLUMNS
NB: section > wrapper > sectionInner > container > #col-containers 
====================================================== */
.mainContent	{ /* adjust per navbar-wrapper height */
	min-height: calc(100% - 100px);
	padding-bottom: 50px;
}

section.bannerImage {
    height: 50vh;
    background-image: url('');
    overflow-x: hidden;
}

.breadcrumbs {
    border: 1px solid transparent;
    height: 2em;
    padding: 4px 4% 0;
    color: #777;
    font-size: 0.8em;
    width: min (100rem, 100%); /* to left-align with site-title if outside of wrapper */
}

.breadcrumbs span {
	display: none;
}

.sectionInner { /* for sections top/bottom space as needed */
	padding: 3rem 0 0rem;
}

#work-posts-container.sectionInner { /* 1/9/25 */
	padding: 0rem 0 0rem;
}

section.subpageBannerImage, /* deprecated */
section.subpageBanner {
	display: flex;
	padding: 2rem 0 0rem; /* ADJUST */
	min-height: 5rem;  /* 1/2/25 */
}

section.subpageBannerImage .wrapper, /* deprecated */
section.subpageBanner .wrapper {
	display: flex;
	align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.one-two-col, /* deprecated */
.one-col, .one-or-two-col,.two-col, .row	{
	margin: 0 auto;
}

.one-col {width: min(clamp(55rem, calc(55rem + 10vw), 81.25rem), 100%);}
.one-col { width: var(--p-maxWidth);}
.two-col {width: min(70rem, 100%);}
.one-two-col, one-or-two-col { width: min(65rem, 100%);} /* for excerpts w/wo thumbs */


/* to left-align text with thumbnails when rows with no thumbnail */
.one-two-col .flex-col-12,
.one-or-two-col .flex-col-12	{
	padding: 0 1%;
} 

.row	{ /* for rows that may be ≤ 100% wide; use containers inside or outside */
	width: 100%;
	margin: 0 auto 3vh; /* 1/2/25 */
	padding-bottom: 3vh; /* 1/2/25 */
	border-bottom: 1px solid var(--color-row-border);
}

.row:last-child:not(.page-blog .row:last-child )	{
	border-bottom: 1px solid transparent;
	padding-bottom: 1vh;
}

.pagination	{
	/*padding: 20px 0 0;
	border-top: 1px solid var(--color-row-border);*/
	margin-bottom: 3vh;
	width: 100%;
	margin-top: -80px;	
}

.wp-block-heading	{ /* for all headers used within main content field */
	margin-top: 1.8rem;
}

.pageIntro	{
	font-size: 1.1rem;
	padding-bottom: 5vh;
}

.sectionTitle,
.rowHeader {
	padding: 1em 0 1em;
	text-align: center;	
}

.pageTitle{
	margin-bottom: 20px;
	text-align: center;
	/*padding-bottom: 30px;*/
	text-shadow: 
        1px 1px 1px #999,  /* Dark shadow close to the text */
        2px 2px 1px #bbb,  /* Dark shadow slightly further away */
        3px 3px 5px rgba(0, 0, 0, 0.2); /* Softer shadow for depth */
}

.postTitle	{
	font-size: 1.8em;
	font-weight: normal;
	margin-top: -.3em;
	max-width: 100%;
}

.postTitle span {
	font-size: 1.2rem;
}

.single-news p.data {
	margin-bottom: 50px;
}

a.button.bigButton     { 
    padding: 1em 2em;
} 

.readMore {
	margin-top: 30px;
	padding-right: 10px;
	text-align: right;
}

.wp-block-image figcaption 	{
	font-size: .8em;
	margin-top: .1em !important;
}

.mainContent ul,
.mainContent ol {
	margin: 1.8rem auto;
	max-width: 44rem;
	padding-left: 1.4rem;
	width: 90%;
}

.mainContent ul li,
.mainContent ol li {
	margin-bottom: .8em;
}

p.entry-date	{
	font-size: .9em;
	margin-top: -16px;	
}
    
/* ABOUT PAGE STYLES
****************************************/
.about-quote blockquote{
	font-weight: normal;
    text-align: center;
    width: 90%;
    max-width: 40rem;
    margin: 1vw auto 1.5vw;
    font-size: clamp(1.07rem, 1.09rem + 2.05vw, 2.05rem);
    color: #40c2d5;
    padding: 0.5vw 0 1vw;
    border: 1px solid #fff;
    font-family: var(--font-quote);
    line-height: calc(1em + .5rem);
}

.about-quote blockquote:before,
.about-quote blockquote:after{
    content: "";
    display: block;
    width: 30%;
    border: 0.25px solid #d3dce6;
    margin: 60px auto;
}

/* ABOUT CV
-------------*/
.page-about .wp-block-file object,
.wp-block-file .wp-block-file__button.wp-element-button{
	display: none;
}

.page-about .wp-block-file {
	font-size: 1em;
}

.page-about .featuredImageTop{
	display: flex;
    align-items: top; /* Position vertically */
    justify-content: center; /* Center horizontally */
}

/* PROJECTS ARCHIVE PAGE (archive-work)
************************************************************/

.mainContent {
	z-index:0;
}

.projects-archive	{
	padding-top: 10px;
}

.category-section {
	margin-bottom: 0px; /* 1/3/25 */
}

.category-section h2	{
	text-align: center;
	margin-bottom: 30px;
}

.projects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}

.project-card {
    width: 230px;
    display: flex;
    flex-direction: column;
    background: #fff;   
    overflow: hidden;
}

.card-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem .5rem 1.5rem;
    position: relative;
}

.card-content h3	{
	text-align: center;
}

.card-image {
    width: 230px;
    height: 230px;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9f9f9;
}

.mainContent .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin-bottom: 0;
}

/* Mobile styles */
@media (max-width: 600px) {
    .projects-grid {
        grid-template-columns: 1fr;  /* Single column, full width */
        gap: 1.5rem;  /* Slightly reduced gap for mobile */
    }
    
    .project-card {
        width: 100%;  /* Full width */
    }
    
    .card-image {
        width: 100%;  /* Full width */
        height: auto;  /* Let height adjust based on image ratio */
        aspect-ratio: 1/1;  /* Maintains square shape */
    }
}

.card-content {
    padding: 1rem .5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    min-height: 80px; /* 1/3/25 */
}

.card-content h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: .9rem;
    text-transform: uppercase;
}

.card-content p {
    margin-bottom: 3rem;
    font-size: .9rem;
    line-height: 1.2rem;
}

.view-project.button {
    display: inline-block;
    text-decoration: none;
    transition: background-color 0.3s;
    position: absolute;
    bottom: 1rem;
    left: .5rem;
}

.no-image {
    color: #ddd;
}

.category-description {
    margin-bottom: 2rem;
}

/* Mobile styles */
@media (max-width: 600px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .card-image {
        height: 50svh;
        width: 100%;
    }

    .project-card {
        margin-bottom: 2rem;
    }

    .card-content {
        padding: 1rem;
        min-height: 150px;
    }

    .view-project {
        bottom: 1rem;
        left: 1rem;
    }
}

/* INDIVIDUAL PROJECT Archive pages (taxonomy-work_cat)
************************************************************/

/* Styles for background stories section */
.background-stories-section {
    margin: 0 auto 3rem;
    width: var(--p-maxWidth);
}

.background-stories-section h3 {
    margin-bottom: 0rem;
}

.background-story {
    /*margin-bottom: 1rem; 1/9/25 */
    border: 0px solid #ddd;
    border-radius: 4px;
    background: white;
}

.story-header {
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
}

.story-header h3 {
    margin: 0;
    flex: 1;
}

a.button:not(section.cta a.button), /* 1/3/25 */
button.story-toggle {
    color: var(--color);
    border: none;
    /*border-radius: 4px;*/
    cursor: pointer;
    transition: background-color 0.3s;
    background-color: transparent;
    text-align: right;
    padding-right: 0;
}

button:hover,
a.button:hover	{
	color: var(--color-accent3);	
}

.story-content {
    padding: 0 1rem;
    border-top: 0px solid #ddd;
    /*transition: all 0.3s ease-in-out;*/
}

.accordion-content p	{
	margin-bottom: 30px;
	font-weight: 300 !important;
}
/* Update existing accordion styles */
.accordion-toggle {
    display: inline-block;
    /*padding: 0.5rem 1rem;
    margin: 1rem 0;
    border-radius: 4px;*/
    cursor: pointer;
    padding: 0;
}

.accordion-toggle:hover {
}

.accordion-toggle:hover,
button.accordion-toggle,
button.accordion-toggle:hover,
button::after,
a.button::after	{
	background: transparent;
	border-color: transparent;
	text-align: right;
}

.accordion-content {
    padding: 1rem 0;
}

/* Create a container for the button */
.accordion-toggle-wrapper {
    max-width: var(--p-maxWidth);
    margin: 10px auto;  /* 1/2/25 */
    display: flex;
    justify-content: flex-end;
}

/* Update button styles */
.accordion-toggle {
    display: inline-block;
    margin: 0; /* Remove margin since the wrapper handles spacing */
}

/* wp-gallery */
/* replacing #gallery-1 with .gallery-columns-3; might need to be .accordion-content .gallery-columns-3 but then .work-content .gallery-columns-3 would be needed for single pages... */
.gallery-columns-3 {
 display: grid;
 grid-template-columns: repeat(3, minmax(0, 1fr));
 gap: 1vw;
 margin: auto;
 max-width: 100%;
 box-sizing: border-box;
}

.gallery dl.gallery-item {
 aspect-ratio: 1;
 width: 100% !important; /* override wp default for #gallery-1 */
 position: relative;
 margin: 0 !important; /* override wp default for #gallery-1 */
 overflow: hidden;
 float: none;
}

.gallery-columns-3 .gallery-icon {
 width: 100%;
 height: calc(100% - 40px);
 position: absolute;
 top: 0;
 left: 0;
 display: flex;
 justify-content: center;
 align-items: center;
}

.gallery-columns-3 .gallery-icon a {
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}

.gallery-columns-3 img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  background: white; /* Background for the image itself */
  border: 1px solid #f0f0f0 !important; /* override wp default for #gallery-1 */
}

.gallery-columns-3 .gallery-caption {
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.gallery-columns-3 br {
 display: none;
}

@media (max-width: 768px) {
.gallery-columns-3 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
}

@media (max-width: 550px) {
.gallery-columns-3 {
   grid-template-columns: 1fr;
 }
}

@media (max-width: 550px) {
.gallery-columns-3 {
   grid-template-columns: 1fr;
 }
}

.gallery-columns-3 a {
  display: block;
}

.gallery-columns-3 a[href$=".jpg"],
.gallery-columns-3 a[href$=".jpeg"],
.gallery-columns-3 a[href$=".png"],
.gallery-columns-3 a[href$=".webp"] {
  target: "imgWin";
}

/*=================================*/

section.category-description .description-content {
	max-width: var(--p-maxWidth);
	margin: 0 auto;
}

@media (min-width:600px) {
	.projects-archive .thumbnail {
		max-width: 30vw;
		margin-right: 20px;	
	}
	.projects-archive .thumbnail img	{
		height: 10vw;
		width: auto;				
	}
	.description-content {
		max-width: 50vw;	
	}
}
.caption .work-title	{
	margin-bottom: 0;
}

@media (min-width: 769px) { /* was 601 */
    .singleWork .image-container {
        width: 100%;
    }
    .singleWork .work-image {
        max-height: 70svh; /* prev 100% */
        max-width: 100%;
        height: auto;
        width: auto;
    }
    
    .singleWork .featured-image img,
    .aligncenter{
    	margin: 0 auto;
    	text-align: center;
    }
}

@media (max-width: 768px) {/* was 600 */
    .singleWork .work-image {
        width: 100%;
        height: auto;
    }
}

.singleWork .caption	{
	margin: 8px auto 0px; /* 1/2/25 */
	text-align: center;
	line-height: 16px; /* 1/2/25 */
	font-family: var(--font-captions);
}

.gallery-caption span,
.work-meta {
	opacity: 50%;
}

.singleWork .work-title {
	font-size: 1rem;
	font-weight: bold;
	display: inline-block;
	padding-right: 10px;
	text-transform: uppercase;
}

.singleWork .work-meta {
	font-size: .9rem;
	font-weight: normal;
	display: inline-block;
	text-transform: lowercase;
}

.singleWork .image-permissions {
	font-size: .9rem;
	display: block;
	opacity: 30%;
	font-weight: normal;
}

.singleWork .work-meta::first-letter {
  text-transform: uppercase;
}

.singleWork .work-excerpt {
	max-width: var(--p-maxWidth);
	margin: 20px auto 0;
}

.singleWork {
    will-change: opacity, transform;
    backface-visibility: hidden;
}

img.featured-image-tiny-thumbnail	{
	max-height: 20px;
}

div.installationNote	{
	font-style: italic;
	margin-top: 10px;
}

/* VIMEO VIDEOS
------------------------------------------------------------------------------------*/
.image-container {
    position: relative;
    width: 100%;
    max-width: 900px; /* matches your current iframe width */
    margin: 0 auto; /* centers the container */
    text-align: center; /* ensures centering for inline elements */
}

.image-container iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9; /* maintains the video's aspect ratio */
}

/* If you want to ensure the featured image (post thumbnail) is also responsive */
.work-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


/* NEWS
------------------------------------------------------------------------------------*/
div.eventPost	{
	max-width: var(--p-maxWidth);
	margin: 0 auto;
}

.subTitle {
	font-style: italic;
}
.event-row {
	width: 100%;
}

.event-row p	{margin-left: 0;}
.event .thumbnail {
	display: flex;
    justify-content: center;
}
@media (min-width: 768px) {
	.event .thumbnail {
		width: 40%;
		padding-right: 20px;
	}
	.event .excerpt {
		width: 60%;
	}	
	.recentEvents .event .thumbnail {width: 20%;}
	.recentEvents .event .excerpt {width: 80%;}
}

/* PRESS
------------------------------------------------------------------------------------*/
p.press-publication,
p.press-author,
p.press-date,
p.press-url {
	margin-bottom: 0;
	font-size: .9rem;
	line-height: 1.2rem;
}

.post-excerpt	{
	margin-top: 30px;
}

/* FOOTER
------------------------------------------------------------------------------------*/

section.cta	{
	padding-bottom: 50px;
	border-bottom: 0;
	background-image: url('/wp-content/themes/goldman/images/GIFFORD-BG.jpg');
}

.helloBox	{
	width: min(450px,100%);
	margin: 0 auto;
	border: 1px dotted black;
	border-radius: 5px;
	background: rgba(0,42,92,.9);
	padding: 30px 20px 10px; /* 1/2/25 */
}
section.cta	h2,
section.cta	h3 {
	color: var(--color-accent3);
	color: white;
	font-family: var(--font-quote);
	font-style: italic;
	font-size: 1.3rem;
}

section.cta	h2 {
	font-size: 1.4em;
}	

section.cta	a.button {
	color: black;
	font-weight: bold;	
}

section.cta	a.button:hover {
	color: rgba(255,255,255,0.9);
	background-color: var(--color-accent3);
}

section.cta	a.button::after {
	border: 1px solid var(--color-accent3);
}

.footer .flexContainer {
	flex-wrap:wrap;
	margin-bottom: 10px;
	padding: 10px;
} 
.footer .flexContainer .flexItem { 
	margin: 10px 1%;
	transition: width .2s;
	width: 31%; /* 48% if 2-col */
	border: 0px solid white;
}
.footer .flexContainer .flexItem1 { text-align: left;}
.footer .flexContainer .flexItem2 { text-align: center;}
.footer .flexContainer .flexItem3 p { text-align: right;}

p.copyright	{
	font-size: .8rem;
	margin: 0 auto 2px;
}

p.credit	{
	font-size: .7rem;
}

section.footer	{	
	line-height: 1.2rem;
	border: 0px;
}

section.footer .wrapper	{padding: 0 15px;}
section.footer .sectionInner { padding: 30px 0 20px; }
.footer .flexContainer {flex-direction: row;}

@media (max-width: 600px){ /* adjust breakpoint as needed */
	.footer .flexContainer {flex-direction: column;}
	.footer .flexContainer .flexItem1 {order: 3; text-align: center;  width: 100%; }
	.footer .flexContainer .flexItem2 {order: 1; text-align: center; width: 100%; }
	.footer .flexContainer .flexItem3 {order: 2; text-align: center; width: 100%; }
	p.copyright, p.credit,.footer .flexContainer .flexItem3 p	{ text-align: center; margin: 0em auto 0px; }
	.footer.notices .wrapper { padding: 0}
	.footer.notices .flexContainer { padding-left: 0}
}

div.social-icons	{
	margin-top: 0px;
}

.cta .email	{
	text-align: center;
	margin-bottom: 20px;
}

section.cta	h3.email	{
	margin-bottom: 10px;
}

/* IMAGES (MEDIA in global)
------------------------------------------------------------------------------------*/

img.marginBottom,
.mainContent img {
	margin-bottom: 30px;
	border: 3px solid #000;
}

.wp-block-image img	{margin-bottom: 0;}  /* ??? */

figure, .wp-block-image {
	max-width: 52rem;
	max-width: var(--p-maxWidth);
	margin: 0 auto 1em;
	padding: 0;
}

@media (min-width: 769px)	{
	figure.wp-block-video {
		max-width: min(100%,calc(600px + 50vw));
	}
}

.featuredImageTop	{
	margin-bottom: 20px;
}

.featuredImageThumbails img{
	height: 80px;
	margin: 5px;
}

::selection, /* selection is not well-supported */
::-moz-selection,/* Firefox */
::-webkit-selection { /* Safari and Chrome */ 
  color: white !important;
  background: grey !important;
}