/* -------------------------------------------------------------
 * Nibbana Israel — THEME-ONLY additions.
 * css/index.css is a byte-for-byte copy of the signed-off static site and must never be
 * edited; anything the WordPress build needs on top of it lives here.
 * ------------------------------------------------------------- */

/* Honeypot field (spam trap): present in the DOM for bots, unreachable for people.
   Out of flow (absolute) so it never affects the form grids/flex gaps, and kept INSIDE the
   page box with the clip pattern: an off-screen offset such as left:-10000px widens the
   scrollable width of this RTL document. */
.nib-hp {
    position: absolute !important;
    left: 0 !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    opacity: 0;
    pointer-events: none;
}

/* -------------------------------------------------------------
 * Real WordPress pages / posts / 404 on an existing site (page.php, single.php, index.php,
 * 404.php). A reading column in the site's own tokens; nothing here touches the one page,
 * which never uses these classes. Pages built with a page builder get .nib-page--full and
 * render edge to edge with the builder's own CSS.
 * ------------------------------------------------------------- */
.nib-page-main {
    padding: calc(var(--header-height) + 48px) 24px 80px;   /* clear the fixed header */
    min-height: 60vh;
}
.nib-page {
    max-width: 860px;
    margin: 0 auto;
}
.nib-page--full {
    max-width: none;
}
.nib-page-main:has(.nib-page--full) {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.nib-page-header {
    text-align: start;
    margin-bottom: 28px;
}
.nib-page-header .section-title {
    margin-bottom: 8px;
}
.nib-page-meta {
    color: var(--color-gray-dark);
    font-size: 14px;
    margin: 0;
}
.nib-page-content {
    font-family: var(--font-hebrew);
    font-size: 17px;
    line-height: 1.75;
    color: var(--color-dark);
}
html[dir="ltr"] .nib-page-content { font-family: var(--font-english); }
.nib-page-content > * + * { margin-top: 1em; }
.nib-page-content h2,
.nib-page-content h3,
.nib-page-content h4 {
    color: var(--color-primary);
    line-height: 1.3;
    margin-top: 1.6em;
}
.nib-page-content h2 { font-size: 26px; }
.nib-page-content h3 { font-size: 21px; }
.nib-page-content h4 { font-size: 18px; }
.nib-page-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.nib-page-content ul,
.nib-page-content ol { padding-inline-start: 1.4em; }
.nib-page-content li + li { margin-top: 0.35em; }
.nib-page-content img,
.nib-page-content video,
.nib-page-content iframe { max-width: 100%; height: auto; }
.nib-page-content blockquote {
    border-inline-start: 3px solid var(--color-accent);
    padding-inline-start: 18px;
    color: var(--color-gray-dark);
}
.nib-page-content table { border-collapse: collapse; width: 100%; }
.nib-page-content th,
.nib-page-content td { border: 1px solid var(--color-gray); padding: 8px 12px; text-align: start; }
.nib-post-teaser + .nib-post-teaser { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--color-gray); }
.nib-post-teaser h2 { font-size: 24px; margin: 0 0 4px; }
.nib-post-teaser h2 a { text-decoration: none; }
.nib-404 { text-align: center; padding: 40px 0; }
.nib-404 .section-title { margin-bottom: 16px; }
.nib-404-text { color: var(--color-gray-dark); font-size: 17px; line-height: 1.7; margin: 0 auto 28px; max-width: 560px; }
@media (max-width: 767px) {
    .nib-page-main { padding: calc(var(--header-height) + 28px) 20px 56px; }
    .nib-page-content { font-size: 16px; line-height: 1.7; }
    .nib-page-content h2 { font-size: 22px; }
    .nib-page-content h3 { font-size: 19px; }
}

/* Optional blog-card image chosen in wp-admin. The signed-off design ships with icons, so
   this only applies when an editor actually picks an image for a card. */
.blog-thumb img.blog-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}