/* CSS Variables */

:root{
	--paragraph-font:sans-serif;
	--font-awesome:"Font Awesome 5 Pro";
	--title-font:sans-serif;
	
	--brand-orange-lighter:#FF7840;
	--brand-orange: #fd6020;
	--brand-orange-darker: #fd4900;

	--brand-grey-lighter: #4f7482;
	--brand-grey: #446875;
	--brand-grey-darker: #325664;
	
	--white-color: #fafafa;
	--font-color: #325664;
	--font-color-reverse:#fafafa;
	
	--light-grey:#e1e7ea;
	
	--tracked-out: 0.05em;
	
	--green-color:rgb(114, 176, 52);
	--bs-success-rgb:114, 176, 52;
	
	--red-color:rgb(200, 0, 0);
	
	--bs-primary-rgb:255, 122, 67;

}

/* TABLES */

/* Row details are hidden by default; JS animates height */
.row-details {
  overflow: hidden;
  height: 0;
}
.row-details--animating {
  transition: height .22s ease;
}

/* Optional nicety: remove double padding for the details row cell */
td.details-cell { padding: 0 !important; }

/* Keep the chevron column tight */
th.toggle-col, td.toggle-col {
  width: 36px;
  text-align: center;
  white-space: nowrap;
}

/* Remove the stacked (double) border between main and details rows */
.js-accordion-table tbody tr.details-row > td {
  border-top: 0 !important;         /* kill the extra top border on the details row */
}

/* Optional: add a subtle separator inside the details block instead */
.js-accordion-table tbody tr.details-row > td .row-details {
  border-top: 1px solid var(--bs-border-color);
}

/* Keep details cell flush */
.js-accordion-table td.details-cell { padding: 0 !important; }

/* (Already have) chevron column width */
.js-accordion-table th.toggle-col,
.js-accordion-table td.toggle-col {
  width: 36px;
  text-align: center;
  white-space: nowrap;
}

.js-accordion-table td{
	border:none;
}

/* makes native scrollIntoView land nicely under fixed headers */
#toolFormCard { scroll-margin-top: 84px; }
/* quick visual confirmation we landed in the right spot */
.flash-highlight { animation: flashHi 1.6s ease-out 1; }
@keyframes flashHi {
	0%   { box-shadow: 0 0 0 0 rgba(255,165,0,.75); }
	30%  { box-shadow: 0 0 0 6px rgba(255,165,0,.35); }
	100% { box-shadow: 0 0 0 0 rgba(255,165,0,0); }
}

/* Concrete File Manager (jQuery UI) on top of site modals */
.ui-widget-overlay.ccm-ui {
  z-index: 2000 !important;   /* overlay under the dialog */
}
.ui-dialog.ui-front.ccm-ui {
  z-index: 2010 !important;   /* actual dialog above overlay & Bootstrap modal */
}

#toolCalendar, #adminToolCalendar {
  min-height: 60vh;         /* or a fixed px height if you prefer */
}
.modal .fc .fc-scroller {
  overflow: auto;           /* ensure scroll behaviour is normal */
}
/* background blocks for booked ranges */
/* Base pointer cue for days you can pick */
.fc-daygrid-day.is-hoverable { cursor: pointer; }

/* Single-day hover (no start yet) */

.fc-daygrid-day.is-selected-day{
	background:var(--brand-orange-lighter);
}

.fc-daygrid-day.is-hover-day {
  outline: 2px dashed rgba(0, 123, 255, .45);
  outline-offset: -2px;
  background: rgba(0, 123, 255, .06);
}

/* Range preview when a start is chosen */
.fc-daygrid-day.is-hover-range {
  background: rgba(0, 123, 255, .08);
  position: relative;
}
.fc-daygrid-day.is-hover-start::before,
.fc-daygrid-day.is-hover-end::before {
  content: '';
  position: absolute; inset: 0;
  outline: 2px solid rgba(0, 123, 255, .55);
  pointer-events: none;
}

/* Invalid preview (overlaps a booking) */
.fc-daygrid-day.is-hover-range.is-hover-invalid {
  background: rgba(220, 53, 69, .08);
}
.fc-daygrid-day.is-hover-start.is-hover-invalid::before,
.fc-daygrid-day.is-hover-end.is-hover-invalid::before {
  outline-color: rgba(220, 53, 69, .6);
}


/* MY ACCOUNT PAGE */

#sec-contact-details fieldset legend{
	display:none;
}

