/* ══════════════════════════════════════════════════════════════════════════
   WDOIS Tools — app.css
   Theme system: CSS custom properties on html[data-theme]
   Dark is default; light theme overrides via [data-theme="light"]
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Dark theme (default) ──────────────────────────────────────────────── */
:root,
html[data-theme="dark"] {
    /* Page backgrounds */
    --bg-page:        #0f172a;
    --bg-surface:     #1e293b;
    --bg-surface-alt: #161b22;
    --bg-inset:       #0d1117;
    --bg-panel:       #0f172a;
    --bg-hover:       #334155;
    --bg-overlay:     rgba(0, 0, 0, 0.4);

    /* Borders */
    --border:         #1e293b;
    --border-strong:  #334155;
    --border-muted:   #30363d;
    --border-blue:    #1d4ed8;

    /* Text */
    --text-primary:   #e2e8f0;
    --text-heading:   #f8fafc;
    --text-heading2:  #ffffff;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --text-dimmed:    #475569;
    --text-mono:      #cbd5e1;
    --text-link:      #60a5fa;
    --text-link-hover:#93c5fd;

    /* Accents */
    --accent-blue:    #3b82f6;
    --accent-blue-hover:#2563eb;
    --accent-blue-light:#60a5fa;
    --accent-blue-dim:#38bdf8;
    --accent-green:   #22c55e;
    --accent-green2:  #4ade80;

    /* Form controls */
    --input-bg:       #1e293b;
    --input-border:   #334155;
    --input-text:     #f1f5f9;
    --input-placeholder: #475569;
    --input-focus-border: #3b82f6;

    /* Cards / tool cards */
    --card-bg:        #161b22;
    --card-border:    #30363d;
    --card-hover-border: #388bfd;
    --card-hover-shadow: rgba(56, 139, 253, 0.15);
    --card-title:     #ffffff;
    --card-desc:      #8b949e;

    /* Results cards */
    --results-bg:     #1e293b;
    --results-border: #334155;
    --results-header-bg: #0f172a;
    --results-row-alt:#243047;

    /* Nav dropdown */
    --nav-bg:         #1e293b;
    --nav-border:     #334155;
    --nav-link:       #e2e8f0;
    --nav-link-hover-bg: #334155;

    /* Footer */
    --footer-bg:      transparent;
    --footer-border:  #1e293b;
    --footer-text:    #475569;
    --footer-ip:      #94a3b8;
    --footer-ip-hover:#60a5fa;
    --footer-copy-border: #334155;
    --footer-copy-hover-bg: #1e293b;
    --footer-copy-text: #64748b;

    /* Header */
    --header-bg:      #0f172a;
    --header-border:  #1e293b;

    /* Brand */
    --brand-w:        #3b82f6;
    --brand-w-hover:  #60a5fa;
    --brand-rest:     #f1f5f9;
    --brand-rest-hover:#ffffff;
    --brand-sub:      #94a3b8;
    --brand-sub-hover:#cbd5e1;
    --brand-dot:      #64748b;
    --brand-divider:  #334155;
    --brand-gradient: linear-gradient(90deg, #2563eb, #7c3aed);

    /* Status / severity */
    --success-bg:     #052e16;
    --success-border: #166534;
    --success-text:   #4ade80;
    --warn-bg:        #1c1400;
    --warn-border:    #92400e;
    --warn-text:      #fbbf24;
    --error-bg:       #450a0a;
    --error-border:   #991b1b;
    --error-text:     #f87171;
    --info-bg:        #0f2044;
    --info-border:    #1d4ed8;
    --info-text:      #93c5fd;

    /* SVG icons are pure outlines — no filter needed in dark mode */

    /* Primary buttons — solid fill (dark mode default) */
    --btn-primary-bg:          var(--accent-blue);
    --btn-primary-border:      transparent;
    --btn-primary-text:        #ffffff;
    --btn-primary-hover-bg:    var(--accent-blue-hover);
    --btn-primary-hover-border:transparent;
    --btn-primary-hover-text:  #ffffff;
    --btn-spinner-border:      rgba(255, 255, 255, 0.3);
    --btn-spinner-top:         #ffffff;

    /* Theme toggle */
    --toggle-bg:      #1e293b;
    --toggle-border:  #334155;
    --toggle-icon:    #94a3b8;
    --toggle-icon-hover: #e2e8f0;
    --toggle-dd-bg:   #1e293b;
    --toggle-dd-border:#334155;
    --toggle-dd-text: #e2e8f0;
    --toggle-dd-hover-bg: #334155;
    --toggle-dd-active-bg: #0f2044;
    --toggle-dd-active-text: #60a5fa;
    --toggle-dd-active-border: #1d4ed8;

    /* Misc */
    --code-bg:        #0d1117;
    --shadow-card:    0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-hover:   0 8px 32px rgba(56, 139, 253, 0.15);
}

/* ── Light theme ───────────────────────────────────────────────────────── */
html[data-theme="light"] {
    /* Page backgrounds — slate-tinted whites, not pure #ffffff everywhere */
    --bg-page:        #f1f5f9;
    --bg-surface:     #ffffff;
    --bg-surface-alt: #f8fafc;
    --bg-inset:       #f1f5f9;
    --bg-panel:       #f8fafc;
    --bg-hover:       #e2e8f0;
    --bg-overlay:     rgba(0, 0, 0, 0.06);

    /* Borders */
    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;
    --border-muted:   #dee4ec;
    --border-blue:    #3b82f6;

    /* Text */
    --text-primary:   #1e293b;
    --text-heading:   #0f172a;
    --text-heading2:  #0f172a;
    --text-secondary: #475569;
    --text-muted:     #64748b;
    --text-dimmed:    #94a3b8;
    --text-mono:      #1e293b;
    --text-link:      #2563eb;
    --text-link-hover:#1d4ed8;

    /* Accents — keep same brand colors, slightly adjusted for contrast */
    --accent-blue:    #2563eb;
    --accent-blue-hover:#1d4ed8;
    --accent-blue-light:#3b82f6;
    --accent-blue-dim:#2563eb;
    --accent-green:   #16a34a;
    --accent-green2:  #15803d;

    /* Form controls */
    --input-bg:       #ffffff;
    --input-border:   #cbd5e1;
    --input-text:     #0f172a;
    --input-placeholder: #94a3b8;
    --input-focus-border: #2563eb;

    /* Cards / tool cards — white cards on slate page, with subtle elevation */
    --card-bg:        #ffffff;
    --card-border:    #e2e8f0;
    --card-hover-border: #3b82f6;
    --card-hover-shadow: rgba(37, 99, 235, 0.14);
    --card-title:     #0f172a;
    --card-desc:      #475569;

    /* Results cards */
    --results-bg:     #ffffff;
    --results-border: #e2e8f0;
    --results-header-bg: #f8fafc;
    --results-row-alt:#f1f5f9;

    /* Nav dropdown */
    --nav-bg:         #ffffff;
    --nav-border:     #e2e8f0;
    --nav-link:       #1e293b;
    --nav-link-hover-bg: #f1f5f9;

    /* Footer */
    --footer-bg:      transparent;
    --footer-border:  #e2e8f0;
    --footer-text:    #94a3b8;
    --footer-ip:      #64748b;
    --footer-ip-hover:#2563eb;
    --footer-copy-border: #cbd5e1;
    --footer-copy-hover-bg: #f1f5f9;
    --footer-copy-text: #94a3b8;

    /* Header */
    --header-bg:      #ffffff;
    --header-border:  #e2e8f0;

    /* Brand */
    --brand-w:        #2563eb;
    --brand-w-hover:  #1d4ed8;
    --brand-rest:     #0f172a;
    --brand-rest-hover:#000000;
    --brand-sub:      #64748b;
    --brand-sub-hover:#475569;
    --brand-dot:      #64748b;
    --brand-divider:  #e2e8f0;
    --brand-gradient: none;

    /* Status / severity */
    --success-bg:     #f0fdf4;
    --success-border: #86efac;
    --success-text:   #15803d;
    --warn-bg:        #fffbeb;
    --warn-border:    #fcd34d;
    --warn-text:      #92400e;
    --error-bg:       #fef2f2;
    --error-border:   #fca5a5;
    --error-text:     #dc2626;
    --info-bg:        #eff6ff;
    --info-border:    #93c5fd;
    --info-text:      #1d4ed8;

    /* SVG icons are pure outlines — no filter/blend-mode needed in light mode */

    /* Primary buttons — ghost-primary style for light bg */
    --btn-primary-bg:          #eff6ff;
    --btn-primary-border:      #bfdbfe;
    --btn-primary-text:        #1d4ed8;
    --btn-primary-hover-bg:    #dbeafe;
    --btn-primary-hover-border:#93c5fd;
    --btn-primary-hover-text:  #1e40af;
    --btn-spinner-border:      rgba(29, 78, 216, 0.25);
    --btn-spinner-top:         #1d4ed8;

    /* Theme toggle */
    --toggle-bg:      #f1f5f9;
    --toggle-border:  #cbd5e1;
    --toggle-icon:    #475569;
    --toggle-icon-hover:#0f172a;
    --toggle-dd-bg:   #ffffff;
    --toggle-dd-border:#e2e8f0;
    --toggle-dd-text: #1e293b;
    --toggle-dd-hover-bg: #f1f5f9;
    --toggle-dd-active-bg: #eff6ff;
    --toggle-dd-active-text: #1d4ed8;
    --toggle-dd-active-border: #93c5fd;

    /* Misc */
    --code-bg:        #f1f5f9;
    --shadow-card:    0 1px 4px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.07);
    --shadow-hover:   0 4px 24px rgba(37, 99, 235, 0.16), 0 1px 4px rgba(15, 23, 42, 0.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL RESET & BASE
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: var(--bg-page);
    /* Smooth transition for theme changes — only on color-related props */
    transition: background-color 200ms ease;

    /* Single source of truth for the header's real rendered height.
       It must be tall enough to contain the 34px toggle buttons plus
       the header's own 0.9rem vertical padding (34 + 2*14.4 = 62.8px) —
       .site-header's old hard-coded "min-height: 60px" undershot that,
       and .sidebar/.sidebar-backdrop independently guessed "60px" too,
       so the two never actually lined up. Both now read this one value. */
    --header-height: 64px;
}

@media (max-width: 768px) {
    html {
        /* Mobile padding is 0.75rem and the toggle stays 34px (it doesn't
           shrink the way .theme-toggle__btn does), so real height here is
           34 + 2*12 = 58px. */
        --header-height: 60px;
    }
}

body {
    background-color: var(--bg-page);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color 200ms ease, color 200ms ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */

.site-footer {
    margin-top: auto;
    padding: 1.25rem 1.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--footer-text);
    border-top: 1px solid var(--footer-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--footer-bg);
    transition: border-color 200ms ease, color 200ms ease;
}

/* ── Footer IP block ─────────────────────────────────────── */
.footer-ip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: var(--footer-text);
}

