/*
    Theme Name: Sauzey Theme
    Theme URI: https://www.hamiltrowebsitedesign.com
    Description: Sauzey — HWD custom theme
    Version: 2026.1.0
    Author: hamiltro
    Author URI: https://www.hamiltrowebsitedesign.com
*/

/* BREAKPOINTS — single source of truth
   ============================================================================
   CSS custom properties cannot be used inside @media query brackets — browsers
   resolve media queries before custom property values are available. So the
   breakpoint values below are documented constants. Each @media query in this
   file repeats the value verbatim and tags itself with a BP-NAME marker comment
   so a search-and-replace can update every occurrence at once when changing a
   breakpoint per-site.

   Approach: prefer fluid sizing (clamp(), flex-wrap, %, svw, em/rem) so most
   layouts adapt smoothly without breakpoints at all. Only use a hard switch
   where one is genuinely required (mobile hamburger, etc.). This is why the
   navbar has just ONE breakpoint despite the layout rearranging itself.

   Active breakpoints (lowest to highest):
   BP-NAV-MOBILE       : 500px   navbar — hamburger replaces nav links below this
   BP-MOB-CONTENT      : 601px   .desktopOnly / .mobileOnly toggle; left/right 50% split
   BP-TABLET-FLEX-ROWS : 769px   .flexContainer switches column → row; .flex-col-* widths
   BP-WIDE-NAV-PAD     : 1100px  extra padding bump on wide nav links
   BP-CAP-FONTS        : 2048px  cap navbar font sizes on huge screens
   ============================================================================ */

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

li#menu-item-329 {display: none;} 	/* home */

li#menu-item-488,
li#menu-item-488 > a {
    cursor: default;
}

.spectral-light {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-style: normal;
}

.spectral-regular {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: normal;
}

.spectral-medium {
  font-family: "Spectral", serif;
  font-weight: 500;
  font-style: normal;
}

.spectral-semibold {
  font-family: "Spectral", serif;
  font-weight: 600;
  font-style: normal;
}

.spectral-bold {
  font-family: "Spectral", serif;
  font-weight: 700;
  font-style: normal;
}

.spectral-light-italic {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-style: italic;
}

.spectral-regular-italic {
  font-family: "Spectral", serif;
  font-weight: 400;
  font-style: italic;
}

.spectral-medium-italic {
  font-family: "Spectral", serif;
  font-weight: 500;
  font-style: italic;
}

.spectral-semibold-italic {
  font-family: "Spectral", serif;
  font-weight: 600;
  font-style: italic;
}

.spectral-bold-italic {
  font-family: "Spectral", serif;
  font-weight: 700;
  font-style: italic;
}


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

	
/* palette */
	--color: #222;
	--color-strong: BLACK;
	--color-background: #dedecc;
	--color-accent1: #000000; /* DARKEST */
	--color-accent2: #333333; /* MEDIUM DARK */
	--color-accent3: #666666; /* MEDIUM */
	--color-accent4: #999999; /* MEDIUM PALE - footerBG;  */
	--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: var(--color-accent3);
	--color-hero-span-line2: var(--color-accent3);
	--color-row-border: #cfcfbd;

/* siteTitle/mainNav */
	--color-mainNav-text-link: var(--color-accent2);
	--color-mainNav-text-link-hover: var(--color-accent1);
	--color-mob-menu-li-current-background-color:var(--color-accent5);
	--color-mob-menu-li-background-color:var(--color-accent4);
	--color-mob-menu-li-border: TRANSPARENT;
	--color-navbar-wrapper-background: transparent;
	--color-navbar-wrapper-border:  transparent; /* add a colour here if a nav underline is wanted */
	--color-outline: #DDD; /* tabbing */
	--color-sub-menu-li-background: var(--color-background);
	--color-sub-menu-li-background-hover: #d7d7c5;
	--color-sub-menu-li-border: #d7d7c5;

/* headers by class */
	--color-headers-default: var(--color-accent1); /* or black */
	--color-siteSlogan: var(--color-accent2); 
	--color-siteTitle: var(--color-accent2); 
	--color-siteTitle-hover: var(--color-accent1); 
	--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-accent2); 
	--color-a-button-border-hover: var(--color-accent1);

	--color-readMore-a: var(--color-accent2);
	--color-readMore-a-background: var(--color-accent5);
	--color-readMore-a-border: var(--color-accent2);
	--color-readMore-a-hover: var(--color-accent1);
	--color-readMore-a-hover-background: var(--color-accent5);
	--color-readMore-a-hover-border: var(--color-accent1);

