/* app-utilities.css — DoreshTzion site CSS (split from app.css): listing header, misc helpers, breadcrumb, validation. @split-marker */

/* ===== Folded in from the former demo.css ===== */
/*
* demo.css
* File include item demo only specific css only
******************************************************************************/
html,
body {
    direction: rtl;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
    color: var(--dtz-blue);
}


.ml-5p {
    margin-left: 5px;
}


.ml-10p {
    margin-left: 10px;
}


.h-20{
    height: 20% !important;
}


.h-25{
    height: 25% !important;
}


.h-30{
    height: 30% !important;
}


.h-70,
.h-70p {
    height: 70% !important;;
}


.h-75p {
    height: 75%;
}


.h-80,
.h-80p {
    height: 80% !important;
}


.h-85p {
    height: 80%;
}


.w-49{
    width: 49% !important;
}


.w-20{
    width: 20% !important;
}


.w-80{
    width: 80% !important;
}

.dtz.bg-light {
    background-color: var(--dtz-bg) !important;
}


.dtz.bg-blue {
    background-color: var(--dtz-blue) !important;
}


.dtz.bg-lightgrey {
    background-color: lightgrey !important;
}


.bg-bronza {
    background-color: var(--dtz-bronze) !important;
}


.bg-trans {
    background-color: transparent !important;
}


.dtz.br-2-blue {
    border: 2px solid var(--dtz-blue);
}


.dtz.br-1-boronza {
    border: 1px solid var(--dtz-bronze);
}


.dtz.br-2-boronza {
    border: 2px solid var(--dtz-bronze);
}

.dtz.brdr-6 {
    border-radius: 6px !important;
}

.dtz.br-2-lightgrey {
    border: 2px solid lightgrey;
}


.dtz.color-white {
    color: #ffffff !important;
}


.dtz.color-blue {
    color: var(--dtz-blue) !important;
}


.dtz.typ-header {
    font-family: 'BANiflaot';
}


.dtz.brdr-3 {
    border-radius: 3px;
}


.dtz.brdr-4 {
    border-radius: 4px;
}


.dtz.brdr-6 {
    border-radius: 6px;
}


.dtz.brdr-9 {
    border-radius: 9px;
}


.header-main {
    font-weight: 700;
    font-size: 75px;
    line-height: 30px;
    letter-spacing: 0%;
    text-align: right;
    color: var(--dtz-blue);
}


/*
* Header
******************************************************************************/

/* .page-header h1 {
    font-size: 5.3125rem;
    font-weight: 700;
} */

/* .question-wrap{
    height: 270px;
} */


/*
* Lessons
******************************************************************************/
/* .all-lessons h1 {
    font-size: 4.0625rem;
    font-weight: 700;
    line-height: 0px;
} */


/* .product-info:last-child {
  border-bottom: 1px solid var(--dtz-bronze-border);
} */


.col-3.col-custom-3 {
    width: 31%;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}


