/*!
 * melk-responsive.css: responsive and RTL overrides for www.melk.ca
 * Pack: melkca-responsive 2026-10-01. Load LAST, after bootstrap-rtl.min.css.
 * Overrides only. It does not change markup or touch other CSS files.
 * Rollback: upload an empty copy of this file, or delete the one <link> line in header.php.
 * Section numbers (R1..R14) match AUDIT.md.
 */

/* R1. Ad detail page below 992px: show the photos first, then title, price,
       contact and key facts, then the description, then the long spec table.
       Before this, the photos started about 1,600px down the page on a 360px phone. */
@media (max-width: 991px) {
  .box_single_ads > .row { display: flex; flex-direction: column; }
  .box_single_ads > .row:before,
  .box_single_ads > .row:after { display: none; }
  .box_single_ads > .row > .col-md-9,
  .box_single_ads > .row > .filearea { display: contents; }
  .box_single_ads > .row > .col-md-9 > *,
  .box_single_ads > .row > .filearea > * { margin-left: 15px; margin-right: 15px; order: 5; }
  .box_single_ads > .row > .col-md-9 > .box_images_ads { order: 1; margin-bottom: 10px; }
  .box_single_ads > .row > .filearea > * { order: 2; }
  .box_single_ads > .row > .col-md-9 > .box_images_ads + .description_ads_single { order: 3; }
  .box_single_ads > .row > .filearea > .info_box_ads { order: 4; }
  .box_single_ads > .row > .filearea > .ads_company { order: 6; }
  .box_single_ads > .row > .filearea > .fileiconarea { display: flow-root; padding-bottom: 5px; margin-bottom: 8px; }
  .box_single_ads > .row > .filearea > .other_details_ads:empty,
  .box_single_ads > .row > .filearea > .ads_company:empty { display: none; }
}

/* R2. Desktop category sidebar is position:fixed with no max-height, so on
       1024-1366px-wide screens that are 768px or shorter its bottom is cut off
       and can't be reached. */
