/* --------------------------
----- Table of contents -----

Root variables
General styles
    Elements
    Messages
    Buttons
Header
    Navbar
    Navbar toggler
Base template
Index page
About page
Account page
Account management
Reservation page
Information pages
Menu page
Footer
Media queries

------- End of table --------
---------------------------*/

/* --------------------------
------- Root variables ------
-------------------------- */

:root {
  /* Project color pallet */
  --color-primary-bg: #f8f6d1;
  --color-secondary-bg: #efc600;
  --color-tertiary-bg: #e1c10c10;
  --color-primary: #073503;
  --color-primary-light: #a0da99;
  --color-secondary: #1f7405;
  --color-tertiary: #270b03;
  --color-tertiary-light: #ca7c66;

  /* Alert messages */
  --bs-success-text-emphasis: var(--color-primary);
  --bs-success-bg-subtle: var(--color-primary-light);
  --bs-success-border-subtle: var(--color-primary);

  --bs-danger-text-emphasis: var(--color-tertiary);
  --bs-danger-bg-subtle: var(--color-tertiary-light);
  --bs-danger-border-subtle: var(--color-tertiary);

  --bs-info-text-emphasis: var(--color-tertiary);
  --bs-info-bg-subtle: var(--color-tertiary-bg);
  --bs-info-border-subtle: var(--color-secondary-bg);

  --bs-border-radius: var(--border-radius-iconic);
  --bs-border-width: var(--border-width-iconic);

  /* Iconic styles */
  --border-radius-iconic: 2rem;
  --border-width-iconic: 2px;
  --border-width-solid-iconic: 2px solid;
  --radius-right-only: 0 1rem 1rem 0;
  --radius-left-only: 1rem 0 0 1rem;
  --border-radius-images-all: 1rem 1rem 1rem 1rem;
  --box-shadow: 0 0 1rem var(--color-tertiary);

  /* Project fonts */
  --button-font: "M PLUS Rounded 1c", sans-serif;
  --main-font: "Noto Sans", sans-serif;
  --headings: "Merienda", cursive;
}

/* --------------------------
------- General styles ------
-------------------------- */

/* Elements */
header,
body {
  background-color: var(--color-primary-bg);
  color: var(--color-primary);
}

body {
  min-height: 100vh;
}

h1,
h2 {
  font-family: var(--headings);
  font-size: 2rem;
}

p,
div {
  font-family: var(--main-font);
}

span {
  font-family: inherit;
}

li,
button,
.btn-iconic,
.btn-iconic-reverse,
.btn-warning,
#back-one-page {
  font-family: var(--button-font);
  text-transform: uppercase;
  list-style-type: none;
}

input,
.form-control,
#id_party_size,
#id_time,
#id_category {
  border: var(--border-width-solid-iconic) var(--color-primary);
  background-color: var(--color-tertiary-bg);
  color: var(--color-primary);
  padding: 0.3rem 0.8rem 0.4rem;
  border-radius: var(--border-radius-iconic);
  margin: 0.2rem 0;
  outline: none;
  font-size: 90%;
  text-align: center;
}

input:hover,
input:focus,
#id_party_size:hover,
#id_time:hover,
#id_category:hover,
#id_content:hover,
#id_price_1:hover {
  border: var(--border-width-solid-iconic) var(--color-secondary);
  outline: none;
}

hr {
  opacity: 1;
  border-radius: var(--border-radius-iconic);
}

footer {
  background-color: var(--color-tertiary);
  color: var(--color-primary-bg);
}

:focus-visible {
  outline: 2px solid var(--color-secondary-bg);
  outline-offset: 2px;
}
.nav-link:focus-visible {
  outline: 2px solid var(--color-secondary-bg);
  outline-offset: 2px;
  box-shadow: none;
  color: var(--color-primary);
}

::placeholder {
  color: var(--color-tertiary);
}

.special-font {
  font-family: var(--headings);
}

.asteriskField {
  display: none;
}

/* Messages */
#msg {
  padding: 1rem 3rem;
}

/* Buttons */
.nav-link,
.btn-iconic,
#override-bootstrap .account-management button,
#override-bootstrap .account-management a {
  color: var(--color-primary);
}