/* 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-footer: #444;
	--color-footer-a: #444;
	--color-footer-a-hover: #000;
	--color-footer-background: #dadac8;
	--color-footer-border: #d7d7c5;
	--color-footer-credit: #666;
	--color-footer-credit-a: #666;
	--color-footer-credit-a-hover: #000;
	--color-icon-style-detail: var(--color-readMore-a);
	--color-icon-style-detail-hover: var(--color-readMore-a-hover);
	--color-icon-style-circleFill: var(--color-readMore-a-background);
	--color-icon-style-circleFill-hover: var(--color-footer-a-hover);	
	/*--color-icon-style-detail: #333; /* if using threads or X need to edit svgs accordingly */
	/*--color-icon-style-detail-hover: #000; /* if using threads or X need to edit svgs accordingly */
	/* edit the detail svgs for the detail colors */


/* fonts */
	--font-body: "Spectral", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--font-input: "Spectral", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--font-nav:   "Spectral", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--font-quote: "Spectral", 'Playfair Display', "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--font-readMore:  "Spectral", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--font-siteTitle:  "Spectral", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--font-siteSubTitle: "Spectral", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--font-pageTitle:  "Spectral", "Palatino Linotype", "Book Antiqua", Palatino, serif;
	--font-sectionTitle:  "Spectral", "Palatino Linotype", "Book Antiqua", Palatino, serif;

	

/* misc styles */
	--p-maxWidth: min(100%, 52rem); /* smallest of these values */
}

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

p,li { font-size: clamp(1rem, 1rem + .2vw, 1.4rem);}
h1 {font-size: clamp(2rem, 2rem + .8vw, 2.44rem); 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}

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

.page-interview h4	{
	font-weight: 400;
	margin: 2rem auto .7rem;
}

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

strong {
	font-weight: 600;
}

/* rems (or % or vh?) for divs and ems for font-sizes within divs) */

.readMore a.button {
    text-align: center;
    padding: 10px 30px;
    border-radius: 0px;
    font-weight: 200;
    font-size: 1em;
}

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

}

/* SITE TITLE / MAIN NAVIGATION
   ============================================================================
   Fluid layout: siteTitle (left) and mainNavigation (right) share one row when
   there is room for both. When there isn't, the nav drops below the title
   automatically — no breakpoint needed for that switch (handled by flex-wrap
   based on the actual content). Both items can wrap to two lines internally
   if necessary.

   The hamburger replaces the nav links below 500px (BP-NAV-MOBILE) — the only
   hard breakpoint here. To change it per-site, update the value in BOTH
   @media blocks marked BP-NAV-MOBILE AND the matching value in the
   header.php sub-menu toggle script (window.innerWidth check).

   Two strategies for sites whose nav doesn't comfortably fit:
   1. Let the natural flex-wrap drop the nav below the title (no change needed).
   2. Raise BP-NAV-MOBILE so the hamburger takes over earlier.
   ============================================================================ */

/* navbar wrapper
   ---------------- */
.navbar-wrapper {
	min-height: 6rem;             /* enough for one-row layout; auto-grows when wrapped */
	padding: 1rem 0;
	position: relative;
}

.navbar-wrapper .container	{
	max-width: 92svw;             /* svw stays accurate when scrollbars appear */
	width: 100%;
	margin: 0 auto;
}

#navbar {
	width: 100%;
}

/* one-row-or-two-row flex container — the row switch is automatic */
nav.navbar.flexContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;              /* nav drops below siteTitle when content runs out of room */
	align-items: flex-start;
	gap: 0.75rem 1.5rem;          /* row-gap (when wrapped) and col-gap (between siteTitle and nav) */
	width: 100%;
}

/* SITE TITLE
   ----------- */
.siteTitle.flexItem {
	flex: 0 1 auto;               /* sizes to its content; can shrink; can wrap to two lines */
	width: auto;
	min-width: 0;
}

.siteTitle h1,
.siteTitle h2,
.siteTitle.flexItem h2.siteTitle {
	margin: 0;
	line-height: 1.15;
}

.siteTitle .mainSiteTitle {
	display: inline-block;
	font-family: var(--font-siteTitle);
	font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.4rem);
	font-weight: bold;
	line-height: 1.15em;
}