@media (min-width: 992px) {
  .sidebar_cats {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
}

/* R3. Sidebar sub-category labels: 11px text, nowrap, overflow hidden and 58px
       side padding, which clipped long labels such as "آپارتمان-بیسمنت-بچلر-استودیو". */
.jquery-accordion-menu ul ul.submenu li a { font-size: 12px; }
@media (min-width: 992px) {
  .jquery-accordion-menu ul ul.submenu li a {
    white-space: normal;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1.6;
  }
}
@media (max-width: 991px) {
  .jquery-accordion-menu ul ul.submenu li a { font-size: 13px; }
}

/* R4. Blog post on phones: the 6 featured-post tiles (about 1,150px) sat above
       the article. Move the article and sidebar row first. This is a
       progressive enhancement; browsers without :has() keep today's layout.
       The /blog index has no .display_post, so it is untouched. */
@media (max-width: 767px) {
  section.post-area.blog-page:has(.display_post) { display: flex; flex-direction: column; }
  section.post-area.blog-page:has(.display_post) > .row.m-t-20 { order: -1; }
  .display_post { padding: 15px; }
}

/* R5. Blog body text was 12px on phones and tablets. The blog view has an inline
       <style> block in <body> that loads after this file, so these selectors are
       made more specific on purpose. */
@media (max-width: 1000px) {
  section.post-area .display_post p,
  section.post-area .display_post li { font-size: 15px; line-height: 1.95; }
}

/* R6. Blog category chips were 10px text and 15px tall as tap targets. They need
       extra specificity to beat the blog view's inline <style> !important rules. */
section.post-area .starc-img-box .category,
section.post-area .starc-img-box-thumb .category,
section.post-area .blog-post-flat .category,
.blog-page .starc-img-box .category,
.blog-page .starc-img-box-thumb .category {
  font-size: 12px !important;
  line-height: 18px;
  padding: 4px 10px !important;
}

/* R7. Bidi in mixed Persian/English ad data. English descriptions showed the
       final period at the wrong end (".Mount Lighting"), "95 Oneida Crescent..."
       rendered as "Oneida Crescent... 95", and justified English on a 360px
       column left wide gaps between words. */
span.body_description { unicode-bidi: plaintext; text-align: start; }
span.value_info { unicode-bidi: plaintext; }
@media (max-width: 767px) {
  span.body_description { padding: 12px 16px; display: block; }
}

/* R8. The "similar ads" and home "latest news" slider arrows were 19-22px wide as tap targets. */
@media (max-width: 991px) {
  #mixedSlider .MS-controls button { min-width: 32px; min-height: 44px; font-size: 26px; }
  #mixedSlider .MS-controls .MS-left { left: 0; }
  #mixedSlider .MS-controls .MS-right { right: 0; }
}

/* R9. Hamburger menu items were 24px tall. Make them about 44px. */
@media (max-width: 990px) {
  nav.main_menu.menu_res ul li { padding-top: 11px; padding-bottom: 11px; }
  nav.main_menu.menu_res ul a + a li { border-top: 1px solid #f2f2f2; }
}

/* R10. The "نشان کردن" (bookmark) and report buttons wrapped onto 2 lines. */
.btn_details_ads span { white-space: nowrap; }

/* R11. Ad detail at 992-1199px: the 25% info column (about 200px) was too narrow,
        so agent names and contact links wrapped badly. */
@media (min-width: 992px) and (max-width: 1199px) {
  .box_single_ads > .row > .col-md-3.filearea { width: 33.3333%; }
  .box_single_ads > .row > .col-md-9 { width: 66.6667%; }
}

/* R12. Form fields: 16px text on phones, so iOS does not auto-zoom on focus once
        pinch-zoom is re-enabled (optional header.php change, see the pack README).
        Also drop the forced 700px min-height on the search box. */
@media (max-width: 767px) {
  .form-control,
  .filter-box select,
  .filter-box input[type="text"],
  .filter-box input[type="number"] { font-size: 16px; }
}
@media (max-width: 990px) {
  .filter-box { min-height: 0 !important; }
}

/* R13. Google Maps fails on every ad page (RefererNotAllowedMapError) and shows a
        grey "متأسفانه مشکلی پیش آمد" box. Hide the box only while it is in the error
        state. The real fix is the API-key referrer allow-list (see AUDIT.md). */
.map_ads:has(.gm-err-container) { display: none; }

/* R14. A Persian heading inherits direction:ltr from #mixedSlider. */
#title_main_slider_last_new_content { direction: rtl; }

/* OPTIONAL (off by default). IRANSansFaNum renders Latin digits as Persian digits,
   so postal codes look like "L۴B ۰H۵" and MLS IDs like "N۸۲۶۰۰۹۲". To show Latin
   digits in the spec-table values only, uncomment both rules:
@font-face { font-family: "melkLatinDigits"; src: local("Roboto"), local("Arial"), local("Helvetica"); unicode-range: U+0030-0039; }
span.value_info { font-family: "melkLatinDigits", "IRANSansFaNum-Light", sans-serif; }
*/

/* ---- run11-css (2026-10-04, Farshad approved via SEO Specialist). Sections R15..R17 match
        /workspace/melk-responsive-audit/2026-10-04/AUDIT.md issues 1..3. CSS only. ---- */

/* R15. Screens 1900px and wider: style15.css caps body at max-width 1900px, but
        .sidebar_cats is position:fixed with width:16%, which is measured against the
        viewport (550px at 3440), so it covered the main column. Pin it to its
        .col-md-2 column content width inside the 1900px body (measured 317px - 2x15px
        padding = 287px). Its static position already sits inside the centred body. */
@media (min-width: 1900px) {
  .sidebar_cats { width: 287px; }
}

/* R16. Article tables had no borders or padding, and the theme's li{list-style:none}
        removed list bullets. Content lists have no class; template lists (related
        posts box, social box, breadcrumb) do, so they are left alone. */
.display_post table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 16px 0; }
.display_post th,
.display_post td { border: 1px solid #ddd; padding: 8px 10px; text-align: right; vertical-align: top; }
.display_post th { background: #f5f5f5; color: #444; font-weight: bold; }
@media (max-width: 767px) {
  .display_post table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
.display_post ul:not([class]) > li { list-style: disc; }
.display_post ol:not([class]) > li { list-style: decimal; }
.display_post ul:not([class]),
.display_post ol:not([class]) { padding-right: 22px; padding-left: 0; }
.display_post .rel_post ul > li { list-style: none; }

/* R17. Featured-post tiles (/blog and the 6 tiles on article pages): darker gradient
        behind the white title, title clamped to 2 lines and lifted above the red
        category chip. The article hero (.display_post .starc-img-box) is not matched. */
section.blog-page > .row > .starc-img-box .blog-post .mask,
section.blog-page > .row > .starc-img-box-thumb .blog-post .mask {
  height: 75%;
  background-image: linear-gradient(to top, rgba(0,0,0,.75), transparent);
}
section.blog-page > .row > .starc-img-box .blog-post:hover .mask,
section.blog-page > .row > .starc-img-box-thumb:hover .mask {
  height: 90%;
  background-image: linear-gradient(to top, rgba(0,0,0,.88), transparent);
}
section.blog-page > .row > .starc-img-box .blog-post .title,
section.blog-page > .row > .starc-img-box-thumb .blog-post .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  left: 0;
  margin: 0;
  bottom: 38px;
}