[id^="p"] {
                scroll-margin-top: 45px; /* Výška fixní hlavičky */
        }

.above {
	background: #444547;
	background: -moz-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444547), color-stop(100%, #2f2f31));
	background: -webkit-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -o-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -ms-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: linear-gradient(to bottom, #444547 0, #2f2f31 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444547', endColorstr='#2f2f31', GradientType=0);
	font-size: 13px;
	border-bottom: 0px solid #3399FF;
	height: 10px;
	display: block;
	-webkit-box-shadow: inset 0px 1px 0 #757575;
	-moz-box-shadow: inset 0px 1px 0 #757575;
	box-shadow: inset 0px 1px 0 #757575;
	margin: auto;
}

.searchback {
/* 	background-color: #005896; */
	padding: 14px;
	-webkit-box-shadow: inset 0px 1px 0 #004474, 0 0 1px #33a0ed;
	-moz-box-shadow: inset 0px 1px 0 #004474, 0 0 1px #33a0ed;
	box-shadow: inset 0px 0px 0 #004474, 0 0px 0#33a0ed;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	text-shadow: 0px 1px 0px #004474;
}

div#content {
	background: #fff;
	padding: 10px 10px;
/*	line-height: 120%; */
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
	-webkit-box-shadow: 0 5px 9px rgba(0,0,0,0.1);
	-moz-box-shadow: 0 5px 9px rgba(0,0,0,0.1);
	box-shadow: 0 5px 9px rgba(0,0,0,0.1);
}

.nav-main {
	background: #444547;
	background: -moz-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444547), color-stop(100%, #2f2f31));
	background: -webkit-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -o-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -ms-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: linear-gradient(to bottom, #444547 0, #2f2f31 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444547', endColorstr='#2f2f31', GradientType=0);
	font-size: 11px;
	border: 1px solid #000;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	padding: 4px 9px 4px 9px;
	margin-top: -37px !important;
	-webkit-box-shadow: inset 0px 1px 0 #757575;
	-moz-box-shadow: inset 0px 1px 0 #757575;
	box-shadow: inset 0px 1px 0 #757575;
                position: sticky;
                top: 0px;
                z-index: 10;

}

@media (max-width: 700px) {
	.nav-main {
		position: sticky;
		top: 0px;
		z-index: 10;
	}
}

ul#nav-breadcrumbs {
	background-color: #f8f8f8;
	padding: 5px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	border: 1px solid #E6E6E6;
	-webkit-box-shadow: inset 0px 1px 0 #FFF;
	-moz-box-shadow: inset 0px 1px 0 #FFF;
	box-shadow: inset 0px 1px 0 #FFF;
	text-shadow: 0px 1px 1px #FFFFFF;
	margin-top: 15px;
}

ul#nav-main li a {
	color: #ccc;
	text-shadow: 0px 1px 1px #000;
}

ul#nav-main li a:hover {
	color: #FFFFFF;
	text-shadow: 0px 1px 1px #000;
}

.stats {
	background: #444547;
	background: -moz-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444547), color-stop(100%, #2f2f31));
	background: -webkit-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -o-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -ms-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: linear-gradient(to bottom, #444547 0, #2f2f31 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444547', endColorstr='#2f2f31', GradientType=0);
	border-top: 1px solid black;
	text-shadow: 0px 1px 0px #000;
	-moz-border-radius: 4px 4px 0 0;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	border-radius: 4px 4px 0 0;
	-webkit-box-shadow: inset 0px 1px 0 #757575;
	-moz-box-shadow: inset 0px 1px 0 #757575;
	box-shadow: inset 0px 1px 0 #757575;
	clear: both;
	font-weight: bold;
	margin-top: 20px;
	padding: 0px 6px 2px 15px;
	margin-bottom: -22px;
	position: relative;
	line-height: 4;
	color: #fff;
	font-size: 1.1em;
}

.stats a {
	color: #fff;
}

.statsblock {
	background-color: #f8f8f8;
	border: 1px solid #ccc;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
	margin-bottom: 4px;
	text-shadow: 0px 1px 0px #FFF;
	height: auto;
}

ul#nav-footer {
	background-color: #f8f8f8;
	padding: 5px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	border: 1px solid #E6E6E6;
	-webkit-box-shadow: inset 0px 1px 0 #FFF;
	-moz-box-shadow: inset 0px 1px 0 #FFF;
	box-shadow: inset 0px 1px 0 #FFF;
	text-shadow: 0px 1px 1px #FFFFFF;
}