.footer-ip__label {
    color: var(--footer-text);
}

.footer-ip__addr {
    color: var(--footer-ip);
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    letter-spacing: 0.02em;
}

.footer-ip__addrs {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.footer-ip__sep {
    color: var(--border-strong);
    font-size: 0.75rem;
    user-select: none;
}

/* Clickable IP address link to browser fingerprint page */
.footer-ip__addr--link {
    color: var(--footer-ip);
    text-decoration: none;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    letter-spacing: 0.02em;
    border-bottom: 1px dotted transparent;
    transition: color 150ms ease, border-color 150ms ease;
}

.footer-ip__addr--link:hover {
    color: var(--footer-ip-hover);
    border-bottom-color: var(--footer-ip-hover);
    text-decoration: none;
}

.footer-ip__copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--footer-copy-border);
    border-radius: 4px;
    color: var(--footer-copy-text);
    cursor: pointer;
    padding: 2px 4px;
    margin-left: 2px;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
    line-height: 1;
}

.footer-ip__copy:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue-light);
    background-color: var(--footer-copy-hover-bg);
}

.footer-ip__copy--copied {
    color: var(--accent-green2);
    border-color: var(--accent-green2);
}

/* ══════════════════════════════════════════════════════════════════════════
   GLOBAL LINK STYLES
   ══════════════════════════════════════════════════════════════════════════ */

