/* =====================================================================
   Schoolep Breadcrumb Component — single source of truth
   Controls every .sp-breadcrumbs breadcrumb on PC + mobile.
   Load this file after page/resource CSS.
   ===================================================================== */

:root {
  /* ================================================================
     TYPOGRAPHY CONTROLS
     ================================================================ */
  /* Shared weight controls — restores the bold/gros appearance */
  --breadcrumb-font-weight: 650;
  --breadcrumb-current-font-weight: 900;

  /* Desktop font size per language */
  --breadcrumb-pc-font-size-fr: 13px;
  --breadcrumb-pc-font-size-ar: 12.5px;

  /* Mobile font size per language */
--breadcrumb-mobile-font-size-fr: clamp(11.5px, 2.8vw, 14px);
--breadcrumb-mobile-font-size-ar: clamp(10.5px, 2.8vw, 14px);

  /* ================================================================
     MOBILE WRAPPING CONTROLS

     The breadcrumb stays on one row while it fits.
     When it no longer fits, complete breadcrumb items continue
     on the next row without breaking their internal text.
     ================================================================ */
  --breadcrumb-mobile-row-wrap: wrap;

  /* Keep each icon + title together on one line. */
  --breadcrumb-mobile-item-white-space: normal;

  /* Never crop wrapped breadcrumb rows. */
  --breadcrumb-mobile-overflow: visible;

  /* Never crop the current/final title. */
  --breadcrumb-mobile-current-overflow: visible;
  --breadcrumb-mobile-current-text-overflow: clip;

  /* Vertical gap between wrapped breadcrumb rows. */
  --breadcrumb-mobile-row-gap: 0.20em;

  /* Line-height per language */
  --breadcrumb-pc-line-height-fr: 1.4;
  --breadcrumb-pc-line-height-ar: 1.4;
  --breadcrumb-mobile-line-height-fr: 1.7;
  --breadcrumb-mobile-line-height-ar: 1.7;

  /* ================================================================
     BREADCRUMB ROW SPACING
     Controls the space between complete breadcrumb items and separators.
     ================================================================ */
  --breadcrumb-pc-gap: 0.46em;
  --breadcrumb-mobile-gap: 0.36em;
  --breadcrumb-pc-margin-bottom: 8px;
  --breadcrumb-mobile-margin-bottom: 7px;

  /* ================================================================
     ICON ↔ TEXT GAP
     Increase these values for more space between each icon and its text.
     ================================================================ */
  --breadcrumb-pc-icon-text-gap: 0.34em;
  --breadcrumb-mobile-icon-text-gap: 0.42em;

  /* ================================================================
     ICON SIZE AND Y-AXIS POSITION
     ================================================================ */
  --breadcrumb-pc-icon-size: 1em;
  --breadcrumb-mobile-icon-size: 1em;
  --breadcrumb-pc-icon-y: -0.5px;
  --breadcrumb-mobile-icon-y: -1.65px;

  /* Light mode colors */
  --breadcrumb-text-light: #64748b;
  --breadcrumb-current-light: var(--sp-breadcrumb-accent, var(--accent, #0f172a));
  --breadcrumb-separator-light: #94a3b8;

  /* Dark mode colors */
  --breadcrumb-text-dark: #cbd5e1;
  --breadcrumb-current-dark: var(--sp-breadcrumb-accent-dark, var(--sp-breadcrumb-accent, var(--accent, #f8fafc)));
  --breadcrumb-separator-dark: #94a3b8;
}

/* Cycle accents. Resource pages already carry data-schoolep-cycle.
   Subject pages fall back to --accent from their subject CSS. */
html[data-schoolep-cycle="p"] {
  --sp-breadcrumb-accent: #16a34a;
  --sp-breadcrumb-accent-dark: #4ade80;
}

html[data-schoolep-cycle="m"] {
  --sp-breadcrumb-accent: #e97800;
  --sp-breadcrumb-accent-dark: #fb923c;
}

html[data-schoolep-cycle="s"] {
  --sp-breadcrumb-accent: #8e24aa;
  --sp-breadcrumb-accent-dark: #c084fc;
}

.content-area .sp-breadcrumbs,
html[data-schoolep-resource] .content-area .sp-breadcrumbs {
  --breadcrumb-accent: var(--sp-breadcrumb-accent, var(--portal-accent, var(--accent, var(--primary-light, #4361ee))));
  --breadcrumb-accent-dark: var(--sp-breadcrumb-accent-dark, var(--portal-accent, var(--accent, #93c5fd)));

  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  gap: var(--breadcrumb-pc-gap);
  min-height: 18px;
  margin: 0 0 var(--breadcrumb-pc-margin-bottom);
  padding: 0;
  color: var(--breadcrumb-text-light);
  /* Default fallback uses French metrics. Language rules below override it. */
  font-size: var(--breadcrumb-pc-font-size-fr);
  font-weight: var(--breadcrumb-font-weight);
  line-height: var(--breadcrumb-pc-line-height-fr);
  text-align: start;
}

/* ================================================================
   PC LANGUAGE-SPECIFIC TYPOGRAPHY
   Arabic is slightly smaller because Arabic glyphs look visually larger.
   ================================================================ */
html[lang="fr"] .content-area .sp-breadcrumbs,
html[lang="fr"][data-schoolep-resource] .content-area .sp-breadcrumbs {
  font-size: var(--breadcrumb-pc-font-size-fr);
  line-height: var(--breadcrumb-pc-line-height-fr);
}

html[lang="ar"] .content-area .sp-breadcrumbs,
html[lang="ar"][data-schoolep-resource] .content-area .sp-breadcrumbs {
  font-size: var(--breadcrumb-pc-font-size-ar);
  line-height: var(--breadcrumb-pc-line-height-ar);
}

html.dark-mode .content-area .sp-breadcrumbs,
body.dark-mode .content-area .sp-breadcrumbs,
html[data-schoolep-resource].dark-mode .content-area .sp-breadcrumbs,
html.dark-mode[data-schoolep-resource] .content-area .sp-breadcrumbs {
  color: var(--breadcrumb-text-dark);
}

.content-area .sp-breadcrumbs > a,
.content-area .sp-breadcrumbs > strong,
.content-area .sp-breadcrumbs > .bc-current,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > a,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > strong,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > .bc-current {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--breadcrumb-pc-icon-text-gap);
  min-width: 0;
  max-width: 100%;
  min-height: 1.15em;
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
  vertical-align: middle;
  transition: color 0.16s ease;
}

.content-area .sp-breadcrumbs > a {
  cursor: pointer;
}

.content-area .sp-breadcrumbs > a:hover,
.content-area .sp-breadcrumbs > a:active,
.content-area .sp-breadcrumbs > a:focus-visible,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > a:hover,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > a:active,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > a:focus-visible {
  color: var(--breadcrumb-accent);
  outline: none;
  text-decoration: none;
}

html.dark-mode .content-area .sp-breadcrumbs > a:hover,
html.dark-mode .content-area .sp-breadcrumbs > a:active,
html.dark-mode .content-area .sp-breadcrumbs > a:focus-visible,
body.dark-mode .content-area .sp-breadcrumbs > a:hover,
body.dark-mode .content-area .sp-breadcrumbs > a:active,
body.dark-mode .content-area .sp-breadcrumbs > a:focus-visible,
html[data-schoolep-resource].dark-mode .content-area .sp-breadcrumbs > a:hover,
html[data-schoolep-resource].dark-mode .content-area .sp-breadcrumbs > a:active,
html[data-schoolep-resource].dark-mode .content-area .sp-breadcrumbs > a:focus-visible,
html.dark-mode[data-schoolep-resource] .content-area .sp-breadcrumbs > a:hover,
html.dark-mode[data-schoolep-resource] .content-area .sp-breadcrumbs > a:active,
html.dark-mode[data-schoolep-resource] .content-area .sp-breadcrumbs > a:focus-visible {
  color: var(--breadcrumb-accent-dark);
}

.content-area .sp-breadcrumbs > strong,
.content-area .sp-breadcrumbs > .bc-current,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > strong,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > .bc-current {
  color: var(--breadcrumb-accent);
  font-weight: var(--breadcrumb-current-font-weight);
}

html.dark-mode .content-area .sp-breadcrumbs > strong,
html.dark-mode .content-area .sp-breadcrumbs > .bc-current,
body.dark-mode .content-area .sp-breadcrumbs > strong,
body.dark-mode .content-area .sp-breadcrumbs > .bc-current,
html[data-schoolep-resource].dark-mode .content-area .sp-breadcrumbs > strong,
html[data-schoolep-resource].dark-mode .content-area .sp-breadcrumbs > .bc-current,
html.dark-mode[data-schoolep-resource] .content-area .sp-breadcrumbs > strong,
html.dark-mode[data-schoolep-resource] .content-area .sp-breadcrumbs > .bc-current {
  color: var(--breadcrumb-accent-dark);
}

.content-area .sp-breadcrumbs .schoolep-breadcrumb-icon,
.content-area .sp-breadcrumbs i.schoolep-breadcrumb-icon,
.content-area .sp-breadcrumbs i.schoolep-breadcrumb-icon::before,
.content-area .sp-breadcrumbs > a > i,
.content-area .sp-breadcrumbs > strong > i,
.content-area .sp-breadcrumbs > .bc-current > i,
.content-area .sp-breadcrumbs > a > .mdi,
.content-area .sp-breadcrumbs > strong > .mdi,
.content-area .sp-breadcrumbs > .bc-current > .mdi,
.content-area .sp-breadcrumbs svg.schoolep-breadcrumb-icon,
html[data-schoolep-resource] .content-area .sp-breadcrumbs .schoolep-breadcrumb-icon,
html[data-schoolep-resource] .content-area .sp-breadcrumbs i.schoolep-breadcrumb-icon,
html[data-schoolep-resource] .content-area .sp-breadcrumbs i.schoolep-breadcrumb-icon::before,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > a > i,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > strong > i,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > .bc-current > i,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > a > .mdi,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > strong > .mdi,
html[data-schoolep-resource] .content-area .sp-breadcrumbs > .bc-current > .mdi,
html[data-schoolep-resource] .content-area .sp-breadcrumbs svg.schoolep-breadcrumb-icon {
  position: relative;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--breadcrumb-pc-icon-size);
  width: var(--breadcrumb-pc-icon-size);
  height: var(--breadcrumb-pc-icon-size);
  min-width: var(--breadcrumb-pc-icon-size);
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: 1em;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(var(--breadcrumb-pc-icon-y));
}

.content-area .sp-breadcrumbs .sep,
html[data-schoolep-resource] .content-area .sp-breadcrumbs .sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  color: var(--breadcrumb-separator-light);
  font-size: 1em;
  line-height: 1;
  opacity: 0.72;
  user-select: none;
}

html.dark-mode .content-area .sp-breadcrumbs .sep,
body.dark-mode .content-area .sp-breadcrumbs .sep,
html[data-schoolep-resource].dark-mode .content-area .sp-breadcrumbs .sep,
html.dark-mode[data-schoolep-resource] .content-area .sp-breadcrumbs .sep {
  color: var(--breadcrumb-separator-dark);
}

@media (max-width: 960px) {
  /* ================================================================
     MOBILE BREADCRUMB — NATURAL INLINE FLOW

     The breadcrumb behaves like one continuous sentence.
     Every part uses the remaining width before continuing naturally
     on the next line. This prevents wasted blank space and unnecessary
     third rows caused by flex-item wrapping.
     ================================================================ */

  .content-area .sp-breadcrumbs,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs {
    /*
     * Critical mobile fix:
     * block container + inline children = natural text wrapping.
     */
    display: block;

    width: 100%;
    min-width: 0;
    min-height: auto;

    margin-bottom: var(--breadcrumb-mobile-margin-bottom);

    overflow: visible;

    /*
     * Use all available line width before wrapping.
     */
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;

    text-align: start;
  }


  /* ================================================================
     MOBILE TYPOGRAPHY BY LANGUAGE
     ================================================================ */

  html[lang="fr"] .content-area .sp-breadcrumbs,
  html[lang="fr"][data-schoolep-resource] .content-area .sp-breadcrumbs {
    font-size: var(--breadcrumb-mobile-font-size-fr);
    line-height: var(--breadcrumb-mobile-line-height-fr);
  }

  html[lang="ar"] .content-area .sp-breadcrumbs,
  html[lang="ar"][data-schoolep-resource] .content-area .sp-breadcrumbs {
    font-size: var(--breadcrumb-mobile-font-size-ar);
    line-height: var(--breadcrumb-mobile-line-height-ar);
  }


  /* ================================================================
     MOBILE BREADCRUMB ITEMS

     Inline items share the same row and can break naturally at spaces.
     They no longer reserve separate flex blocks.
     ================================================================ */

  .content-area .sp-breadcrumbs > a,
  .content-area .sp-breadcrumbs > strong,
  .content-area .sp-breadcrumbs > .bc-current,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs > a,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs > strong,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs > .bc-current {
    display: inline;

    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 0;

    margin: 0;
    padding: 0;

    white-space: normal;
    overflow: visible;
    text-overflow: clip;

    line-height: inherit;
    vertical-align: baseline;
  }


  /* ================================================================
     MOBILE ICONS

     Icons remain inline with the text.
     Margin replaces flex gap because mobile items are no longer flex.
     ================================================================ */

  .content-area .sp-breadcrumbs .schoolep-breadcrumb-icon,
  .content-area .sp-breadcrumbs i.schoolep-breadcrumb-icon,
  .content-area .sp-breadcrumbs i.schoolep-breadcrumb-icon::before,
  .content-area .sp-breadcrumbs > a > i,
  .content-area .sp-breadcrumbs > strong > i,
  .content-area .sp-breadcrumbs > .bc-current > i,
  .content-area .sp-breadcrumbs > a > .mdi,
  .content-area .sp-breadcrumbs > strong > .mdi,
  .content-area .sp-breadcrumbs > .bc-current > .mdi,
  .content-area .sp-breadcrumbs svg.schoolep-breadcrumb-icon,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs .schoolep-breadcrumb-icon,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs i.schoolep-breadcrumb-icon,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs i.schoolep-breadcrumb-icon::before,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs > a > i,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs > strong > i,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs > .bc-current > i,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs > a > .mdi,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs > strong > .mdi,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs > .bc-current > .mdi,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs svg.schoolep-breadcrumb-icon {
    display: inline-block;

    width: var(--breadcrumb-mobile-icon-size);
    height: var(--breadcrumb-mobile-icon-size);
    min-width: 0;

    margin-inline-end: var(--breadcrumb-mobile-icon-text-gap);

    vertical-align: -0.12em;

    transform: translateY(var(--breadcrumb-mobile-icon-y));
  }


  /* ================================================================
     MOBILE SEPARATORS

     Separators remain in the same text flow and can wrap naturally
     with the surrounding breadcrumb text.
     ================================================================ */

  .content-area .sp-breadcrumbs .sep,
  html[data-schoolep-resource] .content-area .sp-breadcrumbs .sep {
    display: inline;

    width: auto;
    min-width: 0;

    margin-inline: var(--breadcrumb-mobile-gap);
    padding: 0;

    white-space: normal;
    vertical-align: baseline;
  }
}