@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz@0,14..32;1,14..32&display=swap');

@font-face {
   font-family: 'PP Editorial Old';
   src: url('/cprg-218-final-project/fonts/PPEditorialOld-UltralightItalic.woff2') format('woff2'),
      url('/cprg-218-final-project/fonts/PPEditorialOld-UltralightItalic.woff') format('woff');
   font-weight: 200;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: 'PP Editorial Old';
   src: url('/cprg-218-final-project/fonts/PPEditorialOld-Ultralight.woff2') format('woff2'),
      url('/cprg-218-final-project/fonts/PPEditorialOld-Ultralight.woff') format('woff');
   font-weight: 200;
   font-style: normal;
   font-display: swap;
}

* {
   box-sizing: border-box;
}

:root {
   --font: #231F20;
   --green: #2A4149;
   --sky: #B5D0ED;
   --light-tan: #F0EFE3;
   --light-color: #FFFFFF;
   interpolate-size: allow-keywords;
}


body {
   position: relative;
   font-family: 'Inter', sans-serif;
   font-size: 15px;
   font-weight: 300;
   color: var(--font);
   line-height: 1.6;
   margin: 0;
   padding: 0;
}

body.nav-active {
   overflow: hidden;
}

h1 {
   color: var(--light-tan);
   font-family: 'PP Editorial Old', sans-serif;
   font-weight: 200;
   font-size: calc(48px + (88 - 52) * ((100vw - 320px) / 1600));
   line-height: 1.25;
   margin: 0;
}

h2 {
   font-family: 'PP Editorial Old', sans-serif;
   font-weight: 200;
   font-size: calc(32px + (64 - 32) * ((100vw - 320px) / 1600));
   color: var(--green);
   line-height: 1.3;
   margin: 0;
}

h3 {
   font-family: 'PP Editorial Old', sans-serif;
   font-weight: 200;
   font-size: calc(32px + (48 - 32) * ((100vw - 320px) / 1600));   
   line-height: 1.1;
   margin: 0;
}

a {
   display: inline-block;
   position: relative;
   text-decoration: none;
   color: inherit;
}

a:not(.logo-link):not(.button)::after {
   content: '';
   position: absolute;
   width: 0;
   height: 1px;
   bottom: -2px;
   left: 0;
   background-color: var(--light-tan);
   transition: width 0.5s ease;
}

a:not(.logo-link):not(.button):hover::after,
a.active:not(.logo-link):not(.button)::after {
   width: 20px;
}

a.button {
   color: var(--light-color);
   background-color: var(--green);
   border-radius: 999px;
   font-size: 12px;
   letter-spacing: 0.0375rem;
   text-transform: uppercase;
   padding-block: 1.2rem;
   padding-inline: 2.5rem;
   transition: all 0.3s ease;
}

a.button:hover {
   background-color: var(--font);
}

a.button.secondary {
   background-color: var(--light-tan);
   color: var(--font);
}

a.button.secondary:hover {
   background-color: var(--sky);
}

small {
   font-size: 12px;
}

.font-italic {
   font-style: italic;
}

.hidden {
   display: none;
}

.section-content-title {
   overflow: hidden;
}

.container {
   margin: 0 5rem;
   padding-block: 5rem;
}

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

.overlay {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(35, 31, 32, 0.80);
   backdrop-filter: blur(15px);
   pointer-events: none;
}


/* NAVIGATION */
nav {
   position: absolute;
   top: 0;
   display: flex;
   padding: 1.5rem 5rem;
   justify-content: space-between;
   align-items: center;
   height: 140px;
   width: 100%;
   z-index: 3;
   transition: all 0.3s ease-in;
}

nav.active {
   background-color: var(--light-color);
}

nav ul,
nav img,
nav #weather,
nav .mobile-menu {
   width: 33.33%;
}

nav ul {
   list-style: none;
   display: flex;
   gap: 1.5rem;
   padding: 0;
   z-index: 2;
}

nav ul li,
#weather {
   font-weight: 300;
   font-size: 0.8rem;
   text-transform: uppercase;
}

nav ul li a {
   color: var(--light-tan);
}

nav.active ul li a {
   color: var(--font);
}

nav img {
   width: 10rem;
   height: auto;
}

/* HAMBURGER MENU */
nav .mobile-menu {
   display: none;
}

nav #toggleNav {
   position: relative;
   width: 25px;
   height: 20px;
   border: 0;
   background: none;
   cursor: pointer;
   overflow: hidden;
}

nav #toggleNav span {
   opacity: 1;
   left: 0;
   display: block;
   width: 100%;
   height: 1.5px;
   background-color: var(--light-tan);
   position: absolute;
   transform: rotate(0deg);
   transition: .4s ease-in-out;
}

nav.active #toggleNav span {
   background-color: var(--green);
}

nav #toggleNav span:nth-child(1) {
   top: 0;
}

nav #toggleNav span:nth-child(2) {
   top: 9px;
}

nav #toggleNav span:nth-child(3) {
   top: 18px;
}

nav #toggleNav.open span:nth-child(1) {
   transform: translateY(9px) rotate(135deg);
}

nav #toggleNav.open span:nth-child(2) {
   opacity: 0;
   transform: translateX(-60px);
}

