/*
Theme Name: StoryCorner
Theme URI: https://storycorner.ca
Author: Petti.Dev
Author URI: https://petti.dev
Description: A cozy, responsive WordPress theme tailored for book reviews — features a bookshelf homepage and custom post types for books and chapters.
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: storycorner
Tags: books, review, blog, responsive, accessible
*/

/* CSS Variables and base styles */
:root{
  --bg:#f6f3ee; /* warm paper */
  --text:#2b2a27; /* dark charcoal */
  --muted:#7a6f63; /* soft brown */
  --accent:#9b6b3b; /* earthy sienna */
  --card:#fffefb; /* off-white */
  --max-width:1000px;
  --card-width:170px; /* desired width for a single book card inside a shelf row */
  --logo-max-height:120px; /* default desktop logo max height (increased for better legibility) */
  --measure:66ch;
}

/* Reset-ish */
*{box-sizing:border-box}
/* allow the page to expand beyond the initial viewport so the background gradient
  can cover the full scrollable content */
html,body{min-height:100%;background:var(--bg)}
body{
  margin:0;
  font-family: "Merriweather", Georgia, serif;
  color:var(--text);
  /* single full-page earthy gradient for consistent rendering on desktop and mobile */
  background-image: linear-gradient(180deg, #fbf6ee 0%, #f3ead8 40%, #efe0cc 100%);
  background-repeat: no-repeat;
  /* make the gradient stretch to the full element (content) height */
  background-size: 100% 100%;
  background-attachment: scroll; /* smooth on mobile */
  background-position: top center;
  background-color: var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.site-container{max-width:var(--max-width);margin:0 auto;padding:2.25rem}

/* slightly increase the top padding so a larger logo fits without crowding */
header .site-container{padding-top:0.4rem;padding-bottom:0.1rem}

.site-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.2rem}
/* reduce the vertical gap immediately after the header (tight) */
header + .site-container{padding-top:0.25rem}
.site-title{font-family: 'Almendra', 'Merriweather', Georgia, serif;font-size:1.8rem;margin:0;color:var(--accent);letter-spacing:0.6px}
.site-nav a{color:var(--muted);text-decoration:none;margin-left:1rem}

/* Tighten custom logo spacing and alignment */
.site-branding{display:flex;align-items:center;gap:0.6rem}
.custom-logo-link{display:inline-block;line-height:1}
.custom-logo-link img{max-height:var(--logo-max-height) !important;width:auto !important;display:block;margin:0;padding:0;border:0}
.site-desc{margin:0;color:var(--muted);font-size:0.95rem}

/* shelf heading */
.shelf-heading{font-family:'Almendra','Merriweather',serif;margin:1.6rem 0 0.6rem 0;color:var(--accent);font-size:1.4rem}

.bookshelf-grid{display:block;padding:0;margin:0;position:relative}
/* shelf row created by JS */
.shelf-row{position:relative;background:transparent;margin-bottom:calc(var(--shelf-edge,20px) * 1);padding:12px 0}
.shelf-inner{max-width:var(--max-width);margin:0 auto;padding:0 1rem;display:flex;gap:1rem;align-items:flex-end}

/* shelf lip per row */
.shelf-row::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--shelf-edge,20px);background:#7a4e2b}
.book-card{background:transparent;border-radius:0;overflow:visible;box-shadow:none;display:flex;flex-direction:column;align-items:center;transition:transform .22s cubic-bezier(.2,.9,.2,1),box-shadow .22s ease;padding:0}

/* visually place the floating cover slightly above the shelf line */
.book-card{position:relative;top:0;align-self:end;z-index:2;transform:none;margin-bottom:calc(var(--book-rise) * -1);
  /* allow multiple books per row by setting a fixed flex basis */
  display:block;flex:0 0 var(--card-width);width:var(--card-width);}

.book-card:hover{transform:translateY(-6px) rotate(-0.6deg);box-shadow:0 16px 30px rgba(20,18,16,0.14)}

