/* ------------------------------------------------------------------
   Additions on top of the original stylesheet.
   Kept in a separate file so site.css stays a clean vendored copy.
   ------------------------------------------------------------------ */

/* Heebo, for a site that is now entirely Hebrew. The faces are declared in
   heebo.css; this is what actually asks for them.

   site.css asks for "Greycliff", Roboto, sans-serif — but nothing ever loads
   Greycliff (assets/css/greycliff.css is not linked from any template) and
   Roboto is not installed on Windows, so the site has in practice been
   rendering in the browser's default sans-serif. Heebo replaces that for both
   scripts rather than only Hebrew: its Latin glyphs are Roboto-derived, so the
   brand names that run through Hebrew copy — Mozello, Google, SEO — stay
   visually consistent with the text around them instead of switching face
   mid-sentence.

   Form controls are listed explicitly because they do not inherit font-family
   from body; site.css already made that correction for input alone. */
body,
input,
button,
select,
textarea {
    font-family: "Heebo", "Segoe UI", Arial, sans-serif;
}

/* site.css sets the body to 300. That was written for a Latin face, and until
   now it changed nothing: the fallbacks have no Light cut, so browsers rounded
   it to 400. Heebo is variable and does have a real 300, so honouring it would
   quietly make every page lighter than it renders today — and light weights
   cost more legibility in Hebrew than in Latin, where there are no capitals or
   descender variety to hold a word's shape. 400 keeps the page as it looks
   now; headings set their own weight and are unaffected. */
body {
    font-weight: 400;
}

/* Category shown next to the date on post pages */
.postdata span.category-meta a {
    color: #66717f;
}

/* Share buttons. The original loads these from a third-party widget that draws
   an icon into each empty <a>; here the icons are inlined server-side, so the
   rules below mirror the widget's own sharebuttons.css. */
#social .ssb-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin: 2.5rem 0 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e3e7ee;
}

#social .ssb-title {
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
    color: #1E1E1E;
}

#social .ssb-container a {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    text-decoration: none;
    cursor: pointer;
}

#social .ssb-container a:hover {
    opacity: .7;
}

#social .ssb-container a svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* "Copied!" bubble shown by the copy-link button */
#social .ssb-copied {
    position: absolute;
    top: -2rem;
    left: 0;
    background: #1E1E1E;
    color: #fff;
    padding: .25rem .5rem;
    border-radius: 4px;
    font-size: .75rem;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 1;
    transition: opacity .3s;
}

#social .ssb-copied-fade {
    opacity: 0;
}

/* "Keep reading" block under an article */
#related {
    margin: 3rem 0 1rem;
    padding-top: 2rem;
    border-top: 1px solid #e3e7ee;
}

#related h2 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.related-card {
    display: block;
    color: #45526c;
    text-decoration: none;
}

.related-card img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: .7rem;
    display: block;
}

.related-title {
    display: block;
    font-weight: 500;
    line-height: 1.35;
    font-size: 1rem;
    margin-bottom: .3rem;
}

.related-card:hover .related-title {
    color: #3075F6;
}

.related-date {
    display: block;
    font-size: .85rem;
    color: #8b95a5;
}

@media only screen and (max-width: 767px) {
    .related-grid {
        grid-template-columns: 1fr;
    }

    .related-card img {
        height: 180px;
    }
}

/* Search results readability */
#searchresults article {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e8ebf1;
}

#searchresults article:last-of-type {
    border-bottom: 0;
}

/* Responsive embeds pasted into post content */
#post iframe {
    max-width: 100%;
}

#post figure {
    margin: 1.5rem 0;
}

#post figure img {
    max-width: 100%;
    height: auto;
}

/* Facebook page banner in the sidebar.

   The iframe carries width and height attributes so the box is reserved before
   the lazy frame arrives — #sidebanner measures its own offset on load, and a
   frame that grew afterwards would leave that measurement stale. The cap only
   guards against a frame wider than the column; site.js is what keeps the two
   in step. (The spacing above it comes from site.css's `#sidebar section`.) */
#fb-page iframe {
    display: block;
    max-width: 100%;
    border: none;
    overflow: hidden;
}