/* Move variables from :root into the .contact scope so they don't affect the whole page */
.contact {
    /* palette (scoped) */
    --bg: #fafafa;
    --card: #ffffff;
    --muted: #6b7280;
    --accent: #007bff;
    --border: #e6e6e6;
    --shadow: rgba(0,0,0,0.04);
    --max-width: 72rem;

    /* Contact container styles */
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto; /* horizontally centered, no top margin */
    background: var(--bg);
    border-radius: 8px;
    color: #111827;
    box-sizing: border-box;
}

.contact h1 {
	font-size: 1.75rem;
	margin: 0 0 0.75rem 0;
	text-align: left;
}

/* Scoped contact-methods */
.contact .contact-methods {
	margin-top: 1rem;
	display: block;
}

/* changed: stack everything vertically instead of a two-column grid */
.contact .contact-methods-grid {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: stretch;
}

.contact .contact-methods address {
	font-style: normal;
	background: var(--card);
	border: 1px solid var(--border);
	padding: 1rem;
	border-radius: 6px;
	box-shadow: 0 1px 4px var(--shadow);
	color: #111827;
}

.contact .contact-methods address p {
	margin: 0 0 0.6rem 0;
	line-height: 1.4;
}

.contact .contact-methods a {
	color: var(--accent);
	text-decoration: none;
	word-break: break-word;
}

.contact .contact-methods a:hover {
	text-decoration: underline;
}

/* Offices column: stack office cards */
.contact .offices {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.contact .office-card {
	background: var(--card);
	border: 1px solid var(--border);
	padding: 0.85rem;
	border-radius: 6px;
	box-shadow: 0 1px 4px var(--shadow);
}

.contact .office-card h3 {
	margin: 0 0 .35rem 0;
	font-size: 1.2rem;
}

.contact .office-card .address {
	margin-top: .5rem;
	color: var(--muted);
	font-size: 1rem;
}

.contact .office-card .note-small {
	margin-top: .5rem;
	color: var(--muted);
	font-size: 1rem;
}

/* Postal columns (head office / branch) - scoped */
.contact .postal-columns {
	display:flex;
	gap:1.5rem;
	margin-top:.75rem;
	flex-wrap:wrap;
}

.contact .postal-column {
	flex:1;
	min-width:200px;
	background: var(--card);
	padding: 0.8rem;
	border-radius:6px;
	border: 1px solid var(--border);
	box-shadow: 0 1px 4px var(--shadow);
}

.contact .postal-column strong {
	display:block;
	margin-bottom:0.5rem;
	font-weight:600;
	color:#0f172a;
}

/* Scoped action button/link - renamed to .contact-btn */
.contact .contact-btn {
	display:inline-block;
	padding:0.5rem 0.75rem;
	background: var(--accent);
	color: #fff;
	border-radius:6px;
	text-decoration:none;
	font-weight:600;
	border: none;
	cursor: pointer;
	margin-top:0.75rem;
}

.contact .contact-btn:hover {
	background:#0056b3;
}

/* Contact guidance - scoped */
.contact .contact-guidance {
	margin-top:1.25rem;
}

.contact .contact-guidance h2 {
	font-size:1.125rem;
	margin:0 0 0.5rem 0;
}

.contact .contact-guidance ul {
	margin:0.5rem 0 0 1.25rem;
	padding:0;
	color: var(--muted);
}

.contact .contact-guidance li {
	margin-bottom:0.45rem;
}

/* Note - scoped */
.contact .note {
	display:block;
	margin-top:0.75rem;
	font-size:0.95rem;
	color: var(--muted);
	font-style: italic;
}

/* Copied from home.css for use in directions link */
.directions{
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  margin-left:.5rem;
  font-size:.92rem;
  display:inline-block;
  transition:transform .18s ease, text-decoration .18s ease;
  will-change:transform;
}
.directions:hover{
  transform:translateY(-2px) scale(1.03);
  text-decoration:underline;
}


/* Responsive: remove grid-specific change; keep general compacting */
@media (max-width: 640px) {
	/* nothing needed for .contact-methods-grid; it already stacks */
	.contact .postal-columns {
		flex-direction: column;
	}
	.contact {
		padding: 1rem;
	}
}