/* Basic element styles that extend or override Tailwind defaults */
a {
  letter-spacing: -0.025rem;
}

hr {
  margin: 1rem 0;
  border: 0;
  opacity: .25;
}

img {
  max-width: none;
}

label {
  display: inline-block;
}

p {
  line-height: 1.625;
  font-weight: 400;
  margin-bottom: 1rem;
}

small {
  font-size: .875em;
}

svg {
  display: inline;
}

table {
  border-collapse: inherit;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .5rem;
  color: #344767;
}

h1, h2, h3, h4 {
  letter-spacing: -0.05rem;
}

h1, h2, h3 {
  font-weight: 700;
}

h4, h5, h6 {
  font-weight: 600;
}

h1 {
  font-size: 3rem;
  line-height: 1.25;
}

h2 {
  font-size: 2.25rem;
  line-height: 1.3;
}

h3 {
  font-size: 1.875rem;
  line-height: 1.375;
}

h4 {
  font-size: 1.5rem;
  line-height: 1.375;
}

h5 {
  font-size: 1.25rem;
  line-height: 1.375;
}

h6 {
  font-size: 1rem;
  line-height: 1.625;
}

/* Custom container class that extends Tailwind's container */
.soft-container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

@media (min-width: 576px) {
  .soft-container {
    max-width: 576px;
  }
}

@media (min-width: 768px) {
  .soft-container {
    max-width: 768px;
  }
}

@media (min-width: 992px) {
  .soft-container {
    max-width: 992px;
  }
}

@media (min-width: 1200px) {
  .soft-container {
    max-width: 1200px;
  }
}

@media (min-width: 1320px) {
  .soft-container {
    max-width: 1320px;
  }
}


