/**
 * Centrale Cliëntenraad Pameijer SP
 * Nagebouwd van het Drupal-thema "pameijer_microsite" met kleurinstelling F09-000099
 * (primaire kleur magenta #FF0099, secundaire kleur donkerblauw #000099).
 */

:root {
  --primair: #FF0099;
  --secundair: #000099;
}

/**
 * Basis
 */
body {
  margin: 8px;
  background: #FFFFFF;
  color: #000000;
  font: 13px/1.231 arial, helvetica, clean, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 1em 0 0.5em 0;
  font-size: 1.2em;
  font-weight: bold;
  text-transform: lowercase;
  color: var(--secundair);
}

p {
  margin: 1em 0;
}

a:link, a:visited {
  color: var(--secundair);
  font-weight: bold;
  text-decoration: none;
}

a:active, a:hover, a:focus {
  color: var(--secundair);
  text-decoration: underline;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
}

table {
  width: 100%;
  margin-bottom: 2.5em;
  border-collapse: collapse;
}

th, td {
  padding: 0.3em;
  text-align: left;
  vertical-align: top;
}

th {
  border-bottom: 1px solid var(--secundair);
}

caption {
  text-align: left;
  font-weight: bold;
  font-size: 1.1em;
  text-transform: lowercase;
  color: var(--secundair);
  padding: 0.3em 0;
}

iframe {
  max-width: 100%;
}

.visueel-verborgen {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  height: 1px;
  width: 1px;
}

.naar-inhoud:focus {
  position: static !important;
  clip: auto;
  height: auto;
  width: auto;
}

/**
 * Pagina-indeling
 */
#page {
  width: 980px;
  margin: 0 auto 20px auto;
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#logo img,
#slogan img {
  display: block;
}

#main {
  background: url("../img/achtergrond.jpg") no-repeat;
  border-top: 2px solid var(--primair);
  padding-bottom: 25px;
  min-height: 505px;
  display: flow-root;
}

#content {
  float: left;
  width: 620px;
  margin-left: 20px;
}

#sidebar {
  float: right;
  width: 300px;
  margin-right: 20px;
}

#content .section,
#sidebar .section {
  background: rgba(255, 255, 255, 0.75);
  padding: 20px;
  border-top: 12px solid var(--primair);
}

#content .section {
  overflow-wrap: break-word;
}

#content h1 {
  margin-top: 0;
}

#sidebar .block {
  margin-bottom: 2.5em;
}

#sidebar .block:last-child {
  margin-bottom: 0;
}

#sidebar h2 {
  margin-top: 0;
}

#footer {
  padding: 0 20px;
}

/**
 * Hoofdmenu: knoppen als afbeelding (sprite van 2 x 26px).
 * Normaal: witte tekst op blauw (onderste helft); actief/hover: blauw op wit (bovenste helft).
 */
.main-menu {
  padding: 20px 0 20px 16px;
  margin: 0;
}

.main-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
}

.main-menu li {
  margin: 0 4px;
  padding: 0;
}

.main-menu a {
  display: block;
  height: 26px;
  background-color: transparent;
  background-position: 0 -26px;
  background-repeat: no-repeat;
  border: 1px solid #FFFFFF;
}

.main-menu a:hover,
.main-menu a:focus,
.main-menu a.active {
  background-position: 0 0;
  border-color: var(--secundair);
}

.main-menu a.home         { background-image: url("../img/menu/home.png");         width: 91px; }
.main-menu a.informatie   { background-image: url("../img/menu/informatie.png");   width: 126px; }
.main-menu a.agenda       { background-image: url("../img/menu/agenda.png");       width: 103px; }
.main-menu a.wie-zijn-wij { background-image: url("../img/menu/wie_zijn_wij.png"); width: 134px; }
.main-menu a.notulen      { background-image: url("../img/menu/notulen.png");      width: 106px; }
.main-menu a.links        { background-image: url("../img/menu/links.png");        width: 86px; }
.main-menu a.contact      { background-image: url("../img/menu/contact.png");      width: 104px; }

/**
 * Nieuws (voorpagina en nieuwsoverzicht)
 */
.nieuws-item {
  margin-bottom: 1.5em;
}

.nieuws-item h2 {
  margin-bottom: 0.3em;
}

.nieuws-item .samenvatting p:first-child {
  margin-top: 0;
}

.lees-verder {
  margin: 0.3em 0 0;
}

.geplaatst {
  color: #666666;
  font-size: 0.9em;
}

.feed img {
  vertical-align: -3px;
}

.feed-icoon,
img[src$="feed.svg"] {
  width: 16px;
  height: 16px;
}

/* Paginering */
.pager ul {
  list-style: none;
  margin: 1.5em 0 0;
  padding: 0;
  text-align: center;
}

.pager li {
  display: inline-block;
  margin: 0 0.3em;
}

.pager li.huidig {
  font-weight: bold;
}

/**
 * Velden op een detailpagina
 */
.veld {
  margin: 1em 0;
}

.veld-label {
  font-weight: bold;
  margin-right: 0.3em;
}

.veld ul {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.veld-datum ul,
.veld-bijlage ul {
  display: block;
  margin-top: 0.3em;
}

.veld .grootte {
  color: #666666;
  font-weight: normal;
}

.node-afbeelding {
  display: block;
  margin-bottom: 1em;
  padding: 3px;
  background: #FFFFFF;
  border: 1px solid #999999;
}

/* Ingevoegde afbeeldingen (Drupal-stijlen teaser_thumb en thumbnail) */
img.pasfoto {
  width: 90px;
  height: 90px;
  object-fit: cover;
}

.pasfoto-groot {
  max-width: 200px;
}

img.afbeelding-links,
img.afbeelding-rechts,
img.afbeelding-inline {
  max-width: 100px;
  padding: 3px;
  background: #FFFFFF;
  border: 1px solid #999999;
}

img.afbeelding-links {
  float: left;
  margin: 0 8px 8px 0;
}

img.afbeelding-rechts {
  float: right;
  margin: 0 0 8px 8px;
}

.tekst {
  display: flow-root;
}

.bestand-pdf::before,
.bestand-doc::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1h7l3 3v11H3z' fill='%23fff' stroke='%23999'/%3E%3Cpath d='M10 1v3h3' fill='none' stroke='%23999'/%3E%3Crect x='4' y='9' width='8' height='4' fill='%23c00'/%3E%3C/svg%3E");
}

.bestand-doc::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 1h7l3 3v11H3z' fill='%23fff' stroke='%23999'/%3E%3Cpath d='M10 1v3h3' fill='none' stroke='%23999'/%3E%3Crect x='4' y='9' width='8' height='4' fill='%232b579a'/%3E%3C/svg%3E");
}

/**
 * Lijsten per jaar (notulen, categorieën, agenda)
 */
.jaar {
  border-bottom: 1px solid var(--secundair);
  padding-bottom: 0.2em;
}

h3.jaar {
  font-size: 1.1em;
}

.lijst {
  margin: 0.5em 0 1.5em;
  padding-left: 1.5em;
}

.lijst li {
  margin: 0.3em 0;
}

.agenda-lijst {
  list-style: none;
  padding-left: 0;
}

.agenda-lijst .wanneer {
  display: block;
  color: #666666;
  font-size: 0.9em;
}

/**
 * Informatieboek
 */
.boek-navigatie {
  margin-top: 2em;
  padding-top: 0.5em;
  border-top: 1px solid var(--secundair);
}

.boek-navigatie .pagina-links {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}

.boeknavigatie ul.menu {
  margin: 0;
  padding-left: 10px;
}

.boeknavigatie ul.menu ul {
  padding-left: 1.2em;
}

.boeknavigatie a.actief {
  color: var(--primair);
}

/**
 * Links en smoelenboek
 */
.links-tabel td.titel {
  width: 40%;
}

.smoelenboek td.foto {
  width: 100px;
}

.smoelenboek h3 {
  margin-top: 0;
  text-transform: none;
}

