/* === style.css === */
/* Save in your theme directory (e.g., /wp-content/themes/rebelread/style.css) */


:root {
--bg: #ffffff;
--fg: #111111;
--card-bg: #f4f4f4;
--accent: #0066cc;
}

body.dark {
--bg: #111111;
--fg: #eaeaea;
--card-bg: #222222;
--accent: #66ccff;
}

body {
background-color: var(--bg);
color: var(--fg);
font-family: system-ui, sans-serif;
margin: 0;
padding: 0;
}

header, footer {
background: var(--card-bg);
padding: 1em 2em;
text-align: center;
}

main {
max-width: 1000px;
margin: auto;
padding: 2em;
}

h1, h2, h3 {
color: var(--fg);
}

.book-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1.5em;
margin-top: 1em;
}

.book-card {
background-color: var(--card-bg);
padding: 1em;
border-radius: 6px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
text-align: center;
}

.book-card h3 {
margin: 0.5em 0;
font-size: 1.1em;
}

.book-card img {
max-width: 100%;
height: auto;
border-radius: 4px;
}

.book-card a {
display: inline-block;
margin-top: 0.5em;
background: var(--accent);
color: white;
padding: 0.4em 1em;
border-radius: 4px;
text-decoration: none;
}

.book-card a:hover {
opacity: 0.9;
}

.genre-list {
list-style: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
gap: 1em;
}

.genre-list li a {
background: var(--card-bg);
border: 1px solid var(--accent);
padding: 0.5em 1em;
border-radius: 20px;
text-decoration: none;
color: var(--fg);
font-size: 0.9em;
}

.genre-list li a:hover {
background: var(--accent);
color: white;
}

button#themeToggle {
background: var(--accent);
color: white;
padding: 0.5em 1em;
margin-top: 1em;
border: none;
border-radius: 4px;
cursor: pointer;
}

button#themeToggle:hover {
opacity: 0.9;
}

.star-rating {
margin-top: 0.5em;
font-size: 1.2em;
color: gold;
}

/* Button section for homepage navigation */
.button-section button {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.75em 1.5em;
  margin: 0.5em;
  border-radius: 6px;
  font-size: 1em;
  cursor: pointer;
}
.button-section button:hover {
  opacity: 0.9;
}

/* Big emoji-style navigation links */
.big-nav-link {
  display: block;
  font-size: 1.25em;
  margin: 1em 0;
  color: var(--fg);
  text-decoration: none;
  font-weight: bold;
}
.big-nav-link:hover {
  color: var(--accent);
}