/* HostingChecker.net - Custom Styles (no @apply — CDN-compatible) */

/* ─── Nav Links (dark navbar) ───────────────────────────────────────────── */
.nav-link-dark {
    font-size: 0.875rem;
    font-weight: 500;
    color: #9ca3af;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.nav-link-dark:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav-link-dark-active { color: #fff; background: rgba(255,255,255,0.1); }

/* Legacy light nav-link kept for any pages that still reference it */
.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    transition: all 0.15s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.nav-link:hover { color: #4f46e5; background: #eef2ff; }
.nav-link-active { color: #4f46e5; background: #eef2ff; }

.mobile-nav-item-dark {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #d1d5db;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    transition: all 0.15s;
    text-decoration: none;
}
.mobile-nav-item-dark:hover { color: #fff; background: rgba(255,255,255,0.08); }

.mobile-nav-item {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    padding: 0.625rem 0.75rem;
    border-radius: 0.75rem;
    transition: all 0.15s;
    text-decoration: none;
}
.mobile-nav-item:hover { color: #4f46e5; background: #eef2ff; }

.footer-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.footer-link:hover { color: #fff; }

/* ─── Tool Card / Results ───────────────────────────────────────────────── */
.result-card {
    background: #fff;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}
.result-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
}
.result-row:last-child { border-bottom: none; }
.result-row:hover { background: #fafafa; }

.result-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    flex-shrink: 0;
    margin-right: 1rem;
    min-width: 130px;
}
.result-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    text-align: right;
    word-break: break-all;
}

/* ─── Form Inputs ───────────────────────────────────────────────────────── */
.tool-input {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    border: 1.5px solid #d1d5db;
    border-radius: 0.75rem;
    outline: none;
    background: #fff;
    color: #111827;
    transition: all 0.15s;
    box-sizing: border-box;
}
.tool-input::placeholder { color: #9ca3af; }
.tool-input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }

.tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: #4f46e5;
    color: #fff;
    font-weight: 600;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    text-decoration: none;
    font-size: 0.9375rem;
    flex-shrink: 0;
}
.tool-btn:hover { background: #4338ca; }
.tool-btn:active { background: #3730a3; }
.tool-btn:disabled { opacity: 0.65; cursor: not-allowed; }

/* ─── Badges ────────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
}
.badge-green  { background: #dcfce7; color: #166534; }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-orange { background: #ffedd5; color: #9a3412; }
.badge-gray   { background: #f3f4f6; color: #374151; }
.badge-red    { background: #fee2e2; color: #b91c1c; }

/* ─── DNS Table ─────────────────────────────────────────────────────────── */
.dns-table { width: 100%; border-collapse: collapse; }
.dns-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(249,250,251,0.8);
    border-bottom: 1px solid #f3f4f6;
}
.dns-table td {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #1f2937;
    font-family: 'Menlo', 'Monaco', 'Cascadia Code', monospace;
    word-break: break-all;
    border-bottom: 1px solid #f3f4f6;
}
.dns-table tr:last-child td { border-bottom: none; }
.dns-table tr:hover td { background: rgba(249,250,251,0.6); }

/* ─── Blog Prose ────────────────────────────────────────────────────────── */
.prose-hc h2 { font-size: 1.5rem; font-weight: 700; color: #111827; margin-top: 2rem; margin-bottom: 1rem; }
.prose-hc h3 { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin-top: 1.5rem; margin-bottom: 0.75rem; }
.prose-hc p  { color: #4b5563; line-height: 1.75; margin-bottom: 1rem; }
.prose-hc a  { color: #4f46e5; }
.prose-hc a:hover { text-decoration: underline; }
.prose-hc ul { list-style: disc; padding-left: 1.5rem; color: #4b5563; margin-bottom: 1rem; }
.prose-hc ol { list-style: decimal; padding-left: 1.5rem; color: #4b5563; margin-bottom: 1rem; }
.prose-hc li { margin-bottom: 0.375rem; line-height: 1.7; }
.prose-hc code { background: #f3f4f6; color: #374151; padding: 0.125rem 0.375rem; border-radius: 0.375rem; font-size: 0.875rem; font-family: monospace; }
.prose-hc pre { background: #111827; color: #f9fafb; border-radius: 0.75rem; padding: 1rem; overflow-x: auto; margin-bottom: 1rem; }
.prose-hc pre code { background: transparent; padding: 0; color: #f9fafb; }
.prose-hc blockquote { border-left: 4px solid #c7d2fe; padding-left: 1rem; color: #4b5563; font-style: italic; margin: 1rem 0; }
.prose-hc table { width: 100%; font-size: 0.875rem; border-collapse: collapse; margin-bottom: 1rem; }
.prose-hc th { background: #f3f4f6; padding: 0.5rem 0.75rem; font-weight: 600; color: #374151; border: 1px solid #e5e7eb; }
.prose-hc td { padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; color: #374151; }
.prose-hc img { border-radius: 0.75rem; max-width: 100%; margin: 1rem 0; }
.prose-hc strong { font-weight: 600; color: #111827; }
.prose-hc hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5rem 0; }

/* ─── Tabs (DNS) ────────────────────────────────────────────────────────── */
.dns-tab {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.625rem;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}
.dns-tab-active { background: #4f46e5; color: #fff; box-shadow: 0 1px 3px rgba(79,70,229,0.3); }
.dns-tab-inactive { color: #6b7280; background: transparent; }
.dns-tab-inactive:hover { color: #374151; background: #f3f4f6; }

/* ─── Spinner ───────────────────────────────────────────────────────────── */
.spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(99,102,241,0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ─── Animations ────────────────────────────────────────────────────────── */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

/* ─── Utilities ─────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
*:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }