/* The Catholic Community of Cape Vincent, Rosiere and Chaumont
   ------------------------------------------------------------
   Colours, type and proportions carried over from the previous
   Joomla/Nicepage site; layout is plain CSS grid and flexbox. */

:root {
  --blue:      #478ac9;
  --blue-dark: #3a71a6;
  --ink:       #111111;
  --grey-bg:   #f2f2f2;
  --rule:      #d8d8d8;
  --footer-bg: #333333;
  --wrap:      1140px;
  --gutter:    30px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 18px/1.6 "Open Sans", Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 54px 0; }
.section--grey { background: var(--grey-bg); }
.center { text-align: center; }

/* ---------- site navigation ---------------------------------------- */

.site-nav { border-bottom: 1px solid var(--rule); }

.site-nav ul {
  list-style: none;
  margin: 0 auto;
  padding: 16px var(--gutter);
  max-width: var(--wrap);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.site-nav a {
  display: block;
  padding: 10px 20px;
  font-size: 16px;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible { color: var(--blue-dark); border-bottom-color: var(--blue-dark); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue); }

/* ---------- page headings ------------------------------------------ */

.page-hero {
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 420px;
  display: flex;
  align-items: center;
}

.page-hero h1 { font-size: 72px; }
.page-hero--staff { background-image: url("../images/staff-hero.jpg"); }
.page-hero--history { background-image: url("../images/history-hero.jpg"); }

.site-title { font-size: 48px; text-align: center; text-wrap: balance; }
.section-title { font-size: 32px; margin-bottom: 18px; }

/* ---------- home ---------------------------------------------------- */

.churches { display: grid; grid-template-columns: repeat(3, 1fr); }
.churches img { width: 100%; height: 364px; object-fit: cover; }

.addresses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; text-align: center; }
.addresses b { display: block; font-weight: 700; }

.schedule { margin-top: 44px; text-align: center; }
.schedule b { display: block; font-weight: 700; margin-bottom: 6px; }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.feature-photos { display: grid; gap: 16px; }
.feature-photos--3 { grid-template-columns: 1fr 1fr; }
.feature-photos--3 img:first-child { grid-column: 1 / -1; }
.feature-photos img { width: 100%; height: 100%; object-fit: cover; max-height: 300px; }

/* ---------- history -------------------------------------------------- */

.history-entry { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: start; }
.history-entry img { width: 100%; }
.history-body { display: grid; gap: 18px; max-width: 72ch; }
.history-body p { text-align: left; }

.divider { height: 80px; background: var(--grey-bg); }

/* ---------- staff ------------------------------------------------------ */

.staff-list { display: grid; gap: 30px; max-width: 78ch; }
.staff-list h2 { font-size: 24px; margin-bottom: 8px; }
.staff-list dt { font-weight: 700; }
.staff-block { display: grid; gap: 6px; }

/* ---------- footer ------------------------------------------------------ */

.site-footer {
  background: var(--footer-bg);
  color: #fff;
  text-align: center;
  padding: 44px var(--gutter);
}

.site-footer a { color: #9cc4e8; }
.site-footer a:hover { color: #fff; }

/* ---------- narrow screens ----------------------------------------------- */

@media (max-width: 900px) {
  body { font-size: 17px; }

  .churches,
  .addresses,
  .feature,
  .history-entry { grid-template-columns: 1fr; }

  .history-entry img { max-width: 320px; }
  .churches img { height: 260px; }

  .page-hero { min-height: 260px; }
  .page-hero h1 { font-size: 40px; }
  .site-title { font-size: 32px; }
  .section-title { font-size: 26px; }
}

@media (max-width: 575px) {
  :root { --gutter: 20px; }
  .page-hero h1 { font-size: 32px; }
  .site-nav a { padding: 8px 12px; }
}