/* =====================================================================
   Responzivni uprava webu brother-sici-stroje.cz
   - nad 980 px zustava puvodni vzhled (main.css)
   - 700-979 px: leve menu + obsah, pravy panel pod obsahem
   - pod 700 px: jeden sloupec, menu se rozbaluje tlacitkem "Menu"
   ===================================================================== */

/* tlacitko menu je viditelne jen na mobilu (vklada js/responsive.js) */
.menu-toggle{
display:none;
}

@media (max-width: 979px) {

html{
-webkit-text-size-adjust:100%;
text-size-adjust:100%;
}

body{
margin:0;
font-size:14px;
line-height:1.45;
}

*, *::before, *::after{
box-sizing:border-box;
}

/* --- kostra --- */
.all{
width:100%;
margin:0;
}

div.hlavicka{
width:100%;
height:59px;
padding:9px 10px 0 0;
background-color:#0b2273;
background-repeat:no-repeat;
background-position:left top;
}

div.horni_menu{
width:100%;
height:auto;
min-height:28px;
padding:5px 10px;
line-height:1.6;
}

div.horni_menu a[style*="float"]{
margin-left:12px;
}

.ohraniceni{
width:100%;
float:none;
display:flex;
flex-wrap:wrap;
border-left:none;
border-right:none;
}

.levy_panel{
width:200px;
flex:0 0 200px;
float:none;
margin-top:10px;
padding:3px 0 20px 3px;
}

a.menu, a.on, a.submenu, a.ons{
display:block;
float:none;
width:auto;
height:auto;
min-height:20px;
padding-top:2px;
padding-bottom:2px;
}

.obsah{
width:auto;
flex:1 1 0;
min-width:0;
float:none;
padding:10px 12px 20px 12px;
overflow-wrap:break-word;
}

.pravy_panel{
width:100%;
flex:0 0 100%;
float:none;
display:flex;
flex-wrap:wrap;
justify-content:center;
border-top:2px dashed #5f73ad;
padding:5px 0 15px 0;
}

a.panel, a.panel_posledni{
width:25%;
height:auto;
float:none;
border:none;
margin-top:15px;
padding:0 5px;
}

/* --- paticka --- */
.paticka{
width:100%;
height:auto;
float:none;
clear:both;
padding:15px 10px;
text-align:center;
color:#fff;
}

.paticka > div[style]{
float:none !important;
}

.motyl{
display:none;
}

.site{
float:none;
margin:0 0 10px 0;
display:flex;
justify-content:center;
}

.site a img{
float:none;
margin:0 8px;
}

.copyright{
width:100%;
height:auto;
padding:10px;
text-align:center;
color:#c9d3f5;
}

/* --- obsah stranek --- */
.obsah img{
max-width:100%;
height:auto;
}

.obsah iframe{
max-width:100%;
}

.obsah iframe[src*="youtube"]{
width:100%;
height:auto;
aspect-ratio:16 / 9;
}

.obsah table{
max-width:100%;
}

.obsah input[type="text"], .obsah input[type="password"], .obsah textarea, .obsah select{
max-width:100%;
}

.obsah h1{
font-size:22px;
line-height:1.25;
}

.kat_texty, strong.produkty, .vyhled, #vysledek_clanek{
width:100%;
}

#vysledek{
width:100%;
}

#map{
width:100%;
height:380px;
}

/* bloky v obsahu s pevnou sirkou z editoru */
.obsah [style*="width:590"], .obsah [style*="width: 590"], .obsah [style*="width:700"], .obsah [style*="width: 700"]{
width:100% !important;
}

/* administrace */
#produkt_seo{
margin-left:0;
}

.novy_obchod{
float:none;
display:inline-block;
margin:10px 0 0 0;
}

}

/* =====================================================================
   mobil
   ===================================================================== */
