@import url('assets/css/navbar.css?v=1.1');
@import url('assets/css/modules.css?v=1.5.7');

/* Brand and Colours */
:root {
	/* Brand Palette */
	--clr-primary: #b49b57;      
	--clr-primary-dark: #8c6b3a; 
	--clr-secondary: #1c1c1c;    
	--clr-accent: #f5f5f5;
	
	--clr-secondary-midnight : #003d51;
	--clr-secondary-blue : #aac4d1;
	--clr-secondary-rose : #e9c9bf;
	--clr-secondary-peach : #f2c9a1;
	--clr-secondary-grey : #ededed;
	--clr-dark-grey : #c8c8c8;

	/* Text Colors */
	--clr-text-heading: #111111;
	--clr-text-body: #4a4a4a;
	--clr-text-light: #b4b4b4; /* #787878 */

	/* Backgrounds */
	--clr-bg-white: #ffffff;
	--clr-bg-light: #E6E7E8;  /* fbf9f4 */   
	--clr-bg-dark: #404040; /* 272726 1c1c1c */     
	--clr-bg-darker : rgb(35, 35, 35); /* 272726 1c1c1c */ 

	/* Typography */
	--font-serif: 'Libre Baskerville', "Times New Roman", Georgia, serif;
	/* --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif; */
	--font-sans: 'Roboto', system-ui, -apple-system, sans-serif;

	/* Spacing & Sizing */
	--spacing-section: clamp(4rem, 8vw, 6rem); 
	--spacing-container: 2rem; 
	--gap : 1rem;

	/* UI Elements */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
	--shadow-md: 0 10px 30px -10px rgba(0,0,0,0.08);

	--transition: 0.5s ease;
}

/* Reset */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

body, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd { 
	margin: 0; padding: 0; 
}
p { 
	margin-top: 0; 
	margin-bottom: 1rem;
}
ul { 
	list-style: none;
	margin: 0;
	padding: 0;
}
img { 
	display: block;
	max-width: 100%;
	height: auto;
}
a { 
	text-decoration: none;
	color: inherit;
	transition: var(--transition);
}

.skip-to-content-link { display : none }

body {
	width: 100%;
	overflow-x: hidden; 
	font-family: var(--font-sans);
	font-weight: 300;
	font-size : 1rem;
	line-height: 1.7;
	color: var(--clr-text-body);
	background-color: var(--clr-bg-white);
	letter-spacing: 0.02em; 
	margin: 0;
}

/* Unified Heading Styles */
h1, h2, h3, h4, h5 {
	font-family: var(--font-serif);
	font-weight: 400; 
	color: var(--clr-text-heading);
	line-height: 1.4;
	margin-bottom: 1.5rem;
}

h1 {
	font-size: clamp(2rem, 4vw, 2.8rem);  
}

h2 {
	font-size: clamp(1.75rem, 4vw, 2.8rem);  
}

h4, h5 {
	font-size : 1rem;
}

h5 {
	font-family: var(--font-sans);
}


/* Buttons & Links */
.btn {
	position : relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* padding: 0.875rem 2.5rem; */
	padding: 0.75rem 2.5rem 0.75rem 1.25rem;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 400;
	border-radius: var(--radius-sm);
	transition: var(--transition);
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;

	&:after {
		content: "\f061";
		color: var(--clr-primary);
		font-family: "Font Awesome 6 Pro";
		position: absolute;
		right: 15px;
		left: auto;
		transition: all 0.5s;
		font-weight: 300;
		transition: all 0.5s;
	}

	&:hover {
		&:after {
			right : 10px;
		}
	}

	i {
		transition : all 0.5s;
		margin-left : 1rem;
		margin-right : 0.5rem;
	}

	&.read-more {
		text-transform: uppercase;
		border : 1px solid var(--clr-primary);
		&:hover {
			background : var(--clr-primary);
			color : white;
			&:after {
				color : white;
			}
		}	
	}
}

.btn-primary { 
    background-color: var(--clr-primary); 
	color: white;
	&:after {
		color : white;
	}
    &:hover {
        background-color: var(--clr-primary-dark);
		i {
			margin-left : 1.5rem;
			margin-right : 0;
		}
    }
}
.btn-outline { background-color: transparent;
    border-color: var(--clr-text-heading);
    color: var(--clr-text-heading); 
    &:hover {
        background-color: var(--clr-text-heading); 
		color: white;

		&:after { 
			color : white;
		}
    }
}