button.button.button-search {
	border-color: #C7C3BF;
	background-color: #E9E9E9;
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E9E9E9 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 0%,#E9E9E9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E9E9E9',GradientType=0 );
	box-shadow: 0 0 0 1px #FFFFFF inset;
	-webkit-box-shadow: 0 0 0 1px #FFFFFF inset;
	color: #D31141;
	line-height: 1.5;
}

a.button.button-search-end {
	background-color: #E9E9E9;
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E9E9E9 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 0%,#E9E9E9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E9E9E9',GradientType=0 );
	box-shadow: 0 0 0 1px #FFFFFF inset;
	-webkit-box-shadow: 0 0 0 1px #FFFFFF inset;
	color: #D31141;
	line-height: 1.5;
	border-color: #C7C3BF;
}

.search-box {
	margin-top: 4px;
	margin-left: 5px;
}
.search-results li {
    color: #fff;
}
.search-results li:hover,
.search-results li.active {
	background-color: #eee;
	color: #000;
}

.dropdown-contents-cp {
	background: #ebebeb;
	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
}

.dropdown-contents-cp {
	z-index: 2;
	overflow: hidden;
	overflow-y: auto;
	border: 1px solid #000;
	border-radius: 5px;
	padding: 3px;
	position: relative;
	max-height: 300px;
}

.dropdown-contents-scp {
	z-index: 2;
	overflow: hidden;
	overflow-y: auto;
	border: 1px solid #000;
	border-radius: 5px;
	padding: 3px;
	position: relative;
	max-height: 300px;
	background-color: #ebebeb;
	left: -90px;
}

.cp-pointer.pointer-inner {
	border-color: #ebebeb transparent;
}

.cp-pointer.pointer {
	border-color: #000000 transparent;
}

h4 {
	border-bottom: 1px solid #CCCCCC;
	color: #115098;
	margin-bottom: 3px;
}

h5 {
	margin-bottom: 26px;
	font-size: 1.7em;
	width: 68%;
	line-height: 1.2;
}

