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


 /* Sticky Header */
 .sticky{
    @apply lg:fixed z-[99] top-0 w-full bg-white/80 shadow-lg backdrop-blur-sm pt-0 pb-1;
}
.sticky #block-tailwind-site-branding img{
    @apply w-16;
}


/*Mobile Menu HC Nav*/
.hc-nav-trigger{
    top: 1rem;
    right: 1rem;
}
.hc-offcanvas-nav .nav-container, .hc-offcanvas-nav .nav-wrapper, .hc-offcanvas-nav ul{
    @apply bg-primary-100;
}
.hc-offcanvas-nav .nav-content>.nav-close:first-child a, .hc-offcanvas-nav .nav-title+.nav-close a.has-label, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a{
    @apply bg-primary-600 border-primary-600;
}
.hc-offcanvas-nav .nav-item-link, .hc-offcanvas-nav li.nav-close a, .hc-offcanvas-nav .nav-back a{
    @apply border-primary-400 text-gray-900;
}
.hc-nav-trigger span, .hc-nav-trigger span::before, .hc-nav-trigger span::after{
    @apply bg-primary-500;
}
.hc-offcanvas-nav .nav-wrapper>.nav-content>ul:first-of-type>li:first-child:not(.nav-back):not(.nav-close)>.nav-item-wrapper>.nav-item-link{
    @apply border-t-0;
}
.hc-offcanvas-nav .nav-next span::before, .hc-offcanvas-nav .nav-back span::before{
    @apply border-gray-800;
}
.hc-offcanvas-nav .nav-content>h2, .hc-offcanvas-nav .nav-content>h3, .hc-offcanvas-nav .nav-content>h4, .hc-offcanvas-nav .nav-content>h5, .hc-offcanvas-nav .nav-content>h6{
    @apply text-black;
}

/* Vertical Carousel */
.cv-carousel{
    height: 360px;
}
.cv-nav{
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-100%);
}
.cv-carousel .cv-stage-outer{
    height: 100%;
}
.cv-carousel.cv-drag .cv-item{
    height: auto !important;
}


/* Webform */
.form-item{
    @apply mb-5;
}
.views-exposed-form{
    @apply flex items-end gap-x-2 mb-8;
}
.views-exposed-form .form-item{
    @apply mb-0;
}
.views-exposed-form #edit-actions input{
    @apply mb-0;
}
.form-item label{
    @apply block mb-1 font-medium text-gray-900 dark:text-gray-300 after:content-['*'] after:ml-0.5 after:text-red-500;
}
.form-item input,
.form-item select,
.form-item textarea{
    @apply max-w-full shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block  p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light;
}
.form-item select{
    @apply min-w-40;
}

/* Calendar */
.calendar-view-table th{
    @apply normal-case overflow-x-hidden;
}
.calendar-view-table td{
    @apply min-h-0;
}
.calendar-view-table .calendar-view-day__row{
    @apply hidden hover:flex transition;
}
.calendar-view-table .calendar-view-day__number,
.calendar-view-table .next-month .calendar-view-day__number,
.calendar-view-table .previous-month .calendar-view-day__number,
.calendar-view-table .next-month,
.calendar-view-table .previous-month{
    @apply bg-transparent text-gray-300 text-base m-0 p-2 w-auto self-auto cursor-pointer hover:bg-gray-100;
}
.calendar-view-table td.current-month .calendar-view-day__number{
    @apply text-gray-700;
}
.calendar-view-table .is-today .calendar-view-day__number{
    @apply border rounded-full border-primary-600;
}
.calendar-view-table .calendar-view-day:hover .calendar-view-day__number{
    @apply rounded-full;
}
.calendar-view-table caption{
    @apply p-0 leading-normal;
}
.calendar-view-table thead th{
    @apply bg-transparent text-gray-500 text-sm;
}
.calendar-view-table td,
.calendar-view-table .next-month, .calendar-view-table .previous-month{
    @apply border-none p-0;
}
#block-tailwind-views-block-duplicate-of-editorial-calendar-block-1{
    @apply rounded-md bg-gray-200 p-8;
}
#block-tailwind-views-block-duplicate-of-editorial-calendar-block-1 .view{
    @apply relative bg-white p-4 border border-gray-300 rounded-md;
}
.calendar-view-pager{
    @apply absolute top-4 justify-between w-[calc(100%-2rem)];
}
.pager__current,
.calendar-view-pager__reset{
    @apply hidden;
}
.calendar-view-pager .pager__item a{
    @apply inline;
}
.calendar-view-table .next-month:hover, .calendar-view-table .previous-month:hover{
    @apply bg-transparent;
}
/*
.calendar-view-pager .pager__item a{
    @apply text-[0px];
}
.calendar-view-pager .pager__previous a{
    
}
*/

