/*  FONTS & RESET   */

@font-face {
    font-family: 'DM Sans Italic';
    src: url('./assets/fonts/DM_Sans/DMSans-Italic-VariableFont_opsz,wght.ttf');
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('./assets/fonts/DM_Sans/DMSans-VariableFont_opsz,wght.ttf');
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('./assets/fonts/Bricolage_Grotesque/BricolageGrotesque-VariableFont_opsz,wdth,wght.ttf');
    font-display: swap;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--neutral-900);
    font-family: 'DM Sans', sans-serif;
}

/*  VARIABLES    */

:root {
    /* NEUTRAL COLOR */
    --neutral-900: #02012C;
    --neutral-800: #262540;
    --neutral-700: #302F4A;
    --neutral-600: #3C3B5E;
    --neutral-300: #ACACB7;
    --neutral-200: #D4D3D9;
    --neutral-0: #FFFFFF;
    
    /* ACCENT COLORS */
    --orange-500: #FF820A;
    --blue-500: #4658D9;
    --blue-700: #2B1B9C;

    /* FONT PRESETS (Converted to REM) */
    --font-preset-1: italic 600 6rem/100% 'DM Sans';
    --font-preset-1-letter-spacing: -0.125rem;
    --font-preset-2: 700 3.25rem/120% 'Bricolage Grotesque';
    --font-preset-3: 300 2rem/100% 'DM Sans';
    --font-preset-4: 700 1.75rem/120% 'DM Sans';
    --font-preset-5: 600 1.25rem/120% 'DM Sans';
    --font-preset-5m: 500 1.25rem/120% 'DM Sans';
    --font-preset-6: 500 1.125rem/120% 'DM Sans';
    --font-preset-7: 500 1rem/120% 'DM Sans';
    --font-preset-8: 500 0.875rem/120% 'DM Sans';

    /* SPACING  */
    --spacing-0: 0;
    --spacing-025: 0.125rem;  /* 2px */
    --spacing-050: 0.25rem;   /* 4px */
    --spacing-075: 0.375rem;  /* 6px */
    --spacing-100: 0.5rem;    /* 8px */
    --spacing-125: 0.625rem;  /* 10px */
    --spacing-150: 0.75rem;   /* 12px */
    --spacing-200: 1rem;      /* 16px */
    --spacing-250: 1.25rem;   /* 20px */
    --spacing-300: 1.5rem;    /* 24px */
    --spacing-400: 2rem;      /* 32px */
    --spacing-500: 2.5rem;    /* 40px */
    --spacing-600: 3rem;      /* 48px */
    --spacing-800: 4rem;      /* 64px */
    --spacing-1000: 5rem;     /* 80px */
    --spacing-1200: 6rem;     /* 96px */
    --spacing-1400: 7rem;     /* 112px */
    --spacing-1600: 8rem;     /* 128px */
    --spacing-1800: 8.75rem;  /* 140px */

    /* RADIUS */
    --radius-0: 0;
    --radius-4: 0.25rem;
    --radius-6: 0.375rem;
    --radius-8: 0.5rem;
    --radius-10: 0.625rem;
    --radius-12: 0.75rem;
    --radius-16: 1rem;
    --radius-20: 1.25rem;
    --radius-24: 1.5rem;
    --radius-full: 999rem;
}

/*  LAYOUT  */

.container {
    width: 100%;
    max-width: 77rem;
    margin: 0 auto;
    padding: var(--spacing-100) var(--spacing-400) var(--spacing-1000);
}

.main-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-600);
    margin: var(--spacing-800) auto 0;
    width: 100%;
    text-align: center;
}

.grid-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-400);
    width: 100%;
}

/* ------------------------ */

/*  HEADER */

.container__header {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 75rem;
    margin: 0 auto;
    padding: var(--spacing-200) 0;
}

.app-title {
    font: var(--font-preset-2);
    color: var(--neutral-0);
    width: 100%;
    max-width: 46rem;
    margin: var(--spacing-800) 0;
    padding: var(--spacing-150);
    display: flex;
    justify-content: center;
    text-align: center;
}

.app-title:not(.page-header) {
    text-align: center;
    justify-content: center;
    padding: var(--spacing-150); 
    margin: var(--spacing-800) auto;
    max-width: 100%;
}

