/* miczynski.pl – statyczne odwzorowanie motywu Drupala „responsive_blog” */

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

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

body {
  margin: 0;
  padding: 2em 0 0;
  background: #ccc;
  color: #373737;
  font: 300 15px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a { color: #1982d1; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
img { max-width: 100%; height: auto; border: 0; }
strong { font-weight: bold; }
hr { background: #ccc; border: 0; height: 1px; margin: 0 0 2em; }
mark { background: #ff0; color: inherit; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: #fff; padding: .5em 1em; z-index: 200;
}
.skip:focus { left: 1em; }

/* --- układ --------------------------------------------------------------- */

#wrapper {
  max-width: 1000px;
  margin: 0 auto 2em;
  background: #eee;
  border-radius: 5px;
}

#header { background: #fff; border-radius: 5px; }

#site-logo { margin: 0 3%; padding: 2.5em 0; }
#site-logo img { display: block; width: 300px; }

#main { display: flex; align-items: flex-start; gap: 3%; padding: 2em 3% 0; }
#content { flex: 0 1 67%; min-width: 0; }
#sidebar { flex: 0 1 30%; min-width: 0; }

/* --- menu górne ------------------------------------------------------------ */

#navigation {
  background: #222 linear-gradient(#585858, #3d3d3d);
  margin: 0 0 2px;
}
#navigation > ul {
  display: flex; flex-wrap: wrap;
  list-style: none; margin: 0 3%; padding: 0;
  font-size: 14px;
}
#navigation li { position: relative; list-style: none; margin: 0; padding: 0; }
#navigation > ul > li { border-right: 1px solid #444; }
#navigation > ul > li:last-child { border-right: 0; }
#navigation a, #navigation .nolink {
  display: block; color: #eee; line-height: 3em; padding: 0 1.2125em;
  text-decoration: none; cursor: pointer;
}
#navigation .nolink { cursor: default; }
#navigation [aria-current="page"] { font-weight: bold; }
#navigation li:hover > a, #navigation li:hover > .nolink,
#navigation a:focus, #navigation .nolink:focus {
  background: linear-gradient(#f9f9f9, #e5e5e5); color: #373737; outline: 0;
}

#navigation ul ul {
  display: none;
  position: absolute; top: 3em; left: 0; z-index: 99;
  width: 188px; margin: 0; padding: 0; list-style: none;
  box-shadow: 0 3px 3px rgba(0, 0, 0, .2);
}
#navigation ul ul ul { top: 0; left: 100%; }
#navigation li:hover > ul, #navigation li:focus-within > ul { display: block; }
#navigation ul ul a, #navigation ul ul .nolink {
  background: #f9f9f9; border-bottom: 1px dotted #ccc; color: #444;
  font-size: 13px; font-weight: normal; line-height: 1.4em; padding: 10px;
}
#navigation ul ul li:hover > a, #navigation ul ul li:hover > .nolink { background: #efefef; }
#navigation ul ul .nolink::after { content: " ›"; float: right; }

/* menu na telefonie (bez JavaScriptu – element <details>) */
#mobile-menu { display: none; }

/* --- treść ----------------------------------------------------------------- */

.breadcrumb { font-size: 11px; margin: 0 0 1em; }

#content-wrap {
  background: #fff;
  border-bottom: 2px solid #ccc;
  border-radius: 5px;
  margin: 0 0 2em;
  padding: .5em 5% 2em;
  overflow-wrap: break-word;
}
#content-wrap::after { content: ""; display: table; clear: both; }

h1.page-title {
  color: #222; font-size: 26px; font-weight: bold; line-height: 1.5em;
  margin: 0 0 .5em; padding: 15px 0 .3em;
}

.body p { margin: 0 0 2em; }
.body ul, .body ol { margin: 0 0 1em 1.5em; padding: 0; }
.body ul ul { margin-bottom: 0; }
.body .center { text-align: center; }
.body .right { text-align: right; }
.body .indent1 { margin-left: 40px; }
.body .indent2 { margin-left: 80px; }
.body .indent3 { margin-left: 120px; }
.body ul.indent1 { margin-left: calc(40px + 1.5em); }

