/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: 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;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* --- Global --- */
html {
  color: #fff;
  background: #0d0d0a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

body {
  margin: 0;
  min-height: 100vh;
}

a {
  color: #f5a623;
  text-decoration: none;
  transition: color 0.2s;
}

a:hover {
  color: #e8751a;
}

/* --- Navigation --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: rgba(13, 13, 10, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #222;
}

.site-nav .nav-brand {
  display: flex;
  align-items: center;
}

.nav-brand-sprite {
  display: block;
  width: 70px;
  height: 30px;
  background: url("../img/DAGt-table-210-90.png") 0 0 no-repeat;
  background-size: 840px 30px;
  animation: nav-sprite 0.8s steps(11) forwards;
}

@keyframes nav-sprite {
  to {
    background-position: -770px 0;
  }
}

.site-nav .nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav .nav-links a {
  color: #aaa;
  font-size: 0.95rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.site-nav .nav-links a:hover {
  color: #fff;
}

.site-nav .nav-links a.active {
  color: #f5a623;
  border-bottom-color: #f5a623;
}

/* --- Home page --- */
.home {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.home .home-hero {
  position: relative;
  height: 50vh;
  min-height: 250px;
  max-height: 500px;
  background: url("../img/dag-logo.png") center center / contain no-repeat;
}

.home .home-hero::before,
.home .home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40%;
  pointer-events: none;
}

.home .home-hero::before {
  top: 0;
  background: linear-gradient(to bottom, #0d0d0a, transparent);
}

.home .home-hero::after {
  bottom: 0;
  background: linear-gradient(to top, #0d0d0a, transparent);
}

.home-intro {
  position: relative;
  margin-top: -5rem;
  z-index: 1;
}

.home-intro p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #ccc;
  margin: 0 0 1.25rem;
}

.home-intro strong {
  color: #fff;
}

.home-intro a {
  color: #f5a623;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.home-intro a:hover {
  border-bottom-color: #f5a623;
}

/* --- Game Dev page --- */
.page-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.page-content h1 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #f5a623;
}

.category-section {
  margin-bottom: 3rem;
}

.category-section h2 {
  font-size: 1.35rem;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #222;
}

.game-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 1rem;
  border: 1px solid #222;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.game-thumb {
  flex-shrink: 0;
  width: 240px;
  height: 136px;
  object-fit: cover;
  border-radius: 4px;
  background: #111;
}

.game-screenshots {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}

.game-screenshots::-webkit-scrollbar {
  height: 4px;
}

.game-screenshots::-webkit-scrollbar-track {
  background: transparent;
}

.game-screenshots::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 2px;
}

.game-screenshots:empty {
  display: none;
}

.game-screenshots img {
  width: 160px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  background: #111;
  cursor: pointer;
}

.game-thumb {
  cursor: pointer;
}

/* --- Lightbox --- */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 4px;
}

.game-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.game-info .game-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
}

.game-info .game-desc {
  font-size: 0.9rem;
  color: #aaa;
  line-height: 1.4;
}

.game-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.game-platform {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #aaa;
  border: 1px solid #333;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

.game-platform::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: no-repeat center / contain;
}

.game-platform.windows::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 88'%3E%3Cpath fill='%23aaa' d='M0 12.4l35.7-4.8v35.1H0zm39.7-6.4L88 0v42.7H39.7zM88 45.3V88l-48.3-7V45.3zM35.7 80.4L0 75.6V45.3h35.7z'/%3E%3C/svg%3E");
}

.game-platform.mac::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23aaa' d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184 4 273.5c0 26.2 4.8 53.3 14.4 81.2 12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-62.1 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/%3E%3C/svg%3E");
}

.game-platform.playdate::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Crect x='1' y='2' width='13' height='12' rx='2' fill='none' stroke='%23aaa' stroke-width='1.5'/%3E%3Cline x1='14' y1='5' x2='18' y2='5' stroke='%23aaa' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='5' r='1.2' fill='%23aaa'/%3E%3C/svg%3E");
}

.game-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.game-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: #aaa;
  border: 1px solid #333;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  transition: color 0.2s, border-color 0.2s;
}

