/*
Theme Name: SmartHeal Custom Theme
Author: Edward Casey
Description: A custom Bootstrap-based CMS for the SmartHeal project.
Version: 1.0 (2026-03-21)
*/

html,body {
	font-weight: 200; }

.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden; }

.site-wrapper {    
	display: flex;
    flex-direction: column;
    min-height: 100vh; 
    box-sizing: border-box;
    padding-top: 80px; }
    
body {
    padding-top: 0px !important; }


main.flex-fill {
    flex: 1 0 auto; }

/* Ensure the footer doesn't shrink */
.footer-custom {
    flex-shrink: 0; }
    
.fixed-top {
    z-index: 1030; /* Bootstrap's default for fixed navs, but let's be explicit */
    background-color: white; /* Ensure it's not transparent so text doesn't peek through */
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Optional: adds a nice separation */ }
        	
a {
	text-decoration: none; }
        	
hr {
    height: 1px;
	background-color: #1A5A60;
    border: none; }
        	
h1 {
    color: #1A5A60;
    font-weight: 400;
    padding-bottom: 20px;
    margin-bottom:40px;
    border-bottom: 3px solid #1A5A60;
    background: white; }
        
h2 {
    font-weight:400; }
        	
h2 a {
    color: #00AEEF; }
        	
h2 a:hover {
    color: #1A5A60;
    text-decoration: none;
    border-bottom: 1px dotted; }
        	
h3[id] {    
    scroll-margin-top: 220px; }

figcaption {
	line-height: 1.2; 
	font-size: 90%; 
	color: slategrey; 
	padding-top:5px; }
        	
a {
     color: #00AEEF; }
        	
a:hover {
    color: #1A5A60;
    text-decoration: none;
    border-bottom: 1px dotted; }
        	
a[href^="http"]:not([href*="smartheal.eu"]):not([href*="smartheal-port.local"]):not(.no-external-icon):not(.navbar-brand):not(.nav-link)::after {
    content: "\F1C5"; 
    font-family: "bootstrap-icons" !important; 
    margin-left: 0.25em;
    font-size: 0.85em; }
    
.no-external-icon::after {
    display: none !important;
    content: none !important; }
        	
nav {
    font-weight:600; }
        	
nav a:hover {
    border: none; }
        	
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #00AEEF; } 
        	
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
	font-weight: bold;
    color: #1A5A60; 
    border-bottom: 2px solid;}	
    
.custom-logo {
    max-height: 80px; /* Adjust based on your original design */
    width: auto;
    display: block; }
    
.site-logo-container img {
    max-height: 80px; /* Adjust to match your design */
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.site-logo-container {
    display: flex;
    align-items: center;
}

.admin-bar .fixed-top {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .fixed-top {
        top: 46px; /* Mobile Admin Bar is taller */
    }
}

section {
	line-height: 1.9;
	font-size: 115%; 
	padding-bottom:30px; }
        	
img {
    max-width: 100%; }
    
.category-partners .micro-img {
    object-fit: contain; 
    background: #fff; /* Adds a white background if the logo is transparent */
}
		
footer {
	width: 100%;
	bottom: 0;
	background: #1A5A60;
	color: white;
	font-size: 90%; }	
			
footer a {
	color: white;
	text-decoration: none;
	border-bottom: 1px dotted; }
			
footer a:hover {
	color: white;
	border-bottom: 1px solid; }
	
.footer-links {
    margin-bottom: 0; /* Let the <h3> or <h5> handle the spacing */
    padding-left: 0; }

.footer-links li {
    list-style: none;
    line-height: 2; /* Gives the dotted lines some breathing room */ }
						
.mybreadcrumb {
	color: grey;
	font-weight: 200; 
	font-size: 80%; }
			
.mybreadcrumb a {
	color:grey; }
		
.mybreadcrumb a:hover{
	color: darkgrey;
	border-bottom: 1px dotted darkgrey;
	text-decoration: none; }
			
.caption {
	font-size: 80%; 
	color: #1A5A60;
	margin-bottom: 20px; }
			
.footblock {
	width: 250px;
	padding: 0 20px 0 0; 
	float: left; }
			
.sticky-top {
	top: 100px; }
			
.center {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	height: calc( 100vh - 30px ); }
  			
.holder {
  	width: 520px;
  	padding: 20px;
  	background: white; }
  			
.detail-block {
  	padding: 15px 0 15px 0;
  	float: none; }
			
.micro-img {
	width: 100px;
	height: 100px;
    object-fit: cover;
    border-radius: 4px; }
			
.feat-img {
	margin:auto;
	width: 50%; }
			
.grey-img {
	filter: grayscale(100%); }
			
.cookieBox {
	position: fixed;
	padding: 20px;
	width: 25vw;
	height: 100vh; 
	top: 0;
	left: 0;
	z-index: 99999; 
	color: rgba(255,255,255,1);
	background: #1A5A60; 
	overflow: scroll; }
				
.cookieBox hr {
    height: 1px;
    background-color: rgba(255,255,255,1);
    border: none; }

.cookieOverlay {
  	position: fixed;
  	top: 0;
  	left: 0;
  	width: 100vw;
  	height: 100vh;
  	z-index: 99998;
  	background: rgba(0,0,0,0.6); }
  				
.closed {
  	display: none; }
  				
.cookieButton {
  	position: fixed;
  	color: white;
  	background: #6DB975;
  	padding: 10px;
  	border-radius: 4px;
  	cursor: pointer; 
  	left:15px;
  	bottom: 12px;
  	z-index: 999; }
  			
.cookieLink {
  	cursor: pointer; }
  			
.cookieLink:hover {
  	border-bottom: 1px dotted white; }
  			
.cookieButton:hover {
  	background: #1A5A60; }

.carousel-fixed-height {
    height: 550px; /* Adjust to your preference */
    overflow: hidden;
}

.carousel-fixed-height img {
    height: 100%;
    object-fit: cover; /* This keeps the image from stretching weirdly */
}

.carousel-caption {
    background: rgba(0, 128, 128, 0.7); /* Your Teal with some transparency */
    border-radius: 5px;
    padding: 10px;
    bottom: 20%;
    font-size: 120%
}

.admin-bar .carousel-fixed-height {
    margin-top: 12px; /* Accounting for WP Admin Bar */
}
/*
  			
.carousel-item {
  	height: calc(100vh - 70px);
  	min-height: 350px;
  	background: no-repeat center center scroll;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover; }
  	
.carousel-caption {
	bottom: 2em;
   	padding-bottom: 0;
	background-color: #39B54A50;
	font-weight: 400;
	font-size: 130%; }
	
.carousel-fixed-height .carousel-item {
	margin-top: 100px;
    height: 200px;
    overflow: hidden;}

.carousel-fixed-height .carousel-item img {
	width: 100%; 
    height: 100%;      
    object-fit: cover;
    object-position: center; }
*/			
.arrow-holder {
	padding: 10px;
	min-height: 70px;
	line-height: 0.9; }
			
.emblem {
	max-height: 50px;
	margin-bottom: 20px; }
			
.pagebanner {
	position: relative;
	height: 450px;
  	width: 100%;
  	background-size: cover;
  	overflow: hidden;
  	margin-top: 5 px; 
  	margin-bottom: -30px; }	
  		
.box:after {
   	content: "";
   	display: block;
   	position:absolute;
   	bottom: -150px;
   	width: 100vw;
   	height: 300px;
   	background: #fff;
   	transform: skewY(1.2deg);
   	transform-origin: bottom left; }
   	
/* Ensure the banner looks good on the individual pages */
.admin-bar .pagebanner {
    margin-top: 12px; /* Accounting for WP Admin Bar */
}

.footbanner {
	float: left;
	position: relative;
	height: 100px;
  	width: 100vw;
  	background-color: white;
  	overflow: hidden; }
		
.footbox:after {
   	content: "";
   	display: block;
   	top: 250px;
   	width: 100vw;
   	height: 300px;
   	background: #1A5A60;
   	transform: skewY(1.5deg);
   	transform-origin: bottom left;
   	overflow: hidden;
   	z-index: 4; }
			
.lead {
	font-weight: 100;
	font-size: 150%;
	color: #1A5A60; }
					
.icon-list {
    list-style: none;
    padding-left: 0; }

.icon-list li {
   	position: relative;
    padding-left: 1.8em;
    margin-bottom: 0.5em;
    line-height: 1.5; }

.icon-list li::before {
    content: "\F280"; 
    font-family: "bootstrap-icons" !important; 
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 	
    -moz-osx-font-smoothing: grayscale; 	
    position: absolute; 
    left: 0;
    top: 0.25em;
    font-size: 0.9em;
    color: #EB1D25; }
    		
.footer-shapes {
    display: flex;            
    align-items: center;
    justify-content: center;
    padding: 15px; }

.footer-shapes .shape {
    width: 0.65cm;
    height: 0.65cm;
    display: inline-block;
    margin: 0 0.03cm;
    vertical-align: middle;
    border: 2px solid #FFFFFF80; }

.footer-shapes .circle {
    border-radius: 50%; }

.footer-shapes .rounded-square {
    border-radius: 7px; }

.footer-shapes .blue {
	background-color: #00AEEF; }
	
.footer-shapes .green {
	background-color: #39B54A; }
	
.footer-shapes .red {
	background-color: #EB1D25;}
			
.info-box {
	padding: 15px;
	margin: 15px;
	background-color: #1A5A60;
	font-size: 150%;
	font-weight: 400;}
			
a .info-box {
	color: white; }

a:hover .info-box {
	color: #39B54A;
	text-decoration: none;
	border:none;}

.info-box-2 {
	padding:15px; 
	margin-top:15px;
	background-color: #1A5A6032;}

 .info-box-2 a {
	font-weight: 350;
	color: #1A5A60; }

.info-box-2 a:hover {
color: white;
}

.person-card {
    transition: transform 0.2s ease-in-out;
}

.person-card:hover {
    transform: translateY(-5px);
}

.text-teal {
    color: #008080; /* Match your specific teal hex */
}

/* Ensure the image is always a consistent aspect ratio */
.card-img-top {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: top;
}

/* Hover effect for the title link */
.hover-underline:hover {
    text-decoration: underline !important;
}
			
		
			
		

		@media (min-width: 576px) {
    		.carousel-fixed-height .carousel-item {
        		height: 250px; } }

		@media (min-width: 768px) {
    		.carousel-fixed-height .carousel-item {
        		height: 350px; } }

		@media (min-width: 992px) {
    		.carousel-fixed-height .carousel-item {
        		height: 550px; } }
        		
        @media only screen and (max-width: 1750px) {
  			.cookieBox {
  				width: 35vw; } }
  			
		@media only screen and (max-width: 1250px) {
  			.cookieBox {
  				width: 45vw; } }
  			
		@media only screen and (max-width: 980px) {
  			.cookieBox {
  				width: 60vw; } }
  			
		@media only screen and (max-width: 725px) {
  			.cookieBox {
  				width: 100vw; } }	
  				
  		@media (max-width: 767.98px) {
    		#display {
        		padding-top: calc(56px + 40px + 10px); } }