/*
Theme Name: Minimal Accessible Theme
Theme URI: https://dostepnosc.amuz.gda.pl
Author: Paweł Szarek 
Author URI: https://babilonmedia.pl
Description: Minimalistyczny, w pełni dostępny szablon WordPressa zgodny z WCAG 2.1 AA.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: minimal-accessible
Tags: accessibility-ready, minimal, clean
*/

/* RESET podstawowy */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

:root {
  --body-bgcolor: white;
  --bottom-spacer: 1.5rem;
  --container-width: 72em;
  --heading-color: inherit;
  --heading-fontfamily: Outfit, sans-serif;
  --heading-lineheight: 1.15em;
  --heading1-fontweight: 400;
  --heading2-fontweight: 400;
  --heading3-fontweight: 400;
  --heading4-6-fontweight: 500;
  --link-color: #002e99;
  --link-hover: #fe2728;
  --list-indent: 2em;
  --logo-maxheight: 4em;
  --logo-maxwidth: 10em;
  --navlink-bgcolor: transparent;
  --navlink-bgcolorhover: var(--link-hover);
  --navlink-color: #e6edff;
  --navlink-colorhover: var(--navmenu-bgcolor);
  --navmenu-bgcolor: #00081a;
  --navmenu-bgsubmenu: #081c4d;
  --section-paddingx: 10vw;
  --section-paddingy: 4em;
  --text-color: #333;
  --text-fontfamily: "Atkinson Hyperlegible", sans-serif;
  --text-lineheight: 1.5em;
  --unit-06: .618em;
  --unit-07: .75em;
  --unit-08: .8em;
  --unit-10: 1em;
  --unit-16: 1.618em;
  --unit-20: 2em;
  --unit-40: 4em;
  --grid-flex-column-gap: 0.5em;
  --wp--style--gallery-gap-default: 1em;
}

body {
  background-color: var(--body-bgcolor);
  font-family: var(--text-fontfamily);
  color: var(--text-color);
  line-height: var(--text-lineheight);
  text-wrap: balance;
  backface-visibility: hidden;
  font-size: clamp(14px, 10px + .333vw + .333vh, 28px);
  margin:0;
}
*{font-size:1em;}
h1 {
  margin-top: 0;
  margin-bottom: 1em;
  font-family: var(--heading-fontfamily);
  color: var(--heading-color);
  font-size: 2.618em;
  line-height: var(--heading-lineheight);
  font-weight: var(--heading1-fontweight);
}

h2 {
  margin-top: 0;
  margin-bottom: var(--bottom-spacer);
  font-family: var(--heading-fontfamily);
  color: var(--heading-color);
  font-size: var(--unit-20);
  line-height: var(--heading-lineheight);
  font-weight: var(--heading2-fontweight);
}

h3 {
  margin-top: 0;
  margin-bottom: var(--bottom-spacer);
  font-family: var(--heading-fontfamily);
  color: var(--heading-color);
  font-size: var(--unit-16);
  line-height: var(--heading-lineheight);
  font-weight: var(--heading3-fontweight);
}

h4 {
  margin-top: 0;
  margin-bottom: var(--bottom-spacer);
  font-family: var(--heading-fontfamily);
  font-size: 1.333em;
  line-height: var(--text-lineheight);
  font-weight: var(--heading4-6-fontweight);
}

h5 {
  margin-top: 0;
  margin-bottom: var(--bottom-spacer);
  font-family: var(--heading-fontfamily);
  font-size: 1.25em;
  line-height: var(--heading-lineheight);
  font-weight: var(--heading4-6-fontweight);
}

h6 {
  margin-top: 0;
  margin-bottom: var(--bottom-spacer);
  font-family: var(--heading-fontfamily);
  font-size: var(--unit-10);
  line-height: var(--heading-lineheight);
  font-weight: var(--heading4-6-fontweight);
}

p {
  margin-bottom: var(--bottom-spacer);
  line-height: var(--text-lineheight);
}

a {
  color: var(--link-color);
  text-decoration: underline;
}

a:focus,
a:hover {
  color: var(--link-hover);
}


#main-content a[target="_blank"]::after {
  content: "\00A0\2197";
}


ul, ol {
  margin-top: 0;
  margin-bottom: var(--bottom-spacer);
  padding-left: var(--list-indent);
}

blockquote {
  margin-bottom: var(--bottom-spacer);
  padding: calc(var(--bottom-spacer) * 2) var(--unit-16) var(--bottom-spacer) var(--list-indent);
  border-left: 2px solid var(--text-color);
  line-height: var(--text-lineheight);
}


