/* ==========================================================================
   TECHOSTER — UNIFIED BRAND TOOL UI DESIGN SYSTEM (v1.0 - 2026 PDF Guidelines)
   Core Brand Colors:
     Link Blue:    #0964B0 (Primary UI, headers, main buttons)
     Spark Orange: #F0743A (Accent, CTAs, highlights, wordmark dot)
     Grow Green:   #68C185 (Success, positive states)
     Warm Amber:   #F4C16D (Warmth, badges, illustration)
     Charcoal:     #333333 (Body & text — NEVER pure black #000000)
     Cloud:        #F7F8FA (Panels & surface backgrounds)
     White:        #FFFFFF (Primary canvas)

   Typography:
     Headlines: 'Baloo 2', display, sans-serif
     Body & UI: 'Inter', system-ui, sans-serif
     Code/Data: 'JetBrains Mono', monospace
   ========================================================================== */

:root {
    --brand-blue: #0964B0;
    --brand-blue-dark: #074e88;
    --brand-blue-light: #e6f0fa;
    --brand-orange: #F0743A;
    --brand-orange-hover: #d95e26;
    --brand-green: #68C185;
    --brand-yellow: #F4C16D;
    --brand-charcoal: #333333;
    --brand-cloud: #F7F8FA;
    --brand-white: #FFFFFF;
    --brand-border: rgba(9, 100, 176, 0.12);

    /* Legacy compatibility aliases */
    --primary: #0964B0;
    --primary-color: #0964B0;
    --secondary-color: #333333;
    --tui-blue: #0964B0;
    --tui-blue-dark: #074e88;
    --tui-cyan: #F0743A;
    --tui-orange: #F0743A;
    --tui-green: #68C185;
    --tui-yellow: #F4C16D;
    --tui-ink: #333333;
    --tui-muted: #334155;
    --tui-line: rgba(9, 100, 176, 0.12);
    --tui-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --tui-grad: linear-gradient(135deg, #0964B0, #F0743A);
}

* {
    box-sizing: border-box;
}

body, html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--brand-charcoal);
    background-color: var(--brand-white);
    margin: 0;
    padding-top: 80px !important;
}

/* Ensure the main common website header is always 100% visible with rich contrast */
#header, .site-header {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

#header .nav-link,
#header .dropdown-toggle {
    color: #111827 !important;
    font-weight: 700 !important;
}

#header .nav-link:hover,
#header .dropdown-toggle:hover {
    color: #0964B0 !important;
    background: rgba(9, 100, 176, 0.08) !important;
}

h1, h2, h3, h4, h5, h6,
.tool-hero h1, .tool-card-title, .stack-title, .title, .techoster-brand-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #111827;
}

.codeSnippet, .tool-record, code, pre, .mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.tool-page, .tool-detail-page {
    background:
        radial-gradient(1100px 560px at 12% -5%, rgba(9, 100, 176, 0.07), transparent 60%),
        radial-gradient(900px 520px at 88% 8%, rgba(240, 116, 58, 0.06), transparent 60%),
        linear-gradient(180deg, #F7F8FA 0%, #edf2f8 100%);
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #111827;
    padding-top: 80px !important;
}

/* ---------- TOOL NAVIGATION TOP BAR ---------- */
.techoster-tool-bar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 4px 20px -5px rgba(9, 100, 176, 0.06);
    padding: 0.75rem 1.5rem;
    width: 100%;
}

.techoster-tool-bar-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.techoster-tool-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
}

.techoster-brand-mark {
    width: 32px;
    height: 32px;
    display: block;
    flex-shrink: 0;
}

.techoster-brand-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 1.65rem;
    color: var(--brand-charcoal);
    letter-spacing: -0.02em;
    line-height: 1;
}

.techoster-brand-dot {
    color: var(--brand-orange);
}

