/**
 * Alexa Rossi Law - Layout Stylesheet
 * Grid systems, sections, spacing, and structural elements
 */

:root {
	--max-width:        1200px;
	--section-padding:  4rem 1.5rem;
	--grid-gap:         2rem;
}

/* CSS Reset */
* {
	margin:      0;
	padding:     0;
	box-sizing:  border-box;
}

body {
	font-family:  var(--font-secondary);
	color:        var(--color-neutral-dark);
	line-height:  1.6;
}

/* Header Layout */
header {
	background:  var(--color-primary-dark);
	padding:     1rem 1.5rem;
	position:    sticky;
	top:         0;
	z-index:     1000;
	box-shadow:  0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-content {
	max-width:        var(--max-width);
	margin:           0 auto;
	display:          flex;
	justify-content:  space-between;
	align-items:      center;
}

/* Section Layout */
section {
	padding: var(--section-padding);
}

.services-content,
.why-choose-content,
.contact-content {
	max-width:  var(--max-width);
	margin:     0 auto;
}

/* Grid Systems */
.services-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap:                   var(--grid-gap);
	margin:                3rem 0 0;
}

.features-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap:                   var(--grid-gap);
	margin:                3rem 0 0;
}

/* Contact Details Layout */
.contact-details {
	display:          flex;
	flex-wrap:        wrap;
	justify-content:  center;
	gap:              3rem;
	margin:           3rem 0 0;
}

.contact-item {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             0.5rem;
}

/* Footer Layout */
footer {
	background:  var(--color-neutral-dark);
	color:       var(--color-neutral-mid);
	padding:     2rem 1.5rem;
	text-align:  center;
}

.footer-disclaimer {
	max-width:   var(--max-width);
	margin:      1rem auto 0;
	padding:     1rem 0 0;
	border-top:  1px solid rgba(99, 99, 99, 0.3);
}

/* Responsive Layout */
@media (max-width: 768px) {
	:root {
		--section-padding: 3rem 1.5rem;
		--grid-gap:        1.5rem;
	}
	
	.header-content {
		flex-direction: column;
		gap:            0.5rem;
	}
	
	.services-grid,
	.features-grid {
		grid-template-columns: 1fr;
	}
	
	.contact-details {
		flex-direction: column;
		gap:            2rem;
	}
}