/* mobile.css — the mobile layer for tbtl.ru
 *
 * Loaded last on every page, no media attribute: all breakpoints live here.
 * Breakpoint 768px. Above it the desktop rendering must stay pixel-identical,
 * so the only rule outside a media query hides the two injected controls.
 *
 * Markup added for this layer (scripts/mobilize.py), 2 elements per page:
 *   <input type="checkbox" id="nav-toggle"> + <label id="nav-toggle-label">
 * placed immediately before <div id="sidemenu"> — the sibling position that
 * makes #nav-toggle:checked ~ #sidemenu work without JavaScript.
 */

/* --- injected burger controls: invisible at every width by default ------ */
#nav-toggle,
#nav-toggle-label { display: none; }


@media (max-width: 768px) {

/* 1. Page shell ---------------------------------------------------------- */
/* No text-size-adjust here on purpose. iOS only auto-inflates text on pages
   whose blocks overflow the viewport; this layout is width=device-width with
   explicit px sizes, so the declaration bought nothing — and Firefox logs a
   dropped declaration for both the standard property (unknown to it) and the
   -webkit- alias (which rejects a percentage). An @supports fence does not
   help: Firefox reports parse errors while reading the sheet, whether or not
   the block applies. */
body { overflow-wrap: break-word; word-wrap: break-word; }
#page {
  width: auto;
  max-width: 100%;
  padding: 0 14px;
  font-size: 17px;
  box-sizing: border-box;
}

/* 13px red/black strip pinned to the 960px page box — decoration only */
#right-line { display: none; }

/* 2. Header -------------------------------------------------------------- */
#header-position { height: auto; }
#header { height: auto; padding-top: 14px; }
#logo { float: none; }
#logo img { width: 100%; max-width: 320px; height: auto; }

/* 415px-wide clock: decoration, no content, no room for it */
#clock { display: none; }

/* 3. Columns: menu above content, both full width ------------------------ */
#columns { margin: 14px 0; }
#sidemenu-position { float: none; width: auto; font-size: 17px; }
#main-position { float: none; width: auto; margin: 0; overflow: visible; }

/* 4. Burger -------------------------------------------------------------- */
/* offscreen rather than display:none, so the checkbox still takes keyboard
   focus and the label's focus ring below can appear */
#nav-toggle {
  display: block;
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}
#nav-toggle-label {
  display: block;
  margin: 0 0 10px;
  padding: 13px 14px;
  border: 2px solid #464b4b;
  background: #fff;
  color: #464b4b;
  font-weight: bold;
  font-size: 17px;
  line-height: 20px;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
#nav-toggle-label::before { content: "\2261\00a0\00a0"; color: #e11e31; }
#nav-toggle:checked ~ #nav-toggle-label::before { content: "\00d7\00a0\00a0"; }
#nav-toggle:focus ~ #nav-toggle-label { outline: 2px solid #e11e31; outline-offset: 2px; }

#sidemenu { display: none; }
#nav-toggle:checked ~ #sidemenu { display: block; }

/* menu rows: full width, 44px tap targets, submenus stay expanded */
.menu-list { width: auto; margin: 0; }
.menu-list a {
  line-height: 22px;
  padding: 12px 14px;
  min-height: 44px;
  box-sizing: border-box;
  border-bottom: 1px solid #d7d7d7;
}
.submenu-list { margin: 0 0 0 14px; }
.submenu-list a { font-weight: normal; font-size: 16px; }

/* 5. Content ------------------------------------------------------------- */
#main img,
.attribute-image img,
.content-view-embed img { max-width: 100%; height: auto; }
#main p { line-height: 1.5; }
#main ul, #main ol { margin-left: 1.3em; }
h1.page-title { font-size: 21px; }

/* content tables scroll inside themselves, never the page */
#main table, table.list {
  display: block;
  width: 100%;
  overflow-x: auto;   /* -webkit-overflow-scrolling omitted: unknown to
                         Firefox, and a no-op on iOS 13+ where momentum
                         scrolling is the default */
}

.line-portfolio .image { width: auto; max-width: 100%; margin-right: 0; }

/* 6. Forms --------------------------------------------------------------- */
.class-feedback-form form { width: auto; }
/* the [class*="span"] selectors match the specificity of input.span12
   (0,1,1) and win by order — a bare `input` selector would lose to it and
   leave a 926px field forcing horizontal scroll */
input, textarea, select, .uneditable-input,
input[class*="span"], textarea[class*="span"], .uneditable-input[class*="span"],
.input-xxlarge, .input-xlarge, .input-large, .input-medium {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;   /* below 16px iOS zooms the page on focus */
}
input[type="checkbox"], input[type="radio"] { width: auto; }
input[type="submit"], button { width: auto; min-height: 44px; padding: 12px 20px; }
.form-horizontal .control-label { float: none; width: auto; text-align: left; }

/* 7. Footer -------------------------------------------------------------- */
#footer { font-size: 15px; line-height: 1.5; padding: 18px 0 28px; }
#footer address { word-break: break-word; }

}


@media (max-width: 400px) {
  #page { padding: 0 10px; }
  #logo img { max-width: 260px; }
  h1.page-title { font-size: 19px; }
}