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

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/BricolageGrotesque-VariableFont_opsz,wdth,wght.ttf');
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-VariableFont_opsz,wght.ttf');
}

/**
 * CONTENTS
 *
 * BASE
 * Base element defaults...........Basic styles for any html element.
 *
 * UNIVERSAL
 * Buttons..............Button elements and active states.
 * Error message............Error message styles.
 *
 * COMPONENTS
 * Form classes............Form input styles.
 * Cards..............Card styles.
 * Menus..............Menu styles.
 */

/*------------------------------------*\
    BASE
\*------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6,
button,
a,
label {
  @apply font-body leading-[120%];
}

body {
  @apply bg-monoY font-body leading-[120%] text-base-120;
}

body:has(.menu-open) {
  overflow-y: hidden;
}

:focus-visible {
  outline: 2px solid #ff6f08;
  outline-offset: 2px;
}

/*------------------------------------*\
    UNIVERSAL
\*------------------------------------*/

.button {
  @apply relative max-w-xs cursor-pointer bg-primaryGreen
  px-4 py-1.5 text-sm  font-semibold  tracking-wider text-background
  shadow-md;
}

.button-disabled {
  @apply relative max-w-xs cursor-not-allowed bg-primaryGreen px-4
  py-1.5 text-sm font-semibold  tracking-wider  text-background opacity-60
  shadow-md;
}

.button:active {
  top: 0.1rem;
}

.button-rounded {
  @apply rounded-md;
}

.button-pill {
  @apply rounded-2xl text-xs;
}

.active-link {
  fill: #ff9e5e;
  border-color: #ff9e5e;
}

.error-message {
  @apply text-lg font-bold italic text-primaryOrange;
}

/*------------------------------------*\
    COMPONENTS
\*------------------------------------*/

/* Form classes*/

.input-text {
  @apply rounded-3xl border border-primaryGreen bg-background px-5 py-3 text-sm md:w-80;
}

/*  Cards */

.card {
  @apply max-w-md overflow-hidden rounded-lg bg-white pb-5 shadow-sm transition-all
  hover:scale-95 hover:shadow-lg lg:text-lg;
}

/*  Menus */

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.menu-link {
  @apply relative flex items-center px-4 py-2 text-lg;
}

.menu-link:before {
  content: '';
  position: absolute;
  transform: translateY(-1.8rem);
  width: 90%;
  height: 2px;
  background-color: #cdcdcd;
}

.last-link::after {
  content: '';
  position: absolute;
  transform: translateY(1.8rem);
  width: 90%;
  height: 2px;
  background-color: #cdcdcd;
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #f3f3f3 inset !important;
  -webkit-text-fill-color: #929292 !important;
}
