/* // -----------------------------------------------------------------------------
// This file contains very basic styles.
// ----------------------------------------------------------------------------- */

/**
 * Set up a decent box model on the root element
 */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  padding-inline: 0;
  &::-webkit-scrollbar {
    display: none;
  }
}

html,
body {
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

* {
  box-sizing: border-box;
}

/*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */
::-moz-selection {
  background: #f1f1f1;
  text-shadow: none;
}
::selection {
  background: #f1f1f1;
  text-shadow: none;
}

::placeholder {
  text-overflow: ellipsis;
}

[placeholder] {
  text-overflow: ellipsis;
}

/**
   * Make all elements from the DOM inherit from the parent box-sizing
   * Since `*` has a specificity of 0, it does not override the `html` value
   * making all elements inheriting from the root box-sizing value
   * See: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
   */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
   * Basic styles for links
   */
a {
  color: var(--ion-text-color);
  text-decoration: none;

  &:active,
  &:focus {
    text-decoration: none;
  }
}

/*
   * A better looking default horizontal rule
   */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

img {
  height: auto;
  width: 100%;
}

/*
   * Remove default fieldset styles.
   */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
   * Allow only vertical resizing of textareas.
   */
textarea {
  resize: vertical;
}

main {
  position: relative;
}

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

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

  li {
    display: list-item;
    list-style: disc;
  }
}

a,
body,
button,
div,
footer,
form,
h1,
h2,
h3,
h4,
header,
html,
img,
figure,
input,
label,
li,
nav,
p,
select,
span,
table,
textarea,
ul {
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 100%;
}

input:-webkit-autofill {
  background-color: white !important;
  color: black !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ion-color-text);
  -webkit-box-shadow: 0 0 0px 40rem var(--ion-item-background) inset;
  background-color: #fff !important;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
  transition: background-color 5000s ease-in-out 0s;
}

html {
  &.plt-pwa {
    height: 100dvh;
  }
}

.wrp {
  box-sizing: border-box;
  padding: 0 2.5rem !important;
}

.row {
  display: table;
  width: 100%;
}

.row {
  margin-left: -0.625rem;
  margin-right: -0.625rem;
  width: calc(100% + 1.25rem);
}

.row:not(.flickity) {
  display: flex;
  flex-flow: wrap;
}

.row--center {
  align-items: center;
}

.col,
[class*=" col--"],
[class*=" col-tv--"],
[class^="col--"],
[class^="col-tv--"] {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  position: relative;
}

.col,
[class*=" col--"],
[class^="col--"] {
  box-sizing: border-box;
  float: left;
}

.col--1 {
  width: 100%;
}

.col--1-5 {
  width: 20%;
}

.col--1-12 {
  width: 8.3333333333%;
}

.col--2-12 {
  width: 16.6666666667%;
}

.col--3-12 {
  width: 25%;
}

.col--4-12 {
  width: 33.3333333333%;
}

.col--5-12 {
  width: 41.6666666667%;
}

.col--6-12 {
  width: 50%;
}

.col--7-12 {
  width: 58.3333333333%;
}

.col--8-12 {
  width: 66.6666666667%;
}

.col--9-12 {
  width: 75%;
}

.col--10-12 {
  width: 83.3333333333%;
}

.col--11-12 {
  width: 91.6666666667%;
}

@font-face {
  font-family: "EloquiaDisplay";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/Eloquia/Typekiln\ -\ EloquiaDisplay-Regular.otf") format("opentype");
}

@font-face {
  font-family: "EloquiaDisplay";
  font-style: normal;
  font-weight: 600;
  src: url("./assets/Eloquia/Typekiln\ -\ EloquiaDisplay-Bold.otf") format("opentype");
}

@font-face {
  font-family: "EloquiaDisplay";
  font-style: normal;
  font-weight: 500;
  src: url("./assets/Eloquia/Typekiln\ -\ EloquiaDisplay-SemiBold.otf") format("opentype");
}

@font-face {
  font-family: "EloquiaText";
  font-style: normal;
  font-weight: 400;
  src: url("./assets/Eloquia/Typekiln\ -\ EloquiaText-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 600;
  src: url("./assets/Syne/static/Syne-Bold.ttf") format("opentype");
}

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 500;
  src: url("./assets/Syne/static/Syne-SemiBold.ttf") format("opentype");
}

@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  src: url("./assets/Syne/static/Syne-ExtraBold.ttf") format("opentype");
}

@media (max-width: 679px) {
  .wrp {
    padding: 0 1rem !important;
  }

  .row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    width: calc(100% + 1rem);
  }

  .col,
  [class*=" col--"],
  [class*=" col-tv--"],
  [class^="col--"],
  [class^="col-tv--"] {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    position: relative;
  }

  .col-s--1 {
    width: 100%;
  }

  .col-s--1-2 {
    width: 50%;
  }

  .col-s--none {
    display: none;
  }
}