.siteTitle .siteSlogan {
	display: inline-block;
	color: var(--color-siteSlogan);
	font-family: var(--font-siteSubTitle);
	font-size: clamp(0.85rem, 0.78rem + 0.4vw, 1.05rem);
	line-height: 1.3em;
}

/* MAIN NAVIGATION
   ----------------- */
.mainNavigation.flexItem {
	flex: 0 0 auto;               /* sizes to its content */
	margin-left: auto;            /* right-aligns when sharing a row with siteTitle */
	max-width: 100%;              /* never overflow the wrapper */
}

ul.navbar-nav.flexContainer	{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;              /* allow links to wrap to a second row only when truly needed */
	justify-content: flex-end;
	align-items: center;
	gap: 0.4em 1.4em;             /* col-gap = visible spacing between links; row-gap if links wrap */
	list-style: none;
	margin: 0;
	max-width: 100%;
	padding: 0;
	position: relative;
}

.menu-main-navigation-container ul.nav.navbar-nav > li.menu-item {
	margin: 0;                    /* no per-item margin — the ul's gap handles spacing */
	padding: 0;                   /* no padding either — leaves any future hover-underline tight to the text */
	position: relative;
	text-align: center;
}

.menu-main-navigation-container ul.nav.navbar-nav > li.menu-item > a {
	display: inline-block;
	font-family: var(--font-nav);
	font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.05rem);
	letter-spacing: 0.09em;
	padding: 0.3em 0;             /* vertical only — leaves the side gap clean for any future hover-underline treatment */
	text-transform: uppercase;
	white-space: nowrap;          /* keep individual links on one line; the ul's gap wraps if many */
}

/* SUB-MENU base (visual rules in css/global.css; structural rules below)
   --------------------------------------------------------------------- */
.sub-menu {
	font-size: 0.95em;
	margin: 0;
	padding: 0;
}

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


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

/* HAMBURGER button
   ------------------ */
.navbar-toggle {
	height: 2.5rem;
	width: 2.5rem;
}

.icon-bar,
.navbar-toggle:focus .icon-bar,
.navbar-toggle:hover .icon-bar	{
	display: block;
	height: 4px;
	margin: 2px;
	width: 1.5rem;
	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: 1.8rem;
}

/* ============================================================================
   ABOVE 500px (BP-NAV-MOBILE) — hamburger hidden; nav links inline; sub-menus drop on hover
   ============================================================================ */
@media (min-width: 500px) { /* BP-NAV-MOBILE */
	.navbar-toggle { display: none; }

	#navbar .navbar-menu,
	#navbar.opened .navbar-menu {
		display: block !important;
		max-height: none;
		opacity: 1;
		overflow: visible;
		position: static;
		visibility: visible;
		width: auto;
	}

	/* Desktop sub-menu dropdown */
	.sub-menu {
		left: 0;
		list-style: none;
		min-width: 12rem;
		max-width: max-content;
		opacity: 0;
		padding: 0.5rem 0.75rem;
		position: absolute;
		top: 100%;
		transform: translateY(-1em);
		transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
		visibility: hidden;
		z-index: 9999;
		-webkit-transform: translate3d(0, -1em, 0); /* Safari */
	}

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

	.navbar-nav > li:hover > .sub-menu	{
		opacity: 1;
		transform: translateY(0);
		transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0s;
		visibility: visible;
		z-index: 999;
		-webkit-transform: translate3d(0, 0, 0); /* Safari */
	}

	li.current_page_item > a:hover {
		color: var(--color-mainNav-text-link);
		cursor: default;
	}
}

/* Cap navbar font sizes on very wide screens (avoid disproportionate nav text) */
@media (min-width: 2048px) { /* BP-CAP-FONTS */
	.siteTitle .mainSiteTitle { font-size: 2rem; }
	.menu-main-navigation-container ul.nav.navbar-nav > li.menu-item > a { font-size: 1rem; }
}

/* ============================================================================
   BELOW 500px (BP-NAV-MOBILE) — hamburger active; nav links collapse to a vertical mobile menu
   ============================================================================ */