.techoster-tool-header-center {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.techoster-tool-badge {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(9, 100, 176, 0.08);
    color: var(--brand-blue);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.techoster-tool-bar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.techoster-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    border-radius: 12px;
    background: var(--brand-blue);
    color: #FFFFFF !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s var(--tui-ease);
    box-shadow: 0 4px 12px -2px rgba(9, 100, 176, 0.3);
}

.techoster-back-btn:hover {
    background: var(--brand-orange);
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -2px rgba(240, 116, 58, 0.4);
}

.techoster-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem;
    border-radius: 12px;
    background: var(--brand-cloud);
    border: 1px solid var(--brand-border);
    color: var(--brand-charcoal) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s var(--tui-ease);
}

.techoster-scan-btn:hover {
    background: #FFFFFF;
    border-color: var(--brand-blue);
    color: var(--brand-blue) !important;
}

/* ---------- HERO ---------- */
.tool-hero {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
    text-align: center;
}

.tool-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-orange) 100%);
    color: #fff;
    font-size: 2rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 16px 36px -10px rgba(9, 100, 176, 0.4);
    animation: tuiPop 0.7s var(--tui-ease) both;
}

.tool-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: rgba(9, 100, 176, 0.08);
    color: var(--brand-blue);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tool-hero h1 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: clamp(2.2rem, 1.2rem + 3.4vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 0.9rem;
    color: #0964B0 !important;
}

.tool-hero h1 span.highlight, .tool-hero h1 span.text-transparent {
    color: #F0743A !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
}

.tool-hero p {
    font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem);
    line-height: 1.65;
    color: #1f2937 !important;
    font-weight: 600;
    max-width: 650px;
    margin: 0 auto;
}

/* ---------- PANEL / INPUT ---------- */
/* ---------- PANEL / INPUT (HIGH CONTRAST & VISIBILITY) ---------- */
.tool-panel {
    max-width: 780px;
    margin: 0 auto;
    padding: 1.75rem;
    border-radius: 20px;
    background: #ffffff !important;
    border: 1.5px solid rgba(9, 100, 176, 0.25) !important;
    box-shadow: 0 20px 50px -20px rgba(9, 100, 176, 0.15), 0 6px 18px -10px rgba(9, 100, 176, 0.08) !important;
    animation: tuiRise 0.7s var(--tui-ease) 0.1s both;
}

.tool-panel label,
label[for="domainInput"],
.tool-detail-label {
    color: #111827 !important;
    font-weight: 700 !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.tool-inputrow {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.tool-field,
.input-field,
input[type="text"],
input[type="search"] {
    flex: 1 1 260px;
    padding: 0.95rem 1.15rem;
    border-radius: 14px !important;
    border: 2px solid rgba(9, 100, 176, 0.3) !important;
    background: #ffffff !important;
    font-size: 1.05rem !important;
    color: #111827 !important;
    font-weight: 600 !important;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.tool-field:focus,
.input-field:focus,
input[type="text"]:focus {
    outline: none !important;
    border-color: #0964B0 !important;
    box-shadow: 0 0 0 4px rgba(9, 100, 176, 0.18) !important;
}

.tool-field::placeholder,
.input-field::placeholder,
input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/* BUTTONS (INSPECT DOMAIN & SUBMIT) */
.tool-btn,
.btn-analyze,
.btn-check,
.submitButton,
#submit-button,
.dmarc-button,
.mx-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    padding: 0.95rem 1.7rem !important;
    border: none !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #0964B0 0%, #074e88 100%) !important;
    color: #ffffff !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    box-shadow: 0 12px 28px -10px rgba(9, 100, 176, 0.5) !important;
    transition: transform 0.25s var(--tui-ease), box-shadow 0.25s, background 0.25s !important;
}

.tool-btn *,
.tool-btn span,
#submit-button,
#submit-button *,
#submit-button span,
.dmarc-button span,
.mx-button span {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.tool-btn:hover,
.btn-analyze:hover,
.btn-check:hover,
.submitButton:hover,
#submit-button:hover,
.dmarc-button:hover,
.mx-button:hover {
    background: linear-gradient(135deg, #F0743A 0%, #d95e26 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 36px -12px rgba(240, 116, 58, 0.6) !important;
}

.tool-btn:active {
    transform: translateY(0);
}

.tool-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.tool-btn i {
    transition: transform 0.25s var(--tui-ease);
}

.tool-btn:hover i {
    transform: translateX(3px);
}

/* ---------- LOADING ---------- */
.tool-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--brand-blue);
    font-weight: 600;
}

.tool-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(9, 100, 176, 0.25);
    border-top-color: var(--brand-blue);
    border-radius: 50%;
    animation: tuiSpin 0.7s linear infinite;
}

/* ---------- RESULTS ---------- */
.tool-results {
    max-width: 900px;
    margin: 1.75rem auto 0;
    padding: 0 1.5rem;
}

.tool-card {
    background: #fff;
    border: 1px solid var(--brand-border);
    border-radius: 18px;
    padding: 1.75rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 16px 40px -24px rgba(9, 100, 176, 0.12);
    animation: tuiRise 0.6s var(--tui-ease) both;
}

.tool-card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-charcoal);
    margin-bottom: 1rem;
}