/* Custom ease-nav-brand timing function - truly custom */
.ease-nav-brand {
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

/* Custom h-sidenav - complex calculation */
.h-sidenav {
  height: calc(100vh - 370px);
}

/* Custom shadow styles - complex shadows not available in Tailwind */
.shadow-soft-xl {
  --tw-shadow: 0 20px 27px 0 rgba(0,0,0,0.05);
  --tw-shadow-colored: 0 20px 27px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-soft-2xl {
  --tw-shadow: 0 .3125rem .625rem 0 rgba(0,0,0,.12);
  --tw-shadow-colored: 0 .3125rem .625rem 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-soft-md {
  --tw-shadow: 0 4px 7px -1px rgba(0,0,0,.11),0 2px 4px -1px rgba(0,0,0,.07);
  --tw-shadow-colored: 0 4px 7px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-soft-3xl {
  --tw-shadow: 0 8px 26px -4px hsla(0,0%,8%,.15),0 8px 9px -5px hsla(0,0%,8%,.06);
  --tw-shadow-colored: 0 8px 26px -4px var(--tw-shadow-color), 0 8px 9px -5px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-soft-lg {
  --tw-shadow: 0 2px 12px 0 rgba(0,0,0,.16);
  --tw-shadow-colored: 0 2px 12px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-soft-xl {
  --tw-shadow: 0 23px 45px -11px hsla(0,0%,8%,.25);
  --tw-shadow-colored: 0 23px 45px -11px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-blur {
  --tw-shadow: inset 0 0 1px 1px hsla(0,0%,100%,.9),0 20px 27px 0 rgba(0,0,0,.05);
  --tw-shadow-colored: inset 0 0 1px 1px var(--tw-shadow-color), 0 20px 27px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-soft-sm {
  --tw-shadow: 0 .25rem .375rem -.0625rem hsla(0,0%,8%,.12),0 .125rem .25rem -.0625rem hsla(0,0%,8%,.07);
  --tw-shadow-colored: 0 .25rem .375rem -.0625rem var(--tw-shadow-color), 0 .125rem .25rem -.0625rem var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-soft-xxs {
  --tw-shadow: 0 1px 5px 1px #ddd;
  --tw-shadow-colored: 0 1px 5px 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-soft-primary-outline {
  --tw-shadow: 0 0 0 2px #e9aede;
  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* Custom easing functions - truly custom */
.ease-soft {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.ease-soft-in-out {
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.ease-soft-in {
  transition-timing-function: cubic-bezier(0.42, 0, 1, 1);
}

.ease-bounce {
  transition-timing-function: cubic-bezier(0.34, 1.61, 0.7, 1.3);
}

.ease-soft-out {
  transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
}

/* Custom transform utilities - complex 3D transforms */
.transform3d {
  transform: perspective(999px) rotateX(0deg) translateZ(0);
}

.transform-dropdown {
  transform: perspective(999px) rotateX(-10deg) translateZ(0) translate3d(0,37px,0);
}

.transform-dropdown-show {
  transform: perspective(999px) rotateX(0deg) translateZ(0) translate3d(0,37px,5px);
}

/* Default Tailwind classes renamed with soft- prefix */
.soft-translate-x-full {
  --tw-translate-x: -100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.soft-translate-x-0 {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/* Custom animations */
@-webkit-keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
  }
}

.animate-fade-up {
  -webkit-animation: fade-up 1.5s both;
          animation: fade-up 1.5s both;
}

/* Custom pseudo-element classes that extend Tailwind */
.before\:content-\[\'\/\'\]::before {
  --tw-content: '/';
  content: var(--tw-content);
}

.before\:content-\[\'\\f0d8\'\]::before {
  --tw-content: '\f0d8';
  content: var(--tw-content);
}

.before\:font-awesome::before {
  content: var(--tw-content);
  font-family: FontAwesome;
}

.after\:content-\[\'\\f00c\'\]::after {
  --tw-content: '\f00c';
  content: var(--tw-content);
}

.after\:font-awesome::after {
  content: var(--tw-content);
  font-family: FontAwesome;
}

/* Modify the xl breakpoint to start at 1200px instead of Tailwind's default 1280px */
@media (min-width: 1200px) {
  /* This overrides Tailwind's xl breakpoint for these specific classes */
  .xl\:soft-translate-x-0 {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  
  .xl\:soft-left-0 {
    left: 0px;
  }
  
  .xl\:soft-bg-transparent {
    background-color: transparent;
  }
  
  .xl\:soft-hidden {
    display: none;
  }
    .xl\:soft-ml-\[17\.125rem\] {
    margin-left: 17.125rem;
  }
  
  .xl\:soft-mr-\[17\.125rem\] {
    margin-right: 17.125rem;
  }
}

/* Custom media queries */
@media (max-width: 768px) {
  .md-max\:soft-w-full {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .lg-max\:soft-mt-6 {
    margin-top: 1.5rem;
  }

  .lg-max\:soft-max-h-0 {
    max-height: 0px;
  }

  .lg-max\:soft-overflow-hidden {
    overflow: hidden;
  }

  .lg-max\:soft-bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }

  .lg-max\:soft-text-slate-700 {
    --tw-text-opacity: 1;
    color: rgb(52 71 103 / var(--tw-text-opacity));
  }

  .lg-max\:soft-opacity-0 {
    opacity: 0;
  }
}

@media (max-width: 1200px) {
  .xl-max\:soft-pointer-events-none {
    pointer-events: none;
  }

  .xl-max\:soft-cursor-not-allowed {
    cursor: not-allowed;
  }

  .xl-max\:soft-border-0 {
    border-width: 0px;
  }

  .xl-max\:soft-bg-gradient-to-tl {
    background-image: linear-gradient(to top left, var(--tw-gradient-stops));
  }

  .xl-max\:soft-from-purple-700 {
    --tw-gradient-from: #7928ca;
    --tw-gradient-to: rgb(121 40 202 / 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .xl-max\:soft-to-pink-500 {
    --tw-gradient-to: #ff0080;
  }

  .xl-max\:soft-text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
  }

  .xl-max\:soft-opacity-65 {
    opacity: 0.65;
  }
}