a.postbutton {
/*	background: #444547; */
	background: #ECEDEE;
	background: -moz-linear-gradient(top, #ECEDEE 0, #cdcdcd 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ECEDEE), color-stop(100%, #cdcdcd)); 
	background: -webkit-linear-gradient(top, #ECEDEE 0, #cdcdcd 100%); 
	background: -o-linear-gradient(top, #ECEDEE 0, #cdcdcd 100%); 
	background: -ms-linear-gradient(top, #ECEDEE 0, #cdcdcd 100%); 
	background: linear-gradient(to bottom, #ECEDEE 0, #cdcdcd 10%); 
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ECEDEE', endColorstr='#cdcdcd', GradientType=0);
	-webkit-box-shadow: inset 0px 1px 0 #757575;
	-moz-box-shadow: inset 0px 1px 0 #757575;
	box-shadow: inset 0px 1px 0 #757575;
	color: #BC2A4D;
	float: left;
}

a.postbutton {
	display: inline-block;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: bold;
	font-family: "Open Sans", "Droid Sans", Verdana, Arial, Helvetica;
	line-height: 2;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent; 
}

a.postbutton:hover {
	color: #BC2A4D;
}

.postbutton {
    color: #000;
    background-color: #FAFAFA;
    background-image: url("./images/bg_button.gif");
    border: 1px solid #666666;
    padding: 1px;
}

.head {
	background: #444547;
	background: -moz-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444547), color-stop(100%, #2f2f31));
	background: -webkit-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -o-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: -ms-linear-gradient(top, #444547 0, #2f2f31 100%);
	background: linear-gradient(to bottom, #444547 0, #2f2f31 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444547', endColorstr='#2f2f31', GradientType=0);
	border: 1px solid black;
	text-shadow: 0px 1px 0px #000;
	color: #fff !important;
	padding: 8px 6px 7px;
	font-size: 10px;
	-moz-border-radius: 4px 4px 0 0;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	border-radius: 4px 4px 0 0;
	-webkit-box-shadow: inset 0px 1px 0 #757575;
	-moz-box-shadow: inset 0px 1px 0 #757575;
	box-shadow: inset 0px 1px 0 #757575;
	font-weight: bold;
}

.postbuttons {
	border-color: #C7C3BF;
	background-color: #E9E9E9;
 /* Old browsers */ /* FF3.6+ */
	background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E9E9E9 100%);
	background-image: linear-gradient(to bottom, #FFFFFF 0%,#E9E9E9 100%);
 /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#E9E9E9',GradientType=0 );
 /* IE6-9 */
	box-shadow: 0 0 0 1px #FFFFFF inset;
	-webkit-box-shadow: 0 0 0 1px #FFFFFF inset;
	color: #D31141;
}

.panels {
	background-color: #f8f8f8;
	padding: 5px;
	border-radius: 4px;
	border: 1px solid #E6E6E6;
	margin-bottom: 5px;
	margin-top: 10px;
	margin-left: 5px;
}

li.row a {
	color: #444;
}

i.fa.fa-users {
	font-size: 25px;
	padding-right: 5px;
	padding-left: 5px;
	margin-top: 20px;
}

p.whois {
	margin-left: 40px;
	margin-top: -40px;
}

i.fa.fa-birthday-cake {
	font-size: 25px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 10px;
	padding-top: 10px;
}

p.bday {
	margin-left: 40px;
	margin-top: -30px;
}

p.statistics {
	margin-left: 40px;
	margin-top: -30px;
}

i.fa.fa-pie-chart {
	font-size: 25px;
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 10px;
	padding-top: 10px;
}

i.fa.fa-sign-in {
	font-size: 25px;
	padding: 0 8px;
	top: 7px;
	position: relative;
}

@media (max-width: 700px) {
	i.fa.fa-sign-in {
		top: 40px;
	}
}

.backhead {
	background: #0080da;
	background: -moz-linear-gradient(top, #0080da 0, #006db9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0080da), color-stop(100%, #006db9));
	background: -webkit-linear-gradient(top, #0080da 0, #006db9 100%);
	background: -o-linear-gradient(top, #0080da 0, #006db9 100%);
	background: -ms-linear-gradient(top, #0080da 0, #006db9 100%);
	background: linear-gradient(to bottom, #0080da 0, #006db9 100%);
/*  background-image: url(./images/bgx2.webp); */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0080da', endColorstr='#006db9', GradientType=0);
	height: 180px;
	min-height: 64px;
	-moz-box-shadow: inset 0px -1px 0 #33a0ed;
	padding-top: 12px;
}

#page-body {
	float: left;
 	width: 100%; 
	margin-right: -260px;
}

#page-body-main {
        float: left;
        width: 75%;
        margin-right: -260px;
}


.page-body-inner {
	margin-right: 260px;
}

.sidebar {
	float: right;
	width: 250px;
}

#page-footer {
	clear: both;
}

@media (max-width: 1000px) {
	#page-body, .page-body-inner {
		width: auto;
		float: none;
		margin-right: 0;
	}

	.sidebar {
		margin: 0 auto;
		clear: both;
		float: none;
	}
}

@media (min-width:701px) and (max-width: 1024px) {
	
	.row .pagination {
		margin-top: 2px;
	}
}

@media (max-width: 700px) {
	.headerbar {
		border-bottom: none;
		box-shadow: none;
		-webkit-box-shadow: none;
	}
}

@media (max-width: 700px) {
	.forabg, .forumbg, .stats, .statsblock {
		margin: 0 -10px;
	}
}

@media (max-width: 700px) {
	.stats {
		margin: 0px -10px -21px -10px;
	}
}

a.button1, input.button1, input.button3, a.button2, input.button2 {     
    height: 28px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 3px;
    border-color: #AAAAAA !important;
}

textarea.inputbox {
    border-radius: 3px;
}

input {
    height: 22px;
    border-radius: 3px;
}

.inputbox {
    padding-left: 6px;
    padding-right: 6px;
}

a.postbutton {
    font-size: 11px !important;
    border-radius: 3px !important;
    -webkit-box-shadow: initial !important;
    -moz-box-shadow: initial !important;
    box-shadow: initial !important;
    border: solid 1px #AAAAAA !important;
}

.button {
    font-size: 11px;
    border-radius: 3px;
    -webkit-box-shadow: initial;
    -moz-box-shadow: initial;
    box-shadow: initial;
/*    height: 28px; */
} 

.search-box .inputbox {
	height: 28px;
}

.search-box {
    margin-top: 0 !important;
    border-radius: 3px 0px 0px 3px;
}

.button-search-end {
    padding: 0px 5px;
}

.button.dropdown-trigger.dropdown-select {
	height: 22px;
	line-height: 21px;
	border: solid 1px #AAAAAA;
}

.button.button.button-search {
	height: 28px;
	border-radius: 0px;
}

a.button.button-search-end {
    line-height: 27px !important;
    height: 26px;
    border-radius: 0px 3px 3px 0px;
}

a.button.button-search-end2 {
    line-height: 27px !important;
    height: 22px;
    border-radius: 0px 3px 3px 0px;
}


.post-reputation.neutral {
    height: 24px;
    line-height: 21px;
    border: solid 1px #AAAAAA;
}

.post-reputation.positive {
    height: 24px;
    line-height: 21px;
    border: solid 1px #AAAAAA;
}

.post-reputation.negative {
    height: 24px;
    line-height: 21px;
    border: solid 1px #AAAAAA;
}


.button.button-icon-only {
height: 22px !important;
line-height: 22px;
border: solid 1px #AAAAAA;
}

.action-bar .pagination .button {
    height: 22px;
}
/*
li.header dl.row-item dt, li.header dl.row-item dd {
        min-height: 23px;
}
*/

h3.topictitle {
display: inline;
text-transform: none;
border: none;
background: transparent;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}



/* ===== Footer – přístupné tap-targety bez rozházení layoutu ===== */

/* a) Kredit phpBB (phpbb.cz / phpbb.com) – lehce zvětšit cíl */
#page-footer .copyright p.footer-row a[href*="phpbb"] {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
}

/* b) Menu Soukromí | Podmínky – desktop: téměř beze změny */
#page-footer .copyright .footer-row[role="menu"] {
  text-align: center;
  margin: 6px 0;
}
#page-footer .copyright .footer-row[role="menu"] a.footer-link {
  display: inline-block;
  padding: 8px 10px;           /* menší než na mobilu */
  border-radius: 6px;
  text-decoration: none;
}

/* Hover/focus (společné) */
#page-footer .copyright .footer-row[role="menu"] a.footer-link:hover,
#page-footer .copyright p.footer-row a[href*="phpbb"]:hover {
  background: rgba(0,0,0,.05);
}
#page-footer .copyright .footer-row[role="menu"] a.footer-link:focus-visible,
#page-footer .copyright p.footer-row a[href*="phpbb"]:focus-visible {
  outline: 2px solid rgba(0,0,0,.28);
  outline-offset: 2px;
}

/* c) Mobil – větší cíle, zalamování, bez oddělovače „|“ */
@media (max-width: 900px) {
  #page-footer .copyright .footer-row[role="menu"] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
  }
  #page-footer .copyright .footer-row[role="menu"] .footer-sep {
    display: none;             /* schovat „|“ jen na mobilu */
  }
  #page-footer .copyright .footer-row[role="menu"] a.footer-link {
    padding: 14px 16px;        /* větší tap-target */
    margin: 2px 0;
  }

  /* kredit phpBB – lehce větší i na mobilu */
  #page-footer .copyright p.footer-row a[href*="phpbb"] {
    padding: 12px 14px;
  }
}
/* Footer: bigger touch targets on mobile, no layout shifts on desktop */
@media (max-width: 768px){
  .page-footer .copyright .footer-row[role="menu"]{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;              /* rozestupy mezi odkazy */
    flex-wrap: wrap;
    margin-top: 6px;
  }

  .page-footer .copyright .footer-row[role="menu"] .footer-link{
    display: inline-flex;   /* centrování textu v rámci boxu */
    align-items: center;
    justify-content: center;
    min-width: 44px;        /* WCAG doporučení */
    min-height: 44px;       /* WCAG doporučení */
    padding: 6px 12px;      /* příjemná plocha, ale bez nafouknutí řádku */
    border-radius: 6px;
    text-decoration: none;
    line-height: 1.2;
  }

  /* jemný vizuální feedback */
  .page-footer .copyright .footer-row[role="menu"] .footer-link:hover,
  .page-footer .copyright .footer-row[role="menu"] .footer-link:focus-visible{
    outline: 2px solid rgba(0,0,0,.15);
    outline-offset: 2px;
  }
}
@media (max-width: 768px){
  .page-footer .copyright .footer-row[role="menu"] .footer-sep{ display:none; }
}





