/**
 * Alexa Rossi Law - Components Stylesheet
 * Reusable UI components: buttons, cards, icons, etc.
 */

/* Buttons */
.cta-button {
	display:          inline-block;
	background:       var(--color-primary-light);
	color:            var(--color-neutral-dark);
	padding:          1rem 2.5rem;
	text-decoration:  none;
	font-weight:      600;
	font-size:        1.125rem;
	border-radius:    var(--brand-radius);
	transition:       var(--brand-transition);
	border:           var(--brand-border-width) solid var(--color-primary-light);
	cursor:           pointer;
}

.cta-button:hover {
	background:  transparent;
	color:       var(--color-primary-light);
}

/* Service Cards */
.service-card {
	background:     #ffffff;
	padding:        2rem;
	border-radius:  8px;
	border-top:     4px solid var(--color-primary-mid);
	transition:     var(--brand-transition);
}

.service-card:hover {
	transform:   translateY(-4px);
	box-shadow:  0 8px 24px rgba(15, 77, 63, 0.15);
}

.service-card h3 {
	color: var(--color-primary-dark);
}

.service-card p {
	color:   var(--color-neutral-mid);
	margin:  0;
}

/* Icons */
.service-icon {
	width:           60px;
	height:          60px;
	background:      var(--color-primary-light);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1.5rem;
	margin:          0 0 1rem;
}

.contact-icon {
	width:           50px;
	height:          50px;
	background:      var(--color-primary-light);
	color:           var(--color-primary-dark);
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1.25rem;
	font-weight:     700;
}

/* Logo Components */
.logo-text {
	color:           var(--color-neutral-light);
	font-family:     var(--font-primary);
	font-size:       1.5rem;
	font-weight:     600;
	letter-spacing:  var(--letter-spacing-tight);
	text-decoration: none;
}

.logo-text:hover {
	color: var(--color-accent);
}

/* Hero Logo */
.hero-logo {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	margin:          0 0 2rem;
}

.hero-name {
	font-size:       4rem;
	font-weight:     600;
	letter-spacing:  var(--letter-spacing-tight);
	margin:          0;
	line-height:     0.9;
}

.hero-divider {
	display:          flex;
	align-items:      center;
	gap:              1rem;
	margin:           0.5rem 0;
	width:            100%;
	justify-content:  center;
}

.hero-line {
	width:       80px;
	height:      2px;
	background:  var(--color-accent);
}

.hero-dot {
	width:          8px;
	height:         8px;
	border:         2px solid var(--color-accent);
	border-radius:  50%;
	background:     transparent;
}

.hero-subtitle {
	font-size:       2rem;
	font-weight:     600;
	letter-spacing:  0.1em;
	margin:          0;
}

/* Feature Items */
.feature-item {
	text-align: center;
}

.feature-number {
	font-size:    3rem;
	font-family:  var(--font-primary);
	color:        var(--color-primary-light);
	font-weight:  700;
	line-height:  1;
	margin:       0 0 0.5rem;
}

.feature-item h3 {
	color:   var(--color-primary-dark);
	margin:  0 0 0.75rem;
}

.feature-item p {
	color:   var(--color-neutral-mid);
	margin:  0;
}

/* Contact Item Styles */
.contact-item strong {
	color:           var(--color-accent);
	font-size:       0.875rem;
	text-transform:  uppercase;
	letter-spacing:  0.05em;
}

.contact-item a {
	color:            var(--color-neutral-light);
	text-decoration:  none;
	font-size:        1.125rem;
}

.contact-item a:hover {
	color: var(--color-primary-light);
}

/* Phone Links */
.header-phone {
	color:            var(--color-accent);
	text-decoration:  none;
	font-weight:      500;
}

.header-phone:hover {
	color: var(--color-primary-light);
}

/* Header Actions */
.header-actions {
	display:     flex;
	align-items: center;
	gap:         1.5rem;
}

/* Language Switcher */
.lang-switch {
	background:       transparent;
	border:           2px solid var(--color-accent);
	color:            var(--color-accent);
	padding:          0.5rem 1rem;
	border-radius:    var(--brand-radius);
	font-family:      var(--font-secondary);
	font-weight:      600;
	font-size:        0.875rem;
	cursor:           pointer;
	transition:       var(--brand-transition);
	display:          flex;
	align-items:      center;
	gap:              0.5rem;
}

.lang-switch:hover {
	background: var(--color-accent);
	color:      var(--color-primary-dark);
}

.lang-active {
	color:       var(--color-accent);
	font-weight: 700;
}

.lang-switch:hover .lang-active {
	color: var(--color-primary-dark);
}

.lang-inactive {
	opacity: 0.6;
}

.lang-separator {
	color: var(--color-accent);
}

.lang-switch:hover .lang-separator,
.lang-switch:hover .lang-inactive {
	color: var(--color-primary-dark);
}

/* Responsive Components */
@media (max-width: 768px) {
	.hero-name {
		font-size: 2.5rem;
	}
	
	.hero-subtitle {
		font-size: 1.5rem;
	}
	
	.hero-line {
		width: 60px;
	}
	
	.cta-button {
		padding:    0.875rem 2rem;
		font-size:  1rem;
	}
	
	.header-actions {
		flex-direction: column;
		gap:            0.5rem;
	}
	
	.lang-switch {
		padding:    0.4rem 0.75rem;
		font-size:  0.75rem;
	}
}