.app-title__text {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

/* ------------------------ */

/*  UNITS SELECTOR  */

.container__header-dropdown {
    position: relative;
}

.dropdown__trigger {
    background-color: var(--neutral-800);
    color: var(--neutral-0);
    font: var(--font-preset-7);
    padding: var(--spacing-150) var(--spacing-200);
    border: none;
    border-radius: var(--radius-8);
    cursor: pointer;
    gap: var(--spacing-125);
    min-width: 7.5rem;
    height: 2.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown__menu {
    background-color: var(--neutral-800);
    border: solid 1px var(--neutral-600);
    min-width: 13.5rem;
    border-radius: var(--radius-12);
    padding: var(--spacing-100) var(--spacing-075);
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.625rem);
    transition: all 0.2s ease;
    margin-top: var(--spacing-100);
}

.dropdown__menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
} 

.dropdown__action {
    background-color: var(--neutral-800);
    color: var(--neutral-0);
    padding: var(--spacing-125) var(--spacing-100);
    font: var(--font-preset-7);
    border-radius: var(--radius-8);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 2.5rem;
    gap: var(--spacing-125);
    text-align: left;
    transition: background-color 0.2s;
    font-weight: bold;
}

.dropdown__action:hover {
    background-color: var(--neutral-700);
}

.dropdown__item {
    padding: var(--spacing-0);
    gap: var(--spacing-050);
    display: flex;
    flex-direction: column;
}

hr {
    background-color: var(--neutral-600);
    border: none;
    height: 1px;
    margin: var(--spacing-075) var(--spacing-0);
}

.dropdown__label {
    min-width: 12.5rem;
    height: 1.5rem;
    padding: var(--spacing-075) var(--spacing-100) var(--spacing-0) var(--spacing-100);
    margin: var(--spacing-0);
    color: var(--neutral-300);
    font: var(--font-preset-8);
    gap: var(--spacing-100);
}

.dropdown__group {
    gap: var(--spacing-100);
}

.dropdown__option {
    background-color: var(--neutral-800);
    color: var(--neutral-0);
    padding: var(--spacing-125) var(--spacing-100);
    font: var(--font-preset-7);
    border: none;
    width: 100%;
    height: 2.5rem;
    gap: var(--spacing-125);
    border-radius: var(--radius-8);
    text-align: left;
    margin: var(--spacing-050) var(--spacing-0);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.dropdown__option:hover {
    background-color: var(--neutral-700);
}

.dropdown__option.selected {
    background-color: var(--neutral-700);
    color: white;
}

.dropdown__option .dropdown__checkmark {
    display: none;
    margin-left: auto;
    width: 1rem;
}

.dropdown__option.selected .dropdown__checkmark {
    display: inline;
}

/* ------------------------ */

/*  SEARCH COMPONENT    */

.search {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-200);
    margin: auto;
    position: relative;
    width: 100%;
    max-width: 41rem;
}

.search__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-200);
    border-radius: var(--radius-24);
    margin: auto;
    position: relative;
    width: 100%;
}

.search__input {
    display: flex;
    align-items: center;
    width: 100%;
    flex-grow: 1;
}

.search__form {
    width: 100%;
    font: var(--font-preset-5m);
    color: var(--neutral-200);
    outline: none;
    border: none;
    background: transparent;
    position: relative;
}

input {
    width: 100%;
    font: var(--font-preset-5m);
    color: var(--neutral-200);
    outline: none;
    border: none;
    background: transparent;
    padding: var(--spacing-200) var(--spacing-300);
    border-radius: var(--radius-12);
    background-color: var(--neutral-800);
}

.search__button {
    padding: var(--spacing-200) var(--spacing-300);
    width: 100%;
    border: none;
    background-color: var(--blue-500);
    border-radius: var(--radius-12);
    font: var(--font-preset-5m);
    color: var(--neutral-0);
    cursor: pointer;
}

.search__results {
    position: absolute;
    background: var(--neutral-800);
    border: 1px solid var(--neutral-700);
    border-radius: var(--radius-12);
    overflow-y: auto;
    z-index: 3;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.1);
    font: var(--font-preset-7);
    color: var(--neutral-0);
    width: 100%;
    top: 4.5rem;
    text-align: left;
}

.search__results.hidden {
    display: none;
}

.search__result {
    padding: var(--spacing-125);
    cursor: pointer;
    margin: var(--spacing-100);
}

.search__result:hover {
    background-color: var(--neutral-700);
    border: 1px solid var(--neutral-600);
    border-radius: var(--radius-8);
}

/* ------------------------ */

/*  WEATHER COMPONENTS  */

.grid-layout__left-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-400);
    width: 100%;
}

.weather {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-200);
}

.weather__info {
    background-color: var(--neutral-800);
    min-height: 18rem;
    border-radius: var(--radius-20);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-400);
    padding: var(--spacing-400);
    align-items: center;
    background-image: url('./assets/images/bg-today-large.svg');
    background-size: cover;
    background-position: center;
}

.weather__location {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-200);
    max-width: 18.75rem;
    text-align: center;
}

.weather__info h2 {
    font: var(--font-preset-4);
    color: var(--neutral-0);
    margin: var(--spacing-0);
}

.weather__date {
    font: var(--font-preset-6);
    color: var(--neutral-0);
    margin: var(--spacing-0);
}

.weather__temperature {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-200);
}

.weather__icon {
    width: 7.5rem;
    height: 7.5rem;
}

.weather__degrees {
    font: var(--font-preset-1);
    color: var(--neutral-0);
    margin: var(--spacing-100) var(--spacing-0);
}

.key-metrics__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-200);
    padding: var(--spacing-0);
}

.key-metrics__item {
    background-color: var(--neutral-800);
    list-style: none;
    width: 100%;
    min-height: 7.5rem;
    border-radius: var(--radius-12);
    border: 1px solid var(--neutral-600);
}

.key-metrics__item-content {
    padding: var(--spacing-250);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-300);
    text-align: left;
}

.key-metrics__label {
    font: var(--font-preset-6);
    color: var(--neutral-200);
    margin: var(--spacing-0);
}

.key-metrics__value {
    font: var(--font-preset-3);
    color: var(--neutral-0);
    margin: 0;
}

.daily-forecast {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-100);
    min-height: 13rem;
}

.daily-forecast__header {
    font: var(--font-preset-5);
    color: var(--neutral-0);
    text-align: left;
}

.daily-forecast__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-150);
    padding: var(--spacing-200) 0;
}

.daily-forecast__item {
    background-color: var(--neutral-800);
    height: 10.25rem;
    border-radius: var(--radius-12);
    border: 1px solid var(--neutral-600);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: unset;
}

.daily-forecast__day {
    font: var(--font-preset-6);
    color: var(--neutral-0);
}

.daily-forecast__icon {
    width: 3.75rem;
}

.daily-forecast__temps {
    font: var(--font-preset-7);
    color: var(--neutral-0);
    display: flex;
    flex-direction: row;
    gap: var(--spacing-300);
    align-items: center;
}

/* ------------------------ */

/* HOURLY FORECAST */

.grid-layout__right-column {
    width: 100%;
}

.hourly-forecast {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-200);
    padding: var(--spacing-300) var(--spacing-300) var(--spacing-400);
    background-color: var(--neutral-800);
    border-radius: var(--radius-20);
    position: relative;
}

.hourly-forecast__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hourly-forecast__header-label {
    font: var(--font-preset-5);
    color: var(--neutral-0);
    margin: var(--spacing-0);
}

.hourly-forecast__container {
    position: relative;
    display: inline-block;
}

.hourly-forecast__trigger {
    background-color: var(--neutral-600);
    color: var(--neutral-0);
    padding: var(--spacing-150) var(--spacing-200);
    border: none;
    border-radius: var(--radius-8);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-125);
    min-width: 4.25rem;
    height: 2.25rem;
    position: relative;
    z-index: 2;
    font: var(--font-preset-7);
}

.hourly-forecast__menu {
    background-color: var(--neutral-800);
    border: solid 1px var(--neutral-600);
    min-width: 13.5rem; /* Cleaned */
    border-radius: var(--radius-12);
    padding: var(--spacing-100) var(--spacing-075);
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.625rem);
    transition: all 0.2s ease;
    margin-top: var(--spacing-100);
}

.hourly-forecast__menu.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hourly-forecast__menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.hourly-forecast__dropdown-button {
    background-color: var(--neutral-800);
    color: var(--neutral-0);
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: none;
    border-radius: var(--radius-8);
    cursor: pointer;
    width: 100%;
    height: 2.75rem;
    text-align: left;
    transition: background-color 0.2s;
    font: var(--font-preset-7);
}

.hourly-forecast__dropdown-button:hover {
    background-color: var(--neutral-700);
}

