/* ==================================================================================================
   LAS PIERNAS — ADJUSTMENTS TO COLIBRI (colibri.css)
   --------------------------------------------------------------------------------------------------
   Rules that act on Colibri's own blocks and components: its phone menu, an Icon List placed over
   a photo… Kept apart from new_style.css, which styles the theme's own cards, boxes and ticker.
   Loaded after the theme's styles, on every page and also inside Colibri's editor (functions.php
   Section 01), so what is set here shows while editing too.
   Colibri writes its own rules with ids and long selectors, so the rules here often need
   !important: that is expected in this file (and only here and in new_style.css block 9).
   Moved here on 2026-10-26 from Colibri's Additional CSS, unchanged.
   ================================================================================================== */


/* ======================================================
    MOBILE MENU: TOTAL EXPANSION
   ====================================================== */

/* 1. Force all sub-menus to stay open */
.h-mobile-menu-container .sub-menu,
[id^="offcanvas-wrapper"] .sub-menu {
    display: block !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-left: 20px !important; /* Indents sub-items for hierarchy */
    border-left: 1px solid rgba(168, 144, 93, 0.4) !important; /* Vertical gold line */
}

/* 2. Remove the toggle arrows (since they are now redundant) */
.h-mobile-menu-container .menu-item-has-children > a svg,
[id^="offcanvas-wrapper"] .menu-item-has-children > a svg {
    display: none !important;
}

/* 3. Ensure sub-menu items have enough breathing room */
.h-mobile-menu-container .sub-menu li a {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    font-size: 0.6em !important; /* Slightly smaller for sub-items */
}

/* 4. Fix for Facebook and other icon-only links */
.h-mobile-menu-container .sub-menu li i {
    font-size: 1.2rem;
    color: #a8905d;
}

/* ======================================================
    TEACHERS' ADDRESSES OVER THE GROUP PHOTO
    One Colibri Icon List, vertical, CSS class "lp-teachers".
    Each line sits over its person on a diagonal; lines 4 and 5
    put the address on the left of the icon.
    Colibri's own margins and paddings on the list: all reset (0).
   ====================================================== */

/* 1. NO WRAPPING — every line on one line, whatever element Colibri puts the text in */
.lp-teachers,
.lp-teachers * {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    max-width: none !important;
}

/* 2. NOTHING CUT OFF — neither the list nor the Colibri column and row around it clip a line */
.lp-teachers,
.lp-teachers *,
.h-column:has(.lp-teachers),
.h-column:has(.lp-teachers) .h-column__inner,
.h-column:has(.lp-teachers) .h-column__content,
.h-row:has(.lp-teachers) {
    overflow: visible !important;
}

/* 3. THE LIST AS WIDE AS ITS COLUMN (the positions below are percentages of that width) */
.lp-teachers,
.lp-teachers ul {
    width: 100% !important;
}

.lp-teachers li {
    width: max-content !important;
}

/* 4. THE DIAGONAL — lines 1–3 from the left edge, stepping right */
.lp-teachers li:nth-child(1) { margin-left: 11% !important; }   /* Marie-Josée */
.lp-teachers li:nth-child(2) { margin-left: 28% !important; }   /* Manu */
.lp-teachers li:nth-child(3) { margin-left: 48% !important; }   /* Nella */

/* lines 4–5 from the right edge, address then icon */
.lp-teachers li:nth-child(4) { margin-left: auto !important; margin-right: 30% !important; }   /* François */
.lp-teachers li:nth-child(5) { margin-left: auto !important; margin-right: 13% !important; }   /* Francine */

.lp-teachers li:nth-child(n+4) .list-item-text-wrapper {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-end !important;
}

.lp-teachers li:nth-child(n+4) .list-text {
    text-align: right !important;
}

/* 5. WHITE, READABLE OVER THE PHOTO; YELLOW UNDER THE POINTER */
.lp-teachers .item-link,
.lp-teachers .list-text {
    color: #ffffff !important;
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9), 0px 0px 2px rgba(0, 0, 0, 0.9) !important;
}

.lp-teachers .item-link:hover span {
    color: #ffeb3b !important;
}

/* ======================================================
    THE CONTACT DETAILS IN THE TICKER (new header)
    site.js copies the top bar's Icon List (CSS class
    "lp-ticker-contact") whole into the scrolling ticker.
    Its colours, fonts, sizes and hover stay Colibri's
    (change them in Colibri); only its layout is set here:
    one line, as wide as its content, no outer spacing.
   ====================================================== */
.new-lp-ticker__colibri,
.new-lp-ticker__colibri ul {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.new-lp-ticker__colibri li {
    flex: none !important;
}