/*
Theme Name: Sobs26
Requires at least: WordPress 7.0+
Version: 1.0
Last Update: 2025-1210 0000p
Author: PaulGagu
Text Domain: sobs26
*/


:root{ 
	
--white  :  #FFFFFF;   
--light  :  #EDEDED;   
--yellow :  #EEFC55;   
--pesto  :  #767C2B;   
--black  :  #000000;   
	
--site-width : 1920px;
--site-padx  : 4% ;
--mobi-padx  : 8% ;

}


html { margin: 0; padding: 0; position: relative; scroll-behavior: smooth; scroll-padding-top: 120px;  }

body{  margin: 0 auto !important; padding: 0;  max-width: var(--site-width); position: relative; }

main  { min-height: 80vh; position: relative; }


.content    { width:100%; margin:0 auto; padding:0 var(--site-padx); position:relative;  }
.full-site  { width:100%; margin:0 auto; padding:0; position:relative; }



@media ( max-width: 600px ){
	
	.content  { padding:0 var(--mobi-padx); }
	
}	

.skip-link { background: black; color:white; height: 30px; left: 50%; padding: 8px;  position: absolute;  
	         transform: translateY(-120px); transition: transform 0.3s; z-index: 9999; }
.skip-link:focus { transform: translateY(0px); }

.roboto        { font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-variation-settings: "wdth" 100; }
.archivo-black { font-family: "Archivo Black", sans-serif; font-style: normal; }
.fragment-mono { font-family: "Fragment Mono", monospace; }


/*    - - typography - -    */

* { margin-block:0; }

html{ font-size: 10px; }
body{ font-family: "Roboto", sans-serif; font-size:16px; font-weight:500;  line-height: 24px;  }

h1, .font-h1,
h2, .font-h2,
h3, .font-h3,
h4, .font-h4,
h5, .font-h5,
h6, .font-h6 { font-family: "Archivo Black", sans-serif; font-weight: 400;   }

h1, .font-h1 { font-size: 52px; line-height: 56px;  }
h2, .font-h2 { font-size: 40px; line-height: 48px;  }
h3, .font-h3 { font-size: 32px; line-height: 40px;  }
h4, .font-h4 { font-size: 24px; line-height: 32px;  }
h5, .font-h5 { font-size: 20px; line-height: 28px;  }
h6, .font-h6 { font-size: 16px; line-height: 24px;  }


p{ margin-bottom:12px; }
p:last-child { margin-bottom: 0; }

ol, ul { padding-left: 20px; font-family: "Roboto", sans-serif; font-size:16px; line-height: 24px; margin-bottom: 12px; }
li{ margin-bottom:12px; }
li:last-child { margin-bottom: 0; }

small, .small { font-size:12px; line-height: 16px; }


@media all and ( max-width: 600px ) {
	
	body{ font-size: 16px; line-height: 24px; }
	h1, .font-h1 { font-size: 40px; line-height: 48px;  }
	h2, .font-h2 { font-size: 32px; line-height: 40px;  }
	h3, .font-h3 { font-size: 24px; line-height: 32px;  }
	h4, .font-h4 { font-size: 20px; line-height: 28px;  }
	h5, .font-h5 { font-size: 16px; line-height: 24px;  }
	h6, .font-h6 { font-size: 16px; line-height: 24px;  }

}



/*    - - color & backgrounds - -    */

a{ color:var(--yellow); }
a:hover{ color:var(--pesto); }

a.clean-link,
.clean-link { text-decoration: none; }

.has-clean-links a{ text-decoration: none; }


/* _______________________________ BUILD ____________________________________ */


/* - - - -  has-links - - - - */

.has-links-pesto  a  { color:var(--pesto);   } 
.has-links-yellow a  { color:var(--yellow); } 
.has-links-light  a  { color:var(--light);  } 
.has-links-black  a  { color:var(--black);  } 
.has-links-white  a  { color:var(--white);  } 

.has-links-hover-pesto  a:hover  { color:var(--pesto);    } 
.has-links-hover-yellow a:hover  { color:var(--yellow);  } 
.has-links-hover-light  a:hover  { color:var(--light);   } 
.has-links-hover-black  a:hover  { color:var(--black);   } 
.has-links-hover-white  a:hover  { color:var(--white);   } 



/* ----- button colors ------  */

.gb-button{ cursor: pointer !important; }

.gb-button-pesto, 
.gb-button-yellow, 
.gb-button-light, 
	
.btn,
.btn-small,
.btn-menu   { display:inline-block !important;  border:0; border-radius:12px; font-family: 'Fragment Mono', monospace; font-weight:400; 
			  cursor: pointer; transition: .2s background-color ease-in-out; text-decoration: none; }
			 
.btn        { line-height: 24px; font-size:18px; padding: 8px 24px; }			 
.btn-small  { line-height: 24px; font-size:16px; padding:  6px 16px; }			 
.btn-menu   { line-height: 24px; font-size:18px; padding:  8px 16px; }			 

.gb-button-pesto:hover, 
.gb-button-yellow:hover, 
.gb-button-light:hover, 
		
