/* =====================================================================
   Link List — view.css

   CSS variables (set inline by view.php from controller; cascade through
   .ll-outer down to .link-list and individual links):
     Typography : --ll-fs, --ll-fw, --ll-tt, --ll-ls (--ll-ff only when not using theme font1–3)
     Colors     : --ll-color, --ll-color-hover, --ll-color-active
     Layout     : --ll-gap, --ll-gap-v, --ll-grid-cols, --ll-sep-char
     Container  : --ll-mt/--ll-mr/--ll-mb/--ll-ml,
                  --ll-pt/--ll-pr/--ll-pb/--ll-pl,
                  --ll-bg, --ll-radius, --ll-mw, --ll-w

   SPECIFICITY: themes routinely target `#main a`, `#main ul`, etc.
   Every rule that competes with a theme primitive uses the
   `#page-wrapper #main X, X` dual-selector pattern (matches the
   submit-button trick from the drop_us_a_line block) so per-block
   typography always wins.

   Outer wrapper: same margin->padding translation pattern as
   drop_us_a_line — `.ll-outer` uses padding-top/bottom for the user's
   "margin" values, sidestepping margin-collapse with parent containers.
   ===================================================================== */

/* ---- Outer wrapper (margin -> padding) ---------------------------- */
#page-wrapper #main .ll-outer,
.ll-outer {
    box-sizing: border-box;
    padding-top: var(--ll-mt, 0);
    padding-bottom: var(--ll-mb, 0);
    padding-left: var(--ll-ml, 0);
    padding-right: var(--ll-mr, 0);
    margin: 0;
}

/* ---- The list container ------------------------------------------- */
#page-wrapper #main .link-list,
.link-list {
    box-sizing: border-box;
    list-style: none;
    margin: 0 auto;
    padding-top: var(--ll-pt, 0);
    padding-right: var(--ll-pr, 0);
    padding-bottom: var(--ll-pb, 0);
    padding-left: var(--ll-pl, 0);
    background: var(--ll-bg, transparent);
    border-radius: var(--ll-radius, 0);
    width: var(--ll-w, auto);
    max-width: var(--ll-mw, none);
    /* Per-block typography defaults via cascade. */
    font-size: var(--ll-fs, inherit);
    font-weight: var(--ll-fw, inherit);
    text-transform: var(--ll-tt, none);
    letter-spacing: var(--ll-ls, normal);
    color: var(--ll-color, inherit);
}

/* Only force font-family via vars when not using a theme font slot (font1–3 on ul). */
#page-wrapper #main .link-list:not([data-ll-theme-font]),
.link-list:not([data-ll-theme-font]) {
    font-family: var(--ll-ff, inherit);
}

/* Container alignment when the user pinned a max-width. With auto-margins
   the default is centered; the modifier classes flip that. */
.link-list.ll-align-left   { margin-left: 0;    margin-right: auto; }
.link-list.ll-align-right  { margin-left: auto; margin-right: 0; }
.link-list.ll-align-center { margin-left: auto; margin-right: auto; }

/* ---- Layout: inline (flex row, wraps) ----------------------------- */
.link-list--inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--ll-gap, 20px);
    row-gap: var(--ll-gap-v, 10px);
    align-items: baseline;
}
.link-list--inline.ll-no-wrap { flex-wrap: nowrap; }

/* Inline content alignment via justify-content */
.link-list--inline.ll-align-left   { justify-content: flex-start; }
.link-list--inline.ll-align-center { justify-content: center; }
.link-list--inline.ll-align-right  { justify-content: flex-end; }

/* ---- Layout: row (single line, no wrap) --------------------------- */
.link-list--row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: var(--ll-gap, 20px);
    align-items: baseline;
    overflow-x: auto;  /* graceful: scroll horizontally if too narrow */
}
.link-list--row.ll-align-left   { justify-content: flex-start; }
.link-list--row.ll-align-center { justify-content: center; }
.link-list--row.ll-align-right  { justify-content: flex-end; }

/* ---- Layout: column (vertical stack) ------------------------------ */
.link-list--column {
    display: flex;
    flex-direction: column;
    row-gap: var(--ll-gap-v, 10px);
}
.link-list--column.ll-align-left   { align-items: flex-start; text-align: left; }
.link-list--column.ll-align-center { align-items: center;     text-align: center; }
.link-list--column.ll-align-right  { align-items: flex-end;   text-align: right; }

/* ---- Layout: grid (multi-column) ---------------------------------- */
.link-list--grid {
    display: grid;
    grid-template-columns: repeat(var(--ll-grid-cols, 3), minmax(0, 1fr));
    column-gap: var(--ll-gap, 20px);
    row-gap: var(--ll-gap-v, 10px);
}
.link-list--grid.ll-align-left   { text-align: left; }
.link-list--grid.ll-align-center { text-align: center; }
.link-list--grid.ll-align-right  { text-align: right; }

/* ---- Layout: justify (flex with space-between) -------------------- */
.link-list--justify {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: var(--ll-gap, 20px);
    row-gap: var(--ll-gap-v, 10px);
    align-items: baseline;
}
.link-list--justify.ll-no-wrap { flex-wrap: nowrap; }