@media (max-width: 499.98px) { /* BP-NAV-MOBILE */
	.mainNavigation.flexItem {
		flex: 0 0 auto;
		margin-left: auto;
		width: auto;
	}

	.navbar-header.navbar-icon	{
		position: relative;
	}

	/* Hidden by default; transitions in via #navbar.opened (toggled by header.php JS) */
	.navbar-menu {
		display: none;
		left: 0;
		max-height: 0;
		overflow: hidden;
		position: absolute;
		top: 100%;
		transition: max-height 0.6s ease-in-out;     /* must match the JS timeout in header.php */
		width: 100svw;
		z-index: 100;
	}

	#navbar.opened .navbar-menu {
		display: block;
		max-height: 80svh;          /* svh stays correct on iOS where the URL bar resizes */
	}

	ul.navbar-nav.flexContainer	{
		display: block;
		gap: 0;
		margin: 0;
		padding: 0;
	}

	.navbar-nav > li,
	.menu-main-navigation-container ul.nav.navbar-nav > li.menu-item {
		display: block;
		padding: 0;
		text-align: center;
		width: 100%;
	}

	.menu-main-navigation-container ul.nav.navbar-nav > li.menu-item > a {
		background-color: var(--color-mob-menu-li-background-color);
		border-bottom: 1px solid var(--color-mob-menu-li-border);
		display: block;
		padding: 1.2rem 0;
		white-space: normal;
	}

	.navbar-nav > li.current-menu-item > a {
		background-color: var(--color-mob-menu-li-current-background-color);
	}

	/* Mobile sub-menus: closed by default; toggled open via .open class (set by header.php JS) */
	.navbar-nav .sub-menu	{
		display: none;
		margin: 0;
		padding: 0;
		width: 100%;
	}

	.navbar-nav .sub-menu.open	{
		display: block;
	}

	.navbar-nav .sub-menu > li,
	.navbar-nav .sub-menu > li.menu-item {
		display: block;
		padding: 0;
		width: 100%;
	}

	.navbar-nav .sub-menu > li > a {
		background-color: var(--color-sub-menu-li-background);
		border-bottom: 1px solid var(--color-sub-menu-li-border);
		display: block;
		padding: 1rem 4%;
		text-align: center;
	}
}

/* MAIN CONTENT LAYOUT, CONTAINERS & COLUMNS
NB: section > wrapper > sectionInner > container > #col-containers 
====================================================== */
.mainContent	{ /* approx — subtracts navbar-wrapper one-row height (min-height + padding); navbar grows when wrapped to two rows */
	min-height: calc(100% - 8rem);
}

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

/*
@media (orientation:landscape) and (min-device-width: 1367px)	{
	section {background-attachment: fixed;}
}
*/

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

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

section.subpageBannerImage {
	display: flex;
	height: min(100px, 40vh);	
}

section.subpageBannerImage .sectionInner	{
	padding: 0;
}


section.subpageBannerImage .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 */

.one-col p.wp-block-paragraph {
	margin-bottom: .5rem;
}

/* 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 6vh;
	padding-bottom: 6vh;
	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 0;
	text-align: center;	
}

.pageTitle{
	margin-bottom: 0;
	text-align: center;
}

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

a.button,
.wp-block-file .wp-block-file__button.wp-element-button     {
	padding: 10px 20px;
	border-radius: 4px;
}

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

.wp-block-image img	{
	margin-top: 2rem;
}

.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;	
}

/* QUOTE CAROUSEL STYLES
****************************************/
section.quotes {
	background-color: #ccc;
	min-height: 400px;
	font-family: var(--font-quote);
}
.quotes-carousel-container {
    position: relative;
    padding: 3rem 2rem;
    overflow: hidden;
}

.quotes-carousel-slides {
    position: relative;
    width: 100%;
}

.quote-slide {
    display: none;
    width: 100%;
    text-align: center;
    animation: fadeIn 1s ease-in-out;
}

.quote-slide.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.quote-content {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    line-height: 1.6;
    font-style: italic;
    margin: 0 auto 1rem;
    max-width: 800px;
    color: #666;    
    padding-bottom: 60px;border-top: 1px solid rgba(255,255,255, 0.8);
    border-bottom: 1px solid rgba(255,255,255, 0.8);
}

.quote-content::before {
    content: '“';
    display: block;
    font-family: serif;
    font-size: 200px;
    width: 200px;
    height: 50px;
    line-height: 100px;
    border: 0px solid red;
    margin: 0 auto 20px;
    color: #999;
    text-align: center;
}

/*
.quote-content::after {
    content: '”';
    display: block;
    font-family: serif;
    font-size: 200px;
    width: 100%;
    height: 50px;
    line-height: 100px;
    border: 0px solid red;
    margin: 0 auto;
    color: #999;
    text-align: right;
    position: absolute;
    bottom: 167px;
}
*/


.quote-author {
    display: block;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-style: normal;
    color: #666;
    margin-top: 1rem;
    text-align: left;
}

