@layer global{

  /* dm-sans-300 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300;
    src: url('/assets/fonts/dm-sans-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* dm-sans-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/dm-sans-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* dm-sans-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/fonts/dm-sans-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* dm-sans-600italic - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'DM Sans';
    font-style: italic;
    font-weight: 600;
    src: url('/assets/fonts/dm-sans-v17-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* dm-sans-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/dm-sans-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  /* bricolage-grotesque-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Bricolage Grotesque';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/bricolage-grotesque-v9-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

  :root{
      --c-neutral-900:hsl(243, 96%, 9%) ;
      --c-neutral-800: hsl(243, 27%, 20%);
      --c-neutral-700: hsl(243, 23%, 24%);
      --c-neutral-600: hsl(243, 23%, 30%);
      --c-neutral-300: hsl(240, 6%, 70%);
      --c-neutral-200: hsl(250, 6%, 84%);
      --c-neutral-0:  hsl(0, 0%, 100%);
      --c-orange-500: hsl(28, 100%, 52%); 
      --c-blue-500: hsl(233, 67%, 56%); 
      --c-blue-700:  hsl(248, 70%, 36%); 

      --color-main-bg:var(--c-neutral-900);
      --color-text-light:var(--c-neutral-0);
      --color-text-med-light:var(--c-neutral-200);
      --color-panel-bg-dark:var(--c-neutral-800);
      --color-panel-bg-hover:var(--c-neutral-700);
      --color-panel-bg-med:var(--c-neutral-700);
      --color-panel-bg-light:var(--c-neutral-600);
      --color-panel-border:var(--c-neutral-600);

      --color-button-bg: var(--c-blue-500);
      --color-button-bg-hover: var(--c-blue-700);

      /* Pixel to rem conversion */
      --fs-96:calc(96 / 16 * 1rem);
      --fs-52:calc(52 / 16 * 1rem);
      --fs-32:calc(32 / 16 * 1rem);
      --fs-28:calc(28 / 16 * 1rem);
      --fs-20:calc(20 / 16 * 1rem);
      --fs-18:calc(18 / 16 * 1rem);
      --fs-16:calc(16 / 16 * 1rem);
      --fs-14:calc(14 / 16 * 1rem);

      --font-size-h1:var(--fs-52);
      --font-size-dropdown: var(--fs-14);
      --font-size-search:var(--fs-20);
      --font-size-city:var(--fs-28);
      --font-size-date:var(--fs-18);
      --font-size-temp:var(--fs-96);
      --font-size-panel-title:var(--fs-18);
      --font-size-panel-value:var(--fs-32);
      --font-size-forecast-title:var(--fs-20);
      --font-size-forecast-day:var(--fs-18);
      --font-size-forecast-temp:var(--fs-16);
      --font-size-forecast-dropdown:var(--fs-16);
      --font-size-forecast-hour:var(--fs-20);




      @media(width>=calc(700/16 *1rem)){
          --font-size-dropdown: var(--fs-16);
      }


  }

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

  *{
      margin: 0;
  }

  img{
      max-width: 100%;
  }

  body{
      font-family: "DM Sans", Arial, Helvetica, sans-serif;
      font-weight: 500;
      background-color: var(--color-main-bg);
      color: var(--color-text-light);
      padding-block-end: 80px;
  }

  h1{
      font-family:"Bricolage Grotesque", Arial, Helvetica, sans-serif ;
  }

  input,button, textarea, select{
    font: inherit;
    width: 100%;
    border: none;
  }

  .wrapper{
    display: grid;
    grid-template-columns: 1fr calc(100% - 32px) 1fr;
    
    @media(width >= calc(700/16 *1rem)){
      grid-template-columns: 1fr min(calc(100% - 48px), calc(1216/16 *1rem)) 1fr;
    }

    > * {
      grid-column: 2;

    }
  }

  .visually-hidden{
    position: absolute;
    left:     -10000px;
    top:      auto;
    width:    1px;
    height:   1px;
    overflow: hidden;

    &.skip-link:focus{
      /* position: relative; */
      left: 0;
      width: auto;
      height: auto;
      background-color: var(--color-main-bg);
      color: var(--color-text-light);
      padding: 10px;
      border: 2px solid var(--color-text-light);
    }
  }
  .main{
    display: grid;
    row-gap: 32px;

  }
  
  .dashboard{
    display: grid;
    gap: 32px;
    grid-template-areas: 
      "current"
      "daily"
      "hourly";
    @media(width>=calc(1000/16 * 1rem)){
      gap:48px 32px;
      grid-template-columns: repeat(3, 1fr);
      grid-template-areas: 
        "current current hourly"
        "daily daily hourly";
        gap: 48px 32px;
    }  
  }

  .dropdown{
    background-color: var(--color-panel-bg-dark);
    color: var(--color-text-light);
    border: 0;
    font-size: var(--font-size-dropdown);
    border-radius: 8px;
  }

  .block{
    background-color: var(--color-panel-bg-dark);
    border: 1px solid var(--color-panel-border);
    border-radius: 12px;
  }
  
}

@layer component{
  .header{
    .header_content{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-block-start: 16px;
    }
    
    .header_logo{
      width: calc(137/16 * 1rem);
      
      @media(width>=calc(700/16 * 1rem)){
        width: calc(197/16 * 1rem);

      }
    }
    .header_dropdown{
      width: auto;
      background-image: url(/assets/images/icon-units.svg);
      background-repeat: no-repeat;
      background-position: 16px center;
      padding: 12px 16px 12px 40px;
    }
  }

  .hero{
    .hero_content{
      display: grid;
      justify-items: center;
      padding-block-start: 48px;
    }

    .hero_title{
      font-size: var(--font-size-h1);
      margin-block-end: 48px;
      text-align: center;
      line-height: 1.2;

      @media(width<calc(1000/16 * 1rem)){
        max-width: 15ch;
      }
    }

    .hero_search{
      display: grid;
      gap: 12px 16px;
      width: 100%;
      max-width: calc(656/16 * 1rem);

      @media(width>=calc(700/16 * 1rem)){
        grid-template-columns: 1fr auto;
      }
    }

    .hero_textbox{
      background-image: url("assets/images/icon-search.svg");
      background-repeat: no-repeat;
      
      background-position: 24px center;
      background-color: var(--color-panel-bg-dark);
      font-size: var(--font-size-search);

      padding: 16px 20px 16px 60px;
      color: var(--color-text-med-light);
      border-radius: 12px;
      &:focus{
        outline: 2px solid var(--color-text-med-light);
      }
    }

    .hero_button{
      background-color: var(--c-blue-500);
      border-radius: 12px;
      font-size: var(--font-size-search);
      color: var(--color-text-light);
      padding: 16px 24px;
      transition: background-color 120ms ease-in-out;

      &:hover{
        background-color: var(--color-button-bg-hover);
        cursor: pointer;
      }
    }
  }

  .current{
    grid-area: current;
    .current_weather{
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-block-end: 20px;
      background-image: url("assets/images/bg-today-small.svg");
      background-repeat: no-repeat;
      background-color: var(--c-blue-700);
      background-size: contain;
      padding: 40px 24px;
      background-size: cover;
      background-position: center bottom;
      border-radius: 20px;
      overflow: clip;

      @media(width>=calc(700/16 * 1rem)){
        background-image: url("assets/images/bg-today-large.svg");
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-block: 83px;
      }
    }
    .current_location{
      text-align: center;
    }

    .current_city{
      font-size: var(--font-size-city);
      font-weight: 700;
      line-height: 1.2;
      margin-block-end: 12px;

    }
    .current_date{
      font-size: var(--font-size-date);
      color:var(--color-text-med-light);
      
    }

    .current_info{
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .current_icon{
      width: 120px;
      height: auto;;
    }
    .current_temp{
      font-size: var(--font-size-temp);
      line-height: 1;
      letter-spacing: -2%;
      font-style: italic;
      font-weight: 600;
    }
    .current_conditions{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 16px;

      @media(width>=calc(700/16 * 1rem)){
        grid-template-columns: repeat(4,1fr);
      }
    }
    .current_condition{
      padding: 20px;
    }
    .current_condition-title{
      font-size: var(--font-size-panel-title);
      color: var(--color-text-med-light);
      margin-block-end: 24px;
    }
    .current_condition-value{
      font-size: var(--font-size-panel-value);
      font-weight: 300;

    }
  }

  .daily{
    grid-area: daily;
    .daily_title{
      font-size: var(--font-size-forecast-title);
      margin-block-end: 20px;
    }
    .daily_forecast{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 16px;

      @media(width>=calc(700/16 * 1rem)){
        grid-template-columns: repeat(7,1fr);
      }
    }
    .daily_day{
      padding: 16px 10px;
      display: grid;
      text-align: center;
      gap:16px;
      justify-items: center;
    }
    .daily_day-title{
      font-size: var(--font-size-forecast-day);

    }
    .daily_day-icon{
      width: 60px;
      height: auto;
    }
    .daily_day-temps{
      justify-self: stretch;
      display: flex;
      justify-content: space-between;
      font-size: var(--font-size-forecast-temp);
    }
    .daily_day-low{
      color: var(--color-text-med-light);
    }
  }

  .hourly{
    grid-area: hourly;
    position: relative;

    .hourly_content{
      background-color: var(--color-panel-bg-dark);
      border-radius: 20px;
      padding: 20px 16px;
      max-height: 75vh;
      overflow-y: scroll;
      @media (width>= calc(1000/16 * 1rem)){
        position: absolute;
        height: 100%;
        
      }
    }
    .hourly_header{
      display: flex;
      gap: 40px;
      justify-content: space-between;
      align-items: center;
      margin-block-end: 16px;

    }
    .hourly_title{
      font-size: var(--font-size-forecast-title);
      font-weight: 600;
    }
    .hourly_select{
      background-color: var(--color-panel-bg-light);
      width: auto;
      padding: 8px 16px;
    }
    .hourly_hours{
      display: grid;
      gap: 16px;
    }
    .hourly_hour{
      display: grid;
      grid-template-columns: auto auto 1fr;
      align-items: center;
      padding: 10px 16px 10px 12px;
      gap: 8px;
      background-color: var(--color-panel-bg-med);
      border: 1px solid var(--color-panel-border);
      border-radius: 8px;
    }
    .hourly_hour-icon{
      width: 40px;
      height: auto;
    }
    .hourly_hour-time{
      font-size: var(--font-size-forecast-hour);
    }
    .hourly_hour-temp{
      justify-self: end;
      font-size: var(--font-size-forecast-temp);
    }
  }
}