/* -------- Main CSS Stylesheet.
 ==============================================================================
 General Guidelines
 ------------------------------------------------------------------------------
   * Each CSS rule must follow an alphabetical format. 
   * This means each property of a rule should be in alphebetical order from top to bottom
   * with the exception of special character statements at the very top (@, -, etc).
   *
   * HINT: VSCode command "Sort Lines Ascending" set to keybind "alt + a". Use this to 
   * sort properties.
   *
   * This stylesheet is broken down into sections. To jump to them, use the find tool
   * to search for "||".
 ==============================================================================
 Naming Convention (SMACSS Derivative)
 ------------------------------------------------------------------------------
   * Priority is given to classes over ID's in most cases.
   *
   * General naming convention is as follows: 
   * [name/shorthand/state]-[component/state]-[adjustor/Variant]
   * ex. ".sidebar-header" or ".sb-h" // Defines specific component styling.
   * ex. ".btn-primary" or ".text-primary" // Defines primary styling for elements.
   * ex. ".is-active" or ".has-success" // Defines styling for states.
   * ex. ".w-100" or ".h-100" // Utility classes for sizing with percentage.
   *
 =============================================================================*/

/* =====================================
   || General Rules
   =====================================
   * Used for default styling of general elements. No ID's or classes.
   * e.g. body, h, p, links, tables, fonts, padding, blockquote, etc.
*/

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

h1,
h2,
h3,
h4,
h5 {
   font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

p {
   font-family: 'Inter', Arial, Helvetica, sans-serif;
}

h1 {font-size: var(--text-h1);}
h2 {font-size: var(--text-h2);}
h3 {font-size: var(--text-h3);}
h4 {font-size: var(--text-h4);}
h5 {font-size: var(--text-h5);}
p {font-size: var(--text-p);}

label {
   font-weight: 400;
}

/* =====================================
   || Theme & Utility Rules
   =====================================
   * Contains highly-reusable utility classes that can be used on various modules 
   * and elements.
   * Also used for theme and design styling. This can include brand color classes, font
   * size classes, gradient classes, link color classes, etc.
*/

   html { /* Define global reusable Variables/custom properties. Saves time. */
      --color-primary: hsl(220, 77%, 55%);
      --color-primary-accent: #8091B3;
      --color-primary-hover: hsl(220, 57%, 50%);
      --color-secondary: #F5D63D;
      --color-dark: #0D0D0D;
      --color-light: #FFFFFF;
      --color-border: hsl(220, 5%, 80%);
      --color-bg: #d8d9dd;
      --color-unselected: #F7F7F8;
      --color-error: hsl(0, 77%, 53%);
      --color-error-hover: hsl(0, 57%, 48%);

      --text-display: 58px;
      --text-h1: 48px;
      --text-h2: 27px;
      --text-h3: 20px;
      --text-h4: 16px;
      --text-h5: 12px;
      --text-p: 16px;
      --text-p-small: 12px;
   }

   .text-display {
      font-size: var(--text-display);
   }
   .text-intro {
      font-weight: 500;
      font-size: var(--text-h3);
   }

/* Color */

   .text-brand {
      color: var(--color-primary);
   }

/* =====================================
   || Layout Rules
   =====================================
   * Contains styling for the larger sections of a page, as well as alignment styles. Also includes media queries.
   * ID's may be used for larger sections.
   * 
   * e.g. header, footer, sidebar, main navigation, article, container, maincontent, etc.
   * e.g. grid, flex, display, etc.
*/

#body-container {
   display: grid;
}

#header {
   height: 7vh;
   padding: 0 50px;
   border-bottom: 1px solid var(--color-border);
}

#footer {
   height: 5vh;
   padding: 5px 0px;
}

#main {
   background-color: var(--color-bg);
   padding-bottom: 10px;
   padding-top: 10px;
}
#hero-container {
   background-image: url(/images/noise-background.webp);
   padding: 100px 50px;
   height: 100vh;
   position: relative;
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: auto;
   justify-content: center;
   align-items: center;
}
#hero-text{
   text-align: left;
   width: 80%;
}
#hero-image{
   width: 100%;
   height: 50vh;
   text-align: center;
   justify-content: center;
   align-items: center;
}
#hero-bottom{
   height: 10vh;
   text-align: center;
   justify-content: center;
   display: flex;
   justify-content: center;
   align-items: center;
}

/* Alignment (Flex and Grid) */
.flex-header {
   align-items: center;
   display: flex;
}

.flex-footer {
   align-items: center;
   display: flex;
   justify-content: center;
}

.grid-sidebar-header {
   display: grid;
   grid-template-columns: 80% 20%;
   grid-template-rows: 100% auto;
}

/* =====================================
   || Module Rules
   =====================================
   * Contains rules for standalone components. Defined with modularity and reusability
   * in mind. Modules makes up the bulk of your webpage.
   * 
   * Stick to classes. This way we can nest smaller modules within other modules.
   * e.g. cards, carousel, modals, navigation bars, dialog, popup, tooltip, etc.
   * e.g. forms, buttons, sliders, dropdowns, video, audio, etc.
*/

/* Header Bar */
.header-container{
   padding: 5px 0;
   width: 100%;
}

.header-title {
   width: 80%;
}

.header-nav {
   justify-items: end;
   text-align: right;
   width: 20%;
   z-index: 8;
}
.header-nav img {
   cursor: pointer;
   transition: all 300ms ease-in-out;
}

.header-title h1 {
   font-size: 1.0rem;
   font-weight: 800;
   text-align: left;
}

/* Footer */
.footer-social {
   color: var(--color-primary-accent);
   text-align: center;
}
.footer-social i {margin: 0px 5px;}
.footer-social a {
   color: var(--color-primary);
   transition: all 400ms ease-in-out;
}
.footer-social a:hover {
   color: var(--color-primary-hover);
}

/* Sidebar Filter Component */
.sidebar-container {
   background-color: var(--color-light);
   box-shadow: 4px 0px 10px 0 rgba(0, 0, 0, 0.05),
               9px 0px 10px 0px rgba(0, 0, 0, 0.08);
   height: 100vh;
   position: fixed;
   top: 0;
   transition: all 300ms;
   width: 300px;
   z-index: 7;
}
.sidebar-blanket{
   background: black;
   width: 100vw;
   height: 100vh;
   position: fixed;
   opacity: 0.3;
   z-index: 6;
   transition: 300ms ease-in-out;
}
.sidebar-header {
   align-items: center;
   height: 30px;
   justify-content: flex-start;
   padding: 40px 0 30px 28px;
   text-align: left;
}
.sidebar-filters-container {
   padding: 0px 25px;
}

.sidebar-filters {
   font-size: var(--text-h4);
   font-weight: 600;
   margin-bottom: 10px;
} 
.sidebar-filters img {
   width: 78px;
}

.sidebar-button {
   text-align: center;
   margin: 15px 0;
}

/* Button Components */
.btn-primary {
   background-color: var(--color-primary);
   border-radius: 4px;
   border: none;
   color: var(--color-light);
   cursor: pointer;
   font-size: var(--text-p);
   padding: 8px 20px;
   text-align: center;
   transition: all 300ms ease-in-out;
   z-index: 1;
}

.btn-primary:hover {
background-color: var(--color-primary-hover);
}

.btn-submit {
background-color: var(--color-primary);
border-radius: 4px;
border: none;
color: var(--color-light);
cursor: pointer;
font-size: var(--text-p);
padding: 5px 20px;
text-align: center;
transition: all 300ms ease-in-out;
width: 80%;
}

.btn-submit:hover {
background-color: var(--color-primary-hover);
}

.btn-reset {
background-color: var(--color-error);
border-radius: 4px;
border: none;
color: var(--color-light);
cursor: pointer;
font-size: var(--text-p);
padding: 5px 20px;
text-align: center;
transition: all 300ms ease-in-out;
width: 80%;
}

.btn-reset:hover {
background-color: var(--color-error-hover);
}

/* Tag Components (Button Style) */
.tag {
   background-color: var(--color-primary);
   border-radius: 10px;
   border: none;
   color: var(--color-light);
   font-size: var(--text-p-small);
   font-weight: 500;
   height: 23px;
   margin: 0 5px 5px 0;
   opacity: 0.95;
   padding: 2px 12px;
   text-align: center;
   }
   
   .tag:hover {
   opacity: 0.9;
   }
   
   .tag-sans {
   background-color: #BD3939;
   border-radius: 10px;
   color: var(--color-light);
   font-size: var(--text-p-small);
   font-weight: 500;
   height: 23px;
   margin-right: 5px;
   opacity: 0.95;
   padding: 2px 12px;
   text-align: center;
   }
   .tag-serif{
   background-color: hsl(252, 73%, 61%);
   border-radius: 10px;
   border: 2px solid rgba(10, 10, 10, 0.15);
   color: var(--color-light);
   font-size: var(--text-p-small);
   font-weight: 500;
   height: 23px;
   margin-right: 5px;
   opacity: 0.95;
   padding: 2px 12px;
   text-align: center;
   }
   
   .tag-serif:hover,
   .tag-sans:hover {
   opacity: 0.9;
   }

/* =====================================
   || State Rules
   ===================================== 
   * Contains rules for the different possible variations of a single element or module.
   * At its simplest form, it can offer two styles for activated or deactivated states.
   * 
   * Can be applied to layout or modules. Typically utilizes JavaScript to function.
   * e.g. isActive, hasError, InputSuccess, hidden, shown, etc.
*/

/* Sidebar States */
.isOpen {
   visibility: visible;
   left: 0%;
}

.isClosed {
   visibility: hidden;
   left: -100%;
}

/* Sidebar Blanket States */
.translucent {
   visibility: visible;
   opacity: 0.3;
}

.transparent {
   visibility: hidden;
   opacity: 0;
}

/* Hamburger Menu States */
.hamActive{
   transform: rotate(90deg);
}

.hamDefault{
   transform: rotate(0deg);
}

/* Font-Card States */
.cardActive{
   display: block;
   /* opacity: 1; */
}
.cardInactive{
   display: none;
   /* height: 0;
   opacity: 0;
   overflow: hidden; */
}

/* Responsive Design/Layout */
/* Mobile */
@media (max-width: 720px){
   font-card {
      display: block;
      margin: 20px 0;
   }
   .sidebar-container {
      width: 230px;
   }
 }
 /* Tablet */
 @media (min-width:  720px) and (max-width: 1024px){
   font-card {
      display: block;
      margin: 20px 0;
      }
 }
 /* Desktop */
 @media (min-width: 1024px){
   #main {
      padding: 0 0 40px 0;
   }
   font-card {
      background-color: var(--color-unselected);
      width: 100%;
   }
 }