/*
 * SIDLOPROFIRMY.CZ — temporary mobile accessibility layer v2
 * Loaded after css/codefit.css. Desktop and CMS content remain unchanged.
 */

html { overflow-x: hidden; }
*, *:before, *:after { box-sizing: border-box; }
img, video, iframe, object, embed { max-width: 100%; }
img { height: auto; }

@media (max-width: 993px) {
  html, body { width: 100%; min-width: 0; height: auto; }
  body { overflow-x: hidden; font-size: 16px; line-height: 1.55; }
  #page, #mainContent, .container, .row, [class*="col-md-"] {
    max-width: 100%; min-width: 0;
  }
  .row { margin-left: 0; margin-right: 0; }
  .container { width: 100%; padding-left: 16px; padding-right: 16px; }
  [class*="col-md-"] { float: none; width: 100%; padding-left: 0; padding-right: 0; }

  /* Hide legacy desktop hero/header; use one clean mobile header below it. */
  #headerSlider { display: none !important; }
  .responsive-row { display: none !important; }

  .mobile-site-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 74px;
    padding: 10px 16px;
    background: #2f1a12;
    border: 0;
  }
  .mobile-logo-link { display: block; min-width: 0; }
  .mobile-site-header img {
    display: block;
    width: 190px;
    max-width: 58vw;
    margin: 0;
  }
  .mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 92px;
    min-height: 44px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 5px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }
  .mobile-menu-toggle:focus { outline: 3px solid #f2b70b; outline-offset: 2px; }

  .responsive-menu {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    background: #2f1a12;
    transition: max-height .25s ease;
  }
  .responsive-menu.is-open { max-height: 700px; }
  .responsive-menu .row { margin: 0; }
  .responsive-menu ul.topLista-menu-responsive { margin: 0 !important; padding: 0 !important; }
  .responsive-menu li { display: block; margin: 0; list-style: none; }
  .responsive-menu li a {
    display: block !important;
    min-height: 44px !important;
    padding: 12px 18px !important;
    border-top: 1px solid rgba(255,255,255,.13);
    background: #2f1a12 !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
  }
  .responsive-menu li a:focus,
  .responsive-menu li a:hover { background: #493025 !important; color: #f2b70b !important; }

  /* Undo the legacy rule that makes every text node 20–30px. */
  p, li, a, ol li, ul li, span, td, th, label, input, select, textarea, button {
    font-size: 16px !important;
  }
  h1 { font-size: 30px !important; line-height: 1.2; }
  h2 { font-size: 26px !important; line-height: 1.25; }
  h3 { font-size: 23px !important; line-height: 1.3; }
  h4 { font-size: 20px !important; line-height: 1.35; }
  h5 { font-size: 18px !important; }
  h6 { font-size: 16px !important; }

  /* Full package cards appear once; repeated pictogram strip is unnecessary. */
  .mC-responsive-blocks.headerPackage {
    display: block !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    background: rgba(53,35,26,.98);
  }
  .mC-responsive-blocks.headerPackage:after { content: ""; display: table; clear: both; }
  .mC-responsive-blocks.headerPackage > .col-md-3 {
    display: block;
    margin: 0 0 14px !important;
    padding: 16px !important;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 6px;
    background: rgba(255,255,255,.035);
  }
  .mC-responsive-blocks .nadpis {
    height: auto !important;
    margin: 0 0 10px;
    display: block !important;
    font-size: 20px !important;
    line-height: 1.3;
  }
  .mC-responsive-blocks .nadpis a { color: #fff !important; font-size: inherit !important; }
  .mC-responsive-blocks .text,
  .mC-responsive-blocks .cena {
    display: block !important;
    width: 100% !important;
    float: none !important;
    font-size: 15px !important;
    line-height: 1.55;
  }
  .mC-responsive-blocks .cena { margin-top: 12px; }
  .mC-responsive-blocks .cena a { font-size: 16px !important; }
  .mC-responsive-blocks .objednavka { padding-top: 12px; }
  .mC-responsive-blocks .objednavka a.button {
    float: none !important;
    display: inline-block !important;
    width: auto !important;
    min-height: 44px;
    padding: 11px 15px;
  }
  .mC-services { display: none !important; }

  /* Compact benefits grid. */
  .mC-icons-content {
    display: flex;
    flex-wrap: wrap;
    margin: 18px -6px !important;
  }
  .mC-icons-content:after { display: none; }
  .mC-icons-content .icon-item {
    float: none !important;
    width: 50% !important;
    min-height: 0 !important;
    padding: 10px 6px 14px;
  }
  .mC-icons-content .icon-item .icon-item-img img {
    width: 72px !important;
    max-width: 52%;
    margin: 0 auto;
  }
  .mC-icons-content .icon-item .icon-item-content {
    margin-top: 7px !important;
    padding: 0 4px;
    font-size: 14px !important;
    line-height: 1.35;
  }
  .mC-icons-content .icon-item .icon-item-content span { font-size: 14px !important; }

  /* CMS subpages, cards and media. */
  .main-generated-content, #cenik-content, .content, .news, .sidla-seznam {
    width: 100%; max-width: 100%; overflow-wrap: anywhere;
  }
  .main-generated-content { padding-top: 18px; padding-bottom: 20px; }
  .mC-columns { margin: 18px 0; }
  .mC-columns img, .mC-columns-sidla img { width: 100%; height: auto; }
  .mC-columns [class*="col-md-"], .mC-columns-sidla [class*="col-md-"] { margin-bottom: 20px; }

  table { width: 100% !important; max-width: 100%; border-collapse: collapse; }
  .main-generated-content table, #cenik-content table, .news table, .sidla-seznam table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  th, td { min-width: 110px; padding: 8px !important; vertical-align: top; }

  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="number"], select, textarea {
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 12px;
  }
  textarea { min-height: 120px; }
  input[type="submit"], button, .btn {
    min-height: 44px;
    white-space: normal;
  }
  iframe { width: 100% !important; max-width: 100%; }

  /* Map/contact/footer no fixed heights or widths. */
  #website-map { height: auto !important; min-height: 0 !important; max-height: none !important; }
  #map iframe { height: 300px !important; }
  .website-contact-block {
    position: relative !important;
    width: 100% !important;
    max-width: 100%;
    bottom: auto !important;
  }
  .website-contact-block .block { min-height: 64px; padding: 10px; flex-wrap: wrap; }
  .contact-phone { padding-right: 0; }
  #footer { margin-top: 0 !important; padding: 24px 16px 40px; }
  #footer .footer-links { float: none !important; margin-top: 14px; line-height: 2; }
  #footer .footer-links a { display: inline-block; margin-right: 8px; }

  a, button, input, select, textarea { touch-action: manipulation; }
  a:focus, button:focus, input:focus, select:focus, textarea:focus {
    outline: 3px solid #f2b70b;
    outline-offset: 2px;
  }
}