.smoelenboek p {
  margin: 0 0 0.5em;
}

/**
 * Formulieren (zoeken, nieuwsbrief, contact)
 */
.zoeken form,
.nieuwsbrief form,
#zoekformulier {
  display: flex;
}

.zoeken input,
.nieuwsbrief input,
#zoekformulier input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 11px;
  padding: 2px 4px;
  color: #333333;
  background: #FFFFFF;
  border: 1px solid #999999;
  border-right: 0;
}

.zoeken button,
.nieuwsbrief button,
#zoekformulier button {
  font: inherit;
  font-size: 11px;
  text-transform: lowercase;
  padding: 0 6px;
  color: #999999;
  background: #FFFFFF;
  border: 1px solid #999999;
  cursor: pointer;
}

.zoeken button:hover,
.zoeken button:focus,
.nieuwsbrief button:hover,
.nieuwsbrief button:focus,
#zoekformulier button:hover,
#zoekformulier button:focus {
  color: #FFFFFF;
  background: var(--secundair);
  border-color: var(--secundair);
}

#zoekformulier {
  flex-wrap: wrap;
}

#zoekformulier label {
  flex-basis: 100%;
  font-weight: bold;
  margin-bottom: 0.3em;
}

#zoekformulier input,
#zoekformulier button {
  font-size: 13px;
  padding: 4px 6px;
}

#zoekresultaten ol {
  padding-left: 1.5em;
}

#zoekresultaten li {
  margin-bottom: 1em;
}

#zoekresultaten .fragment {
  display: block;
  color: #333333;
  font-size: 0.95em;
}

.form-item {
  margin: 1em 0;
}

.form-item label,
.form-item legend {
  display: block;
  font-weight: bold;
  margin-bottom: 0.2em;
}

fieldset.form-item {
  border: 0;
  padding: 0;
}

.form-item label.optie {
  font-weight: normal;
}

.form-required {
  color: #CC0000;
}

.form-item input[type="text"],
.form-item input[type="email"],
.form-item input[type="tel"],
.form-item textarea {
  font: inherit;
  padding: 3px;
  border: 1px solid #999999;
  background: #FFFFFF;
  box-sizing: border-box;
  max-width: 100%;
  width: 30em;
}

.form-item textarea {
  width: 100%;
  min-height: 10em;
}

.beschrijving {
  font-size: 0.9em;
  color: #666666;
  margin: 0.2em 0 0.4em;
}

.form-actions button {
  font: inherit;
  font-weight: bold;
  text-transform: lowercase;
  padding: 4px 12px;
  color: #FFFFFF;
  background: var(--secundair);
  border: 1px solid var(--secundair);
  cursor: pointer;
}

.form-actions button:hover,
.form-actions button:focus {
  color: var(--secundair);
  background: #FFFFFF;
}

.melding {
  padding: 0.7em 1em;
  border: 1px solid var(--secundair);
  background: #FFFFFF;
}

/**
 * Smalle schermen (de oude site was vast 980px breed)
 */
@media (max-width: 1000px) {
  body {
    margin: 0;
  }

  #page {
    width: auto;
  }

  #header {
    padding: 8px 16px 0;
  }

  #logo img {
    width: 154px;
    height: auto;
  }

  #slogan img {
    width: 120px;
    height: auto;
  }

  #main {
    background-size: 100% auto;
  }

  .main-menu {
    padding: 16px 12px;
  }

  #content,
  #sidebar {
    float: none;
    width: auto;
    margin: 0 16px 20px;
  }

  #content .section,
  #sidebar .section {
    padding: 16px;
  }

  .form-item input[type="text"],
  .form-item input[type="email"],
  .form-item input[type="tel"] {
    width: 100%;
  }

  .links-tabel tr,
  .links-tabel td {
    display: block;
    width: auto;
  }

  .links-tabel td.titel {
    width: auto;
    padding-bottom: 0;
  }

  .links-tabel tr {
    padding: 0.3em 0;
    border-bottom: 1px solid #DDDDDD;
  }
}