/* Status banners */
.tool-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.1rem 1.35rem;
    border-radius: 14px;
    margin-bottom: 1.25rem;
    border: 1px solid;
    font-weight: 500;
    animation: tuiRise 0.5s var(--tui-ease) both;
}

.tool-banner i {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.tool-banner.is-success { background: #f0fdf4; border-color: rgba(104, 193, 133, 0.4); color: #166534; }
.tool-banner.is-warn    { background: #fffbeb; border-color: rgba(244, 193, 109, 0.5); color: #92400e; }
.tool-banner.is-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.tool-banner.is-info    { background: #f0f7ff; border-color: rgba(9, 100, 176, 0.25); color: var(--brand-blue); }

/* Raw record display */
.tool-record {
    position: relative;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--brand-charcoal);
    background: var(--brand-cloud);
    border: 1px solid var(--tui-line);
    border-radius: 12px;
    padding: 1rem 3rem 1rem 1rem;
    word-break: break-all;
}

.tool-copy {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(9, 100, 176, 0.3);
    border-radius: 9px;
    background: rgba(9, 100, 176, 0.08);
    color: var(--brand-blue);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.tool-copy:hover { background: rgba(9, 100, 176, 0.16); transform: translateY(-1px); }

/* Detail grid */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
}

.tool-detail {
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: var(--brand-cloud);
    border: 1px solid var(--tui-line);
}

.tool-detail-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tui-muted);
    margin-bottom: 0.35rem;
}

.tool-detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-charcoal);
    word-break: break-word;
}

/* Tables (MX, headers) */
.tool-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.tool-table thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tui-muted);
    border-bottom: 2px solid var(--tui-line);
}

.tool-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--tui-line);
    color: var(--brand-charcoal);
}

.tool-table tbody tr:hover { background: var(--brand-cloud); }

/* Score ring / pill */
.tool-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
}