/* Messages */
[aria-label="Error message"]{
    @apply bg-red-200 border-red-500 rounded-lg p-4;
}

body.node-type-happenings #content img{
    @apply w-full;
}
.field_event_wrapper{
    @apply flex gap-x-2 border border-stone-200 bg-stone-100 hover:border-stone-300 hover:bg-stone-50 rounded-3xl -mt-4 mb-8 ps-4 pe-8 py-2 w-fit;
}
.field_event_wrapper .field_label{
    @apply after:content-['-'];
}
.field_gallery_images_description{
    @apply mb-4;
}
body.upcoming-events .views-field-field-page-banner img{
    @apply w-full md:h-64 md:object-cover;
}

#block-tailwind-views-block-upcoming-events-block-1 fieldset{
    @apply ps-4 pt-2 pb-4;
}





@layer base{
    h1{
        @apply text-3xl lg:text-4xl tracking-tight font-medium text-primary-950 mt-4 mb-8;
    }
    h2{
        @apply text-3xl tracking-tight font-medium text-neutral-700 mt-4 mb-8;
    }
    h3{
        @apply text-2xl tracking-tight font-bold text-neutral-500 mt-3 mb-6;
    }
    h4{
        @apply text-xl tracking-tight font-semibold text-neutral-500 mt-2 mb-4;
    }
    h5{
        @apply text-lg tracking-tight font-medium text-neutral-500 mt-2 mb-3;
    }
    h6{
        @apply text-lg tracking-tight font-medium text-neutral-500 mt-1 mb-2;
    }
    a{
        @apply text-primary-600 hover:text-primary-500 no-underline transition duration-200 ease-in;
    }
    li{
        @apply list-none;
    }
    p{
        @apply text-gray-800 leading-relaxed my-3;
    }
    .button{
        @apply rounded-full px-8 py-2 w-fit bg-primary-600 hover:bg-primary-700 text-white hover:text-white font-bold max-lg:mx-auto my-4 inline-block;
    }
    time{
        @apply text-sm;
    }
}

@layer components{
    .views-field-field-banner-image img{
        @apply w-full;
    }   
}

