/* ==|== primary styles =====================================================
   Author: Silverink
   ========================================================================== */



/* ROOT VARIABLES ================================================= */


:root {
--brand-primary: #000000;
--white: #F7F5F4;
--black: #141311;
--base-primary: rgb(144, 138, 132);
--base-secondary: rgba(134,0,13,1);
--base-tertiary: #DDD9D6;
--base-light: #EBE8E5;

--box-shadow: 0px 15px 25px rgba(144,138,132,0.2);

--font-head: "upgrade", "Helvetica Neue", Helvetica, Arial,  sans-serif;
--font-body: "upgrade-lights", "Helvetica Neue", Helvetica, Arial,sans-serif;
--font-bold: 700;
--letter-spacing: 0.2rem;
--letter-spacing-small: 0.1rem;
}



/* ==|== Easibuild Structural Elements =====================================================
   Structural elements such as mainContent/Wide, submenu etc. Ideally these elements will change
   to HTML5 tags...  aside, article etc.
   ========================================================================== */

   a:link {text-decoration: none; color: var(--base-secondary); }
   a:visited {text-decoration: none; color: var(--base-secondary);}
   a:hover {text-decoration: none; color: var(--base-primary);}
   a:active {text-decoration: none; color: var(--base-primary);}

   #homeEditable a {text-decoration: underline; font-weight: bold;}

.active {font-weight: bold;}

body, html {min-height: 100vh; font-family: var(--font-body);}

body {
	display: flex;
  	flex-direction: column;
	position: relative;
}

.breadcrumb {text-transform: uppercase; font-family: var(--font-body); font-size: 0.875rem; letter-spacing: var(--letter-spacing-small); margin-bottom: 20px;}

.breadcrumb {
  display: flex;
  align-items: center;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-item img {
  height: 18px; /* adjust as needed */
  width: auto;
  vertical-align: middle;
}

.breadcrumb a {color: var(--black); font-weight: bold;}


.btn {border-radius: 0px; font-family: var(--font-body); font-size: 1.2rem; text-transform: uppercase; padding: 10px 2rem; transition: all 0.3s ease; letter-spacing: var(--letter-spacing); color: var(--black);}
.btn-primary, .btn-outline-primary {
	background-color: rgba(255,255,255,0.85);
	border-color: var(--brand-primary);
	color: var(--black) !important;
		backdrop-filter: blur(80px);          /* the blur effect */
  -webkit-backdrop-filter: blur(80px); 

}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:focus:active, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary:focus:active, .btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show {
	background-color: var(--black);
	border-color: var(--black);
	color: var(--white) !important;
}

.carousel .btn-primary {font-size: 2rem; }

.card, .card p {border: none; cursor: pointer; overflow: hidden; text-align: center !important;}
	.card .category {position: absolute; top: 10px; left: 10px; background-color: rgba(255,255,255,0.75); color: var(--black); padding: 5px 10px; font-size: 0.75rem; font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--letter-spacing); backdrop-filter: blur(80px);          /* the blur effect */
  -webkit-backdrop-filter: blur(80px); }
.card-title {text-transform: uppercase; font-family: var(--font-body); letter-spacing:  var(--letter-spacing); }
.card-img-top {aspect-ratio: 16/9; overflow: hidden; position: relative;}
.card-img-top img {aspect-ratio: 16/9; object-fit: cover;}

.dropdown {
  position: relative;
}
.dropdown-item {text-transform: uppercase; color: var(--black) !important; font-family: var(--font-body); letter-spacing: var(--letter-spacing); }

.dropdown-item.active, .dropdown-item:active {background-color: var(--black); color: var(--white)!important;}
img {max-width: 100%; height: auto;}
/* Main content takes up remaining space */
main {
	flex: 1;
  }



.navbar-brand img {max-height: 66px; width: auto;}


/* FOOTER */
footer {
  	background-image: url("footer.svg");
  	background-size: contain;
  	background-position: right;
	background-repeat: no-repeat;
  	height: 240px; /* adjust as needed */
}

footer a {color: var(--black) !important; text-decoration: none;}



/* Circle button wrapper */
.navbar-toggler {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px; /* space between lines */
  transition: all 0.3s ease;
  color: #fff; /* adjust to your theme */
  background: transparent;
}

