/* app-interactions.css — DoreshTzion site CSS (split from app.css): UNIFIED HOVER & FOCUS SYSTEM — MUST load last. @split-marker */

/* ===== Folded in from the former demo.css ===== */

.custom-icon {
  transition: transform 0.3s ease;
  display: inline-block;
}


.accordion-button:not(.collapsed) .custom-icon {
  transform: rotate(90deg);
}


.custom-accordion .accordion-button::after {
  display: none !important;
}


.custom-accordion .accordion-button {
  justify-content: flex-start;
  gap: 10px;
}

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


/* =====================================================================
   UNIFIED HOVER & FOCUS SYSTEM
   Tokens are defined on :root above. All hover effects are wrapped in
   @media (hover: hover) so touch devices don't get stuck hover states.
   Focus states are visually consistent for keyboard users (WCAG 2.4.7).
   ===================================================================== */

/* ---- Cards: lift on hover (Q&A, lessons, donate boxes) ---- */
.answer-wrap-home, .answer-wrap, .lesson-card, .donate-box {
    transition: box-shadow var(--hover-transition-slow), transform var(--hover-transition-slow);
}
@media (hover: hover) {
    .answer-wrap-home:hover, .answer-wrap:hover, .lesson-card:hover, .donate-box:hover {
        box-shadow: var(--hover-shadow-card);
        transform: translateY(-2px);
    }
}

/* ---- Donate arrow button (circular) ---- */
.donate-button {
    transition: background-color var(--hover-transition), transform var(--hover-transition);
}
@media (hover: hover) {
    .donate-box:hover .donate-button { background-color: var(--dtz-blue); }
}

/* ---- Donate intro: collapsible "read more" ---- */
.donate-readmore-wrap {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.4s ease;
}
.donate-readmore-wrap.is-open {
    max-height: 1500px;
    opacity: 1;
    transition: max-height 0.7s ease, opacity 0.5s ease 0.1s;
}
.donate-readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--dtz-blue);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 18px;
    border-bottom: 2px solid var(--dtz-bronze);
    border-radius: 0;
    cursor: pointer;
    transition: color var(--hover-transition), border-color var(--hover-transition);
}
.donate-readmore-btn:focus { outline: none; }
.donate-readmore-btn:focus-visible {
    outline: 2px solid var(--dtz-bronze);
    outline-offset: 4px;
    border-radius: 4px;
}
.donate-readmore-chevron {
    font-size: 12px;
    transition: transform 0.3s ease;
}
.donate-readmore-btn[aria-expanded="true"] .donate-readmore-chevron {
    transform: rotate(180deg);
}
@media (hover: hover) {
    .donate-readmore-btn:hover {
        color: var(--dtz-bronze);
        border-color: var(--dtz-blue);
    }
}

/* ---- Lesson action mini-buttons (mp3, download, arrow on card) ---- */
.lesson-link {
    transition: filter var(--hover-transition), transform var(--hover-transition), box-shadow var(--hover-transition);
}
@media (hover: hover) {
    .lesson-link:hover { filter: brightness(1.1); transform: scale(1.06); }
}
.lesson-link:focus         { outline: none; }
.lesson-link:focus-visible { box-shadow: var(--focus-ring); }

/* ---- Related lessons ("שיעורים באותו נושא") on the lesson detail page ----
   Mirrors the Q&A page's .qa-related-* block: a header with the section title
   on the right and a navy-outline "all lessons" CTA on the visual-left, then a
   single row of lesson cards below. */
.lesson-related {
    /* Sits well below the lesson body so the reader registers it as a new
       region, not a continuation of the lesson. */
    margin-top: 72px;
}

.lesson-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Title — same display face as the page titles, a step smaller so it reads as
   a secondary heading. */
.lesson-related-title {
    font-family: 'BANiflaot', Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--dtz-blue);
    margin: 0;
    letter-spacing: 0.3px;
    line-height: 1.15;
}

/* ---- Circular arrow buttons on Q&A cards ---- */
.answer-button, .answer-button-home {
    transition: background-color var(--hover-transition), transform var(--hover-transition);
}
@media (hover: hover) {
    .answer-button:hover, .answer-button-home:hover {
        background-color: var(--dtz-blue);
    }
}

/* ---- Lesson buttons (circular) ---- */
.lesson-button {
    transition: background-color var(--hover-transition), transform var(--hover-transition);
}
@media (hover: hover) {
    .lesson-button-1:hover { background-color: var(--dtz-blue-hover); }
    .lesson-button-2:hover { background-color: var(--dtz-bronze-hover); }
    .lesson-button-3:hover { background-color: var(--dtz-text-muted); }
}

/* ---- Breadcrumb links ---- */
.breadcrumb-item a {
    transition: color var(--hover-transition);
}
@media (hover: hover) {
    .breadcrumb-item a:hover { color: var(--dtz-blue); text-decoration: underline; text-underline-offset: 3px; }
}

/* ---- Pagination (Bootstrap) ---- */
.page-link {
    color: var(--dtz-blue);
    transition: background-color var(--hover-transition), color var(--hover-transition);
}
@media (hover: hover) {
    .page-link:hover { background-color: var(--hover-overlay-blue); color: var(--dtz-blue); }
}
.page-link:focus         { outline: none; box-shadow: none; }
.page-link:focus-visible { box-shadow: var(--focus-ring); }
.page-item.active .page-link { background-color: var(--dtz-blue); border-color: var(--dtz-blue); }