a:focus,
button:focus,
input:focus,
textarea:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}
button,
input[type="submit"] {
  cursor: pointer;
}
input,
select,
textarea {
  border-radius: var(--unit-06);
  padding: var(--unit-06) var(--unit-16);
  line-height:1em;
  border: 2px solid;
  border-color: var(--text-color);
}
select{	
  padding: var(--unit-06);
}
input:focus,
input:hover,
select:focus,
select:hover,
textarea:focus,
textarea:hover{
  border-color: var(--link-color);
	
}


fieldset{
  border-radius: var(--unit-10);
  padding: var(--unit-10) var(--unit-16) 0;
	
}
fieldset legend{
	font-weight: bold;
    font-family: var(--heading-fontfamily);
}

hr,
.hr,
.wp-block-separator {
  margin: calc(var(--bottom-spacer) * 2) 0;
  border-top: 1px solid #0000001a;
}

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}

.w100 {
  width: 100%;
}

.color-main {
  color: var(--link-color);
}

.bg-main {
  background-color: var(--link-color);
  color: var(--body-bgcolor);
}

.color-second {
  color: var(--link-hover);
}

.bg-second {
  background-color: var(--link-hover);
  color: var(--body-bgcolor);
}

.color-normal {
  color: var(--text-color);
}

.bg-normal {
  background-color: var(--text-color);
  color: var(--body-bgcolor);
}

.skiplink {
  text-indent: -100000px;
  width: 1px;
  height: 1px;
  display: inline-block;
  position: fixed;
  overflow: hidden;
}

.skiplink:focus {
  z-index: 9999999;
  padding: var(--unit-06) var(--unit-16);
  border-bottom-left-radius: var(--unit-06);
  border-bottom-right-radius: var(--unit-06);
  background-color: var(--link-color);
  color: var(--body-bgcolor);
  text-indent: 0;
  width: auto;
  height: auto;
}

.skiplinks {
  text-align: center;
}

/* Skip link */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 1rem 0;
  clip: auto;
  white-space: normal;
  background: #000;
  color: #fff;
  padding: 1rem;
}

.bradcrumb {
  padding-right: var(--section-paddingx);
  padding-left: var(--section-paddingx);
  font-size: .85em;
}

.breadcrumb a {
  padding: var(--unit-06);
  display: inline-block;
}

.btn{	
  margin: 0 var(--unit-16) var(--bottom-spacer) 0 ;
  padding: var(--unit-06) var(--unit-16);
  border-radius: var(--unit-06);
  border: 2px solid;
  border-color: var(--link-color);
  background-color: var(--link-color);
  color: var(--body-bgcolor);
  text-decoration:none;
}
.btn:focus,
.btn:hover{
  border-color: var(--link-hover);
  background-color: var(--link-hover);
  color: var(--body-bgcolor);
  text-decoration:underline;
}
.inline-spacer{
  margin: 0 var(--unit-16) var(--bottom-spacer) 0 ;
    display: inline-block;
}



/* Layout */
.site-header, .site-footer {
    padding-right: var(--section-paddingx);
    padding-left: var(--section-paddingx);
    background-color: var(--navmenu-bgcolor);
    color: var(--navlink-color);

}
.site-header{	
    height: var(--logo-maxheight);
}
.site-footer {
  padding: 2em var(--section-paddingx) 2em;  
    background-color: var(--text-color);
    color: var(--body-bgcolor);
}


.section {
  padding: var(--section-paddingy) var(--section-paddingx);
  border-bottom: 1px solid #0000001a;
}


/* Navigation */

#site-header{	
    background-color: var(--navmenu-bgcolor);
    color: var(--navlink-color);
    min-height: var(--logo-maxheight);
}

.site-branding{
    vertical-align: middle;   
    height: var(--logo-maxheight);
    line-height: var(--logo-maxheight);
    display: inline-block;
	float: left;
    color: #333;
    text-decoration: none;
    position: relative;
}
.site-branding img{
    height: var(--logo-maxheight);
    width: auto;
}


.main-navigation {
	padding-right: var(--unit-20);
    padding-left: var(--section-paddingx);
    min-height: var(--logo-maxheight);
}
.main-navigation > ul {
list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}
.main-navigation a {
    margin-top: var(--unit-06);
    margin-right: var(--unit-06);
    padding: var(--unit-06) var(--unit-10);
    border-radius: var(--unit-06);
    background-color: var(--navlink-bgcolor);
    color: var(--navlink-color);
    font-size: var(--unit-10);
    line-height: var(--heading-lineheight);
    vertical-align: middle;
    text-decoration: none;
    transition: all .3s ease-in-out;
    display: inline-block;
  position: relative;
}

.main-navigation a:focus,
.main-navigation a:hover{
	background-color: var(--navlink-bgcolorhover);
    color: var(--navlink-colorhover);
    text-decoration: underline;
	}
	
	

/* Sub menu */
	
