/* the menu's lighter Rubik (the pages load only its 800, for the headings) */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');

/* דבר המפרסם - the parts every page shares (the header's ☰ menu, the rotating banners), with inc/menu.asp,
   inc/top-banner.asp and js/site.js (the side ad, inc/side-ad.asp, was removed - user, 2026-10-09). Each page's own <style> comes after this file,
   so a page can still adjust any of it. Uses the pages' --border-subtle / --page-w */

/* ----- the page never moves sideways on a phone: nothing may widen it (overflow-x: clip - unlike "hidden" it keeps
   the sticky header working), and a sideways swipe never drags / bounces it (overscroll-behavior-x) */
html, body { overflow-x: clip; overscroll-behavior-x: none; }

/* ----- site menu (☰) - in the (sticky) header right next to the logo, on every screen.
   Opens / closes by its own button (☰ / ✕) or by choosing a link - not by a click elsewhere */
.menu-wrap { position: relative; flex-shrink: 0; }
.menu-btn { width: 44px; height: 44px; border: 1px solid var(--border-subtle); border-radius: 10px; background: #fff; color: #C8171D;
    font-size: 22px; line-height: 1; cursor: pointer; }
.site-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1200; width: 250px; padding: 6px; background: #fff;
    border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.16); }
.site-menu[hidden] { display: none; }
/* calm links - dark grey, medium weight; the megaphone red only for the page you're on and the one pointed at */
.site-menu a { display: block; padding: 11px 14px; border-radius: 8px; font-family: 'Rubik', 'Assistant', sans-serif; font-weight: 500;
    font-size: 16px; color: #1f2937; text-decoration: none; }
.site-menu a + a { border-top: 1px solid #f1f1f3; }
/* the line between the site's pages and the legal pages - these come after it, smaller and lighter */
.site-menu .menu-sep { display: block; margin: 4px 8px; border-top: 2px solid #e5e7eb; }
.site-menu .menu-sep ~ a { padding-top: 9px; padding-bottom: 9px; font-size: 14px; color: #6b7280; }
.site-menu a:active, .site-menu a:hover, .site-menu .menu-sep ~ a:hover { background: #fef2f2; color: #C8171D; }
.site-menu a[aria-current], .site-menu .menu-sep ~ a[aria-current] { color: #C8171D; }
@media (max-width: 767px) {
    /* a phone: logo on the right, ☰ at the far left of the same line (its menu opening leftwards), the banner
       on the line under them */
    .menu-wrap { order: 1; margin-right: auto; }
    .site-menu { right: auto; left: 0; }
    .logo-row .top-ad { order: 2; }
}

/* ----- a phone: a smaller header (user, 2026-10-21 - the full header took ~37% of the screen). It stays whole and in
   place while scrolling, as before (a slim header while scrolling was tried and dropped); just tighter: a smaller logo
   and ☰, less padding and gaps, a lower search box (its text still 16px - an iPhone zooms in on smaller) and lower
   tags. The rules carry "body" so they win over each page's own header styles */
@media (max-width: 767px) {
    body .social-header { padding: 8px 12px; }
    body .logo img { height: 46px; }
    body .logo-row { gap: 8px; margin-bottom: 8px; }
    body .menu-btn { width: 38px; height: 38px; font-size: 19px; border-radius: 9px; }
    body .search-wrap { margin-bottom: 8px; }
    body .search-bar { padding: 8px 38px 8px 10px; }
    body .search-btn { width: 30px; height: 30px; right: 4px; }
    body .filters { gap: 5px; padding-bottom: 0; }
    body .filter-btn { padding: 5px 2px; font-size: 13px; }
}

/* ----- the header's second row - the search box and the category tags (inc/header.asp), on EVERY page (user,
   2026-10-12). Moved here from home.asp, unchanged. On the home page they filter the feed; elsewhere they lead to it */
.logo-row { margin-bottom: 15px; }
/* the logo's box (inc/header.asp: an h1 on the home page, a div elsewhere) - never squeezed */
.logo-row .site-logo { flex-shrink: 0; }
.search-wrap { position: relative; margin-bottom: 15px; }
.search-bar { width: 100%; padding: 12px 42px 12px 12px; border: 1px solid var(--border-subtle); border-radius: 8px; font-size: 16px; }
/* the magnifier at the start of the box (right, RTL) - a button that runs the search (as Enter does); grey, red while
   the box is in use or pointed at */
.search-btn { position: absolute; top: 50%; right: 6px; width: 34px; height: 34px; transform: translateY(-50%); padding: 0; border: 0;
    border-radius: 6px; background: none; color: #9ca3af; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: color .15s, background .15s; }
.search-icon { width: 19px; height: 19px; display: block; }
.search-wrap:focus-within .search-btn, .search-btn:hover { color: var(--brand-red); }
.search-btn:hover { background: #fef2f2; }
/* the category row scrolls sideways only if it has to - and a swipe that reaches its end stays in it */
.filters { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 5px; scrollbar-width: none; overscroll-behavior-x: contain; }
.filter-btn { padding: 8px 16px; border: 1px solid var(--border-subtle); border-radius: 20px; cursor: pointer; background: #fff; font-size: 14px; white-space: nowrap; font-weight: 700; }
.filter-btn.active { background: var(--brand-red); color: #fff; border-color: var(--brand-red); }
/* a phone: one row of four equal buttons (הכל / חדשות / טורים / עבודות - user, 2026-10-18), all of them in view; from
   768px they wrap when they don't fit */
@media (max-width: 767px) {
    .filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; }
    .filter-btn { padding: 7px 2px; font-size: 13px; text-align: center; }
}
@media (min-width: 768px) {
    .filters { flex-wrap: wrap; overflow-x: visible; }
}
@media (min-width: 1000px) {
    .header-controls { display: flex; align-items: center; gap: 16px; }
    .header-controls .search-wrap { width: 340px; flex-shrink: 0; margin-bottom: 0; }
    .filter-btn { padding: 8px 14px; }
    .header-controls .filters { padding-bottom: 0; }
    /* the ☰ on the left end of the search + categories row, its left edge in line with the banner's (user,
       2026-10-12) - taken out of the logo row and placed by position (both sit inside the header's 15px padding);
       the row keeps room for it so no category runs under it, and its menu opens leftwards */
    .header-wrap { position: relative; }
    .logo-row .menu-wrap { position: absolute; left: 15px; bottom: 15px; }
    .logo-row .site-menu { right: auto; left: 0; }
    .header-controls { padding-left: 60px; min-height: 44px; }
    /* the second row in the first row's two columns (user, 2026-10-18 - with 4 tags it looked unbalanced): the search
       box under the logo's side, as wide as the space beside the banner; the tags + ☰ under the banner (600px) - the
       tags from its right edge, the ☰ at its left edge (the 60px kept for it inside the 600) */
    .header-controls { padding-left: 0; }
    /* ...then (user, 2026-10-21) the 4 tags exactly in the middle of the header: three columns - the search box in the
       right one, the tags in the middle (as wide as they are), the left one empty (the ☰ sits at its left end) - the
       two side columns equal, so the tags are centered and the search box ends short of them */
    .header-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; }
    .header-controls .search-wrap { width: auto; min-width: 0; }
    .header-controls .filters { flex-wrap: nowrap; }
}

/* ----- ad rotator - the slot's banners stacked in one box of the slot's size; once a minute the next one
   drops in from the top and pushes the current one out the bottom, fast, like a notice board (js/site.js);
   stopped while pressed. The ones waiting sit above the box (hidden by overflow). The dots show which banner is on.
   The banners come from the management system (inc/top-banner.asp): each is marked for a computer (data-d) and / or
   a phone (data-m) - the other kind is left out here, and js/site.js rotates only the ones still shown */
@media (max-width: 767px) { .ad-slide[data-m="0"] { display: none; } }
@media (min-width: 768px) { .ad-slide[data-d="0"] { display: none; } }
.ad-rotator { position: relative; overflow: hidden; border-radius: 4px; background: #000; line-height: 0; }
.ad-slide { position: absolute; inset: 0; display: block; transform: translateY(-100%);
    transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.ad-slide.is-active { transform: none; z-index: 1; }
.ad-slide.is-leaving { transform: translateY(100%); z-index: 1; }
.ad-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-dots { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 5px; line-height: 0; }
.ad-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(0,0,0,.6); transition: background .3s, transform .3s; }
.ad-dot.is-active { background: #fff; transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
    .ad-slide, .ad-slide.is-leaving { transform: none; opacity: 0; transition: opacity .3s; }
    .ad-slide.is-active { opacity: 1; }
}