@use "sass:math";

@use "../00-base/01-helpers/02-mixins" as *;
@use "../../00-theme/00-base/00-config/00-variables" as *;

////////////////////////////////////////////////////////////////////////////////
// *
// * reboot.css
// *
// * This needs to load before the other base files
// *
// * based on Bootstrap's reboot.css
// * based on normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css
// *
////////////////////////////////////////////////////////////////////////////////

*,
*::before,
*::after {
  box-sizing: border-box;
}

// * HTML & body
// =============================================================================

html {
  font-family: sans-serif;
  font-size: (math.div($rem-base, 16) * 100%); // this forms the base for our rem calculations
  line-height: 1.15; // force a consistent line-height
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  @include font-smoothing(on);
}

body {
  overflow-x: hidden;
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  text-align: left;
  text-rendering: optimizespeed;
  color: hsla(var(--clr-text, --clr-base));
  background-color: hsla(var(--clr-base-bg));
  scroll-behavior: smooth;
}

// ** to work with Dark Mode:
//    make a negative version of the design
//    define dark mode colors in the colors vars file
//    use this media query to use those vars

// @media (prefers-color-scheme: dark) {
//   color: hsl(var(--clr-white));
//   background-color: hsl(var(--clr-base));
// }


// * Sections
// =============================================================================

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}


// * Grouping content
// =============================================================================

figure {
  margin: 0;
}

hr {
  display: none;
}

pre {
  //
}

blockquote {
  //
}

// * Embedded content
// =============================================================================

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

svg:not(:root) {
  overflow: hidden;
}


// * Interactive
// =============================================================================

details, /* 1 */
menu {
  display: block;
}

summary {
  display: list-item;
}

output {
  display: inline-block;
}

a,
area,
button,
[role="button"],
input:not([type="range"]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}


// * Scripting
// =============================================================================

canvas {
  display: inline-block;
}

template {
  display: none;
}

// * Hidden
// =============================================================================

[hidden] {
  display: none !important;
}

// * Text-level semantics
// =============================================================================

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

p {
  margin: 0;
}

abbr[title],
abbr[data-original-title] {
  border-bottom: 0;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline;
  text-decoration: underline dotted;
  cursor: help;
}

address {
  margin-top: 0;
  margin-bottom: var(--gap-md);
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: var(--gap-md);
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: var(--fw-bold);
}

dd {
  margin-top: 0;
  margin-bottom: var(--gap-sm);
  margin-left: 0;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: var(--fw-black);
}

em,
i {
  font-style: italic;
}

small {
  font-size: 80%;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

pre,
code,
kbd,
samp {
  font-family: monospace;
  font-size: 1em;
}

// * Form
// =============================================================================

// button,
// input,
// optgroup,
// select,
// textarea {
//   box-sizing: border-box;
//   margin: 0;
//   font-family: $font-base;
//   font-size: 100%;
//   line-height: 1.15;
// }

label {
  display: inline-block;
  margin-bottom: .5rem;
}

button {
  border: 0 none;
  border-radius: 0;
}

input,
button,
select,
optgroup,
textarea {
  box-sizing: border-box;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  appearance: button;
  cursor: pointer;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"] {
  appearance: none;
  &::-webkit-calendar-picker-indicator {
    &:hover {
      background: none;
    }
  }
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  font-size: 1.5rem;
  line-height: inherit;
  white-space: normal;
  color: inherit;
  margin-bottom: .5rem;
}

progress {
  vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  outline-offset: -2px;
  appearance: none;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  appearance: none;
}

::-webkit-file-upload-button {
  font: inherit;
  appearance: button;
}

// * iFrames
// =============================================================================

// ** responsive iframes
// (except for video, there's a plugin that already makes those responsive)

.iframe-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  width: 100%;

  &--full {
    padding-bottom: 75%; // 75% = 4x3
  }

  & iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }
}

// * Helper classes
// =============================================================================

.pull-right,
[class*="col--"].pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.clear {
  clear: both;
}

.clearfix {
  @include clearfix;
}

// ** Overlap with Drupal classes

.hide,
.visually-hidden {
  @include hide;
}

.hide-text,
.hidden-text {
  @include hide-text;
}

// try to avoid this
// because not accessible
.hidden {
  display: none;
}

.invisible,
.element-invisible {
  visibility: hidden;
}

// * Hidden classes
// =============================================================================

// ** These classes are used to show/hide stuff per breakpoint

@include bp-xs-only {
  // ** show/hide on these breakpoints
  .hidden-xs {
    display: none !important;
  }

  .visible-xs {
    display: block !important;
  }

  .visible-sm {
    display: none !important;
  }

  .visible-md {
    display: none !important;
  }

  .visible-lg {
    display: none !important;
  }
}

@include bp-sm-only {
  // ** show/hide only on these devices
  .visible-xs {
    display: none !important;
  }

  .hidden-sm {
    display: none !important;
  }

  .visible-sm {
    display: block !important;
  }

  .visible-md {
    display: none !important;
  }

  .visible-lg {
    display: none !important;
  }
}


@include bp-md-only {
  // ** show/hide for these devices
  .visible-xs {
    display: none !important;
  }

  .visible-sm {
    display: none !important;
  }

  .hidden-md {
    display: none !important;
  }

  .visible-md {
    display: block !important;
  }

  .visible-lg {
    display: none !important;
  }
}


@include bp-lg {
  // ** show/hide for these devices
  .visible-xs {
    display: none !important;
  }

  .visible-sm {
    display: none !important;
  }

  .visible-md {
    display: none !important;
  }

  .visible-lg {
    display: block !important;
  }

  .hidden-lg {
    display: none !important;
  }
}


// * Webfont preloading
// =============================================================================

// ** before webfont is loaded

@if ($font-preloader) {
  html {
    /*
    just to make sure the <html>
    element shares the same dimensions as
    the browser window when loading
    (and not the potentially elongated page)
    */
    overflow: hidden;
    height: 100%;

    /*
    here's a background image (at a paltry 723bytes)
    to indicate something's happening
    */
    background: url("../images/generated/preloader.gif") no-repeat center center;
  }

  /*
  first things first, we need to hide everything,
  but bear in mind that this will only take effect
  once the loading script has taken effect.
  here we're hiding all content within
  the <html> once it has the class "wf-loading"
  */

  body {
    opacity: 0;
  }
}

// * Basic transitions
// =============================================================================

.animate-fade {
  transition: opacity $duration $easing-out;

  &:hover {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
