/* CSS style for Pioneer Spirits - Author, AK */

body {
margin:5px 5px;
background: #DDDDFF;
font-size:14px;
/*font-family:Times New Roman;*/
font-family: Arial, Helvetica, sans-serif;
}


/*ADDED*/
.body {
/*padding:0px 5px;*/
/*width:790px;*/
overflow:auto;
/*margin-left:10px;*/
/*transform: scale();*/
word-wrap: break-word;
}

.body a {
text-decoration:underline;
}

.body a:hover {
text-decoration:none;
}

a {
color: #0000AA;
}

/*ADDED*/
#sidebar {
  background:#0000AA;
  margin:0;
  padding:8px 12px;
  text-align:left;
  width:auto;
  min-height:100vh;
  box-sizing:border-box;
}

#sidebar a {
color: #AAAAFF;
text-decoration:none;
}

#sidebar a:hover {
text-decoration:underline;
}

#iconImg {
   width: 220px;
   height: 220px;
   margin: 18px auto;
   display: block;
}




h2 {
margin-top:0;
}

h4 {
  color: #EEEEEE;
  margin: 0 0;
  font-size: 16.5px;
}



/*ADDED*/
#home a {
  text-decoration: none;
}

ul {
list-style-type:none;
padding:0;
margin-left:1em;
font-size: 0; /*ADDED*/
}

/*ADDED*/
li {
  font-size: 15.5;
}

img.photos {
border:1px solid black;
}





table.standardTable {
  width: 0px;
  height: 0px;
  border-style: none;
  border-width: none;
  border: 0;
  text-align: right;
}







.navlink {
font-weight:bold;
margin:1em;
}

.hideBorder {
  border-style: none;
  border-width: none;
  border: 0;
}

/* ===== Tegel-menu met tabs (toegevoegd) ===== */
#tabs{
  display:flex;
  gap:6px;
  position:sticky;
  top:0;
  padding:4px 0 10px;
  background:#0000AA;
  z-index:5;
}
.tab{
  flex:1;
  padding:12px 8px;
  font-size:16px;
  font-weight:bold;
  color:#C7C7FF;
  background:#1B1BC9;
  border:none;
  border-radius:10px;
  cursor:pointer;
}
.tab.active{
  color:#0000AA;
  background:#EDEDFF;
}
.tabpage{
  display:none;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
}
.tabpage.active{ display:grid; }
.tile{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:80px;
  padding:12px;
  background:#2A2AD6;
  color:#FFFFFF !important;
  border:1px solid #4A4AE0;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  text-decoration:none !important;
  line-height:1.2;
}
.tile:active{ background:#4A4AE0; }
#iconImg{
  width:150px;
  height:150px;
  margin:22px auto 8px;
  display:block;
}