.navbar-nav {
  color: var(--color-primary);
  background-color: var(--color-primary-bg);
}

.nav-link.btn-iconic {
  box-shadow: 0 0 0.4rem var(--color-primary-bg);
}

.btn-iconic,
.btn-iconic-reverse,
.btn-warning,
#override-bootstrap .account-management button,
#override-bootstrap .account-management a.btn-iconic,
#override-bootstrap .account-management a.btn-iconic-reverse,
#back-one-page {
  border: var(--border-width-solid-iconic) var(--color-primary);
  border-radius: var(--border-radius-iconic);
  padding: 6px 10px;
  background-color: transparent;
}

a.btn-iconic,
a.btn-iconic-reverse {
  padding: 6px 6px 6px 10px;
}

#override-bootstrap .account-management button:hover,
#override-bootstrap .account-management a.btn-iconic:hover,
#override-bootstrap .account-management a:hover,
#override-bootstrap header a:hover,
.btn-iconic:hover,
.btn-iconic-reverse:hover,
.btn-warning:hover,
#back-one-page:hover {
  color: var(--color-secondary);
  transform: scale(1.1);
  transition: all 0.4s ease-out;
}

#override-bootstrap .account-management button:hover,
#override-bootstrap .btn-iconic:hover {
  background-color: var(--color-primary);
  color: var(--color-primary-bg);
  text-shadow: none;
}

#override-bootstrap .account-management button.btn-iconic-reverse,
#override-bootstrap .account-management a.btn-iconic-reverse,
.btn-iconic-reverse {
  background-color: var(--color-primary);
  color: var(--color-primary-bg);
}

#override-bootstrap .account-management button.btn-iconic-reverse:hover,
#override-bootstrap .account-management a.btn-iconic-reverse:hover,
.btn-iconic-reverse:hover {
  color: var(--color-primary-light);
}

.btn-warning,
#override-bootstrap .account-management button.btn-warning {
  background-color: var(--color-tertiary);
  color: var(--color-primary-bg);
  border: var(--border-width-solid-iconic) var(--color-tertiary);
}

.btn-warning:hover,
#override-bootstrap .account-management button.btn-warning:hover {
  color: var(--color-tertiary-light);
}

/* --------------------------
----------- Header ----------
-------------------------- */

/* Navbar */
#override-bootstrap .nav-link.active,
#override-bootstrap .nav-link.show {
  color: var(--color-secondary);
  border-bottom: var(--border-width-solid-iconic) var(--color-secondary);
  border-radius: var(--border-radius-images-all);
}

#header-container {
  height: 8rem;
  transition: all 1s ease-out;
}

#header-address-nav,
#header-phone-nav,
#header-address,
#header-phone {
  position: absolute;
}

#header-address-nav {
  top: 1rem;
  right: 6%;
}

#header-phone-nav {
  top: 1rem;
  left: 6%;
}

#header-address,
#header-phone {
  left: 10%;
  display: none;
}

#header-address {
  top: 50%;
}

#header-phone {
  top: 30%;
}

.soft-cushion {
  height: 6vh;
  transition: all 1s ease-out;
}

.navbar-brand {
  display: none;
}

.navbar-brand img {
  width: 8rem;
}

#main-logo {
  width: 90%;
  max-width: 30rem;
  display: block;
  margin: 0 auto;
}

/* Navbar toggler */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
  border: var(--border-width-solid-iconic) var(--color-tertiary);
}

.toggler-icon {
  width: 30px;
  height: 4px;
  border-radius: var(--border-radius-iconic);
  background-color: var(--color-tertiary);
  display: block;
  transition: transform 1s;
}

.middle-bar {
  margin: 5px auto;
}

.navbar-toggler .top-bar {
  transform: translate(5px) rotate(45deg);
  transform-origin: 5% 5%;
}

.navbar-toggler .middle-bar {
  opacity: 0;
}

.navbar-toggler .bottom-bar {
  transform: translate(5px) rotate(-45deg);
  transform-origin: 5% 90%;
}

.navbar-toggler.collapsed .top-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .toggler-icon {
  background-color: var(--color-primary);
}

