/* ============== BASICS & FONTS ============== */
@font-face { font-family:'Megante'; src:url('fonts/Megante-font.woff') format('woff'); font-weight:400; font-style:normal; }
@font-face {
  font-family:'Sage';
  src:url('fonts/sage-webfont.woff2') format('woff2'),
      url('fonts/sage-webfont.woff') format('woff'),
      url('fonts/sage-webfont.ttf') format('truetype');
  font-weight:400; font-style:normal;
}
html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:'Lora',serif;
  /* Applying the texture here for consistency across the entire app */
  background:url('https://www.transparenttextures.com/patterns/paper-fibers.png') repeat #fdfaf6;
}
.swiper{width:100vw;height:100vh;position:relative}
.swiper-wrapper{
  /* Removed the background from here to avoid conflicts */
  background:none;
  position:relative;
  width:100%; height:100%;
}
.swiper-slide{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-start;padding:0;position:relative;overflow:hidden;touch-action:pan-y}
/* ===== ANDROID SWIPE/STABILITY FIXES (restored from old CSS) ===== */

/* Let Android clearly distinguish vertical scroll inside slides from horizontal swipe */
.swiper-slide {
  touch-action: pan-y;           /* critical */
  -ms-touch-action: pan-y;       /* legacy fallback */
}

/* Make the scrollable content area play nicely with horizontal swipes */
.has-banner .content-area {
  touch-action: pan-y;           /* allow natural vertical scroll */
  overscroll-behavior-y: contain;/* prevent rubber-banding from hijacking gestures */
  -webkit-overflow-scrolling: touch; /* already present, but harmless if repeated */
}

/* Prevent title from colliding with action buttons on recipe pages */
.recipe-title {
  padding-right: 3rem;           /* restore spacing used in old CSS */
}

