/* Hub pages (navigation/resources.html, navigation/learning.html): the menu list, admin controls and edit modals. */

#background-canvas { position: fixed; top: 30%; left: 0; z-index: -1; }

/* width / margin come from the shared .content (styles/stylesheet.css) */
.content { margin-bottom: 5%; }

/* A visible box around the hub's content — intro, tags, menus and the "More" note. */
.resources-container {
  border: 1px solid #ddd;
  background: #f5f5f5;
  padding: 28px 32px 32px;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .resources-container { padding: 20px 18px 24px; }
}

/* ── Admin controls ── */
.admin-only { display: none; }
body.admin-mode .admin-only { display: inline-flex; }

.adm-btn {
  background: none; border: none; cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: 2px;
  font-family: 'Optima', arial, sans-serif;
  min-height: unset !important; min-width: unset !important;
}
.adm-add  { color: #1d60c0; border: 1px solid rgba(0,80,200,0.25); background: rgba(0,80,200,0.06); }
.adm-add:hover  { background: rgba(0,80,200,0.14); }
.adm-del  { color: #c00; border: 1px solid rgba(200,0,0,0.2); background: rgba(200,0,0,0.05); }
.adm-del:hover  { background: rgba(200,0,0,0.14); }
.adm-edit { color: #666; border: 1px solid #ddd; }
.adm-edit:hover { background: #f0f0f0; }

/* Inline icon controls */
.adm-plus {
  background: none; border: none; cursor: pointer;
  color: #4caf50; font-size: 18px; line-height: 1;
  padding: 0 2px; font-weight: 300;
  min-height: unset !important; min-width: unset !important;
}
.adm-plus:hover { color: #2e7d32; }
.adm-text-del {
  background: none; border: none; cursor: pointer;
  color: #c00; font-size: 11px; letter-spacing: 0.04em;
  padding: 0; font-family: 'Optima', arial, sans-serif;
  min-height: unset !important; min-width: unset !important;
  opacity: 0.7;
}
.adm-text-del:hover { opacity: 1; text-decoration: underline; }

.section-header-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.section-header-row .section-header { margin-bottom: 0; }

/* "My Links" is a link back to the tree's original view (resetTree in hub.js) — same look as the plain
   (non-link) section headers elsewhere, just with a hover colour so it reads as clickable. */
.section-header-link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: color 0.2s ease; }
.section-header-link:hover, .section-header-link:focus-visible { color: #45a049; }

.item-admin-btns {
  display: none; gap: 4px; position: absolute; top: 6px; right: 6px;
}
body.admin-mode .menu-item:hover .item-admin-btns,
body.admin-mode .fav-item:hover .item-admin-btns { display: flex; }

.add-section-row {
  display: none; margin-top: 30px; padding-top: 20px;
  border-top: 1px dashed #ddd;
}
body.admin-mode .add-section-row { display: flex; gap: 10px; align-items: center; }

/* ── Modal ── */
.res-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.4); z-index: 600;
  align-items: center; justify-content: center;
}
.res-modal.active { display: flex; }
.res-modal-box {
  background: #fff; padding: 28px 32px 30px;
  width: 420px; max-width: 94vw;
  border: 1px solid #ddd;
}
.res-modal-box h3 { font-weight: 300; font-size: 19px; margin: 0 0 18px; color: #444; }
.res-modal-box label { display: block; font-size: 12px; color: #999; margin: 12px 0 3px; }
.res-modal-box input, .res-modal-box select, .res-modal-box textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid #ddd; padding: 7px 9px;
  font-family: 'Optima', arial, sans-serif; font-size: 14px;
  color: #444; background: #fafafa; outline: none;
  min-height: unset !important;
}
.res-modal-box textarea { resize: vertical; min-height: 50px; }
.res-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.res-modal-save {
  background: rgba(210,245,250,0.5); border: 1px solid rgba(143,97,77,0.35);
  color: #1d60c0; font-family: 'Optima', arial, sans-serif;
  font-size: 14px; padding: 8px 20px; cursor: pointer;
  min-height: unset !important;
}
.res-modal-save:hover { background: #c2e2e787; }
.res-modal-cancel {
  background: none; border: 1px solid #ddd; color: #999;
  font-family: 'Optima', arial, sans-serif;
  font-size: 14px; padding: 8px 16px; cursor: pointer;
  min-height: unset !important;
}
.res-modal-cancel:hover { border-color: #aaa; color: #555; }

/* ── Layout of the groups (tablet and up) ──
   The groups (Quick Links, My Favourites, More) take the full width of the container, evenly spaced. The page's
   own intro text (#hub-intro) isn't one of them — it's read out of the DOM and shown inside the tree instead
   (treeHubIntroCol), so the element it lives in here stays hidden. */
@media (min-width: 769px) {
    body.p-resources .section-header-row .section-header { flex: 1; }
    body.p-resources .learning-note { margin: 0 16px; }

    .section-block { margin-top: 36px; margin-bottom: 0; }
    .section-block .section-header { margin: 0; }
    .section-header-row { margin-bottom: 18px; }
}

/* ── Standard menu list: title only, nested by indent. Used for Guides. ── */
.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-item {
    position: relative;
    border-bottom: 1px solid #e2e2e2;
}
.menu-item:last-child { border-bottom: none; }
.menu-link {
    display: block;
    padding: 10px 6px;
    font-family: 'Optima', arial, sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: #444;
    text-decoration: none;
    transition: color 0.2s ease, padding-left 0.2s ease;
}
.menu-link:hover,
.menu-link:focus-visible { color: #45a049; padding-left: 12px; }

/* ── My Favourites: smaller and set in from both sides than a Guides-style .menu-list, each item marked off by a
   short faint rule (fixed-width, narrower than the text) instead of a full-width border. ── */
.fav-list {
    list-style: none;
    margin: 0;
    padding: 0 14% 0 20px;
}
.fav-item { position: relative; padding: 7px 6px; }
.fav-item + .fav-item::before {
    content: "";
    display: block;
    width: 26px;
    height: 1px;
    margin: 0 0 7px 6px;
    background: #ddd;
}
.fav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: 'Optima', arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #666666;
    text-decoration: underline;
    text-decoration-color: #ccc;
    text-underline-offset: 3px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
.fav-link::after {
    content: "\2192";
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.fav-link:hover, .fav-link:focus-visible {
    color: #45a049;
    text-decoration-color: currentColor;
}
.fav-link:hover::after, .fav-link:focus-visible::after { opacity: 1; transform: translateX(0); }

/* ── Inline column tree: the My Links pages' real content, browsable without leaving the hub — the same shape and
   look as a category page's own tree (navigation/resources/links.js + links.css's .res-tree/.res-col), just with
   an extra first column for picking a page (grouped Professional / Misc.). Re-declared here rather than pulled in
   from links.css so this page isn't also carrying that file's category-page-only rules (the fixed 3-column grid,
   the picture-and-description intro, admin row buttons, …).
   Column count varies (3 to 5 — Page → Topic? → Section → Sub-section? → Links), so this uses flex instead of the
   category pages' fixed grid, with the last (links) column taking whatever space is left. */
.res-tree-hub {
    display: flex;
    align-items: flex-start;
    margin-top: 4px;
    padding-left: 6px;
    overflow-x: auto;
    scroll-behavior: smooth;
}
.res-tree-hub > .res-col { flex: 0 0 190px; min-width: 0; }
.res-tree-hub > .res-col-links { flex: 1 1 auto; padding-left: 14px; }
.res-tree-hub .res-col + .res-col {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #ececec;
}
/* the gap between columns narrows a little at each further level too, not just the columns themselves — so a
   full 5-column tree (Page > Topic > Section > Sub-section > Links) fits without falling back to scrolling */
.res-tree-hub > .res-col:nth-child(3) { margin-left: 9px; padding-left: 9px; }
.res-tree-hub > .res-col:nth-child(4) { margin-left: 7px; padding-left: 7px; }
.res-tree-hub > .res-col:nth-child(5) { margin-left: 6px; padding-left: 6px; }

/* Column headers and list items stay on one line rather than wrapping — a long name is more legible truncated
   with an ellipsis than broken across two or three lines, especially once a column's reduced. */
.res-tree-hub .res-link,
.res-tree-hub .res-title,
.res-tree-hub .res-col-cats .res-head {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.res-tree-hub .res-chevron-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Only the column you're actively choosing from stays full size — every column with something open to its
   direct right reduces, once, to a shared narrower width (not progressively narrower with each further level) —
   including, now, the column you just picked from, once that pick is showing real links rather than just a
   "choose one to continue" hint (hub.js's hasSelection). The pages column reduces the same way as the rest (its
   own pages stay listed, just smaller — see treePagesCol in hub.js), just with its header swapped for a
   "‹ Professional" / "‹ Misc." link back to the full picker. The links column just takes whatever's left over —
   no minimum width — since the picker columns ahead of it are already narrow enough that it's never short of room.
   Both directions — shrinking (going deeper) and growing back (backing out through a "‹") — transition, each
   easing from a "before" state supplied by @starting-style: every column is a freshly-inserted element on every
   render (the tree redraws wholesale each click), so a plain transition alone has nothing of its own to
   interpolate from. This only fires for a column whose reduced/full state actually changed since the last render
   (hub.js marks anything unchanged .res-col-static, with no transition-delay either): picking a different item
   in an already-reduced list, or backing out through one, doesn't resize that column at all, so it shouldn't
   replay a resize transition that isn't really happening. When more than one column's state changes at once,
   hub.js staggers their transition-delay right to left — the newest/rightmost change settles first, each column
   further left starting a little after — instead of the whole row shifting all together. */
@media (min-width: 769px) {
    .res-tree-hub > .res-col:not(.res-col-static) { transition: flex-basis 0.32s cubic-bezier(0.3, 0.1, 0.2, 1); }

    .res-tree-hub > .res-col-reduced { flex-basis: 116px; }
    @starting-style {
        .res-tree-hub > .res-col-reduced:not(.res-col-static) { flex-basis: 190px; }
        .res-tree-hub > .res-col:not(.res-col-reduced):not(.res-col-static):not(.res-col-links) { flex-basis: 116px; }
    }
}

/* The reduced pages column's header: a link back to the full picker (clicking it re-selects the open page, which
   toggles it back off) instead of the plain, non-interactive group label the full column uses — but in the same
   position, with the same underline, as that full-column header (.res-col-cats .res-head just above); only the
   leading chevron and the click/hover behaviour are new. */
.res-tree-hub .res-chevron-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #999999;
    text-decoration: none;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 8px;
    margin-bottom: 12px;
    transition: color 0.2s ease;
}
.res-tree-hub .res-chevron-label::before { content: "\2039"; flex: none; font-size: 16px; line-height: 1; color: #bbb; }
.res-tree-hub .res-chevron-label:hover, .res-tree-hub .res-chevron-label:focus-visible { color: #45a049; }
.res-tree-hub .res-chevron-label:hover::before, .res-tree-hub .res-chevron-label:focus-visible::before { color: #45a049; }

.res-tree-hub .res-list { display: flex; flex-direction: column; }
.res-tree-hub .res-row { position: relative; }
.res-tree-hub .sidebar-section { margin-bottom: 22px; }
.res-tree-hub .sidebar-section:last-child { margin-bottom: 0; }

/* A reduced column's items all read at one (smaller) size — no per-item size difference, just the pick coloured
   (the shared .active rule already does that; .res-link's own colour transition stays on unconditionally, so
   the highlight still eases from one item to another even in a .res-col-static column). Both directions —
   shrinking down to that size and growing back out of it — transition, the same way and for the same reason the
   column width does above (see that comment); a .res-col-static column's items are excluded, same as its width. */
.res-tree-hub .res-link { transition: color 0.2s ease; }
.res-tree-hub > .res-col:not(.res-col-static) .res-link { transition: font-size 0.32s cubic-bezier(0.3, 0.1, 0.2, 1), color 0.2s ease; }
.res-tree-hub .res-col-reduced .res-link { font-size: 14px; }
.res-tree-hub .res-col-reduced .res-head { font-size: 14px; padding-bottom: 6px; margin-bottom: 8px; }
@starting-style {
    .res-tree-hub > .res-col-reduced:not(.res-col-static) .res-link { font-size: 18px; }
    .res-tree-hub > .res-col-reduced:not(.res-col-static) .res-head { font-size: 18px; }
    .res-tree-hub > .res-col:not(.res-col-reduced):not(.res-col-static):not(.res-col-links) .res-link { font-size: 14px; }
    .res-tree-hub > .res-col:not(.res-col-reduced):not(.res-col-static):not(.res-col-links) .res-head { font-size: 14px; }
}

/* Whichever column is currently full-size still reads a bit smaller the deeper it is — column 1's default (18px,
   from the shared .res-link rule in stylesheet.css) is the biggest, each column after it a step down — rather
   than every full column looking exactly the same regardless of how far into the tree it is. Reduced columns
   already have their own single smaller size (above) and are unaffected. */
.res-tree-hub > .res-col:nth-child(2):not(.res-col-reduced) .res-link { font-size: 16px; }
.res-tree-hub > .res-col:nth-child(3):not(.res-col-reduced) .res-link { font-size: 15px; }
.res-tree-hub > .res-col:nth-child(4):not(.res-col-reduced) .res-link { font-size: 14px; }
.res-tree-hub > .res-col:nth-child(5):not(.res-col-reduced) .res-link { font-size: 13px; }


/* Column 1's group headers ("Professional" / "Misc.") — a small-caps label, distinct from every other column's
   (bigger, title-case) header, so they read as a light grouping rather than a page/section title. */
.res-tree-hub .res-col-cats .res-head {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #999999;
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* Topics/Sections/Sub-sections headers (a page's, topic's or section's name): the "‹" back-chevron and the title
   sit on one line, and the whole header — not just the chevron — is the click target (treeBackHead in hub.js), so
   the title itself works as the same back button. .res-head/.res-title's own size+weight are otherwise inherited
   from the shared .res-head rule in stylesheet.css, same as a category page's sectionsCol/subsCol. */
.res-tree-hub .res-col-sections .res-head { display: flex; align-items: baseline; gap: 6px; }
.res-tree-hub .res-title { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
.res-tree-hub .res-head-back { cursor: pointer; transition: color 0.2s ease; }
.res-tree-hub .res-head-back:hover, .res-tree-hub .res-head-back:focus-visible { color: #45a049; }
.res-tree-hub .res-back-chevron { flex: none; font-size: 16px; line-height: 1; color: #bbb; }
.res-tree-hub .res-head-back:hover .res-back-chevron,
.res-tree-hub .res-head-back:focus-visible .res-back-chevron { color: #45a049; }
.res-tree-hub .res-open {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    color: #aaa;
    text-decoration: none;
}
.res-tree-hub .res-open:hover, .res-tree-hub .res-open:focus-visible { color: #45a049; }

/* Nothing with real links picked yet: the page's (or, once picked, its topic's) picture and description, filling
   80% of the space after the picker column(s) — centred, via padding (not width) so it doesn't fight this
   column's own flex-basis sizing above — with some room above it. */
.res-tree-hub .res-col-links.res-intro { padding: 32px 3% 0 6%; }
.res-tree-hub .res-intro-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 2px;
    background: #e6e6e6;
}
.res-tree-hub .res-intro-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.res-tree-hub .res-intro-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #bdbdbd;
}
.res-tree-hub .res-intro-placeholder svg { width: 90px; height: 60px; }
.res-tree-hub .res-intro-text { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: #666666; }

/* My Favourites, nested under the intro text in this same column (treeHubIntroCol) — its .section-block still
   gets the standard 36px top margin (separating it from the description above), but .fav-list's own left/right
   padding (tuned for when it was a full-width standalone section) is dropped in favour of the column's own
   padding, and it's held to a readable measure instead of stretching the full remaining width. */
.res-tree-hub .res-intro .fav-list { max-width: 420px; padding: 0; }

/* the final column: the selected section's (or sub-section's) own links. The header is a flex row so the title
   and the "open page" link sit inline (side by side) instead of the link falling to its own line under the
   title — flex lays out h2.res-section-title + .res-open horizontally regardless of the h2's own block display.
   The description (when there is one) still gets its own full-width line underneath. */
.res-tree-hub .res-col-links .res-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
    padding-bottom: 0;
    margin-bottom: 16px;
    border-bottom: none;
}
.res-tree-hub .res-col-links .res-head .res-sub { flex-basis: 100%; }
.res-tree-hub .res-section-title { margin: 0; font-size: 26px; font-weight: 300; color: #444444; }
.res-tree-hub .res-sub { margin: 6px 0 0; font-size: 13px; font-style: italic; color: #888f8d; }
.res-tree-hub .res-links { list-style: none; margin: 0; padding: 0; }
.res-tree-hub .res-links li { padding: 6px 0; font-size: 16px; color: #666666; }
.res-tree-hub .res-links a {
    color: #47649a;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.res-tree-hub .res-links a:hover { color: #45a049; border-bottom-color: currentColor; }

.res-tree-hub .res-subgroup { margin-top: 22px; }
.res-tree-hub .res-subhead {
    margin: 0 0 8px;
    padding-bottom: 6px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #666666;
    border-bottom: 1px solid #e4e4e4;
}

.res-tree-hub .res-hint,
.res-tree-hub .res-empty { margin: 4px 0; font-size: 13px; color: #aaa; }

/* Phones: mobile.css's shared .res-tree rules (stacking, chip rows, active-state theming) already cover this
   tree too, since it reuses the same class names — except two rules assume a category page's own title already
   names the current page/section, which isn't true here (the hub's title never changes), so both need to stay
   visible instead of collapsing away. */
@media (max-width: 768px) {
    body.m2 .res-tree-hub .res-col-cats .res-head {
        display: block !important;
    }
    /* Sections/Topics/Sub-sections headers keep their flex layout here (not display:block like the rule above) —
       they pair a back-chevron with the title, and block would drop that "‹" onto its own line. */
    body.m2 .res-tree-hub .res-col-sections .res-head {
        display: flex !important;
        align-items: baseline;
        gap: 6px;
    }
    body.m2 .res-tree-hub .res-col-cats .sidebar-section + .sidebar-section {
        display: block !important;
    }
}

/* "More" → the Learning page. Padded 20px like the tiles above, so its text lines up with theirs. */
.learning-note {
    display: block;
    box-sizing: border-box;
    padding: 10px 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    text-decoration: none;
    font-family: 'Optima', arial, sans-serif;
    color: #444;
    transition: border-color 0.28s ease;
}
.learning-note:hover { border-color: #45a049; }
.learning-note-title { display: block; font-size: 20px; font-weight: 300; }
.learning-note-text { display: block; margin-top: 2px; font-size: 17px; color: #45a049; text-decoration: none; }
.learning-note-arrow { display: inline-block; transition: transform 0.25s ease; }
.learning-note:hover .learning-note-text { text-decoration: underline; }
.learning-note:hover .learning-note-arrow { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
    .menu-link, .learning-note-arrow { transition: none; }
    .menu-link:hover { padding-left: 6px; }
}