/*!
Theme Name: JPUBkit
Description: Custom WordPress theme developed by Lukáš Jirsa - JPUB.cz
Author: Lukáš Jirsa - JPUB
Author URI: https://jpub.cz
Description: Description
Version: 1.2.0
Tested up to: 5.4
Requires PHP: 7.4
Text Domain: jpubkit


*/

/* === FONTS === */

/* oxanium-200 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 200;
  src: url('assets/fonts/oxanium/oxanium-v19-latin_latin-ext-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oxanium-300 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 300;
  src: url('assets/fonts/oxanium/oxanium-v19-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oxanium-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/oxanium/oxanium-v19-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oxanium-500 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/oxanium/oxanium-v19-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oxanium-600 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 600;
  src: url('assets/fonts/oxanium/oxanium-v19-latin_latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* oxanium-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oxanium';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/oxanium/oxanium-v19-latin_latin-ext-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* === COMPONENTS, BASICS AND BOOTSTRAP REWRITE === */

:root {
  --primary: #D10707;
  --secondary: #424242;
  --primary-light: #F5CBCB;
  --secondary-light: #E0E0E0;
  --primary-dark: #B70000;
  --secondary-dark: #343434;
  --negative: #FFF;

  --text-primary: #212121;
  --text-secondary: #636363;
  --text-negative: #FFF;

  --background-primary: #f7f7f7;
 
  --card-background: rgba(255, 255, 255, 0.60);
  --overlay-primary: rgba(209, 7, 7, 0.80);

  --tag-hard-coatings: #3a5f81;
  --tag-sensors: #00A3E0;
  --tag-super-conductivity: #9A71E6;
  --tag-biomaterials: #6B8E23;
  --tag-general: #212121;
}

.bg-secondary {
  background: var(--secondary, #424242)!important;
}

.card,
.card.inactive:hover {
    border: 0;
    border-radius: 0;
    transition: .4s;
    background: var(--card-background);
    /*margin-bottom: 32px;*/
}

.card:not(.inactive):hover {
    background: var(--overlay-primary);
    color: #fff!important;
}

.card:not(.inactive):hover .card-body h3,
.card:not(.inactive):hover .card-body div.card.spec
 {
    color: #fff!important;
    border-color: #fff;
}

.card:not(.inactive) .card-body *,
.card:not(.inactive):hover .card-body * {
  transition: .4s;
}

.headline-card,
.card.inactive:hover .headline-card {
    color: var(--text-primary);
}

.card:hover .headline-card {
    color: var(--text-negative);
}

.card-col {
  margin-bottom: 1.5rem;
  }

  .card-arrow {
    right: 16px;
    bottom: 16px;
}

a .image-overlay {
  opacity: 0;
  transition: .4s;
  background: var(--overlay-primary);
}

a:hover .image-overlay {
  opacity: 1;
}

.container {
  max-width: 1100px;
}

.container-large {
    max-width: 1920px;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--text-primary);
}

.entry-content {
  padding: 88px 0px;
}

.navbar-toggler-icon {
    filter: invert(1) brightness(1.5);
    width: 2em;
    height: 2em;
}

button.navbar-toggler {
    border: 0;
}

.btn-outline-secondary {
  color: var(--primary);
  border: 2px solid var(--primary);
  padding: 8px 32px;
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.5px;
  background: none;
}

.btn-outline-secondary:hover {
  color: var(--primary);
  border: 2px solid var(--primary);
  background: var(--primary-light);
}

/* === BASIC CSS === */
html {
  scroll-behavior: smooth;
}

body {
  font-family: Oxanium, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text-primary);
  background-color: var(--background-primary);
  font-size: 17px;
  letter-spacing: -0.5px;
  line-height: 28px;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: .4s;
}

ul,
ol {
  padding-left: 1.5em;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 0.5em;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
}

blockquote {
  margin: 1em 0;
  padding-left: 1em;
  border-left: 3px solid #ccc;
  color: #555;
}

.headline-hero {
font-size: calc(2rem + 2vw);
line-height: calc(3rem + 2vw);
letter-spacing: -1.4px;
font-weight: 600;

}

h1, .h1, .headline-page {
font-size: calc(1.5rem + 2vw);
line-height: calc(2.25rem + 2vw);
letter-spacing: -1.2px;
font-weight: 600;
}

h2, .h2, .headline-section {
font-size: calc(1.25rem + 1.3vw);
line-height: calc(1.45rem + 1.3vw);
letter-spacing: -1px;
font-weight: 600;
}

h3, .h3, .headline-subsection {
font-size: calc(1.1rem + 1.2vw);
line-height: calc(1.3rem + 1.2vw);
letter-spacing: -1px;
font-weight: 600;
}