.btn:hover,
.btn-small:hover, 
.btn-menu:hover   { transition: .2s background-color ease-in-out ; }  

.btn, 
.gb-button-yellow, .btn-yellow, a.btn-yellow    { color:var(--pesto);   background-color:var(--yellow);  } 
.gb-button-pesto,   .btn-pesto,   a.btn-pesto  	{ color:var(--light);  background-color:var(--pesto);    } 
.gb-button-light,  .btn-light,  a.btn-light 	{ color:var(--pesto);   background-color:var(--light);   } 

.btn:hover,
.gb-button-yellow:hover, .btn-yellow:hover, a.btn-yellow:hover  { color:var(--white); background-color:var(--pesto); } 
.gb-button-pesto:hover,  .btn-pesto:hover,  a.btn-pesto:hover 	{ color:var(--black); background-color:var(--yellow);   } 
.gb-button-light:hover,  .btn-light:hover,  a.btn-light:hover 	{ color:var(--white); background-color:var(--pesto);  } 
		
@media all and ( max-width: 600px ) {

}


/* ----- color & backgrounds -----  */

.has-pesto-color,     .color-pesto,     .pesto     { color:var(--pesto);  } 
.has-yellow-color,    .color-yellow,    .yellow    { color:var(--yellow); } 
.has-light-color,     .color-light,     .light     { color:var(--light);  } 
.has-black-color,     .color-black,     .black     { color:var(--black);  } 
.has-white-color,     .color-white,     .white     { color:var(--white);  } 
		
.has-pesto-background-color,     .bg-pesto     { background-color:var(--pesto);   } 
.has-yellow-background-color,    .bg-yellow    { background-color:var(--yellow); } 
.has-light-background-color,     .bg-light     { background-color:var(--light);  } 
.has-black-background-color,     .bg-black     { background-color:var(--black);  } 
.has-white-background-color,     .bg-white     { background-color:var(--white);  } 
		
.hover-pesto:hover     { color:var(--pesto);  } 
.hover-yellow:hover    { color:var(--yellow); } 
.hover-light:hover     { color:var(--light);  } 
.hover-black:hover     { color:var(--black);  } 
.hover-white:hover     { color:var(--white);  } 

.hover-bg-pesto:hover     { background-color:var(--pesto);  } 
.hover-bg-yellow:hover    { background-color:var(--yellow); } 
.hover-bg-light:hover     { background-color:var(--light);  } 
.hover-bg-black:hover     { background-color:var(--black);  } 
.hover-bg-white:hover     { background-color:var(--white);  } 
	



/* - - - -  border-colors - - - - */

.border-pesto  { border-color:var(--pesto);  border-style:solid; } 
.border-yellow { border-color:var(--yellow); border-style:solid; } 
.border-light  { border-color:var(--light);  border-style:solid; } 
.border-black  { border-color:var(--black);  border-style:solid; } 
.border-white  { border-color:var(--white);  border-style:solid; } 
	



/* _______________________________ eof:BUILD ____________________________________ */


/* - - - -  is-style classes for gutenberg blocks - - - - */

/* core/paragraph */

.is-style-margin-0 { margin:0; }



/* - - - -  special theme classes - - - - */


figure{ margin:0 !important;}

@media all and ( max-width: 600px ) {

}

.video-play{ position: relative; display:inline-block;  }
.video-play:after{ content:'';  position:absolute; top:calc(50% - 20px); left:calc(50% - 20px);  width:40px; height:40px; display:inline-block;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M3 22v-20l18 10-18 10z' fill='%23FFFFFFAA' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: cover;
}
.video-play:hover:after{  opacity: 0.9; }

.iframe-box,
.video-box,
[data-iframe],
[data-video] { cursor: pointer; }

.data-bgvideo { position:absolute; width:100%; height: 100%; top:0; left:0; z-index:0; }
.data-bgvideo video { position:absolute;  top:0; left:0; width:100%; height: 100%; max-width:none; pointer-events: none; -o-object-fit:cover;  object-fit:cover; }
.data-bgvideo video::-webkit-media-controls {  display: none; } 
.data-bgvideo video::-webkit-media-controls-panel { display: none !important; opacity: 1 !important; }
.data-bgvideo video::-webkit-media-controls-start-playback-button { display: none; }

.data-bgvimeo { position:absolute; width:100%; padding-top:56.5%; top:50%; left:50%; transform:translate(-50%,-50%); z-index:0; }
.data-bgvimeo iframe{ position:absolute; top:0; left:0; width:100%; height: 100%; max-width: none; }

[data-link],
[data-link-tab],
[data-popup]  { cursor: pointer; }

[data-bgvideo],
[data-bgvimeo]  { overflow: hidden; }

@media all and ( max-width: 600px ) {

	[data-bgvideo],
	[data-bgvimeo]  { overflow: auto; }

}




/*--------------------------------------------------------------
#  lity lightbox 
--------------------------------------------------------------*/
	
.lity-close, .lity-close:active, .lity-close:focus, .lity-close:hover, .lity-close:visited { background: var(--red); }



/*--------------------------------------------------------------
# generate blocks styles
--------------------------------------------------------------*/


.gb-container { position: relative; }