/* Univerzální placeholder pro top banner */
.ad-slot,
.phpbb-ads-banner,
#phpbb-ads-top,
.adsbygoogle {
  display: block;
  width: 100%;
  min-height: 120px;     /* desktop 728×90 → 120 dává rezervu */
}

/* Mobilní banner – obvykle „fluid“ 320×100/250 */
@media (max-width: 768px) {
  .ad-slot,
  .phpbb-ads-banner,
  #phpbb-ads-top,
  .adsbygoogle {
    min-height: 250px;   /* vyber 100–250 dle formátu; 250 je bezpečné */
  }
}

/* Pokud máš konkrétní box pro reklamu, přidej přesnější selektor */
#banner-top, .ad-top, .phpbb_ad_top {
  min-height: 120px;
}

/* nahraď selektorem tvého slotu (phpBB Ads apod.) */
#banner-top, .phpbb-ads-banner, .adsbygoogle {
  display: block;
  width: 100%;
  min-height: 120px;     /* desktop 728×90 → 120px je bezpečné */
}
@media (max-width: 768px) {
  #banner-top, .phpbb-ads-banner, .adsbygoogle { min-height: 250px; } /* mobilní 320×100/250 */
}
/* nebo přesný poměr: aspect-ratio: 728 / 90; + mobilní 320/100 */


