/* Resets */

*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}

.fa-facebook:before{
	content:'\f39e';
}

.fa-linkedin:before{
	content:'\f0e1';
}

.bg-dark{
	background-color:var(--brand-grey-darker)!important;
}

h1,h2,h3,h4,h5,h6{
	font-family:var(--title-font);
	color: var(--brand-orange);
	text-wrap:balance;
	font-weight:600;
}

a,
a.link-primary{
	text-decoration: none;
	color: var(--brand-orange);
}

a.pdf-link{
	color:#920000;
}

a:hover {
	color: var(--font-color);
}

p {
	font-size:1rem;
	line-height: 1.75em;
	margin: 1em 0;
	text-wrap: pretty;
	text-wrap-style: pretty;
	font-weight:400;
	color:var(--font-color);
}

/* Basic Styles */

body{
	font-family:var(--paragraph-font);
	background:var(--white-color);
	font-size:16px;
	color:var(--font-color);
	padding-top:150px;
}

p strong{
	font-weight:600;
}

.all-caps{
	text-transform:uppercase;
	letter-spacing:var(--tracked-out);
}

.smaller{
	font-size:0.875rem;
}

.reverse{
	background:var(--brand-grey-darker);
	color:var(--font-color-reverse);
}

.reverse p,
p.white{
	color:var(--font-color-reverse);
}

p.smaller{
	font-size:0.875rem;
}

p.smallest{
	font-size:0.75rem;
}



/* GLOBAL STYLES */

/* main container styles */

.container-fluid {
	max-width: calc(1320px + 8rem);
	padding: 0 4rem;
}

header#main-header .container-fluid{
	max-width: calc(1340px + 6rem);
	padding: 0 3rem;
}

@media screen and (max-width:960px){
	.container-fluid {
		max-width: calc(1320px + 4rem);
		padding: 0 2rem;
	}
	
	header#main-header .container-fluid{
		max-width: calc(1320px + 3rem);
		padding: 0 1.5rem;
	}
}

@media screen and (max-width:540px){
	.container-fluid {
		max-width: calc(1320px + 2rem);
		padding: 0 1rem;
	}
	
	header#main-header .container-fluid{
		max-width: calc(1320px + 1.5rem);
		padding: 0 .75rem;
	}
}

/* padding and margins for sections etc */

.standard-padding{
	padding: 5rem 0;
}

.standard-margin{
	margin: 5rem 0;
}

.relative{
	position:relative;
}

@media screen and (max-width:960px){
	section.standard-padding{
		padding: 3rem 0;
	}
	
	section.standard-margin{
		margin: 3rem 0;
	}
}

@media screen and (max-width:640px){
	section.standard-padding{
		padding: 2rem 0;
	}
	
	section.standard-margin{
		margin: 2rem 0;
	}
}

/* HEADER */

header#main-header {
	background: var(--brand-grey);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 500;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

header#main-header div.logo {
	position: absolute;
	top: 0;
	width: 220px;
	background: var(--brand-grey-lighter);
	border-radius: 0 0 4px 4px;
	z-index: 10;
	box-shadow: 0 3px 3px rgba(0,0,0,0.15);
}

header#main-header div.logo .st0{
	fill:var(--brand-orange);
	transition:all 0.3s;
}

header#main-header div.logo:hover .st0{
	fill:#fff;
}

header#main-header div.logo a{
	display:block;
	padding: 1rem;
}

header#main-header div.logo a svg{
	width:100%;
	height:auto;
}

header#main-header .top-header-bar{
	background:var(--brand-grey-darker);
}

header#main-header .login-out,
footer#footer .login-out{
	display: flex;
	justify-content: flex-end;
	color: #fff;
	align-items: center;
	gap: 1em;
	font-weight: 300;
	font-size: 0.875rem;
}

footer#footer .login-out{
	justify-content: flex-start;
}

header#main-header .login-out a,
footer#footer .login-out a {
	padding:0.5rem 0;
	display:block;
}

header#main-header .login-out a:hover,
footer#footer .login-out a:hover {
	color:#fff;
}

footer#footer .login-out{
	display:none;
}

@media screen and (max-width:860px){
	footer#footer .login-out{
		display:flex;
	}
	header#main-header .login-out{
		display:none;
	}
	header#main-header .top-header-bar{
		background:transparent;
	}
}

/* TOOL LIST */



div.tool-list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0 -0.5rem;
}

