/* * * * * * * * * * * * * * * * * * * *
 *
 *   @page		GG Place
 *   @name		custom.css
 *   @author	GG & olo
 *   @created	11.2024 (not sure at all)
 *   @licence	copyright (c) by GG & olo
 *   @version	3.14 - internal codename "c00k!3$"
 *
 */

@font-face { font-family: "sgk100"; src: url("/images/template/custom-fonts/sgk100.ttf"); }
/* @font-face { font-family: "euxoi"; src: url("/images/template/custom-fonts/euxoi.ttf"); } */

:root {
	--header-height: 186px;
	--footer-height: 80px;
	--border-width: 8px;
	--color-main: var(--sppb-gg);
}




/********************************************/
/* GLOBAL RULES */

html { font-size: 16px; }
body { background-image: linear-gradient(to bottom, #0000, #0000), url('/images/template/bg.png'); color: var(--sppb-text); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.article-details .article-header h1,
.article-details .article-header h2,
.article-details .article-header h3,
.article-details .article-header h4
	{ font-family: sgk100; font-size: 2.25rem; color: var(--sppb-headers); line-height: 0.75; margin: 0 0 1rem 0; }

a { color: #fff; border-bottom: 2px dotted currentColor; transition: none; }
a:hover, a:focus, a:active { color: var(--color-main); text-decoration: none; border-bottom-style: solid; }
a:focus-visible { outline: 0; border: 0; background: var(--color-main); color: #fff; position: relative; }
a:focus-visible:after
	{ content: ''; display: block; width: 10px; height: 10px; background: url('/images/template/doggo-01.png'); position: absolute; bottom: -5px; right: -5px; }
a:focus-visible:hover { background: inherit; }

p:last-child, blockquote:last-child { margin: 0; }

/* nadpisania template.css -__- */
.container { padding: 0; }
#sp-header { box-shadow: none; }
#sp-header, #sp-header.header-sticky { animation: none; }
.sp-scroll-up { width: 40px; height: 40px; bottom: 20px; right: 20px; border: 2px solid #fff; border-radius: 0; }

/* header 314 */
#sp-header.gg-header { height: auto; background: transparent; }
#sp-header.gg-header .header-wrapper { background: rgba(0,0,0,0.66); padding: 18px 0 12px 0; }
#sp-header.gg-header .main-bar { display: flex; align-items: center; justify-content: center; gap: 15px; }
#sp-header.gg-header .logo { height: auto; position: relative; top: 13px; }
#sp-header.gg-header .logo a { border: 0; font-family: sgk100; font-size: 64px; }
.sp-megamenu-parent > li > a, .btn, .sppb-btn { font-family: sgk100; color: var(--sppb-headers); }
#offcanvas-toggler {
	width: 38px; height: 30px; position: absolute; top: 44px; right: 0; border: 0; cursor: pointer; image-rendering: pixelated;
	background: url('/images/template/menu-toggle.png'); background-size: 100%;
}
body.offcanvas-active #offcanvas-toggler { background: url('/images/template/menu-toggle-active.png'); background-size: 100%; }
#header-bg {
	width: 100%; height: 64px; z-index: 314; opacity: 0.66;
	background: url('/images/template/menu-bg.png'); background-repeat: repeat-x; background-position: top left;
}

/* #sp-main { padding-top: var(--header-height); } */
#sp-main-body { min-height: calc(100vh - var(--header-height) - var(--footer-height)); padding: 1rem; }

/* footer */
#sp-footer { max-height: var(--footer-height); }




/********************************************/
/* article(s) */

div[itemprop="articleBody"], .article-list .article { padding: var(--border-width); /*padding: calc(1.666 * var(--border-width));*/ border: var(--border-width) solid #fff5; border-radius: 0; backdrop-filter: blur(3.5px); }
.article-header a { border: 0; }
.fields-container { width: fit-content; list-style: none; padding: 0; }
.fields-container .field-entry { background: #fff5; padding: 5px 9px; backdrop-filter: blur(2px); color: #5c5c5c; }
.gg-access-info { display: flex; align-items: flex-end; justify-content: right; gap: 10px; margin: 15px 0 0 0; }
 



/********************************************/
/* [prawie jak] tupperbox! ;ooo */

/* quotes (pojedyncze linie) */
.tupper.tpr-q.tpr-gg,
.tupper.tpr-ar.tpr-gg h1,
.tupper.tpr-ar.tpr-gg h2,
.tupper.tpr-ar.tpr-gg h3,
.tupper.tpr-ar.tpr-gg h4,
.tupper.tpr-ar.tpr-gg h5,
.tupper.tpr-ar.tpr-gg h6
	{ color: var(--sppb-gg); }
.tupper.tpr-q.tpr-olo,
.tupper.tpr-ar.tpr-olo h1,
.tupper.tpr-ar.tpr-olo h2,
.tupper.tpr-ar.tpr-olo h3,
.tupper.tpr-ar.tpr-olo h4,
.tupper.tpr-ar.tpr-olo h5,
.tupper.tpr-ar.tpr-olo h6
	{ color: var(--sppb-olo); }
/* .tupper.tpr-q.tpr-shaper, */
/* .tupper.tpr-ar.tpr-shaper h1, */
/* .tupper.tpr-ar.tpr-shaper h2, */
/* .tupper.tpr-ar.tpr-shaper h3, */
/* .tupper.tpr-ar.tpr-shaper h4, */
/* .tupper.tpr-ar.tpr-shaper h5, */
/* .tupper.tpr-ar.tpr-shaper h6 */
	/* { color: var(--sppb-shaper); } */

/* zakresy! ;ooo */
/* v1 - zwykła, "betonowa", chamska wersja */
/* .tupper.tpr-ar.tpr-gg { background: #6da0f240; padding: var(--border-width) calc((var(--border-width) * 4 + 28px) / 3); } */
/* .tupper.tpr-ar.tpr-olo { background: #f29af53a; padding: var(--border-width) calc((var(--border-width) * 4 + 28px) / 3); } */
/* .tupper.tpr-ar.tpr-shaper { background: #f7cb394a; padding: var(--border-width) calc((var(--border-width) * 4 + 28px) / 3); } */

/* v2 - lżejsza wersja */
.tupper.tpr-ar { padding: var(--border-width); border-style: solid; border-width: calc(var(--border-width) * 1.5); border-left-width: calc(var(--border-width) * 9); }
.tupper.tpr-ar.tpr-gg { border-color: #bd99f150; }
.tupper.tpr-ar.tpr-olo { border-color: #f2ca383c; }
/* .tupper.tpr-ar.tpr-shaper { border-color: #f7cb394a; } */




/********************************************/
/* to powinno być tutaj i DOKŁADNIE w takiej kolejności, bo 1) aktywnie korzystam z kaskadowości CSS i 2) właśnie dlatego chcę mieć to w jednym miejscu, a nie porozbijane po całym pliku */

*::selection { background: var(--color-main); color: #fff; }
/* ...paragrafy "niczyje" to teren neutralny... */
p::selection { background: #fff; color: #888; }
/* ...zakresy pokazują, kto pisze daną część... */
.tupper.tpr-ar.tpr-gg *::selection { background: var(--sppb-gg); color: #fff; }
.tupper.tpr-ar.tpr-olo *::selection { background: var(--sppb-olo); color: #fff; }
/* .tupper.tpr-ar.tpr-shaper *::selection { background: var(--sppb-shaper); color: #fff; } */
/* ...ale cytaty biją wszystko inne na głowę, bez wyjątków */
.tupper.tpr-q.tpr-gg::selection { background: var(--sppb-gg)!important; color: #fff; }
.tupper.tpr-q.tpr-olo::selection { background: var(--sppb-olo)!important; color: #fff; }
/* .tupper.tpr-q.tpr-shaper::selection { background: var(--sppb-shaper)!important; color: #fff; } */




/********************************************/
/* SUPER-HYPER-ULTRA-TOTALLY NEEDED GIZMO WITH MY FACE ABOVE EVERY BUTTON */

/* reset Helix styles */
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li.active > a { color: #fff; }
.sp-megamenu-parent > li:hover > a, .sp-megamenu-parent > li.active:hover > a { color: var(--color-main); }

/* core */
ul.sp-megamenu-parent { list-style: none; padding: 0 0 12px 0; margin: 0; text-align: center; }
ul.sp-megamenu-parent li { position: relative; display: inline-block; margin: 40px 4px 0 4px; padding: 0; }
	ul.sp-megamenu-parent li a, ul.sp-megamenu-parent li:last-child a
		{ height: 40px; display: inline-flex; text-align: center; padding: 3px 20px 6px 20px; font-size: 32px; position: relative; border: 3px #fff solid; line-height: 26px; }
ul.sp-megamenu-parent li a .inner { width: 100%; height: 100%; display: inline-block; position: absolute; top: 0; left: 0; z-index: 20; }
ul.sp-megamenu-parent li a:hover { border-color: var(--color-main); }

/* visible *wow* content */
ul.sp-megamenu-parent li .gg { width: 100%; position: absolute; z-index: 12; }
/* ****** GG FACE ***************** */
ul.sp-megamenu-parent li .gg.face.gg-1 { height: 57px; top: -48px;
	background: url('/images/template/menu-gg/face-1.png'); background-repeat: no-repeat; background-position: center; }
ul.sp-megamenu-parent li .gg.face.gg-2 { height: 57px; top: -48px;
	background: url('/images/template/menu-gg/face-2.png'); background-repeat: no-repeat; background-position: center; }
ul.sp-megamenu-parent li .gg.face.gg-3 { height: 57px; top: -48px;
	background: url('/images/template/menu-gg/face-3.png'); background-repeat: no-repeat; background-position: center; }
ul.sp-megamenu-parent li .gg.face.gg-4 { height: 57px; top: -48px;
	background: url('/images/template/menu-gg/face-4.png'); background-repeat: no-repeat; background-position: center; }
/* ****** GG LEFT HAND ************ */
ul.sp-megamenu-parent li .gg.left-hand.gg-1 { height: 10px; top: -6px;
	background: url('/images/template/menu-gg/left-hand-1.png'); background-repeat: no-repeat; background-position: calc(50% - 36px); }
ul.sp-megamenu-parent li .gg.left-hand.gg-2 { height: 20px; top: -4px;
	background: url('/images/template/menu-gg/left-hand-2.png'); background-repeat: no-repeat; background-position: calc(50% - 16px); }
ul.sp-megamenu-parent li .gg.left-hand.gg-3 { height: 29px; top: 4px;
	background: url('/images/template/menu-gg/left-hand-3.png'); background-repeat: no-repeat; background-position: calc(50% - 24px); transform: rotate(48deg); }
ul.sp-megamenu-parent li .gg.left-hand.gg-4 { height: 38px; top: -23px;
	background: url('/images/template/menu-gg/left-hand-4.png'); background-repeat: no-repeat; background-position: calc(50% - 24px); }
ul.sp-megamenu-parent li .gg.left-hand.gg-5 { height: 38px; top: -18px;
	background: url('/images/template/menu-gg/left-hand-5.png'); background-repeat: no-repeat; background-position: calc(50% - 20px); }
/* ****** GG RIGHT HAND *********** */
ul.sp-megamenu-parent li .gg.right-hand.gg-1 { height: 10px; top: -6px;
	background: url('/images/template/menu-gg/right-hand-1.png'); background-repeat: no-repeat; background-position: calc(50% + 36px); }
ul.sp-megamenu-parent li .gg.right-hand.gg-2 { height: 16px; top: -9px; transform: rotate(-26deg);
	background: url('/images/template/menu-gg/right-hand-2.png'); background-repeat: no-repeat; background-position: calc(50% + 21px); }
ul.sp-megamenu-parent li .gg.right-hand.gg-3 { height: 29px; top: -25px;
	background: url('/images/template/menu-gg/right-hand-3.png'); background-repeat: no-repeat; background-position: calc(50% + 37px); }
ul.sp-megamenu-parent li .gg.right-hand.gg-4 { height: 38px; top: -30px;
	background: url('/images/template/menu-gg/right-hand-4.png'); background-repeat: no-repeat; background-position: calc(50% + 36px);	 }