nav #toggleNav.open span:nth-child(3) {
   transform: translateY(-9px) rotate(-135deg);
}

/* WEATHER WIDGET */
#weather {
   text-align: right;
   color: var(--light-tan);
   transition: color 0.3s ease-in;
}

nav.active #weather {
   color: var(--font);
}

.hero-title {
   overflow: hidden;
}

/* PAGE BANNER */
.page-hero-banner {
   position: relative;
   height: 70vh;
   max-height: 700px;
   background-size: cover;
   background-position: center;
   padding-top: calc(140px + 2rem);
   padding-bottom: 3rem;
   display: flex;
   align-items: flex-end;
}

.page-hero-banner .container {
   position: relative;
   width: 100%;
   z-index: 2;
}

.page-hero-banner p {
   color: var(--light-tan);
   max-width: 24rem;
}

.page-hero-banner .overlay-black {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%);
   pointer-events: none;
}

/* FOOTER */
footer {
   position: relative;
}

.footer-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: calc(100% - 60px);
   background-image: url('/cprg-218-final-project/assets/lines.svg');
   background-size: contain;
   pointer-events: none;
   opacity: 0.8;
}

footer .container {
   display: flex;
   flex-flow: row wrap;
}

footer a svg {
   height: 12px;
   margin-left: 2px;
}

footer .footer-img {
   width: 40%;
}

footer .footer-location {
   width: 30%;
}
footer .footer-nav,
footer .footer-socials {
   width: 15%;
}

footer img {
   max-width: 14rem;
}

footer .footer-location p {
   margin-top: 0;
}

footer .footer-nav,
footer .footer-socials {
   display: flex;
   flex-direction: column;
   gap: 1.1rem;
}

footer .footer-secondary {
   position: relative;
   display: flex;
   justify-content: space-between;
   padding: 20px;
   background-color: var(--light-tan);
   padding-inline: 5rem;
   z-index: 2;
}

@media screen and (max-width: 1366px) {
   nav .mobile-menu {
      display: block;
   }

   nav ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      top: 140px;
      left: 0;
      width: 100%;
      background-color: var(--light-color);
      padding: 5rem;
      margin: 0;
      transform: scaleY(0);
      transform-origin: top center;
      transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
      height: calc(100vh - 140px);
      pointer-events: none;
      opacity: 0;
   }

   nav ul.active {
      opacity: 1;
      transform: scaleY(1);
      pointer-events: initial;
   }

   nav ul li {
      transform: scaleY(0);
      transition: none;
      opacity: 0;
   }
   
   nav ul.active li {
      font-size: 1.2rem;
      text-align: center;
      padding: 1rem 0;
      opacity: 1;
      transform: scaleY(1);
      transition: all .3s cubic-bezier(0.77, 0.2, 0.05, 1.0);
      transition-delay: .1s;
   }

   nav ul.active li:nth-child(2) {
      transition-delay: .2s;
   }

   nav ul.active li:nth-child(3) {
      transition-delay: .3s;
   }

   nav ul.active li:nth-child(4) {
      transition-delay: .4s;
   }

   nav ul.active li:nth-child(5) {
      transition-delay: .5s;
   }

   nav ul li a:not(.logo-link):not(.button)::after {
      background-color: var(--font);
   }

   a.active:not(.logo-link):not(.button)::after {
      width: 100%;
   }
}

@media screen and (max-width: 1024px) {
   a.button {
      font-size: 10px;
      letter-spacing: 0.025rem;
      padding-block: 1rem;
      padding-inline: 2.2rem;
   }

   nav {
      padding-inline: 2.5rem;
      height: 100px;
   }

   nav ul.active {
      height: calc(100vh - 100px);
      top: 100px;
      padding-inline: 2.5rem;
   }

   nav img {
      width: 8rem;
   }

   .page-hero-banner p {
      max-width: 20rem;
   }

   .container {
      margin-inline: 2.5rem;
      padding-block: 2.5rem;
   }

   footer .footer-img {
      width: 100%;
      margin-bottom: 1.2rem;
   }
 
   footer .footer-location {
      width: 100%;
      margin-bottom: 2.5rem;
   }

   footer .footer-nav,
   footer .footer-socials {
      width: 50%;
   }

   footer .footer-secondary {
      padding-inline: 2.5rem;
   }

}

@media screen and (max-width: 768px) {
   body {
      font-size: 14px;
   }

   nav {
      padding-inline: 1.25rem;
   }

   nav ul li,
   #weather {
      font-size: 0.7rem;
   }

   .container {
      margin-inline: 1.25rem;
   }

   footer .container {
      flex-direction: column;
      text-align: center;
      gap: 1.5rem;
   }

   footer .footer-img,
   footer .footer-location,
   footer .footer-nav,
   footer .footer-socials {
      width: 100%;
   }

   footer .footer-img,
   footer .footer-location {margin-bottom: 0;}

   footer .footer-secondary {
      flex-direction: column;
      align-items: center;
      gap: 4px;
   }
}

@media screen and (max-width: 480px) {
   nav #weather {
      position: absolute;
      right: 1.25rem;
      top: 4.8rem;
      width: auto;
   }
}