/* =====================================================
   CSS NAVIGATION INDEX
   =====================================================

   VARIABLES
   BASE
   ENTRY LIST
   ENTRY CONTENT
   MOBILE
   JOURNAL ENTRY
   HEADER
   CONTACT POPUP
   DARK MODE
   SEARCH FORM
   GALLERY
   TEXT LINK IMAGE POPUP
   OCTOPUS ICON
   GLOBAL
   AUDIO LOOP BUTTON

   Jump by searching section header text.
   Example: CTRL + F → "DARK MODE"

   ===================================================== */

:root {
  --text-primary: #2D1B14;
}

body {
  font-family: "Franklin Gothic Medium", "Franklin Gothic", "News Gothic",
               "Noto Sans", "Helvetica Neue", Arial, sans-serif !important;
  max-width: 600px; /* was 800px */
  margin: 0 auto;
  padding: 20px;
  font-size: 16px;
  line-height: 1.6;
  text-align: justify;
}

header,
footer {
  background: #f4f4f4;
  padding: 15px;
  margin: 20px 0;
  border-radius: 8px;
  font-family: inherit;
  text-align: center;
}

footer p {
  text-align: left;
}

a {
  color: #4C6699 !important;
  
}
/* Only In Journal Entries */
p a {
    font-style: italic;
}

footer a {
  font-style: normal;
}
/* =====================================================
   ENTRY LIST
   ===================================================== */

#entryList {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 15px;
  margin: 20px 0;
}

#entryList li {
  margin: 0;
  background: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-family: inherit;
  font-size: 17px;
}

#entryList a {
  text-decoration: none;
  color: #4C6699;
  display: block;
}

#entryList .match {
  background: #ffeb3b !important;
  font-weight: bold;
}

/* =====================================================
   ENTRY CONTENT
   ===================================================== */

#entryContent {
  margin-top: 40px;
  padding: 25px;
  border-top: 2px solid #ddd;
  min-height: 200px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.8;
  text-align: justify;
}

input {
  padding: 8px;
  width: 200px;
  font-family: inherit;
  font-size: 14px;
}

button {
  padding: 8px 15px;
  font-family: inherit;
  font-size: 14px;
}

#stats {
  color: #666;
  font-size: 14px;
  font-style: italic;
  text-align: left;
}

/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {
  #entryList {
    grid-template-columns: repeat(2, 1fr);
  }

  body {
    padding: 10px;
  }
}

/* =====================================================
   JOURNAL ENTRY
   ===================================================== */

.journal-entry {
  font-family: "Franklin Gothic Medium", "Franklin Gothic", "News Gothic",
               "Noto Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.8 !important;
  text-align: justify !important;
  margin-bottom: 1em !important;
  color: var(--text-primary) !important;
}

/* =====================================================
   HEADER
   ===================================================== */

header {
  background-image: url('images/tents.png');
  background-size: 110%;
  background-position: bottom;
  background-repeat: no-repeat;
  height: 100px; /* Adjust as needed for your design */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

h1 {
  color: black;
  margin: 0;
  font-size: 2.0em;
  font-weight: bold;
}

/* =====================================================
   CONTACT POPUP
   ===================================================== */

#contactPopup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#contactPopup > form {
  background: white;
  padding: 25px;
  border-radius: 12px;
  min-width: 300px;
}

#contactPopup.show {
  display: flex;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

#closePopup {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 20px;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-overlay.show {
  display: flex;
}

.popup-box {
  background: white;
  padding: 25px;
  border-radius: 12px;
  min-width: 320px;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

#contactForm textarea {
  width: 95%;
  min-height: 180px;
  padding: 10px;
  resize: vertical;
}

/* =====================================================
   DARK MODE
   ===================================================== */

body.dark-mode {
  background: #181a1b;
  color: #eee;
}

body.dark-mode a {
  color: #7cc7ff;
}

body.dark-mode .popup-box {
  background: #181a1b;
  color: #fff;
}

body.dark-mode input,
body.dark-mode textarea {
  background: #2a2a2a;
  color: #fff;
  border: 1px solid #444;
}

body.dark-mode header,
body.dark-mode footer {
  background: #1f2122;
  padding: 15px;
  margin: 20px 0;
  border-radius: 8px;
  font-family: inherit;
  text-align: center;
}

body.dark-mode header {
  background-image: url('images/tents.png');
  background-size: 110%;
  background-position: bottom;
  background-repeat: no-repeat;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

body.dark-mode h1 {
  color: White;
  margin: 0;
  font-size: 2.0em;
  font-weight: bold;
}

body.dark-mode #entryList li {
  margin: 0;
  background: #1f2122;
  padding: 12px;
  border-radius: 8px;
  text-align: center;
  font-family: inherit;
  font-size: 17px;
}

body.dark-mode #searchForm button {
  background: #2a2a2a !important;
  color: #fff !important;
  border: 1px solid #444 !important;
}

body.dark-mode #closePopup {
  color: white;
}

/* =====================================================
   SEARCH FORM
   ===================================================== */

#searchForm {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 120px;
  width: 100%;
  max-width: 500px;
}

#searchInput {
  flex: none;
  width: 150px;
}

#searchForm button {
  flex-shrink: 0;
  padding: 8px 16px;
  white-space: nowrap;
}

.theme-toggle {
  position: absolute;
  top: 8px;
  right: 30px;
}

/* =====================================================
   GALLERY
   ===================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  padding: 10px;
}

.gallery-item {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.gallery-item img {
  width: 100px;
  height: 75px;
  transition: transform 0.3s;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.image-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.overlay.active {
  display: flex;
}

.overlay img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
/* =====================================================
   TEXT LINK IMAGE POPUP
   ===================================================== */
#overlayImage {
  border: 5px solid white;      /* white border */
  border-radius: 12px;           /* rounded corners */
  box-shadow: 0 0 20px rgba(0,0,0,0.5); /* optional drop shadow */
}
/* =====================================================
   OCTOPUS ICON
   ===================================================== */

.black-octopus {
  filter: hue-rotate(0deg) saturate(0%) brightness(0.1);
  text-shadow: none;
  font-size: 1.5em;
}

/* =====================================================
   GLOBAL
   ===================================================== */

html {
  scroll-behavior: smooth;
}

/* =====================================================
   AUDIO LOOP BUTTON
   ===================================================== */
button.playing {
background:#444;
color:white;
}