/* app-base.css — DoreshTzion site CSS (split from app.css): tokens, fonts, base, typography. @split-marker */

/* ===== Folded in from the former demo.css ===== */
body::-webkit-scrollbar {
  display: none !important;
}

body {
  scrollbar-width: none !important;
}

body {
  -ms-overflow-style: none !important;
}


.font-article.font-bold{
    font-weight: 700 !important;
}


.hamekubal{
    border-radius: 8px !important;
    padding: 50px !important;
    background: white !important;
}


.hamekubal.content-section-1{
    border: 2px solid var(--dtz-bronze) !important;
    border-radius: 8px !important;
    padding: 50px !important;
    background: white !important;
}

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

/* ===== Bootstrap brand/theme variables — ported from the former core.css (Vuexy).
   These override stock Bootstrap 5.3.8 defaults so the site keeps its palette
   (navy primary, bronze secondary, Vuexy semantic colors, radius, body size). ===== */
:root,
[data-bs-theme=light] {
  --bs-blue: #007bff;
  --bs-indigo: #6610f2;
  --bs-purple: #7367f0;
  --bs-pink: #e83e8c;
  --bs-red: #ea5455;
  --bs-orange: #fd7e14;
  --bs-yellow: #ff9f43;
  --bs-green: #28c76f;
  --bs-teal: #20c997;
  --bs-cyan: #00cfe8;
  --bs-black: #4b465c;
  --bs-white: #fff;
  --bs-gray: rgba(75, 70, 92, 0.6);
  --bs-gray-dark: rgba(75, 70, 92, 0.8);
  --bs-gray-25: rgba(75, 70, 92, 0.015);
  --bs-gray-50: rgba(75, 70, 92, 0.03);
  --bs-primary: #0a283a;
  --bs-secondary: #c6a080;
  --bs-success: #28c76f;
  --bs-info: #00cfe8;
  --bs-warning: #ff9f43;
  --bs-danger: #ea5455;
  --bs-light: #dfdfe3;
  --bs-dark: #4b4b4b;
  --bs-gray: rgba(75, 70, 92, 0.05);
  --bs-primary-rgb: 10, 40, 58;
  --bs-secondary-rgb: 198, 160, 128;
  --bs-success-rgb: 40, 199, 111;
  --bs-info-rgb: 0, 207, 232;
  --bs-warning-rgb: 255, 159, 67;
  --bs-danger-rgb: 234, 84, 85;
  --bs-light-rgb: 223, 223, 227;
  --bs-dark-rgb: 75, 75, 75;
  --bs-gray-rgb: 75, 70, 92;
  --bs-primary-text-emphasis: #041017;
  --bs-secondary-text-emphasis: #4f4033;
  --bs-success-text-emphasis: #10502c;
  --bs-info-text-emphasis: #00535d;
  --bs-warning-text-emphasis: #66401b;
  --bs-danger-text-emphasis: #5e2222;
  --bs-light-text-emphasis: rgba(75, 70, 92, 0.7);
  --bs-dark-text-emphasis: rgba(75, 70, 92, 0.7);
  --bs-primary-bg-subtle: #ced4d8;
  --bs-secondary-bg-subtle: #f4ece6;
  --bs-success-bg-subtle: #d4f4e2;
  --bs-info-bg-subtle: #ccf5fa;
  --bs-warning-bg-subtle: #ffecd9;
  --bs-danger-bg-subtle: #fbdddd;
  --bs-light-bg-subtle: rgba(251, 250, 251, 0.525);
  --bs-dark-bg-subtle: rgba(75, 70, 92, 0.4);
  --bs-primary-border-subtle: #9da9b0;
  --bs-secondary-border-subtle: #e8d9cc;
  --bs-success-border-subtle: #a9e9c5;
  --bs-info-border-subtle: #99ecf6;
  --bs-warning-border-subtle: #ffd9b4;
  --bs-danger-border-subtle: #f7bbbb;
  --bs-light-border-subtle: rgba(75, 70, 92, 0.2);
  --bs-dark-border-subtle: rgba(75, 70, 92, 0.5);
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 75, 70, 92;
  --bs-font-sans-serif: "Heebo", sans-serif;
  --bs-font-monospace: "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-root-font-size: 16px;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.9375rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.47;
  --bs-body-color: #6f6b7d;
  --bs-body-color-rgb: 111, 107, 125;
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #4b465c;
  --bs-emphasis-color-rgb: 75, 70, 92;
  --bs-secondary-color: rgba(111, 107, 125, 0.75);
  --bs-secondary-color-rgb: 111, 107, 125;
  --bs-secondary-bg: rgba(75, 70, 92, 0.2);
  --bs-secondary-bg-rgb: 75, 70, 92;
  --bs-tertiary-color: rgba(111, 107, 125, 0.5);
  --bs-tertiary-color-rgb: 111, 107, 125;
  --bs-tertiary-bg: rgba(75, 70, 92, 0.05);
  --bs-tertiary-bg-rgb: 75, 70, 92;
  --bs-heading-color: #5d596c;
  --bs-link-color: #0a283a;
  --bs-link-color-rgb: 10, 40, 58;
  --bs-link-decoration: none;
  --bs-link-hover-color: #092434;
  --bs-link-hover-color-rgb: 9, 36, 52;
  --bs-code-color: #e83e8c;
  --bs-highlight-color: #6f6b7d;
  --bs-highlight-bg: #ffecd9;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dbdade;
  --bs-border-color-translucent: rgba(75, 70, 92, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 0.625rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.25rem 1rem rgba(165, 163, 174, 0.45);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(165, 163, 174, 0.3);
  --bs-box-shadow-lg: 0 0.625rem 1.25rem rgba(165, 163, 174, 0.4);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(75, 70, 92, 0.075);
  --bs-focus-ring-width: 0.15rem;
  --bs-focus-ring-opacity: 0.75;
  --bs-focus-ring-color: rgba(75, 70, 92, 0.75);
  --bs-form-valid-color: #28c76f;
  --bs-form-valid-border-color: #28c76f;
  --bs-form-invalid-color: #ea5455;
  --bs-form-invalid-border-color: #ea5455;
  --bs-dtz-primary: #0a283a;
  --bs-dtz-secondary: #c6a080;
  --bs-dtz-bg: #faf5f3;
}



/* ===== Blazor error UI ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ===== Site colours & interaction tokens ===== */
:root {
    --dtz-blue:        #0a283a;
    --dtz-blue-hover:  #0a3a5c;
    --dtz-bronze:      #c6a080;
    --dtz-bronze-hover:#b08e6e;
    --dtz-bronze-light:#b9a890;
    --dtz-bg:          #faf5f3;
    --dtz-bg-hover:    #ece9e8;  /* solid, opaque hover for cream buttons — works on any background */

    /* ===== Semantic tokens (consolidated from drifted hardcoded values) ===== */
    /* Neutral text & borders */
    --dtz-text-muted:    #888;     /* helper / secondary grey text */
    --dtz-text-dark:     #212529;  /* near-black form labels */
    --dtz-neutral:       #6c757d;  /* neutral status fill (bootstrap grey) */
    --dtz-border-light:  #eee;     /* light hairline divider */

    /* Status */
    --dtz-danger:        #c0392b;  /* error / delete / required */
    --dtz-danger-bg:     #fff0f0;  /* error alert surface */
    --dtz-danger-border: #e57373;  /* error alert border */
    --dtz-success:       #1f7a3d;  /* success / published */
    --dtz-new:           #1a6a9e;  /* "new / needs attention" — a deep ocean blue that reads at a glance.
                                      Drives the dashboard count, the "חדשות" chip and the "new" status,
                                      so "new" looks the same everywhere and doesn't compete with red. */
    --dtz-info:          #007bff;  /* generic link/info blue (shipped is navy now, not this) */

    /* Bronze family (subtle surfaces & hairlines) */
    --dtz-bronze-text:   #8a6d57;  /* bronze label text */
    --dtz-bronze-border: #e7dccd;  /* subtle bronze hairline */
    --dtz-bronze-bg:     #f3e7dc;  /* subtle bronze surface / hover */

    /* Navy family (subtle) */
    --dtz-blue-muted:    #586573;  /* muted navy text */
    --dtz-blue-border:   #c0cfe0;  /* light navy border */
    --dtz-surface-cool:  #f3f5fa;  /* cool light surface */

    /* Accent */
    --dtz-gold:          #f0b95f;  /* gold accent */
    --dtz-highlight:     #ffe9b8;  /* search-match highlight (<mark>) background */

    /* Warning / draft */
    --dtz-warning-bg:     #fff3cd;  /* warning alert surface */
    --dtz-warning-border: #ffeeba;  /* warning alert border */
    --dtz-warning-text:   #b8730a;  /* warning / draft text (dark amber) */

    /* Misc surfaces & brand */
    --dtz-success-bg:     #e7f3ea;  /* success surface (pale green) */
    --dtz-vimeo:          #1ab7ea;  /* Vimeo brand cyan (video icon) */
    --dtz-hero-terracotta:#c57047;  /* home hero gradient — warm stop */

    /* RGB triplets — for rgba() with variable alpha */
    --dtz-blue-rgb:       10, 40, 58;
    --dtz-bronze-rgb:     198, 160, 128;
    --dtz-blue-glow-rgb:  128, 160, 198;  /* dashboard blue-card hover glow */
    --dtz-hero-peach-rgb: 255, 206, 182;  /* home hero gradient — light stop */
    --dtz-danger-rgb:     192, 57, 43;    /* #c0392b — for the live-pulse dot's fading ring */

    /* Interaction timing */
    --hover-transition:      150ms ease-out;
    --hover-transition-slow: 200ms ease-out;

    /* Overlays for hover on light backgrounds */
    --hover-overlay-blue:   rgba(10, 40, 58, 0.06);
    --hover-overlay-bronze: rgba(198, 160, 128, 0.12);

    /* Card lift shadow */
    --hover-shadow-card: 0 6px 20px rgba(10, 40, 58, 0.12);

    /* Keyboard focus ring (used in place of default browser outline) */
    --focus-ring: 0 0 0 3px rgba(198, 160, 128, 0.5);

    /* Card surface aliases (consumed by the lesson / Q&A cards). Kept as names
       so card markup reads semantically; values track the dtz palette above. */
    --answer-card:            var(--dtz-bg);
    --lesson-card-border:     var(--dtz-bronze);
    --lesson-card-background: #ffffff;
}

/* ===== Fonts ===== */
@font-face {
    font-family: 'BANiflaot';
    src: url('../fonts/baniflaot/BANiflaot-Regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'BANiflaot';
    src: url('../fonts/baniflaot/BANiflaot-Bold.woff2') format('woff2');
    font-weight: 700;
}
@font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-Regular.ttf') format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-Bold.ttf') format('truetype');
    font-weight: 700;
}