/* The three lines inside */
.navbar-toggler .toggler-icon {
  display: block;
  width: 11px;
  height: 2px;
  background-color: currentColor;
  border-radius: 1px;
  transition: all 0.3s ease;
}

/* Hover / focus effects */
.navbar-toggler:hover,
.navbar-toggler:focus {
  background-color: rgba(255, 255, 255, 0.1);
  outline: none;
}

/* Optional animation to an "X" when open */
.navbar-toggler[aria-expanded="true"] .toggler-icon:nth-child(1) {
  transform: translateY(4px) rotate(45deg);
}
.navbar-toggler[aria-expanded="true"] .toggler-icon:nth-child(2) {
  opacity: 0;
}
.navbar-toggler[aria-expanded="true"] .toggler-icon:nth-child(3) {
  transform: translateY(-4px) rotate(-45deg);
}


.newsCard a {text-decoration: none; color: var(--black);}
.newsCard .card-title {font-size: 1.125rem; min-height: 50px;}
.newsCard .card-text {font-size: 1rem; color: #555;}
.newsCard .imageContain img {aspect-ratio: 16/9; object-fit: cover; background-position: center center;}
.socialShareLinks svg {width: 24px;}
.socialShareLinks svg path {fill: var(--brand-primary)}



/* SILVERINK LINK */
#silverinkWebDesign {
	font-size: 10px;
	font-family: helvetica, arial;
	margin-left: 0px;
	margin-top: 5px;
}


#silverinkWebDesign 	a {
	color: #888;
}


/* END FOOTER */




#logo img {width: auto; height: auto; max-height:100%; cursor: pointer;}

.topBannerContainer {background: rgba(255,255,255,0.95); border-bottom: 3px solid var(--base-primary);
	backdrop-filter: blur(80px);          /* the blur effect */
  -webkit-backdrop-filter: blur(80px); 
  padding: 10px 0px;
}


.topBannerContainer {
  transition: all 0.3s ease;
  transform-origin: top center;
}

/* SCROLL NAV BAR */

.topBannerContainer {
  position: fixed !important;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.topBannerContainer.is-shrunk {padding: 0px;}
.topBannerContainer.is-shrunk .navbar-brand img {max-height: 50px;}

/* Glassy look when menu is expanded */
.topBannerContainer:has(.navbar-toggler[aria-expanded="true"]) {
  background: rgba(255,255,255,0.8);  /* more transparent */
  backdrop-filter: blur(120px);        /* lighter blur */
  -webkit-backdrop-filter: blur(120px);
}

.topBannerContainer.sticky-top {
  position: sticky !important;
  top: 0;
  z-index: 1030;
}


.mainNav .nav-item {font-size: 1.4rem; text-decoration: none; text-transform: uppercase;}

.topNav {font-weight: 700; font-size: 0.875rem; text-transform: uppercase;}

/* TEMPLATES */
/* OVERRIDE TEMPLATE SPECIFIC MARKUP STYLES HERE */
/* ALL BREAKPOINTS, MOBILE FIRST */
/* ========================================================================== */

/* CALENDAR */
	/* body[data-template="calendar"] { } */
	body[data-template="calendar"] .card {border: 1px solid transparent; cursor: pointer;}
/* END OPEN */


/* CONTACT */
	/* body[data-template="contact"] { } */
	.ContactDetails h1, .ContactForm h1 {font-size: 1.75em;}
	.ContactForm label, #questionForm label {display: block;}
	.ContactForm div, #questionForm div {margin-bottom: 10px;}
	.ContactForm input[type='text'], .ContactForm input[type='tel'], .ContactForm input[type='email'], .ContactForm textarea {border: 1px solid #888;}
	.notEmail {display: none;}

	#map_canvas {width: 100%; min-height: 150px;}
/* END CONTACT */


/* DIRECTORY */
	/* body[data-template="directory"] { } */
/* END DIRECTORY */

/* FILESTORE */
	/* body[data-template="filestore"] { } */
/* END OPEN */


/* KNOWLEDGEBASE */
	/* body[data-template="knowledgebase"] { } */
	/* ================================
   ACCORDION STYLES
   ================================ */

.accordion {
  border-top: 1px solid var(--base-primary);
  border-bottom: 1px solid var(--base-primary);
  background-color: var(--base-light);
}

.accordion-item {
  border: none;
  border-bottom: 1px solid var(--base-tertiary);
  background: transparent;
}

.accordion-button {
  background-color: rgba(255,255,255,0.85);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-small);
  color: var(--black);
  border-radius: 0;
  padding: 1.2rem 1.5rem;
  transition: all 0.3s ease;
}

.accordion-button:not(.collapsed) {
  color: var(--white);
  background-color: var(--black);
  box-shadow: none;
}

.accordion-button:hover {
  background-color: var(--base-primary);
  color: var(--white);
}

.accordion-button:focus {
  box-shadow: none;
  outline: none;
}

.accordion-body {
  background-color: rgba(255,255,255,0.8);
  padding: 1.5rem;
  font-size: 1rem;
  color: var(--black);
  line-height: 1.6;
  font-family: var(--font-body);
}

.accordion-body a {
  color: var(--base-secondary);
  text-decoration: underline;
  font-weight: bold;
}

.accordion-body a:hover {
  color: var(--base-primary);
}

.accordion-body img {
  border-radius: 4px;
  box-shadow: var(--box-shadow);
  margin-top: 1rem;
  max-width: 100%;
  height: auto;
}

/* Remove Bootstrap's default arrow and add custom one */
.accordion-button::after {
  background-image: none !important;
  content: "＋";
  font-size: 1.25rem;
  transform: none !important;
  transition: transform 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
  content: "－";
}

/* Subtle animation for opening */
.accordion-collapse {
  transition: all 0.4s ease;
}

/* GALLERY */
	/* body[data-template="gallery"] { } */
	.galleryCardItem .cardHeader {aspect-ratio: 16 /9; background-repeat: no-repeat; background-size: cover; background-position: center center;} 
	body[data-template="gallery"] .cardContent {padding: 0px; margin: 0px;}
/* END GALLERY */


/* KNOWLEDGEBASE */
	/* body[data-template="knowledgebase"] { } */
		body[data-template="knowledgebase"] h2 { text-transform: uppercase } 

/* OPEN */
	/* body[data-template="open"] { } */
	#fpImageDiv .carousel-item img{
		aspect-ratio: 22/9;
		background-size: cover;
		object-fit: cover;
	}