.game-link:hover {
  color: #f5a623;
  border-color: #f5a623;
}

.game-link::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: no-repeat center / contain;
}

/* itch.io — gamepad icon */
.game-link.itchio::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23aaa' d='M0 2.8C.5 1.4 1.5.3 2.6 0h10.8c1.1.3 2.1 1.4 2.6 2.8v1.5c0 1.2-1 2.2-2.1 2.2-1.2 0-2.2-1-2.2-2.2 0 1.2-.9 2.2-2.1 2.2s-2.1-1-2.1-2.2c0 1.2-1 2.2-2.1 2.2S3.2 5.3 3.2 4.3c0 1.2-1 2.2-2.1 2.2C.5 6.5 0 5.8 0 4.3V2.8zm1.3 4.9c.4.1.9.2 1.3.2.9 0 1.6-.4 2.2-1 .5.6 1.3 1 2.2 1s1.6-.4 2.2-1c.5.6 1.3 1 2.2 1 .4 0 .9-.1 1.3-.2v5.6c0 .5-.2.9-.5 1.2L10 16H6l-2.2-1.5c-.3-.3-.5-.7-.5-1.2V7.7zm3.5 2.1v2.4h6.3V9.8H4.8z'/%3E%3C/svg%3E");
}
.game-link.itchio:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f5a623' d='M0 2.8C.5 1.4 1.5.3 2.6 0h10.8c1.1.3 2.1 1.4 2.6 2.8v1.5c0 1.2-1 2.2-2.1 2.2-1.2 0-2.2-1-2.2-2.2 0 1.2-.9 2.2-2.1 2.2s-2.1-1-2.1-2.2c0 1.2-1 2.2-2.1 2.2S3.2 5.3 3.2 4.3c0 1.2-1 2.2-2.1 2.2C.5 6.5 0 5.8 0 4.3V2.8zm1.3 4.9c.4.1.9.2 1.3.2.9 0 1.6-.4 2.2-1 .5.6 1.3 1 2.2 1s1.6-.4 2.2-1c.5.6 1.3 1 2.2 1 .4 0 .9-.1 1.3-.2v5.6c0 .5-.2.9-.5 1.2L10 16H6l-2.2-1.5c-.3-.3-.5-.7-.5-1.2V7.7zm3.5 2.1v2.4h6.3V9.8H4.8z'/%3E%3C/svg%3E");
}

/* Playdate Catalog — crank device icon */
.game-link.playdate-catalog::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Crect x='1' y='2' width='13' height='12' rx='2' fill='none' stroke='%23aaa' stroke-width='1.5'/%3E%3Cline x1='14' y1='5' x2='18' y2='5' stroke='%23aaa' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='5' r='1.2' fill='%23aaa'/%3E%3C/svg%3E");
}
.game-link.playdate-catalog:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'%3E%3Crect x='1' y='2' width='13' height='12' rx='2' fill='none' stroke='%23f5a623' stroke-width='1.5'/%3E%3Cline x1='14' y1='5' x2='18' y2='5' stroke='%23f5a623' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='18' cy='5' r='1.2' fill='%23f5a623'/%3E%3C/svg%3E");
}

/* Local download — arrow-down icon */
.game-link.download::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23aaa' d='M8 1v8.6l2.8-2.8 1.4 1.4L8 12.4 3.8 8.2l1.4-1.4L8 9.6V1zm-6 12h12v2H2z'/%3E%3C/svg%3E");
}
.game-link.download:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f5a623' d='M8 1v8.6l2.8-2.8 1.4 1.4L8 12.4 3.8 8.2l1.4-1.4L8 9.6V1zm-6 12h12v2H2z'/%3E%3C/svg%3E");
}

/* More info — circle-i icon */
.game-link.more-info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23aaa' stroke-width='1.5'/%3E%3Cpath fill='%23aaa' d='M7.2 7h1.6v4.5H7.2zm0-2.5h1.6V6H7.2z'/%3E%3C/svg%3E");
}
.game-link.more-info:hover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23f5a623' stroke-width='1.5'/%3E%3Cpath fill='%23f5a623' d='M7.2 7h1.6v4.5H7.2zm0-2.5h1.6V6H7.2z'/%3E%3C/svg%3E");
}

