/* Theme base styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  button,
  .button,
  input[type="submit"] {
    @apply w-fit bg-[200%_auto] block rounded-4xl uppercase cursor-pointer text-base duration-500 text-center;
  }
  button:hover,
  .button:hover,
  input[type="submit"]:hover {
    @apply bg-right-center;
  }
  .button-primary-dark,
  .bg-white input[type="submit"] {
    @apply bg-primary-button-gradient text-white py-3 px-6;
  }
  .button-primary-light,
  .bg-gradient-blue-red2 input[type="submit"] {
    @apply bg-primary-button-gradient2 text-dark-blue py-3 px-6;
  }
  .button:disabled,
  button:disabled {
    @apply border !border-grey11 !bg-none !bg-white/60 cursor-default !text-dark-blue;
  }
  .button-secondary-light {
    @apply bg-white text-dark-blue border-2 border-red2 py-2.5 px-[22px];
  }
  .button-secondary-light:hover {
    @apply bg-dark-blue text-white;
  }
  .button-secondary-dark {
    @apply bg-dark-blue text-white border-2 border-red2 py-2.5 px-[22px];
  }
  .button-secondary-dark:hover {
    @apply bg-white text-dark-blue;
  }
  .button-tertiary-dark {
    @apply bg-dark-blue text-yellow py-3 px-6;
  }
  .button-red {
    @apply bg-red1 text-white py-3 px-6;
  }
  .button-white {
   @apply bg-white text-dark-blue py-3 px-6; 
  }
  .link {
    @apply uppercase text-base font-normal leading-5 flex items-center gap-4;
  }
  .link:hover {
    @apply underline;
  }
  .link-dark {
    @apply text-dark-blue;
  }
  .link-light {
    @apply text-white;
  }
  .content-wrapper {
    @apply mx-auto max-w-[1300px];
  }
  .header__navigation {
    @apply hidden lg:block w-full bg-gradient-red-blue2 lg:bg-none before:block lg:before:hidden before:bg-tg-logo-large before:bg-no-repeat before:absolute before:left-0 before:top-[120px] before:w-full before:h-full before:max-h-[400px] before:bg-contain;
  }
  .menu__link-wrapper {
    @apply flex items-center gap-2;
  }
  .menu__link {
    @apply text-menu-item-mobile lg:text-body2 text-white font-semibold relative whitespace-nowrap;
  }
  .menu__link--active-link {
    @apply after:absolute after:bottom-[-15px] lg:after:bottom-[calc(-100%-10px)] after:left-0 after:h-1.5 after:w-full after:bg-red2;
  }
  .header__navigation--toggle.open .burger-bar-middle {
    @apply hidden;
  }
  .header__navigation--toggle.open .burger-bar-top {
    @apply rotate-45 translate-y-[1px];
  }
  .header__navigation--toggle.open .burger-bar-bottom {
    @apply -rotate-45;
  }
  .burger-bar {
    @apply bg-white h-0.5 w-5 block transition-transform;
  }
  .header__navigation.open {
    @apply bg-dark-blue block left-0 right-0 min-h-[calc(100vh-90px)] h-full overflow-scroll absolute top-[90px] z-10;
  }
  .menu--desktop .menu__item {
    @apply py-5;
  }
  .menu__submenu .menu__item {
    @apply py-0;
  }
  .menu__item--open > .menu__submenu,
  .menu__item--open + .menu__submenu {
    @apply flex w-max ;
  }
  .menu__submenu {
    @apply lg:bg-dark-blue no-list relative hidden lg:absolute text-left z-[11] w-full flex-col;
  }
  .menu__submenu .menu__link {
    @apply px-5 py-2 flex after:hidden;
  }
  .menu--desktop .menu__submenu {
    @apply border-t-[5px] border-t-red2 top-full;
  }
  .menu--desktop .menu__submenu .menu__link:hover {
    @apply bg-dark-blue;
  }
  .menu--mobile .menu__link-wrapper {
    @apply justify-end;
  }
  .menu--mobile .menu__submenu {
    @apply mt-8;
  }
  .menu--mobile .menu__submenu .menu__link {
    @apply text-menu-submenu-item-mobile p-0;
  }
  .menu__child-toggle {
    @apply cursor-pointer w-[14px] h-[9px] lg:w-[9px] lg:h-[6px];
  }
  .hudb-error-message {
    @apply text-h2 font-normal tracking-wider text-center opacity-30;
  }
  .cards-fractional-container {
    @apply relative lg:bg-white lg:pt-20 lg:pr-20 pb-16 lg:pb-28 lg:rounded-tr-2xl lg:border-b-[0.875rem] lg:border-yellow lg:drop-shadow-feature before:absolute before:top-0 before:-left-full lg:before:border-b-[0.875rem] lg:before:border-yellow lg:before:bg-white before:w-full before:h-full lg:before:h-[calc(100%+0.875rem)];
  }
}

@layer base {
  html body {
    @apply text-body2 font-archivo text-dark-blue;
  }
  p {
    @apply text-body2;
  }
  a {
    @apply cursor-pointer block;
  }
  h1 {
    @apply text-h1-mobile lg:text-h1;
  }
  h2 {
    @apply text-h3 lg:text-h2;
  }
  h3 {
    @apply text-h3;
  }
  h4 {
    @apply text-h4;
  }
  h5 {
    @apply text-h5;
  }
  .no-list {
    @apply list-none m-0 p-0;
  }
  label {
    @apply text-dark-blue text-body2;
  }
  .bg-gradient-blue-red2 label {
    @apply text-white;
  }
  .resume-input-text {
    @apply text-dark-blue;
  }
  input::placeholder {
    @apply text-grey9;
  }
  input[type=text],
  input[type=tel],
  input[type=email],
  input[type=date],
  select,
  .resume-input-container,
  .chips-container {
    @apply w-full border-2 border-grey11 px-6 py-3 rounded-full outline-none;
  }
  .chips-container + ul {
    @apply hidden;
  }
  .chips-container.open + ul {
    @apply block;
  }
  textarea {
    @apply h-[200px] w-full border rounded-2xl px-6 py-2 outline-none;
  }
  .hs-form ul {
    @apply grid grid-cols-2;
  }
  .hs-form .hs_choose_the_services_that_best_fit_your_needs label {
    @apply text-[20px];
  }
}

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  /* line-height: 1.15;  */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

