@import "normalize.css";
@import "balloon.css";

/**
=========
Vars
=========
*/

:root {
  --color-primary: #489fd9;
  --color-primary-light: #abd9f7;
  --color-primary-400: #3d7da9;
  --color-primary-300: #315d7c;
  --color-primary-200: #253e52;
  --color-primary-100: #151d24;
  --color-accent: #e37dd7;
  --color-accent-light: #f794d5;
  --color-accent-400: #b163a8;
  --color-accent-300: #824b7b;
  --color-accent-200: #563351;
  --color-accent-100: #2d1d2a;

  --color-body: #dfedf7;
  --color-muted: #a3c1d4;
  --color-background: var(--color-primary-100);
  --anchor-color: #e3ddf0;
  --anchor-color-hover: var(--color-accent-light);
  --border-color: var(--color-primary-300);
  --border-color-accent: var(--color-accent);
  --balloon-color: var(--color-primary-400);

  --color-info: var(--color-primary);
  --color-success: #59c27c;
  --color-warning: #f0ee78;
  --color-danger: #cf4d4a;

  --font-size-sm: .875rem;
  --font-size-regular: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xlg: 2rem;
  --font-size-xxlg: 3rem;
}


$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;

$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge(
  (
    0: 0,
    1: (
      $spacer * 0.25
    ),
    2: (
      $spacer * 0.5
    ),
    3: $spacer,
    4: (
      $spacer * 1.5
    ),
    5: (
      $spacer * 2.5
    ),
  ),
  $spacers
);

$grid-breakpoints: (
  xs: 0,
  // sm: 576px,
  md: 768px,
  // lg: 992px,
  // xl: 1280px
) !default;

@import "helpers.scss";
@import "carousel.scss";
@import "button.scss";
@import "select.scss";

/**
=========
Elemens
=========
*/

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

body {
  display: flex;
  font: normal 1rem/1.5 system-ui, sans-serif;
  color: var(--color-body);
  background-color: var(--color-background);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.1;
}

a {
  color: inherit;
  transition: color .1s ease-in;
}

a:hover {
  color: var(--anchor-color-hover);
}

a:visited {
  text-decoration: dotted;
}

:target {
  color: var(--anchor-color-hover);
}

code {
  font-family: ui-monospace, Menlo, Monaco, Courier New, monospace;
}

hr {
  border-top: 1px solid var(--border-color);
  border-bottom: 0;
}

dl {

}

dt {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
}

dd {
  margin: 0 0 1rem 0;
  font-size: var(--font-size-sm);
}

.badge {
  padding: .1875rem .375rem;
  border-radius: .5rem;
  text-decoration: none;
  color: var(--color-muted);
  background-color: var(--color-primary-300);
  /* transition: border-color .1s ease-in; */
}

.badge--outline {
  padding: .1875rem .375rem;
  border: 2px solid var(--color-primary-300);
  border-radius: .5rem;
  text-decoration: none;
  color: var(--color-muted);
  transition: border-color .1s ease-in;
}

.badge--outline:hover {
  border-color: var(--anchor-color-hover);
}


.badge--pill {
  border-radius: 1rem;
}

.badge-res {
  background: var(--color-primary-200);
  color: #fff;
  padding: 0 3px;
  border-radius: 4px;
  font-size: 12px;
  text-shadow: 1px 1px 0 #4d5078;
}

.badge-2160 {
  background: #b82927;
}

.badge-1080 {
  background: #e0560b;
}

.badge-720 {
  background: var(--color-accent);
}

.badge-480 {
  background: #269ddb;
}

.torrent-hi {}

.torrent-medium {
  color: var(--color-warning);
}

.torrent-low {
  color: var(--color-danger);
}

/* FORMS */

fieldset {
  padding: 0;
  margin: 0;
  border: 0;  
}

legend {
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-muted);
}

/* TABLES */

.report,
.table {
  border-collapse: collapse;
}

.table td {
  padding: 0.1875rem 0.5rem 0.1875rem 0;
}

.table tr {
  transition: background-color .1s ease-out;
}

.table tr:hover  {
  background-color: #253e52;
}

.report td {
  padding: 0.25em 2rem 0.25rem 0;
  // border-bottom: 1px solid var(--color-primary-200);
}