/* ===== Base ===== */
html, body {
    direction: rtl;
    font-family: 'Heebo', Arial, sans-serif;
    color: var(--dtz-blue);
    overflow-x: hidden;
}

/* ===== Typography helpers ===== */
.font-main-title      { font-family: 'BANiflaot', Arial, sans-serif; font-weight: 700; font-size: 34px; line-height: 34px; }
h2.font-main-title    { font-size: 30px; line-height: 30px; }
h3.font-main-title    { font-size: 26px; line-height: 26px; }
@media (min-width: 768px)  {
    .font-main-title   { font-size: 55px; line-height: 55px; }
    h2.font-main-title { font-size: 50px; line-height: 50px; }
    h3.font-main-title { font-size: 40px; line-height: 40px; }
}
@media (min-width: 992px)  {
    .font-main-title   { font-size: 60px; line-height: 60px; }
    h2.font-main-title { font-size: 55px; line-height: 55px; }
    h3.font-main-title { font-size: 45px; line-height: 45px; }
}
@media (min-width: 1200px) {
    .font-main-title   { font-size: 65px; line-height: 65px; }
    h2.font-main-title { font-size: 60px; line-height: 60px; }
    h3.font-main-title { font-size: 50px; line-height: 50px; }
}
@media (min-width: 1400px) {
    .font-main-title   { font-size: 70px; line-height: 70px; }
    h2.font-main-title { font-size: 65px; line-height: 65px; }
    h3.font-main-title { font-size: 55px; line-height: 55px; }
}
@media (min-width: 1600px) {
    .font-main-title   { font-size: 75px; line-height: 75px; }
    h2.font-main-title { font-size: 70px; line-height: 70px; }
    h3.font-main-title { font-size: 60px; line-height: 60px; }
}
.font-subtitle        { font-family: 'BANiflaot', Arial, sans-serif; font-weight: 700; font-size: 24px; line-height: 24px; color: var(--dtz-blue); }
@media (min-width: 768px)  { .font-subtitle { font-size: 22px; line-height: 22px; } }
@media (min-width: 992px)  { .font-subtitle { font-size: 32px; line-height: 32px; } }
@media (min-width: 1200px) { .font-subtitle { font-size: 34px; line-height: 34px; } }
@media (min-width: 1400px) { .font-subtitle { font-size: 36px; line-height: 36px; } }
@media (min-width: 1600px) { .font-subtitle { font-size: 38px; line-height: 38px; } }
.font-article         { font-family: 'Heebo', Arial, sans-serif; font-weight: 400; font-size: 20px; line-height: 36px; white-space: normal; }
.font-article.font-small  { font-family: 'Heebo', Arial, sans-serif !important; font-weight: 400 !important; font-size: 15px !important; line-height: 26px !important; white-space: normal !important; }
.font-article.font-xsmall { font-family: 'Heebo', Arial, sans-serif !important; font-weight: 400 !important; font-size: 14px !important; line-height: 22px !important; white-space: normal !important; }
.font-bold            { font-weight: 700; }
.font-medium          { font-size: 18px; }
.font-small           { font-size: 13px; }
/* Form-field labels in the "שאל את הרב" forms — our blue, same font/size/weight. */
.font-label           { color: var(--dtz-blue); }
/* Title under each book card (BookCard component) + admin featured list. Lives
   here with the other .font-* helpers since it is a shared typography class. */