/* shelf lip overlay to make the brown shelf edge visible */

/* Note: per-row shelf lip is provided by .shelf-row::after. Removing the
   global repeating overlay avoids visual doubling and clipping issues on
   long pages and mobile. */


.book-thumb{display:block;object-fit:cover;width:100%;height:auto;border-radius:6px;box-shadow:0 8px 18px rgba(20,18,16,0.12);
  /* fixed visual height so all rows match */
  height: calc(var(--shelf-height) - var(--shelf-edge) - 20px);
}
.book-info{display:block;text-align:center;margin-top:0.6rem}
.book-title{display:block;font-size:0.95rem;margin:0;color:var(--text)}
.book-meta{display:block;color:var(--muted);font-size:0.9rem}

/* Keep the bookshelf a covers-only display: hide title/meta inside the grid
   so the homepage shelf only shows covers. This is scoped so single-book pages
   keep their metadata visible. */
.bookshelf-grid .book-info,
.bookshelf-grid .book-title,
.bookshelf-grid .book-meta{
  display:none;
}

.hero-book{display:grid;grid-template-columns:1fr 320px;gap:1.25rem;align-items:center;margin-bottom:1.4rem;max-width:880px}
.book-page .hero-book{align-items:start}

/* Single book: make content column wider and cover column narrower */
.book-page .hero-book{grid-template-columns:1fr 260px}
.book-page .hero-cover{max-width:240px}
.book-page .chapters-list{margin-top:0.6rem}
.hero-left{padding-right:0.6rem}
.hero-right{display:flex;justify-content:flex-end}
.hero-cover{width:100%;max-width:320px;height:auto;object-fit:cover;border-radius:10px;border:6px solid rgba(155,107,59,0.06);box-shadow:0 8px 20px rgba(43,40,36,0.08)}
.hero-book-title{font-family:'Almendra','Merriweather',serif;margin:0 0 0.3rem 0}
.hero-book-excerpt{color:var(--muted);margin-top:0.6rem;max-width:60ch}

@media (max-width:720px){
  .hero-book{grid-template-columns:1fr;gap:1rem}
  .hero-right{justify-content:center;margin-top:0.6rem}
  .hero-cover{max-width:260px}
  /* slightly smaller logo on mobile */
  :root{--logo-max-height:88px}
}

/* show inline hero cover on small screens and hide the right-column cover */

@media (max-width:720px){
  /* Keep the moved/inline cover visually consistent at a target width
     but allow it to scale down on very narrow screens */
  .hero-cover-inline{display:block;width:320px;max-width:100%;margin:0.6rem auto;border-radius:10px}
  .hero-right{display:none}
}

/* hide inline cover on larger screens */
.hero-cover-inline{display:none}

/* Center the CTA under the hero cover on small screens */
@media (max-width:720px){
  .hero-left .accent-btn{
    display:block;
    margin:0.8rem auto 0;
    width:-moz-fit-content;
    width:fit-content;
    text-align:center;
    padding-left:0.9rem;
    padding-right:0.9rem;
  }
}

/* Single-book responsive: stack hero columns on small phones and make
   chapter reviews toggleable */