.sub-menu {
list-style: none;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--navmenu-bgsubmenu); 
  padding: 0 0 var(--unit-06) var(--unit-06);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index:1000;
}

.sub-menu a{
	   color: var(--navlink-color);
}
.sub-menu[hidden] {
  display: none;
}

.menu-item-has-children {
  position: relative;
}

.menu-item-has-children > a::after {
  content: " ▼";
  font-size: var(--unit-06);
}

.menu-item-has-children a[aria-expanded="true"]{  
  background-color: var(--navmenu-bgsubmenu); 
  color: var(--navlink-color);
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

.menu-item-has-children > a[aria-expanded="true"]::after {
  content: " ▲";
  font-size: var(--unit-06);
}

/* Burger */
.burger {
  background-color: var(--navmenu-bgcolor);
  color: var(--navlink-color);
  border: none;
  height: var(--logo-maxheight);
  line-height: var(--logo-maxheight);
  width: var(--logo-maxheight);
  font-size: var(--unit-10);
  font-weight: 400;
  cursor: pointer;
  float:right;
}

.burger:hover{
	background-color: var(--navlink-bgcolorhover);
    color: var(--navlink-colorhover);
  font-weight: 700;
	}

.main-navigation[hidden] {
  display: none !important;
}



/* Domyślnie desktop */
.burger {
  display: none;
}
.main-navigation {
  display: block;
}

/* Mobilka */
body.is-mobile .burger {
  display: block;
}
body.is-mobile .main-navigation {
  display: none;
}

body.is-mobile .main-navigation.active {
  display: block;
}

body.is-mobile .main-navigation.active > ul{
  display: block;
  clear: both;
}
body.is-mobile .main-navigation.active ul li{
  width:100%;
}






/* Loop entries*/
.hentry{
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
	clear:both;
}

.hentry + .hentry {
    border-top: 1px solid #0000001a;
    padding-top: var(--bottom-spacer);
}

.entry-header {
   /* 
    border-bottom: 1px solid #0000001a;
    padding-bottom: var(--bottom-spacer);
    margin-bottom: var(--bottom-spacer);
	*/
}
.entry-content {
}
.entry-footer {
    border-top: 1px solid #0000001a;
    padding-top: var(--bottom-spacer);
    margin-top: var(--bottom-spacer);
	
}

.post-loop article{
    padding-bottom: var(--bottom-spacer);
}

.entry-date {
	font-size:var(--unit-08);
	display:inline-block;
}
.entry-thumbnail{
	display:inline-block;
	border-radius: var(--unit-06);
    margin-bottom: var(--bottom-spacer);
	overflow:hidden;
	float:right;
}

.entry-thumbnail img{	
	display: block;
    max-width: 100%;
    height: auto;
}

.entry-thumbnail .thumb10 img{	
    max-width: 10em;
    height: auto;
}
.entry-thumbnail .thumb15 img{	
    max-width: 15em;
    height: auto;
}
.entry-thumbnail .thumb20 img{	
    max-width: 20em;
    height: auto;
}





/* Paginacja */
.page-numbers{	
  margin-top:var(--unit-06);
  margin-right:var(--unit-06);
  padding: var(--unit-06) var(--unit-10) ;
  border-radius: var(--unit-06);
  border: 2px solid;
  color: var(--link-color);
  background-color: var(--body-bgcolor);
  text-decoration:none;
  font-size: var(--unit-08);
}
.page-numbers.current:focus,
.page-numbers.current:hover,
.page-numbers.current{
  color: var(--body-bgcolor);
  background-color: var(--text-color);
  border-color: var(--text-color);
  text-decoration:none;
	
}
.page-numbers:focus,
.page-numbers:hover{
  border-color: var(--link-color);
  background-color: var(--link-color);
  color: var(--body-bgcolor);
  text-decoration:underline;
}

	 
.page-numbers.next,
.page-numbers.prev{
  padding: var(--unit-06) var(--unit-16) ;
  }


/* TAGI */

.entry-tags{
  margin-top:var(--bottom-spacer);
  font-size: var(--unit-08);
  word-wrap: break-word;
}
.entry-tags a{
  margin-right:var(--unit-06);
  margin-bottom:var(--unit-06);
  padding: var(--unit-06) var(--unit-10) ;
  border-radius: var(--unit-06);
  border: 2px solid;
  color: var(--link-color);
  background-color: var(--body-bgcolor);
  text-decoration:none;
  white-space: nowrap;
  display: inline-block;
  line-height:1.15em;
	
}
.entry-tags a:focus,
.entry-tags a:hover{	
  border-color: var(--link-color);
  background-color: var(--link-color);
  color: var(--body-bgcolor);
  text-decoration:underline;
}


/* Search */
.search-form {
	display: flex;
}
.search-field {
  flex: 1;
  border-radius: var(--unit-06) 0 0 var(--unit-06);
  min-height:3em;
  max-width:20em;
}
.search-submit {
 min-height:3em;
  background-color: var(--navmenu-bgcolor);
  color: var(--navlink-color);
  font-weight:bold;
  border: none;
  border-radius: 0 var(--unit-06) var(--unit-06) 0;
  padding-left: 3em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-size: 1.5em;
  background-repeat:no-repeat;
  background-position: 0.75em 0.6em;
}
.search-submit:hover {
  background-color: var(--navlink-bgcolorhover);
  color: var(--navlink-colorhover);
  text-decoration:underline;
}


.search-form-link{
  color: var(--navlink-color);
    background-color: var(--navmenu-bgcolor);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-size: 2em;
  background-repeat:no-repeat;
  background-position: 50%;
  float:left;
  height: var(--logo-maxheight);
  line-height: var(--logo-maxheight);
  width: var(--logo-maxheight);
  text-decoration:none;
}


.search-form-link:hover{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  text-decoration:none;
  background-color: var(--navlink-bgcolorhover);
}

/* Breadcrumb */

.breadcrumbs{
    list-style: none;
    padding-left: 0;
    margin-bottom: calc((var(--text-lineheight) + var(--unit-06)) * -1);
	padding: 0 var(--section-paddingx);
	}
.breadcrumbs li{
	display:inline-block;
	padding: var(--unit-06) 0 0;
	}
.breadcrumbs li a{
	
}
.breadcrumbs li::after {
  content: "►";  
  padding: 0 var(--unit-06);
  font-size: var(--unit-06);	
}




/* Sitemap */
.sitemap-page ul {
  list-style: none;
  padding: 0;
    margin-bottom: 0;
}
.sitemap-page li {
  margin-bottom: 0.5rem;
}
.sitemap-page ul li ul{
  list-style: disc;
  padding-left: var(--list-indent);

}


/* Gutenberg Blocks Base */
.wp-block,
.wp-block-buttons,
.wp-block-image,
.wp-block-code,
.wp-block-table,
.wp-block-details,
.wp-block-gallery,
.wp-block-file,
.wp-block-media-text,
.wp-block-cover,
.wp-block-video,
.wp-block-pullquote{
  margin-bottom: var(--bottom-spacer);
}

.wp-block-pullquote{
    padding: var(--unit-40) 0;
    text-align: center;
	}


details,
.wp-block-details{
	box-sizing: border-box;
    padding: var(--unit-10) var(--unit-16) 1px;
    display: block;
    border-radius: var(--unit-10);
	}

.wp-block-details summary{
	text-decoration:underline;
    padding-bottom: var(--unit-10);
    margin-left: calc(var(--unit-06) * -1);
	color: var(--link-color);
}
.wp-block-details summary::marker{
    font-size: var(--unit-06);
}

.wp-block-table{}
.wp-block-table table{}
.wp-block-table table thead{border-bottom: 3px solid var(--link-color);}
.wp-block-table table thead{}

.wp-block-table td, 
.wp-block-table th{
	border: 1px solid #0000001a;
    padding: var(--unit-06);
	}


.wp-block-button__link,
.wp-block-file__button {
  background-color: var(--link-color);
  color: var(--body-bgcolor);
  padding: var(--unit-06) var(--unit-16);
  border-radius: var(--unit-06);
  text-decoration: none;
}
.wp-block-button__link:focus,
.wp-block-button__link:hover,
.wp-block-file__button:focus,
.wp-block-file__button:hover {
  background-color: var(--link-hover);
  color: var(--body-bgcolor);
  text-decoration: underline;
}
.wp-block-file:not(.wp-element-button){
	font-size:1em;
}


.wp-block-quote {
  border-left: var(--unit-06) solid var(--link-hover);
  font-family: var(--heading-fontfamily)
}
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* standardowe odstępy w gridzie, flexie i kolumnach*/
.wp-block-columns,
:where(.is-layout-flex),
:where(.is-layout-grid) {
    gap: var(--grid-flex-column-gap;)
}


section.wp-block-group {
    margin: 0 calc(0vw - var(--section-paddingx));
    padding: var(--section-paddingy) var(--section-paddingx);
}
article.wp-block-group {
    padding-bottom: var(--bottom-spacer);
}




/* 

@media screen and (max-width: var(--menu-breakpoint)) {
    .main-navigation {
      display: none;
    }

    .burger {
      display: inline-block;
    }

    .main-navigation.active {
      display: block;
    }
  }

@media screen and (min-width: var(--menu-breakpoint)) {
    .burger {
      display: none;
    }

    .main-navigation {
      display: block !important;
    }
  }RESPONSIVE MENU BREAKPOINT */