/* ============================================================
   common-nav-footer.css
   Shared styles for the navbar + footer fragments.
   Self-contained (hardcoded colors) so it renders identically
   regardless of what :root variables a given page defines.
   Link this on every page that includes navbar.html / footer.html:
     <link rel="stylesheet" href="/css/common-nav-footer.css" />
   ============================================================ */
html {
  scroll-behavior: smooth;
}
/* ── Navbar ── */
nav {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    padding: 13px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.brand-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #1E3A8A, #3B82F6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-icon i {
    color: #fff;
    font-size: 1.1rem;
}

.brand-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-links a {
    font-family: 'Inter', sans-serif;
    font-size: .9rem;
    font-weight: 500;
    color: #1F2937;
    text-decoration: none;
    padding: 7px 12px;
    border-radius: 8px;
    transition: background .2s;
    white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active {
    background: #F3F4F6;
    color: #3B82F6;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #1F2937;
    cursor: pointer;
    padding: 6px;
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .nav-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid #E5E7EB;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 24px;
        gap: 4px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
        z-index: 998;
    }

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

    .nav-links a {
        width: 100%;
        padding: 10px 12px;
    }

    .nav-inner {
        position: relative;
    }
}

@media (max-width: 767.98px) and (min-width: 576px) {
    .nav-inner {
        padding: 0 16px;
        gap: 10px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .nav-links {
        gap: 2px;
    }

    .nav-links a {
        padding: 6px 10px;
        font-size: .85rem;
    }
}

/* NOTE: profile button / dropdown / avatar styles are intentionally
   NOT here — auth.js (VetriAuth) injects its own "vf-*" prefixed
   styles at runtime when it builds #navRight and #vetri-navbar.
   Adding duplicate rules here would just be dead weight. */

/* ── Footer ── */
.footer {
    background: #fff;
    border-top: 1px solid #E5E7EB;
    padding: 56px 0 0;
}

.footer-brand-name {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
}

.footer-tagline {
    font-size: .88rem;
    color: #4A5565;
    margin-top: 10px;
    line-height: 1.6;
}

.footer-col-title {
    font-family: 'Poppins', sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    font-size: .88rem;
    color: #4A5565;
    text-decoration: none;
    transition: color .2s;
}

.footer-links a:hover {
    color: #3B82F6;
}

.footer-bottom {
    border-top: 1px solid #E5E7EB;
    padding: 18px 0;
    margin-top: 48px;
}

.footer-copy {
    font-size: .84rem;
    color: #4A5565;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    width: 36px;
    height: 36px;
    border: 1.5px solid #E5E7EB;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4A5565;
    font-size: .95rem;
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

.social-links a:hover {
    border-color: #3B82F6;
    color: #3B82F6;
    background: #EFF6FF;
}

@media (max-width: 767.98px) {
    .footer {
        padding: 40px 0 0;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }
}
/* ============================================================
   tool-sections.css
   Shared styles for the "How It Works" timeline and FAQ
   accordion sections used on every tool page (below the tool
   card, before the footer).

   Depends on these CSS variables already defined in each tool
   page's own <style> block:
     --blue-dark, --blue-main, --heading, --subtext,
     --accent-1, --accent-2, --white

   Link this on every tool page:
     <link href="/css/tool-sections.css" rel="stylesheet" />
   ============================================================ */

/* ── Shared section wrapper ── */
.section {
    padding: 64px 0;
}

.section-badge {
    display: inline-block;
    background: #EFF6FF;
    color: var(--blue-dark);
    font-size: .78rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 50px;
    margin-bottom: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.section-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    font-weight: 800;
    color: var(--heading);
    margin-bottom: 10px;
}

.section-sub {
    font-size: .92rem;
    color: var(--subtext);
    line-height: 1.7;
}

/* ── How It Works (timeline) ── */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tl-item {
    display: flex;
    gap: 20px;
    padding-bottom: 28px;
    position: relative;
}

.tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: 0;
    width: 2px;
    background: var(--accent-2);
}

.tl-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-dark), var(--blue-main));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    flex-shrink: 0;
}

.tl-content h5 {
    font-family: 'Poppins', sans-serif;
    font-size: .98rem;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 6px;
    margin-top: 8px;
}

.tl-content p {
    font-size: .86rem;
    color: var(--subtext);
    line-height: 1.65;
    margin: 0;
}

/* ── FAQ accordion ── */
/* ── FAQ accordion ── */
.faq-wrap {
    max-width: 760px;
    margin: 0 auto;
}

.faq-item {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    margin-bottom: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
    border-color: var(--blue-main, #2563eb);
    box-shadow: 0 6px 24px rgba(37, 99, 235, 0.08);
}

.faq-item.open {
    border-color: var(--blue-main, #2563eb);
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.12);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    font-size: .96rem;
    font-weight: 600;
    color: var(--heading);
    transition: color 0.2s ease;
}

.faq-item.open .faq-question {
    color: var(--blue-main, #2563eb);
}

.faq-question i {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.06);
    border-radius: 50%;
    color: var(--blue-main, #2563eb);
    font-size: 0.8rem;
    transition: transform .3s ease, background-color .2s ease, color .2s ease;
}

.faq-item.open .faq-question i {
    transform: rotate(180deg);
    background: var(--blue-main, #2563eb);
    color: #ffffff;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.open .faq-answer {
    max-height: 350px;
}

.faq-answer-inner {
    padding: 0 24px 22px;
    font-size: .9rem;
    color: var(--subtext);
    line-height: 1.75;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    padding-top: 16px;
    margin-top: -4px;
}
@media (max-width: 767.98px) {
    .section {
        padding: 44px 0;
    }
}