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

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

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

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

*/

@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: 'Biolinum';
    src: url('../fonts/LinBiolinum_RI.woff') format('woff');
    font-display: swap;
    font-weight: normal;
    font-style: italic;
}

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

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

@font-face {
    font-family: 'Libertine';
    src: url('../fonts/LinLibertine_RB.woff') format('woff');
    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;
}

@layer components {
    body {
        @apply text-base desktop:text-lg w-full h-full
    }

    .ha-topnav {
        @apply flex desktop:grow-0 desktop:shrink-0 md:text-lg 2xl:text-xl desktop:place-self-end xl:mb-1
    }

    .ha-topnav a {
        @apply hidden text-gray-700 hover:text-gray-900  desktop:inline-block mr-6 2xl:mr-7
    }

    .ha-topnav a:last-child {
        @apply mr-0
    }

    .ha-topnav-dropdown {
        @apply hidden desktop:relative desktop:inline-block
    }

    .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
        @apply desktop:block
    }

    .ha-topnav-dropdown .ha-topnav-dropdown-content {
        @apply hidden mr-6 pt-1 right-0 desktop:absolute bg-slate-50 min-w-[130px] shadow-md border-gray-400 border-b z-50
    }

    .ha-topnav-dropdown .ha-topnav-dropdown-content a {
        @apply pl-2 pr-3 py-2 block mr-0
    }

    .ha-topnav-dropdown .ha-topnav-dropdown-content .active {
        @apply border-none
    }

    .ha-topnav-dropdown .ha-topnav-dropdown-content a:hover {
        @apply bg-gray-100
    }

    .ha-footer {
        @apply bg-slate-50 w-full h-full desktop:max-w-screen-desktop mx-auto mt-4 p-2 md:p-4 desktop:p-8 text-lg font-serif text-right
    }

    .ha-footer a {
        @apply underline decoration-dotted
    }

    .ha-footer a:hover {
        @apply underline decoration-solid
    }

    /* TODO INLINE

    .ha-maincolumn {
        @apply bg-slate-50 mx-auto p-2 md:p-4 desktop:px-16 desktop:py-12 xl:pr-80 text-lg font-serif 
    }  */

    .ha-static {
        @apply w-full bg-slate-50 py-12 px-16 hyphenate md:pr-80 font-serif
    }
    .ha-static h1 {
        @apply font-bold text-xl desktop:font-normal desktop:text-4xl mb-6
    }

    .ha-static h2 {
        @apply my-3 mt-4 text-lg desktop:text-2xl
    }

    .ha-static h3 {
        @apply mt-4 mb-2 text-hamannHighlight
    }

    .ha-static table {
        @apply my-3 w-full
    }

    .ha-static table th {
        @apply text-left font-normal text-hamannHighlight
    }

    .ha-static .fullwidth {
        @apply w-full desktop:max-w-screen-desktop md:-mr-80
    }

    .ha-static p {
        @apply my-3
    }

    .ha-static a {
        @apply underline decoration-dotted
    }

    .ha-static a:hover {
        @apply underline decoration-solid
    }

    /* Classes from .NET */

    /* Classes from Javascript */
    .active {
        @apply !text-hamannHighlight pointer-events-none
    }

    .active:hover {
        @apply text-hamannHighlight
    }

    .ha-topnav a.active {
        @apply underline underline-offset-2 desktop:no-underline desktop:border-b-4
    }

    .ha-topnav.ha-topnav-collapsed {
        @apply block w-full h-full mt-4 text-base desktop:flex desktop:w-fit desktop:mt-0 md:text-lg 2xl:text-xl
    }

    .ha-topnav.ha-topnav-collapsed a {
        @apply block py-1 w-full text-left clear-both desktop:inline-block desktop:py-0 desktop:w-fit
    }

    
    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown {
        @apply block desktop:inline-block
    }

    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
        @apply desktop:block
    }

    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content {
        @apply block shadow-none border-none pt-0 desktop:hidden desktop:shadow-md desktop:border-b desktop:pt-2
    }

    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
        @apply py-1 desktop:py-2
    }

}

* {
    text-decoration-skip-ink: all;
}

body {
    background-image:url('../img/subtlenet2.png');
    background-repeat:repeat;
}

/* ul {
    list-style-type:circle;
} */

.hyphenate {
    hyphens: auto;
}

.ha-menu-arrowsymbol::after {
    display: inline-block;
    margin-left: 0.2em;
    vertical-align: 0.2em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

.ha-menusymbol {
    background:var(--white);
    border-radius:4px;
}

.ha-menusymbol svg {
    width:24px;
    height:24px;
    stroke:#000000;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:miter;
    fill:none;
    color:#000000;
}