.report th,
.table th {
  padding: 0.375rem 0.5rem 0.375rem 0;
  border-bottom: 1px solid var(--color-primary-200);
  color: var(--color-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
}

/* CARDS */

@media screen and (min-width: 768px) {
  .card-series {
    max-width: 10rem;
  }
}

.card-series__image {
  aspect-ratio: 500 / 750;
  transition: transform .2s ease-out, filter .3s ease-out, box-shadow .2s ease-out;
  border: 2px solid var(--color-primary-200);
  box-shadow: var(--color-primary-200) 0 0;
  background-color: var(--color-accent-200);
  background-position: top left;
  background-image: linear-gradient(125deg, var(--color-accent-400) 25%, transparent 25%)
}

a:hover .card-series__image {
  transform: translate(-7px, -7px);
  filter: brightness(1.25);
  box-shadow: var(--color-primary-200) 7px 7px;
}

.card-tag {
  position: relative;
  aspect-ratio: 300 / 170;  
  border: 2px solid var(--color-primary-300);
  background-color: var(--color-primary-300);
}

a:hover .card-tag {
  border-color: var(--color-accent);
  // transition: border-color .1s ease-in;
}

.card-tag__name {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;  
  z-index: 1;
  inset: 0;
  text-transform: uppercase;
  font-size: var(--font-size-lg);
  letter-spacing: .1rem;
  text-shadow: 1px 1px 1px var(--color-primary-300);
  background-image: linear-gradient(rgba(61, 125, 169, 0.35) 20%, rgba(61, 125, 169, 0.9) 100%);
  font-weight: 600;
}


.search-query {
  position: relative;
  width: min-content;
}

.search-query input {
  padding: .75rem .5rem;
  background: var(--color-background);
  border: 2px solid var(--color-primary-400);
  color: var(--color-primary-light);
  border-radius: .5rem;
  font-size: var(--font-size-lg);
  // box-shadow: 0 0 5px 2px var(--color-primary), inset 0 0 2px 1px var(--color-primary);
}

/* Hide arrow on Chrome https://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chrome */
.search-query input::-webkit-calendar-picker-indicator {
  display: none !important;
}


@media screen and (min-width: 768px) {
  .search-query input {
    width: 35rem;
  }
}

.search-query input:focus-visible {
  outline: none;
  // box-shadow: 0 0 5px 2px var(--color-accent), inset 0 0 2px 1px var(--color-accent);
  border: 2px solid var(--anchor-color-hover);
}

input::placeholder {
  color: var(--color-primary-300);
}

.search-query button {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding: .75rem;
  /* border: 2px solid var(--color-primary-400); */
  border: 0;
  /* border-left: 0; */
  /* border-top-right-radius: .5rem;
  border-bottom-right-radius: .5rem; */
  /* background: var(--color-primary);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(29, 41, 43, 1) 100%);
  background-blend-mode: overlay; */
  background: var(--color-background);
  background: transparent;
  /* color: var(--color-background); */
  cursor: pointer;
  /* transition: color .1s ease-in; */
  font-size: var(--font-size-lg);
  /* box-shadow: 0 0 5px 2px var(--color-primary);  */
}

.search-query button img {}


a:hover .card-episode__poster,
a:hover .card-episode__image,
.btn-text:hover .card-episode__image {
  border-color: var(--color-accent);
  transition: border-color .1s ease-in;
}


.header .btn-icon:hover {
  background-color: var(--color-primary-300);
  transition: background-color .2s ease-out;
}

.header {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  gap: .5rem;
  flex-direction: column;
  background: var(--color-primary-200);
}

.header .btn-icon {
  padding: .75rem;
}

/* Recolor icons site-wide, see generator at https://codepen.io/sosuke/pen/Pjoqqp */
.icon,
.header .btn-icon img {
  filter: invert(88%) sepia(3%) saturate(2496%) hue-rotate(185deg) brightness(106%) contrast(94%);
}

.header .btn-icon:hover img {
  filter: invert(78%) sepia(13%) saturate(3097%) hue-rotate(274deg) brightness(96%) contrast(85%);
}

@media screen and (min-width: 768px) {
  .header {

    /* justify-content: space-between; */
    align-items: center;
    /* padding: 1rem 0;
    margin: 0 0 2rem 0; */
  }

  nav {
    /* Push right */
    /* margin-left: auto; */
    background: none;
  }

  /* nav .btn-icon {
    padding: 0;
  } */
}

main {
  flex-grow: 1;
  padding: 3rem;
}

.footer {
  color: var(--color-muted);
}

aside {
  flex-basis: 14rem;
  flex-shrink: 0;
}

.main-column {
  flex-grow: 1;
}

// .today-series {
//   display: grid;
//   grid-template-columns: 1fr 2fr;  
//   gap: 3rem;
//   align-items: center;
// }

.card-episode {
  position: relative;
}

.card-episode__image {
  aspect-ratio: 300 / 170;  
  transition: transform .2s ease-out, filter .3s ease-out, box-shadow .2s ease-out;
  border: 2px solid var(--color-primary-300);
  // box-shadow: var(--color-primary-200) 0 0;
  background-position: top left;
  background-color: var(--color-accent-200);
  background-image: linear-gradient(125deg, var(--color-accent-400) 25%, transparent 25%);
}

.card-episode__poster {
    max-width: 75px;
    position: absolute;
    bottom: -1rem;
    right: 1rem;
    z-index: 1;
    border: 2px solid var(--color-primary-300);
}

// a:hover .card-episode__image {
//   transform: translate(-7px, -7px);
//   filter: brightness(1.25);
//   box-shadow: var(--color-primary-200) 7px 7px;
// }

.series-poster__image {
  aspect-ratio: 500 / 750;
  border: 2px solid var(--color-primary-200);
  background-position: top left;
  background-color: var(--color-accent-200);
  background-image: linear-gradient(125deg, var(--color-accent-400) 25%, transparent 25%);
}

@media screen and (min-width: 768px) {
  .series-poster__image {
    box-shadow: var(--color-primary-200) 7px 7px;
  }
}

.episode-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: 2rem;
}