.fa-icon-circled {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
    font-size: 50px;
    border-radius: 0px;
    width: 160px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

.fa-icon-circled-primary {
    margin: 5px;
    padding: 5px;
    color: #ffffff;
}

/* .books-menu.nav-link.active {
    color: #ffffff !important;
    font-weight: bold;
    border-bottom: 2px solid var(--dtz-bronze) !important;
    background-color: var(--dtz-bronze) !important;
} */

.pr-0 {
    padding-right: 0px !important;
}

.pl-0 {
    padding-left: 0px !important;
}

.pl-20 {
    padding-left: 20px !important;
}

.pl-40 {
    padding-left: 40px !important;
}


.pl-10px {
    padding-left: 10px !important;
}

.pl-20px {
    padding-left: 20px !important;
}

.pl-sm-30px {
    padding-left: 30px !important;
}

.pl-40px {
    padding-left: 40px !important;
}

.pl-50px {
    padding-left: 50px !important;
}


.pr-10px {
    padding-right: 10px !important;
}

.pr-20px {
    padding-right: 20px !important;
}

.pr-30px {
    padding-right: 30px !important;
}

.pr-40px {
    padding-right: 40px !important;
}

.pr-50px {
    padding-right: 50px !important;
}


.pt-10px {
    padding-top: 10px !important;
}


.pt-20px {
    padding-top: 20px !important;
}


.pt-30px {
    padding-top: 30px !important;
}


.pt-40px {
    padding-top: 40px !important;
}


.pt-50px {
    padding-top: 50px !important;
}


.pr-1p {
    padding-right: 1% !important;
}


.pr-2p {
    padding-right: 2% !important;
}


.pr-3p {
    padding-right: 3% !important;
}


.pr-4p {
    padding-right: 4% !important;
}


.pr-5p {
    padding-right: 5% !important;
}


.mb-100px{
    margin-bottom: 100px !important;
}


.mb-50px{
    margin-bottom: 50px !important;
}

/* #home-slider-harav-mutzafi{
    position: absolute;
    height: 100%;
    width: auto;
    left: 20px;
    top: 0;
} */

.mb-px-50{
    margin-bottom: 50px;
}

.w100p{
    width: 100%;
}


.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: scroll; 
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.vertical-text{
    writing-mode: vertical-rl; /* Text from top to bottom, right to left */
    text-orientation: upright; /* Keeps characters upright, not rotated */
}

/* ===== end demo.css fold ===== */


/* ===== Listing pages (Q&A, lessons): shared header + title ===========
   Used by listing pages and their corresponding detail pages so the
   page title sits at a consistent Y across the section. On wide layouts
   the header reserves 82px so the title's bottom edge aligns with the
   sidebar's first CTA banner; on narrow layouts the sidebar wraps below
   and the reservation collapses. */
.listing-page-header {
    margin-bottom: 1.5rem;
    text-align: right;
}

@media (min-width: 992px) {
    .listing-page-header {
        min-height: 82px;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
}

/* ── Q&A two-column layout: sidebar width balance across breakpoints ───────
   Shared by the Q&A listing (QasPage) and the single-question page
   (QaDetailPage); both lay out a main column + .qas-col-side aside on the
   Bootstrap grid (col-lg-8/4 → col-xl-9/3). The sidebar reads well at lg
   (≈320px, col-4 of a 960px container) and xxl (≈330px, col-3 of 1320px) but
   is starved in the xl band: col-3 of an 1140px container is only ~285px.
   Rebalance the xl band ONLY to ~28%/72% so the sidebar stays ~320px there too.
   Loaded after bootstrap.rtl.min.css, so the equal-specificity width wins. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .qas-col-main { width: 72%; }
    .qas-col-side { width: 28%; }
}

.listing-page-title {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: var(--dtz-blue);
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
    text-align: right;
    line-height: 1.1;
}

/* Aside modifier: lifts the SEARCH-box title into an 82px-tall slot (matching
   .listing-page-header), so the bordered card below it starts at the same Y
   as the main column's first content card. The search box is the topmost
   block in the lessons sidebar; the topic tree below keeps its natural gap.
   Use when the sidebar has no tall hero (e.g. lessons, which lacks the
   Ask-the-Rav banner that does this naturally in Q&A).
   Selector includes the `aside` tag to outweigh the scoped
   .lesson-search-title rule (loaded later in the bundled scoped CSS). */
@media (min-width: 992px) {
    aside.listing-sidebar-aligned .lesson-search-title {
        /* 70px slot + 12px margin = 82px total, so the bordered card below
           lines up with the first lesson card while preserving the same
           title→card gap that exists in the Q&A sidebar. */
        min-height: 70px;
        margin: 0 0 12px 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
}

/* ===== Misc helpers ===== */
.cursor-pointer  { cursor: pointer; }
.text-justify    { text-align: justify; }
.bg-dtz-bg       { background-color: var(--dtz-bg); }
.bg-bronze-light { background-color: var(--dtz-bg); }
.bg-blue         { background-color: var(--dtz-blue) !important; }

/* ===== Breadcrumb ===== */
.breadcrumb {
    --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234b465c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 6 9 12 15 18'/%3E%3C/svg%3E");
    align-items: center;
    font-size: 20px;
    line-height: 36px;
}
.breadcrumb-item + .breadcrumb-item::before {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 2px;
}
.breadcrumb-item a    { color: var(--dtz-bronze); }
.breadcrumb-item.active { color: var(--dtz-blue); }

/* ===== Form validation ===== */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--dtz-success); }
.invalid { outline: 1px solid var(--dtz-danger); }
.validation-message { color: var(--dtz-danger); }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--dtz-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* ===== Generic helpers (were in app-layout): .custom-border, .page-header ===== */
.custom-border {
    border: 1px solid var(--dtz-bronze-border);
    border-radius: 3px;
}
.page-header h2 {
    font-family: Heebo;
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 40px;
}


.page-header h5 {
    font-family: Heebo;
    font-size: 1.5625rem;
    font-weight: 500;
    line-height: 40px;
    text-align: justify;
}

/* Large book label badge — shared between the book detail page (next to the
   title) and the admin book-edit preview. Per-instance colors are inlined. */
.dtz-book-badge-lg {
    display: inline-block;
    font-family: 'Heebo', Arial, sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 8px 16px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    white-space: nowrap;
}