/*
Theme Name: jolyonfenwick2025
Author: Blue Smarty
Author URI: https://blue-smarty.com/
Version: 2025.7
*/

/*VARS*/
:root {
    --mainColor: #136FB7;
    --SiteGrey: #dbdbdb;
    /* --Product: #00A6E2; */
    --Product: #054F8C;
    --LightBlue: #789EAC;
    --BtnOrange: #D67C49;
    --FooterBkg: #ffffff;
    --Mastbkg: #010101;
    --MainBlue: #0092B6;
    --DarkBlue: #1D1D3D;
	--sliderbkg: #ffffff;
    --OffWhite:#f5f8fa;
    --White: #ffffff;
    --Black: #000000;
    --Sold: #FF5369;
    --Gold: #c2a661;

}

/* html, body{
   overflow-x: hidden; 
  } */

html { scroll-behavior: smooth;
}

body {
    font-family: "Crimson Text", serif; 
    /* font-family: "EB Garamond", serif; */
    font-size: 18px;
    background-color: var(--White); /* Fallback background color */
}

p { 
    line-height: 1.1rem;
    font-size:0.8rem;
}

p > a {
    text-decoration: none!important;
    color:var(--Gold)!important;
}
p > a:hover {
    text-decoration: none!important;
    color:var(--SiteGrey)!important;
}


h1, h2, h3, h4, h5, h6 {color: var(--Black);margin-bottom: 20px;font-weight: 300; font-family: "EB Garamond", serif;}

h1 {font-size:2.2rem}
h1 {font-size:2rem}
h3 {font-size:1.35rem}

strong {font-weight:bold;}
.italics {font-style: italic;}
.maintitle {font-weight:100!important;font-size:2rem;}
#site-title img {
    max-width: 300px;
    width: 100%;
    display: block;
    float: left;
    height: auto;
}

.row > div > a {
    text-decoration: none!important;
    /* font-weight: 700!important; */
    color:var(--Black)!important;
}
.row > div > a:hover {
    text-decoration: none!important;
    color:var(--SiteGrey)!important;
}


/* The clickable image area becomes a fixed-ratio "frame" */
.artwork-thumb{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;        /* tweak: 1/1, 3/2, 16/10 etc */
  text-decoration: none;
}