.hourly-forecast__list {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-0);
    gap: var(--spacing-200);
    width: 100%;
}

.hourly-forecast__item {
    background-color: var(--neutral-700);
    border-radius: var(--radius-8);
    border: 1px solid var(--neutral-600);
    width: 100%;
    min-height: 3.75rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.hourly-forecast__item-left {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: var(--spacing-150);
}

.hourly-forecast__icon {
    width: 2.5rem;
    height: 2.5rem;
}

.hourly-forecast__time {
    font: var(--font-preset-5m);
    color: var(--neutral-0);
    margin: var(--spacing-200);
}

.hourly-forecast__temp {
    font: var(--font-preset-7);
    color: var(--neutral-0);
    margin: var(--spacing-200);
}

/* ------------------------ */

/*  SKELETON LOADING    */

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--neutral-800) 25%, var(--neutral-600) 50%, var(--neutral-800) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    color: transparent;
    pointer-events: none;
    border-radius: 0.75rem; 
}

.search__skeleton {
    width: 100%;
    border-radius: var(--radius-24);
    background: linear-gradient(90deg, var(--neutral-800) 25%, var(--neutral-600) 50%, var(--neutral-800) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    position: absolute;
    display: none;
}

.search.skeleton .search__content {
    width: 100%;
    max-width: 41rem;
}

.search.skeleton .search__skeleton {
    display: block;
}

.search.skeleton .search__input,
.search.skeleton .search__button {
    visibility: hidden;
}

.daily-forecast__header .app-title.skeleton,
.daily-forecast__header span.skeleton {
    border-radius: 0.25rem;
    display: inline-block;
    min-width: 7.5rem;
    color: transparent;
}

.hourly-forecast__header.skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-12);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hourly-forecast__header.skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--neutral-800) 25%, var(--neutral-600) 50%, var(--neutral-800) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    z-index: 1;
}

.hourly-forecast__header.skeleton > * {
    visibility: hidden;
}

.hourly-forecast__item.skeleton .hourly-forecast__icon {
    visibility: hidden;
}

.hourly-forecast__item.skeleton .hourly-forecast__time, 
.hourly-forecast__item.skeleton .hourly-forecast__temp,
.key-metrics__item.skeleton .key-metrics__label,
.key-metrics__item.skeleton .key-metrics__value {
    opacity: 0;
}

.weather__info.skeleton {
    background: none;
    background-image: none;
    position: relative;
    overflow: hidden;
}

.weather__info.skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--neutral-800) 25%, var(--neutral-600) 50%, var(--neutral-800) 75%);
    background-size: 200% 100%;
    background-position: 200% 0;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-20);
}

.weather-info.skeleton > * {
    visibility: hidden;
}

/* ------------------------ */

/*  MEDIA QUERIES   */

@media screen and (max-width: 767px) {
    .container__header > img {
        height: 2rem;
        width: auto;
    }

    .dropdown__trigger {
        min-width: 7rem;
        height: 2.5rem;
        padding: var(--spacing-100) var(--spacing-150);
        font: var(--font-preset-8);
        gap: var(--spacing-075);
    }
    
    .weather__info {
        padding: var(--spacing-200);
    }

    .weather__icon {
        width: 6rem;
        height: 6rem;
    }
    
    .weather__degrees {
        font-size: 5rem;
    }
    
    .weather__temperature {
        gap: var(--spacing-100);
    }
}

@media screen and (min-width: 768px) {
    .container {
        padding: var(--spacing-100) var(--spacing-800) var(--spacing-1000);
    }
    .search__content, .search {
        flex-direction: row;
    }
    .search__button {
        width: 7.25rem;
    }
    .weather__info {
        flex-direction: row;
        justify-content: space-around;
        text-align: left;
    }
    .weather__location {
        align-items: flex-start;
        text-align: left;
    }
    .key-metrics__list {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-300);
    }

    .daily-forecast__list {
        grid-template-columns: repeat(7, 1fr);
        gap: var(--spacing-100);
    }
}

@media screen and (min-width: 1025px) {
    .container {
        padding: var(--spacing-300) 0 var(--spacing-1000);
    }
    .grid-layout {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--spacing-400);
    }
    .grid-layout__left-column {
        grid-column: span 8;
    }
    .grid-layout__right-column {
        grid-column: span 4;
    }
}