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

/* Regular woff-files for regular font variants curerently
   Instead we can use the Graphite versions of the font   

@font-face {
    font-family: 'Biolinum';
    src: url('/fonts/LinBiolinum_R_G.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Libertine';
    src: url('/fonts/LinLibertine_R_G.ttf') format('truetype');
    font-display: swap;
    font-weight: normal;
    font-style: normal;
}

*/

@font-face {
    font-family: "Sofia Sans";
    src: url("../fonts/SofiaSans-Regular.ttf") format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
  }
  
  
  @font-face {
    font-family: "Sofia Sans";
    src: url("../fonts/SofiaSans-Italic.ttf") format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: italic;
  }
  
  @font-face {
    font-family: "Sofia Sans";
    src: url("../fonts/SofiaSans-Bold.ttf") format("truetype");
    font-display: swap;
    font-weight: bold;
    font-style: normal;
  }

  @font-face {
    font-family: "Sofia Sans";
    src: url("../fonts/SofiaSans-BoldItalic.ttf") format("truetype");
    font-display: swap;
    font-weight: bold;
    font-style: italic;
  }

  @font-face {
    font-family: "Libertine";
    src: url("../fonts/LinLibertine_Rah.ttf") format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
  }
  
  @font-face {
    font-family: "Libertine";
    src: url("../fonts/LinLibertine_RIah.ttf") format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: italic;
  }
  
  @font-face {
    font-family: "Libertine";
    src: url("../fonts/LinLibertine_RZah.ttf") format("truetype");
    font-display: swap;
    font-weight: bold;
    font-style: normal;
  }
  
  /* @font-face {
    font-family: "Playfair";
    src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
    font-display: swap;
    font-weight: normal;
    font-style: normal;
  } */

  body {
    font-size: 15px;
  }

  @layer components {
    .searchbar {
      @apply sticky top-0 z-20 bg-slate-100 px-4 py-0.5 pt-1.5 self-start w-full sm:flex sm:flex-row items-baseline gap-x-3 border-b
    }

    .searchbar button {
      @apply inline-block bg-white shrink py-0.5 px-1.5 border border-slate-300
    }

    .searchbar input {
      @apply inline-block w-full sm:w-auto sm:grow p-0.5 px-1 my-1 mb-2 border border-slate-300
    }

    .hideifsearching {
      @apply inline-block
    }

    .searchbar select {
      @apply inline-block bg-white px-1.5 pt-1.5 pb-1 border border-slate-300
    }

    .sidebar-nav li li {
      @apply ml-4
    }

    .active {
      @apply font-bold
    }

    .sidebar-nav .active::before {
      @apply text-lenz-6-highlight
    }

    .yearlist {
      @apply mt-4 w-full
    }

    .yearlist .category .categorytitle {
      @apply text-xl pr-1 pl-3 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-14 sm:order-2
    }

    .yearlist .category .categorybody {
      @apply sm:px-4 sm:border-r-2 grow md:border-lenz-12-lighterblue
    }

    .yearlist .category {
      @apply flex flex-col sm:flex-row w-full mb-5
    }

    .yearlist .searchable {
      @apply mt-3 px-4 pl-6 -indent-6 
    }

    .yearlist .searchable:first-of-type {
      @apply mt-0
    }

    .maincolumn {
      @apply basis-4/5 grow-0
    }

    .Kommentar {
      @apply !indent-0 !pl-0
    }

    .handschrift-sammlung .handschrift {
      @apply border sm:basis-[48%] xl:basis-[31.5%] shrink-0 bg-white py-1
    }

    .handschrift-sammlung .ueberschrift-gruppe {
      @apply w-full
    }

    .handschrift-sammlung .beschreibung {
      @apply mt-1.5 px-2.5
    }

    .handschrift-sammlung .ueberschrift-gruppe {
      @apply text-xl font-bold
    }

    .handschrift-sammlung .feld {
      @apply rounded-md text-sm mr-1 px-2 py-0.5 bg-slate-200 font-bold
    }

    .handschrift-sammlung .wert {
      @apply py-0.5 px-1
    }

    .literaturliste li {
      @apply pl-6 -indent-6
    }

    .legende .feld {
      @apply rounded-md text-sm py-0.5 bg-slate-200 font-bold px-1.5 mb-1
    }
  }

  .hidden-important {
    display: none !important;
  }

  .hyphenation {
    hyphens: auto;
  }

  .sidebar-nav .active::before {
    content: "· ";
  }
  

  .twocolumns {
    columns: 2;
  }

  .avoidbreak {
    break-inside: avoid;
  }

  .Kommentar {

  }