/* Mobile fallback: collapse multi-column layouts to a stack on narrow viewports. */
@media (max-width: 600px) {
    .link-list--grid,
    .link-list--row.ll-collapse-mobile {
        grid-template-columns: 1fr;
        flex-wrap: wrap;
    }
}

/* ---- Entries (li) and links (a) ----------------------------------- */
.link-list .ll-entry {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
}
.link-list--column .ll-entry,
.link-list--grid .ll-entry { display: block; }

#page-wrapper #main .link-list .ll-link,
.link-list .ll-link {
    color: var(--ll-color, inherit);
    text-decoration: none;
    font-size: var(--ll-fs, inherit);
    font-weight: var(--ll-fw, inherit);
    text-transform: var(--ll-tt, none);
    letter-spacing: var(--ll-ls, normal);
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#page-wrapper #main .link-list:not([data-ll-theme-font]) .ll-link,
.link-list:not([data-ll-theme-font]) .ll-link {
    font-family: var(--ll-ff, inherit);
}

/* Underline modes */
.link-list.ll-underline-none .ll-link    { text-decoration: none; }
.link-list.ll-underline-always .ll-link  { text-decoration: underline; }
.link-list.ll-underline-hover .ll-link   { text-decoration: none; }
.link-list.ll-underline-hover .ll-link:hover,
.link-list.ll-underline-hover .ll-link:focus { text-decoration: underline; }

/* Hover */
#page-wrapper #main .link-list .ll-link:hover,
#page-wrapper #main .link-list .ll-link:focus,
.link-list .ll-link:hover,
.link-list .ll-link:focus {
    color: var(--ll-color-hover, var(--ll-color, inherit));
    outline: none;
}

/* Active / highlighted state */
#page-wrapper #main .link-list .ll-entry--active .ll-link,
#page-wrapper #main .link-list .ll-entry--highlighted .ll-link,
.link-list .ll-entry--active .ll-link,
.link-list .ll-entry--highlighted .ll-link {
    color: var(--ll-color-active, var(--ll-color, inherit));
}
.link-list.ll-active-bold .ll-entry--active .ll-link,
.link-list.ll-active-bold .ll-entry--highlighted .ll-link {
    font-weight: 700;
}

/* ---- Icons -------------------------------------------------------- */
.link-list .ll-icon {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: -0.05em;
    opacity: 0.75;
    transition: opacity 0.15s ease;
}
.link-list .ll-link:hover .ll-icon { opacity: 1; }

.link-list .ll-icon--external {
    /* "external link" arrow */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M6 1h9v9h-2V4.5L4.5 13 3 11.5 11.5 3H6V1z'/><path d='M3 4h3v2H4v6h6v-2h2v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/></svg>");
}
.link-list .ll-icon--file {
    /* document icon */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'><path d='M3 1h7l4 4v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z'/><path fill='%23ffffff' d='M9 1v4h4'/></svg>");
}

/* ---- Separators (pseudo-element on each non-last entry) ----------- */
/* Inserted as a pseudo on the LI, sitting outside the link so its
   color/styling can differ from link state. The flex/grid layouts
   already provide spacing via gap; the pseudo just adds the glyph in
   the middle of the flex gap (visually between consecutive entries).
   For pure column / grid layouts the separator goes BELOW each item
   instead, since horizontal pipes don't make sense there. */
.link-list[data-sep="none"] .ll-entry::after { content: none; }

.link-list[data-sep="pipe"]   .ll-entry:not(:last-child)::after { content: '|'; }
.link-list[data-sep="bullet"] .ll-entry:not(:last-child)::after { content: '\2022'; /* • */ }
.link-list[data-sep="dash"]   .ll-entry:not(:last-child)::after { content: '\2014'; /* — */ }
.link-list[data-sep="slash"]  .ll-entry:not(:last-child)::after { content: '/'; }
.link-list[data-sep="custom"] .ll-entry:not(:last-child)::after { content: var(--ll-sep-char, ''); }

.link-list[data-sep]:not([data-sep="none"]) .ll-entry::after {
    color: currentColor;
    opacity: 0.45;
    margin-left: var(--ll-gap, 20px);
    /* The flex `column-gap` already spaces siblings — we shift the
       separator into the negative half of that gap so it lands
       visually centered between two adjacent links. */
    margin-right: calc(var(--ll-gap, 20px) * -0.5);
    margin-left: calc(var(--ll-gap, 20px) * 0.5);
    pointer-events: none;
}

/* In column / grid layouts: separator lives BELOW the entry, full width. */
.link-list--column[data-sep]:not([data-sep="none"]) .ll-entry,
.link-list--grid[data-sep]:not([data-sep="none"]) .ll-entry {
    position: relative;
}
.link-list--column[data-sep]:not([data-sep="none"]) .ll-entry:not(:last-child)::after,
.link-list--grid[data-sep]:not([data-sep="none"]) .ll-entry:not(:last-child)::after {
    display: block;
    margin: 6px 0 0 0;
    text-align: inherit;
    font-size: 0.9em;
}