/*

[aria-pressed=true/false] for active states, not classes
----------
button:active,
button[aria-pressed=true] {
  // active styles here
}


use hidden to hide from AT and visually hide as well
like <ul class="list" hidden>
make sure to hide in css too
[hidden] {
  display: none;
}

*/

[aria-hidden],
[hidden] {
  display: none;
}

[aria-hidden="false"] {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*+* {
  margin-top: 2em;
}

p,
dd {
  margin-top: .75em;
  line-height: 1.25;
}

dt {
  font-weight: bold;
}

body {
  margin: 5%;
  font-family: sans-serif;
}

button {
  display: inline-block;
  outline: 2px solid transparent;
  outline-offset: 10px;
  transition: 0.25s all ease;
  padding: 1em;
}

button:focus {
  outline: 2px solid yellow;
  outline-offset: 0;
}

.siteHeader {
  padding-bottom: 1.5em;
  margin-bottm: 3.5em;
  border-bottom: 1px solid;
}

.siteNav li {
  display: inline-block;
}

.siteMain>section {
  padding: 5% 0;
  border-bottom: 1px solid;
}

[role="tooltip"] {
  background: orange;
  color: white;
  padding: .25em;
  display: none;
  margin: 0;
}

input:focus+[role="tooltip"] {
  display: block;
}