/*  ------------------------------------------------------
file: pps_global.css
usage: globale css styles für Parkleitsystem Basel

author: thomas bruhin, media sonics, 4148 pfeffingen
design: gerd wippich, metaphor gmbh, 4000 basel

first release: 2019-10-15
------------------------------------------------------ */

/* eric meyers basic reset without font reset */
html, body, div, span, object, img,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
dl, dt, dd, ol, ul, li,
table, tr, td,
fieldset, form, label, legend,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }


/* ---
font stack with system ui defaults
apple ios and mac osx: san francisco
see: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/#details-of-approach-a
--- */

html, body {
  font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  font-size: 100%;
  box-sizing: border-box; 
}

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

header { grid-area: header; }
main { grid-area: main; }
footer { grid-area: footer; }

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
    "header"
    "main"
    "footer";
  grid-template-rows: 80px 1fr 40px;
  min-height: 100vh;
}

header, main, footer {
  display: flex;
  flex-direction: row;
}
header, footer { background-color: #F1F1F1; /* light gray */ }

header section.middle { margin-top: 28px; margin-left: 11px; margin-right: 11px; }

header h1 { display: none; }
header nav {
  display: flex; 
  width: 100%;
  justify-content: space-between;
}

header nav a {
  box-sizing: border-box;
  text-decoration: none;
  min-width: 96px;
  height: 40px;
  display: inline-block;
  background-color: rgb(0, 102, 204);
  border-radius: 5px;
  color: white;
  font-size: 1.125rem;
  font-weight: bold; 
  text-align: center;
  padding: 10px 20px 0; 
}

header nav a:hover { color: rgb(0, 102, 204); background-color: white; }

section.middle { display: flex; flex: 1; flex-wrap: wrap; }
main section.middle { margin: 25px; }
/* selects all child elements of main section.middle */
main section.middle > * { width: 100%; }

section.left, section.right { display: none; }
footer section.middle { justify-content: space-between; align-items: center; }


p { font-size: 1rem; }

footer p { font-size: 1rem; } /* reset form very small layouts */
footer a { text-decoration: none; color: #999; }
footer a:hover { text-decoration: underline; }
footer p:first-of-type { padding-left: 11px; }
footer p:last-of-type { padding-right: 11px; }

/* styling mittlere textspalte mobile layout */
main h3, main h4 { font-size: 1rem; margin-left: 0px;}
main h4 { margin-top: 16px; margin-bottom: 6px; }

main section.middle header {  justify-content: space-between; align-items: center; background-color: transparent; }
main header p { padding: 0px; color: black; }
main span.stempel_zeit { display: inline; padding-left: 0px; }
main span.stempel_zeit::before { content: "| "; }

/* fix for "smaller" smartphones */
@media screen and (max-width: 420px) {
  header nav a { padding: 10px 10px 0; font-size: 1.125rem; }
  main section.middle { margin: 25px 10px; }
}
@media screen and (max-width: 330px) {
  header nav a { padding: 10px 3px 0; font-size: 1rem; }
  footer p { font-size: 0.75rem; }
}

/* responsive breakpoint: tablet */
@media screen and (min-width: 860px) {

  .container {
    grid-template-rows: 167px 1fr 40px;
  }

  header section { padding-top: 16px; }
  header section.middle { margin: 0; } /* reset */
  header h1 { 
    display: block; 
    font-size: 2rem; 
    color: rgba(175,175,175, 1); 
    margin-left: 108px; 
    font-weight: 600; 
    letter-spacing: 0.125rem;
  }

  header nav {
    display: flex; 
    margin-left: 108px;
    width: 620px;
    justify-content: space-between;
  }

  header nav a {
    width: 188px;
    height: 46px;
    border-radius: 10px;
    padding: 9px 0 5px 14px;
    font-size: 1.5rem;
    text-align: left;
  }

  main section.middle { margin: 30px 36px; }
  main section.middle header {  justify-content: flex-start; }
  /* styling mittlere textspalte mobile layout */
  main h3, main h4 { margin-left: 68px; }
  main header p { padding: 0 0 0 94px; }
  main span.stempel_zeit { display: inline-block; padding-left: 64px; }
  main span.stempel_zeit::before { content: ""; }

  footer p:first-of-type { padding-left: 108px; }
  footer p:last-of-type { padding-right: 108px; }
}
/* responsive breakpoint: desktop full */
@media screen and (min-width: 1280px) {
  
  body {     
    background-image: url('../../../images/map_progressive_2880-min.jpg');
    background-size: cover; 
  }
  .container { 
    margin: 0 auto;
    width: 1280px; 
    background: rgba(255,255,255,0.9);
  }

  section.left, section.right { 
    display: flex; 
    width: 222px; 
  }

  header section { padding-top: 32px; align-items: flex-start; }
  header p { color: #999; line-height: 1.4; padding-left: 28px; }
  header section.right { justify-content: flex-end; }
  header section.right img { padding-right: 28px; }
  
  footer p:first-of-type { padding-left: 98px; }

}