/*
 * SPDX-FileCopyrightText: 2023 Håvard Moen <post@haavard.name>
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

:root {
  /* palette */
  --bg: #f7f3ea;
  --surface: #fffdf8;
  --surface-alt: #efe8d8;
  --border: #d9cfba;
  --text: #26221a;
  --text-muted: #5f594c;
  --primary: #1d4d3b;
  --primary-strong: #143829;
  --primary-soft: #e2ebe5;
  --accent: #b3271e;
  --accent-strong: #8c1d15;
  --warning: #b9761c;
  --danger: #a33327;
  --nav-current: #ffd9a0;
  /* cream text on dark surfaces; intentionally the same value as --bg */
  --cream: var(--bg);

  /* shape */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgb(38 34 26 / 0.08), 0 1px 6px rgb(38 34 26 / 0.06);
  --shadow-md: 0 4px 16px rgb(38 34 26 / 0.2);

  /* type */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    serif;

  /* layout */
  --horzPad:clamp(0.5rem, 4vw, 2rem);
  --vertPad:clamp(0.5rem, min(2vw, 1vh), 2rem);
  --standardPad:var(--vertPad) var(--horzPad);
}

/* reset */
html,body,div,p,h1,h2,h3,h4,h5,h6,
ul,ol,li,dl,dt,dd,form,fieldset,caption,
table,tr,td,th,address,blockquote,img {
  margin:0;
  padding:0;
}
img, fieldset, object {
  border:none;
}
*, *:after, *:before {
  box-sizing:border-box;
}
button, label {
  cursor:pointer;
}
html, body {
  height:100%;
}
/* reset end */

body {
  margin: 0 auto;
  font-size:1rem;
  line-height:1.6;
  font-family:var(--font-body);
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgb(247 243 234 / 0.9), rgb(247 243 234 / 0.9)),
    url("/static/2031353-f44336.svg");
}

button, input, table, textarea, select {
  font-size:1rem;
  font-family: var(--font-body);
  color: var(--text);
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

h1 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
}

h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--accent);
  line-height: 1.3;
}

h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:visited {
  color: var(--accent);
}

a:hover {
  color: var(--accent-strong);
}

main {
  padding: var(--standardPad);
}

button {
  background: var(--primary);
  border: 1px solid var(--primary-strong);
  border-radius: var(--radius-sm);
  color: var(--cream);
  padding: 0.4em 1em;
  font-weight: 600;
  transition: background 0.15s;
}

button:hover {
  background: var(--primary-strong);
}

input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.35em 0.6em;
}

select {
  min-width: 10em;
}

input.is-invalid {
  border-color: var(--danger);
}

/* header */

#top {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem 2rem;
  margin: 0 auto;
  padding: 0.6rem var(--horzPad);
  background: var(--primary);
  color: var(--cream);
}

#top h1 {
  display: block;
  flex: 0 0 auto;
  color: var(--cream);
}

#mainMenu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-left: auto;
}

#mainMenu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#mainMenu ul li {
  list-style: none;
  flex: 0 0 auto;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  transition: background 0.15s;
}

#mainMenu ul li:hover {
  background: rgb(255 255 255 / 0.16);
}

#mainMenu a,
#mainMenu a:visited {
  color: var(--cream);
  text-decoration: none;
}

#mainMenu a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#mainMenu a[aria-current="page"] {
  color: var(--nav-current);
  font-weight: 600;
}

#mainMenu form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

#mainMenu form label {
  color: var(--cream);
  font-size: 0.875rem;
}

#mainMenu form select {
  min-width: 0;
  width: auto;
  padding: 0.3em 0.5em;
}

#mainMenu form button {
  padding: 0.3em 0.8em;
}

/* toasts */

#fauxBody > .messages {
  margin: var(--vertPad) var(--horzPad) 0;
}

.messages {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.messages > div {
  position: relative;
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(100%, 38rem);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 0.6em 2.5em 0.6em 1em;
  color: var(--text);
}

.messages > div.info {
  border-left-color: var(--primary);
  background: var(--primary-soft);
}

.messages > div.success {
  border-left-color: #2e7d4f;
  background: #e7f2ea;
}

.messages > div.warning {
  border-left-color: var(--warning);
  background: #f9efdd;
}

.messages > div.error {
  border-left-color: var(--danger);
  background: #f7e6e3;
}

.messages div label {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  display: flex;
  margin: 0;
  line-height: 1;
}

.messages div:has(input:checked) {
  display: none;
}

.messages p {
  min-width: 0;
}

.messages p span {
  padding-right: 0.5em;
}

.messages > div.info p span { color: var(--primary); }
.messages > div.success p span { color: #2e7d4f; }
.messages > div.warning p span { color: var(--warning); }
.messages > div.error p span { color: var(--danger); }

/* scroll container + modals */

#fauxBody,
.modal,
.modal > .modalClose {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow:auto;
  scroll-behavior: smooth;
}

.modal {
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  left: -200vw;
  opacity: 0;
  background: rgb(20 16 10 / 0.45);
  transition:left 0s 0.5s, opacity 0.5s;
}

.modalClose span {
  position:fixed;
  right:999em;
  top:0;
  opacity:0;
}

.modal:target {
  left: 0;
  opacity: 1;
  transition:opacity 0.3s;
}

.modal > div {
  position: relative;
  width: 100%;
  max-width: 32rem;
  margin: auto 1rem;
  padding: 1.25rem 1.5rem;
  align-items:center;
  justify-content:center;
  overflow: auto;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
}

.modal h2 {
  margin: 0 0 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--border);
}

.modal .modalClose {
  position: absolute;
  display: block;
  text-decoration: none;
}

.modal > * > .modalClose {
  top:0.5rem;
  right:0.5rem;
  font-size:1.25rem;
  line-height:1;
  color: var(--text-muted);
}

.modal > * > .modalClose:focus,
.modal > * > .modalClose:hover {
  color: var(--danger);
}

/* details/summary */

details {
  margin-bottom: 1rem;
}

summary {
  color: var(--primary);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

summary:hover {
  color: var(--primary-strong);
}

/* pill group (heat/participant filters) */

.pillGroup {
  margin-bottom: 1rem;
}

.pillGroupLabel {
  display: block;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.pillGroup ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin: 0;
}

.pillGroup ul li {
  display: inline-block;
}

.pillGroup ul li a {
  display: inline-block;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--primary);
  padding: 0.3rem 0.9rem;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.pillGroup ul li a:visited {
  color: var(--primary);
}

.pillGroup ul li a:hover {
  background: var(--surface-alt);
}

.pillGroup ul li.active a {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: var(--cream);
}

/* inline pill menu (admin tastings) */

.inlineMenu ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5em 0;
}

.inlineMenu ul li {
  display: inline-block;
  list-style: none;
  background: var(--primary-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  transition: background 0.15s;
}

.inlineMenu ul li:hover {
  background: var(--surface-alt);
}

.inlineMenu a,
.inlineMenu a:visited {
  color: var(--primary);
  text-decoration: none;
}

.inlineMenu a:hover {
  text-decoration: underline;
}

#notes ul {
  margin-left: 1em;
}

#notes ul li {
  color: var(--text);
}

/* tables */

table {
  width: 100%;
  border-collapse: collapse;
}

table td, table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
}

table thead th {
  background: var(--surface-alt);
  border-bottom: 2px solid var(--primary);
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  position: sticky;
  top: 0;
  z-index: 1;
}