/* ===== HERO + šířky (sjednoceno) ===== */
:root{
  --page-width: 1200px;          /* jako originál */
  --hero-height-desktop: 180px;  /* výška horní fotky (desktop) */
  --hero-height-mobile: 120px;   /* výška na mobilu (dřív 120–230, sjednoceno) */
  --hero-gap-top: 0px;           /* mezera nad „sklem“ */
  --content-hpad: 10px;          /* padding #content pro přesnou šířku skla */
}

/* Kontejner hlavičky + tvrdý reset starých pozadí/rámečků */
.backhead{
  position: relative;
  height: var(--hero-height-desktop);
  min-height: var(--hero-height-desktop);
  overflow: hidden;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Pozadí s fotkou */
.hero-bg{
  position: absolute; inset: 0;
  z-index: 0; pointer-events: none;
}
.hero-bg img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;      /* lehce výš, víc oblohy */
  filter: blur(2px); opacity: .85;
}
/* jemné přitmavení pro čitelnost titulku */
.hero-bg::after{
  content:""; position:absolute; inset:0;
/*  background: linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.50)); */
  z-index:0;
}

/* Header bar – průhledná, obsah nad „sklem“ */
.backhead .headerbar{
  position: relative;
  background: transparent !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
}
.headerbar .inner{
  position: relative; z-index: 1;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 14px 18px;
}

/* „Sklo“ – šířka = vizuální šířka obsahu (#content má 10+10px) */
.backhead .headerbar::before{
  content:"";
  position:absolute; left:50%; top: var(--hero-gap-top);
  transform: translateX(-50%);
  width: 100%;
  max-width: calc(var(--page-width) + 2 * var(--content-hpad));
  height: calc(100% - var(--hero-gap-top));
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 12px; border: none; outline:none;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  z-index: 0; pointer-events: none;
}

/* Hlavní obsah – šířka jako originál */
.wrap{ max-width: var(--page-width); margin-inline: auto; }