.swiper,.swiper-slide,.swiper-wrapper{will-change:transform;transform:translateZ(0);backface-visibility:hidden;perspective:1000px}
/* ============== COVER ============== */
.cover-slide{
  background:url('images/green-paper-texture.jpg') no-repeat center/cover fixed #fdfaf6;
  box-shadow:inset 0 0 50px rgba(0,0,0,.1),0 8px 20px rgba(0,0,0,.1);
  border:5px solid #e0e0e0;border-radius:8px;display:flex;flex-direction:column;align-items:center;text-align:center
}
#book-title{font-family:'Megante',serif;font-size:4rem;letter-spacing:2px;padding:0 2rem;margin:2rem auto 1.5rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.6)}
.cover-logo-container{display:flex;flex-direction:column;justify-content:center;align-items:center;margin:1rem 0;flex-grow:1}
.cover-logo-container svg{width:100%;height:auto;display:block}
.cover-logo-container svg .st0{fill:#073a28a3;stroke:#deff67a3;stroke-width:1;stroke-miterlimit:10}
.cover-slide .cover-logo{max-width:210px;margin:1.5rem 0 4rem;opacity:.75;mix-blend-mode:multiply;filter:brightness(.6) contrast(1.2)}
.logo-subtext-wrapper{font-family:'Megante',serif;text-align:center;opacity:.9;mix-blend-mode:multiply;filter:brightness(.6) contrast(1.2);color:#073a28a3;margin:-1rem 0 1rem;line-height:1.2}
.logo-subtext-line{display:block;font-size:.95rem;letter-spacing:.3px}
.swipe-message{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);font-size:1rem;color:rgba(209,204,162,.85);font-style:italic;letter-spacing:.5px;animation:fade 4s ease-in-out infinite;z-index:10;padding:0 1rem}
@keyframes fade{0%,100%{opacity:.3}50%{opacity:1}}
.cover-slide ul{list-style:none;padding-left:0;margin-left:0}
.cover-slide li::before{content:none!important}

/* ============== PAPER SLIDES ============== */
.paper-slide{
  border:1px solid #e0e0e0;
  box-shadow:inset 0 0 10px rgba(0,0,0,.1);
  border-radius:6px;
}
h1,h2,h3{font-family:'Megante',serif;color:#065f46}
.section-title{font-size:2.5rem;font-weight:700;margin:.75rem 0;padding-left:1rem;padding-right:1.5rem;}
.recipe-title{font-family:'Megante',serif;font-size:1.8rem;color:#065f46;margin:1rem 0 1.25rem;padding-left: 1rem;padding-right:1.5rem;word-wrap:break-word;overflow-wrap:break-word}

/* Keep paper only in the scrollable area when a banner exists */
.has-banner.paper-slide{
  border:0; border-radius:0;
  box-shadow:none;
}
.has-banner .content-area{
  position:relative;
  height:100%;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding-top: calc(var(--banner-h) + 8px);
  background:none;
  padding-left:0;
  padding-right:0;
}
/* Scrollbar styling */
.has-banner .content-area::-webkit-scrollbar {
  width: 10px;
}
.has-banner .content-area::-webkit-scrollbar-track {
  background: transparent;
}
.has-banner .content-area::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.1); /* Barely visible gray */
  border-radius: 10px;
  border: 2px solid transparent;
}
/* This ensures all list text aligns with the titles, which have padding-left: 1rem */
.has-banner .content-area ul,
.has-banner .content-area ol {
  padding-left: 1rem;
  padding-right: 1.5rem;
}

/* Style the bullet list to align with the titles */
.has-banner .content-area ul {
  list-style-type: disc;
  list-style-position: outside;
}

/* Use a custom counter for the numbered list to align the numbers */
.has-banner .content-area ol {
  list-style: none; /* Remove default numbers */
  counter-reset: my-counter;
}

.has-banner .content-area ol li {
  counter-increment: my-counter;
  display: flex;
}

.has-banner .content-area ol li::before {
  content: counter(my-counter) ".";
  min-width: 20px; /* Adjust this value as needed for more space */
  text-align: right;
  padding-right: 5px;
}

/* ============== BANNER ============== */
:root{ --banner-h:82px }
.has-banner{position:relative}
.top-banner{
  position:absolute;inset:0 auto auto 0;right:0;height:var(--banner-h);z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 16px;
  background:url('images/green-paper-texture-landscape.jpg') center/cover no-repeat;
  border-bottom:1px solid rgba(255,255,255,.12);
  opacity: 0.9;
}
.top-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:14px;
  background:url('images/green-paper-texture-landscape.jpg') center/cover no-repeat;
  clip-path:polygon(0% 0%,4% 60%,8% 10%,12% 65%,16% 15%,20% 70%,24% 20%,28% 75%,32% 25%,36% 80%,40% 30%,44% 78%,48% 28%,52% 75%,56% 25%,60% 70%,64% 18%,68% 68%,72% 15%,76% 65%,80% 10%,84% 60%,88% 12%,92% 58%,96% 8%,100% 55%,100% 100%,0% 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.12)
}
.banner-title{
  flex:1 1 auto;text-align:center;
  color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.25);
  font-family:'Megante',serif;font-size:1.4rem;margin:0 0 6px
}
.banner-spacer{width:48px;height:48px;margin:0 0 6px 0;flex:0 0 auto}
.banner-logo-white{width:48px;height:48px;margin:0 0 6px 0;flex:0 0 auto;display:block}