table tbody td {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

table tbody tr:nth-child(even) td {
  background: rgb(38 34 26 / 0.03);
}

table tbody tr:hover td {
  background: var(--primary-soft);
}

table a {
  color: var(--primary);
}

/* sortable columns */

th:has(> div.fa-solid) {
  cursor: pointer;
}

th:has(> div.fa-solid) div {
  color: var(--text-muted);
  padding-right: 0.4em;
}

th:has(> div.fa-solid):hover div,
th[aria-sort="ascending"] div,
th[aria-sort="descending"] div {
  color: var(--accent);
}

/* result tables */

#resulttable tbody td,
#participantResulttable tbody td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#resulttable tbody td:nth-child(2),
#participantResulttable tbody td:nth-child(2) {
  text-align: left;
}

#resulttable tbody td[data-title="Heat"],
#participantResulttable tbody td[data-title="Heat"] {
  text-align: left;
}

#resulttable a.fa-info,
#resulttable a.fa-comment,
#participantResulttable a.fa-info,
#participantResulttable a.fa-comment {
  padding-left: 0.5em;
  padding-right: 0.5em;
  text-decoration: none;
}

#resulttable a.fa-info:hover,
#resulttable a.fa-comment:hover,
#participantResulttable a.fa-info:hover,
#participantResulttable a.fa-comment:hover {
  color: var(--accent);
}

#resulttable a.fa-info span,
#resulttable a.fa-comment span,
#participantResulttable a.fa-info span,
#participantResulttable a.fa-comment span {
  display: none;
}

/* beer info modal */

.beerInfo table {
  width: 100%;
}

.beerInfo img {
  height: 8rem;
  width: auto;
  max-width: 6rem;
  float: left;
  margin-right: 1.5em;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* tasting list (home) */

#tastings ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
  list-style: none;
}

#tastings ol li {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

#tastings ol li > header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

#tastings ol li > header img {
  width: 3rem;
  height: 3rem;
  flex: none;
}

#tastings ol li ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0;
  margin-top: 0.5em;
}

#tastings ol li ul li {
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  list-style: none;
  background: var(--primary-soft);
  transition: background 0.15s;
}

#tastings ol li ul li:hover {
  background: var(--primary);
}

#tastings ol li ul li a,
#tastings ol li ul li a:visited {
  color: var(--primary);
  text-decoration: none;
}

#tastings ol li ul li:hover a {
  color: var(--cream);
}

/* rating page */

#rateBeer {
  display: flex;
  flex-direction: column;
  max-width: 34rem;
}

#rateBeer form {
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0.75em 1em;
  margin-bottom: 0.5em;
}

#rateBeer form label {
  font-weight: 600;
  padding-bottom: 0.4em;
}

#rateBeer form input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

#rateBeer form output {
  position: relative;
  align-self: flex-start;
  margin-bottom: 0.4em;
  background-color: var(--accent);
  color: var(--cream);
  font-size: 0.8em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 2.5em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  text-align: center;
}

#rateBeer a {
  align-self: flex-start;
  display: inline-block;
  color: var(--cream);
  background-color: var(--primary);
  border: 1px solid var(--primary-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.4em 1em;
  font-weight: 600;
  transition: background 0.15s;
}

#rateBeer a:visited {
  color: var(--cream);
  text-decoration: none;
}

#rateBeer a:hover {
  background-color: var(--primary-strong);
  color: var(--cream);
}

/* beer pager */

#rateBeer + nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0;
  max-width: 34rem;
}

#rateBeer + nav ul li {
  display: inline;
}

#rateBeer + nav ul li a {
  display: inline-block;
  background: var(--primary);
  color: var(--cream);
  border-radius: 999px;
  padding: 0.25em 0.8em;
  text-decoration: none;
  transition: background 0.15s;
}

#rateBeer + nav ul li a:visited {
  color: var(--cream);
}

#rateBeer + nav ul li a:hover {
  background: var(--primary-strong);
  color: var(--cream);
}

#rateBeer + nav ul li.active a {
  background: var(--accent);
  border: 1px solid var(--accent-strong);
}

/* comment form */

.beerComment form {
  display: flex;
  flex-direction: column;
  gap: 1em;
  padding-top: 0.5em;
  color: var(--text);
}

