/**
 * COMMON STYLE — Shared patterns for legacy-content pages
 *
 * Scoped to `.legacy-content` — add this class to content wrappers
 * that need base.css overrides, yellow link styling, float table
 * fixes, and other shared patterns.
 *
 * Reference: year.css (approved design)
 * Used by: year, country, content, gallery, links, media, articles, contact pages
 */

/* ===== 1. BASE CSS OVERRIDES ===== */

/* Reset base.css table width:100% — respect legacy width attributes */
.legacy-content table {
    width: auto;
    max-width: 100%;
    margin-bottom: 0;
}

/* Override base.css display:block on images — legacy images are inline */
.legacy-content img {
    display: inline;
	border-radius: 10px;
}

/* Remove base.css td borders from layout tables */
.legacy-content td {
    border-bottom: none;
	padding: var(--space-3);
}

/* ===== 2. YELLOW LINK STYLING ===== */

/* Yellow underline on all text links.
   :where() gives zero specificity so shared components (az-nav, prev-next-nav,
   bottom-nav) are never overridden by this page-level link styling. */
:where(.legacy-content) a {
    color: var(--hp-black);
    text-decoration: underline;
    text-decoration-color: var(--hp-yellow);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

:where(.legacy-content) a:hover {
    color: var(--hp-yellow-dark);
}

/* Remove underline from image links */
.legacy-content a:has(img) {
    text-decoration: none;
}

/* ===== 3. FLOAT TABLE FIXES ===== */

/* Float tables — collapse spacing, min-content width so table matches image width */
.legacy-content table[align="right"],
.legacy-content table[align="left"] {
    border-collapse: collapse;
    border-spacing: 0;
    width: min-content;
}

/* When a cell has multiple images, prevent wrapping so they stay in a row.
   min-content on the table then sizes to the nowrap image row width,
   while caption text below still wraps tightly. */
.legacy-content table[align="right"] td:has(> img + img),
.legacy-content table[align="left"] td:has(> img + img),
.legacy-content table[align="right"] td:has(> a + a),
.legacy-content table[align="left"] td:has(> a + a) {
    white-space: nowrap;
}

.legacy-content table[align="right"] {
    float: right;
    margin: 0.5rem 0 1rem 0.5rem;
    max-width: 50%;
}

.legacy-content table[align="left"] {
    float: left;
    margin: 0.5rem 0.5rem 1rem 0;
    max-width: 50%;
}

.legacy-content table[align="right"]:not([cellpadding]) td,
.legacy-content table[align="left"]:not([cellpadding]) td {
    padding: 5px;
}

/* Image cells in float tables — zero padding so images sit flush */
.legacy-content table[align="right"]:not([cellpadding]) td:has(> img),
.legacy-content table[align="left"]:not([cellpadding]) td:has(> img),
.legacy-content table[align="right"]:not([cellpadding]) td:has(> a > img),
.legacy-content table[align="left"]:not([cellpadding]) td:has(> a > img) {
    padding: 0;
}

.legacy-content table[align="right"] td,
.legacy-content table[align="left"] td {
    border-bottom: none;
}

/* Float data tables (no images) — text-only tables need auto width, not min-content,
   so the browser respects HTML column widths and wraps text naturally.
   Also restore cell padding for readable spacing. */
.legacy-content table[align="right"]:not(:has(img)),
.legacy-content table[align="left"]:not(:has(img)) {
    width: auto;
}

.legacy-content table[align="right"]:not(:has(img)) td,
.legacy-content table[align="left"]:not(:has(img)) td {
    padding: 0.25rem 0.5rem;
}

/* Images in float tables — max-width:none so images keep their HTML width
   during min-content calculation, preventing table collapse to zero width.
   display:block only for sole images (only-child / only-child link wrapper).
   When multiple images share one cell, they stay inline and sit in a row. */
.legacy-content table[align="right"] img,
.legacy-content table[align="left"] img {
    max-width: none;
    vertical-align: bottom;
}

.legacy-content table[align="right"] td > img:only-child,
.legacy-content table[align="left"] td > img:only-child,
.legacy-content table[align="right"] td > a:only-child > img,
.legacy-content table[align="left"] td > a:only-child > img {
    display: block;
}

/* Only force height:auto when no HTML height attribute is present */
.legacy-content table[align="right"] img:not([height]),
.legacy-content table[align="left"] img:not([height]) {
    height: auto;
}


/* Full-width tables with align: undo float behaviour — these are layout
   tables, not small float tables. Must be full-width, not min-content. */
.legacy-content table[align][width="100%"] {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.legacy-content table[align][width="100%"] img:not([height]) {
    max-width: 100%;
    height: auto;
}

/* Half-width layout tables with align: keep float but use 50% width,
   not min-content. These are text-heavy layout tables (e.g. legend/abbreviations).
   Zero out the margin facing the other table so two 50%-width tables
   can actually sit side by side (50% + margin > 50% overflow otherwise). */
.legacy-content table[align][width="50%"] {
    width: 50%;
    max-width: 50%;
}

.legacy-content table[align="right"][width="50%"]:not([border]) {
    margin-left: 0;
}

/* 75%-width layout tables with align: keep float but use 75% width,
   not min-content. Multi-column text+image layout tables. */
.legacy-content table[align][width="75%"] {
    width: 75%;
    max-width: 75%;
}

.legacy-content table[align="left"][width="50%"]:not([border]) {
    margin-right: 0;
}

.legacy-content table[align][width="50%"]:not(.stamp-details-card) td {
    padding: var(--space-3);
}

/* <hr> in legacy content — simple thin line matching the original site.
   Does NOT clear floats (many pages rely on <hr> between float tables).
   .content-page pages keep the decorative gold diamond style from content.css. */
.legacy-content:not(.content-page):not(.country-main) hr {
    border: none;
    border-top: 1px solid var(--color-border, #e5e5e5);
    margin: 1rem 0;
    height: 0;
    position: static;
    overflow: hidden;
}

.legacy-content:not(.content-page):not(.country-main) hr::before {
    content: none;
}

/* Image captions in float tables */
.legacy-content table[align="right"] small,
.legacy-content table[align="left"] small {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.3;
    color: var(--color-text-secondary, #57534e);
    padding-top: 0;
    padding-bottom: 0.5rem;
}

/* ===== 4. CENTERED IMAGE FIX ===== */

.legacy-content center {
    text-align: center;
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.legacy-content center img {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 0.125rem;
}

.legacy-content center img:not([height]) {
    height: auto;
}

/* Reduce br gap right after images in center blocks */
.legacy-content center img + br {
    line-height: 0.25;
}

/* ===== 5. BR + BR COLLAPSE ===== */

.legacy-content br + br {
    display: block;
    content: '';
    margin: 0;
    line-height: 0;
    font-size: 0;
    height: 0.375rem;
}

/* ===== 6. FLOAT CLEARING ===== */

.legacy-content .container::after {
    content: '';
    display: table;
    clear: both;
}

/* ===== 7. RESPONSIVE — UNFLOAT TABLES ON MOBILE ===== */

@media (max-width: 768px) {
    .legacy-content table[align="right"],
    .legacy-content table[align="left"] {
        float: none;
        margin: 1rem 0;
        width: 100%;
        max-width: 100%;
    }

    .legacy-content table[align="right"] img,
    .legacy-content table[align="left"] img {
        max-width: 100%;
    }

    .legacy-content table[align="right"] small,
    .legacy-content table[align="left"] small {
        text-align: center;
    }
}

/* ===== 8. SELECTION HIGHLIGHT ===== */

.legacy-content ::selection {
    background: rgba(212, 167, 44, 0.15);
    color: var(--hp-black, #0a0a0a);
}

.legacy-content ::-moz-selection {
    background: rgba(212, 167, 44, 0.15);
    color: var(--hp-black, #0a0a0a);
}