/* Shared identity for every public page. Page styles contain only page layouts. */
:root {
  --brand-primary: #48684d;
  --brand-primary-hover: #38533c;
  --brand-primary-soft: #eff4ef;
  --ink: #1d242f;
  --body: #111827;
  --muted: #6b7280;
  --soft: #f3f4f6;
  --line: #e2e8f0;
  --blue: var(--brand-primary);
  --blue-soft: var(--brand-primary-soft);
  --accent-hover: var(--brand-primary-hover);
  --home-accent: var(--brand-primary);
  --home-accent-hover: var(--brand-primary-hover);
  --home-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-line: 0 0 0 1px var(--line);
  --shadow-card: var(--home-shadow);
  --header: 64px;
}
body { font-family: Dana, Tahoma, Arial, sans-serif; }
:focus-visible { outline-color: var(--brand-primary-hover); }
.icon { stroke-width: 1.6; }

/* Logo, centered navigation, and contact action are identical on all routes. */
#main-header {
  height: var(--header);
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--home-shadow);
  backdrop-filter: none;
}
#main-header .header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
}
#main-header .logo, .main-footer .footer-logo {
  gap: 10px;
  color: var(--ink);
  font-size: 1rem;
}
#main-header .logo:hover { opacity: 1; color: var(--brand-primary-hover); }
.brand-mark { display: block; width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; }
#main-nav ul { display: flex; align-items: center; justify-content: center; gap: 4px; }
#main-nav a, #mobile-menu a, .header-contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 10px;
  color: var(--ink);
  border-radius: 6px;
  font-size: .86rem;
  font-weight: 500;
}
#main-header :is(#main-nav, #mobile-menu) a:hover { color: var(--ink); background: var(--soft); }
#main-header :is(#main-nav, #mobile-menu) a:is([aria-current="page"], .active) {
  color: var(--brand-primary);
  background: var(--soft);
}
#main-header .header-contact {
  padding-inline: 16px;
  color: #fff !important;
  background: var(--brand-primary) !important;
  font-weight: 700;
}
#main-header .header-contact:hover { background: var(--brand-primary-hover) !important; }
#main-header .header-contact[aria-current="page"] {
  color: var(--brand-primary) !important;
  background: var(--brand-primary-soft) !important;
}
#hamburger { border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
#mobile-menu { border-bottom: 1px solid var(--line); box-shadow: var(--home-shadow); }

/* Footer uses the same brand colors and spacing on every page. */
.main-footer { padding-top: 64px; background: var(--soft); border-color: var(--line); }
.footer-grid { gap: 32px; }
.footer-col :is(p, a) { color: var(--muted); }
.footer-col :is(h2, h4) { color: var(--ink); }
.footer-col a:hover { color: var(--brand-primary-hover); }
.footer-col address .icon { color: var(--brand-primary); }
.footer-bottom { border-color: var(--line); }
.footer-bottom p { color: var(--muted); }

@media (max-width: 1100px) {
  #main-nav a { padding-inline: 7px; font-size: .8rem; }
}
@media (max-width: 768px) {
  #main-header .header-inner { display: flex; justify-content: space-between; }
  #main-nav, #main-header .header-contact { display: none; }
  #hamburger { display: block; }
  #mobile-menu a { justify-content: flex-start; width: 100%; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}