/*
 * Сибирь Клининг Сервис — static rebuild of the Drupal "bluemasters" front page.
 * Colours and backgrounds follow the original theme.
 */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: #c8dcea url(../img/theme/bg.gif) repeat; }

body {
  font: 12px/1.4 Verdana, Helvetica, sans-serif;
  color: #666;
  min-width: 320px;
}

img { border: 0; max-width: 100%; height: auto; }

a { color: #1b8bb4; text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: Arial, Helvetica, sans-serif; margin: 0 0 10px; }
h3 { font-size: 17px; font-weight: bold; color: #4a546d; }

p { margin: 0 0 10px; }

ul, ol { margin: 15px 0 15px 40px; }

.centered { text-align: center; }

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

/*
 * Page
 */
#page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url(../img/theme/bg.png) repeat-x;
}
#page > #wrapper { flex: 1 0 auto; width: 100%; }

#wrapper { max-width: 950px; margin: 0 auto; padding: 0 20px 20px; }

/*
 * Header
 */
#header { padding: 29px 0 21px; }

.header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.logo { flex: 0 0 auto; margin-top: 10px; outline: none; }
.logo img { width: 300px; display: block; }

.slogan {
  flex: 0 1 590px;
  margin: 10px 0 0;
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  line-height: 30px;
  text-transform: uppercase;
  color: #4a546d;
}

.header-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px 25px;
  margin-top: 10px;
}

.header-contacts { font-size: 0.8em; }
.header-contacts .phone { margin: 0; }
.header-contacts a { color: inherit; }

.header-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.header-actions .btn { min-width: 150px; }

/*
 * Buttons (look of the original dojox.mobile red/blue buttons)
 */
