/* =========================================================
   MONEYTOOL.IO
   GLOBAL RESPONSIVE SYSTEM
   ========================================================= */


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (max-width: 1200px) {

    .container {
        width: min(100% - 40px, var(--container-width));
    }

}


/* =========================================================
   TABLET / SMALL DESKTOP
   ========================================================= */

@media (max-width: 1100px) {

    /* -----------------------------------------
       Header
       ----------------------------------------- */

    .header-inner {
        gap: 16px;
    }


    /* -----------------------------------------
       General grids
       ----------------------------------------- */

    .featured-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .planning-grid,
    .benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------
       AI Finance
       ----------------------------------------- */

    .ai-finance-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    /* -----------------------------------------
       Learning
       ----------------------------------------- */

    .learning-resources {
        grid-template-columns: 1fr;
        gap: 40px;
    }


    /* -----------------------------------------
       Newsletter
       ----------------------------------------- */

    .newsletter-box {
        gap: 35px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------
       Typography
       ----------------------------------------- */

    h1 {
        font-size: clamp(36px, 6vw, 52px);
    }

    h2 {
        font-size: clamp(28px, 4.5vw, 38px);
    }


    /* -----------------------------------------
       Popular tools
       ----------------------------------------- */

    .popular-tools-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------
       Guides
       ----------------------------------------- */

    .guides-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    /* -----------------------------------------
       Newsletter
       ----------------------------------------- */

    .newsletter-box {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   MOBILE / LARGE PHONE
   ========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------
       Container
       ----------------------------------------- */

    .container {
        width: min(100% - 30px, var(--container-width));
    }


    /* -----------------------------------------
       Typography
       ----------------------------------------- */

    body {
        font-size: 15px;
    }

    h1 {
        font-size: clamp(32px, 9vw, 42px);
        line-height: 1.12;
    }

    h2 {
        font-size: clamp(27px, 7vw, 34px);
    }

    h3 {
        font-size: 20px;
    }


    /* -----------------------------------------
       Homepage sections
       ----------------------------------------- */

    .home-section {
        padding: 65px 0;
    }

    .section-heading {
        margin-bottom: 32px;
    }

    .section-heading p {
        font-size: 15px;
    }


    /* -----------------------------------------
       Hero
       ----------------------------------------- */

    .home-hero {
        padding: 60px 0 50px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-description {
        font-size: 16px;
    }


    /* -----------------------------------------
       Hero search
       ----------------------------------------- */

    .hero-search {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        padding: 8px;
    }

    .hero-search-icon {
        display: none;
    }

    .hero-search input {
        min-height: 52px;
        padding: 12px 15px;
    }

    .hero-search button {
        width: 100%;
        min-height: 50px;
    }


    /* -----------------------------------------
       Hero statistics
       ----------------------------------------- */

    .hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-top: 40px;
    }


    /* -----------------------------------------
       Trust bar
       ----------------------------------------- */

    .trust-items {
        grid-template-columns: 1fr;
    }

    .trust-item {
        justify-content: flex-start;
        padding: 13px 0;
    }


    /* -----------------------------------------
       Homepage grids
       ----------------------------------------- */

    .featured-tools-grid,
    .popular-tools-grid,
    .category-grid,
    .planning-grid,
    .benefits-grid,
    .ai-tools-grid,
    .guides-grid,
    .resource-links {
        grid-template-columns: 1fr;
    }


    /* -----------------------------------------
       Section headings
       ----------------------------------------- */

    .section-heading-inline {
        display: block;
    }

    .section-link {
        display: inline-flex;
        margin-top: 15px;
    }


    /* -----------------------------------------
       Featured cards
       ----------------------------------------- */

    .featured-tool-card {
        min-height: 270px;
        padding: 24px;
    }


    /* -----------------------------------------
       Popular tools
       ----------------------------------------- */

    .tool-box {
        grid-template-columns: auto minmax(0, 1fr) auto;
        min-height: 110px;
        padding: 18px;
    }


    /* -----------------------------------------
       Categories
       ----------------------------------------- */

    .category-box {
        min-height: 145px;
    }


    /* -----------------------------------------
       AI Finance
       ----------------------------------------- */

    .ai-finance-layout {
        gap: 35px;
    }

    .ai-tool-card {
        padding: 22px;
    }


    /* -----------------------------------------
       Learning resources
       ----------------------------------------- */

    .learning-resources {
        gap: 30px;
    }


    /* -----------------------------------------
       Newsletter
       ----------------------------------------- */

    .newsletter-box {
        padding: 28px 22px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
        min-height: 48px;
    }


    /* -----------------------------------------
       Tables
       ----------------------------------------- */

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 620px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .container {
        width: min(100% - 24px, var(--container-width));
    }


    /* -----------------------------------------
       Hero
       ----------------------------------------- */

    .home-hero {
        padding: 48px 0 42px;
    }

    .hero-eyebrow,
    .section-eyebrow {
        font-size: 10px;
    }

    .hero-description {
        font-size: 15px;
    }


    /* -----------------------------------------
       Hero stats
       ----------------------------------------- */

    .hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 16px 10px;
    }

    .hero-stat strong {
        font-size: 20px;
    }

    .hero-stat span {
        font-size: 12px;
    }


    /* -----------------------------------------
       Cards
       ----------------------------------------- */

    .featured-tool-card,
    .planning-card,
    .benefit-card,
    .guide-card-body {
        padding: 22px;
    }


    /* -----------------------------------------
       Popular tools
       ----------------------------------------- */

    .tool-box {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
    }

    .tool-box-arrow {
        display: none;
    }


    /* -----------------------------------------
       Newsletter
       ----------------------------------------- */

    .newsletter-box {
        padding: 24px 18px;
    }


    /* -----------------------------------------
       FAQ
       ----------------------------------------- */

    .faq-item summary {
        padding-right: 35px;
        font-size: 15px;
    }

}


/* =========================================================
   TABLES - GLOBAL
   ========================================================= */

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
}

th,
td {
    padding: 14px;
    border: 1px solid var(--border-normal);
    text-align: left;
    vertical-align: middle;
}

tr:nth-child(even) {
    background: #f8fafc;
}


/* =========================================================
   ACCESSIBILITY / TOUCH
   ========================================================= */

@media (hover: none) {

    .featured-tool-card:hover,
    .tool-box:hover,
    .category-box:hover,
    .card:hover {
        transform: none;
    }

}


@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

}