.episode-grid__cell {
  max-width: 300px;
}

/* .episode-grid__cell .view-all {
  visibility: hidden;
}

.episode-grid__cell:hover .view-all {
  visibility: visible;
} */

/* .series-vote {
  position: absolute;
  bottom: -3rem;
  left: calc(50% - 2rem);
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--color-muted);
  border: .25rem solid var(--color-primary-400);
  background: var(--color-primary-100);
}

.series-vote span { 
  font-weight: 900;
  color: var(--color-accent-light);
  font-size: 1.5rem;
} */


.body-copy,
.series-overview {
  max-width: 75ch;
}

.fanart {
  /* Bleed background into parent container */
  margin-top: -3rem;
  margin-right: -3rem;
  margin-left: -3rem;
  padding: 3rem 3rem 3rem 3rem;
  background-position: top center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: multiply;
  background-color: var(--color-accent-100);
}

@media screen and (min-width: 768px) {
  .top-series-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

@media screen and (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 2rem;
  }
}

dialog {
  background: transparent;
  border: 0;
  opacity: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  color: var(--color-body);
  /* transition: transform .3s ease-out, opacity .3s ease-out;
  transform: translate(0%, -5%); */
  /* Reset browser defaults */
  max-width: unset;
  max-height: unset;
  pointer-events: none;
}

dialog.in {
  pointer-events: auto;
  opacity: 1;
  transition: opacity .3s ease-out;  
}

dialog.out {
  opacity: 0;  
  /* Wait 2s before disappear */
  transition: opacity .3s ease-out 2s;
}


.dialog-body {
  width: 30rem;
  background: var(--color-primary-200);
  padding: 2rem;
  border-radius: 1rem;
}

.dialog-body--small {
  width: 16rem;
}

// .dialog-body--toast {
//   position: absolute;
//   top: 1.5rem;
//   right: 1.5rem;
//   width: 16rem;
//   z-index: 10;
//   background: var(--color-primary-200);
//   padding: 1rem;
//   border-radius: .5rem;
// }

dialog:modal {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
  /* transform: translate(0%, 0%); */
}

dialog::backdrop {
  background: rgba(21, 29, 39, .75);
}

/* dialog button[name="close"] {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
} */

/* Animations  */

.anim-spin {
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* A11y */

.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

.skip-nav a {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-nav a:focus {
  position: static;
  width: auto;
  height: auto;
}



/*  
  CSS mobile carousel, see: 
  https://css-tricks.com/can-get-pretty-far-making-slider-just-html-css/
*/

.mobile-carousel {
  display: flex;
  gap: 1.5rem;
}

@media screen and (max-width: 767.98px) {
  .mobile-carousel {
    display: flex;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    margin: 0 -1rem 0 0;
  }

  .mobile-carousel>.mobile-carousel__item {
    scroll-snap-align: start;
    flex-shrink: 0;
    /* 50% of the viewport width */
    flex-basis: 50vw;
  }

  /* On mobile we want the swiping behavior but not the scroll bar */
  .mobile-carousel::-webkit-scrollbar {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  .mobile-carousel {
    gap: 2rem;
    /* justify-content: space-between; */
  }
}

/* Radio button group  */

.radio-button-group {
  display: flex;
  border: 2px solid var(--color-primary-400);
  color: var(--color-primary-light);
  border-radius: .5rem;
  // box-shadow: 0 0 5px 2px var(--color-primary), inset 0 0 2px 1px var(--color-primary);
  font-size: var(--font-size-sm);
  background-color: var(--color-primary-100);
}

.radio-button-group__label {
  align-items: center;
  display: inline-flex;
  /* border-right: 1px solid var(--border-color); */
  border-radius: .4rem;
  padding: 0.5rem;
  background-color: transparent;
  color: var(--color-body);
  cursor: pointer;
}

/* .radio-button-group__label:last-child {
  border-right-color: transparent;
} */

.radio-button-group__label:has(input:checked) {
  /* For selected radio */
  background-color: var(--color-primary-300);
  /* color: var(--color-primary-100); */
}

.radio-button-group__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;  
}

/* Progress  */

progress {
  accent-color: var(--color-accent-light);
}

/* Chart  */

.chart {
  max-width: 100%;
}