/* h1 {
  font-size: 2em;
  margin: 0.67em 0;
} */

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 1024px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
.section-with-gradient > .row-fluid {
  position: relative;
  z-index: 2;
}

.dnd-section > .row-fluid {
  max-width: 1300px;
  margin: 0 auto;
}

.dnd-section-alt > .row-fluid {
  max-width: 1120px;
  margin: 0 auto;
}
.dnd-section-min > .row-fluid {
  max-width: 990px;
  margin: 0 auto;
}
/* 
.dnd-section .dnd-column {
  padding: 0 1rem;
} */

@media (max-width: 768px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}

/* Elements
Base HMTL elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

/* Border on white background */
input[type=text]:active, 
input[type=text]:focus,
input[type=text]:focus-visible, 
input[type=tel]:active, 
input[type=tel]:focus, 
input[type=tel]:focus-visible,
input[type=email]:active,
input[type=email]:focus,
input[type=email]:focus-visible,
input[type=date]:active,
input[type=date]:focus,
input[type=date]:focus-visible,
select:active,
select:focus,
select:focus-visible,
.resume-input-container:active
.resume-input-container:focus,
.resume-input-container:focus-visible,
.chips-container:active,
.chips-container:focus,
.chips-container:focus-visible,
.chips-container.open {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(90deg, #1B1546 0%, #3A1653 14.29%, #5A125B 28.57%, #7A055E 42.86%, #99005B 57.14%, #B60054 71.43%, #CF0047 85.71%, #E31635 100%) border-box;
}

/* Border on colored background */
.bg-gradient-blue-red2 input[type=text]:active, 
.bg-gradient-blue-red2 input[type=text]:focus,
.bg-gradient-blue-red2 input[type=text]:focus-visible, 
.bg-gradient-blue-red2 input[type=tel]:active, 
.bg-gradient-blue-red2 input[type=tel]:focus, 
.bg-gradient-blue-red2 input[type=tel]:focus-visible,
.bg-gradient-blue-red2 input[type=email]:active,
.bg-gradient-blue-red2 input[type=email]:focus,
.bg-gradient-blue-red2 input[type=email]:focus-visible,
.bg-gradient-blue-red2 input[type=date]:active,
.bg-gradient-blue-red2 input[type=date]:focus,
.bg-gradient-blue-red2 input[type=date]:focus-visible,
.bg-gradient-blue-red2 select:active,
.bg-gradient-blue-red2 select:focus,
.bg-gradient-blue-red2 select:focus-visible,
.bg-gradient-blue-red2 .resume-input-container:active
.bg-gradient-blue-red2 .resume-input-container:focus,
.bg-gradient-blue-red2 .resume-input-container:focus-visible,
.bg-gradient-blue-red2 .chips-container:active,
.bg-gradient-blue-red2 .chips-container:focus,
.bg-gradient-blue-red2 .chips-container:focus-visible,
.bg-gradient-blue-red2 .chips-container.open {
  border: 2px solid #FFAE3D;
}

.resume-input-container.border-green {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #4F9635 100%, #549F38 100%, #58A73B 100%, #5DB03E 100%, #62B941 100%,#66C245 100%, #6BCB48 100%, #70D44B 100%) border-box;
}

textarea:active, 
textarea:focus, 
textarea:focus-visible {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(90deg, #1B1546 0%, #3A1653 14.29%, #5A125B 28.57%, #7A055E 42.86%, #99005B 57.14%, #B60054 71.43%, #CF0047 85.71%, #E31635 100%) border-box; 
}

.bg-gradient-blue-red2 textarea:active,
.bg-gradient-blue-red2 textarea:focus,
.bg-gradient-blue-red2 textarea:focus-visible {
  border: 2px solid #FFAE3D;
}

.hs-form {
  max-width: 960px;
  margin: auto;
}
.hs-form fieldset {
  max-width: none !important;
  margin-bottom: 1rem !important;  
}

.hs-form fieldset.form-columns-3 {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 1rem;
  width: 98%;
}

.hs-form fieldset.form-columns-3 .hs-form-field {
  width: 100% !important;
}

@media(max-width:1024px) {
  .hs-form fieldset.form-columns-3  {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.hs-form .form-columns-1 .hs-input {
  width: 98% !important;
}

.grecaptcha-badge {
  margin: auto;
}
/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

/* Missing Template at Path: \'the-goal-theme\/css\/components\/_header.css\' */
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Footer module */
#hs_cos_wrapper_Footer_navigation {
  width: 100%;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

.widget-type-rich_text ul {
  list-style: initial;
  list-style-position: inside;
}

.widget-type-rich_text ul li h1,
.widget-type-rich_text ul li h2,
.widget-type-rich_text ul li h3,
.widget-type-rich_text ul li h4,
.widget-type-rich_text ul li h5,
.widget-type-rich_text ul li h6 {
  display: inline;
}

.widget-type-rich_text a {
  display: inline;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

/* For content that needs to be visually hidden but stay visible for screenreaders */

.show-for-sr {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}

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

.hs-responsive-embed-wrapper {
  min-width: 100% !important;
}