header('Content-type: text/css');
/* 
 * Version 1.0 , 2025-06-27
 * CSS Document 
 * https://www.w3schools.com/cssref/css_selectors.php
 * https://www.w3schools.com/cssref/tryit.php?filename=trycss_cursor
 */
html, body {
}
/* 
 * **************
 * SIZE VARIABLES 
 */
:root {
}

.accordion > input:checked + label + section { /* input[type="checkbox"] */
  border-color : var(--selectedHover);
  background: var(--white);
}
 .accordion > label 
/*,.accordion > section > label */
 {
  color: var(--textlight); /* #333 */
  background: var(--selectedLight);
}
.accordion > .used:hover,
.accordion > .used:focus,
.accordion > label:hover,
.accordion > label:focus,
.accordion  > input:checked label.handle:hover { /* input[type="checkbox"] */
  background: var(--selectedHover);
}
.accordion > .used ,
.accordion  > input:checked label.handle { /* input[type="checkbox"] */
  background: var(--selected);
}

.accordion ul,
.accordion li {
/*  border-color: var(--themeDarker); */
  background: var(--white); /* #f7f0e2 */
}



*/
/*********************/
/* *** accordion *** */
/*
 https://codepen.io/markcaron/pen/RVvmaz
 Pure CSS Collapsible Sections without JavaScript
 CSS for the main interaction
 Other : https://codepen.io/raubaca/pen/PZzpVe
*/
/*  Styling */
.accordion {
  border-radius: 0.5em;
  border-width: 0.1 em;
}

.accordion {
/*  margin-bottom: 1em; */
}
.accordion > input { /* input[type="checkbox"] */
  position: absolute;
  left: -100vw;
}
/*.accordion > input:checked ~ .content {*/ /* input[type="checkbox"] */
.accordion > input:checked + label + section { /* input[type="checkbox"] */
  height: auto;
  overflow: visible;

  padding: 0.5em 0em 0em 0.5em;
  border-width: 0.1 em;
  border-style: solid;
  border-top: 0;
}
 .accordion > label.handle.before:before
,.accordion > label.handle.after:after
/*,.accordion > section > label.handle.before:before
,.accordion > section > label.handle.after:after*/
  {
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
  content: "\f054";
  display: inline-block;
  margin-right: 0.5em;
  margin-left: 0.5em;
  font-size: 1em;
  vertical-align: middle;
  transition: all .35s;
}
.accordion  > input:checked + label.handle.before:before , /* input[type="checkbox"] */
.accordion  > input:checked + label.handle.after:after  { /* input[type="checkbox"] */
  transform: rotate(90deg);
  transition: all .35s;
}
.accordion  > label.handle.block  {
  display: block;
}
.accordion  > label.handle.flex  {
  display: flex; 
  justify-content: space-between;
}
.accordion > label.handle
,.accordion > section > label.handle
 {
  cursor: pointer;
  font-weight: normal;
  padding: 0.5em;

  margin: 0;
  font-size: 1.125em;
  line-height: 1.2em;

}
/*.accordion .content { */
.accordion .section {
  overflow-y: hidden;
  height: 0;
/*  transition: max-height 1.3s, padding 0.3s ease; */
  transition: all .35s;

}

/*********/
/* lists */
.accordion ul {
  width: max-content;
  margin: 0em 0em;
/*  padding: 0em 1em; */
  cursor: pointer;
  border-width: 0.05em;
  border-style: solid;
}
.accordion li {
  min-width: 7.5em;
/*  padding: 0em 0em 0em 1em; */
  cursor: auto;
  line-height: 1.4em;
  font-size: 1.0em;
  text-decoration: none;
  list-style: none;
}