div.tool-list .tool-card-wrapper {
	width: 25%;
	padding: 0 0.5rem;
}

div.tool-list .tool-card {
	background: #fff;
	height: 100%;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

div.tool-list .tool-card .image {
	padding-bottom: 75%;
	background-color: #fff;
	background-size: cover;
	height: 0;
	position: relative;
	background-position: center;
	background-repeat: no-repeat;
}

div.tool-list .tool-card .image span {
	position: absolute;
	top: 50%;
	width: 100%;
	text-align: center;
	transform: translateY(-50%);
	color: #fff;
	font-size: 2rem;
}

div.tool-list .tool-card .image:before {
	content: '';
	background: rgba(0,0,0,0);
	width: 100%;
	height: 100%;
	position: absolute;
	transition:all 0.3s;
}

div.tool-list .tool-card .image:hover:before {
	background: rgba(0,0,0,0.5);
}

div.tool-list .tool-card .image:after {
	content: '\f302';
	font-family: var(--font-awesome);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-weight: 300;
	color: #fff;
	background: rgba(0,0,0,0.5);
	font-size: 1.5rem;
	padding: 0.5rem;
	border-radius: 3px;
	line-height: 1em;
	backdrop-filter:blur(4px);
	-webkit-backdrop-filter:blur(4px);
}

div.tool-list .tool-card .tool-card-body {
	padding: 1rem;
	height: 100%;
}

div.tool-list .card-title{
	color:var(--brand-orange);
}

div.tool-list .tool-card p {
	line-height: 1.25em;
	font-size: 0.875rem;
	margin: 0.5em 0;
}

div.tool-list .tool-card p strong{
	font-weight:600;
}

div.tool-filters-wrapper {
	padding: 1rem;
	background: #e1e7ea;
	border-radius: 5px;
}

div.tool-filters-wrapper .view-unpublished label{
	line-height:1.25em;
}

label.strong{
	font-weight:600;
}

@media screen and (max-width:1410px){
	div.tool-list .tool-card-wrapper{
		width:33.33%;
	}
}

@media screen and (max-width:1100px){
	div.tool-list .tool-card-wrapper{
		width:50%;
	}
}

@media screen and (max-width:700px){
	div.tool-list .tool-card-wrapper{
		width:100%;
	}
}

@media screen and (max-width:992px){
	section.tool-filters .filter{
		margin-bottom:1rem;
	}
}

/* GALLERY MODAL */

#galleryModal .modal-content {
  border-radius: 0.75rem; /* Match Bootstrap default */
  overflow: hidden; /* Ensures carousel respects the radius */
}

.carousel-control-next, .carousel-control-prev{
	width:10%;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
	background-size: 1.5rem;
	background-color: black;
	border-radius: 5px;
}

/* Smooth height changes */
#galleryModal .modal-dialog,
#galleryModal .modal-content,
#galleryModal .carousel,
#galleryModal .carousel-inner {
  transition: height .25s ease, margin .25s ease;
}

#galleryModal .modal-content {
  overflow: hidden; /* keep rounded corners clean */
}




/* ADD/EDIT TOOL FORM */

.model-pill {
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s;
}

.model-pill.selected {
	background-color: var(--brand-orange) !important;
	color: #fff;
}

/* PRODUCT PAGE */

.sold-heading{
	color:rgb(163, 0, 0);
	text-transform:uppercase;
}

.inactive-heading {
	color: rgb(255, 179, 0);
	text-transform: uppercase;
}

section.product-view .main-image{
	width: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;     /* show whole image */
	border-radius: .25rem;
	transition: padding-bottom .25s ease; /* height animation via padding-bottom */
}

section.product-view .thumb-btn {
	width: 84px; height: 84px;
	border: 0; padding: 0; cursor: pointer;
	border-radius: .25rem; overflow: hidden;
	background-size: cover;       /* crop to square thumbs */
	background-position: center;
	outline: none;
  }
 
section.product-view .thumb-btn:focus-visible {
	box-shadow: 0 0 0 .2rem rgba(13,110,253,.25);
}

/* FOOTER */

footer#footer {
	padding: 1rem 0;
}

footer#footer p.contact a {
	display: grid;
	grid-template-columns: 30px 1fr;
	align-items: center;
	width:fit-content;
}

footer#footer p.contact a i{
	font-size:1.25em;
}

footer#footer a{
	transition:all 0.3s;
}

footer#footer a:hover{
	color:#fff;
}