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


/*******************************
// Variables
*******************************/
:root {
  --body-font: 'Inter';
  --head-font: 'Inter', 'sans-serif';
  --btn-style: 9999px;
  
/*  --animation-order: 0;*/
}


/*******************************
// Base
*******************************/

html{
    height:100%
}

html, body { 
/*    font-size: 16px;*/
}

header, main, article, footer{
  @apply relative z-0;
}

body {
  min-height: 100%;
  font-family: var(--body-font);
  
  /* Remove highlight on mobile*/
  -webkit-tap-highlight-color: transparent;
  
  /* Smooth font*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;  
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  

}

.table td{ 
  @apply border-0 pb-1;
}
  
.container{
/*  @apply max-w-5xl*/
}
/*******************************
// Utils
*******************************/
@layer components {
  .container{
    @apply relative mx-auto w-full max-w-screen-desktop;    
    padding: 0 4vw;
    
    &.max-w-screen-full{
      @apply px-0;
    }    
  }
}


/*******************************
// 2. Buttons
*******************************/

@layer components {
  
  /*Setup*/
  .btn, .btn-outline{
    @apply text-center text-sm font-medium leading-none;
    @apply inline-block px-10 py-3 hover:cursor-pointer;
  
    transition: color 200ms ease 0s, background-color 200ms ease 0s;
    border-radius: var(--btn-style);
  }
  
  .btn{
/*    background: rgb(var(--color-button));*/
/*    color: rgb(var(--color-button-text));*/
    @apply bg-black text-white;
		@apply hover:opacity-90;
  }
  
  .btn-outline{
   @apply border-black text-black;
    
    @apply border;
		@apply hover:opacity-90;
  }
  
  .btn-xl{
    @apply inline-block px-10 py-3.5 text-base hover:cursor-pointer;
  }
  
  .btn-sm{
    @apply inline-block px-7 py-1.5 text-base hover:cursor-pointer;
  }
  
}

/*******************************
// Typography
*******************************/
/*Tex Gyre Termes*/
/*Arial unicode*/

/* https://github.com/tailwindlabs/tailwindcss-typography/blob/master/src/styles.js */
@layer components {  
  .table{
    @apply w-full mb-4;
    th{ @apply font-bold text-lg text-left pt-2 pb-5; } 
    td{ @apply text-base text-left border-t border-current pt-2 pb-6 tablet:pb-8; } 
  }
}

@layer components {  


  @layer base {
    a{
      @apply bg-transparent outline-none;
    }

    b, strong {
      font-weight:bold
    }
    
    p, li{
      @apply text-lg;
    }
    
    h1, h2, h3, .h1, .h2, .h3, .font-head {
      font-family: var(--font-heading-family);
      @apply font-normal;
    }
    
    h1, .h1{
      @apply !leading-none tracking-tight font-medium text-4xl tablet:text-5xl;
      
      &.display{
        @apply leading-none text-6xl tablet:text-7xl laptop:text-8xl;        
      }
    }
    
    h2, .h2{
      @apply leading-tight tracking-tight text-2xl tablet:text-4xl;
    }
    
    h3, .h3{
      @apply leading-tight tracking-tight text-xl tablet:text-2xl;
      @apply font-medium;
    }
    
    h4, .h4{
      @apply leading-tight font-semibold text-base tablet:text-lg;
    }
    
    
    .content {
       h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
        @apply mb-6;
       }
       
       p{ @apply mb-4; }
       h1, .h1{ @apply tablet:mb-8; }
       h2, .h2{ @apply tablet:mb-6; }
       h3, .h3{ @apply mb-2; }
       h4, .h4{ @apply mb-4; }
       
       ul, ol{
         @apply mb-6 mt-2 pl-6;
       }
       ul{ @apply list-disc; }
       li{ @apply leading-normal; }
       
       figure{ @apply my-6 tablet:my-8 }
       figcaption{ @apply text-center mt-4 text-base }
       
       
       /*  //Reset margin on first/last child*/
       > :first-child {
         margin-top: 0 !important;
       }

       > :last-child {
         margin-bottom: 0 !important;
       }
  
       * :not(h1):not(h2):not(h3) {
         word-wrap:break-word
       }       
    }
    
  }
}

/*******************************
// Typography
*******************************/
@layer components {  
  
  .form-group{
    @apply mb-4;
  }
  
  .form-group label{
    @apply block mb-1.5 font-semibold;
  }

  .form-control{
    @apply w-full rounded;
  }

}


/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */