/* === styles.css === */

/* Sticky footer structure */
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

/* Page content area expands to fill space above footer */
.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  align-items: center;      /* vertically center logo and title */
  justify-content: center;  /* center header content horizontally */
  gap: 1rem;                /* space between logo and title */
  flex-wrap: wrap;          /* allows wrapping on small screens */
  background-color: #d0e7ff; /* light gray for contrast */
}

header .logo {
  max-height: 60px;        /* keeps logo from being too tall */
  width: auto;             /* maintain aspect ratio */
}

/* Header & footer styling */
header, footer {
  color: white;
  text-align: center;
  padding: 1rem;
}

footer {
  background-color: #e0e0e0;
  margin-top: auto; /* pushes footer down if content is short */
  font-size: 0.9em;
  color: #333;
}

/* Intro & Outro sections */
.intro,
.outro {
  max-width: 800px;
  margin: 1rem auto;
  padding: 1rem;
  text-wrap: balance;
  text-align: center;
  background: white;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.intro h2,
.outro h2 {
  margin-bottom: 0.5rem;
  color: #333;
}

h3 {
  line-height: 1.1;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom:1px dotted #000;
}

/* === Responsive Grid === */
.container {
  display: grid;
  grid-template-columns: 1fr; /* mobile-first: 1 column */
  gap: 1rem;
  padding: 1rem;
}

.column {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* 3-column layout on wider screens */
@media (min-width: 600px) {
  .container {
	grid-template-columns: repeat(3, 1fr);
  }
}

a {
  color:#000;
  text-decoration:none;
  outline:none;
  border-bottom:1px dotted #000;
  }

a.tel {
  color:#000;
  border-bottom:none !important;
  }