@media (max-width: 420px) {
  .mobile-site-header img { width: 165px; }
  .mobile-menu-toggle { min-width: 82px; padding-left: 10px; padding-right: 10px; }
  .mC-icons-content .icon-item { width: 50% !important; }
}


/* v2: CMS subpage cleanup based on live mobile screenshots. */
@media (max-width: 993px) {
  /* Package cards belong to the homepage only; index.php now prevents empty
     CMS package placeholders from rendering on price/contact/service pages. */
  body:not(.page-home) .mC-responsive-blocks.headerPackage {
    display: none !important;
  }

  /* Remove accidental empty card shells if a CMS package record is blank. */
  .mC-responsive-blocks.headerPackage > .col-md-3:empty {
    display: none !important;
  }

  /* Contact page was authored as a desktop multi-column table. Stack it
     vertically on mobile without editing CMS-managed wording. */
  body.page-kontakty-sidlo-pro-firmy .main-generated-content table,
  body.page-kontakty-sidlo-pro-firmy .main-generated-content tbody,
  body.page-kontakty-sidlo-pro-firmy .main-generated-content tr,
  body.page-kontakty-sidlo-pro-firmy .main-generated-content td,
  body.page-kontakty-sidlo-pro-firmy .main-generated-content th {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }
  body.page-kontakty-sidlo-pro-firmy .main-generated-content td,
  body.page-kontakty-sidlo-pro-firmy .main-generated-content th {
    padding: 12px 0 !important;
    border: 0 !important;
  }
  body.page-kontakty-sidlo-pro-firmy .main-generated-content table {
    overflow: visible !important;
  }

  /* Avoid large empty brown regions around package lists. */
  .mC-responsive-blocks.headerPackage {
    padding-top: 14px !important;
    padding-bottom: 8px !important;
  }
  .mC-responsive-blocks.headerPackage > .col-md-3:last-child {
    margin-bottom: 0 !important;
  }

  /* Slightly more compact cards while retaining comfortable reading. */
  .mC-responsive-blocks .nadpis {
    font-size: 18px !important;
  }
  .mC-responsive-blocks .text {
    font-size: 15px !important;
  }

  /* Keep CMS headings and lists within the viewport. */
  .main-generated-content h1,
  .main-generated-content h2,
  .main-generated-content h3,
  .main-generated-content h4,
  .main-generated-content p,
  .main-generated-content li,
  .main-generated-content a {
    overflow-wrap: anywhere;
    word-break: normal;
  }
}