/* style.css for MATTERN Technical Rider - clean, responsive, app-style */
:root {
  --padding-large: 32px;
  --padding-medium: 16px;
  --padding-small: 8px;
  --margin-large: 32px;
  --margin-medium: 16px;
  --margin-small: 8px;

  --highlight-color: rgba(28, 50, 41, 0.8);
}
h1,h2,h3,h4,h5 {
  margin: 0 0 var(--margin-small) 0;
}
body {
  background: #fff;
  color: #000;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: var(--padding-large);
}
a {
  color: #000;
  text-decoration: none;
  transition: color 0.2s, text-decoration 0.2s;
}
a:hover {
  text-decoration: underline;
  color:black;
}
.header {
  text-align: center;
  margin-top: var(--margin-large);
  margin-bottom: var(--margin-medium);
}
.logo {
  max-width: 180px;
  width: 100%;
  margin: 0 auto 12px auto;
  display: block;
}
.title {
  font-weight: bold;
  font-size: 1.6em;
  margin-bottom: 8px;
}
/* Centralized boxed styling */
.boxed {
  border: 2px solid black;
  border-radius: 10px;
  padding: var(--padding-medium);
  margin-bottom: var(--margin-small);
}
.boxed:hover {
  box-shadow: 0 4px 28px rgba(0,0,0,0.1);
  border-color: var(--highlight-color);
}
.shadow {
  box-shadow: 0 4px 28px rgba(0,0,0,0.1);
}
/* Remove individual border styles from .section and .flex-col */
.section {    
    padding: var(--padding-medium) var(--padding-large);
    margin: var(--margin-large) auto;
}
.flex-row {
  width: 100%;
  display: flex;
  gap: var(--margin-medium);
  /* distribute contained elements evenly */
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
.flex-col {
  /* must use maximum space */
  flex-grow: 1;
  padding: var(--padding-medium);
  width: auto;
}
.flex-table {
  width: 100%;
  border: 2px solid black;
    border-radius: 10px;
}
.flex-table th, .flex-table td {
  text-align: center;
  vertical-align: top;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
  margin: 0;
  padding: 10px 0;
}
.speaker-cabinet {
  color: #fff;
  background-color: #333;
  border-radius: 5px;
}
.center {
  text-align: center;
}
.hidden {
  display: none;
}
@media (max-width: 700px) {
  .flex-row {
    flex-direction: column;
    gap: var(--margin-small);
  }
  .section {
    padding: var(--padding-small);
  }
}
.inverted {
  background: #000;
  color: #fff;
}
.pdf-export-btn {
  position: fixed;
  right: var(--margin-large);
  bottom: var(--margin-large);
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px 22px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  z-index: 1000;
  transition: background 0.2s, color 0.2s;
}
.pdf-export-btn:hover {
  background: #000;
  color: #fff;
}
.output {
  display: inline-block;
  background-color:rgb(38, 83, 83);
  color: white;
  border-radius: 5px;
  padding: var(--padding-small) var(--padding-medium);
  font-weight: bold;
}

.amp {
  border-radius: 5px;
  padding: 12px;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  width: auto;
}
.amp.orange {
  background-color: #ff6600;
  color: #fff;
  border: 4px solid #cc5200;

}

.amp.grey {
  background-color: #666;
  color: #fff;
  border: 4px solid #444;
}

main {
    max-width: 1080px;
    margin: auto;
}

th {
    vertical-align: bottom;
}

thead, tbody {
    margin: 0;
    padding: 0;
}

/*
 for max-width 700px,  lets use small padding and margin
*/
@media (max-width: 700px) {
  .section {
    padding: var(--padding-small);
    margin: var(--margin-small) auto;
  }
  .boxed {
    padding: var(--padding-small);
    margin-bottom: var(--margin-small);
  }
  body {
    padding: var(--padding-small);
  }
}

/* Center the print version */
@media print  {
  * {
    font-size: 0.95em !important;
    color: black !important;
  }
  section {
    margin: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid black;
  }
  body, li {
    line-height: 1;
    padding: 2px 0;
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;    
    */
  }
  main {
    max-width: 1000px;
    margin: auto;
  }
  .pdf-export-btn { display: none !important; }
}