/* =====================================================================
   Jansz Clan – site stylesheet (replaces CoffeeCup / Foundation CSS)
   Loaded BEFORE jansz_exported/css/main.css, which keeps your colors,
   boxes and backgrounds exactly as they were.
   ===================================================================== */

/* ---------- Base ---------- */
html { box-sizing: border-box; font-size: 100%; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body { margin: 0 auto; padding: 0; position: relative; min-height: 100vh;
       background: #fefefe; color: #0a0a0a; line-height: 1.5;
       font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
div, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, blockquote { margin: 0; padding: 0; }
p { margin-bottom: 1rem; font-size: inherit; line-height: 1.6; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.4; margin-bottom: .5rem; }
a { color: #1779ba; text-decoration: none; cursor: pointer; }
a:hover, a:focus { color: #1468a0; }
img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; border-style: none; }
hr { clear: both; max-width: 75rem; height: 0; margin: 1.25rem auto; border: 0; border-bottom: 1px solid #cacaca; }
video { max-width: 100%; }
main { display: block; }

/* ---------- CoffeeCup building blocks still used by the pages ---------- */
.container { min-width: 10px; }
.responsive-picture { display: block; width: 100%; max-width: 200px; overflow: hidden; }
.responsive-picture picture { display: block; max-width: none; line-height: 0; }
.responsive-picture img { width: 100%; height: 100%; }
a.glyph, span.glyph { display: block; text-decoration: none; }

/* Photo grid: rows of 4 thumbnails (1 per row on phones) */
.row { max-width: 75rem; margin-left: auto; margin-right: auto; }
.row::before, .row::after { content: ' '; display: table; }
.row::after { clear: both; }
.columns { float: left; width: 100%; padding-left: .625rem; padding-right: .625rem; }
@media screen and (min-width: 40em) {
  .columns { padding-left: .9375rem; padding-right: .9375rem; }
  .medium-3 { width: 25%; }
}

/* Two / three / four column layouts */
.container.sd-two-cols, .container.sd-three-cols, .container.sd-four-cols {
  display: grid; max-width: 75rem; margin-left: auto; margin-right: auto; padding-left: .625rem; padding-right: .625rem; }
@media screen and (min-width: 40em) {
  .container.sd-two-cols, .container.sd-three-cols, .container.sd-four-cols { padding-left: .9375rem; padding-right: .9375rem; grid-column-gap: 1.875rem; }
  .container.sd-two-cols { grid-template-columns: 1fr 1fr; }
  .container.sd-three-cols { grid-template-columns: 1fr 1fr 1fr; }
  .container.sd-four-cols { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
}
@media screen and (min-width: 64em) {
  .container.sd-four-cols { grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; }
}

/* ---------- Page heading ---------- */
h1.page-title { font-family: 'Abril Fatface', Georgia, serif; font-weight: normal; text-align: center;
                font-size: 1.9rem; line-height: 1.25; margin: .6em auto .4em; padding: 0 16px; max-width: 1000px; }
@media (max-width: 640px) { h1.page-title { font-size: 1.45rem; } }

/* ---------- Menu ---------- */
.site-nav { position: relative; z-index: 10; margin: 0 10px; }
.menu-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%;
               padding: 8px 20px; border: 0; background: rgba(200, 215, 202, .5); cursor: pointer;
               font-family: 'Abril Fatface', Georgia, serif; font-size: 1.125rem; color: #184d1b; }
.menu-toggle .bars { font-size: 1.4rem; line-height: 1; }
.site-menu, .site-menu ul { list-style: none; margin: 0; padding: 0; }
.site-menu a { display: block; padding: .7rem 1rem; line-height: 1;
               font-family: 'Abril Fatface', Georgia, serif; color: #0a2f0c; }
.site-menu a:hover, .site-menu a:focus { color: #184d1b; text-decoration: underline; }
.site-menu ul a { color: #0e1f85; padding-left: 36px; }
.site-menu .has-sub > a::after { content: ''; display: inline-block; margin-left: 6px; vertical-align: middle;
               border: 5px solid transparent; border-top-color: #0a2f0c; border-bottom-width: 0; }

/* Phones: menu hidden until MENU is tapped; sub-menus open on tap */
@media screen and (max-width: 39.99em) {
  .site-menu { display: none; background: rgba(254, 254, 254, .92); }
  .site-nav.open .site-menu { display: block; }
  .site-menu ul { display: none; }
  .site-menu li.open > ul { display: block; }
}

/* Tablets & computers: one row, drop-downs on hover or tap */
@media screen and (min-width: 40em) {
  .menu-toggle { display: none; }
  .site-menu { display: flex; flex-wrap: wrap; }
  .site-menu > li { position: relative; }
  .site-menu ul { display: none; position: absolute; top: 100%; left: 0; min-width: 200px;
                  background: #fefefe; border: 1px solid #cacaca; box-shadow: 0 4px 10px rgba(0,0,0,.12); }
  .site-menu ul a { padding-left: 36px; padding-right: 1rem; white-space: nowrap; }
  .site-menu li:hover > ul, .site-menu li:focus-within > ul, .site-menu li.open > ul { display: block; }
  .site-menu > li:last-child > ul, .site-menu > li:nth-last-child(2) > ul { left: auto; right: 0; }
}
@media screen and (min-width: 64em) {
  .site-nav { padding-left: 20px; background-color: rgba(200, 215, 202, .3); }
}