@import url('constant.css');

/*
  Following Standards.less in hugo projects
  core-docs/core/themes/itrs/assets/less/base/standards.less
*/

@font-face {
  font-family: "Barlow";
  src:
    local("Barlow"),
    url("../_fonts/Barlow-Regular.woff2") format("woff2");
}

:root {
  --color-white: #FFF;
  --color-electric-blue: #175EEE;
  --color-navy: #070032;
  --space: 1rem;
  --space-tiny: 0.5rem;
  --space-small: 1.5rem;
  --space-medium: 2.5rem;
  --space-large: 5rem;
  --space-xlarge: 9rem;
}


html,
body {
  font-size: 16px;
}

body {
  color: var(--color-navy);
  font-family: Barlow, Arial, Verdana, sans-serif;
  font-weight: 400;
  line-height: 1.5em;

}

h1 {
  font-size: 4rem;
  font-weight: 700;
  line-height: 4.4rem;
}

h2 {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 3.08rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.8rem;
}

h4 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5rem;
}

h5 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3rem;
  letter-spacing: 0.05rem;
}

h6 {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  letter-spacing: 0.05rem;
}

/* Texts */

p,
.body {
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin-bottom: 0.5 * .571rem;
}

p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

b,
strong,
.bold {
  font-weight: 600;
}

u,
.underlined {
  text-decoration: underline;

  &:link,
  &:active,
  &:visited {
    text-decoration: underline;
  }
}

hr {
  margin: .858rem 0;
  border: 0;
  border-top: 1px solid #DDDDDD;
}

.hidden {
  display: none !important;
}

/*
  Follow product homepage what's new section
  core-docs/core/themes/itrs/assets/less/extend/home.less
*/

.lfm-title {
  text-align: center;
  margin-bottom: var(--space-medium);
}

.lfm-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  gap: var(--space-small);
}

.lfm-btn {
  padding: var(--space-small);
  text-align: center;
  border-radius: 0.625rem;
  border: 2.5px solid var(--color-white);

  display: grid;
  grid-template-rows: repeat(auto-fit, minmax(20px, 1fr));

  transition: background-color 0.1s;

  a {
    text-decoration: none;
  }
}

.lfm-btn.active,
.lfm-btn:hover,
.lfm-btn:focus {
  box-shadow: 4px 4px 24px 0px rgba(7, 0, 50, 0.16);
  border: 2.5px solid var(--color-white);
  text-decoration: none;
}

.lfm-btn a:hover {
  text-decoration: none;
}

.lfm-icon {
  margin: 0;
}

.lfm-label {
  margin: var(--space-small) 0 var(--space-tiny) 0;
  color: var(--color-navy);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.3rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}

.lfm-sub-label {
  text-align: center;
  color: var(--color-navy);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 400;
  line-height: 0.975rem;
}


/*  Search 
following core-docs/core/themes/itrs/assets/less/extend/blocks.less */

label {
  box-sizing: border-box;
  display: block;
  font-size: .858em;
  line-height: 1.429em;
  margin: 0;
  padding: 0;
}

input,
select,
textarea {
  border: none;
  border-bottom: 1px solid;
  border-radius: 2px 2px 0 0;
  box-sizing: border-box;
  display: block;
  font-family: Barlow, Arial, Verdana, sans-serif;
  font-weight: 400;
  line-height: 1em;
  margin: 0;
  padding: .286em .571em;
  transition: all .2s;
  width: 100%;
}