#beerComment label {
  margin-bottom: 0.5em;
}

/* switches */

button.switch {
  margin: 0 0.25em 0 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  line-height: 1;
  vertical-align: middle;
  text-align: center;
  color: var(--text-muted);
  font-weight: 400;
}

button.switch span {
  padding: 0.35em 0.9em;
  pointer-events: none;
  font-size: 0.875em;
}

button.switch[aria-checked="false"] > span:first-child,
button.switch[aria-checked="true"] > span:last-child {
  background: var(--primary);
  color: var(--cream);
}

label.switch {
  vertical-align: middle;
  user-select: none;
}

/* mobile */

@media (max-width:48rem) {

  h1 + input ~ label {
    display:block;
    position:absolute;
    top:1.25rem;
    right:1rem;
    width:1.75rem;
    height:1.5rem;
    --gradColor: var(--cream);
    background:linear-gradient(
      0deg,
      var(--gradColor) 0% 20%,
      transparent 20% 40%,
      var(--gradColor) 40% 60%,
      transparent 60% 80%,
      var(--gradColor) 80% 100%
    );
    z-index: 2;
  }

  #mainMenuToggle:focus-visible + label {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  #top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  #mainMenu {
    margin-left: 0;
    width: 100%;
  }

  #mainMenu,
  #mainMenu ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  #mainMenu ul li {
    height: 0;
    padding: 0;
    border: none;
    background: none;
    overflow: visible;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #mainMenu ul li a {
    visibility: hidden;
  }

  #mainMenuToggle ~ nav a,
  #mainMenuToggle ~ nav form {
    position: absolute;
    top: -100%;
  }

  #mainMenuToggle:checked ~ nav ul li {
    height: 3rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 0.5rem;
    background: rgb(255 255 255 / 0.08);
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 999px;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #mainMenuToggle:checked ~ nav ul li a {
    visibility: visible;
    padding: 0.4rem 1rem;
  }

  #mainMenuToggle:checked ~ nav a,
  #mainMenuToggle:checked ~ nav form {
    position: static;
    top: 0;
  }

  #mainMenuToggle:checked ~ nav form {
    padding: 0.5rem 1rem;
  }

  .beerInfo img {
    height: 7rem;
    max-width: 4.5rem;
    margin-right: 1em;
  }

  /* tables become cards; header row becomes a row of sort chips */

  #fauxBody thead {
    display: block;
  }

  #fauxBody thead tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
  }

  #fauxBody thead th {
    position: static;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    padding: 0.3rem 0.85rem;
  }

  /* the Number column is not sortable */
  #fauxBody thead th:first-child {
    display: none;
  }

  #fauxBody thead th div {
    padding-right: 0;
  }

  #fauxBody thead th[aria-sort="ascending"],
  #fauxBody thead th[aria-sort="descending"] {
    background: var(--accent);
    border-color: var(--accent-strong);
    color: var(--cream);
  }

  #fauxBody thead th[aria-sort="ascending"] div,
  #fauxBody thead th[aria-sort="descending"] div {
    color: var(--cream);
  }

  #fauxBody tbody tr {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    margin-bottom: 0.5em;
    padding: 0.5rem 0.75rem;
  }

  #fauxBody tbody td {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    text-align: right;
    border-bottom: none;
    padding: 0.25rem 0;
    background: none;
  }

  #fauxBody tbody tr:hover td {
    background: none;
  }

  #fauxBody tbody td::before {
    content: attr(data-title);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.875em;
    white-space: nowrap;
  }

  #fauxBody tbody td:not([data-title])::before {
    display: none;
  }

  #fauxBody tbody td a {
    text-align: left;
  }

  .beerInfo table {
    width: auto;
  }
}

@media (max-width:32rem) {
  .modal > div {
    max-width: 24rem;
    padding: 1rem;
  }

  .beerInfo img {
    height: 6rem;
    max-width: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *:after, *:before {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}