/* ----------------------------------------------------------------

	Custom CSS

	Add all your Custom Styled CSS here for New Styles or

	Overwriting Default Theme Styles for Better Handling Updates

-----------------------------------------------------------------*/

/* ========================================
   CSS Variables - Spacing Scale
   ======================================== */

:root {
	/* Spacing Scale */
	--space-1: 0.25rem;  /* 4px */
	--space-2: 0.5rem;   /* 8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-5: 1.25rem;  /* 20px */
	--space-6: 1.5rem;   /* 24px */
	--space-8: 2rem;     /* 32px */
	--space-10: 2.5rem;  /* 40px */
	--space-12: 3rem;    /* 48px */
	--space-16: 4rem;    /* 64px */
	
	/* Focus States */
	--focus-outline: 3px solid #543456;
	--focus-offset: 2px;
}

/* ========================================
   Responsive Images (Global)
   ======================================== */

/* Default: agent images in black & white */
[data-firebase-target="homepageProfessionals"] .card-img-top {
	filter: grayscale(100%);
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

/* On hover/focus: show colored image (and keep existing zoom/shadow) */
[data-firebase-target="homepageProfessionals"] .card:hover .card-img-top,
[data-firebase-target="homepageProfessionals"] .card:focus-within .card-img-top {
	filter: grayscale(0%);
	transform: scale(1.04);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}


img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Prevent horizontal scroll on mobile */
body {
	overflow-x: hidden;
}

#wrapper {
	overflow-x: hidden;
}

/* ========================================
   Typography Scale
   ======================================== */

/* Heading Styles with Responsive Typography */
h1.heading-primary,
h2.heading-primary {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 400;
	line-height: 1.2;
	max-width: 700px;
}

h3.heading-secondary {
	font-size: clamp(1.25rem, 2.5vw, 1.5rem);
	line-height: 1;
}

/* Base paragraph typography */
p {
	font-size: clamp(1rem, 1.2vw, 1.125rem);
	line-height: 1.6;
	max-width: 70ch;
}

/* Reasons Section Typography */
.reasons-text {
	font-size: clamp(1rem, 2vw, 1.3125rem);
	line-height: 2;
	color: #000;
	max-width: 70ch;
}

/* Paragraphs in containers inherit container width */
.container p,
.container-content p {
	max-width: 100%;
}

/* ========================================
   Spacing Scale & Utilities
   ======================================== */

/* Container max-widths */
.container-narrow {
	max-width: 700px;
}

.container-content {
	max-width: 1000px;
}

/* Section spacing using CSS variables */
.section-spacing {
	margin-top: var(--space-12);
}

.section-spacing-sm {
	margin-top: var(--space-5);
}

/* ========================================
   Component Classes
   ======================================== */

/* Benefit Feature Component */
.benefit-feature {
	display: flex;
	flex-direction: column;
}

.benefit-feature__image,
.benefit-image {
	display: inline-block;
}

/* Logo Preview Background */
.logo-preview-bg {
	background: #666;
}

/* ========================================
   Accessibility - Skip Link
   ======================================== */

.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #543456;
	color: #fff;
	padding: var(--space-2) var(--space-4);
	text-decoration: none;
	z-index: 100;
}

.skip-link:focus {
	top: 0;
}

/* ========================================
   Accessibility - Focus States
   ======================================== */

/* Focus styles for interactive elements */
a:focus-visible,
button:focus-visible {
	outline: var(--focus-outline);
	outline-offset: var(--focus-offset);
}

/* Remove outline for mouse users */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

/* Phone number links */
a[href^="tel:"] {
	text-decoration: underline;
}

a[href^="tel:"]:hover,
a[href^="tel:"]:focus {
	text-decoration: none;
}

/* ========================================
   Responsive Breakpoints
   ======================================== */

@media only screen and (max-width: 768px) {
	/* Typography adjustments */
	h1.heading-primary,
	h2.heading-primary {
		max-width: 100%;
	}

	.reasons-text {
		line-height: 1.75;
		max-width: 100%;
	}

	/* Spacing adjustments */
	.section-spacing {
		margin-top: var(--space-8);
	}

	.section-spacing-sm {
		margin-top: var(--space-4);
	}

	/* Container adjustments */
	.container-content {
		max-width: 100%;
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}

	/* Text overflow prevention */
	p {
		max-width: 100%;
		word-wrap: break-word;
	}
}

/* ========================================
   Mobile Utilities
   ======================================== */

.mobile {
	display: none;
}

.hideonmobile {
	display: inline !important;
}

.linebreakonmobile {
	display: inline !important;
}

@media only screen and (max-width: 600px) {
	.mobile {
		display: block !important;
	}

	.hideonmobile {
		display: none !important;
	}

	.linebreakonmobile {
		display: block !important;
	}
}

/* ========================================
   Featured Professionals Grid (5 in a row)
   ======================================== */

@media (min-width: 992px) {
	.col-md-lg-1-5th {
		flex: 0 0 20%;
		max-width: 20%;
	}
}

/* Featured Professionals section & heading */
.featured-professionals-section {
	background: #ffffff;
}

.featured-professionals-section h2.ul {
	font-size: 1.5rem;
	font-weight: 600;
	text-align: left;
	margin-bottom: 10px;
	padding-bottom: 0;
	border-bottom: 1px solid #ccc;
	border-bottom: 1px solid var(--underline, #ccc);
	min-width: 100%;
}

/* Featured Professionals cards */
[data-firebase-target="homepageProfessionals"] .card {
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	border-radius: 0.5rem;
	background: #ffffff;
	overflow: hidden;
}

[data-firebase-target="homepageProfessionals"] .card .img {
	display: flex;
	justify-content: center;
	align-items: center;
}

[data-firebase-target="homepageProfessionals"] .card-img-top {
	display: block;
	margin: 0 auto var(--space-4, 1rem);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-firebase-target="homepageProfessionals"] .card:hover .card-img-top,
[data-firebase-target="homepageProfessionals"] .card:focus-within .card-img-top {
	transform: scale(1.04);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

[data-firebase-target="homepageProfessionals"] .card-body {
	padding-top: 0.25rem;
	text-align: left;
}

[data-firebase-target="homepageProfessionals"] .card-body .name.card-title {
	font-weight: 700;
	margin-bottom: 0.15rem;
}

/* Tighten spacing around company line on all viewports */
[data-firebase-target="homepageProfessionals"] p.account.card-text {
	margin-top: 0;
	margin-bottom: 0;
}

@media only screen and (max-width: 768px) {
	/* Mobile: circular avatar-style images */
	[data-firebase-target="homepageProfessionals"] .card-img-top {
		width: 140px;
		height: 140px;
		border-radius: 50%;
		object-fit: cover;
		margin-top: 1rem;
	}

	/* Mobile: center-align agent text */
	[data-firebase-target="homepageProfessionals"] .card-body {
		text-align: center;
	}
}