/* ===== Mobil ===== */
@media (max-width: 768px){
  :root{
    --hero-height-mobile: 180px; /* jednotná výška */
    --hero-gap-top: 0px;
  }
  .backhead{
    height: var(--hero-height-mobile) !important;
    min-height: var(--hero-height-mobile) !important;
  }
  .hero-bg img{ object-position: 50% 28%; } /* o chlup výš než desktop */

  /* „Sklo“ přes viewport */
  .backhead .headerbar::before{
    max-width: 100% !important;
    border-radius: 8px !important;
  }

  /* Centrované logo + zviditelněný titulek */
  #site-description{ text-align:center; }
  #site-description .logo{
    display:inline-block; margin: 6px auto 4px;
  }
  #site-description .site-title{
    display:block !important; visibility:visible !important;
    margin: 2px auto 0 !important;
    color:#fff !important; font-weight:700;
    font-size: clamp(18px, 1.4vw, 32px);
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
  }
  #site-description p{ display:none !important; }   /* jako originál */
  .headerbar .inner{ padding: 12px 14px; z-index:2 !important; }
}

/* ===== Tap-targety (PageSpeed) – větší klik plocha bez rozhození layoutu ===== */
/* 1) Klikací plocha loga / odkazu kolem loga */
#site-description a{ display:inline-block; }
#site-description a .logo,
#site-description a .site-title{
  position: relative;
}
#site-description a::before{
  content:""; position:absolute; inset: -6px -8px;   /* zvětší zásah o ~44px min */
}

/* Pagination – stejné rozměry i pro aktivní stránku */
.pagination .button,
.pagination li > a,
.pagination li > span,
.pagination li.active > span,
.pagination .arrow a,
.pagination .arrow span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px !important;   /* PSI ≥ 24px */
  min-height: 30px !important;  /* tvoje výška */
  padding: 0 6px;
  line-height: 1;
  box-sizing: border-box;
  border-radius: 3px;
}

/* běžný stav – bez poskakování při přepnutí na active */
.pagination .button{ border: 1px solid transparent; }

/* aktivní stránka – stejná velikost, jen podbarvení */
.pagination li.active > span{
  background: #E9E9E9 !important;
  color: #000 !important;
  font-weight: 700;
  border: 1px solid #AAAAAA !important;
}

/* hover/focus pro odkazy (neaktivní čísla) */
.pagination a.button:hover,
.pagination a.button:focus{
  background: #F0F0F0;
  border-color: #AAAAAA;
}

/* Mobil – držíme PSI limit i na šipkách */
@media (max-width: 768px){
  .pagination .button,
  .pagination li > a,
  .pagination li > span,
  .pagination li.active > span,
  .pagination .arrow a,
  .pagination .arrow span{
    min-width: 25px !important;
    min-height: 25px !important;
  }
}






/* Pagination – konzistentní barvy textu a podbarvení */
.pagination a.button,
.pagination li > a{
  color: #000 !important;                     /* vždy černý text */
}

/* Hover/focus stejné jako aktivní */
.pagination a.button:hover,
.pagination a.button:focus{
  background: #E9E9E9 !important;
  color: #000 !important;
  border: 1px solid #AAAAAA !important;
  text-decoration: none !important;
}

/* Aktivní stránka */
.pagination li.active > span{
  background: #4692BF !important;
  color: #fff !important;
  font-weight: 700;
  border: 1px solid #AAAAAA !important;
}

/* Šipky (předchozí/další) – stejné chování */
.pagination .arrow a{
  color: #000 !important;
}
.pagination .arrow a:hover,
.pagination .arrow a:focus{
  background: #E9E9E9 !important;
  color: #000 !important;
  border: 1px solid #AAAAAA !important;
}


/* Pagination: viditelná tlačítka s rámečkem */
.pagination a.button,
.pagination li > a,
.pagination li > span{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 24px;               /* stejné hity jako dřív */
  min-height: 30px;
  padding: 0 6px;                /* trochu vodorovného vzduchu */

  border: 1px solid #AAAAAA;     /* RÁMEČEK */
  border-radius: 4px;
  margin: 0 2px;                 /* malý rozestup mezi tlačítky */
  box-sizing: border-box;        /* border nehne rozměry */
  color: #000;                   /* čitelný text */
}

/* Hover/focus – jen ztmavíme rámeček; pozadí nechává tvůj styl */
.pagination a.button:hover,
.pagination a.button:focus{
  border-color: #888 !important;
  text-decoration: none !important;
}

/* Aktivní stránka – zachová barvy, jen posílíme rámeček a text */
.pagination li.active > span{
  border-color: #888 !important;
  font-weight: 700;
  color: #000 !important;
}

/* Přístupnost: klávesový focus prstýnek (neovlivní rozměr) */
.pagination a.button:focus-visible{
  outline: 2px solid #5b9dd9;
  outline-offset: 1px;
}

/* (volitelné) šipky předchozí/další stejné chování */
.pagination .arrow a{
  color: #000 !important;
  border: 1px solid #AAAAAA;
  border-radius: 4px;
}
.pagination .arrow a:hover,
.pagination .arrow a:focus{
  border-color: #888 !important;
}



/* ===== Pagination: velikost, mezery, rámečky, stavy ===== */

/* vytáhneme všechny možné “buttony” ve stránkování */
.pagination,
.row .pagination{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;                     /* rozestupy mezi čísly */
}

/* základ pro odkazy i <span> (aktivní stránka bývá <span>) */
.pagination .button,
.pagination a,
.pagination span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;             /* >= 24px pro PSI, tady trochu víc */
  padding: 0 6px;               /* aby dvouciferná čísla nepůsobila stísněně */
  line-height: 1;               /* netlačit výšku přes line-height */
  border: 1px solid #B8B8B8;    /* rámeček okolo tlačítek */
  border-radius: 4px;
  background: #F5F5F5;
  color: #222;                  /* čitelný text */
  text-decoration: none;
}

/* hover + klávesový focus: světlejší podklad, tmavý text */
.pagination a:hover,
.pagination a:focus-visible{
  background: #E9E9E9;
  color: #111;
  border-color: #8C8C8C;
  outline: 2px solid transparent; /* potlačit default outline, ale ne přístupnost */
}

/* aktivní stránka (většinou <span class="current"> nebo .active > span) */
.pagination span.current,
.pagination .active > span{
  background: #2f2f31;         /* tmavé, ať je jasně odlišené */
  color: #fff;
  border-color: #222;
}

/* malé stránkování v řádcích témat – jistota stejných minimálních rozměrů */
.row .pagination .button,
.row .pagination a,
.row .pagination span{
  min-width: 28px;
  min-height: 28px;
}

/* Mobil – větší tap-targety + trochu větší mezery */
@media (max-width: 768px){
  .pagination,
  .row .pagination{ gap: 6px; }

  .pagination .button,
  .pagination a,
  .pagination span,
  .row .pagination .button,
  .row .pagination a,
  .row .pagination span{
    min-width: 32px;
    min-height: 32px;          /* blíže doporučeným 40–44px, ale držíme se vzhledu */
    padding: 0 8px;
  }
}





















/* pozadí panelů pod celou stránkou */ 
/* kořen nech průhledný */
html { background: transparent !important; }

/* body = vlastní stacking context + žádná barva */
body{
  position: relative;
  isolation: isolate;             /* KLÍČOVÉ – -1 už nepůjde pod <html> */
  background: transparent !important;
  color:#536482;
}

/* fixní pozadí jako vrstva za obsahem */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* 1) horní ztmavení (plynulý přechod) 
     2) tvoje fotka
     3) plná černá jako podklad (spodní „dno“ stránky) */
  background:
    linear-gradient(
      to bottom,
      #000 0,               /* úplně černé u horní hrany */
      rgba(0,0,0,.85) 40%,
      rgba(0,0,0,0) 100%   /* zde už bez ztmavení */
    ),
    url("/styles/mypower-new/theme/images/background.webp"),
    #000;
  background-size: auto, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top, center top, center top;

  transform: translateZ(0);
}

/* volitelné pro mobily */
@media (max-width: 1024px){
  body::before{ display:none; }
  html, body{ background:#000 !important; } 
}