@media (max-width: 699px) {

span.hlavicka{
display:none;
}

/* vyhledavani v hlavicce */
div.hlavicka form{
display:flex;
justify-content:flex-end;
align-items:center;
margin:0;
}

.search{
width:150px;
height:32px;
margin:0;
padding:4px 36px 4px 10px;
background:#fff;
border-radius:16px;
font-size:16px;
}

.search:focus{
background:#fff;
outline:2px solid #8ea2e8;
}

/* puvodni ikona je bila (pro tmavy podklad) - na bilem poli ji nahradi modra SVG lupa */
.lupa{
position:relative;
margin:0 10px 0 -30px;
width:20px;
height:20px;
object-position:-100px 0;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d2ea0' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}

/* obsah z editoru zarovnany do bloku je na uzkem displeji spatne citelny */
.obsah [style*="justify"], .obsah [align="justify"]{
text-align:left !important;
}

/* tlacitko menu */
.menu-toggle{
display:flex;
align-items:center;
gap:10px;
width:100%;
flex:0 0 100%;
margin:0;
padding:12px 14px;
border:none;
border-bottom:1px solid #c5c8d6;
background:#eef0f6;
color:#0d2ea0;
font:bold 16px Arial,Helvetica,sans-serif;
text-align:left;
cursor:pointer;
}

.menu-toggle-ikona,
.menu-toggle-ikona::before,
.menu-toggle-ikona::after{
display:block;
width:22px;
height:3px;
border-radius:2px;
background:#0d2ea0;
transition:transform .2s;
}

.menu-toggle-ikona{
position:relative;
}

.menu-toggle-ikona::before,
.menu-toggle-ikona::after{
content:"";
position:absolute;
left:0;
}

.menu-toggle-ikona::before{ top:-7px; }
.menu-toggle-ikona::after{ top:7px; }

.menu-otevrene .menu-toggle-ikona{ background:transparent; }
.menu-otevrene .menu-toggle-ikona::before{ transform:translateY(7px) rotate(45deg); }
.menu-otevrene .menu-toggle-ikona::after{ transform:translateY(-7px) rotate(-45deg); }

/* leve menu jako rozbalovaci seznam */
.levy_panel{
display:none;
width:100%;
flex:0 0 100%;
margin:0;
padding:0 0 10px 0;
background:#fafbfd;
border-bottom:2px solid #0d2ea0;
}

.menu-otevrene .levy_panel{
display:block;
}

a.menu, a.on{
display:block;
float:none;
width:auto;
height:auto;
margin:0;
padding:11px 14px;
font-size:15px;
}

a.submenu, a.ons{
display:block;
float:none;
width:auto;
height:auto;
margin:0;
padding:9px 14px 9px 28px;
font-size:14px;
}

.obsah{
flex:0 0 100%;
width:100%;
padding:10px 10px 20px 10px;
}

/* pravy panel - 2 dlazdice na radek */
a.panel, a.panel_posledni{
width:50%;
}

/* paticka */
.paticka{
font-size:13px;
}

/* vypisy produktu a kategorii */
.produkty{
width:50%;
height:auto;
margin:0 0 10px 0;
float:left;
text-align:center;
}

.produkty_vypis{
width:100%;
height:auto;
float:none;
margin:0;
padding:8px 0;
border-bottom:1px dotted #c5c8d6;
}

.produkty_vypis br{
display:none;
}

.foto{
width:50%;
height:auto;
margin:0 0 10px 0;
padding:0 4px;
}

.mapa_odkaz{
width:100%;
}

#map{
height:300px;
}

a.menu_stroj{
display:inline-block;
padding:6px 4px;
}

.datum{
float:none;
display:block;
}

/* obsah z editoru: obrazky obtekane textem pod sebou, sirsi tabulky posuvne */
.obsah img[align], .obsah img[style*="float"]{
float:none !important;
display:block;
margin:8px auto !important;
}

.obsah table{
display:block;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}

.obsah [style*="width:250"], .obsah [style*="width: 250"]{
max-width:100%;
}

}