.btn {
  display: inline-block;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid;
  border-radius: 5px;
  font: bold 13px/28px Helvetica, Arial, sans-serif;
  color: #fff;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { filter: brightness(0.85); }
.btn:focus-visible { outline: 2px solid #1b8bb4; outline-offset: 2px; }
.btn[disabled] { opacity: 0.6; cursor: wait; }

.btn-red {
  border-color: #c33;
  background: linear-gradient(#d3656d, #c9404b 50%, #bc1421 50%, #bc1320);
}

.btn-blue {
  border-color: #4a546d;
  background: linear-gradient(#9cacc0, #5e8ae5 25%, #3b71e0 50%, #2260dc 75%, #2362dd);
}

.btn-plain {
  border-color: #b5bcc7;
  background: linear-gradient(#fff, #e8edf3);
  color: #333;
  text-shadow: none;
  font-weight: normal;
}

.btn-wide { min-width: 150px; }

/*
 * Home blocks
 */
#home-blocks-area {
  display: grid;
  grid-template-columns: minmax(0, 590px) 300px;
  justify-content: space-between;
  gap: 20px;
  background: #f5f8ff url(../img/theme/home-block-box-bg.png);
  padding: 20px 20px 0;
}

.block { padding-bottom: 20px; }

.block-title {
  min-height: 46px;
  margin: 0;
  padding: 0 10px 0 20px;
  font-size: 20px;
  line-height: 45px;
  font-weight: bold;
  color: #fff;
  background: #2e3850 url(../img/theme/home-block-header-bg.png) repeat-x top;
}

.block .content {
  background: url(../img/theme/sectionbg.png) repeat;
  padding: 20px;
  overflow: hidden;
  font: 14px/1.4 Arial, Helvetica, sans-serif;
  color: #6a7796;
}

/* Main article */
.article .content { text-align: justify; }
.article .content h3 { text-align: left; }
.article .content h3.centered { text-align: center; margin-top: 13px; }

.hand { float: left; width: 75px; margin-right: 8px; }

.reasons { list-style: none; margin: 15px 0; }
.reasons li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px;
}
.reasons img { flex: 0 0 100px; width: 100px; }
.reasons p { margin: 0; }

.how-we-work { width: 500px; }

/* Sidebar blocks */
.block-phone .block-title,
.block-reviews .block-title {
  font-size: 15px;
  text-align: center;
  padding-left: 45px;
}
.block-phone .block-title,
.block-reviews .block-title {
  background-repeat: no-repeat, repeat-x;
  background-position: 13px 8px, top;
}
.block-phone .block-title { background-image: url(../img/theme/phone-icon.png), url(../img/theme/home-block-header-bg.png); }
.block-reviews .block-title { background-image: url(../img/theme/man-icon.png), url(../img/theme/home-block-header-bg.png); }

.reviews { text-align: center; }
.reviews a { display: block; margin-bottom: 20px; }
.reviews a:last-child { margin-bottom: 0; }
.reviews img {
  display: block;
  width: 275px;
  margin: 0 auto;
  border: 1px solid #4a546d;
}

/*
 * Forms
 */
.lead-form .row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.lead-form label { flex: 0 0 90px; }
.lead-form input[type=text],
.lead-form input[type=tel],
.lead-form input[type=email],
.lead-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #b5bcc7;
  border-radius: 2px;
  background: #fff;
  font: 13px Arial, Helvetica, sans-serif;
  color: #000;
}
.lead-form input:focus,
.lead-form textarea:focus { border-color: #759dc0; outline: none; box-shadow: 0 0 0 2px rgba(117, 157, 192, 0.35); }
.lead-form textarea { resize: vertical; min-height: 90px; margin-bottom: 10px; }

.lead-form .actions { text-align: center; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.req { color: red; font-weight: bold; }

.form-error { color: #bc1320; font-weight: bold; margin: 0; }

/* Honeypot field, hidden from people */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/*
 * Dialogs (look of the original dijit "soria" dialogs)
 */
.dlg {
  margin: auto;
  width: min(330px, calc(100vw - 20px));
  border: 1px solid #759dc0;
  border-radius: 4px;
  background: #fff;
  color: #000;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  font: 13px/1.4 Arial, Helvetica, sans-serif;
}
.dlg-wide { width: min(700px, calc(100vw - 20px)); }
.dlg::backdrop { background: rgba(238, 238, 238, 0.6); }

.dlg-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 6px 12px;
  background: linear-gradient(#f2f7fc, #cde2f6);
  border-bottom: 1px solid #759dc0;
  font-weight: bold;
  color: #000;
}
.dlg-close {
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: #4a546d;
  cursor: pointer;
  padding: 0 4px;
}
.dlg-close:hover { color: #bc1320; }

.dlg-body { padding: 15px; }
.dlg-body > p { text-align: justify; }

/*
 * Footer
 */
#footer-bottom {
  background: #282f44;
  border-top: 1px solid #0f131f;
  padding: 20px 0;
  margin-top: 0;
}

.footer-inside {
  max-width: 950px;
  margin: 0 auto;
  padding: 12px 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px;
  color: #6a7796;
  font: 11px Verdana, Helvetica, sans-serif;
}
.footer-inside a { color: #6a7796; }

.credits { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.credits img { display: block; }
.credits > img { height: 30px; width: auto; }

.footer-contacts { text-align: right; }
.contacts { border-collapse: collapse; margin: 0 0 10px auto; }
.contacts td { padding: 0 0 0 10px; text-align: right; vertical-align: top; }

/*
 * Narrow screens
 */
@media (max-width: 920px) {
  #home-blocks-area { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 0; }
  .home-block-area.last { max-width: 590px; }
}

@media (max-width: 720px) {
  #wrapper { padding: 0 16px 16px; }
  #header { padding: 16px 0; }
  .header-top { flex-direction: column; align-items: center; }
  .logo img { width: 240px; }
  .slogan { flex-basis: auto; font-size: 16px; line-height: 22px; }
  .header-bottom { flex-direction: column; align-items: center; text-align: center; }
  .header-contacts { font-size: 1em; }
  #home-blocks-area { padding: 12px 12px 0; }
  .block .content { padding: 14px; }
  .article .content { text-align: left; }
  .block-title { font-size: 17px; line-height: 1.3; padding-top: 12px; padding-bottom: 12px; }
  .reasons li { gap: 12px; padding: 8px 0; }
  .reasons img { flex-basis: 64px; width: 64px; }
  .footer-inside { flex-direction: column; align-items: center; padding: 0 16px; }
  .footer-contacts { text-align: center; }
  .contacts { margin: 0 auto 10px; }
}

@media (max-width: 400px) {
  .lead-form .row { flex-direction: column; align-items: stretch; gap: 3px; }
  .lead-form label { flex-basis: auto; }
  .header-actions { flex-direction: column; width: 100%; }
}