a {
    color: var(--text-link);
    text-decoration: none;
}

a:hover {
    color: var(--text-link-hover);
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   SITE HEADER
   ══════════════════════════════════════════════════════════════════════════ */

.site-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    display: flex;
    align-items: center;
    padding: 0.9rem 1.5rem;
    min-height: var(--header-height);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color 200ms ease, border-color 200ms ease;
}

/* ── Site title link ─────────────────────────────────────── */
.site-title-link {
    text-decoration: none !important;
    user-select: none;
    display: flex;
    align-items: center;
}

.site-title-link:hover {
    text-decoration: none !important;
}

/* ── Brand row: title + divider + subtitle in one line ───── */
.brand-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ── Site title heading ──────────────────────────────────── */
.site-title {
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
    gap: 0;
}

/* WDOIS — gradient in dark, solid blue in light */
.site-title .brand-wdois {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for light (gradient:none — no clip applied visually) */
    color: var(--brand-w);
    transition: opacity 180ms ease;
}

/* When gradient is 'none', background-clip+fill-color still applies
   but shows nothing — use a data-theme override for light */
html[data-theme="light"] .site-title .brand-wdois {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: var(--brand-w);
}

.site-title-link:hover .brand-wdois {
    opacity: 0.85;
}

/* .com — clearly subordinate: smaller, lighter, slightly dimmed */
.site-title .brand-dot {
    color: var(--brand-dot);
    font-weight: 400;
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    opacity: 0.8;
    transition: color 180ms ease, opacity 180ms ease;
    /* Optical alignment: sit slightly above baseline to match cap-height midpoint */
    position: relative;
    top: -0.05em;
}