.paragraph-search {
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
  background-image: url(https://cdn.itrsgroup.com/images/products/generic-bg.svg);
  background-image: url(https://cdn.itrsgroup.com/images/products/generic-bg.svg), linear-gradient(180deg, var(--color-navy) 0%, #1B1252 131.05%);


  padding: 4rem 0;
}

input::placeholder {
  color: #FFFFFF;
  opacity: 1;
}

#inputSearch {
  border-radius: 0.5rem;
  border: 1.5px solid var(--color-white);
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(8px);
  max-width: 32rem;
  padding: 0.5rem .571rem;
  margin: auto;

  color: #FFFFFF;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.3rem;

  /* simple search icon */

  background-image: url('../_images/icons/search-icon.svg');
  background-position: right 1rem center;
  background-repeat: no-repeat;

}

.paragraph-search-label {
  font-size: .858em;
}

/* Enable for Clickable search button <button class="paragraph-search-button search-trigger">SEARCH</button>

.paragraph-search-button {
    -webkit-appearance: none;
    border: none;
    bottom: 0;
    cursor: pointer;

    text-indent: -1000em;
    width: 2.143em;
    display: block;
    background: url('../_images/icons/search-icon.svg') scroll no-repeat center center;
    background-size: contain;
}

.paragraph-search-button:hover{
    background-image: url('../_images/icons/search-icon.svg');
    opacity: 0.8;
}
.paragraph-search-button:focus{
  background-image: url('../_images/icons/search-icon.svg');
  opacity: 0.8;
}

.paragraph-search-product-icon {
  display: block;
  margin: 0 auto 1.5rem;
}
*/

/*
  Layout
*/

main {
  margin: var(--space-medium) 14rem var(--space-large) 14rem;
  padding: var(--space-small);

  color: var(--color-white)
}

.grid-center {
  display: grid;
  place-items: center;
}


/*
  Specific homepage design
*/

.top-banner-container {
  border-radius: 1.25rem;
  min-height: 17rem;
  margin: var(--space-medium) var(--space-large) var(--space-medium) var(--space-large);
  padding: var(--space-small);

  background-size: cover;
  background-position: 50% 35%;
  background-image: url('../_images/itrs-salad-laugh.jpg');
  background-image: linear-gradient(0deg, rgba(7, 0, 50, 0.50) 0%, rgba(7, 0, 50, 0.50) 100%), url('../_images/itrs-salad-laugh.jpg');
}

.top-banner-title {
  color: var(--color-white);
  font-size: 4rem;
  font-style: normal;
  font-weight: 700;
  line-height: 4.4rem;
  text-align: center;
  margin-bottom: var(--space-medium);
}

.product-list {
  background-image: linear-gradient(180deg, var(--color-navy) 0%, #1B1252 131.05%);
  padding: var(--space-large) var(--space-xlarge) var(--space-large) var(--space-xlarge);
  border-radius: 1.25rem;

  display: grid;
  column-gap: var(--space-large);
  row-gap: var(--space-large);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  justify-items: center;
}

.product-container {
  width: 15rem;

  a {
    color: var(--color-white);
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}

.product-title {
  color: var(--color-white);
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.3rem;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}

.feature-list {
  list-style-image: url('../_images/icons/feature-link.svg');

  li {
    margin-top: 1rem;
  }
}

.global-container {
  margin-inline: var(--space-small);
}

.global-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-small);
  margin-left: 0;

  li {
    width: 11rem;
  }
}

.bottom-banner-container {
  border-radius: 1.25rem;
  min-height: 17rem;
  margin: var(--space-large);
  padding-inline: var(--space-small);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: var(--space-small);

  background-size: cover;
  background-position: 50% 85%;
  background-image: url('../_images/itrs-serious-ipad.jpg');
  background-image: linear-gradient(0deg, rgba(7, 0, 50, 0.50) 0%, rgba(7, 0, 50, 0.50) 100%), url('../_images/itrs-serious-ipad.jpg');
}

.bottom-banner-title {
  color: var(--color-white);
  font-size: 2.75rem;
  font-style: normal;
  font-weight: 700;
  line-height: 3.08rem;
}

.bottom-banner-link {
  color: var(--color-white);
  text-decoration: none;
  font-feature-settings: 'liga' off, 'clig' off;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.03125rem;

  width: fit-content;
  border-radius: 1.25rem;
  border: 1.5px solid var(--color-white);
  padding: var(--space-tiny) var(--space-small) var(--space-tiny) var(--space-small);
}

.bottom-banner-link.active,
.bottom-banner-link:hover,
.bottom-banner-link:focus {
  border: 1.5px solid var(--color-electric-blue);
  background-color: var(--color-electric-blue);
}

/*
  Small screen behavior
*/

@media only screen and (max-width: 992px) {
  main {
    margin: var(--space-medium) var(--space-small) var(--space-large) var(--space-small);
  }

  .top-banner-container {
    margin: var(--space-medium) var(--space-small) var(--space-medium) var(--space-small);
  }

  .bottom-banner-container {
    margin: var(--space-medium) var(--space-small) var(--space-medium) var(--space-small);
  }

  .product-list {
    padding: var(--space-medium);
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    column-gap: var(--space-large);
    justify-items: unset;
  }

  .product-container {
    width: unset;
  }
}