/* Quote Navigation Dots */
.quotes-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 2rem;
     								/* try */
}

.quotes-nav-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
}

.quotes-nav-dot.active,
.quotes-nav-dot:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.2);
}

/* Quote Arrow Navigation (hidden by default) */
.quote-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.1);
    color: #333;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.3s ease;
    z-index: 10;
    display: none; /* Hidden by default - set to 'block' to show */
}

.quote-arrow:hover {
    background: rgba(0, 0, 0, 0.2);
}

.quote-arrow.prev {
    left: 10px;
}

.quote-arrow.next {
    right: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quotes-carousel-container {
        padding: 2rem 1rem;
    }
    
    .quote-content {
        font-size: 1.25rem;
    }
    
    .quote-author {
        font-size: 1rem;
    }
}

img {
    box-shadow:
        0 1px 2px rgba(180,180,160,.55),
        0 4px 12px rgba(180,180,160,.50);
}

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

/* ARCHIVE & CARD STYLES
************************************************************/
.thumb{
    margin-bottom: 20px;
    padding: 10px;
}

.thumb img {
    border: 1px solid #eee;
}

.thumbnailTitle {
    font-size: 14px;
    position: relative;
    width: 100%;
    /* height: auto; */
    text-align: center;
    height: 6.3em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thumbnailTitle h4 {
    padding-top: 20px;
    font-size: clamp(16px, 2vw, 18px);
    font-weight: bold;
    text-transform: capitalize;
}

.thumb {
    position: relative;
    overflow: hidden;
}

.thumb .workThumbnailImage {
    position: relative;
    z-index: 2;
}

.thumb::before {
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: contain;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.thumb:hover::before {
    opacity: 1;
    background-image: url('');
}

.thumb:hover .workThumbnailImage img {
    opacity: 0;
}

.videoBlockHome {
    overflow: hidden;
}
.wp-video,
.wp-video-shortcode{
    width: 750px !important;
}

@media (min-width:821px) {
	.video-url { width: 750px;}
}
.work .flexWrapper{
    justify-content: left !important;
}



/* PAGINATION - Currently not in use anywhere
------------------------------------------------------------------------------------*/

.page-prev { /* for get_next_post() ie « Previous */
    display:flex;
    order: 1;
    margin-right: 15px;
    margin-bottom: 8px;
    padding: 3px;
    border: 0px dotted #525665;
}

.page-next { /* for get_previous_post() ie Next » */
    display:flex;
    order: 2;
    margin-left: 15px;
    margin-bottom: 8px;
    padding: 3px;
    border: 0px dotted #525665;
}

/* for archive page pagination (eg 1 2 »): */

.page-numbers {
	padding: 6px 8px 2px;
	margin: 1px;
}

.page-numbers.current {
	border: 1px solid grey;	
}

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

.footer .gridContainer {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 20px;
	align-items: start;
	margin-bottom: 10px;
} 

.footer .gridContainer .gridItem { 
	/* Remove the margin and width properties that were causing alignment issues */
}

.footer .gridContainer .gridItem1 { 
	text-align: left;
	justify-self: start; /* Ensures content aligns to the very left */
}

.footer .gridContainer .gridItem2 { 
	text-align: center;
	justify-self: center;
}

.footer .gridContainer .gridItem3 { 
	text-align: right;
	justify-self: end; /* Ensures content aligns to the very right */
}

p.address	{
	font-size: .8rem;
}

p.copyright, p.credit {
	text-align: center; 
	color: var(--color-footer-credit);
}

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

p.credit {
	font-size: .8rem;
	margin: 1em auto 20px;
}

section.footer {
	min-height: 100px;
	line-height: 1.2rem;
}

section.footer .wrapper {
	padding: 0 4%;
}

section.footer .sectionInner { 
	padding: 30px 0 10px; 
}

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

/* Responsive Design */
@media (max-width: 600px) {
	.footer .gridContainer {
		grid-template-columns: 1fr;
		gap: 15px;
		text-align: center;
	}
	
	.footer .gridContainer .gridItem1,
	.footer .gridContainer .gridItem2,
	.footer .gridContainer .gridItem3 {
		justify-self: center;
		text-align: center;
	}
	
	p.copyright, p.credit {
		text-align: center; 
	}
	
	div.social-icons {
		margin-top: 20px;
	}
}



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

img.marginBottom {margin-bottom: 30px;}

.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;
}

/* dev */