.btn-white, .btn-secondary { 
	background-color: white;
	color: var(--clr-secondary);
	&:hover {
		background-color: #f0f0f0;
	}
}

.cta-wrapper {
	padding:4rem;
	display : flex;
	justify-content: center;
	gap : var(--gap);

	a.selected {
		&.btn-outline {
			background-color: var(--clr-primary); 
			color: white;

			&:after { 
				color : white;
				content : "\f063";
			}
		}
	}
}

/*******************************/
/******** Framework ************/
/*******************************/

.container-fluid {
    width: 100%;
    padding-inline: var(--spacing-container);
    margin-right: auto;
    margin-left: auto;
}

.container {
    width: 100%;
    padding-inline: var(--spacing-container);
    margin-right: auto;
    margin-left: auto;
}


@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container{
		padding : 0;
        max-width: 1140px;
    }
}

table {
        width:100%;
        border-collapse:collapse;
        margin-top:12px;

        --bg: #ffffff;
        --muted: #555555;
        --text: #222222;
        --accent: #0b6efd;
        --card: #f9f9f9;
        --border: #e6e6e6;
        --maxw: 900px;
        --pad: 24px;

        caption {
            caption-side : top;
        }

        thead {
            th {
                background:var(--text);
                color:#fff;
                padding:10px;
                border:1px solid var(--border);
                text-align:left
            }
        }
        tbody {
            td {
                background:var(--card);
                padding:10px;
                border:1px solid var(--border);
                vertical-align:top;
            }
            tr:nth-child(even) td { 
                background:#ffffff;
            }
        }
}

form {
	fieldset {
		border : 0;
		padding : 0;
	}
	.form-input, .form-textarea, ._form-title input[type="text"] {
		width: 100%;
		max-width: 100%;
		padding: 0.75rem;
		border: 1px solid #e5e5e5;
		background: #f9f9f9;
		border-radius: var(--radius-sm);
		font-family: var(--font-sans);
		transition: border-color 0.3s ease, background-color 0.3s ease;
		margin-bottom : 1.5rem;
		font-size : 15px;

		&:focus {
			outline: none;
			border-color: var(--clr-primary);
			background: #fff;
		}
	}

	label {
		font-weight : 400;
		color : var(--clr-primary);
	}
}

.small {
	font-style: italic;
	font-size : 0.9rem;
}

.full-width {
	width : 100%;
}


/* Footer */
.footer { 
	padding-top: 8rem;
	padding-bottom: 4rem;
	font-size: 0.9rem; 
	background-color: #111;
	color: var(--clr-text-light);
	position: relative; 
	overflow: hidden;
	z-index: 1;
	margin-bottom: 0; 
	&::before {
		content: '';
		position: absolute;
		bottom: -5%;
		right: -5%;
		width: 60%;
		height: 100%; 
		background-image: url('https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80');
		background-repeat: no-repeat;
		background-position: bottom right;
		background-size: contain;
		opacity: 0.06;
		pointer-events: none;
		z-index: -1;
		filter: grayscale(100%)contrast(120%); 
	}
	.footer-main {
		display: grid;
		gap: 4rem;

		.footer-logo {
			max-width : 220px;
			margin-bottom : 2rem;
		}

		.footer-col h4 {
			font-family: var(--font-serif);
			color: white;
			margin-bottom: 2.5rem;
			font-size: 1.25rem;
			letter-spacing: 0.05em;
		}
		.footer-contact-link {
			display: flex;
			align-items: center;
			gap: 10px;
			color: var(--clr-text-light);
			transition: color 0.3s ease;
			font-size: 0.9rem;
			&:hover {
				color: var(--clr-primary);
			}
			i { 
				color: var(--clr-primary);
				font-size: 0.9rem;
				width: 20px;
				text-align: center;
			}
		}
		.footer-nav-group {
			display: grid;
			grid-template-columns: 1fr;
			gap: 3rem;
			.footer-links {
				li { 
					margin-bottom: 1.2rem;
				}
				a { 
					color: var(--clr-text-light);
					transition: color 0.3s ease;
					&:hover {
						color: var(--clr-primary);
					}
				}
			}
			
			.social-links {
				display: flex;
				gap: 1.5rem;
				margin-top: 0.5rem;
				a { 
					color: var(--clr-text-light);
					transition: all 0.3s ease;
					display: flex;
					align-items: center;
					justify-content: center;
					&:hover {
						color: var(--clr-primary);
						transform: translateY(-3px);
					}	
				}
				i { 
					font-size: 1.4rem;
				}
			}
		}
		
	}
	.accreditation-badge {
		margin-top: 6rem;
		text-align: center;
		img {
			height: 90px;
			width: auto;
			margin: 0 auto;
			filter: grayscale(100%) brightness(1.2);
			opacity: 0.6;
			transition: all 0.3s ease;
			&:hover {
				filter: grayscale(0%) brightness(1);
				opacity: 1; 
			}
		}
	}
	.copyright { 
		margin-top: 4rem;
		margin-left: auto;
		margin-right: auto;
		width: 60%; 
		padding-top: 3rem;
		border-top: 1px solid rgba(255,255,255,0.15); 
		text-align: center;
		color: var(--clr-text-light);
		text-transform: uppercase;
		letter-spacing: 0.2em;
		font-size: 0.75rem;
	}
}
@media ( min-width: 640px) { 
	.footer {
		.footer-main {
			.footer-nav-group { 
				grid-template-columns: repeat(3, 1fr);
				gap: 2rem;
			}
		}
	}
}

