/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {
  font-family: 'Meddon';
  src: url('Fonts/Meddon.woff2') format('woff2'),
       url('Fonts/Meddon.woff') format('woff'),
       url('Fonts/Meddon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'JimNightshade-Regular';
  src: url('Fonts/JimNightshade-Regular.woff2') format('woff2'),
       url('Fonts/JimNightshade-Regular.woff') format('woff'),
       url('Fonts/JimNightshade-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.fancy {
  font-family: 'Meddon', cursive;
}

.flavor-title {
  font-family: 'JimNightshade-Regular';
  font-size: 3rem;        /* H1‑level size */
  text-align: center;     /* centered */
  margin: 2rem 0 1rem;    /* spacing above/below */
  line-height: 1.1;       /* keeps fancy fonts tidy */
  font-weight: normal;    /* prevents bolding */
}

body {
  background-color: #5ca191;
  color: black;
  font-family: 'Lora', serif;
}

.site-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem;
  max-width: 600px;
  margin: 0 auto;
  border-bottom: 1px solid #ddd;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.logo-block img {
  display: block;
  max-width: 160px;
  height: auto;
  margin: 0 auto 1.5rem auto;
}

.imprint-block p {
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: center;
  max-width: 60ch;
  margin: 0 auto;
}

.cat-nav {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 1.5rem 2rem;
  max-width: 700px;
  margin: 2rem auto;
  box-shadow: 0 0 12px rgba(0,0,0,0.25);
}

.series-nav {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;     /* desktop: one line */
  gap: 0.5rem;
  font-size: 1.4rem;
  margin-bottom: .5rem;
}

/* mobile-only behavior */
@media (max-width: 600px) {
  .series-nav {
    flex-direction: column;   /* mobile: stacked links */
    align-items: center;
  }
  .series-nav .sep {
    display: none;            /* hide the ~ separators on mobile */
  }
}

.world-nav {
  text-align: center;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.world-nav a {
  margin: 0 0.75rem;
  font-family: 'Lora', serif; 
  font-size: 1rem;
  text-decoration: none;
}

.series-header {
  margin: 2.5rem auto .25rem auto;   /* space above + below */
  max-width: 900px;
  text-align: left;
  display: block;
  margin-bottom: 0.25rem; 
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.series-title {
   text-decoration: underline;
}

.series-meta {
  font-style: italic;
  font-size: 1rem;
}

.float-clear {
  clear: both;
}

.book-entry {
    margin-top: 0; 
  max-width: 900px;
  margin: 1rem auto;
  padding: 1rem;
  padding-top: 0;
}

.book-entry h2 {
  font-size: 1.5rem;
  margin-top: 0; 
  margin-bottom: 1rem;
  text-align: left;
}

.explore-icon {
  width: 100px;
  height: auto;
  vertical-align: middle;
  margin-left: 0.5rem;
}

.book-cover {
  float: right;
  width: 120px;        /* adjust size here */
  margin: 0 0 1rem 1rem;
  border: 2px solid #1F85DE;
  border-radius: 4px;
}

.cover-link {
   display: block;
}
/* Mobile override */
@media (max-width: 600px) {
  .book-cover {
    float: right;
    display: block;
    margin: 0 auto 1rem auto;
    width: 30%;        /* mobile-friendly size */
  }
}

.linked-image {
  border: 2px solid #1F85DE;
  border-radius: 4px; /* optional: softens corners */
  transition: border-color 0.3s ease;
}

.linked-image:hover {
  border-color: #0077cc; /* changes on hover for emphasis */
}

/* Formatting for the Wickarm series */
.wickarm-list {
  list-style: none;
  padding: 0;
}

.wickarm-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
   font-size: 1.33rem;
  font-weight: 500;
}

.wickarm-list li::before {
  content: "✦";
  color: #4a6fa5;
  font-size: 1rem;
}


/* Character containers for Temal.htm */
.character-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.character-card {
  flex: 0 0 calc(50% - 1rem);
  max-width: calc(50% - 1rem);
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 800px) {
  .character-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.character-card img {
  width: 100%;
  height: auto;
  display: block;
}

.character-card h3 {
  text-align: center;
  margin-bottom: 0.5rem;
}

/* Show only on phones */
.mobile-only {
  display: none;
}
@media (max-width: 800px) {
  .mobile-only {
    display: block;
    margin: 1rem 0;
    font-size: 1.2rem;
  }
}

.lists {
  max-width: 700px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.list-item {
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  line-height: 1.4;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item strong {
  font-family: 'Cinzel', serif;
}