/* ---- Topic / category items (lessons + Q&A archive) ---- */
.topic-item-container {
    transition: transform var(--hover-transition-slow);
}
@media (hover: hover) {
    .topic-item-container:hover { transform: translateY(-3px); }
    .topic-item-container:hover .topic-item-image-container,
    .topic-item-container:hover .all-topics-image-container { filter: brightness(1.05); }
}

/* ---- Generic in-content text links (article body, lesson titles, etc.) ----
   Only apply to <a> that aren't already styled buttons / nav links / footer
   (those have their own rules above). */
.font-article a,
.hamekubal a {
    color: var(--dtz-blue);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: text-decoration-color var(--hover-transition), color var(--hover-transition);
}
@media (hover: hover) {
    .font-article a:hover,
    .hamekubal a:hover {
        color: var(--dtz-blue-hover);
        text-decoration-color: currentColor;
    }
}

/* ---- Form inputs: bronze border at rest + clear focus ring ----
   Default border-color uses the brand bronze across the whole site so form
   surfaces read as a single visual system. Focus adds the soft bronze glow.
   `.is-invalid` (Bootstrap) still wins via higher specificity — error fields
   stay red. Utility classes like `.border-0` also override (they carry
   `!important`), so the pill search inputs in the header keep their borderless
   look. */
.form-control,
.form-select,
.form-check-input {
    border-color: var(--dtz-bronze);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--dtz-bronze);
    box-shadow: var(--focus-ring);
}

/* ---- Placeholder color: bronze so typed content is visually distinct ----
   Default Bootstrap placeholder is gray (`var(--bs-secondary-color)`) and easily
   mistaken for typed text. Bronze keeps it readable but unambiguously "hint text".
   Must include `.form-control`/`.form-select` selectors because Bootstrap targets
   `.form-control::placeholder` — a class selector — which beats `input::placeholder`
   on specificity regardless of source order. `opacity: 1` is needed because Firefox
   dims placeholders to ~0.54 by default. */
input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.form-select::placeholder {
    color: var(--dtz-bronze-light);
    opacity: 1;
}

/* ---- Universal: any explicit cursor-pointer element gets subtle keyboard focus ---- */
.cursor-pointer:focus         { outline: none; }
.cursor-pointer:focus-visible { box-shadow: var(--focus-ring); border-radius: 4px; }

/* ---- Bootstrap button overrides: re-skin to our brand ---- */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dtz-blue);
    --bs-btn-border-color: var(--dtz-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dtz-blue-hover);
    --bs-btn-hover-border-color: var(--dtz-blue-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dtz-blue-hover);
    --bs-btn-active-border-color: var(--dtz-blue-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dtz-blue);
    --bs-btn-disabled-border-color: var(--dtz-blue);
    --bs-btn-focus-shadow-rgb: 198, 160, 128;
    transition: background-color var(--hover-transition), border-color var(--hover-transition), box-shadow var(--hover-transition);
}
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--dtz-bronze);
    --bs-btn-border-color: var(--dtz-bronze);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--dtz-bronze-hover);
    --bs-btn-hover-border-color: var(--dtz-bronze-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--dtz-bronze-hover);
    --bs-btn-active-border-color: var(--dtz-bronze-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--dtz-bronze);
    --bs-btn-disabled-border-color: var(--dtz-bronze);
    transition: background-color var(--hover-transition), border-color var(--hover-transition), box-shadow var(--hover-transition);
}
.btn-outline-secondary {
    --bs-btn-color: var(--dtz-blue);
    --bs-btn-border-color: var(--dtz-blue);
    --bs-btn-hover-bg: var(--dtz-blue);
    --bs-btn-hover-border-color: var(--dtz-blue);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--dtz-blue-hover);
    --bs-btn-active-border-color: var(--dtz-blue-hover);
    transition: background-color var(--hover-transition), color var(--hover-transition), border-color var(--hover-transition);
}
.btn-dtz-secondary-bg {
    transition: background-color var(--hover-transition), border-color var(--hover-transition), box-shadow var(--hover-transition);
}
@media (hover: hover) {
    .btn-dtz-secondary-bg:hover {
        background-color: var(--dtz-bronze-hover);
        border-color: var(--dtz-bronze-hover);
        color: #fff;
    }
}
.btn-dtz-secondary-bg:focus         { outline: none; }
.btn-dtz-secondary-bg:focus-visible { box-shadow: var(--focus-ring); }

/* ---- Catch-all: any <button> or <a class="btn"> without a more specific rule still gets a focus ring ---- */
.btn:focus         { outline: none; }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn { transition: background-color var(--hover-transition), border-color var(--hover-transition), color var(--hover-transition), filter var(--hover-transition), box-shadow var(--hover-transition); }
/* Inline-styled buttons (style="background:...") have no class to hook into.
   This subtle filter brighten still works regardless of base colour. */
@media (hover: hover) {
    button[style*="background"]:not([disabled]):hover,
    a[style*="background"]:hover { filter: brightness(1.08); }
}
button[style*="background"], a[style*="background"] {
    transition: filter var(--hover-transition), box-shadow var(--hover-transition);
}