/*
Theme Name: Cyber Breach
Theme URI: http://properdesign.rs
Description: ChangeMe Wordpress Theme
Author: Proper Design
Author URI: http://properdesign.rs
Version: 1
Tags:
*/
@import url("https://fonts.googleapis.com/css2?family=Tomorrow:wght@300&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
img[class*=wp-image-],
.wp-caption {
  display: block;
  max-width: 100%;
  height: auto;
}

.alignleft {
  float: left;
  margin: 0 1em 1em 0;
}

.alignright {
  float: right;
  margin: 0 0 1em 1em;
}

.gallery {
  margin: 1em -0.5em;
}

.gallery-item {
  padding: 0.5em;
  margin: 0;
  display: inline-block;
  position: relative;
  vertical-align: top;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}
.gallery-item figcaption {
  margin-top: 0.5em;
}

.gallery-columns-1 .gallery-item {
  width: 100%;
}

.gallery-columns-2 .gallery-item {
  width: 50%;
}

.gallery-columns-3 .gallery-item {
  width: 33.3333333333%;
}

.gallery-columns-4 .gallery-item {
  width: 25%;
}

.gallery-columns-5 .gallery-item {
  width: 20%;
}

.gallery-columns-6 .gallery-item {
  width: 16.6666666667%;
}

.gallery-columns-7 .gallery-item {
  width: 14.2857142857%;
}

.gallery-columns-8 .gallery-item {
  width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  width: 11.1111111111%;
}

/*
 * Hide only visually, but have it available for screen readers: h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

:root {
  --color-turquoise: #29b4aa;
  --color-green: #89eb3c;
  --color-teal: #0a3739;
  --color-turquoise-900: color-mix(
  	in srgb,
  	var(--color-turquoise) 20%,
  	var(--color-teal)
  );
  --color-turquoise-800: color-mix(
  	in srgb,
  	var(--color-turquoise) 40%,
  	var(--color-teal)
  );
  --color-turquoise-700: color-mix(
  	in srgb,
  	var(--color-turquoise) 60%,
  	var(--color-teal)
  );
  --color-turquoise-600: color-mix(
  	in srgb,
  	var(--color-turquoise) 80%,
  	var(--color-teal)
  );
  --color-turquoise-500: var(--color-turquoise);
  --color-turquoise-400: color-mix(in srgb, var(--color-turquoise) 80%, white);
  --color-turquoise-300: color-mix(in srgb, var(--color-turquoise) 60%, white);
  --color-turquoise-200: color-mix(in srgb, var(--color-turquoise) 40%, white);
  --color-turquoise-100: color-mix(in srgb, var(--color-turquoise) 20%, white);
  --color-green-900: color-mix(in srgb, var(--color-green) 20%, black);
  --color-green-800: color-mix(in srgb, var(--color-green) 40%, black);
  --color-green-700: color-mix(in srgb, var(--color-green) 60%, black);
  --color-green-600: color-mix(in srgb, var(--color-green) 80%, black);
  --color-green-500: var(--color-green);
  --color-green-400: color-mix(in srgb, var(--color-green) 80%, white);
  --color-green-300: color-mix(in srgb, var(--color-green) 60%, white);
  --color-green-200: color-mix(in srgb, var(--color-green) 40%, white);
  --color-green-100: color-mix(in srgb, var(--color-green) 20%, white);
  --color-neutral-900: var(--color-teal);
  --color-neutral-800: color-mix(in srgb, var(--color-teal) 80%, white);
  --color-neutral-700: color-mix(in srgb, var(--color-teal) 70%, white);
  --color-neutral-600: color-mix(in srgb, var(--color-teal) 60%, white);
  --color-neutral-500: color-mix(in srgb, var(--color-teal) 50%, white);
  --color-neutral-400: color-mix(in srgb, var(--color-teal) 40%, white);
  --color-neutral-300: color-mix(in srgb, var(--color-teal) 30%, white);
  --color-neutral-200: color-mix(in srgb, var(--color-teal) 20%, white);
  --color-neutral-100: color-mix(in srgb, var(--color-teal) 10%, white);
  --img-gradient: linear-gradient(transparent 80%, black);
  --img-hex: url("./assets/svg/src/hex-tile.svg");
  --font-body: "Work Sans", sans-serif;
  --font-body-height: 1.4;
  --font-headings: "Tomorrow", sans-serif;
  --color-surface: var(--color-neutral-900);
  --color-text: var(--color-neutral-100);
  --color-brand: var(--color-turquoise-500);
  --color-accent: var(--color-green-500);
  --shadow-low: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.5);
  --length-spacer: clamp(1rem, 0.5rem + 1vw, 2rem);
  --length-pageMax: 100ch;
  --length-wide: 140ch;
  --length-borderRadius: 0.2rem;
  --length-admin-bar: 32px;
}
@media (width <= 782px) {
  :root {
    --length-admin-bar: 46px;
  }
}

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
  font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);
  box-sizing: border-box;
  background-color: var(--color-surface);
}

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

body {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 300;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  color: var(--color-text);
  background-image: var(--img-gradient), var(--img-hex);
  background-size: cover, 2rem;
  background-position: 50%;
  background-attachment: fixed;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-headings);
  font-weight: normal;
  color: var(--color-brand);
  text-wrap: balance;
}

h3 {
  color: var(--color-accent);
}

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  color: var(--color-brand);
  background: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
}

tr {
  border-bottom: solid thin;
}

td, th {
  vertical-align: top;
  padding: 0.5em;
}

.field-wrapper {
  display: grid;
}

fieldset {
  padding: 0;
  border: none;
  display: grid;
  gap: var(--length-spacer);
  padding-bottom: var(--length-spacer);
}

[type=text],
[type=email],
textarea {
  color: var(--color-surface);
  background-color: var(--color-text);
  padding: 0.5rem;
  border: none;
  font-size: inherit;
  border-radius: var(--length-borderRadius);
  &:focus {
    background-color: white;
  }
}

textarea {
  min-height: 12rem;
}

button {
  border: none;
  font-size: inherit;
  font-family: var(--font-headings);
  font-weight: 700;
  line-height: 1;
  padding: 0.5em 0.7em;
  background-color: var(--color-accent);
  border-radius: var(--length-borderRadius);
  text-transform: uppercase;
  box-shadow: var(--shadow-low);
}

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
  margin: 0;
  max-width: 100%;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

iframe[src*=youtu],
iframe[src*=vimeo] {
  display: block;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

.siteHeader-wrapper {
  display: grid;
  background-color: var(--color-surface);
  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.2));
  color: white;
  a {
    color: currentColor;
    text-decoration: none;
  }
}
@media (width > 50rem) {
  .siteHeader-wrapper {
    grid-template-columns: max-content 1fr;
    align-items: center;
  }
}

.siteHeader {
  padding: var(--length-spacer);
}

.siteHeader-logo {
  display: block;
  width: clamp(6rem, 6rem + 5vw, 20vw);
  height: auto;
}

.siteNav-wrapper {
  padding-inline: calc(var(--length-spacer) / 2);
  .menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
  }
  .siteNav-toggle {
    display: none;
    background-color: transparent;
    border: solid thin;
  }
  .menu-item {
    min-width: max-content;
    white-space: nowrap;
    padding: calc(var(--length-spacer) / 2);
  }
  .menu-item.current-menu-item {
    a {
      text-decoration: underline;
      text-underline-offset: 0.2em;
    }
  }
}
@media (width <= 50rem) {
  .siteNav-wrapper {
    border-top: solid thin var(--color-accent);
  }
}
@media (width > 50rem) {
  .menu {
    justify-content: flex-end;
  }
}

.siteNav-wrapper.squish-ready {
  .menu {
    flex-wrap: wrap;
  }
}

.siteNav-wrapper.too-small {
  .siteNav-toggle {
    display: block;
  }
  .menu {
    overflow: hidden;
    width: 1px;
    height: 1px;
  }
}

.siteNav-wrapper.too-small.is-open {
  .menu {
    margin: auto;
    padding: var(--length-spacer);
    background-color: rgba(black, 0.8);
    position: fixed;
    inset: 2rem;
    width: max-content;
    height: max-content;
    flex-direction: column;
    text-align: center;
  }
}

.siteFooter-wrapper {
  padding: var(--length-spacer);
}

.siteFooter-hcard-logo {
  height: 3rem;
}

.pagination {
  padding: var(--length-spacer);
  display: flex;
  justify-content: center;
}

.teaser {
  background-color: var(--color-surface);
  border-radius: var(--length-borderRadius);
  overflow: clip;
  box-shadow: var(--shadow-low);
}

.teaser-image-wrapper {
  background-color: var(--color-turquoise-500);
  display: block;
  padding: 0;
}

.teaser-image {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale();
  mix-blend-mode: hard-light;
}

.teaser-content {
  padding: var(--length-spacer);
}

.emulatorTeaser {
  margin: auto;
  max-width: var(--length-wide);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-low);
  align-items: center;
  border-radius: var(--length-borderRadius);
  overflow: clip;
  display: grid;
}
@container (width > 50ch) {
  .emulatorTeaser {
    grid-template-columns: 1fr 1fr;
  }
}
@container (width > 80ch) {
  .emulatorTeaser {
    grid-template-columns: 1fr 2fr;
  }
}

.emulatorTeaser-content {
  padding: var(--length-spacer);
}

.emulatorTeaser-image {
  display: block;
  aspect-ratio: 16/9;
  width: 100%;
  height: auto;
}

.benefitsTable {
  h2 {
    color: var(--color-accent);
  }
  background-color: var(--color-turquoise-900);
  padding: var(--length-spacer);
  display: grid;
  gap: var(--length-spacer);
}
@media (width > 50rem) {
  .benefitsTable {
    grid-template-columns: 1fr 1fr;
  }
}
@media (width > 100rem) {
  .benefitsTable {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.benefitsTable-header,
.benefitsTable-footer {
  z-index: 0;
  grid-column: 1/-1;
}

.card {
  container-type: inline-size;
}

.card-inner {
  display: grid;
}
@container (width > 20rem) {
  .card-inner {
    grid-template-columns: 6rem 1fr;
  }
}

.card-icon {
  aspect-ratio: 1;
  max-width: 6rem;
}

.eventsList {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--length-spacer);
}

.eventTeaser {
  background: var(--color-surface);
  padding: calc(var(--length-spacer) / 2);
  box-shadow: var(--shadow-low);
  border-top: solid thin var(--color-accent);
  &.past {
    opacity: 0.5;
  }
}
@media (width > 40em) {
  .eventTeaser {
    display: flex;
    justify-content: space-between;
  }
}

.next-event {
  color: var(--color-accent);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  align-content: center;
  padding: var(--length-spacer);
  overflow-y: scroll;
}

.modal {
  margin: auto;
  max-width: 60ch;
  background: var(--color-surface);
  border-radius: var(--length-borderRadius);
  overflow: clip;
}

.modal-header {
  background-color: var(--color-accent);
  display: grid;
  grid-template-columns: 1fr 2rem;
  padding: calc(var(--length-spacer) / 2) var(--length-spacer);
}

.modal-title {
  color: var(--color-surface);
}

.modal-close {
  padding: 0;
  box-shadow: none;
}

.modal-close-icon {
  display: block;
  stroke: var(--color-surface);
  aspect-ratio: 1;
  height: auto;
}

.modal-content {
  padding: var(--length-spacer);
}

/* Optional wrapper to make the CTA stick to the bottom */
.cta-wrapper {
  padding: calc(var(--length-spacer) / 2);
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  position: sticky;
  bottom: 0;
  container-type: inline-size;
}

.cta-button {
  display: block;
  margin: auto;
}
@container (width < 50ch) {
  .cta-button {
    width: 100%;
  }
}

.siteWrapper {
  min-height: 100vh;
  /* fix for WordPress' admin bar */
  .admin-bar & {
    min-height: calc(100vh - 32px);
  }
}
@media screen and (max-width: 782px) {
  .admin-bar & {
    min-height: calc(100vh - 46px);
  }
}

.siteFooter-wrapper {
  position: sticky;
  top: 100lvh;
}

.frontPage-hero {
  background-color: var(--color-surface);
  display: grid;
  align-items: center;
}
@media (width > 60rem) {
  .frontPage-hero {
    grid-template-columns: 1fr 1fr;
    gap: var(--length-spacer);
  }
}

.frontPage-hero-video {
  border: none;
  aspect-ratio: 16/9;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frontPage-hero-content {
  padding: var(--length-spacer);
  max-width: calc(var(--length-wide) / 2);
}

.frontPageGrid {
  margin: auto;
  max-width: var(--length-wide);
  list-style: none;
  padding: var(--length-spacer);
  display: grid;
  gap: var(--length-spacer);
  container-type: inline-size;
}
@media (width > 80ch) {
  .frontPageGrid {
    grid-template-columns: 1fr 1fr;
  }
}

.frontPageGrid-title {
  text-shadow: var(--shadow-low);
  padding: var(--length-spacer);
  margin: 0;
  text-align: center;
  grid-column: 1/-1;
  color: var(--color-accent);
}

.emulatorTeaser {
  grid-column: 1/-1;
}

.page-wrapper {
  container-type: inline-size;
  max-width: var(--length-pageMax);
  margin: auto;
}
@media (width > 30rem) {
  .page-wrapper {
    padding: var(--length-spacer);
  }
}

.page-content {
  padding: var(--length-spacer);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-low);
  max-width: var(--length-pageMax);
  margin: auto;
  border-radius: var(--length-borderRadius);
}

.page-image {
  display: block;
  aspect-ratio: 3/1;
  border-radius: var(--length-borderRadius);
  background-color: black;
  width: 100%;
  height: auto;
  object-fit: cover;
  margin-block: var(--length-spacer);
}

.archiveHero {
  padding: var(--length-spacer);
  text-align: center;
  text-shadow: var(--shadow-low);
  h1 {
    color: var(--color-accent);
    margin: 0;
  }
}

.archive-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--length-spacer);
  list-style: none;
}
@container (width > 40rem) {
  .archive-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.archive-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--length-spacer);
  list-style: none;
}

/*# sourceMappingURL=style.css.map */