.tool-pill.is-success { background: #dcfce7; color: #166534; }
.tool-pill.is-warn    { background: #fef3c7; color: #92400e; }
.tool-pill.is-danger  { background: #fee2e2; color: #991b1b; }

/* ---------- ANIMATIONS ---------- */
@keyframes tuiSpin { to { transform: rotate(360deg); } }
@keyframes tuiPop {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes tuiRise {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
}

.tui-reveal { animation: tuiRise 0.6s var(--tui-ease) both; }
.tui-reveal-2 { animation: tuiRise 0.6s var(--tui-ease) 0.08s both; }
.tui-reveal-3 { animation: tuiRise 0.6s var(--tui-ease) 0.16s both; }

.hidden { display: none !important; }

/* ==========================================================================
   UNIVERSAL HIGH-CONTRAST & PERFECT VISIBILITY FOR ALL SECTIONS & TOOLS
   ========================================================================== */

/* Section Headings, Titles, and Subtitles */
h1, h2, h3, h4, h5, h6,
.section-title, .card-title, .tool-card-title, .dmarc-title, .spf-title, .mx-title, .dkim-title, .bimi-title {
    color: #0964B0 !important;
    font-weight: 800 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* Card titles inside white panels */
.tool-card h2, .tool-card h3, .tool-card h4,
.tool-panel h2, .tool-panel h3, .tool-panel h4 {
    color: #0964B0 !important;
    font-weight: 700 !important;
}

/* Paragraphs, descriptions, and body text */
p, .tool-hero p, .tool-card p, .tool-panel p, .section-desc, .stack-desc {
    color: #1f2937 !important;
    font-weight: 500 !important;
}

/* All Tabs (Analysis & Deep Lookup, Overview, Generator, Raw, etc.) */
.tab-button, .dmarc-tab, .mx-tab, .spf-tab, .tool-tab, [role="tab"], .nav-tab {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 10px !important;
}

.tab-button.active, .tab-button[aria-selected="true"],
.dmarc-tab.active, .mx-tab.active, .spf-tab.active, .tool-tab.active {
    background: #0964B0 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    border-color: #0964B0 !important;
    box-shadow: 0 4px 12px rgba(9, 100, 176, 0.3) !important;
}

/* Table Headers & Cells (DNS tables, MX results, Email Header Analysis, etc.) */
table thead th, .tool-table thead th, .dns-record-table th, .mx-table th {
    background: #f8fafc !important;
    color: #0964B0 !important;
    font-weight: 800 !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-bottom: 2px solid #cbd5e1 !important;
    padding: 0.85rem 1rem !important;
}

table tbody td, .tool-table tbody td, .dns-record-table td, .mx-table td {
    color: #0f172a !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0.85rem 1rem !important;
}

table tbody tr:hover, .tool-table tbody tr:hover {
    background-color: #f1f5f9 !important;
}

/* Labels, Key-Value Details, Badges */
.tool-detail-label, .detail-label, .meta-label, label {
    color: #0964B0 !important;
    font-weight: 800 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

.tool-detail-value, .detail-value, .meta-value {
    color: #0f172a !important;
    font-weight: 700 !important;
}

/* Accordions and Details/Summary */
details summary, accordion-header {
    background: #f8fafc !important;
    color: #0964B0 !important;
    font-weight: 700 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 0.85rem 1.25rem !important;
}

/* Code Snippets & Record Boxes */
.tool-record, code, pre, .codeSnippet {
    background: #0f172a !important;
    color: #38bdf8 !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
}

/* Action Buttons & Copy Buttons */
.tool-copy, .btn-copy, .copy-btn {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

.tool-copy:hover, .btn-copy:hover, .copy-btn:hover {
    background: #0964B0 !important;
    color: #ffffff !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 640px) {
    .tool-hero { padding-top: 2rem; }
    .tool-inputrow { flex-direction: column; }
    .tool-btn { width: 100%; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .tool-hero-icon, .tool-panel, .tool-card, .tool-banner,
    .tui-reveal, .tui-reveal-2, .tui-reveal-3 {
        animation: none !important;
    }
    .tool-btn, .tool-copy { transition: none !important; }
}

/* ==========================================================================
   HOTFIXES (2026-07-25) — must stay LAST so they win over the universal
   high-contrast block above.
   ========================================================================== */

/* 1) Restore the shared site header's desktop navigation on tool pages.
      The universal `.hidden { display:none !important }` rule above was
      clobbering Tailwind's `md:flex` on the nav container, hiding
      HOME / ABOUT US / SCAN DOMAIN and every dropdown trigger. Re-assert the
      desktop nav (and its flex dropdown rows) from the md breakpoint up. */
@media (min-width: 768px) {
    #header .md\:flex { display: flex !important; }
}

/* 2) Tool header bars (.page-header / .score-header / .dmarc-header / .mx-header
      / .dkim-header-bar) are forced to a LIGHT background by the rebrand block in
      style.css, so their titles/subtitles must be DARK. Page-header text already
      inherits the universal dark heading/paragraph colours above; the specific
      title classes and score-header are handled in style.css. (No white override
      here — that would repaint them invisible on the light background.) */

/* 3) Header dropdowns (SERVICES / TOOLS / GOOGLE TOOLS) must still open on
      tool pages. The reveal rule in style.css opens a menu with a non-!important
      `display:block`, but the `.hidden { display:none !important }` above was
      winning, so the menus never appeared and you couldn't jump between tools.
      Re-assert the open state with matching (higher) specificity + !important. */
#header .dropdown.show-dropdown .dropdown-menu,
#header .dropdown:hover .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}

/* 4) Make the top-level header navigation clearly bold on tool pages.
      Extra `nav` in the selector raises specificity so it always wins. */
#header nav .nav-link,
#header nav .dropdown-toggle,
#header nav .contact-btn {
    font-weight: 700 !important;
}

/* ==========================================================================
   FULL-WIDTH TOOL PAGES + TOP-SPACE REMOVAL (2026-07-25)
   Every individual tool detail page: kill the dead space under the fixed
   header and let content use the full width (24–32px side padding), matching
   the /tools hub. Applies site-wide via this shared stylesheet.
   ========================================================================== */

/* (a) The `body, html { padding-top:80px }` rule near the top of this file was
       applying the 80px offset to BOTH <html> AND <body> = 160px of dead space
       under the 80px fixed header. <body> alone clears the header — drop <html>. */
html { padding-top: 0 !important; }

/* (b) Trim the remaining top padding of each tool's hero / first block so the
       title sits right beneath the header — no awkward vertical gap. */
.tool-detail-page .tool-hero { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.tool-detail-page .pageContainer { padding-top: 1.25rem !important; }
.tool-detail-page .page-header,
.tool-detail-page .score-header,
.tool-detail-page .dmarc-header,
.tool-detail-page .mx-header,
.tool-detail-page .dkim-header-bar,
.tool-detail-page .page-title-bar { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
.tool-detail-page .header { margin-bottom: 1.5rem !important; }

/* (c) Full-width layout: the main content wrappers span the viewport with
       consistent 24–32px side padding (capped at 1400px so it stays readable on
       very large monitors — effectively edge-to-edge on laptops/tablets). */
.tool-detail-page .tool-hero,
.tool-detail-page .tool-panel,
.tool-detail-page .tool-results,
.tool-detail-page .contentWrapper,
.tool-detail-page .lookupSection,
.tool-detail-page .resultsSection,
.tool-detail-page .infoSection,
.tool-detail-page .dkim-info-grid,
.tool-detail-page .max-w-4xl,
.tool-detail-page .max-w-5xl,
.tool-detail-page .max-w-7xl {
    max-width: min(1400px, 100%) !important;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(1.5rem, 3vw, 2rem);
    padding-right: clamp(1.5rem, 3vw, 2rem);
}
/* Keep the negative "pull-up" that some tools use to overlap the input card
   onto the hero — but let it stay full width. */
.tool-detail-page .contentWrapper { padding-left: clamp(1.5rem, 3vw, 2rem) !important; padding-right: clamp(1.5rem, 3vw, 2rem) !important; }

/* (d) LEFT-ALIGNED, COMPACT HERO — match the /tools hub top bar. Title, badge,
       icon and subtitle sit flush-left instead of centered, with a tighter icon
       and a readable subtitle width. */
.tool-detail-page .tool-hero,
.tool-detail-page .header,
.tool-detail-page .page-header .text-center,
.tool-detail-page .score-header .text-center {
    text-align: left !important;
}
.tool-detail-page .tool-hero > *,
.tool-detail-page .header > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Subtitle: flush-left, constrained for readability (no auto-centering). */
.tool-detail-page .tool-hero p,
.tool-detail-page .header .subtitle,
.tool-detail-page .header p,
.tool-detail-page .page-header .text-center p,
.tool-detail-page .score-header .text-center p {
    max-width: 74ch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Smaller, left-aligned hero icon. */
.tool-detail-page .tool-hero-icon {
    width: 52px !important;
    height: 52px !important;
    font-size: 1.35rem !important;
    margin-bottom: 0.85rem !important;
}
.tool-detail-page .tool-hero-icon svg { width: 26px !important; height: 26px !important; }
.tool-detail-page .header .headerIcon {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 42px !important;
    height: 42px !important;
}
/* Some tools pull their input card up onto the header with a large negative
   margin. Now that the header is light, compact and left-aligned, soften the
   overlap so the card no longer covers the subtitle text. */
.tool-detail-page .-mt-16 { margin-top: -1.25rem !important; }
.tool-detail-page .-mt-10 { margin-top: -1rem !important; }