/* ==========================================================================
   ToolsFire.com — Modern Responsive Stylesheet
   Uses CSS custom properties, restrained brand accents, WCAG AA+ contrast,
   accessible dark mode, and prefers-reduced-motion support.
   ========================================================================== */

:root {
    --tf-brand-primary: #ea580c;
    --tf-brand-primary-hover: #c2410c;
    --tf-brand-subtle: #fff7ed;
    --tf-border-radius: 0.75rem;
    --tf-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    --tf-card-hover-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

[data-bs-theme="dark"] {
    --tf-brand-primary: #f97316;
    --tf-brand-primary-hover: #fb923c;
    --tf-brand-subtle: rgba(249, 115, 22, 0.14);
    --tf-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --tf-card-hover-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    letter-spacing: -0.01em;
}

/* Skip Link for Keyboard Accessibility */
.tf-skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2000;
    padding: 0.5rem 1rem;
    background: var(--tf-brand-primary);
    color: #fff;
    border-radius: 0.375rem;
    text-decoration: none;
}

/* Brand Button Overrides */
.btn-primary {
    background-color: var(--tf-brand-primary);
    border-color: var(--tf-brand-primary);
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--tf-brand-primary-hover);
    border-color: var(--tf-brand-primary-hover);
}

.text-primary {
    color: var(--tf-brand-primary) !important;
}

/* Tool & Category Cards */
.tf-tool-card,
.tf-category-card {
    border-radius: var(--tf-border-radius);
    box-shadow: var(--tf-card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tf-tool-card:hover,
.tf-category-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--tf-card-hover-shadow);
    border-color: var(--tf-brand-primary) !important;
}

.tf-tool-icon-box {
    width: 46px;
    height: 46px;
    background-color: var(--tf-brand-subtle);
    color: var(--tf-brand-primary);
    flex-shrink: 0;
}

/* AdSense Placement Containers (CLS Prevention & Visual Separation) */
.tf-ad-container {
    border: 1px dashed rgba(148, 163, 184, 0.45);
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
    background-color: rgba(148, 163, 184, 0.05);
}
.tf-ad-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 0.35rem;
}

/* Prose Typography for Legal & Blog Pages */
.tf-prose h2 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}
.tf-prose h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 1.4rem;
    margin-bottom: 0.5rem;
}
.tf-prose p,
.tf-prose li {
    line-height: 1.7;
}

.tf-footer-link:hover {
    color: var(--tf-brand-primary) !important;
    text-decoration: underline !important;
}

/* Focus Ring Accessibility */
:focus-visible {
    outline: 2px solid var(--tf-brand-primary);
    outline-offset: 2px;
}

/* Respect Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}