/* ================================================================
   dns-lookup.css — Page-specific styles for dns-lookup.php
   Načítáno na: dns-lookup.php
   ================================================================ */


/* ===== FORMULÁŘ ===== */
/* Pod polem pro doménu dva výběry (typ záznamu, resolver) vedle sebe,
   na mobilu pod sebou. <select> používá .form-input z components.css. */
.dns-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-block-start: 12px;
}
.dns-options .form-label {
    font-size: var(--size-13);
    margin-block-end: 4px;
}

@media (max-width: 520px) {
    .dns-options { grid-template-columns: 1fr; }
}


/* ===== VÝSLEDKY ===== */
/* Nadpis typu záznamu: štítek (A, MX…) + popis */
.dns-type-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block: 24px 0;
    font-size: var(--size-16);
}

/* Hodnoty záznamů (TXT, IPv6, dlouhé hostnames) se lámou kdekoli,
   aby tabulka na mobilu nepřetékala */
.dns-table td:first-child {
    white-space: normal;
    overflow-wrap: anywhere;
}
.dns-table code {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.dns-table .badge { margin-inline-end: 4px; }
.dns-table .dns-ttl { white-space: nowrap; }

/* Každý typ záznamu je samostatná tabulka — pevné rozložení a šířky
   sloupců, jinak by TTL v každé tabulce skončilo jinde (podle obsahu).
   Na mobilu (≤600 px) jsou řádky karty (table-ref), tam se to nepoužije. */
@media (min-width: 601px) {
    .dns-table { table-layout: fixed; }
    .dns-table .dns-col-ttl { width: 110px; }
    .dns-table .dns-col-num { width: 100px; }
    .dns-table .dns-col-field { width: 220px; }
}

.dns-muted { color: var(--text-muted); font-weight: 400; }

/* Tlačítko "Copy All Records" pod výsledkem */
.dns-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-block-start: 16px;
}


/* ===== PŘÍKAZY V NÁVODU ===== */
/* Rámečky s kopírováním (.code-copy-wrap z components.css) — mezera před dalším textem */
.code-copy-wrap { margin-block-end: 16px; }