/* =========================================================
   ToolZen Hub
   All Calculators Page
========================================================= */


/* =========================================================
   COLOR SYSTEM
========================================================= */

:root {

    --calculators-green: #00A651;
    --calculators-green-dark: #008C45;
    --calculators-green-light: #E6F6ED;

    --calculators-bg: #F8FAFC;
    --calculators-white: #FFFFFF;

    --calculators-heading: #0F172A;
    --calculators-body: #64748B;
    --calculators-muted: #94A3B8;

    --calculators-border: #E2E8F0;
    --calculators-border-light: #F1F5F9;

}


/* =========================================================
   BREADCRUMB
========================================================= */

.calculators-breadcrumb {

    margin-bottom:
        22px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-size:
        13px;

    color:
        #64748B;

}


.calculators-breadcrumb a {

    color:
        #0b9f58;

    text-decoration:
        none;

}


.calculators-breadcrumb strong {

    color:
        #334155;

    font-weight:
        600;

}


/* =========================================================
   PAGE
========================================================= */

.calculators-page-body {

    margin: 0;

    background:
        var(--calculators-bg);

    color:
        var(--calculators-heading);

}


/* =========================================================
   CONTAINER
========================================================= */

.calculators-container {

    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin:
        0 auto;

}


/* =========================================================
   HERO
========================================================= */

.calculators-page__hero {

    padding:
        55px 0 45px;

    border-bottom:
        1px solid var(--calculators-border);

    background:
        linear-gradient(
            180deg,
            #F8FAFC 0%,
            #FFFFFF 100%
        );

}


/* =========================================================
   INTRO
========================================================= */

.calculators-page__intro {

    max-width:
        720px;

    margin:
        0 auto 30px;

    text-align:
        center;

}


.calculators-page__eyebrow {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        var(--calculators-green);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;

}


.calculators-page__title {

    margin:
        0;

    color:
        var(--calculators-heading);

    font-size:
        clamp(32px, 5vw, 46px);

    line-height:
        1.1;

    letter-spacing:
        -.04em;

}


.calculators-page__description {

    max-width:
        650px;

    margin:
        14px auto 0;

    color:
        var(--calculators-body);

    font-size:
        15px;

    line-height:
        1.7;

}


/* =========================================================
   SEARCH
========================================================= */

.calculators-search {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    width:
        min(680px, 100%);

    min-height:
        54px;

    margin:
        0 auto;

    padding:
        5px;

    border:
        1px solid var(--calculators-border);

    border-radius:
        12px;

    background:
        var(--calculators-white);

    box-shadow:
        0 8px 25px rgba(15, 23, 42, .06);

    box-sizing:
        border-box;

}


.calculators-search__icon {

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    flex:
        0 0 auto;

    font-size:
        17px;

}


.calculators-search__input {

    flex:
        1;

    min-width:
        0;

    height:
        42px;

    padding:
        0 10px;

    border:
        0;

    outline:
        none;

    background:
        transparent;

    color:
        var(--calculators-heading);

    font:
        inherit;

    font-size:
        14px;

}


.calculators-search__input::placeholder {

    color:
        var(--calculators-muted);

}


.calculators-search__input:focus {

    outline:
        none;

}


.calculators-search__button {

    flex:
        0 0 auto;

    height:
        42px;

    padding:
        0 20px;

    border:
        0;

    border-radius:
        9px;

    background:
        var(--calculators-green);

    color:
        #FFFFFF;

    font:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}


.calculators-search__button:hover {

    background:
        var(--calculators-green-dark);

    transform:
        translateY(-1px);

}


/* =========================================================
   DIRECTORY
========================================================= */

.calculators-directory {

    padding:
        42px 0 70px;

}


/* =========================================================
   DIRECTORY HEADER
========================================================= */

.calculators-directory__header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;

}


.calculators-directory__eyebrow {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--calculators-green);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


.calculators-directory__header h2 {

    margin:
        0;

    color:
        var(--calculators-heading);

    font-size:
        24px;

    line-height:
        1.2;

}


.calculators-directory__count {

    flex:
        0 0 auto;

    color:
        var(--calculators-muted);

    font-size:
        12px;

    font-weight:
        700;

}


/* =========================================================
   CALCULATOR GRID
========================================================= */

.calculators-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        16px;

}


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

@media (max-width: 900px) {

    .calculators-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


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

@media (max-width: 650px) {

    .calculators-container {

        width:
            min(
                100% - 20px,
                1180px
            );

    }


    .calculators-page__hero {

        padding:
            38px 0 32px;

    }


    .calculators-page__intro {

        margin-bottom:
            24px;

        text-align:
            left;

    }


    .calculators-page__title {

        font-size:
            32px;

    }


    .calculators-page__description {

        margin-left:
            0;

        margin-right:
            0;

        font-size:
            14px;

    }


    .calculators-search {

        min-height:
            52px;

    }


    .calculators-search__icon {

        width:
            36px;

    }


    .calculators-search__input {

        font-size:
            13px;

    }


    .calculators-search__button {

        padding:
            0 14px;

    }


    .calculators-directory {

        padding:
            30px 0 45px;

    }


    .calculators-directory__header {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;

    }


    .calculators-directory__header h2 {

        font-size:
            21px;

    }


    .calculators-grid {

        grid-template-columns:
            1fr;

        gap:
            12px;

    }

}


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

@media (max-width: 400px) {

    .calculators-search__button {

        width:
            42px;

        padding:
            0;

        font-size:
            0;

    }


    .calculators-search__button::after {

        content:
            "⌕";

        font-size:
            18px;

    }

}