/* =========================================
   4. LAYOUT - HEADER
   ========================================= */
#now-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: var(--border-heavy) solid var(--black);
    position: relative;
}

#city-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--black);
    color: var(--white);
    padding: 0.5em 0.75em;
    font-weight: 900;
    font-size: var(--font-size-city);
    letter-spacing: var(--letter-spacing-normal);
}

#now-icon-box {
    width: var(--header-icon);
    height: var(--header-icon);
}
#now-temp-and-wind {
    display: flex;
    flex-direction: row;
    align-items: center;
}
#now-icon-box svg { stroke-width: var(--stroke-width-heavy); }

#now-temp {
    font-size: var(--font-size-temp-main);
    font-weight: 900;
    line-height: 0.8;
}

/* =========================================
   5. LAYOUT - HOURLY
   ========================================= */
#hourly-wrapper {
    width: 100%;
    border-bottom: var(--border-heavy) solid var(--black);
}

#hourly-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    background: var(--white);
    min-height: 6em;
    align-items: stretch;
    padding: 0 1em;
}

#hourly-container::-webkit-scrollbar { display: none; }

.hour-item {
    padding-top: 0.5em;
    border-right: var(--border-thin) solid var(--black);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    position: relative;
}

.hour-item:first-child { border-left: var(--border-heavy) solid var(--black); }
.hour-item:last-child { border-right: var(--border-heavy) solid var(--black); }
.hour-item.is-current { border-right: var(--border-med) solid var(--black); }

.hour-time {
    font-size: var(--font-size-hour);
    font-weight: 900;
    letter-spacing: var(--letter-spacing-tight);
}

.hour-icon {
    width: var(--scroll-icon);
    height: var(--scroll-icon);
}

.hour-temp {
    font-size: var(--font-size-temp-hour);
    font-weight: bold;
}

.hour-counts {
    display: flex;
    min-height: var(--scroll-icon);
}

.count-icon {
    width: var(--scroll-icon);
    height: var(--scroll-icon);
}