/* force hash update */

/* Shared background styling */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

body {
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Keep it on for desktops and laptops */
  background-color: #000066; /* Fallback color, dark blue */

  /* Fallback + Modern mobile height fix */
  min-height: 100vh;
  min-height: 100dvh;

  margin: 0;
  font-family: poppins, arial, roboto;
}

/* ==========================================================================
   MOBILE-ONLY BACKGROUND FIX (Targets screens smaller than a tablet)
   ========================================================================== */

@media (max-width: 767.98px) {
  body {
    /* 1. Turns off the buggy fixed behavior on mobile phones */
    background-attachment: scroll !important;

    /* 2. Forces the background to span the body size */
    background-size: cover;
    background-repeat: no-repeat;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Page-specific backgrounds */
.bg-index  {
  background-color:  #070834;
  background-image: url("../images/alexantropov86-wormhole.jpg");
}
.bg-topics {
  background-color: #000000;
  background-image: url("../images/karenpouls-water-drop.jpg");
}
.bg-topic {
  background-color: #31506e;
  background-image: url("../images/ronymichaud-drop-of-water.jpg");
}

.bg-new_topic {
  background-color:  #112da0;
  background-image: url("../images/qimono-earth.jpg");
  font-weight: 700;
}

.bg-new_entry  {
  background-color: #051d39;
  background-image: url("../images/qimono-water.jpg");
  font-weight: 700;
}

.bg-edit_entry  {
  background-color: #00296c;
  background-image: url("../images/pexels-blue.jpg");
}

.bg-register {
  background-color: #01010d;
  background-image: url("../images/susan-lu4esm-moon-5175691_1920.jpg");
}

.bg-login {
  background-color: #3c64c1;
  background-image: url("../images/decster1-hd-wallpaper.png");
}

.bg-props {
  background-color: #0c1427;
  background-image: url("../images/susan-lu4esm-moon.jpg");
  font-weight: 700;
}

/* Global Navigation Bar */
#mainNavbar {
  transition: transform 0.3s ease-in-out;
}

#mainNavbar.nav-hidden {
  transform: translateY(-100%);
}

.navbar {
  background-color: rgba(0,0,0,0.5);
}

.navbar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 12px;
}

.navbar-nav li {
  border-radius: 12px;
  margin-right: 10px;
  transition: transform 0.2s ease;
}

.navbar-nav li:hover {
  transform: scale(1.08);
}

.navbar-nav li a,
.navbar-text {
  display: block;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 16px;
  text-align: center;
  border-radius: 12px;
}


.navbar-toggler-icon {
    /* Forces the SVG icon to invert and turn white/bright, then drops a crisp outline */
    filter: invert(1) drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.8));
}

/* Shared button spacing */
.btn,
.nav-item,
#logout-button,
#reset-bg-btn {
  margin: 10px;
}

/* Shared button styling */
.btn,
#logout-button,
#reset-bg-btn {
  border-radius: 12px;
  border: none !important;
  font-weight: 700;
  padding: 5px 10px;
}


/* Props & Choose Image Buttons */
.props-btn-index,
.custom-file-upload {
  text-decoration: none;
  background-color: rgba(0,0,51,0.8);
  color: white;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  border: none;
  transition: transform 0.2s ease;
  box-shadow: 2px 2px 5px 2px rgb(180, 186, 203);
}

.props-btn-index {
  margin-left: 25px;
  margin-top: 75px;
  margin-bottom: 10px;
}

.props-btn-index:hover {
  filter: brightness(1.2);
  transform: scale(1.5);
  background-color: rgba(51,0,0,0.8) !important;

}

.upload-image-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 15px 0;
  font-family: "Times New Roman", Times, serif;
}

.custom-file-upload {
  padding: 7px;
  border-radius: 25px;
  margin-left: 25px;
}

.custom-file-upload:hover {
  filter: brightness(1.2);
  transform: scale(1.15);
  background-color: rgba(51,0,0,0.8)
}

.custom-file-upload:active {
  transform: scale(0.96);
}

.upload-subtext {
  margin-top: 10px;
  margin-left: 25px;
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
  background-color: rgba(0,0,0,0.8);
  border-radius: 12px;
  padding: 0 5px;
}

/* Google Search Input & Button */
#gsearch {
  font-weight: 700;
  color: black;
  border: 2px solid black;
  border-radius: 12px;
  padding: 5px 10px;
}

.gbtn {
  color: white;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black,
               -1px 1px 0 black, 1px 1px 0 black;
  background-color: rgba(0,0,0,0.8);
  border: 2px solid white;
  border-radius: 12px;
  padding: 5px 10px;
  margin-bottom: 10px;
}

/* Entry Action Buttons */
.entry-actions {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.entry-action-link,
.entry-delete-form {
  margin: 0;
}

.entry-delete-form {
  display: inline-block;
}

/* Cards */
.entry-card,
.entry-card-small,
.entry-card-login,
.entry-card-register {
  width: 100%;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}

.entry-card {
  max-width: 800px;
  background: rgba(255,255,255,0.7);
  border: 2px solid black;
}

.entry-card-small {
  max-width: 500px;
  background: rgba(255,255,255,0.7);
  border: 2px solid black;
}

.entry-card-login {
  max-width: 400px;
  background: rgba(255,255,255,0.8);
  border: 2px solid black;
}

.entry-card-register {
  max-width: 400px;
  background: rgba(255,255,255,0.9);
  border: 1px solid black;
}

/* Shared Form Layout */
.entry-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.entry-form .form-control {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid black;
  border-radius: 8px;
}

.entry-submit-btn {
  width: 100%;
  padding: 0.75rem;
  font-size: 1.2rem;
  font-weight: 700;
  border: 2px solid black;
  border-radius: 8px;
  background-color: #0d6efd;
  color: white;
}

/* Normalizes the inner color chip box across browser engines */
#page-color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}
#page-color-picker::-webkit-color-swatch {
  border: 1px solid #ffffff;
  border-radius: 3px;
}
#page-color-picker::-moz-color-swatch {
  border: 1px solid #ffffff;
  border-radius: 3px;
}


.color-picker-label {
  padding: 0;
  margin: 0;
  white-space: nowrap;
  cursor: pointer;
}

/* Cleans up the native color swatch box for Windows and Chromebook */

#page-color-picker {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  width: 20px;
  height: 18px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

/* Add hover animation from Choose Image button */
.color-picker-bottom-btn:hover {
  filter: brightness(1.2);
  transform: scale(1.15);
  background-color: rgba(51,0,0,0.8) !important;
}

#page-color-picker::-webkit-color-swatch {
  border: 1px solid #ffffff;
  border-radius: 3px;
}

.color-picker-bottom-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background-color: rgba(0,0,51,0.8);
  color: white;
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  border: none;
  box-shadow: 2px 2px 5px 2px rgb(180, 186, 203);
  transition: transform 0.2s ease;

  /* Matches the spacing of your other bottom buttons */
  padding: 5px 10px;
  margin-left: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}