.navbar-toggler.collapsed,
.navbar-toggler {
  padding: 0.8rem;
  border: var(--border-width-solid-iconic) var(--color-primary);
  border-top-left-radius: 1.3rem 50%;
  border-top-right-radius: 1.3rem 50%;
  border-bottom-left-radius: 1.3rem 50%;
  border-bottom-right-radius: 1.3rem 50%;
}

/* --------------------------
-------- Base template ------
-------------------------- */

#symbol-left,
#symbol-right {
  height: 100vh;
  position: fixed;
  opacity: 0.04;
  z-index: 1030;
  pointer-events: none;
}

#symbol-left {
  top: 11%;
  right: 30%;
}

#symbol-right {
  top: 35%;
  left: 40%;
}

/* --------------------------
--------- Index page --------
-------------------------- */

.card {
  background-color: transparent;
  border: none;
  color: var(--color-primary);
}

.card img {
  border-radius: 20%;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  transform: scale(1.3);
  transition: all 0.4s ease-out;
}

.carousel-control-prev-icon:hover {
  background-image: url("../images/chevron-left-light.png");
}
.carousel-control-next-icon:hover {
  background-image: url("../images/chevron-right-light.png");
}

#welcome-img + div h1 {
  font-size: 3rem;
}
.carousel-control-next,
.carousel-control-prev {
  opacity: 1;
}

.carousel-control-prev-icon {
  background-image: url("../images/chevron-left-dark.png");
}

.carousel-control-next-icon {
  background-image: url("../images/chevron-right-dark.png");
}

#welcome-img {
  height: 60vh;
  background-color: var(--color-tertiary-bg);
  background-image: url("../images/banana-palace-outdoor-pexels-2901215-small-screen.webp");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: cover;
}

a.mt-2.mt-lg-3.btn-iconic.text-decoration-none {
  padding-right: 10px;
}

/* --------------------------
--------- About page --------
-------------------------- */

#hours-and-location {
  font-size: 2rem;
}

#main-about-img,
#map-img,
.about-images {
  border-radius: var(--border-radius-images-all);
  box-shadow: var(--box-shadow);
  background-color: var(--color-tertiary-bg);
  background-repeat: no-repeat;
  background-size: cover;
}

#main-about-img,
#map-img {
  height: 22rem;
}

.about-images {
  height: 17rem;
}

#main-about-img,
#account-img {
  background-image: url("../images/main-about-img.webp");
  background-position: center;
}

#map-img {
  background-image: url("../images/phone-map-nature.webp");
  background-position: bottom;
}

.about-img-1 {
  background-image: url("../images/tropical-table-setting.webp");
  background-position: bottom;
}

.about-img-2,
.about-img-3,
.about-img-4 {
  background-position: center;
}

.about-img-2 {
  background-image: url("../images/woman-enjoying-exotic-food.webp");
}

.about-img-3 {
  background-image: url("../images/dimlit-mysterious-bar.webp");
}

.about-img-4 {
  background-image: url("../images/private-room-rainforest-setting.webp");
}

/* --------------------------
-------- Account page -------
-------------------------- */

.fa-ranking-star,
.fa-star,
#click-me {
  color: var(--color-secondary-bg);
}

a:has(> i.fa-star) {
  color: var(--color-primary);
}

.fa-heart,
a:has(i.fa-heart) #click-me,
a:has(> i.fa-heart) {
  color: #d641c2;
}

a.text-decoration-none.btn-warning.me-1 {
  padding-right: 6px;
}

/* Uses same image as about page #main-about-img */
#account-img {
  height: 17rem;
  background-repeat: no-repeat;
  background-size: cover;
}

#user-details li {
  text-transform: none;
  font-family: var(--main-font);
  padding-bottom: 0.4rem;
}

#account-info-text {
  font-size: 95%;
}

#click-me {
  opacity: 0;
  transition: opacity 2s ease-in;
}

/* --------------------------
----- Account management ----
-------------------------- */

.account-management a {
  color: var(--color-primary);
}

.account-management {
  max-width: 16rem;
}

.account-management ul {
  padding-left: 0;
}

.account-management li {
  margin-bottom: 0.4rem;
}

.account-management h1,
.account-management h2,
.account-management p,
.account-management ul,
.account-management button {
  margin-bottom: 0.75rem;
}

#id_password_helptext {
  margin-top: 0.4rem;
  display: block;
}