.site-title-link:hover .brand-dot {
    color: var(--brand-sub-hover);
    opacity: 1;
}

/* ── Vertical divider between title and subtitle ─────────── */
.brand-divider {
    display: block;
    width: 1px;
    height: 1.2rem;
    background-color: var(--brand-divider);
    flex-shrink: 0;
    align-self: center;
    opacity: 0.8;
}

/* ── Site subtitle ───────────────────────────────────────── */
.site-subtitle {
    font-size: 0.73rem;
    font-weight: 400;
    color: var(--brand-sub);
    letter-spacing: 0.025em;
    margin: 0;
    white-space: nowrap;
    transition: color 180ms ease;
    line-height: 1;
    opacity: 0.9;
}

.site-title-link:hover .site-subtitle {
    color: var(--brand-sub-hover);
}

/* ── Sidebar toggle button — morphs hamburger ⇄ back arrow ──
   Single source of truth for open/closed is the html.sidebar-open
   class (set pre-paint from localStorage — see base.html.twig).
   No "X" close icon, per design: collapsing reads as "back", not
   "dismiss". ─────────────────────────────────────────────────── */
.sidebar-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: var(--toggle-icon);
    cursor: pointer;
    padding: 0;
    margin-right: 1rem;
    align-self: center;
    flex-shrink: 0;
    transition: color 150ms ease;
}

.sidebar-toggle:hover {
    color: var(--toggle-icon-hover);
}

.sidebar-toggle:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.sidebar-toggle__icon {
    position: absolute;
    width: 18px;
    height: 18px;
    pointer-events: none;
    transition: opacity 220ms ease, transform 220ms ease;
}

.sidebar-toggle__icon--back {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

html.sidebar-open .sidebar-toggle__icon--menu {
    opacity: 0;
    transform: rotate(90deg) scale(0.6);
}

html.sidebar-open .sidebar-toggle__icon--back {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ── Sidebar ──────────────────────────────────────────────
   Fixed column below the sticky header, collapsed off-screen
   by default. Desktop: pushes .app-main right. Mobile: overlays
   content with a backdrop (see @media block below). ─────────── */
.sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: 260px;
    max-width: 85vw;
    background-color: var(--nav-bg);
    border-right: 1px solid var(--nav-border);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 240ms ease;
    z-index: 150;
}

html.sidebar-open .sidebar {
    transform: translateX(0);
}

/* ── Sidebar search launcher ──
   Styled like a real input (matches the site's --input-* tokens used
   everywhere else) but sits outside .sidebar-nav so it reads as a fixed
   piece of sidebar chrome rather than another link in the list. ──────── */
.sidebar-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.75rem 1.2rem 0.5rem;
    padding: 0.6rem 0.9rem;
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 0.5rem;
    cursor: text;
    transition: border-color 150ms ease;
}

.sidebar-search:focus-within {
    border-color: var(--input-focus-border);
}

.sidebar-search__icon {
    width: 16px;
    height: 16px;
    color: var(--text-dimmed);
    flex-shrink: 0;
}

.sidebar-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    color: var(--input-text);
    font-size: 0.925rem;
    font-family: inherit;
}

.sidebar-search__input::placeholder {
    color: var(--input-placeholder);
}

/* ── Sidebar search loading indicator ──
   Fixed height + visibility toggle (not display) so showing/hiding it never
   shifts the nav links below — only the spinner/text fade in and out. ──── */
.sidebar-search-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    height: 0.95rem;
    margin: -0.2rem 1.2rem 0.5rem;
    overflow: hidden;
    visibility: hidden;
}

.sidebar-search-status--active {
    visibility: visible;
}

.sidebar-search-status__spinner {
    width: 13px;
    height: 13px;
    border: 2px solid var(--border-strong);
    border-top-color: var(--accent-blue);
    border-radius: 50%;
    flex-shrink: 0;
}

.sidebar-search-status--active .sidebar-search-status__spinner {
    animation: sidebar-search-spin 0.7s linear infinite;
}

@keyframes sidebar-search-spin {
    to { transform: rotate(360deg); }
}

.sidebar-search-status__text {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
}

.sidebar-section + .sidebar-section {
    border-top: 1px solid var(--nav-border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.sidebar-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0.5rem 1.2rem 0.35rem;
}

.nav-menu__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.2rem;
    color: var(--nav-link);
    text-decoration: none;
    font-size: 0.925rem;
    white-space: nowrap;
    transition: background-color 150ms ease, color 150ms ease;
}

