@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

/*colors and fonts*/
body {
  background-color: #232A2E;
  color: #D3C6AA;
  font-family: 'Jost', sans-serif;
}

/*padding and centering of all the content*/
body {
  padding-left: 1.5em;
  padding-right: 1.5em;
  max-width: 700px;
  margin: 0 auto;
}

/* center border rectangle content box */
.content-box {
  background-color: #2D353B;    
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
  border: 3px solid #DBBC7F;      
  padding: 1.5em 1.5em;  /* top/bottom: 0.75em, left/right: 1.5em */
  margin: 2em auto;
  max-width: 700px;
  border-radius: 0px;    
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.content-subbox {
  background-color: #343F44;
  border: 2px dashed #E69875;
  padding: 1em 1.2em;
  margin-bottom: 1.5em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  border-radius: 0px;
}

/*slightly scale everything up*/
html {
  font-size: 20px;
}


/* title appearance and h1 */
h1 {
  text-align: center;
}

/* h2 h3 h4 h5 h6 */
h2  {
  text-align: center;
  color: #DBBC7F;
}
h4 {
  text-align: left;
  color: #DBBC7F;
}

h5 {
  text-align: left;
  color: #DBBC7F;
}

/* navigation box */
.navigation-box {
  background-color: #2d353b;    
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  border: 3px solid #4F5B58;      
  padding: 0.5em 0.5em;  /* top/bottom: 0.75em, left/right: 1.5em */
  margin: 1em auto;
  max-width: 700px;
  border-radius: 0px;    
}

/*home button*/

.home-button {
  text-align: center;
  margin-top: 0em;
  margin-bottom: 0em;
}

.home-button a {
  display: inline-block;
  padding: 0.2em 0.5em;
  background-color: #374145;
  color: #D3C6AA !important;
  text-decoration: none;
  border: 2px solid #4f585e;
  font-weight: regular;
}

.home-button a:hover {
  border: 2px dashed #E69875;
  background: #374145;
}

.home-button a.current {
  background-color: #343F44;
  color: #D3C6AA !important;
  border: 2px dashed #E69875;
  font-weight: regular;
}

/* navigation links */
.nav-links {
  text-align: center;
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}

.nav-links a.current {
  background-color: #A7C080;
  color: #343F44 !important;
  border: 2px solid #A7C080;
  font-weight: regular;
}

  .nav-links a {
  display: inline-block;
  margin: 0.3em 0.3em 0.3em 0; /* top, right, bottom, left */
  padding: 0.2em 0.5em;
  background-color: #374145;
  color: #D3C6AA !important;
  text-decoration: none;
  border-radius: 0px;
  border: 2px solid #4f585e;
}
.nav-links a:link,
.nav-links a:visited {
  color: #D3C6AA;
}

.nav-links a:hover {
  border: 2px solid #A7C080;
}


/*non-nav links*/
a:link {
  color: #A7C080;
}

a:visited {
  color: #A7C080;
}

a:hover {
  color: #c1d1a9;
}

/*add an indent before every new paragraph and adjust line height*/
p {
  text-indent: 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.4;
}

/* blockquote styling */
blockquote {
  color: #c1d1a9;
  margin: 1.5em auto;
  padding: 1em 1.5em;
  border-left: 2px solid #A7C080;
  background-color: #343F44;
  max-width: 650px;
}

blockquote footer {
  display: block;
  margin-top: 0.5em;
  font-size: 0.9em;
  color: #7c6f64; /* subtle, muted color */
  text-align: right;
  font-style: normal; /* override italic if needed */
}

/* blog page table of contents dots and spacing */

.toc-entry {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}
.toc-entry:last-child {
  margin-bottom: 0em;  /* or however much space you want at the bottom */
}

.toc-date {
  white-space: nowrap;
}

.toc-title {
  white-space: normal;
  flex: 4;
  color: #5a7051;
  text-decoration: underline;
}

.toc-dots {
  flex: 1;
  overflow: hidden;
  margin: 0 0.5em;
  font-family: monospace;
  line-height: 1;
  height: 1em; /* ensures vertical space for dots */
  position: relative;
}

.toc-dots::before {
  content: "~ ~ ~ ";
  letter-spacing: 0.3em;
  white-space: nowrap;
  color: #bbb5ad; /* make sure it's not blending in */
  position: absolute;
  top: 0;
  left: 0;
}

/*commonplace book citations*/
.citation {
  display: block;
  font-size: 0.85rem;  /* Force smaller size */
  color: #A7C080;
  margin-top: 0.4em;
  text-align: right;
}

.citation .author {
  font-style: normal;
}

.citation cite {
  font-style: italic;
  font-size: inherit;  /* Prevent <cite> from resetting size */
}

/*commonplace book entry dividier*/
.text-divider {
  text-align: center;
  font-size: 0.9rem;
  color: #d3c6aa; 
  margin: 2em 0;
  letter-spacing: 0.2em;
  font-family: monospace; /* optional for more even spacing */
}

/* light dark toggle buttons */

.light-dark-toggle {
  text-align: center;
  margin: 0em 0;
}

.light-dark-toggle button {
  font-size: 1em;
  padding: 0.2em 0.4em;
  margin: 0;
  background-color: transparent;
  border: 2px solid #4f585e;
  color: inherit;
  cursor: pointer;
  line-height: 1.4;
}

.light-dark-toggle button:hover {
  transform: scale(1.15);

}

.nav-top-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3em;  /* tight spacing between left, center, and right */
  margin-bottom: 0.5em;
}

