/*
  Page frame of the Akaroa Civic Trust templates: header, menu bar, panel, footer.
  Linked by every template after trust.css (which still supplies colours, fonts and the
  .page_heading_* classes). Rules for page CONTENT (Word-pasted tables, inline sizes) are
  in responsive.css, which FastPage adds after this file.

  The header photo strip (splice_650.jpg) is 650px wide and the logo 150px: at 800px they
  are sharp, and the panel stops at 960px, which stretches them 1.2 times. Going wider
  than that makes the strip visibly soft.
*/

:root {
  --panel-max: 960px;
  /* 12px on a small tablet up to 14px on a wide panel */
  --fs: clamp(12px, 0.6vw + 6.5px, 14px);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; }

/* the panel: fluid up to --panel-max, centred, as tall as the window so the footer sits low */
.civictrust {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--panel-max);
  min-height: calc(100vh - 16px);
  margin: 8px auto;
  font-size: var(--fs);
}
.civictrust p, .civictrust table, .civictrust td, .civictrust th { font-size: inherit; }
.civictrust .page_heading_01 { font-size: 1em; }
.civictrust .page_heading_02 { font-size: .92em; }
.civictrust .page_heading_03 { font-size: 1.27em; }

/* header: logo and strip scale together as one picture */
.site-header {
  display: grid;
  grid-template-columns: minmax(0, 150fr) minmax(0, 650fr);
}
.site-header img { display: block; width: 100%; height: auto; }

/* menu bar: the links share the whole bar */
.menu, .menu a:link, .menu a:visited { font-size: max(13px, var(--fs)); }
.menu { background: #333333; }
.menu ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.menu li { flex: 1 1 auto; text-align: center; }
.menu a:link, .menu a:visited { display: block; padding: 3px 8px; }

.page-body { flex: 1 0 auto; box-sizing: border-box; min-width: 0; padding: 6px 3%; }
.page-body--flush { padding-left: 0; padding-right: 0; }
.page-body--centre { text-align: center; }
.page-body--centre table { margin-left: auto; margin-right: auto; }
.page-body--indent { padding-top: 1.4em; }

.site-footer { margin-top: auto; padding: 0 3% 1px; }
.site-footer p { margin: 0; padding: 1.4em 0 .9em; border-top: 1px solid #929090; text-align: center; }

/* Edit Mode wraps each region in a small table; keep the regions full width */
.civictrust > table.mike, .page-body > table.mike { width: 100%; }

/* building pages */
.building-nav {
  display: grid;
  grid-template-columns: 28fr 72fr;
  margin: .9em 0 1.2em;
  padding: .3em 0 1.2em;
  border-bottom: 1px solid #929090;
  text-align: center;
}
.building-nav--foot { margin: 1.2em 0 .9em; padding: 1.2em 0 .3em; border-bottom: 0; border-top: 1px solid #929090; }
.building-layout {
  display: grid;
  grid-template-columns: clamp(200px, 24%, 240px) minmax(0, 1fr);
}
.building-facts { padding: 10px; background: #cccccc; }
.civictrust .building-facts h1 { margin: 0 0 1.4em; font-size: 1em; }
.civictrust .building-facts p { margin: 0 0 1.6em; }
.building-facts dl { margin: 0; }
.building-facts dt, .building-facts dd { display: inline; margin: 0; }
.building-text { box-sizing: border-box; min-width: 0; padding: 0 clamp(12px, 4%, 40px) 1.5em; }

/* the printable membership form: its own sheet, no panel */
.form-sheet { box-sizing: border-box; max-width: 800px; margin: 0 auto; padding: 1px; font-size: 12px; }
.form-sheet p { font-size: inherit; margin: 1em 0; }
.form-head { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: start; }
.form-head img { display: block; width: 100%; height: auto; }
.form-title { grid-column: 1 / -1; margin: 1em 0; font-size: 1em; text-align: center; }
.form-body { display: grid; grid-template-columns: minmax(0, 71fr) minmax(0, 29fr); column-gap: 8px; }
.form-aside { padding-top: 5em; text-align: center; }
.form-fees { max-width: 500px; margin: 2em 0; }
.form-fees div { display: grid; grid-template-columns: 53fr 47fr; padding-bottom: 2.4em; }

@media (max-width: 860px) {
  body { margin: 0; }
  .civictrust { margin: 0; min-height: 100vh; border-width: 0; }
}

@media (max-width: 740px) {
  :root { --fs: 15px; }
  .menu ul { padding: 4px 2px; }
  .menu li { flex: 0 1 auto; }
  .menu a:link, .menu a:visited { padding: 9px 11px; font-size: 16px; }
  .page-body { padding: 6px 2.5%; }
  .page-body--indent { padding-top: .6em; }
  .building-nav { grid-template-columns: minmax(0, 1fr); row-gap: .6em; }
  .building-layout { grid-template-columns: minmax(0, 1fr); }
  .building-text { padding-top: 1em; }
  .form-body { grid-template-columns: minmax(0, 1fr); }
  .form-sheet { font-size: 15px; }
  .form-aside { padding-top: 0; }
}

/* A4 is under 740px wide at screen resolution: print must not take the phone layout */
@media print {
  .form-sheet { max-width: none; font-size: 12px; }
  .form-body { grid-template-columns: 71fr 29fr; }
  .form-aside { padding-top: 5em; }
}