.nav-menu__link:hover {
    background-color: var(--nav-link-hover-bg);
    color: var(--text-heading2);
    text-decoration: none;
}

.nav-menu__icon {
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ── Icon sizing and consistency ─────────────────────────── */
/* Pure-outline SVGs work on both dark and light backgrounds natively.
   No filter or mix-blend-mode needed. */
.nav-menu__icon img,
.tool-icon-img,
h1 img,
h2 img,
.icon img,
.ssl-tool-btn img {
    transition: opacity 200ms ease;
}

/* ── Main content column — shifts right when the sidebar pushes it open ── */
.app-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 0;
    transition: margin-left 240ms ease;
}

@media (min-width: 769px) {
    html.sidebar-open .app-main {
        margin-left: 260px;
    }
}

/* Mobile-only backdrop — sits behind the overlay sidebar, closes it on click */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 140;
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}

/* ── Header right area (holds theme toggle) ──────────────── */
.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: center;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   THEME TOGGLE
   ══════════════════════════════════════════════════════════════════════════ */

.theme-toggle__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--toggle-bg);
    border: 1px solid var(--toggle-border);
    border-radius: 8px;
    color: var(--toggle-icon);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
    flex-shrink: 0;
    padding: 0;
}

.theme-toggle__btn:hover {
    color: var(--toggle-icon-hover);
    border-color: var(--accent-blue-light);
    background-color: var(--bg-hover);
}

.theme-toggle__btn:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.theme-toggle__btn svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.theme-icon-sun  { display: none; }
.theme-icon-moon { display: block; }

html[data-theme="light"] .theme-icon-sun  { display: block; }
html[data-theme="light"] .theme-icon-moon { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE BODY & CONTENT WRAPPER
   ══════════════════════════════════════════════════════════════════════════ */

.page-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    flex: 1;
}

/* Tool pages and home use .page-wrapper to add top spacing */
.page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 1rem 1.5rem;
    width: 100%;
    flex: 1;
}

.page-wrapper > .container {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Prevent any horizontal overflow */
    html, body {
        overflow-x: hidden;
    }

    .page-wrapper {
        padding: 1.5rem 0.75rem 1rem;
    }

    /* Container fills full width on mobile */
    .container {
        width: 100%;
        max-width: 100%;
    }

    /* Stack search forms vertically — applies to WHOIS, NS, Dig */
    .search-form {
        flex-direction: column;
        gap: 0.6rem;
    }

    .search-form input[type="text"],
    .search-form select,
    .search-form button {
        width: 100%;
        min-width: 0;
        flex: unset;
    }

    /* SOA details: single column on mobile */
    .soa-details {
        grid-template-columns: 1fr;
    }

    /* Home page: single column card grid */
    .tools-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Tables: allow horizontal scroll inside results card */
    .results-card {
        overflow-x: auto;
    }

    .results-table {
        min-width: 480px;
    }

    /* Header: tighten padding on small screens.
       (min-height comes from --header-height, redeclared above for this breakpoint —
       .sidebar and .sidebar-backdrop read the same variable, so they stay aligned
       automatically without needing their own copies of this number.) */
    .site-header {
        padding: 0.75rem 1rem;
    }

    /* Sidebar: overlays content instead of pushing it on mobile */
    html.sidebar-open .sidebar-backdrop {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* Brand: hide subtitle + divider on very small screens to save space */
    .brand-divider,
    .site-subtitle {
        display: none;
    }

    /* Footer: stack vertically on mobile */
    .site-footer {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        padding: 1rem 1rem;
        text-align: center;
    }

    /* IP block: stack label + addresses + copy button vertically */
    .footer-ip {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }

    /* Address group: allow wrapping so IPv4 | IPv6 wraps on very small screens */
    .footer-ip__addrs {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Smaller font + word-break for long IPv6 addresses */
    .footer-ip__addr,
    .footer-ip__addr--link {
        font-size: 0.72rem;
        word-break: break-all;
        overflow-wrap: anywhere;
        text-align: center;
    }

    /* Copy button gets a bit more tap target on mobile */
    .footer-ip__copy {
        padding: 3px 8px;
        margin-left: 0;
        margin-top: 2px;
    }

    .theme-toggle__btn {
        width: 30px;
        height: 30px;
    }
}

/* ── Learn article: anchor scroll offset ───────────────────────────────────── */
.article-body h2,
.article-body h3,
.article-body h4 {
    scroll-margin-top: 100px;
}