.status-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: fit-content;
}

.status-tag.published {
  background: #f5a623;
  color: #000;
}

.status-tag.in-dev {
  background: #e8751a;
  color: #000;
}

.status-tag.older {
  background: #333;
  color: #aaa;
}

/* --- Links page --- */
.links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 480px;
}

.links-list li {
  margin-bottom: 0.5rem;
}

.links-list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: #111;
  border-radius: 8px;
  font-size: 1.05rem;
  color: #fff;
  transition: background 0.2s, color 0.2s;
}

.links-list a:hover {
  background: #1a1a1a;
}

.link-icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  background: no-repeat center / contain;
}

.link-icon.instagram {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23E4405F' d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9S160.5 370.9 224.1 370.9 339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1S3.8 127.8 2 163.7c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}

.link-icon.steam {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 496 512'%3E%3Cpath fill='%2366c0f4' d='M496 256c0 137-111.2 248-248.4 248-113.3 0-209.2-76.3-238-180.2l66.1 27.2c2.4 18.3 13 34.6 29.4 43.5 24.2 13.2 54.4 8 73.4-11.6l97.7-71.1c44.2.3 80-35.5 80-79.8s-35.9-80.1-80.1-80.1c-39.8 0-73.2 29.3-79.1 67.5l-70 97.4c-21 1.3-40.1 12.3-51.2 30.1L1.6 241C16.5 117.6 124.1 20.2 254 17c137.2-3.3 242 108.7 242 239zm-185.3-53.8c0-30.7-25-55.7-55.7-55.7s-55.7 25-55.7 55.7 25 55.7 55.7 55.7 55.7-25 55.7-55.7zm-155.2 91.6l-30.5-12.6c5.7 23.1 27.5 39.6 52.3 37.6 28-2.2 49-27 46.8-55.1-2.2-27.5-26.5-48.4-54-46.8l31.5 13c22.7 9.4 33.5 35.5 24.1 58.2-9.4 22.7-35.5 33.5-58.2 24.1v-.4z'/%3E%3C/svg%3E");
}

.link-icon.linkedin {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%230A66C2' d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 01107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.83-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E");
}

.link-icon.youtube {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23FF0000' d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
}

.link-icon.itchio {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FA5C5C' d='M0 2.8C.5 1.4 1.5.3 2.6 0h10.8c1.1.3 2.1 1.4 2.6 2.8v1.5c0 1.2-1 2.2-2.1 2.2-1.2 0-2.2-1-2.2-2.2 0 1.2-.9 2.2-2.1 2.2s-2.1-1-2.1-2.2c0 1.2-1 2.2-2.1 2.2S3.2 5.3 3.2 4.3c0 1.2-1 2.2-2.1 2.2C.5 6.5 0 5.8 0 4.3V2.8zm1.3 4.9c.4.1.9.2 1.3.2.9 0 1.6-.4 2.2-1 .5.6 1.3 1 2.2 1s1.6-.4 2.2-1c.5.6 1.3 1 2.2 1 .4 0 .9-.1 1.3-.2v5.6c0 .5-.2.9-.5 1.2L10 16H6l-2.2-1.5c-.3-.3-.5-.7-.5-1.2V7.7zm3.5 2.1v2.4h6.3V9.8H4.8z'/%3E%3C/svg%3E");
}

.link-icon.email {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaa' d='M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4 0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z'/%3E%3C/svg%3E");
}

/* --- Responsive --- */
@media (max-width: 600px) {
  .site-nav {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
  }

  .site-nav .nav-links {
    gap: 1rem;
  }

  .home {
    padding: 0 1rem 3rem;
  }

  .home .home-hero {
    height: 35vh;
    min-height: 180px;
  }

  .home-intro {
    margin-top: -3rem;
  }

  .home-intro p {
    font-size: 0.95rem;
  }

  .game-entry {
    flex-direction: column;
    gap: 0.75rem;
  }

  .game-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .page-content {
    padding: 1.5rem 1rem 3rem;
  }
}

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

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}