/* END OPEN */


/* NEWS */
	/* body[data-template="news"] { } */
	.newsFrontPage figure {min-height: 300px; background-size: cover;}
	.newsImage {padding-top: 56%; background-size: cover; background-repeat: none;}
	.offcanvas.show {
		visibility: visible !important;
	}
	.nav-carousel img {aspect-ratio: 1/1; object-fit: cover;}
/* END NEWS */


/* PRODUCTS */
	/* body[data-template="products"] { } */
	body[data-template="products"] h2 { text-transform: uppercase } 
	.AttributeValuesList {font-size: 1.4rem; }
	.AttributeValuesList .active, .AttributeValuesList .active:hover {background-color: #888; border-color: #888}
	.AttributeValuesList .list-group-item {padding: 10px; cursor: pointer;display: none;}
	.AttributeValuesList .list-group-item.active, .AttributeValuesList .list-group-item.visible {display: block;}
	.AttributeValuesList img {max-width: 30px; height: auto;}
	.catCard {cursor: pointer;}
	.productCard {cursor: pointer;}
	.showhideOptions {cursor: pointer; font-size: 1.2rem; margin-top: 10px;}
	.introText {font-size: 1.125rem; line-height: 1.6; margin-bottom: 30px;}
/* END PRODUCTS */




section h2 {font-size: 2rem; font-family: var(--font-head); text-transform: uppercase; letter-spacing: var(--letter-spacing); margin-bottom: 20px; text-align: center;}

.supplier-carousel .item {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.supplier-carousel img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
}



/* ==|== media queries ======================================================
   Media Queries for Responsive Design.
   These override the primary ('mobile/desktop first') styles
   Modify as content requires.
   ========================================================================== */

/*===============================*/
/* 480 - LANDSCAPE MOBILE LAYOUT */
/*===============================*/

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

	/* TEMPLATES */
	/* OVERRIDE TEMPLATE SPECIFIC MARKUP STYLES HERE */
	/* ========================================================================== */

	/* CALENDAR */
		/* body[data-template="calendar"] { } */
	/* END OPEN */


	/* CONTACT */
		/* body[data-template="contact"] { } */
	/* END CONTACT */


	/* DIRECTORY */
		/* body[data-template="directory"] { } */
	/* END DIRECTORY */

	/* FILESTORE */
		/* body[data-template="filestore"] .mainArticleWrap { } */
	/* END OPEN */

	/* GALLERY */
		/* body[data-template="gallery"] { } */
	/* END GALLERY */

	/* OPEN */
		/* body[data-template="open"] { } */
	/* END OPEN */


	/* NEWS */
		/* body[data-template="news"] { } */
	/* END NEWS */


	/* PRODUCTS */
		/* body[data-template="products"] { } */
	/* END PRODUCTS */

}



