/* ss_sec.css - the text pages of the site sections (Sec1, Sec2, Sec5 and
 * /intermagnet/index.html).
 *
 * Loaded after ss_index.css and ss_sec3.css, which give the page frame, the
 * header, the text navigation and the footer. This file adds only the panels
 * of link lists, drawn like the usage-rules panel and the card lists of
 * Sec3.html.
 */

.link-panel {
    background: rgba(255, 255, 255, 0.90);
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.link-panel h2 {
    color: #2c3e50;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 2px solid #3498db;
    padding-bottom: 6px;
}

.link-panel h2 a {
    color: inherit;
    text-decoration: none;
}

.link-panel h2 a:hover {
    color: #3498db;
    text-decoration: underline;
}

.link-panel p {
    margin: 0 0 12px;
}

.link-panel p a {
    color: #2980b9;
    text-decoration: none;
    transition: color 0.2s;
}

.link-panel p a:hover {
    color: #3498db;
    text-decoration: underline;
}

/* Secondary links at the foot of a page */
.link-panel-minor {
    font-size: 0.9em;
}

.link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Groups the old pages separated with a blank line */
.link-list + .link-list {
    margin-top: 16px;
}

.link-list li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
}

.link-list li:last-child {
    margin-bottom: 0;
}

.link-list li::before {
    content: "▸";
    position: absolute;
    left: 0;
    color: #3498db;
    font-weight: bold;
}

/* Several links on one line, as the old pages had them; each item is a span */
.link-list li.link-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 28px;
    row-gap: 4px;
}

.link-list a {
    color: #2980b9;
    text-decoration: none;
    transition: color 0.2s;
}

.link-list a:hover {
    color: #3498db;
    text-decoration: underline;
}

/* Nested lists, like .sub-list in ss_index.css */
.link-list ul {
    list-style: none;
    margin: 8px 0 0;
    padding-left: 15px;
    font-size: 0.95em;
}

.link-list ul li {
    margin-bottom: 6px;
}

.link-list ul li::before {
    content: "•";
    color: #95a5a6;
}

/* File sizes, authors and other remarks after a link */
.note {
    color: #7f8c8d;
    font-size: 0.9em;
}

@media (max-width: 768px) {
    .link-panel {
        padding: 15px;
    }

    .link-panel h2 {
        font-size: 1.25em;
    }
}