@media (min-width: 1024px) { 
	.footer-main { 
		grid-template-columns: 1fr 1.5fr;
		gap: 8rem;
		align-items: start;
	}
}

/* Sticky Favorites */
.sticky-favourites {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 60px;
	height: 60px;
	background-color: white;
	border-radius: 50%;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 999;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	border: 1px solid #f0f0f0;
	&:hover { 
		transform: translateY(-5px);
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
		.favourites-hint {
			opacity : 1;
		}
	}
	i { 
		font-size: 1.5rem;
		color: var(--clr-primary);
	}

	.favourites-hint {
		position : absolute;
		background : white;
		min-width : 300px;
		right : 80px;
		bottom : 0;
		border-radius: var(--radius-md);
		padding : 1rem;
		font-size: 0.85rem;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
		opacity : 0;
		pointer-events: none;
		transition: opacity 0.3s ease, box-shadow 0.3s ease;
		&:after {
			content: '';
			position: absolute;
			right: -10px;
			top: 70%;
			transform: translateY(-50%);
			width: 0;
			height: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			border-left: 10px solid white;
		}
	}

}
.fav-count {
	position: absolute;
	top: -5px;
	right: -5px;
	background-color: var(--clr-primary);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid white;
	transition: transform 0.2s ease;
}

/* form overrides */
._form-title {
	color : var(--clr-primary);
	text-align: center;
	line-height: 1.4!important;
}

.lity { 
	background : rgba(0,0,0,0.7)!important;
}

.lity-wrap {
	backdrop-filter: blur(4px);
}

.lity-content form { 
	input[type="text"] {
		width: 100%;
		max-width: 100%;
		padding: 0.75rem!important;
		border: 1px solid #e5e5e5;
		background: #f9f9f9;
		border-radius: var(--radius-sm);
		font-family: var(--font-sans);
		transition: border-color 0.3s ease, background-color 0.3s ease;
		margin-bottom : 1.5rem;
		font-size : 15px;

		&:focus {
			outline: none;
			border-color: var(--clr-primary);
			background: #fff;
		}
	}

	.field-required {
		color : white!important;
		margin-left : 0.5rem;
	}


	button#_form_6_submit {
		position:relative!important;
		padding: 0.75rem 2.5rem 0.75rem 1.25rem!important;
		text-transform: uppercase!important;
		&:after {
			content: "\f061"!important;
			color: white!important;
			font-family: "Font Awesome 6 Pro"!important;
			position: absolute!important;
			right: 15px!important;
			left: auto!important;
			transition: all 0.5s!important;
			font-weight: 300!important;
			transition: all 0.5s!important;
		}

		&:hover {
			&:after {
				right : 10px!important;
			}
		}
	}
}