/* Wielewaal-thema voor Piwigo, bovenop modus (skin "clear").
   Kleuren, lettertype en afbeeldingen komen uit het mercury-template van de website. */

@font-face {
  font-family: 'MisoRegular';
  src: url('../fonts/miso-webfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'MisoBold';
  src: url('../fonts/miso-bold-webfont.woff') format('woff');
  font-display: swap;
}

:root {
  --ww-grijs: #eee;
  --ww-oranje: #fb8e29;
  --ww-strook-boven: #f8b06e;
  --ww-strook-onder: #ed9d52;
  --ww-kopkleur: #e48024;
  --ww-bruin: #7e3d00;
  --ww-donkerbruin: #5a2d00;
  --ww-voet: #f8b16f;
  --ww-tekst: #333;
  --ww-breedte: 1240px;
  --ww-miso: 'MisoRegular', Arial, Helvetica, sans-serif;
}

body {
  background: #f7f7f7 url(../img/pattern.png) repeat 0 0;
  color: var(--ww-tekst);
  font-family: Arial, Helvetica, sans-serif;
  /* voet onderaan, ook bij een korte pagina */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--ww-bruin); }
a:hover { color: var(--ww-kopkleur); }

/* ------------------------------------------------------------------ kop */

#theHeader {
  position: relative;
  overflow: hidden;
  height: 130px;
  margin: 0;
  padding: 0;
  background: var(--ww-grijs);
  text-align: left;
}

.ww-kop {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--ww-breedte);
  height: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* de schuine oranje balk, met dezelfde helling als op de site */
.ww-kop::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 236px;
  width: 200vw;
  background: var(--ww-oranje);
  clip-path: polygon(89px 0, 100% 0, 100% 100%, 0 100%);
}

.ww-kop a { position: relative; text-decoration: none; }

.ww-logo img {
  display: block;
  width: 194px;
  height: auto;
}

.ww-titel {
  margin-left: 110px;
  font: 2.8em/1 var(--ww-miso);
  text-transform: uppercase;
  color: #fff;
}

.ww-site {
  margin-left: auto;
  padding: 4px 9px 2px;
  border-radius: 4px;
  font: 1.6em/1.2 var(--ww-miso);
  text-transform: uppercase;
  color: var(--ww-grijs);
}

.ww-site::before { content: '\2190\00a0'; }
.ww-titel:hover, .ww-site:hover { color: #fff; }
.ww-site:hover { background: var(--ww-bruin); }

/* ------------------------------------------------------------------ menu (de lichtere strook onder de kop) */

#menubar {
  background: linear-gradient(var(--ww-strook-boven), var(--ww-strook-onder));
  border: 0;
  box-shadow: none;
  box-sizing: border-box;
  /* menu-items op dezelfde breedte als de kop */
  padding-left: max(8px, calc((100% - var(--ww-breedte)) / 2 + 8px));
  padding-right: max(8px, calc((100% - var(--ww-breedte)) / 2 + 8px));
}

#menubar dt,
#menubar dt a {
  font-family: var(--ww-miso);
  font-size: 1.15rem;
  font-weight: normal;
  text-transform: uppercase;
  color: var(--ww-donkerbruin);
}

#menubar dt a:hover,
#menubar dl:hover > dt a { color: #fff; }

#menubar dd {
  background: #fff;
  border: 1px solid var(--ww-strook-onder);
  border-top: 3px solid var(--ww-oranje);
}

#menubar dd a { color: var(--ww-tekst); }
#menubar dd a:hover { color: var(--ww-kopkleur); }

#qsearchInput {
  background: #fdf1e5;
  border: 1px solid var(--ww-strook-onder);
  color: var(--ww-tekst);
}

/* ------------------------------------------------------------------ inhoud */

#content,
.content {
  box-sizing: border-box;
}

#content {
  width: 100%;
  max-width: var(--ww-breedte);
  margin: 12px auto 0;
  padding: 6px 15px 20px;
  background: #fff;
}