/*=====================*/
/* 768 - TABLET LAYOUT */
/*=====================*/
@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

	#latestProducts {padding: 30px 0px;}
  	#mobileMenu {display: none !important;}

	/* TEMPLATES */
	/* OVERRIDE TEMPLATE SPECIFIC MARKUP STYLES HERE */
	/* ========================================================================== */

	/* CALENDAR */
		/* body[data-template="calendar"] { } */
	/* END OPEN */


	/* CONTACT */
		/* body[data-template="contact"] { } */
	/* END CONTACT */


	/* DIRECTORY */
		/* body[data-template="directory"] { } */
	/* END DIRECTORY */

	/* FILESTORE */
		/* body[data-template="filestore"] .mainArticleWrap { } */
	/* END OPEN */

	/* GALLERY */
		/* body[data-template="gallery"] { } */
	/* END GALLERY */

	/* OPEN */
		/* body[data-template="open"] { } */
	/* END OPEN */


	/* NEWS */
		/* body[data-template="news"] { } */
	/* END NEWS */


	/* PRODUCTS */
		/* body[data-template="products"] { } */
	/* END PRODUCTS */
}



/*=======================*/
/* 1024 - DESKTOP LAYOUT */
/*=======================*/
@media only screen and (min-width: 992px) {
  /* Style adjustments for viewports 1024px and over go here */


	/* TEMPLATES */
	/* OVERRIDE TEMPLATE SPECIFIC MARKUP STYLES HERE */
	/* ========================================================================== */

	/* CALENDAR */
		/* body[data-template="calendar"] { } */
	/* END OPEN */


	/* CONTACT */
		/* body[data-template="contact"] { } */
	/* END CONTACT */


	/* DIRECTORY */
		/* body[data-template="directory"] { } */
	/* END DIRECTORY */

	/* FILESTORE */
		/* body[data-template="filestore"] .mainArticleWrap { } */
	/* END OPEN */

	/* GALLERY */
		/* body[data-template="gallery"] { } */
	/* END GALLERY */

	/* OPEN */
		/* body[data-template="open"] { } */
	/* END OPEN */


	/* NEWS */
		/* body[data-template="news"] { } */
	/* END NEWS */


	/* PRODUCTS */
		/* body[data-template="products"] { } */
	/* END PRODUCTS */

}


/*===========================*/
/* WIDE DESKTOP LAYOUT */
/*===========================*/
@media only screen and (min-width: 1200px) {


	/* SCROLL NAV BAR */
	.topBannerContainer.is-shrunk .mainNav .nav-item {font-size: 1.125rem;}
	.topBannerContainer.is-shrunk .topNav {font-size: 0.75rem;}
	/* TEMPLATES */
	/* OVERRIDE TEMPLATE SPECIFIC MARKUP STYLES HERE */
	/* ========================================================================== */

	/* CALENDAR */
		/* body[data-template="calendar"] { } */
	/* END OPEN */


	/* CONTACT */
		/* body[data-template="contact"] { } */
	/* END CONTACT */


	/* DIRECTORY */
		/* body[data-template="directory"] { } */
	/* END DIRECTORY */

	/* FILESTORE */
		/* body[data-template="filestore"] .mainArticleWrap { } */
	/* END OPEN */

	/* GALLERY */
		/* body[data-template="gallery"] { } */
	/* END GALLERY */

	/* OPEN */
		/* body[data-template="open"] { } */
	/* END OPEN */


	/* NEWS */
		/* body[data-template="news"] { } */
	/* END NEWS */


	/* PRODUCTS */
		/* body[data-template="products"] { } */
	/* END PRODUCTS */
}








/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}