/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
 /* @import "pages/create.css"; */

 * {
   box-sizing: border-box;
   -webkit-tap-highlight-color: transparent;
 }

 input,
 textarea,
 select,
 button {
 width: 100%;
    /*  max-width: 100%; */
   display: block;
   box-sizing: border-box;
   padding: 12px;
   border: 1px solid #d5dae3;
   border-radius: 8px;
   font-family: "Outfit", sans-serif;
   font-size: 16px;
   background: #fff;
   color: #0f2132;
 }
 


 :root {
   --primary-color: #FA553F;
   --main-padding: 20px;
   --black: #0f2132;
   --grey: #344656;
   --white: #fff;
   --brand-primary: #FA553F;
 }

 html {
    scroll-behavior: smooth;
 }



 .divider {
   border-bottom: 10px solid #FFEEEC;
}

body{
   margin: 0;
   font-family: "Outfit", sans-serif;
}

* {
   margin: 0
}

.logo {
   font-family: "Bungee", sans-serif;
   color: var(--black);
}
.ham-icon {
   width: 24px;
   height: 24px;
   color: var(--black);
}
.ham-container {
   display: flex;
   gap: 8px;
   align-items: center;
}
nav {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 100px;
   border-bottom: 1px solid #e0e0e0;
}

.nav-banner {
   display: none;
   padding: 16px;
   text-align: center;
   background-color: #FFEEEC;
   color: var(--black);
   font-weight: 500;
 }
 .nav-banner a {
   color: var(--black);
   font-weight: 600;
   text-decoration: underline;
   letter-spacing: 1px;
 }

 .need-help-card {
   background-color: #FFEEEC;
   padding: 24px;
   border-radius: 20px
 }

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

h1, h2, h3, h4 {
   color: var(--black);
}

p, li {
   color: var(--grey);
   font-size: 18px;
   line-height: 1.5;
}

button {
   background: none;
   font-size: 16px;
   font-weight: 600;
}

a {
   text-decoration: none;
}

select, button, option {
   font-family: "Outfit", sans-serif;
}

.container {
   padding: 48px 140px;
}

.grid-2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   align-items: center;
}

.grid-3 {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 20px;
   align-items: center;
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
    align-items: center;
 }
 

.content {
   display: flex;
   flex-direction: column;
   gap: 20px;

}

header {
   position: sticky;
   top: 0;
   z-index: 20;
   background-color: #fff;
}

.section-header {
   max-width: 800px;
   display: grid;
   gap: 16px;
   text-align: center;
   margin: 0 auto 48px auto;
}

.d-flex {
   display: flex;
   gap: 24px;
   align-items: center;
}

.button-primary{
   display: inline-block;
   background-color: var(--brand-primary);
   color: #fff;
   padding: 14px 40px;
   border-radius: 5px;
   text-decoration: none;
   border: none;
   text-align: center;
   font-size: 16px;
   font-weight: 600;
   &:hover {
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
}


.button-secondary {
   display: inline-block;
   color: var(--primary-color);
   padding: 12px 40px;
   border: 2px solid var(--primary-color);
   border-radius: 5px;
   text-decoration: none;
   text-align: center;
   font-weight: 600;
   &:hover {
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
   }
 }

.button-n-black {
   display: inline-block;
   padding: 12px 24px;
   background-color: var(--black);
   border: none;
   color: #fff;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   text-align: center;
   &:hover {
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
 }

 .button-n-white {
   display: inline-block;
   padding: 16px 32px;
   background-color: #fff;
   border: none;
   color: var(--black);
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   text-align: center;
   &:hover {
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
 }

 .button-danger {
   background-color: #d01d06;
   color: #fff;
   border: none;
   padding: 4px 12px;
   width: auto;
   &:hover {
       box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
   }
}

.logout-btn {
   /* display: inline; */
   width: auto;
   color: #d01d06;
   font-weight: 500;
 }

.danger-color {
   color: #d01d06;
 }

.description-container p, br {
   margin-bottom: 1rem;
 }


 footer h3 {
   color: #527EAD;
 }

/* Login and signup */

 label, input, textarea, select {
   display: block;
   font-size: 18px;
 }

 select {
   font-size: 16px;
 }

 label {
   color: var(--grey);
   margin-bottom: 4px;
 }

 /* input, textarea, select {
   display: block;
   width: 100%;              
   box-sizing: border-box; 
   justify-self: stretch;
   padding: 12px;
   font-family: "Outfit", sans-serif;
   border: 1px solid #d5dae3;
   border-radius: 8px;
 } */

 textarea {
   height: 120px;
 }

 .description-textarea {
   height: 380px;
 }

 .checkbox {
   width: 24px;
   height: 24px;
 }

 .container-sm {
   display: grid;
   grid-template-columns: 1fr;
   /* gap: 24px; */
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
   padding: 80px 0;
 }

 .container-p {
   padding: 100px 140px;
}

 .form-block {
   display: flex;
   flex-direction: column;
   justify-content: stretch;
   gap: 32px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
 }

 .links-block {
   text-align: center;
   margin-top: 36px;
   display: grid;
   gap: 16px;
 }

 .link{
   color: #2563eb;
 }

 .bg-gradient {
   background: linear-gradient(135deg, #f4a34b 0%, #e75c3a 100%);
   background: linear-gradient(135deg, oklch(78% 0.14 65) 0%, oklch(65% 0.18 35) 100%);
   }

.bg-green-gradient {
   background: #0C8A10;
   background: linear-gradient(315deg, #0C8A10, #16C75D);
}


 .divider-sm {
   height: 1px;
   background-color: #d5dae3;
 }

 .box{
   padding: 20px;
   border: 1px solid #d5dae3;
   border-radius: 16px;
 }

 /* Dropdowns / Select tags */
 .select-wrapper {
  position: relative;
  display: inline-block;
}

.select-wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 16px 40px 16px 16px;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  min-width: 200px;
  transition: border-color .2s, box-shadow .2s;
}

.select-wrapper select:hover {
  border-color: var(--brand-primary);
}
.select-wrapper select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}

/* Custom arrow */
.select-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 8px;
  height: 8px;
  border-right: 2px solid #4b5563;
  border-bottom: 2px solid #4b5563;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
  transition: transform .2s;
}

.menu-container {
   padding: 20px;
   /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; */
   box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
   position: absolute;
   top: 16;
   right: 0;
   min-width: 360px;
   margin-left: auto;
   border-radius: 20px;
   z-index: 10;
   background-color: #fff;
   border: 1px solid #d5dae3;
   /* box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; */
}

.hidden {
   display: none !important;
 }
 
 .hero-grid {
   gap: 48px;
}

/* Tablets */
 @media screen and (max-width: 1024px) {
   .container, .container-p{
     padding: 32px;
   }
   
   nav {
      padding: 20px 32px;
   }

   .header {
      margin-bottom: 28px;
   }

   .grid-2, .grid-3, .grid-4 {
      /* grid-template-columns: 1fr; */
   }

   .filter-hidden {
      display: none !important;
    }
 }

/* For screens smaller than 768px, mobile - max-width: 480px */
@media screen and (max-width: 767px) {
   .container, .container-p {
     padding: 48px 24px;
   }

   nav {
      padding: 24px;
   }

   .header {
      margin-bottom: 28px;
   }

   .grid-2, .grid-3, .grid-4 {
      grid-template-columns: 1fr;
   }

   .menu-container {
      position: static;
      border-radius: 0;
   }

   .box{
      padding: 12px;
      border: 1px solid #d5dae3;
    }

    .description-textarea {
      height: 280px;
    }

    .button-primary, .button-secondary {
      padding: 12px 20px;
      width: 100%;
    }
   
 }