/**
 * style.css
 * Cascading Style Sheet for the Dune 2019 Dynamic Rules web app.
 * Documentation: <URL:https://www.w3.org/Style/CSS/>.
 */

/** Variables for customisation. */

:root {
  --current-match-background-color: rgb(248, 113, 113);
  --atreides-dark: #485d33;
  --atreides-light: #b3bead;
  --harkonnen-dark: #000000;
  --harkonnen-light: #b2b2b2;
  --fremen-dark: #b58d49;
  --fremen-light: #d9c6a4;
  --spacing-dark: #a75837;
  --spacing-light: #d2aa9b;
  --bene-dark: #40495e;
  --bene-light: #b4b6bf;
  --emperor-dark: #743734;
  --emperor-light: #b99b99;
  --ixian-dark: rgb(161,171,107);
  --ixian-light: rgb(208,214,181);
  --tleilaxu-dark: rgb(44,29,76);
  --tleilaxu-light: rgb(150,143,166);
}

/** Resets on basic element styles. */

* {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: rgb(229, 231, 235);
}

html {
  color: white;
  background-color: rgb(17, 24, 39);
  font-family:
    ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  line-height: 1.5rem;
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

menu, ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button {
  text-transform: none;
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

/** Specific styles for this app. */

html body {
  margin: 0;
  padding: 1.5rem;
}

html footer {
  padding-block-start: 1.5rem;
  padding-block-end: 1.5rem;
  margin-top: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: white;
  background-color: rgb(17, 24, 39);
}

h1 {
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 2.25rem;
}

.search-result-current-match {
  background-color: var(--current-match-background-color);
}

.alliances {
  display: none;
  padding: 0.3rem 0.2rem 0.3rem 0.3rem;
  border-radius: 3px;
  background: #e4e4e4;
}

.alliances.active {
  display: block;
}

li.faction-rule,
li.advanced-rule {
  display: none;
}

li.faction-rule.active,
li.advanced-rule.active {
  display: revert;
}

.faction-button.active,
.advanced-button.active {
  outline: 3px solid white;
  opacity: 1;
}

.faction-button,
.advanced-button {
  opacity: 0.7;
  transition: opacity 0.2s, outline 0.2s;
  vertical-align: middle;
}

.faction-button img {
  width: 30px;
  float: left;
  margin-right: 10px;
  vertical-align: middle;
}

button.advanced-button {
  background-color: rgb(234, 88, 12);
}

.sectionHeader {
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.75rem;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  border: 0px solid #991b1b;
  border-radius: 4px;
  background-color: #991b1b;
}

.element {
  border: 0px solid #991b1b;
  border-radius: 4px;
  background-color: #991b1b;
}


.icon::before {
  margin-right: 0.15rem;
}

.faction-rule div {
  padding: 0.3rem 0.2rem 0.3rem 0.3rem;
  border-radius: 3px;
}
.faction-rule div::before {
  content: '\00a0\00a0\00a0\00a0\00a0\00a0';
  background-repeat: no-repeat;
}

.harkonnen {
  background: var(--harkonnen-light);
}
.harkonnen.faction-name {
  color: var(--harkonnen-dark);
}
.harkonnen::before {
  background-image: url('images/faction-icon.harkonnen.svg');
}

.atreides {
  background: var(--atreides-light);
}
.atreides.faction-name {
  color: var(--atreides-dark);
}
.atreides::before {
  background-image: url('images/faction-icon.atreides.svg');
}

.fremen,
.fremen-advance {
  background: var(--fremen-light);
}
.fremen.faction-name {
  color: var(--fremen-dark);
}
.fremen::before,
.fremen-advance::before {
  background-image: url('images/faction-icon.fremen.svg');
}

.spacing,
.spacing-advance {
  background: var(--spacing-light);
}
.spacing.faction-name {
  color: var(--spacing-dark);
}
.spacing::before,
.spacing-advance::before {
  background-image: url('images/faction-icon.spacing.svg');
}

.bene {
  background-color: var(--bene-light);
}
.bene.faction-name {
  color: var(--bene-dark);
}
.bene::before {
  background-image: url('images/faction-icon.bene.svg');
}

.emperor {
  background-color: var(--emperor-light);
}
.emperor.faction-name {
  color: var(--emperor-dark);
}
.emperor::before {
  background-image: url('images/faction-icon.emperor.svg');
}

.ixian {
  background-color: var(--ixian-light);
}
.ixian.faction-name {
  color: var(--ixian-dark);
}
.ixian::before {
  background-image: url('images/faction-icon.ixian.svg');
}

.tleilaxu {
  background-color: var(--tleilaxu-light);
}
.tleilaxu.faction-name {
  color: var(--tleilaxu-dark);
}
.tleilaxu::before {
  background-image: url('images/faction-icon.tleilaxu.svg');
}

.advanced::before {
  content: '⚙️';
}

.search-container button,
.toggles button {
  padding-block-start: 0.25rem;
  padding-block-end: 0.25rem;
  border-radius: 0.25rem;
}

/* Fixed search bar without overlapping title */
.search-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2d3748;
  padding: 0.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.search-container input {
  width: 250px;
  padding: 0.25rem;
  border-radius: 4px;
  border: none;
  font-size: 0.875rem;
  color: black;
}

.search-container #searchCount {
  margin-left: 0.5rem;
  color: white;
}

.search-container button {
  margin-left: 0.5rem;
  padding-inline-start: 0.5rem;
  padding-inline-end: 0.5rem;
  color: white;
  background-color: rgb(37, 99, 235);
}

.content-container {
  max-width: 80.0rem;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.content-container .toggles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.toggles button {
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.75rem;
}

.toggles .spacer.faction-end {
  width: 2.0rem;
}

.content-container .rules {
  columns: 28.0rem;
  gap: 1.0rem;
}

.rules ul {
  list-style: revert;
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 1.25rem;
}

.rules .game-setup {
  margin-bottom: 1.5rem;
  border-radius: 0.25rem;
  padding: 1.0rem;
}

.rules .game-turn {
  display: flex;
  flex-direction: column;
  gap: 1.0rem;
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

.rules .subsection {
  padding: 0.8rem;
  border-radius: 0.25rem;
  color: #000000;
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  break-inside: avoid-column;
}

.rules .subsection-header {
  position: sticky;
  top: 0;
  margin-bottom: 0.5rem;
  font-weight: 700;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: #dcc68c;
}

.rules .sublist {
  padding-left: 1.25rem;
  list-style-type: circle;
}

.container {
  @media (min-width: 640px) {
    max-width: 640px;
  }
  @media (min-width: 768px) {
    max-width: 768px;
  }
}

footer .container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  padding-inline-start: 1.0rem;
  padding-inline-end: 1.0rem;

  @media (max-width: 640px) {
    flex-direction: column;
  }
}

footer a.hosting {
  display: flex;
  align-items: center;
  margin-top: 0;
  margin-left: 0.5rem;
  margin-right: 0.5rem;

  @media (max-width: 640px) {
    margin-top: 1.0rem;
  }
}

footer a.hosting .logo {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.5rem;
  fill: currentColor;
}

footer .container a:hover {
  color: rgb(209, 213, 219);
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}