/* ================= DAFT DISTILLING thema ================= */
body{ background:#0d0d0d !important; color:#efe6d0; }
a{ color:#d8b25a; }

#sidebar{ background:#0d0d0d; }
#tabs{ background:#0d0d0d; }

#brand{ text-align:center; padding:6px 0 12px; }
#brandTitle{ color:#e7c56a; font-weight:bold; letter-spacing:2px; font-size:21px; }
#brandTag{ color:#c9a24b; font-style:italic; font-size:13px; margin-top:2px; }

/* Terug-knop bovenaan calc-/receptpagina's (toegevoegd via accordion.js) */
.body .backbtn{ display:inline-block; position:sticky; top:6px; z-index:50;
  background:#1b1b1e; color:#c9a24b; border:1px solid #7a6128; border-radius:8px;
  padding:6px 12px; font-size:14px; text-decoration:none; margin:0 0 10px; }
.body .backbtn:hover{ background:#26251f; }

/* Hint boven horizontaal-scrollende tabellen (via accordion.js) */
.body .scrollhint{ color:#c9a24b; font-size:12px; font-style:italic; margin:2px 0 5px; }

/* Vaste (niet-inklapbare) sectiekop binnen een rekenpagina */
.body .secttl{ color:#e7c56a; font-weight:bold; font-size:16px; margin:16px 0 6px; }

#credits{ text-align:center; color:#8a8168; font-size:12px; line-height:1.6; margin:22px 0 4px; }
#credits b{ color:#c9a24b; }
#credits span{ font-size:11px; }

.tab{ background:#1b1b1e; color:#c9a24b; border:1px solid #7a6128; }
.tab.active{ background:#c9a24b; color:#1a1400; }

.tile{ background:#1b1b1e; color:#efe6d0 !important; border:1px solid #7a6128; }
.tile:active{ background:#3a3320; }

/* Rekenpagina's: oude beige/tan -> zwart/goud */
.body{ color:#efe6d0; }
.body *{ color:#efe6d0; }
.body a, .body a *{ color:#d8b25a; }
.body h2, .body h2 a, .body h4, h4{ color:#e7c56a; }

/* alle gekleurde cellen en lichte inline-achtergronden -> donker paneel */
[bgcolor]{ background:#1b1b1e !important; }
.body [style*="background"]{ background:#1b1b1e !important; }
.body table, .body td, .body th{ border-color:#3a3320; }

/* formule-/diagramplaatjes leesbaar houden op zwart */
.body img{ background:#f2ead6; padding:4px; border-radius:6px; }

/* invoervelden + knoppen */
.body input{ background:#0d0d0d !important; color:#efe6d0 !important; border:1px solid #7a6128; border-radius:5px; padding:4px 6px; }
.body select{ background:#0d0d0d !important; color:#efe6d0 !important; border:1px solid #7a6128; border-radius:5px; padding:5px 6px; margin:2px 0; }
.body select option{ background:#1b1b1e; color:#efe6d0; }
/* selectievakjes native houden i.p.v. donker invoervak */
.body input[type=checkbox], .body input[type=radio]{ width:auto !important; min-width:0 !important; background:initial !important; border:none !important; padding:0 !important; accent-color:#c9a24b; }
/* knoppen binnen brede fit-tabellen niet volledig uitrekken */
.body .fit input[type=button], .body .fit input[type=submit]{ width:auto; }

/* ===== Rekenformulieren: nette verticale stapel (label boven, breed veld eronder) ===== */
.body form table, .body form tbody, .body form tr, .body form td{
  display:block !important; width:100% !important; box-sizing:border-box;
  border:none !important; text-align:left !important;
  height:auto !important; min-height:0 !important;
}
.body form table{ padding:12px !important; border-radius:10px; background:#1b1b1e; }
.body form td{ padding:2px 0 !important; }
.body form input, .body form select{
  display:block !important; width:100% !important; box-sizing:border-box;
  background:#0d0d0d !important; color:#efe6d0 !important;
  border:1px solid #7a6128 !important; border-radius:8px;
  padding:12px !important; margin:6px 0 14px; font-size:16px;
}
.body form input[type=button], .body form input[type=submit]{
  display:inline-block !important; width:auto !important;
  background:#c9a24b !important; color:#1a1400 !important;
  border:none !important; border-radius:8px; padding:12px 24px !important;
  margin:8px 0; font-weight:bold; font-size:15px;
}
.body form input[type=checkbox], .body form input[type=radio]{
  display:inline-block !important; width:auto !important;
  background:initial !important; border:none !important; padding:0 !important;
  margin-right:6px; accent-color:#c9a24b;
}

/* ===== Accordeon: secties in-/uitklappen ===== */
.body h3.acc-head{
  cursor:pointer; text-align:left !important;
  background:#1b1b1e; border:1px solid #7a6128; border-radius:10px;
  padding:14px 42px 14px 16px; margin:9px 0; position:relative;
  color:#e7c56a; font-size:16px;
}
.body h3.acc-head::after{
  content:"\25BE"; position:absolute; right:16px; top:50%;
  transform:translateY(-50%); color:#c9a24b; transition:transform .2s ease;
}
.body h3.acc-head.acc-open::after{ transform:translateY(-50%) rotate(180deg); }
.body .acc-panel{ padding:2px 2px 8px; }
.body input[type=button], .body input[type=submit]{ background:#c9a24b !important; color:#1a1400 !important; border:none; border-radius:6px; padding:7px 14px; font-weight:bold; cursor:pointer; }

/* nette, brede tabellen op mobiel (fix voor de platgeknepen .standardTable) */
.body table.standardTable{ width:100% !important; height:auto !important; }
.body table.standardTable td{ text-align:left; padding:7px 8px; vertical-align:middle; }
.body table.standardTable tr:nth-child(even) td{ background:#161618; }
.body table.standardTable input{ width:96px; }
.body table.standardTable input[disabled]{ opacity:.85; }

/* brede 'fit'-recepttabellen: niet meer piepklein geschaald, maar schermvullend */
.body .fit{ overflow-x:auto; width:auto !important; height:auto !important; }
.body .fit > table{ transform:none !important; width:100% !important; height:auto !important; }
.body .fit td{ padding:5px 6px; vertical-align:middle; }
.body .fit input{ width:100%; box-sizing:border-box; min-width:40px; }
.body .fit select{ max-width:100%; }
/* Resultaat-/datatabellen (in .fit, binnen een form) niet platslaan tot losse blokken,
   maar als echte tabel tonen. Smalle schermen scrollen horizontaal via .fit. */
.body form .fit table{ display:table !important; width:100% !important; border-collapse:collapse; }
.body form .fit tbody{ display:table-row-group !important; }
.body form .fit tr{ display:table-row !important; }
.body form .fit td{ display:table-cell !important; width:auto !important; border:none !important;
  padding:5px 6px !important; vertical-align:middle; white-space:nowrap; }
.body form .fit input{ display:inline-block !important; width:100% !important; min-width:46px;
  margin:0 !important; padding:6px 4px !important; font-size:14px; border-radius:5px !important; }