/* Image sits inside the frame (no cropping) */
.artwork-thumb img{
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Optional: add some breathing room so it never touches edges */
.artwork-thumb img{
  /* max-width: 88%;
  max-height: 88%; */
  max-width: 100%;
  max-height: 100%;  
}



h2.picturelink,
h2.picturelink a {
    font-size: 1rem;
}

h2.picturelink > a {
    text-decoration: none!important;
    color:var(--Black)!important;
}
h2.picturelink > a:hover {
    text-decoration: none!important;
    color:var(--SiteGrey)!important;
}
.picturelink > a {
    text-decoration: none!important;
    color:var(--Black)!important;
}
.picturelink > a:hover {
    text-decoration: none!important;
    color:var(--SiteGrey)!important;
}

.artwork-details {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 210px; /* forces same height for all */
}
.artwork-details p {
    font-size: 0.8rem;
    line-height: 1.3;
}
.artwork-details a {
    text-decoration: none!important;
    color:var(--Gold)!important;
}
.artwork-details a:hover {
    text-decoration: none!important;
    color:var(--SiteGrey)!important;
}

.artwork-enquire{
  color: inherit;
  text-decoration: none;
  font-size: 0.8rem;
}
.artwork-enquire:hover{
  text-decoration: none;
}
.singleartworkdetails p { line-height: 1.3;font-size: 0.8rem;}
.artwork-content { line-height: 1.3;font-size: 0.8rem;}


.homepagelist ul {list-style-type: none;}

li { 
    font-weight: 500;
    line-height: 1.7em;
}

blockquote.blockquote p {color: var(--DarkBlue);
}




.smtxt {font-size:0.7rem}
.largertxt {font-size:1.1rem}

.headercolor {background-color: white;}

.SiteBlack {background-color:#ffffff;}
.SiteLtGreen {background-color:var(--LtGreen);}
.SiteGrey {background-color:var(--SiteGrey);}
.SiteBlue {background-color:var(--MainBlue);}
.SiteBlueGrad {background: rgb(233, 89, 28); background: linear-gradient(180deg, rgba(233,89,28,1) 0%, rgb(230, 170, 7) 85%, rgba(230, 170, 7,1) 100%);}

.TxtOrange {color:var(--MainOrange);}
.text-black {color:black}
.no-bold {font-weight:normal}
.strong-bold {font-weight:700;}
.largerYmargin {margin-bottom:2rem}

.display-10 {font-size: 1.4rem;font-weight: 300;}

.custom-border {border-color: var(--MainBlue) !important;}



.hmboxtitle {color:var(--DarkBlue);}
.HeaderLogo {width: 320px;height: auto;}
.navilogo {display:none}
.icons {color:var(--mainColor);}

.contact a {color:white;text-decoration: none;}
.contact a:hover {color:white;text-decoration:underline;}


.sliderbkg {background-color: var(--sliderbkg);}
/* CSS for mobile screens to adjust the height and padding of the slider container */
@media (max-width: 768px) {
    .sliderbkg {
        height: 350px; /* Adjust this value based on your needs */
        padding-top: 20px; /* Padding above the images */
        padding-bottom: 20px; /* Padding below the images */
        display: flex;
        align-items: center; /* Centers the carousel vertically */
        justify-content: center; /* Centers the carousel horizontally */
    }
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-indicators [data-bs-target] {
    background-color: #000!important;
}
ol.carousel-indicators li::marker {
    content: none; /* Hides the marker */
}



button.navbar-toggler {
    margin-left: auto;
    margin-right: auto;
}

.borderblackbtm {border-bottom: 1px solid var(--Black);}


a.nav-link {
    color:var(--Black);
    line-height: 40px;
    height: 40px;
    padding: 0px 10px 0px 10px;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.5px;
}
a.dropdown-toggle.nav-link > span::after {
    content: none;
}

/* Apply margin only to top-level menu items */
ul.navbar-nav > li.menu-item {
    margin: 0px 0.5rem;
    text-align: center;
    font-size: 1rem;
}

/* Remove margin for the last top-level menu item */
/* ul.navbar-nav > li.menu-item:last-child {
    margin-right: 0;
} */



li.menu-item>a:hover:after {
    width: 100%;
    left: 0;
    background:  var(--Black);
}
li.menu-item>a:after {
    content: '';
    position: relative;
    width: 0;
    /* height: 3px; */
    display: block;
    /* margin-top: 5px; */
    right: 0;
    /* background: #fff; */
    transition: width .2s ease;
    -webkit-transition: width .2s ease;
    padding: 0rem 1rem;
}
li.menu-item>a.dropdown-toggle:after {display:none;}
li.menu-item>a.dropdown-toggle:hover:after {display:none;}
li.menu-item>a.dropdown-item:after {display:none;}
li.menu-item>a.dropdown-item:hover:after {display:none;}

/* Style the parent dropdown item */
.menu-item.dropdown > a {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

/* Ensure proper styling for the dropdown menu */
.dropdown-menu {
    display: none; /* Initially hide the dropdown */
    position: absolute;
    top: 100%;
    left: -1.3rem;
    z-index: 1000;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    background-color: #fff; /* Background color */
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
    text-align: center;
}

/* Show dropdown on hover */
.menu-item.dropdown:hover > .dropdown-menu,
.menu-item.dropdown:focus-within > .dropdown-menu {
    display: block; /* Show the dropdown menu */
}

/* Style the dropdown links */
.dropdown-menu .dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #212529;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

/* Hover and focus styles for dropdown items */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: #fff;
    text-decoration: none;
    background-color: var(--Black); /* Change background color on hover */
}

/* Arrow icon for dropdown */
.menu-item.dropdown > a::after {
    content: ' ▼'; /* Down arrow */
    font-size: 0.6rem;
    margin-left: 0.5rem;
    color: #212529;
}

/* Adjust arrow on hover */
.menu-item.dropdown:hover > a::after {
    color: #007bff; /* Change arrow color on hover */
}

/* Prevent last dropdown item from having extra border */
.dropdown-menu > li:last-child > .dropdown-item {
    border-bottom: none;
}


.navbar-nav .fa-envelope  {
    font-size: 1.5rem; /* Adjust size */
    color: #000; /* Adjust color */
    margin-left: 10px; /* Optional spacing */
}
.navbar-nav .fa-instagram  {
    font-size: 1; /* Adjust size */
    color: #000; /* Adjust color */
    margin-left: 10px; /* Optional spacing */
}
.navbar-nav .fa-flickr  {
    font-size: 1.5rem; /* Adjust size */
    color: #000; /* Adjust color */
    margin-left: 10px; /* Optional spacing */
}


.wpforms-form button[type=submit] {
    background-color:  var(--Black)!important;
    border-color:  var(--Black)!important;
    color: #fff !important;
}
 
.wpforms-form button[type=submit]:hover {
    background-color:  var(--Product)!important;
    border-color:  var(--Product)!important;
}

.btn-brand {
	color: white;
	border-radius: 0!important;
	background-color: var(--Black);
	border-color: var(--Black);
    padding: 0.8rem 2rem;
}
.btn-brand:hover {	background-color: var(--Product);
	border-color: var(--Product);
color:white!important;
}



/* Change the color in the stroke property of the image data */
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
  
  .custom-toggler.navbar-toggler {
    border-color: rgb(255,255,255);
  } 

  a.nav-link {
    text-align: center;
}


.bodybkground {
    position: relative;
    top: 0px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    background-image: url('');
    background-attachment: fixed;
}


.darkbkg {background-color: rgba(0, 0, 0, 0.6);}
.lightbkg {background-color: rgba(255, 255, 255, 0.3);}


.wp-block-image img {
max-width: 100%;
height: auto;
}


/* Make the carousel responsive and center items vertically */
/* Ensure the carousel inner takes up the desired amount of space and is flexible */
.carousel-inner {
    display: flex;
    align-items: center; /* This will vertically center the items */
    overflow: hidden; /* Prevent any overflow from the carousel */
}

/* Individual carousel items */
.carousel-item {
    width: 100%; /* Ensure each item takes up the full width of the container */
    justify-content: center;
    flex: none; /* Prevent flexbox from shrinking or growing the items */
}

/* Images within carousel items */
.carousel-item img {
    width: auto; /* Maintain original image width */
    max-height: 60vh; /* Adjust based on your needs, ensures images are not too tall */
    object-fit: contain; /* Preserve aspect ratio */
}

/* Further adjustments for image sizes on larger screens, if necessary */
@media (min-width: 992px) {
    .carousel-item img {
        max-height: 500px; /* Example fixed max-height for larger screens */
        max-width: 100%; /* Ensure the image width does not exceed the carousel width */
    }
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .carousel-item img {
        max-height: 300px; /* Smaller max-height for mobile devices */
    }
}

/* Carousel indicators adjustment if needed */
.carousel-indicators {
    bottom: -3rem !important;
}

/* CSS to hide carousel indicators on screens smaller than 768px */
@media (max-width: 768px) {
    .carousel-indicators {
        display: none;
    }
}


/* back to top */

#backtotop {
	display: inline-block;
	color: var(--SiteGrey);
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 4px;
	position: fixed;
	bottom: 30px;
	right: 15px;
	transition: background-color .3s, opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
}

#backtotop svg, #backtotop i {
	width: 100%;
	height: 100%;
}

#backtotop:hover {
	cursor: pointer;
	color: #aaa;
}