.nav-top-row .home-button {
  margin: 0 1.5em;
  text-align: center;
}

/* Highlight the active mode's button */
body.light-mode #set-light,
body.dark-mode #set-dark {
  border-color: #A7C080;
  font-weight: bold;
}

/*image border*/
img {
  border: 3px solid #E69875;
}

/* pagination next page previous page */
.pagination {
  display: flex;
  justify-content: space-between;
  margin: 0em 0;
}

.pagination a {
  text-decoration: none;
  background: #374145;
  padding: 0.2em 0.5em;
  border: 2px solid #4f585e;
  color: #D3C6AA;
}

.pagination a:hover {
  border-color: #A7C080;
}

.pagination.single span {
  visibility: hidden;  /* takes up space but not visible */
}

/*gallery page buttons 1 2 3 4 5 etc */
.page-list {
  text-align: center;
  margin: 0em 0;
  padding-bottom: 1.2em;
}

.page-list .page-link {
  display: inline-block;
  margin: 0.1em;
  padding: 0.0em 0.4em;
  background-color: #374145;
  color: #D3C6AA !important;
  text-decoration: none;
  border: 2px solid #4f585e;
  border-radius: 0px;
}

.page-list .page-link:hover {
  border-color: #A7C080;
}

.page-list .current {
  background-color: #A7C080;
  color: #343F44 !important;
  border-color: #A7C080;
}

/*bold, or strong technically, color instead of weight*/
strong {
  color: #E69875;
  font-weight: normal;
}

/* Guestbook Theming */
#guestbooks___guestbook-form-container,
#guestbooks___guestbook-messages-container,
#guestbooks___guestbook-made-with {
  font-family: 'Jost', sans-serif;
  background-color: #2d353b;
  color: #d3c6aa;
  border: 3px solid #DBBC7F;
  padding: 1.3em;
  max-width: 700px;
  margin: 2em auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Input containers */
.guestbooks___input-container input,
.guestbooks___input-container textarea {
  background-color: #374145;
  color: #d3c6aa;
  border: 2px solid #4F585E;
  padding: 0.6em;
  font-family: 'Jost', sans-serif;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.80em;
}

/* Submit button */
#guestbooks___guestbook-form input[type="submit"] {
  background-color: #a7c080;
  color: #2d353b;
  font-size: 1;
  border: none;
  padding: 0.5em 1em;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
}

#guestbooks___guestbook-form input[type="submit"]:hover {
  background-color: #c1d1a9;
}

/* Error message styling */
#guestbooks___error-message {
  color: #e67e80;
  margin-top: 0.5em;
}

/* Message header and separator */
#guestbooks___guestbook-messages-header {
  font-family: 'Jost', sans-serif;
  color: #a7c080;
  text-align: center;
  margin-top: 1em;
}


/* -------------------------
   Light Mode Overrides
------------------------- */

.light-mode {
  background-color: #F0F1D2;
  color: #5C6A72;
}

.light-mode .content-box {
  background-color: #FDF6E3;
  border: 3px solid #DFA000;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
  color: #5C6A72;
}

.light-mode .navigation-box {
  background-color: #fdf6e3;
  border: 3px solid #939F91;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.light-mode .home-button a {
  background-color: #fdf6e3;
  color: #5C6A72 !important;
  border: 2px solid #939f91;
}

.light-mode .home-button a:hover {
  border: 2px dashed #35A77C;
  background: #f4f0d9;
}

.light-mode .home-button a.current {
  background-color: #f4f0d9;
  color: #5C6A72 !important;
  border: 2px dashed #35A77C;
  font-weight: regular;
}

.light-mode .nav-links a {
  background-color: #F4F0D9;
  color: #5C6A72 !important;
  border: 2px solid #939f91;
}

.light-mode .nav-links a.current {
  background-color: #F0F1D2;
  color: #3C474D !important;
  border: 2px solid #8DA101;
}

