/* style.css - unified stylesheet for Lindsey Goff Viducich
   Full file — includes books, resources, media, and global styles
*/

/* ---------- root & base (unchanged) ---------- */
:root{
  --brand-1: #243046;
  --brand-2: #F7D97B;
  --brand-3: #9CCEE8;
  --brand-4: #F3A48E;
  --brand-5: #8ABF6F;
  --brand-6: #D9C7B0;
  --muted: #666666;
  --max-width: 1100px;
  --gap: 24px;
  --radius: 8px;
  --content-padding: 20px;
  --transition-fast: 0.18s;
  --banner-gap: 32px; /* increased & unified top/bottom spacing for announce banner */
}

/* reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin:0;
  color:var(--brand-1);
  line-height:1.55;
  background: #ffffff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding: var(--content-padding);
}

/* Header / Navigation */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 20px;
  border-bottom:1px solid #eee;
  background: #fff;
}
.site-title{
  font-family: 'Castoro Titling', serif;
  text-transform: uppercase;
  font-weight:400;
  font-size:1.8rem;
  letter-spacing:0.06em;
  color:var(--brand-1);
  margin:0;
  line-height:1;
}
.site-nav{display:flex;align-items:center}
.site-nav a{
  margin-left:18px;
  text-decoration:none;
  color:var(--brand-1);
  font-weight:700;
  font-size:1.02rem;
  font-family: 'Nunito', sans-serif;
  line-height:1;
}
.site-nav a:hover,
.site-nav a:focus{color:var(--brand-3)}

/* Page title (used on pages) */
.page-title{
  font-size:2.625rem;
  text-align:center;
  margin:48px 0;
  font-family: 'Castoro Titling', serif;
  text-transform:none;
  color:var(--brand-1);
  line-height:1;
  font-weight:700;
}

/* Section heading (H2) style used on Books / Resources / Home subsections */
.section-heading{
  font-family: 'Prata', serif;
  font-size:1.35rem;
  margin:0 0 18px;
  color:var(--brand-1);
  font-weight:400;
  text-transform: none;
}

/* Generic section */
.section{padding:30px 0;border-bottom:1px solid var(--brand-6)}

/* Utility class to remove the section bottom border on a per-page basis */
.no-bottom-border { border-bottom: none; }

/* Announcement banner (under header)
   Grid layout uses: [1fr][text][1fr][cta][1fr]
   left gap == middle gap == right gap (visual equality)
*/
.announce-banner{
  display:grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items:center;                       /* centers content vertically */
  gap:18px;
  padding:18px 20px;
  background: linear-gradient(90deg, rgba(156,206,232,0.12), rgba(247,217,123,0.06));
  border-top: 1px solid rgba(0,0,0,0.02);
  border-bottom: 1px solid rgba(0,0,0,0.03);
  margin-top:var(--banner-gap);    /* equal spacing above */
  margin-bottom:var(--banner-gap); /* equal spacing below */
}