h4, .h4, .headline-card {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.5px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 16px;
}

h5, .h5, .card-spec {
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.36px;
    font-weight: 600;
    margin-bottom: 16px;
  }

  h6, .h6, .text-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
  }

  .text-24 {
    font-size: 22px;
    line-height: 30px;
    letter-spacing: -0.5px;
}

  .text-16 {
    font-size: 16px;
    line-height: 20px;
}


/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) { 
  /* Styles here */
}

/* Small devices (portrait tablets and large phones, 576px and up) */
@media (min-width: 576px) { 
  /* Styles here */
}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) { 
    body {
      font-size: 18px;
      letter-spacing: -0.5px;
      line-height: 30px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    body {
      font-size: 19px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    body {
      font-size: 20px;
      line-height: 32px;
    }


    .headline-hero {
    font-size: 64px;
    line-height: 84px;
    letter-spacing: -1.92px;
  }

  h1, .h1, .headline-page {
    font-size: 48px;
    line-height: 64px;
    letter-spacing: -1.44px;
  }

  h2, .h2, .headline-section {
    font-size: 36px;
    line-height: 48px;
    letter-spacing: -1.08px;
  }

  h3, .h3, .headline-subsection {
    font-size: 32px;
    line-height: 42px;
    letter-spacing: -0.96px;
  }

  h4, .h4, .headline-card, .text-24 {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.6px;
  }
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
  /* Styles here */
}



/* === WORDPRESS SPECIFIC === */
.alignleft {
  float: left;
  margin-right: 1em;
}
.alignright {
  float: right;
  margin-left: 1em;
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption {
  max-width: 100%;
  text-align: center;
  font-size: 0.9em;
  color: #666;
}

.wp-caption img {
  margin-bottom: 0.5em;
}

.wp-caption-text {
  margin: 0;
}

/* === WORDPRESS BLOCKS BASIC STYLES === */


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

/* === ACCESSIBILITY === */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.screen-reader-text:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip: auto;
    white-space: normal;
    background: #f1f1f1;
    color: #21759b;
    padding: 15px 23px 14px;
    z-index: 100000; /* Above WP toolbar */
}



/* === DESIGN === */

.honeycomb_wrapper {
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
    z-index: -1;
    margin: auto;
}

.honeycomb {
    position: sticky;
    height: 50vh;
    top: 50vh;
    margin: auto;
    width: 100%;
    background-image: url(/wp-content/themes/jpubkit/assets/img/honeycomb.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    max-width: 1440px;
    margin-top: 50px;
    margin-bottom: 50px;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    .honeycomb {
        height: 90vh;
        top: 10vh;
    }
}


  /* == HEADER == */
#header {
  background: var(--Primary, #D10707);
  color: var(--Text-Negative, #FFF);  
  position: sticky;
  top: 0;
  z-index: 9999;
}

.navbar-brand {
    height: 88px;
}

#header nav ul li a {
    display: flex;
    font-size: 18px;
    padding: 35px 32px;
    line-height: 1;
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 991px) { 
  #header nav ul li a {
    padding: 16px;
    justify-content: end;
  }
}


#header nav ul li a:hover {
    background: var(--primary-dark);
}


  /* === FRONTPAGE === */
  .frontpage-hero {
  position: relative;
  overflow: hidden;
  min-height: 75vh;
}

@keyframes floatArrow {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.hero-arrow svg {
  animation: floatArrow 2s ease-in-out infinite;
}

.frontpage-hero img {
  object-fit: cover;
  /* ensure it fills the section */
  height: 100%;
}

.frontpage-hero .gradient-overlay {
  background: linear-gradient(
    194deg,
    rgba(209, 7, 7, 0.90) 9.2%,
    rgba(209, 7, 7, 0.50) 38.14%,
    rgba(209, 7, 7, 0.50) 102.54%
  );
  top:    0;
  left:   0;
  width:  100%;
  height: 100%;
  z-index: 1;
}

.frontpage-hero .hero-content {
  position: absolute;
  bottom: 25%;
  left:   0;
  z-index: 2;
}




  /* == FOOTER == */
footer {
  font-size: 14px;
  line-height: 20px;
}

footer section {
  border-bottom: 1px solid var(--negative);
  padding: 32px 0px;
}

#menu-footer-menu li a {
  color: var(--negative);
  display: block;
}

#menu-footer-menu li a span {
  padding: 8px 16px;
}

#menu-footer-menu li:last-child a span {
  padding-right: 0px;
}

#menu-footer-menu li a:hover {
  color: var(--primary-light);
}