@layer utilities{   
    #header{
        @apply relative bg-white/80 shadow-md shadow-gray-200;
    } 
    header nav ul li a,
    header nav ul li button{
        @apply text-neutral-950 hover:text-primary-500 block px-2 py-3 lg:px-4 relative 
        after:absolute after:left-0 after:right-0 after:bottom-0 after:w-0 after:h-[3px] after:bg-primary-500 after:mx-auto after:invisible after:transition-all after:duration-300 after:ease-in-out
        hover:after:w-1/2 hover:after:visible;
    }
    header nav ul li a.is-active{
        @apply after:w-1/2 after:visible;
    }
    header nav ul li ul li a{
        @apply hover:translate-x-1 transition duration-300 ease-in-out after:content-none;
    }
    ul.menu li a.is-active{
        @apply text-primary-500;
    }   
    ul.menu li{
        @apply relative;
    }
    ul.dropdown-menu li a{
        @apply block px-4 py-3 border-b border-b-neutral-100 text-sm;
    }
    #block-tailwind-breadcrumbs{
        @apply mb-8;
    }    
    #block-tailwind-breadcrumbs ul li a{
        @apply underline underline-offset-4 decoration-primary-500 decoration-2;
    }
    body.path-frontpage .block h2.block-title{
        @apply mt-1 mb-3;
    }
    #footer nav > ul li a{
        @apply inline-block text-white hover:text-primary-500 hover:translate-x-1 transition duration-300 ease-in-out py-2;
    }
    #footer-bottom > div{
        @apply container mx-auto md:flex justify-between p-2;
    } 
   .owl-carousel .owl-nav{
        @apply absolute -top-16 right-0 hidden;
    }
    .owl-carousel .owl-nav button.owl-next, 
    .owl-carousel .owl-nav button.owl-prev{
        @apply text-5xl bg-neutral-50 !px-4 !py-0 mx-1;
    }
    #block-tailwind-views-block-slideshow-block-1 .views-field-fieldset{
        @apply absolute z-10 top-1/3 left-1/3 max-w-4xl bg-white bg-opacity-85 rounded-xl shadow-xl p-8;
    }
    #news-carousel .owl-item img,
    #facilities-carousel .owl-item img{
        @apply h-72 object-cover rounded-xl;
    }
    #banner.owl-carousel .owl-item img{
        @apply object-cover h-[66vh] w-full;
    }
    #banner.owl-carousel .owl-nav{
        @apply top-1/2 right-auto w-full flex justify-between;
    }
    #banner.owl-carousel .owl-dots{
        @apply absolute z-10 bottom-2 left-1/2;
    }
    #content-right [id*="block"],
    #block-tailwind-views-block-upcoming-events-block-2{
        @apply bg-gray-100 rounded-lg p-8 mb-4;
    }
    #block-tailwind-views-block-upcoming-events-block-2{
        @apply bg-neutral-100;
    }
    #content-right h2,
    #block-tailwind-views-block-upcoming-events-block-2 h2{
        @apply text-2xl border-b-4 border-b-primary-400 pb-4 mb-4;
    }
    #accordion-collapse h5 [aria-expanded="true"]{
        @apply !text-primary-600 font-bold bg-transparent;
    }

    /* Custom Styles */
    #block-department-views-block-notifications-block-1{
        @apply max-w-screen-2xl mx-auto overflow-hidden p-4;
    }
    #block-department-views-block-notifications-block-1 > div{
        @apply animate-marquee hover:[animation-play-state:paused];
    }
    #block-department-views-block-notifications-block-1 .views-row{
        @apply inline-block whitespace-nowrap px-4;
    }
 

    #block-tailwind-views-block-user-profile-bio-block-1 img{
        @apply lg:h-96 lg:object-cover;
    }
    #block-tailwind-views-block-user-profile-bio-block-1 fieldset{
        @apply p-4 text-white;
    }
    body.node-type-user_profile #content-left{
        @apply bg-[#e94c26] mb-4;
    }
    /*
    body.publications .views-row a{
        @apply font-serif text-black hover:text-primary-500;
    } */ 
    body.upcoming-events .view-upcoming-events .views-field-fieldset{
        @apply relative border-t-[50px] border-t-gray-100;
    }
    body.upcoming-events .view-upcoming-events fieldset{
        @apply px-6 py-4;
    }
    body.upcoming-events .views-field-field-from-to{
        @apply absolute -top-10 text-center uppercase bg-white border border-gray-300 px-3 py-1 rounded-xl;
    }
    body.upcoming-events .views-field-field-event-category{
        @apply absolute -top-8 right-6;
    }
    .views-field-field-event-category a{
        @apply text-sm text-gray-600 underline underline-offset-4 hover:text-primary-500;
    }
    .views-field-field-from-to-1{
        @apply text-sm text-primary-950 pt-2;
    }
    #block-tailwind-views-block-upcoming-events-block-2{
        @apply border-l-[20px] border-l-primary-500;
    }
    #content-right #block-tailwind-views-block-upcoming-events-block-4{
        @apply p-0;
    }
    #block-tailwind-views-block-upcoming-events-block-1 .views-field-field-from-to-1 .field-content{
        @apply bg-neutral-50 p-4 text-center w-16 leading-6 font-bold uppercase rounded-md;
    }
    /*.views-field-title a{
        @apply text-gray-800 hover:text-primary-500;
    }*/
    body.front #block-tailwind-views-block-upcoming-events-block-1 .views-row{
        @apply flex;
    }
    .field_facility_image{
        @apply max-w-[36rem];
    }
    #block-tailwind-views-block-duplicate-of-editorial-calendar-block-1{
        @apply max-md:hidden;
    }
    .views-field-title a{
        @apply text-gray-900 hover:text-primary-600;
    }

}