hr:has(+ h2) {
  margin-top: 0.25rem;
}

.account-management li {
  text-transform: none;
  font-family: var(--main-font);
  font-size: 80%;
  line-height: 1.1rem;
  font-weight: bold;
}

.account-management .errorlist li {
  font-size: 100%;
  font-weight: bold;
  color: var(--color-tertiary);
  line-height: normal;
}

/* --------------------------
----- Information pages -----
-------------------------- */

.info-page {
  max-width: 40rem;
  margin-bottom: 2rem;
}

.info-page h1 {
  margin-bottom: 1.5rem;
}

.info-page li {
  font-family: var(--main-font);
  text-transform: none;
  padding-bottom: 0.3rem;
}

#back-one-page {
  font-size: 100%;
}

/* --------------------------
--------- Menu Page ---------
-------------------------- */

#menu-page h1 {
  font-size: 2.5rem;
}

#menu-page {
  max-width: 40rem;
}

#menu-page p {
  max-width: 22rem;
  margin: 1rem auto;
}

/* --------------------------
----------- Footer ----------
-------------------------- */

#override-bootstrap footer a {
  color: var(--color-primary-bg);
}

#override-bootstrap footer a:hover {
  color: var(--color-secondary-bg);
  transition: color 1s ease-out;
}

.footer-links-extra {
  min-height: 2rem;
}

footer .footer-links li {
  font-size: 90%;
}

.footer-links-extra li {
  text-transform: capitalize;
  font-size: 80%;
  list-style-type: none;
  padding-inline-start: 0;
}

.social-media-symbols li {
  font-size: 2.3rem;
}

/* --------------------------
------- Media queries -------
-------------------------- */

/* Media query for bigger than phone - Bootstrap class sm */
@media screen and (min-width: 576px) {
}

/* Media query for tablet - Bootstrap class md */
@media screen and (min-width: 768px) {
  /* Base */
  h1 {
    font-size: 2.5rem;
  }

  header li {
    font-size: 95%;
  }

  /* Header */
  .navbar-brand img {
    width: 6rem;
  }

  /* Main */
  #symbol-left {
    right: 60%;
  }

  #symbol-right {
    left: 70%;
  }

  /* index.html */
  #welcome-img {
    border-radius: var(--radius-right-only);
    box-shadow: var(--box-shadow);
  }

  /* Account management */

  .account-management ul,
  .wider-text {
    width: 37ch;
    margin-left: -5ch;
  }

  .account-management h1 {
    width: 15ch;
    margin-left: -3ch;
  }

  .account-management h2 {
    width: 11ch;
  }

  /* account.html */
  #account-img {
    height: 33rem;
    border-radius: var(--radius-left-only);
    box-shadow: var(--box-shadow);
  }

  #account-info-text {
    font-size: 85%;
  }

  #user-details {
    font-size: 95%;
  }
}

/* Media query for big tablet - Bootstrap class lg */
@media screen and (min-width: 992px) {
  /* Header */
  #header-address-nav {
    right: 10%;
  }

  #header-phone-nav {
    left: 10%;
  }

  header li {
    font-size: 1rem;
  }

  .navbar-brand img {
    width: 8rem;
  }

  /* Main */
  #symbol-left {
    right: 70%;
  }

  #symbol-right {
    left: 80%;
  }

  /* Account page */
  #account-img {
    border-radius: var(--border-radius-images-all);
  }

  #account-info-text {
    font-size: 95%;
  }
}

/* Media query for small laptop - Bootstrap class xl */
@media screen and (min-width: 1200px) {
  /* Header */
  #header-address-nav {
    right: 15%;
  }

  #header-phone-nav {
    left: 15%;
  }
}

/* Media query for laptop - Bootstrap class xxl */
@media screen and (min-width: 1400px) {
  /* index.html */
  #welcome-img {
    background-image: url("../images/banana-palace-outdoor-pexels-2901215-big-screen.webp");
    background-position: left bottom;
    background-size: cover;
    border-radius: var(--border-radius-images-all);
  }
}

/* Media query for desktop */
@media screen and (min-width: 1920px) {
  /* Header */
  #header-address-nav {
    right: 20%;
  }

  #header-phone-nav {
    left: 20%;
  }
}