@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,700;0,800;1,300&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

/**********************************************
 ***********************  UI / Global
 **********************************************/

header.site-header {
  @apply bg-brand-dark
}

header.site-header ul {
  @apply p-0
}

h1.view-title {
  @apply text-brand-bright
}

/*
 ***********************  Buttons & Global Form Elements
*/

button, input[type=button], input[type=submit] {
  @apply cursor-pointer
}

.btn {
  @apply rounded-full px-4 py-2 font-bold no-underline text-center
}

.btn-sm {
  @apply text-sm
}

.btn-xs {
  @apply px-2 py-1
}

.btn-primary {
  @apply bg-brand-dark text-primary-light
}
.btn-primary:hover {
  @apply bg-accent-bright text-brand-dark
}

.btn-header {
  @apply px-4 py-2 rounded-full flex items-center justify-between gap-2 text-brand-light
}
.btn-header:hover {
  @apply bg-brand-light text-brand-dark
}
.btn-header.selected {
  @apply bg-brand-light text-brand-dark
}

.btn-outline {
  @apply block border font-bold border-brand-bright text-brand-bright 
}
.btn-outline:active, .btn-outline:hover {
  @apply bg-brand-bright text-primary-light
}

.btn-accent {
  @apply font-bold text-brand-bright bg-accent-bright
}
.btn-accent:hover {
  @apply bg-primary-light
}

.btn-light {
  @apply font-bold bg-primary-light text-brand-bright
}
.btn-light:hover {
  @apply bg-accent-bright
}

.btn-square {
  @apply rounded-md
}

a {
  @apply text-link underline hover:text-black
}

/*
 ***********************  Tables
*/
.table-data {
  @apply w-full
}
.table-data thead {
  @apply text-left text-brand-bright
}
.table-data thead th {
  @apply py-1 px-1
}
.table-data tbody tr {
  @apply odd:bg-neutral-50 
}
.table-data tbody tr td {
  @apply py-1 pl-1 pr-8 whitespace-nowrap
}
.table-data a {
  @apply text-brand-bright
}

/* ---------- Typography ----------- */

body {
  @apply font-montserrat text-base text-black
}

h1, h2, h3, h4, h5, h6, .headline-xs {
  @apply font-montserrat
}

h1 {
  @apply text-4xl leading-8
}

h2 {
  @apply text-3xl
}

h2.devise-header {
  @apply text-primary-light mt-4
}

h3 {
  @apply text-2xl
}

h4 {
  @apply text-xl
}

h5 {
  @apply text-base
}

/* ----------Container----------------------- */

.action-container {
  @apply flex flex-row flex-wrap gap-2 mt-2 sm:m-0 justify-center
}

.action-sub-header {
  @apply flex flex-wrap min-h-14 sm:justify-between sm:flex-row flex-col items-center pb-3
}

.action-header-spacer {
  @apply min-h-10 flex items-center
}

.h-scroll-container {
  @apply overflow-hidden overflow-x-scroll
}

.tab-container {
  @apply flex justify-center border-b-[1px] sm:justify-start
}

.dropdown-menu {
  @apply absolute right-0 min-w-60 bg-primary-light rounded-lg shadow-lg z-50 mt-1 py-4 px-5
}
/* ----------Navigation---------------------- */
.nav-tab {
  @apply block text-brand-light font-bold text-xl no-underline md:px-2
}

.nav-tab.selected {
  @apply rounded-md text-primary-light md:bg-brand-light md:text-brand-dark md:hover:bg-primary-light
}

.nav-tab.deselected {
  @apply hover:text-primary-light
}

.tab {
  @apply no-underline font-normal text-neutral-500 mr-3 min-w-20 text-center sm:text-2xl sm:min-w-32
}
.tab.selected {
  @apply border-b-4 border-brand-dark text-brand-dark
}