/* ══════════════════════════════════════════════════════════════════════════
   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;
    --hamburger-color:#94a3b8;
    --hamburger-hover:#e2e8f0;

    /* 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;
    --hamburger-color:#475569;
    --hamburger-hover:#0f172a;

    /* 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;
}

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: 60px;
    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);
}

/* ── Hamburger button ────────────────────────────────────── */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 22px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 1rem;
    align-self: center;
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--hamburger-color);
    border-radius: 2px;
    transition: transform 220ms ease, opacity 220ms ease, background-color 180ms ease;
    transform-origin: center;
}

.hamburger:hover span {
    background-color: var(--hamburger-hover);
}

/* Animate to X when open — translateY = (total height - bar height) / 2 = (20-2)/2 = 9px */
.hamburger--open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger--open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger--open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ── Nav dropdown menu ───────────────────────────────────── */
.nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 248px;
    background-color: var(--nav-bg);
    border: 1px solid var(--nav-border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    z-index: 200;
    overflow: hidden;
    padding: 4px 0;
}

.nav-menu--open {
    display: flex;
}

.nav-menu__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1.2rem;
    color: var(--nav-link);
    text-decoration: none;
    font-size: 0.975rem;
    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;
}

/* ── 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 {
    position: relative;
}

.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 svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

/* Moon icon — shown in dark mode (current theme); Sun shown in light mode */
.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; }

/* Dropdown */
.theme-toggle__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    background: var(--toggle-dd-bg);
    border: 1px solid var(--toggle-dd-border);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    z-index: 300;
    overflow: hidden;
    padding: 4px;
}

.theme-toggle__dropdown--open {
    display: block;
}

.theme-toggle__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    color: var(--toggle-dd-text);
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 120ms ease, color 120ms ease;
    user-select: none;
    border: 1px solid transparent;
    background: none;
    width: 100%;
    text-align: left;
}

.theme-toggle__option:hover {
    background-color: var(--toggle-dd-hover-bg);
}

.theme-toggle__option--active {
    background-color: var(--toggle-dd-active-bg);
    color: var(--toggle-dd-active-text);
    border-color: var(--toggle-dd-active-border);
}

.theme-toggle__option svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* ══════════════════════════════════════════════════════════════════════════
   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 4rem;
    width: 100%;
}

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

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

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

    /* 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 */
    .site-header {
        padding: 0.75rem 1rem;
        min-height: 52px;
    }

    /* 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: slightly smaller on mobile */
    .theme-toggle__btn {
        width: 30px;
        height: 30px;
    }

    /* Theme dropdown aligns to the right edge on mobile */
    .theme-toggle__dropdown {
        right: 0;
        left: auto;
    }
}

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