/* =========================================================
   PEPTIDEDEEPDIVE — GLOBAL SITE CSS
   Shared foundation for desktop, tablet and mobile
   ========================================================= */


/* ---------- CORE LAYOUT ---------- */

html {
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

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


/* ---------- STICKY FOOTER ---------- */

#wrapper {
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
}

#container {
  flex: 1 1 auto !important;
  min-width: 0;
}

footer#footer {
  flex-shrink: 0 !important;
}


/* ---------- MEDIA ---------- */

img,
picture,
video,
canvas {
  max-width: 100%;
  height: auto;
}

img {
  vertical-align: middle;
}

iframe {
  max-width: 100%;
}

svg {
  max-width: 100%;
}


/* ---------- TEXT ---------- */

p,
li,
blockquote,
figcaption,
td,
th {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


/* ---------- LINKS & CONTROLS ---------- */

a,
button {
  touch-action: manipulation;
}

button,
input,
textarea,
select {
  font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #92B9A4;
  outline-offset: 3px;
}


/* ---------- TABLES ---------- */

.mobile-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-table table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* ---------- TABLET & MOBILE ---------- */

@media (max-width: 768px) {

  main,
  section,
  article,
  aside,
  header,
  footer,
  nav,
  div {
    min-width: 0;
  }

  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
  }

  input,
  textarea,
  select {
    font-size: 16px;
  }

  .wp-block-image img,
  .wp-block-video video,
  .wp-block-cover img {
    max-width: 100%;
    height: auto;
  }

  .mobile-table,
  .wp-block-table {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
}


/* ---------- SMALL PHONES ---------- */

@media (max-width: 380px) {

  h1,
  h2,
  h3,
  p,
  a,
  li {
    overflow-wrap: anywhere;
  }
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}