@media (max-width:720px){
  .hero-book{grid-template-columns:1fr;gap:0.8rem;max-width:none;width:100%}
  /* full-bleed hero: break out of the centered site container so the
     hero-content can use the entire viewport width on small devices */
  .hero-book{
    position:relative;
    left:50%;
    right:50%;
    margin-left:-50vw;
    margin-right:-50vw;
    width:100vw;
    padding-left:1rem; /* keep small internal padding */
    padding-right:1rem;
  }
  .hero-book .book-content{order:0}
  .hero-book .hero-side{order:1}
  .hero-cover{max-width:100%;margin:0 auto;display:block}
  .chapters-toggle{display:block;background:transparent;border:1px solid rgba(43,40,36,0.08);padding:0.5rem;border-radius:8px;margin-top:0.6rem;width:100%;text-align:left}
  .chapters-wrap{margin-top:0.5rem}
  .chapters-wrap[hidden]{display:none}
  /* Make the chapter list look like a small card for readability */
  .chapters-wrap .chapters-list{background:var(--card);padding:0.6rem;border-radius:8px;border:1px solid rgba(43,40,36,0.04)}
  /* When we move the hero-side contents into the content column we hide
     the original hero-side. Make sure it doesn't occupy space and allow the
     content column to take full width. */
  .hero-side[hidden]{display:none !important}

  /* Target the more specific selector to override earlier desktop rules
     that may leave an empty right column. Make sure the single-column
     layout applies within the book page context as well. */
  .book-page .hero-book{grid-template-columns:1fr !important;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;padding-left:1rem;padding-right:1rem}
  .book-page .hero-book .book-content{width:100%}
  .book-page .hero-book .hero-side{display:none !important}
}

/* When the hero-side has been moved into .book-content, ensure the moved
  wrapper expands to the full width of the content column. */
.hero-book .book-content .hero-side-moved{width:100%}
.book-content{background:var(--card);padding:1.1rem;border-radius:10px;border:1px solid rgba(155,107,59,0.06)}

@media (max-width:720px){
  .hero-book{grid-template-columns:1fr}
}

.chapters-list{list-style:none;padding-left:0;margin-top:1rem}
.chapters-list li{padding:0.5rem 0;border-bottom:1px dashed rgba(43,40,36,0.06)}

/* Make chapter links feel like tappable/readable list items rather than plain text */
.chapters-list a{
  display:block;
  color:var(--muted);
  text-decoration:none;
  padding:0.5rem 0.6rem;
  border-radius:6px;
}
.chapters-list a:hover,
.chapters-list a:focus{
  background:rgba(155,107,59,0.04);
  color:var(--text);
  outline: none;
}
.chapters-list a:active{background:rgba(155,107,59,0.06)}

/* Chapter navigation: center buttons under the chapter body and separate with a pipe */
.chapter-nav{display:block;text-align:center;margin-top:1.25rem}
.chapter-nav a{display:inline-block;color:var(--text);background:transparent;padding:0.35rem 0.6rem;border-radius:6px;text-decoration:none}
.chapter-nav a:hover{text-decoration:underline}
.chapter-nav a + a::before{content:"|";color:var(--muted);margin:0 0.65rem;display:inline-block;vertical-align:middle}

.book-content p{max-width:var(--measure)}

.book-excerpt{color:var(--muted);margin-bottom:1rem}

.accent-btn{display:inline-block;background:var(--accent);color:#fff;padding:0.5rem 0.85rem;border-radius:6px;text-decoration:none}

.site-footer{color:var(--muted);text-align:center;padding:2rem 0;margin-top:3rem}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Latest review card under the bookshelf */
.latest-review{margin-top:2rem;margin-bottom:2.5rem}
.latest-review .site-container{max-width:var(--max-width);padding:1rem}
.latest-review-title{font-family:'Almendra','Merriweather',serif;color:var(--accent);margin:0 0 0.6rem 0;font-size:1.35rem}
.latest-review-meta{color:var(--muted);margin:0 0 0.65rem 0;font-size:0.95rem}
.latest-review-body{background:var(--card);padding:1.2rem;border-radius:10px;border:1px solid rgba(155,107,59,0.06);line-height:1.8;color:var(--text)}

/* Read more button inside latest review */
.latest-review .read-more{display:inline-block;margin-top:0.6rem}

@media (min-width:900px){
  .latest-review{display:block}
  .latest-review .site-container{display:grid;grid-template-columns: 280px 1fr;gap:1.25rem;align-items:start}
  .latest-review-title{grid-column:1 / 3}
  .latest-review-body{grid-column:1 / 3}
}