.font-book-title      { font-family: 'Heebo', Arial, sans-serif; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--dtz-blue); margin-bottom: 4px; text-align: right; }
/* Article content containers (.hamekubal) are styled in the demo.css fold block above. */

/* ===== Bold content font for p / labels / links (was in app-layout demo fold) ===== */
/* NOTE: --bs-content-font-family was referenced here historically but is not
   defined anywhere, so the font-family declaration resolved to `unset` (= the
   inherited Heebo). Dropped it; only the bold weight ever actually applied. */
.footer-link,
.form-label,
p,
.menu-link {
    font-weight: bold;
}

/* ===== In-text references to other responsa (QaReferenceLinker) ===== */
/* These links are injected as raw HTML via MarkupString, so they get NO Blazor
   scoped-css attribute — they must be styled globally, not in a .razor.css file. */
.qa-ref-link {
    color: var(--dtz-bronze-hover);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    /* In the listing/search cards the whole card is covered by a stretched link
       (.qas-card-cover); raise references above it so they stay independently
       clickable. Harmless on the single-question page where there is no cover. */
    position: relative;
    z-index: 2;
}
.qa-ref-link:hover { color: var(--dtz-blue); }

/* Stretched whole-card link. The card is a <div> (so it may contain real <a>
   references without nesting anchors); this transparent cover makes the entire
   card navigate to its own responsum, while .qa-ref-link sits above it. */
.qas-card-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}