/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* Copyright (c) 2023-2025 TwinLUG
 * All rights reserved.
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* structure */

  body { 
    margin: 0; padding: 0;
    background-color: #8eb6dc;
    background-image: url('/motif/bricks-ltblue-60.jpg'); 
    font-family: 'Helvetica Neue', sans-serif;
    line-height: 1.3;
    color: black;
  }
  p { font-family: 'Arial', sans-serif; }
  a { color: #1470af; }
  a:visited { color: #1470af; }

  div.envelope {
    background-color: white;
    margin: 1em 2em;
  }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* header :: logo, navigation links, socials */

  div.header {
    padding: 1em 2em;
    background: linear-gradient(#8eb6dc, white);
    display: flex;
    align-items: center;
  }
  div.logo {
    margin-left: 0;
    margin-right: auto;
  }
  div.nav_group {
    position: relative;
    margin-left: auto;
    margin-right: 0;
  }
  div.hamburger { display: none; }
  div.nav li { font-size: 133%; }
  div.nav a { color: black; padding: 5px; }

  div.nav li:has(a.cloaked) { display: none; }
  div.nav li:has(a.cloaked.current) { display: inline; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* content */

  div.content { padding: 1em 2em; }
  div.content > h1 { margin-top: 0px; }

  div.content div.frame { text-align: center; }
  div.content img.framed { border-radius: 1ex; }

  div.multi_column + div.multi_column { margin-top: 2em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* plates */

  div.plates {
    margin: 4ex auto;
    width: min-content;
  }
  div.plates div.event {
    margin: 2ex 1em;
  }
  div.calendar {
    position: relative;
    width: min-content;
  }
  div.calendar div.date {
    position: absolute; top: 1ex; right: 1ex;
    border-top-right-radius: 1ex;
    padding: 1ex;
    width: 3em;
    background: white;
  }
  div.calendar div.date div.month {
    text-align: center;
    line-height: 100%;
  }
  div.calendar div.date div.day {
    text-align: center;
    font-size: 200%;
    line-height: 100%;
  }
  div.plates div.event:hover img {
    transform: rotate(-2deg);
  }
  div.plates div.name {
    margin-top: 0.5ex;
  }
  div.plates div.name a {
    text-decoration: none;
  }
  div.plates div.time {
    margin-top: 0.5ex;
    font-size: 75%;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* bricks */

  div.bricks div.event {
    display: flex;
    margin: 2ex 2em;
  }
  div.bricks div.event > div {
    margin: 1ex 1em;
  }
  div.bricks h2 {
    margin-top: 0px;
  }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* gallery */

  div.gallery { text-align: center; }
  div.gallery img { margin: 1ex 1em; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* glossary */

  div.glossary p { display: flex; margin: 0px; padding: 1ex 2em; }
  div.glossary p:hover { background: #d5e4f2; }
  div.glossary p b { flex: 0 4em; margin-right: 1em; text-align: right; }
  div.glossary p span { flex: 1; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* trivia */

  div.trivia p { display: flex; margin: 0px; padding: 1ex 2em; }
  div.trivia p:hover { background: #d5e4f2; }
  div.trivia p span { flex: 1; }
  div.trivia p span.question { text-align: right; }
  div.trivia p span.answer { margin-left: 2em; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* footer */

  div.footer {
    margin: 1em 2em;
    padding: 1em 2em;
    background: #1470af;
    color: white;
  }
  div.footer a { color: white; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* navigation lists, header and footer */

  ul.nav {
    margin: 0;
    padding: 0;
  }
  ul.nav li {
    list-style: none;
    margin: 0.33em;
    color: #1470af;
  }
  ul.nav a { text-decoration: none; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* everything else */

  h1, h2 { color: #1470af; }
  h1 { text-align: center; }
  // p { text-align: justify; }
  ul li { margin: 0.5ex; }
  a img { border: none; }

/* add some extra margin between a paragraph and the next h2 */
  p + h2 { margin-top: 2ex; }

/* center align text */
  .center { text-align: center; }
  .center p { text-align: center; }

/* right align text */
  .right { text-align: right; }

/* wp styles for micropolis */
  .aligncenter { text-align: center; }
  .wp-caption-text { text-align: center; }
  .caption { font-style: italic; }
  .nobr { white-space: nowrap; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* wide screen */

@media only screen and (min-width: 1024px) {
  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* structure */

  div.envelope { border-top-right-radius: 2ex; }
  div.header { border-top-right-radius: 2ex; }
  div.footer { border-bottom-right-radius: 2ex; }

  .narrow_only { display: none; }

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

  div.nav { display: flex; }
  ul.nav { display: flex; }
  div.nav a.current { border-bottom: 1px solid; }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* enable multi-column layout */

  div.multi_column { display: flex; }
  div.multi_column.even div.column { width: 100px; flex-grow: 1; }
  div.multi_column.reverse { flex-direction: row-reverse; }
  div.column { margin: 0px 2em; }
  div.column > *:first-child { margin-top: 0px; }
  div.multi_column div.frame { padding-top: 3em; }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* upcoming events */

  div.plates { display: flex; }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* narrow screen */

@media only screen and (max-width: 1023px) {
  div.envelope { margin: 0; }
  div.footer { margin: 0; }

  .wide_only { display: none; }
  img { max-width: 100%; }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* hamburger menu */

  div.hamburger {
    display: block;
    margin-left: auto;
    margin-right: 0;
    font-size: 300%;
  }
  div.nav {
    display: none;
    position: absolute;
    top: 4em; right: 0;
    width: max-content;
    border: 1px solid;
    background: white;
  }
  div.nav.open {
    display: block;
  }
  ul.nav { margin: 1em; }
  ul.links a { padding-left: 1em; }
  ul.links a.current { border-left: 1px solid; }
  ul.socials { display: flex; justify-content: center; }
  ul.socials li { text-align: center; }

  /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
  /* next events */

  div.plates img { max-width: unset; }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* print */

@media screen {
  .print_only { display: none; }
}
@media print {
  body { background: #ffffff; }
  div.envelope { margin: 0; }
  .screen_ui { display: none; }
  .screen_only { display: none; }
  a { color: #000000; text-decoration: none; }
  a:visited { color: #000000; }
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */