/*

KITTY FORTUNES APP: MAIN.CSS
BY: LIZ, NATALIE, AND GEO
========= LICENSED UNDER MIT =========

*/

/* All Imports */
@import "./node_modules/bulma/css/bulma.css";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"); /* Fun icons!? */

@font-face {
  font-family: 'Basteleur Moonlight';
  src: url(../fonts/Basteleur/webfonts/Basteleur-Moonlight.woff);
}
@font-face {
  font-family: 'Basteleur Bold';
  src: url(../fonts/Basteleur/webfonts/Basteleur-Bold.woff);
}
@font-face {
  font-family: 'Inter Tight';
  src: url(../fonts/Inter-Tight/InterTight-VariableFont_wght.ttf);
}

:root { /* Custom Palette */
  --black: #292829;
  --red: #A65A66;
  --blue: #677B80;
  --yellow: #C4A44D;
  --green: #748530;
  --green-light: #b4b683;
  --beige-dark: #BDB099;
  --beige-light: #D6C0AE;
  /* Borders */
  --border-cards: 8px;
  --border-containers: 16px;
  /* Fonts */
  --title-type-bold: 'Basteleur Bold';
  --title-type-light: 'Basteleur Moonlight';
  --body-type: 'Inter Tight';

  /* Bulma Overrides */
   /* Set background color to --black globally */
  --bulma-body-background-color: var(--black);

  /* Change primary color to --green using HSLA color values (mostly for generate and regenerate buttons) */
  --bulma-primary-h: 72deg;
  --bulma-primary-s: 47%;
  --bulma-primary-l: 35%;
}

/* Viewport */
body {
  width: 100vw;
  height: fit-content;
  overflow-x: hidden;
  color: var(--beige-light);
  background: var(--black);
  font-family: var(--body-type);
  font-weight: 500;
}

/* Header / Nav Section */
header {
  background: var(--beige-light);
  position: sticky;
  top: 0;
  width: 100%;
}
#navbarBasic {
  font-family: var(--body-type);
  font-weight: 600;
}
.navbar-brand {
  font-size: 1rem;
  font-family: var(--title-type-bold);
}

/* Main App */
#heroSection { /* Hero beforehand */
  display: block;
  height: 80vh;
  text-align: center;
  align-content: center;
  margin-bottom: 32px;
}
#heroSection img { /* Hero illustration */
  width: auto;
  height: 180px;
  margin: 24px auto;
}
#heroSection p { /* Welcome to.. */
  font-size: 1.4rem;
  font-family: var(--title-type-light);
}
#heroSection #siteTitle {
  font-family: var(--title-type-bold);
  font-size: 1.6rem;
}
#siteTagline {
  font-size: 1rem!important;
}

/* Form container where all results live */
.sectionTitle { /* Titles to indicate start of form */
  font-size: 1.2rem;
  font-family: var(--title-type-bold);
  color: var(--beige-light)!important;
  text-align: center;
  margin: 16px 0;
}
#fortuneForm { /* Actual form element; stacks inputs vertically */
  display: flex;
  flex-direction: column;
  /* gap: 1rem; */
  width: auto;
}
.spacer-sm { /* Custom spacing */
  width: 100%;
  height: 16px;
}
.spacer-md {
  width: 100%; 
  height: 48px;
}
.spacer-lg {
  width: 100%;
  height: 80px;
}
.formImg { /* Form illustrations */
  display: block;
  margin: 0 auto 16px;
  max-width: 100%;
  max-height: 300px;
}
label { /* Labels for each question */
  font-family: var(--title-type-bold);
  font-size: 1.4rem;
  text-align: center;
}
.fortuneContainer h3 { /* Numbers above labels */
  line-height: 2.5rem;
  font-family: var(--title-type-bold);
  font-size: 2.6rem;
}
#topicDropdown, #typeDropdown { /* Custom dropdown styles */
  color: var(--beige-light);
  border: 2px solid var(--beige-light);
  background: var(--black);
}
.fortuneCard { /* Where the form results live */
  padding: 24px;
  border-radius: var(--border-cards);
  background: var(--beige-light);
}
.fortuneCard {
  margin-bottom: 24px;
}
/* Cataas pictures */
.fortuneCard img { 
  border-radius: 5px;
  width: 100%;
}
.btnGroup { /* Allows flex direction: row on regen and fav buttons  */
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 8px;
}
#quoteText, #quoteAuthor { /* Custom text style to match palette */
  color: var(--black);
}
#errorMessage { /* Error alignment fix */
  text-align: center;
}
.favoriteIcon {
  position: absolute;
  z-index: 1000;
  right: 10px;
  top: 10px;
  filter: drop-shadow(4px 4px 10px var(--black));
}

/* Footer */
footer {
  width: 100%;
  position: sticky;
  text-align: center;
  padding: 16px;
}
footer a {
  color: var(--blue);
  text-decoration: underline;
  font-weight: bold;
}

/* Breakpoints */
@media (180px <= width <= 399px) {
  main {
    padding: 0;
  }
  label {
    font-size: 1rem;
  }
  .btnGroup {
    flex-direction: column;
  }
  #heroSection {
    height: 550px;
  }
}