.light-mode .nav-links a:hover {
  border: 2px solid #8DA101;
  background-color: #F0F1D2; 
}

.light-mode a:link,
.light-mode a:visited {
  color: #8DA101;
}

.light-mode a:hover {
  color: #35A77C;
}

.light-mode blockquote {
  color: #56635F;
  background-color: #EAEDC8;
  border-left: 2px solid #8DA101;
}

.light-mode blockquote footer {
  color: #7C6F64;
}

.light-mode .toc-title {
  color: #5A7051;
}

.light-mode .toc-dots::before {
  color: #8F908A;
}

.light-mode .citation {
  color: #8DA101;
}

.light-mode .text-divider {
  color: #5C6A72;
}

.light-mode img {
  border: 3px solid #83C092;
}

/* light pagination next page previous page */
.light-mode .pagination {
  display: flex;
  justify-content: space-between;
  margin: 0em 0;
}

.light-mode .pagination a {
  text-decoration: none;
  background: #f4f0d9;
  padding: 0.2em 0.5em;
  border: 2px solid #939f91;
  color: #5C6A72;
}

.light-mode .pagination a:hover {
  border-color: #8DA101;
  background: #f0f1d2;
}

.light-mode .pagination.single span {
  visibility: hidden;  /* takes up space but not visible */
}

/*gallery pages 1 2 3 4 */

.light-mode .page-list {
  text-align: center;
  margin: 0em 0;
  padding-bottom: 1.2em;
}

.light-mode .page-list .page-link {
  display: inline-block;
  margin: 0.1em;
  padding: 0.0em 0.4em;
  background-color: #f4f0d9;
  color: #5C6A72 !important;
  text-decoration: none;
  border: 2px solid #939f91;
  border-radius: 0px;
}

.light-mode .page-list .page-link:hover {
  border-color: #8DA101;
  background: #f0f1d2;
}

.light-mode .page-list .current {
  border-color: #8DA101;
  background: #f0f1d2;
}

/*bold, or strong technically, color instead of weight*/
.light-mode strong {
  color: #35A77C;
  font-weight: normal;
}

.light-mode .content-subbox {
  background-color: #F4F0D9;
  border: 2px dashed #35A77C;
  padding: 1em 1.2em;
  margin-bottom: 1.5em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  border-radius: 0px;
}

.light-mode h4 {
  text-align: left;
  color: #DFA000;
}

.light-mode h2  {
  text-align: center;
  color: #5C6A72;
}

.light-mode h5 {
  text-align: left;
  color: #DFA000;
}

/* Guestbook Theming */
.light-mode #guestbooks___guestbook-form-container,
.light-mode #guestbooks___guestbook-messages-container,
.light-mode #guestbooks___guestbook-made-with {
  font-family: 'Jost', sans-serif;
  background-color: #fdf6e3;
  color: #5C6A72;
  border: 3px solid #DFA000;
  padding: 1.3em;
  max-width: 700px;
  margin: 2em auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

/* Input containers */
.light-mode .guestbooks___input-container input,
.light-mode .guestbooks___input-container textarea {
  background-color: #f4f0d9;
  color: #5C6A72;
  border: 2px solid #939f91;
  padding: 0.6em;
  font-family: 'Jost', sans-serif;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.80em;
}

/* Submit button */
.light-mode #guestbooks___guestbook-form input[type="submit"] {
  background-color: #f0f1d2;
  color: #2d353b;
  font-size: 1;
  border: 2px solid #8DA101;
  padding: 0.5em 1em;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
}

.light-mode #guestbooks___guestbook-form input[type="submit"]:hover {
  background-color: #8DA101;
}

/* Error message styling */
.light-mode #guestbooks___error-message {
  color: #e67e80;
  margin-top: 0.5em;
}

/* Message header and separator */
.light-mode #guestbooks___guestbook-messages-header {
  font-family: 'Jost', sans-serif;
  color: #a7c080;
  text-align: center;
  margin-top: 1em;
}

/* Style placeholder text */
.light-mode .guestbooks___input-container input::placeholder,
.light-mode .guestbooks___input-container textarea::placeholder {
  color: #939F91; 
}


/* light dark toggle buttons */

.light-mode .light-dark-toggle {
  text-align: center;
  margin: 0em 0;
}

.light-mode .light-dark-toggle button {
  font-size: 1em;
  padding: 0.2em 0.4em;
  margin: 0;
  background-color: transparent;
  border: 2px solid #939f91;
  color: inherit;
  cursor: pointer;
  line-height: 1.4;
}

.light-mode.light-dark-toggle button:hover {
  transform: scale(1.15);

}