/*
Theme Name: Nibu
Author: Ramsès Àlvarez
Description: Nibu Estil general
Version: 1.0.0
*/

/*	*********************************************************************************************************************************************
	*** NIBU GENERAL ****************************************************************************************************************************
	*********************************************************************************************************************************************	*/

	:root {		

		/* Palette */
		--blue-color-1:#1724B5; 
		--blue-color-2:#4550C4;
        --blue-color-3:#747CD3; 
        --blue-color-4:#A2A7E1;
        --blue-color-5:#D1D3F0; 
        --blue-color-6:#E8E9F8; 
        --yellow-color:#FDC300;
        --black-color:#151515;
        --white-color:#ffffff;

        /* Fonts */
        --font:'DM Sans', sans-serif;

		/* Font Awesome */
		--fa-angle-down:'\f107'; 
		
		/* Theme */
		--primary-color:var(--blue-color-1);
        --secondary-color:var(--yellow-color);
		--icon-font:'Font Awesome 6 Pro';
		--icon-brands-font:'Font Awesome 6 Brands';	
	}
	
	*, *:after, *:before {
		 -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-tap-highlight-color:rgba(255,255,255,0); 
	}

    /*	*** GENERAL > ESTRUCTURA ****************************************************************************************************************	*/	
        html { font-size:18px; font-weight:300; height:100%; margin:0; padding:0; scroll-behavior:smooth; }
            body { display:flex; flex-direction:column; font-family:var(--font); font-size:24px; line-height:1.5em; margin:0; min-height:100%; overflow-x:hidden; padding:0; }	
                body > * { order:99; }
                body > header { order:1; }
            main { display:flex; flex-direction:column; }
                main article { display:flex; flex-direction:column; padding:0; }
            .wrapper { margin:0 auto; max-width:100%; padding:0 20px; width:1440px; }
            #content { overflow-x:hidden; }

	/*	*** GENERAL > TÍTOLS ********************************************************************************************************************	*/
        h1, h2, h3, h4, h5, h6 { color:var(--primary-color); font-weight:700; line-height:1em; margin:0; padding:0; }	
        h1 { font-size:58px; font-weight:700; line-height:1em; position:relative; text-align:center; }
        h2 { font-size:42px; }
        h3 { font-size:1.20rem; }
        h4 { font-size:1.15rem; }
        h5 { font-size:1.10rem; }
        h6 { font-size:1.05rem; }

	/*	*** GENERAL > ELEMENTS ******************************************************************************************************************	*/
        a { color:var(--primary-color); text-decoration:none; }
        a:hover, a:active, #nav a:hover, #header a:hover { color:var(--secondary-color); }
        .entry-content a:hover {  /* text-decoration:underline; */ }
        strong { font-weight:600; }
        p { margin-bottom:.5em; margin-top:.5em; }
        figure { margin:0; }
        figure.aligncenter { text-align:center; }
        img { height:auto; image-rendering:-webkit-optimize-contrast; max-width:100%; /* transform:translateZ(0); */ }
        iframe { height:auto; max-width:100%; }

        .separador { align-items:center; display:flex; flex-direction:column; padding:60px 0; width:100%; }
            .separador img { height:10px; width:95px; }

        .hide { display:none !important; }

    /*	*** GENERAL > FORMS *********************************************************************************************************************	*/	

        /* Placeholders */
        ::-webkit-input-placeholder { font-size:1rem; }
        ::-moz-placeholder { font-size:1rem; }
        :-ms-input-placeholder { font-size:1rem; }
        :-moz-placeholder { font-size:1rem; }
        
        /* Chrome Autofill background-color */
        input:-webkit-autofill,
        input:-webkit-autofill:hover, 
        input:-webkit-autofill:focus, 
        input:-webkit-autofill:active{
            -webkit-box-shadow:0 0 0 30px white inset !important;
        }

    /*	*** GENERAL > BOTONS  *******************************************************************************************************************	*/
    .tornar { align-items:center; display:flex; justify-content:center; padding:60px 0; width:100%; }
    a.boto { align-items:center; background:var(--primary-color); color:var(--white-color); display:flex; font-size:18px; gap:10px; justify-content:center; line-height:1em; padding:10px 30px; width:fit-content; }
    a.boto:hover { background:var(--blue-color-2); color:var(--secondary-color);  }

    /*	*** GENERAL > QUADRES  ******************************************************************************************************************	*/	
        .quadre { max-width:100%; padding:80px 100px; position:relative; width:893px; }
        .quadre-blau-2 { background:var(--blue-color-2); }
        .quadre-blau-3 { background:var(--blue-color-3); }
        .quadre-blau-4 { background:var(--blue-color-4); }
        .quadre-blau-5 { background:var(--blue-color-5); }
        .quadre-blau-6 { background:var(--blue-color-6); }
        .quadre-esquerra:before, .quadre-dreta:after { content:''; height:100%; position:absolute; right:0; top:0; width:300%; z-index:-1; }
        .quadre-dreta:after { left:0; right:auto; }
        .quadre-blau-2:before, .quadre-blau-2:after { background:var(--blue-color-2); }
        .quadre-blau-3:before, .quadre-blau-3:after { background:var(--blue-color-3); }
        .quadre-blau-4:before, .quadre-blau-4:after { background:var(--blue-color-4); }
        .quadre-blau-5:before, .quadre-blau-5:after { background:var(--blue-color-5); }
        .quadre-blau-6:before, .quadre-blau-6:after { background:var(--blue-color-6); }
    
    /*	*** GENERAL > SWIPER  *******************************************************************************************************************	*/	
    .swiper-container { padding-bottom:35px; } 
    .swiper-slide { box-shadow:0 0 10px rgba(0,0,0,.15);  display:flex !important; }
    .swiper-horizontal > .swiper-pagination-bullets { bottom:0 !important; }
    .swiper-pagination-bullet { background:var(--blue-color-5) !important; height:15px !important; opacity:1 !important; width:15px !important; }
    .swiper-pagination-bullet.swiper-pagination-bullet-active { background:var(--secondary-color) !important; }

    /*	*** GENERAL > HEADER ********************************************************************************************************************	*/	
        #header { background:var(--primary-color); height:80px; position:sticky; top:0; z-index:999; }
            #header > .wrapper { align-items:center; display:flex; flex-direction:row; justify-content:space-between; height:100%; }
                #header a { color:var(--white-color); font-size:20px; font-weight:700; }
                #header a:hover { color:var(--secondary-color); }

        /*	*** GENERAL > HEADER > MENU *********************************************************************************************************	*/	
        nav#site-navigation { align-items:center; column-gap:30px; display:flex; flex-direction:row; height:100%; }
            .menu-menu-principal-container { align-items:center; display:flex; height:100%; }
            #primary-menu { align-items:center; column-gap:30px; display:flex; flex-direction:row; font-size:20px; font-weight:400; height:100%; list-style:none; margin:0; padding:0; }
                #primary-menu li { align-items:center; display:flex; height:100%; }
                #primary-menu ul.sub-menu { background:var(--blue-color-2); display:none; font-size:16px; list-style:none; margin:0 -20px; padding:10px 20px; position:absolute; top:100%; }
                #primary-menu li:hover ul.sub-menu { display:block; padding:0 12px; } 
                    #primary-menu ul.sub-menu li { padding:0; }
                        #primary-menu ul.sub-menu li a { border-bottom:1px solid var(--blue-color-3); padding:15px; width:100%; }
            #header .current-menu-item > a { color:var(--secondary-color); }
            .xarxes-socials { column-gap:30px; display:flex; flex-direction:row; }
                .xarxes-socials a { align-items:center; display:flex; flex-direction:column; }
                    .xarxes-socials span { display:none; font-size:12px; line-height:1.25em; }

        /*	*** GENERAL > HEADER > ENTRY-HEADER *************************************************************************************************	*/	
        .entry-header { align-items:center; display:flex; flex-direction:column; height:240px; justify-content:center; overflow:hidden; padding:0 30px; position:relative; width:100%; }
        .entry-header .container { padding-left:20px; padding-right:20px; }  
            .entry-header h1 { color:var(--white-color); text-transform:uppercase; }
            .header-bg-image { height:100%; left:0; position:absolute; top:0; width:100%; z-index:-1; }
            .header-bg-image:after { background:var(--primary-color); content:''; height:100%; left:0; mix-blend-mode:hard-light; position:absolute; top:0; width:100%; }
                .header-bg-image img { left:50%; position:absolute; top:50%; transform:translate(-50%, -50%); width:100%; }
    
        nav.rank-math-breadcrumb { color:var(--blue-color-5); font-size:18px; }
            nav.rank-math-breadcrumb a { color:var(--white-color); }
            nav.rank-math-breadcrumb a:hover { color:var(--secondary-color); }

    /*	*** GENERAL > FOOTER ********************************************************************************************************************	*/	
        #footer { background:var(--primary-color); color:#fff; margin-top:200px; padding: 0 20px 20px 20px; position:relative; }
            #footer .site-info { align-items:center; display:flex; flex-direction:column; row-gap:10px; }
                #footer .site-info > * { margin-bottom:10px; }
                #footer .site-info > img { max-width:180px; } 
                #footer .site-info > .footer-contact, #footer .site-info > .footer-copyright { color:rgba(255,255,255,.8); font-size:16px; text-align:center; }
                #footer .xarxes-socials { column-gap:20px; margin:30px 0; }
                #footer .xarxes-socials i { font-size:21px; }
            #footer .footer-links { align-items:center; display:flex; gap:20px; justify-content:center; width:100%; }
            #footer .footer-copy { display:flex; width:100%; }
            #footer a { color:var(--white-color);  }
            #footer a:hover { color:var(--secondary-color); }
    .footer-svgs { height:100px; left:0; overflow:hidden; position:absolute; top:-100px; width:100%; z-index:-1; }
        .footer-svg { left:0; position:absolute; top:0; width:100%; }
        .footer-svg-1 { top:44px; }
        .footer-svg-2 { top:5px; }
        .footer-svg-3 { top:0px; }

    .back-to-top { background-color:var(--primary-color); bottom:20px; border:2px solid var(--white-color); border-radius:4px; color:var(--white-color); display:none; font-size:16px; line-height:1em; padding:10px; position:fixed; right:20px; text-decoration:none; z-index:1000; }
    .back-to-top:hover { border-color:var(--secondary-color); color:var(--secondary-color); }

    /*	*** GENERAL > CONTENT ********************************************************************************************************************	*/	
    .entry-content { margin-top:60px; position:relative; }
    .single-format-standard .entry-content { margin-bottom:60px; }
    .bloc-text-imatge { gap:0; margin:0; }
        .bloc-text-imatge h2 { margin-bottom:50px; }
        .bloc-text-imatge img { box-shadow:0 0 10px rgba(0,0,0,.15); }
        .bloc-text-imatge > div { display:flex; flex-direction:column; }
    .bloc-text-imatge.imatge-esquerra > div:nth-child(2), .bloc-text-imatge.imatge-dreta > div:nth-child(1)  { flex-basis:unset; padding:60px 80px 60px 180px; width:933px; }
    .bloc-text-imatge.imatge-esquerra > div:nth-child(2) { padding:60px 180px 60px 80px; }
    .bloc-text-imatge.imatge-esquerra > div:nth-child(1), .bloc-text-imatge.imatge-dreta > div:nth-child(2)  { flex-basis:unset; width:507px; }

    /*	*** GENERAL > SLIDER ********************************************************************************************************************	*/	
        .slide { left:0; opacity:0; position:absolute; top:0; transition:opacity 1s ease-in-out; width:100%; }
            .slide.active { opacity:1; z-index:2; }
                .slide img { height:auto; width:100%; z-index:1; }

    /* *** PORTADA ******************************************************************************************************************************   */
    .homepage-section { position:relative; }
    .homepage-section:before { background:transparent url('img/isotip-blau-full.png') center center no-repeat; content:''; height:100%; left:0; opacity:0.2; position:absolute; top:0; width:160%; z-index:-2;  }
    
    .section-galeria { align-items:center; display:flex; flex-direction:row; justify-content:center; margin:100px 0; }
        .homepage-galeria { margin-right:-80px; }
        .section-galeria .swiper-container { max-width:100%; width:552px; }

        .homepage-text-destacat { padding-left:150px; } 

    .section-bullets { align-items:center; display:flex; flex-direction:row; justify-content:center; margin:100px 0; }
            .homepage-bullets { display:flex; flex-direction:column; list-style:none; padding:0; row-gap:50px; }
                .homepage-bullets li { align-items:center; column-gap:30px; display:flex; flex-direction:row; }    
                    .homepage-bullets i { align-items:center; color:var(--blue-color-6); display:flex; font-size:60px; justify-content:center; width:60px; } 
                    .homepage-bullets span { color:var(--white-color); font-size:24px; }
            .homepage-bullets-title { align-items:center; color:var(--primary-color); display:flex; font-weight:700; justify-content:center; width:547px; }
                .homepage-bullets-title h2 { font-size:58px; }

    /*	*** DESTACATS / POSTS *******************************************************************************************************************	*/	
        .single.post-template-default .entry-content, 
        .single-tresors .entry-content,
        .single-adquisicions .entry-content,
        .single-recursos .entry-content { 
            column-gap:60px; display:flex; flex-direction:row; 
        }
            .single.post-template-default .entry-content .single-content,
            .single-tresors .entry-content .tresor-content,
            .single-adquisicions .entry-content .adquisicio-content,
            .single-recursos .entry-content .recurs-content { 
                background:var(--blue-color-6); padding:80px 100px 80px 150px; width:75%; 
            } 
            .single.post-template-default .entry-content .single-content:before,
            .single-tresors .entry-content .tresor-content:before,
            .single-adquisicions .entry-content .adquisicio-content:before,
            .single-recursos .entry-content .recurs-content:before  { 
                content:''; height:100%; left:0; position:absolute; top:0; width:300%; z-index:-1; 
            }
            .single.post-template-default .entry-content .single-img,
            .single-tresors .entry-content .tresor-img,
            .single-adquisicions .entry-content .adquisicio-img,
            .single-recursos .entry-content .recurs-img { 
                margin:30px -130px 0 0; position:relative; width:25%; z-index:1; 
            }
            .single-tresors .entry-content .tresor-img,
            .single-adquisicions .entry-content .adquisicio-img,
            .single-recursos .entry-content .recurs-img { 
                width:50%; 
            }
                .single.post-template-default .entry-content .single-img img,
                .single-tresors .entry-content .tresor-img img,
                .single-adquisicions .entry-content .adquisicio-img img,
                .single-recursos .entry-content .recurs-img img { 
                    box-shadow:0 0 10px rgba(0,0,0,.15);  
                }

        .single-post-date { align-items:center; color:#666; display:flex; font-size:16px; gap:10px;   }

    /*	*** TRESORS / ADQUISICIÓ POSTS **********************************************************************************************************	*/	
        .tresor-img, .adquisicio-img, .recurs-img { text-align:center; }
        .tresor-content a, .adquisicio-content a, .recurs-content a { line-height:normal; }

    /*	*** RECURSOS POSTS **********************************************************************************************************************	*/	
        .recursos-files { display:flex; flex-direction:column; gap:10px; list-style-type:none; padding:0; }
            .recursos-files li a { align-items:center; display:flex; gap:10px; justify-content:flex-start; }

    /*	*** ENTRY META / POST TAGS **************************************************************************************************************	*/	
        .entry-meta { border-bottom:1px solid #eee; border-top:1px solid #eee; margin:30px 0; padding:30px 0; }
            .post-tags { align-items:center; display:flex; flex-direction:row; flex-wrap:wrap; gap:10px; }
                .post-tags a { background:var(--primary-color); border-radius:4px; color:#fff; font-size:14px; padding:2px 8px; }
                .post-tags a:hover { background:#000; }


.menu-toggle { display: none; font-size: 24px; cursor: pointer; background: none; border: none; color: white; padding: 10px; }

@media (min-width: 1024px) {
    .logo-mobile { display:none !important; }
    .logo-desktop { display:flex !important; }
    nav#site-navigation { justify-content:space-between; width:100%; }
}

@media (max-width: 1023px) {

    body { font-size:18px; line-height:normal; }
    main { overflow:hidden; }
    h1 { font-size:30px; }
    h2 { font-size:26px; }
    h3 {  font-size:22px;}

    /* Capçalera */
    #header { height:auto; } 
    .menu-overlay { background:rgba(0, 0, 0, 0.5); display:none; height:100%; left:0; position:fixed; top:0; width:100%; z-index:998; }
    .menu-overlay.active { display:block; }
    .logo-mobile { display:flex !important; }
    .logo-desktop { display:none !important; }
    .menu-toggle { display:flex; justify-content:flex-end; width:100%; z-index:999; }
    nav#site-navigation { align-items:flex-end; background:var(--primary-color); flex-direction:column; height:100%; padding-top:45px; position:fixed; right:-100%; top:0; transition:right 0.5s ease; width:270px; z-index:999; }
    nav#site-navigation.active { right:0; }
        .menu-menu-principal-container { height:auto; width:100%; }
            #primary-menu { flex-direction:column; width:100%; }
                #primary-menu li { height:auto; width:100%; }
                    #primary-menu a { padding:10px 20px; width:100%; }
        .social-navigation { border-top:1px solid rgba(255,255,255,.1); margin:10px 0 0 0; padding:10px 0 0 0; width:100%; }
            .xarxes-socials { flex-direction:row; gap:0; padding:10px; width:100%; }
                .xarxes-socials a { flex-direction:row; padding:10px 20px; }
        #primary-menu li { flex-direction:column; }
            #primary-menu ul.sub-menu { background:unset; display:flex; flex-direction:column; padding:0; position:relative; top:unset; }
                #primary-menu ul.sub-menu li a { border:0; font-size:18px; }

    /* Footer */
    .footer-svg-1 { top:50px; }
    .footer-svg-2, .footer-svg-3, .footer-svg-4 { top:30px; }
    #footer .xarxes-socials { gap:0; justify-content:center; margin:0; }
    #footer .site-info > .footer-contact, #footer .site-info > .footer-copyright { line-height:normal; }
    #footer .footer-links { margin-bottom:20px; }
    #footer .footer-copy { display:unset; }

    /* Single, Tresors, Adquisicions */
    .single.post-template-default .entry-content, .single-tresors .entry-content, .single-adquisicions .entry-content, .single-recursos .entry-content { flex-direction:column; }
        .single.post-template-default .entry-content .single-img, .single-tresors .entry-content .tresor-img, .single-adquisicions .entry-content .adquisicio-img, .single-recursos .entry-content .recurs-img { max-width:100%; width:unset; }
        .single.post-template-default .entry-content .single-content, .single-tresors .entry-content .tresor-content, .single-adquisicions .entry-content .adquisicio-content, .single-recursos .entry-content .recurs-content { padding:20px; width:unset; }

    /* Altres */
    .entry-header { min-height:180px; }
    .entry-header.container { padding-left:20px; padding-right:20px; }
    .entry-header h1 { font-size:30px; }
    nav.rank-math-breadcrumb { font-size:14px; line-height:normal; padding-left:20px; padding-right:20px; }
    .entry-content { margin-top:30px; }
    .quadre { padding:40px 20px; }
    .quadre-esquerra:before, .quadre-dreta:after { width:100%; }


}