input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@layer components {
  /* .cms-content > h2{
    @apply text-2xl font-extrabold mt-8 mb-4;
  }
  .cms-content > p{
    @apply mt-6;
  } */
  .blog-img img {
    @apply h-96 overflow-hidden;
  }
  .input-sl {
    @apply block w-full mb-6 p-4 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500;  
  }

  .input-style {
    @apply w-full border-2 border-[#D9D9D9] p-2 text-base rounded-lg focus:ring-blue-500 focus:border-blue-500;
  }

  .price-label {
    @apply block mb-1;
  }

  .price-input {
    @apply block w-full mb-6 bg-gray-50 border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500;
  }

}



body {
  font-family: "Montserrat", sans-serif;
}

.tab-content {
  overflow: auto; /* Enable horizontal scrolling if necessary */
}

/* Adjust the styling for Hugo highlight code blocks within the container */
.tab-content pre {
  max-width: 100%; /* Ensure the code block doesn't exceed the container's width */
  white-space: pre-wrap; /* Preserve line breaks within code blocks */
  max-height: 500px;
}

@media screen and (min-width: 900px) {
  .data-playground-code pre {
    min-height: 200px !important;
    max-height: 600px !important;
    overflow-y: auto !important;
  }
  .tab-content pre {
    max-width: 300px; /* Applies max to width to code snippets in data playground */
  }
}
  
pre {
  padding: 1rem !important;
  background-color: rgb(39, 40, 34) !important;
}

.data-playground-code pre {
  white-space: pre-wrap;
  word-break: break-word;
}


.data-playground-code pre {
  /* Avoid pushing up the copy buttons */
  margin-top: 0;
  border-radius: 3px;
  padding: 10px;
  overflow-x: auto;
  font-size: 0.9em;
}

.tab-container pre {
  max-width: 553px; /* define the max-width of the data playground container to avoid having extendable container */
}

.data-playground-code.highlight pre code {
  /* Otherwise, overflow text hits the edge of the block */
  margin-right: 8px;
  display: inline-block;
}

/* Lines that are highlighted */
.data-playground-code.highlight pre code > span[style*="display:block;"] {
  margin-left: -10px;
  padding-left: 5px;
  border-left: 5px solid #ee7f2d;
}

.tab-item {
  display: none;
}
.tab-item.active {
  display: block;
}
.tab-button.active {
  font-weight: bold;
}

/* Style the data-playground search results. */
.search-result-item {
  background-color: white;
  border: 1px solid black;
  padding-left: 0.5rem;
}

.search-result-item span {
  font-weight: bold;
}

.search-result-item:hover, .search-suggestion-item:hover {
  background-color: #B3B3B3;
}

.search-suggestion-item {
  width: 20rem;
  background-color:#D9D9D9;
  padding: 0.5rem;
}

/* Style the data showcase table. */
.finnhub-showcase {
  border: solid 1px rgb(71 85 105);
  padding: 8px 16px;
}

blockquote {
  font-weight: 600 !important;
}

em {
  font-weight: 500 !important;
}

.hover-card:hover {
  background-color: #1d65a6;
}
.hover-card:hover p,
.hover-card:hover h4 {
  color: white;
}
.hover-card:hover a {
  color: #192e5b;
  background-color: white;
  border: none;
}
.b-card {
  display: block;
}

@media screen and (min-width: 640px) {
  .b-card {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 900px) {
  .b-card {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-intro p {
  @apply mt-5;
  @apply text-xl
}

.home-intro ul {
  @apply mt-5;
  @apply text-lg
}

.home-intro ul li {
  @apply mt-1;
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
  padding-left: 1.25em;
}

.home-intro ul li::before {
  content: "\2B23";
  padding-right: .5em;
}

#download-playbook, #ai-services {
  text-wrap: balance;
}

.vtriple h3 {
  @apply text-2xl;
  font-weight: bold;
}

.vtriple p {
  @apply text-xl;
  max-width: 400px;
  margin: 0 auto;
}

.get-started h3 {
  @apply text-2xl;
  font-weight: bold;
}

.get-started a {
  @apply text-xl;
  @apply underline;
  @apply hover:text-[#1D65A6];
}

.ensign-content h2 {
  @apply text-2xl;
  @apply lg:text-3xl;
  @apply font-bold;
  @apply mb-2;
}

.ensign-content h3 {
  @apply text-xl;
  @apply lg:text-2xl;
  @apply font-semibold;
}

.ensign-content p {
  @apply mb-5;
  @apply text-lg;
  @apply lg:text-xl;
}

.ensign-content a {
  color: #1d65a6;
  @apply font-semibold;
  @apply hover:text-[#192e5b];
}

.ensign-content a.btn {
  color: #FFFFFF;
}

.ensign-content .youtube {
  @apply my-5;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.ensigncoa img {
  @apply h-16;
  margin-top: -.5em;
}

.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ensign-content .vtriple {
  @apply p-8;
  @apply mb-8;
  @apply rounded-lg;
}

.ensign-content ul {
  @apply mb-5;
}

.ensign-content ul li {
  @apply mt-1;
  @apply lg:text-xl;
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
  padding-left: 1.25em;
}

.ensign-content ul li::before {
  content: "\2B23";
  padding-right: .5em;
}

.ensign-u > h3 {
  margin-top: 12px;
}

.ensign-u > p, .ensign-u > ul > li, .ensign-u > ol > li {
  font-size: 1.25rem;
  line-height: 2rem;
}

.ensign-u > ol, #pre-reqs + ul {
  margin-bottom: 24px;
}

#what-you-dont-need + ul {
  margin-bottom: 32px;
}

.ensign-u ul > li::marker {
  color: black;
}

/* Resource page styles */

#clouds-header, .resource-header {
  text-wrap: balance;
}

.resource-description > p:not(:only-of-type) {
  padding-top: 1.5rem;
}

.resource-description li {
  list-style-type: disc;
  list-style: inside;
}

/* Ensign Pricing page styles */

.price-grid-item h2 {
  font-size: large;
  font-weight: 700;
  text-align: center;
}

.price-grid-item h3 {
  margin-top: 1rem;
  font-weight: 700;
}

.price-grid-item p > a {
  color: #1d65a6;
  text-decoration: underline;
  font-weight: 500;
}

.price-grid-item p {
  padding-top: 1rem;
}

.price-grid-item > ul > li {
  list-style-type: disc;
  list-style-position: inside;
}

@media screen and ((min-width: 768px) and (max-width: 1023px)) {
  .price-grid-item p:first-of-type {
    height: 11em;
  }
}

@media screen and (min-width: 1024px) {
  .price-grid-item p:first-of-type {
    height: 8rem;
  }
}

.resource-description a {
  text-decoration: underline;
  color: #1d65a6;
  font-weight: 500;
}