/* ══════════════════════════════════════════════════════════
   SERVER INFO CONTENT
   How a server info article reads, on top of news-content.css.
   Shared by /about and the editor of /about-admin, so what the
   administrator sees is what players get. Articles carry no
   classes (the sanitizer removes them), so everything here is
   styled by tag: h2 is the ornamental section title, h3 the gold
   subheading, tables the reference grids with item pictures.
══════════════════════════════════════════════════════════ */
.info-content {
    color: #e2d5bf;
    font-family: 'Manrope', var(--font-body);
    font-size: 0.95rem;
}

.info-content h2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.2em 0 1em;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: uppercase;
    color: #f2c14e;
}

.info-content h2::before,
.info-content h2::after {
    content: '';
    flex: 1;
    min-width: 1.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(242,193,78,0.55));
}

.info-content h2::after { background: linear-gradient(270deg, transparent, rgba(242,193,78,0.55)); }

.info-content h3 {
    margin: 1.6em 0 0.6em;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    color: #f2c14e;
}

.info-content h4 { font-family: inherit; color: #f6d888; }

.info-content strong,
.info-content b { color: #fff4dc; }

.info-content li::marker { color: #f2c14e; }

.info-content blockquote {
    padding: 0.85em 1.2em;
    border: 1px solid rgba(242,193,78,0.25);
    border-left: 3px solid #f2c14e;
    border-radius: 0 10px 10px 0;
    background: rgba(242,193,78,0.07);
    color: #e9dcc6;
}

/* Tables fill the article and read like the in-game grids; on phones they scroll sideways. */
.info-content table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(214,160,60,0.30);
    font-size: 0.9rem;
}

.info-content th,
.info-content td {
    padding: 0.6em 0.8em;
    border: 1px solid rgba(214,160,60,0.18);
    text-align: center;
    vertical-align: middle;
}

.info-content th {
    background: rgba(242,193,78,0.10);
    color: #f2c14e;
    font-weight: 700;
}

.info-content tbody tr:nth-child(even) td { background: rgba(255,255,255,0.025); }
.info-content tr:hover td { background: rgba(242,193,78,0.05); }

/* Item pictures sit on the text line inside cells and paragraphs. The site's item icons carry a
   wide transparent margin, so inline ones overlap the lines around them instead of pushing them
   apart. */
.info-content td img,
.info-content p img[width],
.info-content li img[width] {
    display: inline-block;
    vertical-align: middle;
}

.info-content p img[width],
.info-content li img[width] { margin: -14px -6px; }

/* Collapsible lists (the drops of each box): the summary is a bar that opens the list under it. */
.info-content details {
    margin: 0 0 0.6em;
    border: 1px solid rgba(214,160,60,0.30);
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
}

.info-content summary {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45em 0.9em;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.info-content summary::-webkit-details-marker { display: none; }

.info-content summary::after {
    content: '\f078';
    margin-left: auto;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.8rem;
    color: #f2c14e;
    transition: transform 0.2s;
}

.info-content details[open] > summary::after { transform: rotate(180deg); }
.info-content summary:hover { background: rgba(242,193,78,0.06); }
.info-content summary small { color: #b8a98f; }

.info-content summary img {
    margin: -16px -8px;
    flex-shrink: 0;
}

.info-content details > :not(summary) { margin: 0.4em 0.9em 0.9em; }
.info-content details > table { width: calc(100% - 1.8em); }

/* Item pictures are drawn at their inventory size, so a long weapon would make its row four times as
   tall as a ring. Inside a list they all get the same height. */
.info-content details td { padding: 0.25em 0.7em; }
.info-content details td img { width: auto; height: 56px; }

@media (max-width: 640px) {
    .info-content table {
        display: block;
        overflow-x: auto;
    }
}