/* (legacy) icon button styles kept for future recipe slides */
.logo-nav-btn{width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;margin:0 0 6px 0;background:none;border:0;cursor:pointer}
.back-btn-logo {
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  display: flex;
  filter: brightness(0) invert(1) saturate(0);
  pointer-events: auto;
}
.recipe-options-btn{
  background: none;
  border: none;
  cursor: pointer;
  color: hsla(0, 0%, 100%, .65);
  opacity: 0.8;
  padding: .5rem;
  font-size: 2.2rem;
  line-height: 1;
  transition: color .2s, transform .2s;
  z-index: 30;
  filter: none;
  pointer-events: auto;
}
.recipe-options-btn:hover{color:#0c8c5d;transform:scale(1.1)}

/* ============== TOC ============== */
.table-of-contents{list-style:none;padding-left:1.5rem;margin-top:1rem}
.paper-slide .section-title{margin-left:1.5rem}
.table-of-contents li{position:relative;list-style-type: none;padding-left:1.5rem;margin-bottom:.75rem;font-size:1.2rem;color:#043d2c;cursor:pointer;transition:color .3s}
.table-of-contents li::before{content:"•";position:absolute;left:0;top:0;color:#065f46;font-size:1.5rem;line-height:1}
.cover-slide .table-of-contents li::before{content:none!important;display:none!important}
.table-of-contents li button{background:none;border:none;padding:0;font:inherit;color:inherit;text-align:left}
.table-of-contents li button:hover{color:#0c8c5d;font-weight:600}

/* ============== MODAL ============== */
.modal{position:fixed;inset:0;background:rgba(6,50,44,.586);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.modal.show{opacity:1;visibility:visible}
.modal-content{
  background:url('https://www.transparenttextures.com/patterns/paper-fibers.png') repeat,#f9fdf8;
  padding:1.5rem 2rem;border-radius:.75rem;width:90%;max-width:400px;position:relative;margin:auto;
  box-shadow:0 4px 12px rgba(0,0,0,.2);border:1px solid #67b19c;display:flex;flex-direction:column;align-items:center
}
.modal-close-btn{position:absolute;top:.5rem;right:.75rem;background:none;border:none;font-size:2rem;cursor:pointer;color:#043d2c;line-height:1;transition:color .2s}
.modal-close-btn:hover{color:#82542fe2}
.modal-title{font-family:'Lora',serif;font-size:1.6rem;color:#065f46;margin-bottom:1.25rem;text-align:center}
.modal-options{display:flex;flex-direction:column;gap:.75rem}
.modal-option-btn{display:block;width:100%;padding:.8rem 1.2rem;background:#4a936c;color:#fff;border:none;border-radius:.5rem;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background-color .2s}
.modal-option-btn:hover{background:#2e6b4a}
.modal-option-btn.delete-btn{background:#a34a4a}
.modal-option-btn.delete-btn:hover{background:#8c3b3b}

/* ============== PAGINATION ============== */
.swiper-pagination-bullet{background:#67b19c!important;opacity:.7}
.swiper-pagination-bullet-active{background:#10b981!important}
.swiper-pagination{opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.swiper-pagination.visible-pagination{opacity:1;visibility:visible}

/* ============== STARDUST ============== */
.stardust-wrapper{position:absolute;bottom:4rem;left:0;width:100%;height:50px;pointer-events:none;overflow:visible;z-index:10}
.particle{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,226,120,.88),rgba(255,225,120,0));opacity:0;animation:float-across 8s linear infinite}
@keyframes float-across{0%{transform:translateY(0) translateX(0);opacity:0;filter:blur(1.5px)}20%{opacity:.6}50%{transform:translateY(-3px) translateX(40vw);opacity:1}80%{opacity:.5}100%{transform:translateY(2px) translateX(80vw);opacity:0;filter:blur(2.5px)}}

/* ============== RESPONSIVE ============== */
@media (max-width:768px){
  #book-title{font-size:2.8rem;padding:0 .5rem}
  .cover-logo{max-width:120px}
  .logo-subtext-wrapper{font-family:'Megante',serif;font-size:1.5rem;color:#073a28a3;margin-top:-3rem;margin-bottom:1rem}
  .logo-subtext-line{font-size:1rem}
  .swiper-slide{padding:1rem 1.5rem}
  .recipe-title{font-size:2.0rem}
  .section-title{font-size:1.8rem}
  .swipe-message{font-size:.9rem;bottom:4rem;padding:0 .5rem}
  .recipe-options-btn{font-size:2rem;top:1.5rem;right:.75rem}
  .banner-title{font-size:1.25rem}
  .banner-spacer,.banner-logo-white{width:40px;height:40px}
}
@media (min-width:769px){
  #book-title{font-size:5.5rem;padding:0 6rem;margin-top:4rem;letter-spacing:3px}
  .cover-slide .cover-logo{width:100%;max-width:500px;margin-top:4rem;margin-bottom:1rem}
  .logo-subtext-wrapper{font-family:'Megante',serif;font-size:5rem;color:#073a28a3;margin:1rem 0 1.5rem}
  .logo-subtext-line{font-size:1.8rem}
  .cover-slide p{font-size:1rem;margin-bottom:5.2rem}
  .swiper-slide{padding:2rem 4rem}
  .recipe-title{font-size:3rem}
  .section-title{font-size:2.2rem}
  .table-of-contents li{font-size:1.5rem}
  .table-of-contents li::before{font-size:2rem}
  :root{--banner-h:124px}
  .banner-title{font-size:1.8rem}
  .banner-spacer,.banner-logo-white{width:56px;height:56px}
}
/* Landscape cover alt */
@media screen and (orientation:landscape) and (min-width:769px){
  .cover-slide{background:url('images/green-paper-texture-landscape.jpg') no-repeat center/cover fixed}
}
@media screen and (orientation:landscape) and (max-width:768px){
  .cover-slide{background:url('images/green-paper-texture-landscape.jpg') no-repeat center/cover fixed}
}