/* ========================================================================== Legacy-body fixes that apply ONLY to the Tabler twins. Loaded by includes/tabler/head.php. Every rule is scoped to .dq-legacy, so it can never touch the Tabler chrome, and the legacy originals are untouched. SPECIFICITY: this file loads from , but css/style.scoped.css loads later (per page, in the body) and carries the very same `.dq-legacy .foo` selectors — equal specificity, later wins. The `body ` prefix beats them. Where the legacy rule itself is 3 classes deep (`.page-top-new-drugs .top_new_drugs_table`), the override has to repeat that context or it silently loses the cascade. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Count line ("3465 אבחנות") overlapping the first row of the list. style.css has `.main_content .title_small { margin: 50px 0 -25px }`. That negative bottom margin pulls the following .main_content_flex up by 25px, into the count line's own 21px-tall line box — so the first item of each column is painted straight through the red text. Worst on diagnosis (long names reach the right edge, where the RTL count sits) but measurably true on active_ingredients / manufacturers / registered_owner too, and on the legacy originals as well. Drop the negative pull; keep a small, deliberate gap. -------------------------------------------------------------------------- */ body .dq-legacy .main_content .title_small { margin-bottom: 10px; } /* ========================================================================== 2. Data tables — stack each row as a card once the real table cannot fit. These tables cannot honestly fit a phone, and side-scrolling hides data behind a gesture most users never make. Worse, the legacy markup is wrapper{overflow-x:auto} > card{overflow:hidden} > table{min-width}: the card's overflow:hidden (there for the border radius) DEFEATS the wrapper's scroll, so the table was simply CLIPPED — 725px of new_drugs was unreachable at 375px, and ~33px of specialty_history at 375px. So: below each table's own fitting width, drop the table formatting — every becomes a card and every a "Label value" line. The label comes from the cell's data-label, which the PHP fills from the SAME variable that heads the desktop table, so the two can never drift apart. Above it, the real table is rendered exactly as before. The breakpoints differ because the tables do: 8 columns need ~1100px, 4 need ~408px. Each table appears in exactly one block below — do not merge them. ========================================================================== */ /* -------------------------------------------------------------------------- 2a. new_drugs — 8 columns, min-width:1100px. It only fits at the site's 1200px breakpoint (container is then ~1143px), so anything narrower — phone AND tablet — gets cards. Without this, 768-1199px still rendered the 1100px table and the card clipped it. -------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { /* Stop clipping so nothing can be silently cut off. */ body .dq-legacy .page-top-new-drugs .top_new_drugs_card { overflow: visible; background: transparent; box-shadow: none; border-radius: 0; } body .dq-legacy .page-top-new-drugs .top_new_drugs_table { min-width: 0; /* the 1100px floor is what forced the overflow */ width: 100%; table-layout: auto; border-collapse: collapse; display: block; } /* Column headers are meaningless once rows stack; each cell carries its own. */ body .dq-legacy .page-top-new-drugs .top_new_drugs_table thead { display: none; } body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody { display: block; } /* One row = one card. */ body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody tr { display: block; background: #fff; border: 1px solid #E9E9F2; border-radius: 6px; box-shadow: 0 2px 8px rgba(99, 133, 194, 0.18); padding: 4px 12px; margin-bottom: 12px; } /* Zebra striping / hover tints read as noise on cards. */ body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody tr:nth-child(even) td, body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody tr:hover td { background: transparent; } /* One cell = one "Label value" line. */ body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: auto !important; min-width: 0; padding: 7px 0; border: 0; border-bottom: 1px solid #F1F1F6; text-align: start; white-space: normal; } body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody td:last-child { border-bottom: 0; } /* A cell with no value would render as a stray label ("עדכון נתונים" and nothing beside it) — drop the whole line. The PHP flags these with data-empty; CSS :empty cannot, because the cells contain whitespace rather than nothing. The stays put so the desktop table keeps its columns. */ body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody td[data-empty] { display: none; } body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; color: #6b7280; font-size: 13px; font-weight: 500; text-align: start; } body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody td:not([data-label])::before { content: none; } /* The drug name gets the whole line rather than a squeezed column. */ body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody td.tnd_title_cell { display: block; padding-top: 10px; } body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody td.tnd_title_cell::before { display: block; margin-bottom: 2px; } body .dq-legacy .page-top-new-drugs .top_new_drugs_table tbody td.tnd_title_cell .tnd_title_link { font-size: 16px; font-weight: 500; } /* tnd_ellipsis truncates to one line for the desktop grid; on a card the value has room to wrap, and truncating it would hide data for no reason. */ body .dq-legacy .page-top-new-drugs .top_new_drugs_table .tnd_ellipsis { overflow: visible; text-overflow: clip; white-space: normal; display: inline; max-width: none; } } /* -------------------------------------------------------------------------- 2b. specialty_history — 4 columns, ~408px min-content. It fits comfortably from tablet up, so only phones get cards. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { body .dq-legacy .specialty_history_card { overflow: visible; background: transparent; box-shadow: none; border-radius: 0; } body .dq-legacy .specialty_history_table { min-width: 0; width: 100%; table-layout: auto; border-collapse: collapse; display: block; } body .dq-legacy .specialty_history_table thead { display: none; } body .dq-legacy .specialty_history_table tbody { display: block; } body .dq-legacy .specialty_history_table tbody tr { display: block; background: #fff; border: 1px solid #E9E9F2; border-radius: 6px; box-shadow: 0 2px 8px rgba(99, 133, 194, 0.18); padding: 4px 12px; margin-bottom: 12px; } body .dq-legacy .specialty_history_table tbody tr:nth-child(even) td, body .dq-legacy .specialty_history_table tbody tr:hover td { background: transparent; } body .dq-legacy .specialty_history_table tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: auto !important; min-width: 0; padding: 7px 0; border: 0; border-bottom: 1px solid #F1F1F6; text-align: start; white-space: normal; } body .dq-legacy .specialty_history_table tbody td:last-child { border-bottom: 0; } body .dq-legacy .specialty_history_table tbody td[data-empty] { display: none; } body .dq-legacy .specialty_history_table tbody td::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; color: #6b7280; font-size: 13px; font-weight: 500; text-align: start; } body .dq-legacy .specialty_history_table tbody td:not([data-label])::before { content: none; } /* The article title gets the whole line. */ body .dq-legacy .specialty_history_table tbody td.history_title_cell { display: block; padding-top: 10px; } body .dq-legacy .specialty_history_table tbody td.history_title_cell::before { display: block; margin-bottom: 2px; } body .dq-legacy .specialty_history_table tbody td.history_title_cell .history_title_link { font-size: 16px; font-weight: 500; } } /* -------------------------------------------------------------------------- 3. RTL article/news cards below 768px. style.css sets the card container's direction only from tablet up: @media (min-width: 768px) { .main_content_articles.articles_page { direction: rtl } } Below that it inherits `ltr` from `.main_content_search_result` (which is forced LTR so Latin drug names sort correctly). Result on a Hebrew phone: the whole card flows left-to-right — date on the left, the "open" chevron on the right instead of the left, and Hebrew paragraphs left-aligned with a ragged right edge. It flips back to correct RTL the moment you cross 768px. This is a real RTL defect, not a style preference: below 768px Hebrew content is laid out as if it were English. The legacy pages have it too, but these are the responsive versions we are shipping, so they get it right. English is already correct (ltr at every width) and is left untouched. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { body[dir="rtl"] .dq-legacy .main_content_articles.articles_page { direction: rtl; } } /* -------------------------------------------------------------------------- 4. Drug-list rows — INTENTIONALLY NOT RESTYLED. The Dr Q / results / atc4drugs list rows render IDENTICALLY to the legacy originals on a phone (measured: same 335x48 rows, 16px/700, 1 column). There is no conversion regression here, so per the standing rule — Tabler is only for the responsive chrome, the page body must look exactly like the original — the rows are left alone. An earlier attempt to card them was reverted at the owner's request. If the list's mobile design is to change, that is a design decision to agree first, not something to slip in during a conversion. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 4. A-Z filter strip (.main_content_alphabet) — phone/tablet treatment. Legacy: .main_content_alphabet_en is min-width:1300px (26 letters x 40px) inside .main_content_alphabet{overflow-x:auto}. On a 375px phone the wrapper is 355px so only ~8 letters show — and because an RTL scroll container rests at scrollLeft:0 (its LEFT edge, which in RTL is the END of the content), the page opened on S-Z. Users had to scroll right to reach A. Below the site's 1200px rail breakpoint the strip cannot fit anyway, so drop the min-width and let the letters wrap: all 26 visible, nothing hidden, no wrong-end landing. At >=1200px the original single-row strip is untouched. -------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { body .dq-legacy .main_content_alphabet { overflow-x: visible; /* nothing overflows once the strip wraps */ margin-left: 0; /* legacy -20px pull only made sense for the scroll */ } body .dq-legacy .main_content_alphabet_en, body .dq-legacy .main_content_alphabet_he { min-width: 0; /* the 1300px floor is what forced the scroll */ flex-wrap: wrap; /* space-between stretches a short last row; pack rows instead */ justify-content: flex-start; gap: 6px; margin: 4px 0; } /* The wide "all results" pill must not be stretched by the wrap. */ body .dq-legacy .main_content_alphabet a.all_results, body .dq-legacy .main_content_alphabet_number { flex: 0 0 auto; } } /* ------------------------------------------------------------------ */ /* 4) Phase 4 (auth twins): Bootstrap grid class colliding with a */ /* legacy class NAME. The custom-checkbox label is */ /* — for Tabler that is the grid */ /* .container (width:100%, margin:auto, responsive max-width), so */ /* the label swallowed the whole .remember_me flex row and pushed */ /* the "forgot password" link onto two lines. It is NOT a grid */ /* container — undo the sizing inside the legacy body only. */ /* ------------------------------------------------------------------ */ body .dq-legacy label.container { width: auto; max-width: none; } /* -------------------------------------------------------------------------- 5. Results page (client fix D1, 2026-07-26): the 642x82 in-column banner ad should sit flush with the BOTTOM of the 160px vertical rail ad. The left column (.main_content_search_result) becomes a flex column and the banner takes margin-top:auto, so it lands at the bottom of the row — which the taller rail column defines. Only relevant where the rail exists (>=1200px). -------------------------------------------------------------------------- */ @media (min-width: 1200px) { body.result .dq-legacy .main_content_flex .main_content_search_result { display: flex; flex-direction: column; /* pages.sidebar-ad.css sets align-items:flex-start on the row, so the column must opt back into stretching or it never reaches the rail's bottom and margin-top:auto has no room to work with. */ align-self: stretch; } body.result .dq-legacy .main_content_search_result .main_content_advertisement_vert { margin-top: auto; } } /* -------------------------------------------------------------------------- 6. MoH news list (client fix F1, 2026-07-26): the gap between article cards was flex gap 16px + the generic .articles__item margin-bottom 24px = 40px. Client asked to cut it by half → drop the stray margin, gap 20px. -------------------------------------------------------------------------- */ /* The doubled class beats style.scoped.css's own `body.moh_news .dq-legacy .main_content_articles.articles_page { gap:16px }`, which has the SAME specificity and loads later (scoped file loads per-page in the body, after this head stylesheet). */ body.moh_news .dq-legacy .main_content_articles.articles_page.articles_page { gap: 20px; } body.moh_news .dq-legacy .main_content_articles.articles_page .articles__item { margin-bottom: 0; } /* -------------------------------------------------------------------------- 7. Dr Q drugs page hero on phones (client fix C1, PPT 2026-07-30). The hero is a 1148x277 banner (dr_q_hero.png) with the intro text pinned inside the image's baked-in speech bubble via percentage insets, its font clamped down to 7px — at 375px the whole thing is a ~90px strip with unreadable text ("the page header looks funny in the mobile version"). Per the client's mock: on phones drop the wide banner and present the intro as a chat message instead — a round Dr Q face avatar (same crop technique as the launcher circle in dq-chat-mobile.css) beside a purple speech bubble holding the full message at a readable size. Desktop (>=768px) untouched. Specificity: these rules must beat style.scoped.css, which loads later and emits `[dir="rtl"] .dq-legacy .dq_drq_hero__overlay {align-items:flex-end}` at (0,3,0) — hence the body[dir] prefix, (0,3,1). The Tabler always carries dir (see tabler/head.php). -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { body[dir] .dq-legacy .dq_drq_hero { display: flex; align-items: flex-start; gap: 10px; background: transparent; overflow: visible; border-radius: 0; } /* The avatar: face crop of the minimized asset (141x106 at 86px wide puts the face center on the 48px circle's center and pushes the baked-in green dot outside the border-radius clip). First flex item, so it sits at the inline start — right in Hebrew, left in English. */ body[dir] .dq-legacy .dq_drq_hero::before { content: ''; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: #9c5884 url(/images/ask_dr_q_open.png) no-repeat -19px -8px / 86px auto; } body[dir] .dq-legacy .dq_drq_hero__img { display: none; } body[dir] .dq-legacy .dq_drq_hero__overlay { position: static; padding: 0; flex: 1 1 auto; min-width: 0; align-items: stretch; } /* The bubble: full message at a readable size, small corner toward the avatar (logical start-start = top-right in RTL, top-left in LTR). */ body[dir] .dq-legacy .dq_drq_hero__message { position: static; display: block; overflow: visible; font-size: 14px; line-height: 1.5; color: #fff; background: #9c5884; padding: 12px 16px; border-radius: 16px; border-start-start-radius: 4px; } } /* -------------------------------------------------------------------------- Tabler breadcrumb inside the legacy body (index_tabler): the scoped legacy `ol` rule (list-style: upper-roman; padding-right: 20px) outranks Tabler's .breadcrumb reset, so the first crumb grew a roman "I." marker. Re-assert the Tabler look for any breadcrumb under .dq-legacy. -------------------------------------------------------------------------- */ .dq-legacy ol.breadcrumb { list-style: none; padding-right: 0; } .dq-legacy ol.breadcrumb li { list-style: none; } /* ------------------------------------------------------------------ */ /* 5) Phase 5 (static/legal twins): Tabler styles `pre` as a code */ /* block (ink background, light text, 4px radius). The legacy */ /* article pages use

 for ordinary paragraphs (transparent,   */
/*    body ink). The scoped Meyer reset already zeroes margin/padding/ */
/*    border/font, but not background/color/radius — undo those here. */
/* ------------------------------------------------------------------ */
body .dq-legacy pre {
    background: transparent;
    color: inherit;
    border-radius: 0;
}

/* ------------------------------------------------------------------ */
/* 6) Owner review 2026-08 — requested size increases (twins only).    */
/*    diagnosis list entries: 14px -> 16px. (The specialties-tile        */
/*    increase lives in style.css itself — its body.all_specialties      */
/*    rules out-specify anything this earlier-loading file declares.)    */
/* ------------------------------------------------------------------ */
body.diagnosis .dq-legacy .main_content_search_result .item .origin_name {
    font-size: 16px;
}