.body figure { margin: 0 0 2em; text-align: center; }
/* ramka zdjęć jak w starym motywie (.page-node #content-wrap img) */
.body figure img {
  box-sizing: content-box; display: block; margin: .5em auto 1.5em;
  max-width: calc(100% - 14px); border: 1px solid #ccc; padding: 6px;
}
.body figure img:last-of-type { margin-bottom: .5em; }
.body figcaption { font-size: 10px; line-height: 1.5; }
.body figure.portrait { float: right; width: 314px; max-width: 50%; margin: 0 0 1em 1.5em; }
.body figure.portrait img { margin: .5em 0; }

/* --- pasek boczny -------------------------------------------------------- */

#sidebar .block {
  background: #fff; border-bottom: 2px solid #ccc; border-radius: 5px;
  margin: 0 0 2em; padding: .5em 1em 1em; font-size: 12px;
}
#sidebar .block > h2 {
  border-bottom: 2px solid #ccc; color: #222; font-size: 16px; font-weight: bold;
  letter-spacing: .1em; line-height: 1.625; margin: 0 -1em 1em; padding: 0 1em .5em;
}

ul.tree { list-style: none; margin: 0; padding: 0; }
ul.tree ul { margin: 0 0 0 1.5em; padding: 0; }
ul.tree li { margin: 0; padding: .2em .5em 0 0; list-style-image: url(/img/menu-leaf.png); list-style-type: square; }
ul.tree li.expanded { list-style-image: url(/img/menu-expanded.png); list-style-type: circle; }
ul.tree > li { margin-left: 1.25em; }
ul.tree [aria-current="page"] { color: #000; font-weight: bold; }

/* --- stopka ------------------------------------------------------------------ */

#footer {
  background: #fff; border-top: 1px solid #ccc; border-bottom: 2px solid #aaa;
  border-radius: 0 0 5px 5px; color: #666; font-size: 12px; line-height: 2.2em;
  padding: 2.2em 3%;
}
#footer a { color: #555; font-weight: bold; }

/* --- responsywność ------------------------------------------------------- */

@media (max-width: 1060px) {
  #wrapper { max-width: 900px; }
}

@media (max-width: 960px) {
  #wrapper { max-width: 708px; }
  #main { display: block; }
  #navigation > ul { font-size: 13px; }
  #navigation a, #navigation .nolink { padding: 0 .83em; }
}

@media (max-width: 767px) {
  body { padding-top: 0; font-size: 14px; }
  #wrapper { max-width: none; margin: 0; border-radius: 0; }
  #header { border-radius: 0; }
  #site-logo { padding: 1.5em 0; text-align: center; }
  #site-logo img { display: inline-block; width: 240px; }
  #navigation { display: none; }
  #main { padding: 1em 16px 0; }
  #sidebar { display: none; } /* to samo menu jest w #mobile-menu */
  #content-wrap { padding: .5em 16px 1.5em; }
  h1.page-title { font-size: 22px; }

  #mobile-menu {
    display: block;
    background: #222 linear-gradient(#585858, #3d3d3d);
    color: #eee; font-size: 15px;
  }
  #mobile-menu summary {
    padding: .8em 16px; cursor: pointer; font-weight: bold; list-style: none;
  }
  #mobile-menu summary::-webkit-details-marker { display: none; }
  #mobile-menu summary::before { content: "☰  "; }
  #mobile-menu[open] summary::before { content: "✕  "; }
  #mobile-menu ul.tree { background: #f9f9f9; padding: .5em 16px 1em 16px; font-size: 15px; }
  #mobile-menu ul.tree li { padding: .35em 0 .35em; }
  #mobile-menu ul.tree a { color: #1982d1; }
  #mobile-menu ul.tree .nolink { color: #444; font-weight: bold; }

  .body .indent1 { margin-left: 1em; }
  .body .indent2 { margin-left: 2em; }
  .body .indent3 { margin-left: 3em; }
  .body ul.indent1 { margin-left: 2.5em; }
  .body figure.portrait { float: none; width: auto; max-width: 300px; margin: 0 auto 1.5em; }
  #footer { border-radius: 0; text-align: center; font-size: 11px; }
}

@media print {
  body { background: none; padding: 0; font-size: 10pt; }
  #wrapper, #content-wrap { background: none; border: 0; }
  #navigation, #mobile-menu, #sidebar, .breadcrumb, .skip { display: none; }
  #main { display: block; padding: 0; }
  a { color: inherit; }
}