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

/* Tailwind CSS with SassC compatibility - removed problematic @apply directives */

@font-face {
  font-family: "Archivo Expanded";
  src: url(/assets/ArchivoExpanded-Bold.woff2) format("woff2"),
    url(/assets/ArchivoExpanded-Bold.woff) format("woff"),
    url(/assets/ArchivoExpanded-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Expanded";
  src: url(/assets/ArchivoExpanded-SemiBold.woff2) format("woff2"),
    url(/assets/ArchivoExpanded-SemiBold.woff) format("woff"),
    url(/assets/ArchivoExpanded-SemiBold.ttf) format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@layer base {
  html,
  body {
    @apply font-sans text-base text-gray-dimmed;
  }
  a {
    @apply no-underline hover:underline focus:underline active:underline leading-[17px];
  }


  h1,
  h2,
  h3,
  h4 {
    font-family: "Archivo Expanded", "Archivo", "Arial", "Helvetica Neue", Helvetica, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", ui-sans-serif;
    font-style: normal;
  }

  .field_with_errors {
    width: 100%;
  }
}

@supports (font-variation-settings: normal) {
  h1,
  h2,
  h3,
  h4 {
    font-family: "Archivo", "Arial", "Helvetica Neue", Helvetica, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", ui-sans-serif;
    font-stretch: 125%;
  }
}

@layer components {
  .container {
    @apply max-w-[1280px];
  }

  .container-xs {
    @apply max-w-[400px] mx-auto;
  }

  .container-sm {
    @apply max-w-[610px] mx-auto;
  }

  .container-md {
    @apply max-w-[715px] mx-auto;
  }

  .container-lg {
    @apply max-w-[820px] mx-auto;
  }

  .container-xl {
    @apply max-w-[1440px] mx-auto;
  }

  .tile {
    @apply relative w-full max-w-[640px] lg:w-[400px] rounded-md;
  }

  .tile-md {
    @apply w-full max-w-[768px] xl:w-[610px] h-[381px] relative rounded-md;
  }

  .tile-sm {
    @apply relative w-full max-w-[400px] xl:w-[295px] rounded-md h-[77px];
  }

  .tile-text {
    @apply absolute bottom-[30px] w-full max-w-[640px] px-[30px];
  }

  .tile-corner {
    @apply absolute top-[6px] left-[4px] rounded-[1px] w-[3px] h-[65px];
  }

  .tile-title {
    @apply absolute top-[30px] left-[29px] lg:left-[30px] stretch text-sm font-bold;
  }

  .tile-subtitle {
    @apply lg:mt-[107px] mt-[74px] min-w-full px-[30px] flex justify-center items-center text-[28px] leading-[36px] md:text-[36px] md:leading-[42px] font-semibold;
  }

  .tile-image {
    @apply mt-[65px] mx-auto justify-center items-center;
  }

  .taskHealthSm {
    @apply absolute w-full max-w-[400px] position-x-center border-[2px] border-[#0B1D3A] rounded-full h-[46px];
  }

  .taskHealthLg {
    @apply absolute h-[49px] w-[27%] border-[2px] border-[#0B1D3A] rounded-full;
  }

  .taskHealthTitle {
    @apply flex items-center justify-center h-[44px] md:h-[45px] text-white text-[14px] leading-[17px] font-semibold;
  }

  .rectangle-1048 {
    @apply rounded-[50px] z-10 absolute w-[40px] h-[146px] md:w-[70px] md:h-[240px] lg:w-[100px] lg:h-[800px];
  }

  .tip {
    @apply flex justify-center mt-lg lg:mt-lg20 lg:items-center;
    font-stretch: 100%;
  }

  .blog-title {
    @apply mt-[30px] sm:mt-md relative w-full text-nowrap;
  }

  .blog-link {
    @apply absolute -bottom-[40px] left-[2px] sm:left-[510px] sm:top-[2px] text-blue-base;
  }

  .blog-time {
    @apply text-gray-light text-[14px] leading-[17px];
  }

  .blog-category {
    @apply rounded-md px-[12px] py-sm font-medium text-sm;
  }

  .blog-divider {
    @apply mt-[57px] sm:mt-[24px] w-full h-[1px] bg-marble-base;
  }

  .Picture {
    img {
      margin: 0 auto;
    }
  }
}

@layer utilities {
  /* web 1.5 */
  .stretch {
    font-stretch: 125%;
  }
  .stretch-none {
    font-stretch: 100%;
  }

  .h1 {
    @apply font-semibold stretch text-[26px] leading-[32px] lg:text-2xl;
  }

  .h2 {
    @apply font-bold stretch text-[22px] leading-[30px] lg:text-xl;
  }

  .h3 {
    @apply font-bold stretch text-[17px] leading-[24px] lg:text-lg;
  }

  .h3 a {
    @apply leading-[24px];
  }

  .h4 {
    @apply font-bold stretch text-md;
  }

  .h5 {
    @apply text-sm font-bold stretch;
  }

  .text-semibold {
    @apply text-[15px] leading-[19px] font-semibold;
  }

  .blog-text {
    /* @apply text-[18px] leading-[29px] font-[350] md:text-[16px] md:leading-[26px] md:font-normal; */
    @apply text-base;
  }

  .bullet {
    @apply min-w-[20px] h-[10px] rounded-[5px] mt-[4px] block lg:min-w-[10px] lg:rounded-full xl:min-w-[20px] xl:rounded-[5px];
  }

  .list-center {
    @apply flex items-start gap-[10px] mt-[10px];
  }

  .ul {
    @apply [&>*:nth-child(1)]:mt-0 [&>*li]:list-center [&>*>span]:bullet text-semibold;
  }

  .header-blob {
    @apply rounded-full absolute;
  }

  /* TODO REMOVE, is moved to posts_helper */
  .post-tag-sm {
    @apply h6 font-medium rounded-[6px] px-[2px] py-[2px] max-w-fit;
  }

  /* TODO REMOVE, is moved to posts_helper */
  .post-tag-lg {
    @apply h6 font-medium rounded-[6px] px-sm py-[12px];
  }

  .position-x-center {
    @apply left-[50%] translate-x-[-50%];
  }

  .position-y-center {
    @apply top-[50%] translate-y-[-50%];
  }

  .btn {
    @apply text-semibold py-[12px] inline-block w-full text-center rounded-full ease-in-out duration-300 hover:no-underline focus:no-underline disabled:bg-marble-light disabled:text-gray-light disabled:hover:bg-marble-light disabled:hover:text-gray-light select-none cursor-pointer;
  }

  .text-input {
    @apply appearance-none block bg-white  text-navy-base border w-full border-navy-light rounded-sm py-[8px] px-[12px] focus:outline-none focus:border-navy-darkest hover:border-navy-darkest transition-colors placeholder:text-navy-base  hover:placeholder:text-navy-darkest focus:text-navy-darkest  text-[14px] leading-[17px];
  }

  .price-card {
    @apply w-full max-w-[340px] 2xl:max-w-[295px] place-self-center drop-shadow-content;
  }

  /* microsite */
  .nav-shadow {
    @apply drop-shadow-[0_0_20px_rgba(0,0,0,0.1)];
  }

  .nav-bg-home {
    @apply bg-transparent
  }

  .nav-bg-home a {
    @apply text-white
  }

  .nav-bg-standard {
    @apply text-gray-bright ;
  }

  .nav-bg-sticky {
    @apply bg-white dark:bg-dt-content lg:bg-white/95 dark:lg:bg-dt-bg/90
  }

  .nav-bg-sticky a, .nav-bg-standard a {
    @apply transition duration-300 ease-in-out text-gray-dimmed dark:text-white;
  }

  .h-scroll-mt {
    @apply scroll-mt-24 md:scroll-mt-28 lg:scroll-mt-32
  }

  /* V 1.5 */
  .nav15-bg-standard {
    @apply bg-navy-dimmed fill-white;
  }

  .nav15-bg-sticky {
    @apply bg-white lg:bg-white/95;
  }

  .nav15-bg-sticky .link {
    @apply transition duration-300 ease-in-out text-gray-dimmed;
  }

  .grecaptcha-badge { visibility: hidden; }

  .no-scrollbar {
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .drag-none {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
  }

  /* V 1.5 legacy blogpost styles */

  .Blogpost {
    @apply blog-text;
  }
  .Blogpost h1 {
    @apply h1 mt-md mb-md lg:mt-md10 text-gray-dimmed;
  }

  .Blogpost h2 {
    @apply h3 mt-md lg:mt-md10;
  }

  .Blogpost h3 {
    @apply font-bold h4 stretch mt-md lg:mt-md10;
  }

  .Blogpost h4,
  .Blogpost h5 {
    @apply text-semibold;
  }

  .Blogpost p {
    @apply mt-md lg:mt-md10;
  }

  .Blogpost a {
    @apply underline;
  }

  .Blogpost .img-responsive {
    @apply drop-shadow-content dark:brightness-90;
  }

  .Blogpost .blog-img {
    @apply pt-md lg:pt-md10 ;
  }

  .Blogpost .blog-img-label{
    @apply text-marble-base;
  }

  .Blogpost .withmargin {
    @apply w-full py-sm container-lg;
  }

  .Blogpost .blog-img-label {
    @apply text-center text-gray-dark mt-sm;
  }

  .Blogpost .table-bordered {
    @apply border border-gray-light;
  }

  .Blogpost .table-bordered td {
    @apply border p-sm border-gray-light;
  }

  .Blogpost .table.table-striped {
    @apply mt-md;
  }

  .Blogpost .table ul, .table ol {
    @apply list-none;
  }

  .Blogpost .Infobox {
    @apply w-[200px] float-right p-md m-sm bg-marble-light dark:bg-dt-content clear-both;
  }

  .Blogpost .Infobox__heading {
    @apply mt-0;
  }

  .Blogpost .columns {
    @apply grid grid-cols-12 gap-x-md;
  }

  .Blogpost .column.col-3 {
    @apply col-span-12 md:col-span-3;
  }

  .Blogpost .column.col-4 {
    @apply col-span-12 md:col-span-4;
  }

  .Blogpost .column.col-5  {
    @apply col-span-12 md:col-span-5;
  }

  .Blogpost .column.col-6   {
    @apply col-span-12 md:col-span-6;
  }

  .Blogpost .column.col-7  {
    @apply col-span-12 md:col-span-7;
  }

  .Blogpost .column.col-8  {
    @apply col-span-12 md:col-span-8;
  }

  .Blogpost .column.col-9  {
    @apply col-span-12 md:col-span-9;
  }

  .Blogpost .column.col-10  {
    @apply col-span-12 md:col-span-10;
  }

  .Blogpost .column.col-12  {
    @apply col-span-12;
  }

  .Blogpost ul, .Blogpost ol {
    @apply list-disc px-sm;
  }

  .Blogpost ul li {
    @apply my-sm;
  }

  .Blogpost .only-strong {
    @apply  inline-block mt-md;
  }

  .Blogpost .dropcap-bg {
    @apply  !mt-md mr-md h4;
  }

  .Blogpost p {
    @apply !block;
  }

  .Blogpost .card {
    @apply bg-white mt-md p-sm lg:p-md drop-shadow-content;
  }

  .Blogpost .card-header {
    @apply h4;
  }

  .Blogpost .card-body {
    @apply mt-sm;
  }

  .Blogpost .tag-box .btn-primary {
    @apply text-white btn bg-utility-cta-blue mt-md10;
  }

  .Blogpost .carousel-inner  {
    @apply mt-lg20 lg:mt-md pl-[50px] pb-md10 pr-md10 border border-marble-light rounded-sm relative;
  }

  .Blogpost .testimonial-info img {
    @apply rounded-full absolute top-[-30px] position-x-center lg:translate-x-0 lg:top-[20px] left-[-30px] w-[60px] h-[60px];
  }

  .Blogpost .testimonial-info .testimonial-author   {
    @apply block font-semibold mt-md;
  }

  .Blogpost .testimonial-info .testimonial-author em   {
    @apply not-italic font-normal;
  }

  .Blogpost .carousel-inner p {
    @apply italic;
  }

  .Markdown {
    @apply text-[18px] leading-[29px] lg:text-[16px] lg:leading-[26px] text-gray-dimmed dark:text-dt-text;
  }

  .Markdown h1 {
    @apply font-semibold stretch text-[28px] leading-[34px] lg:text-xl text-gray-dimmed mb-lg dark:text-dt-text;
  }

  .Markdown h2 {
    @apply font-bold stretch text-[24px] leading-[29px] lg:text-lg text-gray-dimmed mb-md dark:text-dt-text;
  }

  .Markdown h3 {
    @apply font-bold stretch text-[20px] leading-[24px] lg:text-md text-gray-dimmed mb-md dark:text-dt-text;
  }

  .Markdown h4 {
    @apply font-bold stretch text-[17px] leading-[24px] lg:text-md text-gray-dimmed mb-md dark:text-dt-text;
  }

  .Markdown h5 {
    @apply font-bold stretch text-[17px] leading-[24px] lg:text-md text-gray-dimmed mb-md dark:text-dt-text;
  }

  .Markdown .markdown-semibold {
    @apply font-[550];
  }

  .Markdown .markdown-btn {
    @apply px-2 py-1 bg-utility-cta-blue text-white whitespace-nowrap rounded-sm ;
  }

  .Markdown p {
    @apply mb-md10;
  }

  .Markdown a {
    @apply text-utility-cta-blue;
  }

  .Markdown a:hover, .Markdown a:focus {
    @apply text-blue-dark;
  }

  .Markdown .bg-navy-dimmed a {
    @apply text-blue-base;
  }

  .Markdown .bg-green-darkest a, .Markdown .bg-red-darkest a {
    @apply text-blue-light;
  }

  .Markdown a:visited {
    @apply text-pink-darkest dark:text-pink-base;
  }

  .Markdown a.btn {
    @apply text-white no-underline;
  }

  .Markdown .bg-navy-dimmed a:visited, .Markdown .bg-green-darkest a:visited, .Markdown .bg-red-darkest a:visited {
    @apply text-pink-light;
  }

  .Markdown ul {
    @apply mb-md10;
  }

  .Markdown ul li {
    @apply relative ml-lg list-none before:content-[""] before:inline-block before:w-[20px] before:h-[10px] before:rounded-[5px] before:bg-green-base before:absolute before:-left-md10 before:top-[9px];
  }

  .Markdown ul:nth-of-type(2) li:before {
    @apply bg-purple-base;
  }

  .Markdown ul:nth-of-type(3) li:before {
    @apply bg-yellow-base;
  }

  .Markdown ul:nth-of-type(4) li:before {
    @apply bg-navy-base;
  }

  .Markdown ul:nth-of-type(5) li:before {
    @apply bg-orange-base;
  }

  .Markdown ul:nth-of-type(6) li:before {
    @apply bg-pink-base;
  }

  .Markdown ul:nth-of-type(7) li:before {
    @apply bg-red-base;
  }

  .Markdown ul:nth-of-type(8) li:before {
    @apply bg-blue-base;
  }

  .Markdown ol {
    @apply list-decimal ml-md mb-md10;
  }

  .Markdown ul ul, .Markdown ol ol {
    @apply mb-0;
  }

  .Markdown li img {
    @apply mt-sm mb-md10;
  }

  .Markdown li::marker {
    @apply font-bold;
  }

  .Markdown table {
    @apply w-full mb-md10;
  }

  .Markdown th, td {
    @apply border border-gray-light p-sm text-left border-dotted;
  }

  .Markdown mark {
    @apply bg-yellow-light p-1 text-gray-dimmed dark:bg-yellow-dark dark:text-dt-text;
  }

  .Markdown code {
    @apply bg-marble-light p-1 text-sm text-gray-dimmed dark:text-dt-text dark:bg-gray-dark;
  }

  .Markdown blockquote {
    @apply bg-white px-md10 py-md text-gray-dimmed border border-marble-light rounded-sm mb-md10 dark:bg-dt-content dark:border-dt-content dark:text-dt-text;
  }

  .Markdown blockquote p {
    @apply italic;
  }

  .Markdown blockquote p:after {
    content: close-quote;
    vertical-align: bottom;
  }

  .Markdown blockquote p:before {
    content: open-quote;
    vertical-align: top;
  }

  .Markdown blockquote p:last-of-type {
    @apply font-bold not-italic mb-0 dark:text-dt-textDimmed;;
  }

  .Markdown blockquote p:last-of-type:before, .Markdown blockquote p:last-of-type:after {
    content: none;
  }

  .Markdown img {
    @apply drop-shadow-content overflow-hidden rounded-md mx-auto;
  };

  .Markdown .SmallImg {
    @apply my-md lg:my-0 mx-auto min-w-full lg:min-w-0;
  }

  .Markdown .SmallImg--left {
    @apply md:float-left md:pr-md10;
  }

  .Markdown .SmallImg--right {
    @apply md:float-right md:pl-md10;
  }
}

.SvgIcon--navy-dark svg path, .SvgIcon--navy-dark svg rect { @apply fill-navy-dark dark:fill-gray-bright; }
.SvgIcon--cyan-dimmed svg path, .SvgIcon--cyan-dimmed svg rect { @apply fill-gray-dimmed dark:fill-gray-bright; }
.SvgIcon--black svg path, .SvgIcon--black svg rect { @apply fill-black dark:fill-gray-bright ; }
.SvgIcon--white svg path, .SvgIcon--white svg rect { @apply fill-white dark:fill-dt-content; }
.SvgIcon--white-inverted svg path, .SvgIcon--white-inverted svg rect { @apply fill-white dark:fill-dt-text; }
.SvgIcon--marble-light svg path { @apply fill-marble-light dark:fill-dt-bg; }
.SvgIcon--marble-light-inverted svg path { @apply fill-marble-light dark:fill-dt-text; }
.SvgIcon--marble-base svg path { @apply fill-marble-base dark:fill-dt-bg; }
.SvgIcon--gray-bright svg path { @apply fill-gray-bright dark:fill-gray-dark; }
.SvgIcon--navy-light svg path { @apply fill-navy-light; }
.SvgIcon--navy-base svg path { @apply fill-navy-base; }
.SvgIcon--navy-dark svg path { @apply fill-navy-dark; }
.SvgIcon--blue-base svg path { @apply fill-blue-base; }
.SvgIcon--green-base svg path { @apply fill-green-base; }
.SvgIcon--red-base svg path { @apply fill-red-base; }
.SvgIcon--test svg path { @apply fill-[#333434]; }
.SvgIcon--youtube svg path { fill: #434341; }
a:hover .SvgIcon--youtube svg path { fill: #ff0000; }
.YT-video > div:hover {
  @apply cursor-pointer;
  .SvgIcon--youtube svg path { fill: #ff0000; }
}
.SvgIcon--inherit svg path { @apply fill-current; }

.SvgIcon--spin svg { @apply animate-spin; }
.SvgIcon svg path.SvgIcon__highlightInDark { @apply dark:fill-navy-dark; }
.SvgIcon svg path.SvgIcon__highlightInDarkStroke { @apply dark:stroke-white }

.SvgArrowIcon--inherit svg path { @apply stroke-current; }

@media print {
  .noprint {
    display: none;
  }
}