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

/* Custom TW styles */
.heading {
    @apply text-xl leading-6 font-bold sm:text-2xl;
}
.heading-lg {
    @apply text-3xl leading-8 font-bold sm:text-4xl;
}
.heading-xl {
    @apply text-4xl leading-8 font-bold sm:text-5xl;
}
.sub-heading {
    @apply text-xl text-gray-500;
}
.sub-heading-bold {
    @apply text-xl text-gray-700 leading-tight font-bold;
}
.text {
    @apply font-thin lg:text-lg text-gray-700;
}
.sub-text {
    @apply text-base text-gray-500;
}
.lp-text p {
    @apply font-thin lg:text-lg text-gray-700 mb-6; 
}
.btn {
    @apply bg-200 bg-right bg-gradient-to-tr from-orange-600 to-yellow-400 via-orange-500 uppercase hover:bg-left inline-flex items-center justify-center shadow-md transition-all duration-300 px-8 py-4 font-normal rounded-full text-white;
}
.bg {
    @apply bg-200 bg-right bg-gradient-to-r from-orange-600 to-yellow-500 via-orange-500 uppercase hover:bg-left group-hover:bg-left inline-flex items-center justify-center shadow-md transition-all duration-300 text-white;
}
/* Forms */
.gform_wrapper {
    @apply ml-auto max-w-4xl md:pl-8;
}
.gform_wrapper input[type=submit] {
    @apply mb-1;
}
.gform_title {
    @apply text-center md:text-left font-bold px-2 md:px-0 leading-tight text-xl md:text-3xl;
}
#gform_1>div:first-child {
    @apply overflow-hidden transition-all flex-1 duration-300 max-h-[92px];
}
.gform_description {
    @apply block text-center md:text-left text-lg px-2 md:px-0;
}
.gform_fields {
    @apply px-0.5 pt-8 grid grid-cols-6 gap-x-4 gap-y-8 md:mr-4;
}
.gform_fields .gfield,
.gform_wrapper .name_last {
    @apply relative;
}
.gform_fields .gfield:nth-child(1) .ginput_complex {
    @apply grid grid-cols-2 gap-4;
}
.gform_fields input,
.gform_fields textarea {
    @apply text-xl px-6 py-3 shadow-inner bg-white w-full focus:outline-none focus:ring-orange-600 focus:ring-1 focus:ring-offset-1 focus:ring-offset-orange-600;
}
.gform_fields input {
    @apply rounded-full h-[56px];
}
.gform_fields textarea {
    @apply rounded-3xl;
}
.gform_fields .gfield:nth-child(1) {
    @apply col-span-full md:col-span-4;
}
.gform_fields .gfield:nth-child(2) {
    @apply col-span-full md:col-span-2;
}
.gform_fields .gfield:nth-child(3), 
.gform_fields .gfield:nth-child(4) {
    @apply col-span-full md:col-span-3;
}
.gform_fields .gfield:nth-child(5) {
    @apply col-span-full;
}
.gform_wrapper form {
    @apply flex flex-col md:flex-row items-end;
}
.gform_wrapper legend,
.gform_required_legend {
    @apply hidden;
}
.gform_wrapper label {
    @apply absolute left-0 ml-6 mt-4 leading-6 text-lg text-cool-gray font-normal z-10 transition-all duration-300;
}
.gform_wrapper select {
    @apply text-left text-cool-gray text-lg px-6 py-3 rounded-full bg-white w-full;
}
/* Posts */
#blog-content p {
    @apply font-thin text-lg md:text-xl leading-normal py-3;
}
#blog-content > p:first-child {
    @apply md:text-3xl mb-5 font-normal py-0;
}
#blog-content a {
    @apply text-orange-600 underline;
}
#blog-content blockquote {
    @apply font-thin text-lg md:text-xl bg-orange-300 bg-opacity-20 leading-normal border-l-4 border-orange-600 italic my-8 pl-6 pr-2 md:pl-12;
}
#blog-content ol {
    @apply font-thin text-lg md:text-xl leading-normal pl-6 py-3 list-decimal;
}
#blog-content ul {
    @apply font-thin text-lg md:text-xl leading-normal pl-6 py-3 list-disc;
}
#blog-content li {
    @apply py-2 leading-tight;
}


/* MORE GRAVIRTY FORMS */
select {
    /* // A reset of styles, including removing the default dropdown arrow */
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    cursor: inherit;
    line-height: inherit;
    z-index: 1;
    outline: none;
}

select::-ms-expand {
    display: none;
}

.ginput_container_select {
    display: flex;
    align-items: center;
    position: relative;
    border-radius: 999px;
    /* padding: 1rem; */
    font-size: 1.125rem;
    cursor: pointer;
    line-height: 1.1;
}

select::after {
    grid-area: select;
}

/* // Custom arrow */
.ginput_container_select::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='pointer-events-none absolute top-4 mr-4 right-0 h-6 w-6 text-gray-400 transform transition-all duration-300' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    justify-self: end;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
    position: absolute;
    right: 0;
    z-index: 10;
    opacity: 25%;
}

select {
    padding: 1rem;
    width: 100%;
    border-radius: 999px;
    border: 2px solid #fff;
}

select:focus {
    border: 2px solid #f37223;
}
/* MORE GRAVIRTY FORMS */

/* Remove sticky WP nav */
#wpadminbar {
    position: absolute;
}

#nav {
    z-index: 999;
}
strong {
    font-weight: bold;
}
.accordion {
    margin: 0 !important;
}

.dropdown .panel {
    padding: 0 18px;
}

.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.panel-open {
    max-height: auto;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.hero h1>strong {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Testimonials */
.arrow-left {
  	border-top: 12px solid #fff;
  	border-right:16px solid #fff;
  	border-left: 12px solid transparent;
  	border-bottom:16px solid transparent; 
}
.arrow-left-orange {
  	border-top: 12px solid #fed7aa;
  	border-right:16px solid #fed7aa;
  	border-left: 12px solid transparent;
  	border-bottom:16px solid transparent; 
	opacity:50%;
}
.arrow-left-gray {
  	border-top: 12px solid #DDDDDD;
  	border-right:16px solid #DDDDDD;
  	border-left: 12px solid transparent;
  	border-bottom:16px solid transparent; 
	opacity:50%;
}