/* ==UserStyle==
@name           brave Search responsive + customizations
@version        1.0.0
@description    Brave Search website is more suitable for wide screens.
@author         BreatFR (https://breat.fr)
@namespace      https://gitlab.com/breatfr
@homepageURL    https://gitlab.com/breatfr/brave-search
@supportURL     https://discord.gg/Q8KSHzdBxs
@license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
@preprocessor   stylus

@var    text        fontsize    		"Custom font size"      1rem
@var	checkbox	hidefaq				"Hide FAQ"				0
@var	checkbox	hiderelatedqueries	"Hide related queries"	0
@var	checkbox	hidesearchelsewhere	"Hide search elsewhere"	0
@var	checkbox	hidescrollbars		"Hide scrollbars"		1
@var	checkbox	hidevideos			"Hide videos"			0
@var    checkbox    widemode    		"Wide mode"         	1
@downloadURL https://update.greasyfork.org/scripts/558513/brave%20Search%20responsive%20%2B%20customizations.user.css
@updateURL https://update.greasyfork.org/scripts/558513/brave%20Search%20responsive%20%2B%20customizations.meta.css
==/UserStyle== */

/* === Credits ===
Website         https://breat.fr
facebook        https://www.facebook.com/breatfroff
mastodon        https://mastodon.social/@breat_fr
telegram        https://t.me/breatfr
vk              https://vk.com/breatfroff
X (twitter)     https://x.com/breatfroff
=== Credits === */

@-moz-document domain("search.brave.com") {
    :root {
        --fontsize: fontsize;
    }
    
    /* Font size */
    input
    .desktop-default-regular,
    .tab-item span {
        font-size: fontsize !important;
        line-height: 1.5 !important;
    }
    .sitename,
    .heading-serpresult {
        font-size: calc(var(--fontsize) + .1rem) !important;
        line-height: 1.5 !important;
    }
    cite,
    .action-container button,
    .desktop-small-regular {
        font-size: calc(var(--fontsize) - .1rem) !important;
        line-height: 1.5 !important;
    }
    
    .download-cta {
        display: none !important;
    }
	
	if hiderelatedqueries {
		#related-queries {
			display: none;
		}
	}
	
	if hidesearchelsewhere {
		#search-elsewhere {
			display: none;
		}
	}
	
	if hidefaq {
		#faq {
			display: none;
		}
	}
	
	if hidevideos {
		div:has(> .video-cluster-grid) {
			display: none;
		}
	}
    
    if hidescrollbars {
        *,
        :root ::-webkit-scrollbar {
            scrollbar-width: none !important;
            -ms-overflow-style: none !important;
            -moz-overflow-style: none !important;
            -webkit-overflow-style: none !important;
        }
        ::-webkit-scrollbar {
            display: none;
            width: 0;
        }
    }

    if widemode {
		body {
			box-sizing: border-box;
			overflow-x: hidden;
		}
		
        #site-header > div > div:nth-of-type(1) > div,
        #nav-tabs > div > nav,
        #search-page > div:nth-of-type(2),
        #search-page > div:nth-of-type(2) > div,
        #search-page > div:nth-of-type(2) > div > main,
        #search-page > div:nth-of-type(2) > div > main > div:nth-of-type(1) {
            max-width: 100% !important;
            width: 100% !important;
        }
        
        #nav-tabs,
        #search-page > div:nth-of-type(2) {
            padding-left: 0 !important;
			padding-right: 0 !important;
        }
        
        #site-header > div > div:nth-of-type(1) > div {
            padding-right: 52px;
        }
        
        #nav-tabs > div > nav {
            padding-right: 1.2rem;
        }
		
		.infobox-profiles-body {
			gap: 1em !important;
			justify-content: space-evenly;
		}
		.infobox-profiles-body a,
		.infobox-profiles-body a img {
			height: auto !important;
			width: 32px !important;
		}
		
		/* Footer */
		footer > div,
		footer > div > div,
		footer main {
			max-width: 100% !important;
			padding-left: 0 !important;
			padding-right: 0 !important;
			width: 100% !important;
		}
		footer main > div {
			justify-content: space-evenly !important;
		}
    }
}