.partner-logo {
  padding: 32px 0px;
}

.partner-logo svg {
    height: 33px;
    width: auto;
}

.partner-logo img {
    height: 33px;
    width: auto;
}

.contacts-col {
  padding-top: 32px;
  padding-bottom: 32px;
}

.logo_wrapper {
    padding-bottom: 16px;
}

.social_wrapper {
    border-top: 1px solid var(--negative);
    border-bottom: 1px solid var(--negative);
    margin: 16px 0px;
}

.social-icon {
  display: flex;
  height: 40px;
  width: 40px;
  justify-content: center;
  align-items: center;
  margin: 16px;
}

.social-icon:hover {
  background: var(--secondary-dark);
}

.social-icon svg {
  fill: var(--negative);
  transition: .4s;
  width: auto;
}


.address_inner {
    position: relative;
    padding-left: 32px;
    margin-top: 16px;
}

.address_inner:before {
    display: inline-block;
    height: 40px;
    width: 40px;
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.5 11C19.5 16.018 14.0117 19.4027 12.4249 20.2764C12.1568 20.424 11.8432 20.424 11.5751 20.2764C9.98831 19.4027 4.5 16.018 4.5 11C4.5 6.5 8.13401 3.5 12 3.5C16 3.5 19.5 6.5 19.5 11Z' stroke='%23fff'/%3E%3Ccircle cx='12' cy='11' r='3.5' stroke='%23fff'/%3E%3C/svg%3E");
    position: absolute;
    left: 0;
}

.email_inner {
    position: relative;
    padding-left: 32px;
    margin-top: 16px;
}

.email_inner:before {
    display: inline-block;
    height: 40px;
    width: 40px;
    content: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="6.47656" width="16" height="12" rx="2" stroke="white"/><path d="M4 9.47656L11.1056 13.0293C11.6686 13.3109 12.3314 13.3109 12.8944 13.0293L20 9.47656" stroke="white"/></svg>');
    position: absolute;
    left: 0;
}

.phone_inner {
    position: relative;
    padding-left: 32px;
    margin-top: 16px;
}

.phone_inner:before {
    display: inline-block;
    height: 40px;
    width: 40px;
    content: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.7071 14.1837L20.3552 16.8318C20.7113 17.1879 20.7113 17.7652 20.3552 18.1213C18.43 20.0465 15.3821 20.2632 13.204 18.6296L11.6286 17.448C9.88504 16.1403 8.33622 14.5915 7.02857 12.848L5.84701 11.2726C4.21341 9.09444 4.43001 6.04655 6.35523 4.12133C6.71133 3.76524 7.28867 3.76523 7.64477 4.12133L10.2929 6.76946C10.6834 7.15998 10.6834 7.79314 10.2929 8.18367L9.27175 9.20482C9.10946 9.3671 9.06923 9.61502 9.17187 9.8203C10.3585 12.1936 12.2829 14.118 14.6563 15.3047C14.8615 15.4073 15.1095 15.3671 15.2717 15.2048L16.2929 14.1837C16.6834 13.7931 17.3166 13.7931 17.7071 14.1837Z" stroke="white"/></svg>');
    position: absolute;
    left: 0;
}

footer section#copyright {
  border-bottom: 8px solid var(--primary);
  padding: 32px 0px;
}


/* posts */

.entry-content h2 {
    padding-top: 64px;
    padding-bottom: 32px;
}


/* PROJECT tags */
.tag-label {
  padding: 8px;
  align-items: center;
  border-radius: 4px;
  border: 1px solid var(--tag-general);
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  line-height: 1; 
  height: 40px;
  margin-right: 16px;
  margin-bottom: 16px;
  background: #fff;
}

.tag-general {
  color: var(--tag-general);
  border-color: var(--tag-general);
}

.tag-sensors {
  color: var(--tag-sensors);
  border-color: var(--tag-sensors)
  }

.tag-hard-coatings {
  color: var(--tag-hard-coatings);
  border-color: var(--tag-hard-coatings);
}

.tag-superconductivity {
  color: var(--tag-super-conductivity);
  border-color: var(--tag-super-conductivity);
}

.tag-biomaterials {
  color: var(--tag-biomaterials);
  border-color: var(--tag-biomaterials);
}














/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) { 
  /* Styles here */
}

/* Small devices (portrait tablets and large phones, 576px and up) */
@media (min-width: 576px) { 
  /* Styles here */
}

/* Medium devices (landscape tablets, 768px and up) */
@media (min-width: 768px) { 
  /* Styles here */
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  /* Styles here */
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  /* Styles here */
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
  /* Styles here */
}