#backtotop:active {
	color: #aaa;
}

#backtotop.show {
	opacity: 1;
	visibility: visible;
}



footer#footer {background-color: var(--FooterBkg);}
footer#footer p {font-size: 0.875rem;}
/* footer#footer a {color:white;text-decoration: none;}
footer#footer a:hover {color:white;text-decoration:underline;} */

#footer > div > div > div > p.mb-5 > a {color:var(--White)!important;}
a.footerlink {color:var(--White)!important;}
a.footerlink:hover {color:var(--SiteGrey)!important;}

.fa-brands {
    color:var(--White);
}

footer#footer h2 {color:white}
hr.footer {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }



/* animations */

/* fade in*/ 

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.fade-in.visible {
    opacity: 1;
}

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

/* slide in */
.slide-in-left, .slide-in-right {
    opacity: 0;
    transition: all 1.0s ease-out;
}

.slide-in-left {
    transform: translateX(-300px);
}

.slide-in-right {
    transform: translateX(300px);
}

.slide-in-left.visible, .slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

@keyframes slideInLeft {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* slide up and fade in */

@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px); /* Adjust the value as needed */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-up-fade-in {
    opacity: 0;
    transform: translateY(300px);
    transition: opacity 1.0s ease, transform 0.5s ease;
}

.slide-up-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* gallery */

.gallery-image-container {
	width: calc(25% - 30px);
	margin: 15px;
	position: relative;
}

.gallery-image-container__33 {
	width: calc(33.33% - 30px);
}

@media( max-width: 768px) {
	.gallery-image-container__33 {
		width: calc(50% - 30px);		
	}
	.gallery-image-container {
		width: calc(50% - 30px);
		margin: 0 15px 25px 9px;
	}
}

.gallery-image-container__25 {
	width: calc(25% - 30px);
}

@media( max-width: 768px) {
	.gallery-image-container__25 {
		width: calc(50% - 30px);
	}
}

.gallery-image-container__100 {
	width: 100%;
	margin: 0;
}

.gallery-image-container:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.gallery-image {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

.gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}


#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif;}
#mc-embedded-subscribe-form input[type=checkbox]{display: inline; width: auto;margin-right: 10px;}
#mergeRow-gdpr {margin-top: 20px;font-size:0.8rem;line-height:0.7}
#mergeRow-gdpr fieldset label {font-weight: normal;}
#mc-embedded-subscribe-form .mc_fieldset{border:none;min-height: 0px;padding-bottom:0px;}
.mc-field-group input {border: 1px #cccccc solid;width:100%;margin-bottom:1rem;height: 1.8rem;}
.indicates-required {margin:1.5rem 0}
#mc-embedded-subscribe.button {padding: 0.5rem 1.5rem;color: white;background-color: #c2a661;border: 0;}
#mc_embed_signup_scroll h2 {font-size:1.5rem}

.content__gdprLegal a {
    text-decoration: underline!important;
    color:var(--Black)!important;
}
.content__gdprLegal a:hover {
    text-decoration: underline!important;
    color:var(--SiteGrey)!important;
}