@import url("https://fonts.googleapis.com/css2?family=Paytone+One&display=swap");

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

:root {
  --primary-color: #14b8a6;
  --primary-color-dark: #0e8578;
  --secondary-color: #999999;
  --background-color: #ffffff;
  --text-color: #333333;
  --font-heading: "Paytone One", sans-serif;
  --font-body: "Helvetica", sans-serif;
}

/* Import Font Helvetica from local assets */
@font-face {
  font-family: "Helvetica";
  src: url("/assets/Helvetica-Light-a3e6a5a0.eot");
  src:
    url("/assets/Helvetica-Light-a3e6a5a0.eot?#iefix") format("embedded-opentype"),
    url("/assets/Helvetica-Light-b5f40eef.woff2") format("woff2"),
    url("/assets/Helvetica-Light-d649da80.woff") format("woff"),
    url("/assets/Helvetica-Light-4ffb52e1.ttf") format("truetype"),
    url("/assets/Helvetica-Light-eb5d5a4e.svg#Helvetica-Light") format("svg");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("/assets/Helvetica-cbdbd0e4.eot");
  src:
    url("/assets/Helvetica-cbdbd0e4.eot?#iefix") format("embedded-opentype"),
    url("/assets/Helvetica-453b7971.woff2") format("woff2"),
    url("/assets/Helvetica-f4098dcf.woff") format("woff"),
    url("/assets/Helvetica-a5705cf2.ttf") format("truetype"),
    url("/assets/Helvetica-e95f083b.svg#Helvetica") format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Helvetica";
  src: url("/assets/Helvetica-Bold-9b8c7e5e.eot");
  src:
    url("/assets/Helvetica-Bold-9b8c7e5e.eot?#iefix") format("embedded-opentype"),
    url("/assets/Helvetica-Bold-fc4640e0.woff2") format("woff2"),
    url("/assets/Helvetica-Bold-a1a63d87.woff") format("woff"),
    url("/assets/Helvetica-Bold-6476c531.ttf") format("truetype"),
    url("/assets/Helvetica-Bold-eb1df339.svg#Helvetica-Bold") format("svg");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: var(--font-body);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: top;
}

.po-font {
  font-family: var(--font-heading);
}

.heading-gradient {
  background: linear-gradient(
    266.99deg,
    rgba(20, 184, 166, 0.2) -12.65%,
    rgba(14, 133, 120, 0.5) 45.17%,
    #14b8a6 102.99%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-secondary {
  color: var(--secondary-color);
}

.shadow-brand {
  box-shadow: 0px 4px 12px 0px #00282333;
}

/* Pages Default style for content */
.page-content {
  h2 {
    font-size: 30px;
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    color: var(--primary-color);
    font-family: var(--font-heading);
  }
  li,
  p {
    font-weight: 300;
    font-size: 20px;
    line-height: 130%;
  }
}

@media (max-width: 768px) {
  .page-content {
    h2 {
      font-size: 22px;
    }
    p {
      font-size: 18px;
    }
  }
}

/* Blog Article Body */
.article-body {
  p {
    margin-bottom: 1.5em;
    font-size: 1.05rem;
    line-height: 1.8;
    color: #4b4b4b;
    font-weight: 300;
  }

  h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    margin-top: 2em;
    margin-bottom: 0.75em;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.35rem;
  }

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

  li {
    margin-bottom: 0.5em;
    font-weight: 300;
    color: #4b4b4b;
    line-height: 1.7;
  }

  strong, b {
    font-weight: 700;
    color: #333;
  }

  blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: 1.25em;
    margin: 1.5em 0;
    font-style: italic;
    color: #666;
  }
}

/* Blog Card hover effects */
.blog-card {
  transition: transform 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
}

/* Validation Report Card */
.validation-report-card {
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.validation-report-card:hover {
  transform: translateY(-4px);
}

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}