.titrePage {
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--ww-kopkleur);
  text-shadow: none;
}

.titrePage h2,
.titrePage h2 a,
#imageHeaderBar h2 {
  font-family: var(--ww-miso);
  font-weight: normal;
  text-transform: uppercase;
  color: var(--ww-kopkleur);
  text-shadow: none;
}

.titrePage h2 a:hover { color: var(--ww-bruin); }

/* fotopagina: het kruimelpad staat daar buiten de h2 */
#imageHeaderBar .browsePath,
#imageHeaderBar .browsePath a,
#imageHeaderBar .imageNumber {
  font-family: var(--ww-miso);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--ww-kopkleur);
}

#imageHeaderBar .browsePath h2 { font-size: 1.25rem; color: var(--ww-bruin); }
#imageHeaderBar .browsePath a:hover { color: var(--ww-bruin); }

/* werkbalk en infopaneel bij een foto: licht, met een oranje lijn zoals de site */
#imageToolBar,
#imageInfos,
.wide #imageInfos {
  background: #f7f7f7;
  color: var(--ww-tekst);
}

/* Bij de eerste of laatste foto staat in plaats van een miniatuur een vak met "Eerste/Laatste pagina –
   Ga terug naar het album". Die tekst past niet in het vak (op scherpe schermen is het 60 x 60 px).
   Maak er een knop van: pijl terug plus "Album". De tekst blijft bestaan voor schermlezers. */
.navThumbs div.thumbHover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--ww-oranje);
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
}
.navThumbs div.thumbHover br { display: none; }
.navThumbs div.thumbHover::before {
  content: '\21A9';
  font-size: 24px;
  line-height: 1;
  color: #fff;
}
.navThumbs div.thumbHover::after {
  content: 'Album';
  margin-top: 4px;
  font: 14px/1 var(--ww-miso);
  text-transform: uppercase;
  color: #fff;
}
.navThumbs a.navThumb:hover div.thumbHover { background: var(--ww-bruin); }

#imageToolBar { border-bottom: 3px solid var(--ww-oranje); }
#imageInfos { border-left: 3px solid var(--ww-oranje); }
#imageInfos dt { color: var(--ww-kopkleur); }

.pwg-button, .pwg-icon { color: var(--ww-bruin); }

/* knoppen in formulieren, zoals inloggen en zoeken */
input[type=submit],
input[type=button],
button {
  background: var(--ww-oranje);
  border: 1px solid var(--ww-kopkleur);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

input[type=submit]:hover,
input[type=button]:hover,
button:hover { background: var(--ww-bruin); }

/* ------------------------------------------------------------------ voet met de bomen van de site */

#copyright {
  margin: auto 0 0;
  padding: 180px 16px 24px; /* 30px ruimte, dan de bomen (140px) */
  background: url(../img/bg-footer.png) no-repeat center 30px,
              linear-gradient(transparent 169px, var(--ww-voet) 169px);
  color: #404040;
  text-align: center;
}

#copyright a { color: #404040; }

/* ------------------------------------------------------------------ smalle schermen */

@media (max-width: 760px) {
  #theHeader { height: 84px; }
  .ww-logo img { width: 120px; }
  .ww-kop::before {
    left: 150px;
    clip-path: polygon(58px 0, 100% 0, 100% 100%, 0 100%);
  }
  .ww-titel { display: none; }
  .ww-site { font-size: 1.25em; }
  #content { margin-top: 0; padding: 4px 8px 16px; }
}

/* telefoons: modus toont dan een menuknop; zet die (en het uitklapmenu) onder de kop in plaats van over het logo */
@media (max-width: 640px) {
  #menuSwitcher {
    top: 92px;
    left: 8px;
    z-index: 2;
    color: var(--ww-kopkleur);
  }
  #menubar {
    top: 124px;
    left: 0;
    z-index: 3;
    padding: 4px 8px;
  }
}