/* ==========================================================================
   Reusable Component Styles
   ========================================================================== */

/* Topline Label */
.topline {
	display: block;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-xs);
}

/* Section-specific Heading Colors */
#about-us h2 {
	color: var(--color-primary-green);
}

#what-we-do h2 {
	color: var(--color-primary-red);
}

#contact-us h2 {
	color: var(--color-text-inverse);
}

/* Contact Address Block */
address p {
	line-height: var(--line-height-relaxed);
}

address a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--color-primary-cyan);
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

address a:hover,
address a:focus-visible {
	color: var(--color-primary-cyan);
}

/* Button Styles (for future use) */
.button {
	display: inline-block;
	padding: var(--space-sm) var(--space-lg);
	background-color: var(--color-primary-cyan);
	color: white;
	text-decoration: none;
	border-radius: var(--radius-md);
	font-weight: var(--font-weight-semibold);
	transition: background-color var(--transition-fast);
	border: none;
	cursor: pointer;
}

.button:hover,
.button:focus-visible {
	background-color: var(--color-link-hover);
	text-decoration: none;
}

.button--outline {
	background-color: transparent;
	border: 2px solid var(--color-primary-cyan);
	color: var(--color-primary-cyan);
}

.button--outline:hover,
.button--outline:focus-visible {
	background-color: var(--color-primary-cyan);
	color: white;
}