/* place announce-content in the 2nd column and CTA in the 4th */
.announce-content{ grid-column: 2; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.announce-content strong{font-family:'Prata', serif; font-size:1.05rem; color:var(--brand-1)}
.announce-copy{font-family:'Nunito', sans-serif; color:var(--muted)}

.announce-cta{ grid-column: 4; justify-self:start; min-width:200px; align-self:center; } /* align-self:center ensures vertical centering */

/* ---------- Hero styles (Home page) ----------
   NOTE: padding-top set to 0 so spacing above/below banner visually matches
*/
.hero{
  display:flex;
  align-items:center;
  gap:32px;
  padding:0 0 10px; /* top padding removed to match banner spacing above/below */
  justify-content:space-between;
}
.hero-text{
  flex:1 1 60%;
  min-width:260px;
}
.lead{
  font-size:1.05rem;
  color:var(--muted);
  margin:0 0 18px;
  font-family: 'Nunito', sans-serif;
}
/* author image sizing (left column) */
.hero-image{
  flex: 0 0 350px; /* increased by ~25% from 280 */
  width:350px;
  height:350px;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 26px rgba(0,0,0,0.06);
}
.author-headshot{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* author-bio: slightly larger so it fills the available width */
.hero-text .author-bio{
  font-size:1.15rem; /* larger than lead, fills right column better */
  line-height:1.6;
  margin-bottom:18px;
  color:var(--brand-1);
}

/* Book listing */
.book-item{
  display:flex;
  gap:24px;
  margin-bottom:34px;
  align-items:flex-start;
}
.book-cover{
  max-width:180px;
  max-height:270px;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 8px 16px rgba(0,0,0,0.08);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, filter var(--transition-fast) ease;
  cursor:pointer;
}
.book-cover:hover,
.book-cover:focus{
  transform: translateY(-3px);
  box-shadow:0 12px 22px rgba(0,0,0,0.14);
  filter:brightness(1.04);
}
.book-meta h3{
  font-family: 'Prata', serif;
  margin:0 0 8px;
  color:var(--brand-1);
  font-size:1.15rem;
  font-weight:400;
}
.book-meta p{margin:0 0 8px;color:var(--muted)}
.preorder-badge{
  display:inline-block;
  background:var(--brand-3);
  color:#000;
  font-weight:700;
  padding:4px 8px;
  border-radius:6px;
  font-size:0.9rem;
  margin-bottom:8px;
}

/* Buttons */
.buy-btn,
.cta-btn{
  display:inline-block;
  background:var(--brand-2);
  color:#000;
  font-weight:700;
  padding:10px 16px;
  text-decoration:none;
  border-radius:6px;
  margin-top:8px;
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, filter var(--transition-fast) ease;
}
/* Ensure anchors AND button elements using .buy-btn behave the same visually */
.buy-btn{
  font-family: 'Nunito', sans-serif;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.buy-btn:hover,
.buy-btn:focus,
.cta-btn:hover,
.cta-btn:focus{
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
  filter:brightness(1.06);
}
/* remove default focus outline, replace with subtle box-shadow (keyboard accessible) */
.buy-btn:focus{
  outline: none;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}
.buy-btn.preorder-btn{
  background: linear-gradient(90deg,var(--brand-3),var(--brand-2));
}
.dual-buttons{display:flex;gap:12px;margin-top:8px}
.dual-buttons .buy-btn{white-space:nowrap}

/* Books thumbnails row on Home - same height for all thumbs */
/* Explicitly lock to horizontal layout and consistent height */
.books-thumbs{
  display:flex;
  flex-direction:row;        /* explicit row to prevent accidental stacking */
  gap:40px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:nowrap;
  margin-top:18px;
  margin-bottom:8px;
}
.thumb-link{display:inline-block}
.book-thumb{
  /* make all thumbnails the same height; width adjusts to preserve aspect ratio */
  height:260px;       /* unified height for all covers */
  width:auto;
  max-width:260px;    /* defensive limit */
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 8px 16px rgba(0,0,0,0.08);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, filter var(--transition-fast) ease;
}
.book-thumb:hover,
.book-thumb:focus{ transform: translateY(-4px); box-shadow:0 16px 30px rgba(0,0,0,0.16); filter:brightness(1.03) }

/* utility for centering the small books-lead line */
.books-lead.center { text-align:center; display:block; margin:18px 0; font-size:1.15rem; color:var(--muted) }

/* Resources & Media cards (shared look) */
.resource-item,
.media-card{
  display:flex;
  gap:24px;
  margin-bottom:34px;
  align-items:flex-start;
  width:100%;
}

/* Specific column sizing:
   - podcast cards keep a smaller thumbnail column
   - embed cards get a wider left column to host the player
*/
.media-card.podcast .media-left{
  flex: 0 0 360px;
  min-width:280px;
  max-width:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.media-card.with-embed .media-left{
  flex: 0 0 60%;      /* left column gets ~60% of available width on wide screens */
  min-width:320px;
  max-width:900px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.media-right{
  flex:1 1 0%;
}

/* thumbnails and images */
.resource-image,
.media-thumb{
  max-width:180px;
  max-height:270px;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:6px;
  box-shadow:0 8px 16px rgba(0,0,0,0.08);
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, filter var(--transition-fast) ease;
  cursor:pointer;
}
/* enlarged thumbnail variant (50% larger) */
.media-thumb.enlarged{
  max-width:270px;  /* 180 * 1.5 */
  max-height:405px; /* maintain aspect limit */
}
.resource-image:hover,
.media-thumb:hover,
.resource-image:focus,
.media-thumb:focus{
  transform: translateY(-3px);
  box-shadow:0 12px 22px rgba(0,0,0,0.14);
  filter:brightness(1.03);
}

/* STATIC (non-clickable) thumbnail variant:
   used for "coming soon" resources so they don't appear interactive.
   Overrides hover/focus transforms and disables pointer events.
*/
.resource-image.static-thumb,
.resource-image.static-thumb:hover,
.resource-image.static-thumb:focus{
  transform: none !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.08) !important;
  filter: none !important;
  cursor: default !important;
  pointer-events: none !important;
}

.resource-meta h3,
.media-right h3{
  font-family:'Prata', serif;
  margin:0 0 8px;
  color:var(--brand-1);
  font-size:1.15rem;
  font-weight:400;
}
.resource-meta p,
.media-right p{margin:0 0 8px;color:var(--muted)}
.coming-soon-badge{
  display:inline-block;
  background:var(--brand-3);
  color:#000;
  font-weight:700;
  padding:6px 10px;
  border-radius:6px;
  font-size:0.9rem;
  margin-top:8px;
  display:inline-block;
}

/* Responsive YouTube embed wrapper with fallback background */
.video-embed{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 aspect */
  height:0;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 8px 16px rgba(0,0,0,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
}
.video-embed iframe,
.video-embed object,
.video-embed embed{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* -----------------------
   Contact form styles
   -----------------------*/
.contact-grid{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding-top:8px;
}

/* constrain form width to match Formspree's login field width */
.contact-form{
  width:100%;
  max-width:560px; /* approximate width used by Formspree login */
  margin:0 auto;
}

/* label style should match list item titles (Prata) */
.form-label{
  display:block;
  font-family:'Prata', serif;
  font-size:1.05rem;
  color:var(--brand-1);
  margin-bottom:8px;
  text-align:left;
}

/* inputs same width and typography as resource description text (Nunito) */
.form-input,
.form-textarea{
  width:100%;
  font-family:'Nunito', sans-serif;
  font-size:1rem;
  color:var(--brand-1);
  padding:12px 14px;
  border:1px solid #e6e6e6;
  border-radius:8px;
  outline:none;
  box-shadow:none;
  transition: box-shadow var(--transition-fast) ease, border-color var(--transition-fast) ease;
}

/* increased spacing between fields */
.form-row{margin-bottom:22px}

/* message textarea height (adjusted earlier) */
.form-textarea{
  min-height:315px;
  resize:vertical;
}

/* TIGHTENED SPACING for the message -> button gap */
.form-row--tight { margin-bottom:16px; }

/* optional button-row control */
.form-row--button { margin-bottom:8px; }

/* focus */
.form-input:focus,
.form-textarea:focus{
  border-color:var(--brand-3);
  box-shadow:0 6px 14px rgba(0,0,0,0.06);
}

/* Ensure the submit button matches Buy on Amazon style */
.buy-btn{
  display:inline-block;
  background:var(--brand-2);
  color:#000;
  font-weight:700;
  padding:10px 16px;
  text-decoration:none;
  border-radius:6px;
  margin-top:8px;
  border:none;
  cursor:pointer;
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease, filter var(--transition-fast) ease;
}
.buy-btn:hover,
.buy-btn:focus{
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.12);
  filter:brightness(1.06);
}

/* Success message styling: reduced spacing to match page rhythm */
.form-success{
  display:none;
  margin-top:12px; /* smaller gap so success message sits closer to button */
  font-weight:700;
  color:var(--brand-5);
  text-align:center;
}

/* privacy note style (small, friendly) */
.privacy-note{
  margin-top:6px;
  font-family:'Nunito', sans-serif;
  font-size:0.95rem;
  color:var(--muted);
  font-style:italic;
}

/* Honeypot (off-screen) */
.hp-field{
  position:absolute !important;
  left:-10000px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  top:auto !important;
  clip:rect(1px, 1px, 1px, 1px) !important;
  white-space:nowrap !important;
}

/* visually-hidden utility */
.visually-hidden{position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;}

/* small utilities */
.muted{color:var(--muted)}
.center{text-align:center}

/* footer social line */
.social-line a{ color:var(--brand-1); font-weight:600; text-decoration:none}
.social-line a:hover{ color:var(--brand-3)}

/* Footer */
.site-footer{
  padding:20px;
  text-align:center;
  color:var(--muted);
  font-size:0.9rem;
  border-top:1px solid #f1f1f1;
}

/* Make the books-lead text match author bio size / match section heading size */
.books-lead{
  font-size:1.35rem;
  color:var(--muted);
  font-family:'Nunito',sans-serif;
  margin-bottom:18px;
}

/* Remove the lower divider for the about-books section specifically */
.about-books{ border-bottom: none; }

/* -----------------------
   CONTACT-PAGE SPECIFIC OVERRIDES
   (keep these small so other pages are unaffected)
   -----------------------*/
/* Remove the short bottom border on the section for contact only */
.contact-section { border-bottom: none; }

/* Responsive */
@media (max-width:900px){
  .book-item, .resource-item, .media-card{flex-direction:column;align-items:center;text-align:center}
  .media-card.podcast .media-left,
  .media-card.with-embed .media-left{flex: 0 0 auto; width:100%; max-width:640px; min-width:0}
  .dual-buttons{flex-direction:column;gap:10px}
  .book-meta h3, .resource-meta h3, .media-right h3{text-align:center}
  .site-nav a{margin-left:12px}
  .page-title{font-size:2rem;margin:28px 0}
  .contact-form{padding:0 12px}

  /* hero stacks on smaller screens */
  .hero{flex-direction:column; text-align:center}
  .hero-image{width:260px;height:260px}
  .hero-text{flex:unset}

  /* banner stacks and centers */
  .announce-banner{grid-template-columns: 1fr auto 1fr; padding:12px; margin-top:16px; margin-bottom:16px;}
  .announce-content{ grid-column: 2; align-items:center; text-align:center; }
  .announce-cta{ grid-column: 2; justify-self:center; margin-top:8px; }

  .books-thumbs{justify-content:center; gap:18px; flex-wrap:wrap}
}
/* ----------------------------------------------------
   MOBILE FIX: Make top navigation responsive
   ---------------------------------------------------- */

/* Apply only on small screens */
@media (max-width: 640px) {

  /* Ensure the header container scales properly */
  .site-header.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .site-title {
    text-align: center;
    width: 100%;
    margin-bottom: 0.75rem;
  }

  /* FIX NAV: Allow wrapping + no horizontal scroll */
  .site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 0.75rem 1rem; /* some breathing room */
  }

  .site-nav a {
    white-space: nowrap; /* keeps each link intact */
    font-size: 0.95rem;  /* optional small reduction to prevent squishing */
    margin-left: 0; /* remove desktop left margin so flex gap controls spacing */
  }

  /* Ensure no horizontal scrolling on mobile */
  body, html {
    overflow-x: hidden;
  }
}