/* =====================================================
   HOME
   FILE : home.css
   DESCRIPTION : Home Page
   VERSION : 1.0.0
===================================================== */

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

#hero{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:20px 0;

}



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

#hero-content{

    flex:1.4;

}

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

#hero-title{

    margin-top:14px;

    font-size:22px;

    font-weight:700;

    line-height:1.35;

    letter-spacing:-0.3px;

}


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

#hero-description{

    margin-top:12px;

    max-width:220px;

    color:var(--text-secondary);

    font-size:15px;

    line-height:1.6;

}



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

#hero-image{

    flex:1;

    display:flex;

    justify-content:flex-end;

    align-items:flex-end;

}



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

#hero-image img{

    width:200px;

    max-width:42vw;

    height:auto;

    display:block;

}

/* =====================================================
   SUMMARY
===================================================== */

#summary{

    margin-bottom:32px;

}

.section-header{

    margin-bottom:16px;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:8px 16px;

    border-radius:999px;

    background:#F5F7FB;

    color:#374151;

    font-size:1.15rem;

    font-weight:700;

}



/* =====================================================
   SUMMARY
===================================================== */

#summary-label{

    color:#6B7280;

    font-size:.95rem;

}

#summary-total{

    margin:10px 0;

    font-size:2rem;

    font-weight:800;

}

#summary-change{

    color:#16A34A;

    font-weight:600;

}

/* =====================================================
   SUMMARY WEEK
===================================================== */

#summary-week{

    margin-top:20px;

    padding-top:18px;

    border-top:1px solid var(--border-color);

    display:flex;

    justify-content:space-between;

    gap:20px;

}

/* =====================================================
   SUMMARY ITEM
===================================================== */

.summary-item{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:6px;

}

.summary-item span{

    font-size:12px;

    color:var(--text-secondary);

}

.summary-item strong{

    font-size:18px;

    font-weight:700;

    color:var(--text-primary);

}

/* =====================================================
   HOME SECTION SPACING
===================================================== */

#home-page .section{

    margin-bottom:32px;

}

/* =====================================================
   DAILY INPUT
===================================================== */



/* =====================================================
   SETTING
===================================================== */