@charset "UTF-8";
/* ========== Wheeler Block Press - Refactored Stylesheet ========== */
/* Version: 2.0 - Inline styles removed, mobile-first responsive design */

/* ========== Reset ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== CSS Variables ========== */
:root {
  --color-primary: #0a4b6f;
  --color-text: #222;
  --color-text-light: #666;
  --color-bg: #f9fafb;
  --color-white: #ffffff;
  --color-border: #ccc;
  --color-accent: #F4EAD8;
  --color-card-light: #f8f8f8;
  --font-serif: Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max-width: 1100px;
}

/* ========== Base Styles ========== */
body {
  font-family: var(--font-serif);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
	font-size: 1.2rem;   /* <--- add this line */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* --- Section Breaks --- */

.section-break {
  height: 1.5rem;
}

.subtle-rule {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 2rem auto;
  width: 60%;
}

.asterism {
  text-align: center;
  color: #999;
  font-size: 1.2rem;
  letter-spacing: 0.3rem;
  margin: 1rem 0;
  font-family: var(--font-serif);
}

/* ========== Layout Containers ========== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
}

.container-narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ========== Utility Classes ========== */
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-3 { margin-bottom: 3rem; }
.is-hidden { display: none; }

/* ========== Announcement Bar ========== */
.announce {
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.9rem;
  padding: 0.5rem 0;
  text-align: center;
}

.announce a {
  color: var(--color-white);
  text-decoration: underline;
}

/* ========== Header & Navigation ========== */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-accent);
  padding: 1rem 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-primary);
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 0.75rem;
}

.main-nav a {
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  transition: all 0.2s ease;
}

.main-nav a:hover {
  text-decoration: underline;
}

.social {
  display: flex;
  gap: 0.75rem;
}

.social-link {
  color: var(--color-primary);
  font-size: 1.3rem;
  transition: opacity 0.2s ease;
}

.social-link:hover {
  opacity: 0.7;
}

/* ========== Main Content Area ========== */
main { 
  margin: 0;
  flex: 1;
}

/* ========== Homepage - Hero Section ========== */
.hero {
  position: relative;
  background: url("../img/hero-water.jpg") center top / cover no-repeat;
  color: var(--color-white);
  padding: 5rem 0 1rem;
  min-height: 34rem;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 34rem;
  padding-top: 9rem;
}

.hero-content {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  max-width: 900px;
}

.hero-book-cover {
  flex: 0 0 auto;
}

.hero-book-cover img {
  width: 450px;
  height: auto;
  background: #F4EAD8;
  padding: 0.2rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.hero-text-box {
  flex: 1;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0.75rem;
  border: 4px solid var(--color-primary);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.hero-text-box p {
  line-height: 1.7;
  margin: 0 0 1rem 0;
  color: var(--color-text);
}

.hero-text-box p:last-child {
  margin-bottom: 0;
}

/* ========== Homepage - About the Author Section ========== */
.about-author-section {
  position: relative;
  background-image: url("../img/hero-water3.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 2rem 0;
  border-top: 4px solid var(--color-primary);
  border-left: 4px solid var(--color-primary);
  border-right: 4px solid var(--color-primary);
}

.about-author-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  z-index: 0;
}

.about-author-section .container {
  position: relative;
  z-index: 1;
}

.about-author-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 3rem;
  align-items: start;
}

.about-author-image {
  text-align: center;
}

.about-author-image img {
  width: 50%;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 2px solid #f8f8f8;
  display: block;
  margin: 0 auto;
  margin-bottom: 0;
}

.image-caption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0.25rem 0 0 0;
  padding: 0;
  font-style: italic;
}

.about-author-content h2 {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
  margin-top: 0;
}

.about-author-content p {
  line-height: 1.7;
  margin: 0;
}

/* ========== Blue Pages - Main Wrapper ========== */
.page-main-blue {
  background: var(--color-primary);
  padding: 0;
  margin: 0;
}

/* ========== Blue Pages - Full-Bleed Banner ========== */
.page-banner {
  width: 100vw;
  height: 250px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.page-banner-tall {
  height: 270px;
}

/* ========== Blue Pages - Content Wrapper ========== */
.page-content-wrapper {
  padding: 1rem 0 2rem;
}

/* ========== Blue Pages - White Centered Title ========== */
.page-title-white {
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

/* ========== Blue Pages - Additional Components ========== */
.page-banner-fullbleed {
  width: 100vw;
  height: 250px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.page-content-padding {
  padding: 1rem 0 2rem;
}

.page-title-white-centered {
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.story-card {
  background: #f8f8f8;
  padding: 2rem 3rem;
  margin-bottom: 0;
  border-radius: 0.5rem;
}

.story-heading {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.story-text {
  line-height: 1.7;
}

.story-text p {
  margin-bottom: 1rem;
}

.story-footnote {
  font-size: 0.9rem;
  color: var(--color-text-light);
  border-top: 1px solid #ddd;
  padding-top: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.contact-text-white {
  color: var(--color-white);
  text-align: center;
  margin-top: 2rem;
  font-size: 0.95rem;
}

.contact-link-white {
  color: var(--color-white);
  text-decoration: underline;
}

/* Old classes - keeping for compatibility */
.page-section-title {
  color: var(--color-white);
  text-align: center;
  font-family: var(--font-sans);
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.content-heading {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.story-content {
  line-height: 1.7;
}

.story-content p {
  margin-bottom: 1rem;
}

.footnote {
  font-size: 0.9rem;
  color: var(--color-text-light);
  border-top: 1px solid #ddd;
  padding-top: 1rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

.contact-inline {
  color: var(--color-white);
  text-align: center;
  margin-top: 2rem;
  font-size: 0.95rem;
}

.contact-inline a {
  color: var(--color-white);
  text-decoration: underline;
}

/* ========== Card Variants ========== */
.card {
  background: var(--color-white);
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.card h3 {
  font-family: var(--font-sans);
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.card img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}

.card-light-padded {
  background: var(--color-card-light);
  padding: 2rem 3rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}

/* ========== Grid Layouts ========== */
.grid-2col {
  display: grid;
  grid-template-columns: 2fr 1.5fr;
  gap: 2rem;
  align-items: center;
}

.grid-2col-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

.grid-contact {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}

/* ========== Blog Specific ========== */
.blog-post-date {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
}

.blog-post-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.blog-post-title a {
  color: var(--color-primary);
  text-decoration: none;
}

.blog-post-title a:hover {
  text-decoration: underline;
}

.blog-post-excerpt {
  line-height: 1.7;
  margin-bottom: 1rem;
}

.blog-post-content {
  line-height: 1.7;
}

.blog-post-content p {
  margin-bottom: 1rem;
}

.blog-post-content h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-primary);
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.blogpost-note {
  font-size: 0.9rem;
  color: #555555;    /* Forces white so it won't disappear */
  opacity: 0.85;     /* Optional: a subtle visual softness */
  margin-bottom: 1.5rem;
}

.blog-learn-more {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-sans);
}

.blog-learn-more:hover {
  text-decoration: underline;
}

.blog-back-link {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-sans);
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ddd;
}

.blog-back-link:hover {
  text-decoration: underline;
}

/* ========== Purchase Page - Two Column Layout ========== */
/* REUSABLE TEMPLATE: Use these classes for any two-column card layout */

/* ADJUSTMENT LEVERS - Modify these values to control spacing and sizing:
   
   CARD PADDING:
   - .purchase-card padding: Controls space inside each card
     Default: 2.5rem 3rem (top/bottom left/right)
     Adjust: Try 2rem 2.5rem for tighter, 3rem 3.5rem for looser
   
   COLUMN WIDTH:
   - .purchase-grid grid-template-columns: Controls left/right column split
     Default: 1fr 1fr (equal 50/50 split)
     Adjust: Try 1.2fr 0.8fr for wider left, or 0.8fr 1.2fr for wider right
   
   COLUMN GAP:
   - .purchase-grid gap: Controls space between columns
     Default: 2.5rem
     Adjust: Try 2rem for tighter, 3rem or 4rem for wider
   
   LOGO SIZE:
   - .vendor-logo width: Controls Sweet Pig Press logo size
     Default: 180px
     Adjust: Try 150px, 200px, 220px, etc.
   
   BUTTON SIZE:
   - .paypal-button width: Controls PayPal button image size
     Default: 280px
     Adjust: Try 250px, 300px, 320px, etc.
   
   CARD WIDTH:
   - .purchase-card max-width: Controls width of individual cards
     Default: none (uses container-narrow width of 800px)
     Adjust: Add max-width to .purchase-card (try 700px, 750px, 850px)
*/

.purchase-card {
  background: #f8f8f8;
  padding: 2.5rem 3rem;
  border-radius: 0.5rem;
  margin-bottom: 1.8rem;
	max-width: 600px;
margin-left: auto;
margin-right: auto;
}

.purchase-card h3 {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

/* Two-column grid layout */
.purchase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}

/* Left column - text content */
.purchase-content {
  line-height: 1.5;
}

.purchase-content p {
  margin-bottom: 0;
}

/* Right column - images/buttons (centered) */
.purchase-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Price styling */
.product-price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.price-note {
  font-size: 0.9rem;
  font-weight: normal;
}

.location-note {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

/* Sweet Pig Press logo */
.vendor-logo {
  width: 140px;
  height: auto;
  display: block;
  margin: 1 auto 0.5rem auto;
}

/* PayPal button image */
.paypal-button {
  width: 500px;
  height: auto;
  display: block;
  margin: 0 auto 0.5rem auto;
}

/* Image/button captions */
.media-caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-style: italic;
  margin: 0;
}

/* Purchase instructions */
.purchase-instruction {
  margin-bottom: 0;
  font-size: 1.05rem;
}

/* Option 3 - Mail order (single column) */
.purchase-card-mail {
  /* Uses base .purchase-card styles */
}

.shipping-note {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
}

.purchase-card-mail p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

.important-note {
  background: #e8e8e8;
  padding: 1rem;
  border-radius: 0.25rem;
  border-left: 3px solid var(--color-primary);
  font-size: 0.95rem;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* Mobile responsive - stacks columns */
@media (max-width: 768px) {
  .purchase-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .purchase-card {
    padding: 2rem;
  }
  
  .vendor-logo {
    width: 150px;
  }
  
  .paypal-button {
    width: 250px;
  }
}

/* Single-column centered layout (for PayPal-only option) */
/* ADJUSTMENT LEVERS for centered layout:
   
   PRICE POSITION:
   - .price-centered margin-bottom: Space below price
     Default: 2rem
     Adjust: Try 1.5rem, 2.5rem, 3rem
   
   BUTTON WRAPPER POSITION:
   - .paypal-centered-wrapper margin-top: Space above button
     Default: 0
     Adjust: Try -1rem (move up), 1rem (move down), 2rem, etc.
   
   BUTTON SIZE:
   - .paypal-centered width: Button image width
     Default: 320px
     Adjust: Try 280px, 300px, 350px, etc.
   
   CAPTION POSITION:
   - .caption-centered margin-top: Space between button and caption
     Default: 0.75rem
     Adjust: Try 0.5rem (tighter), 1rem (looser)
*/

.purchase-single-centered {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.price-centered {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: -5rem;
  width: 100%;
}

.paypal-centered-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0;
}

.paypal-centered {
  width: 500px;
  height: auto;
  display: block;
}

.caption-centered {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
  font-style: italic;
  margin-top: -5rem;
  margin-bottom: 0;
}

/* ========== End Purchase Page ========== */
/* ========== Testimonials ========== */
.testimonial-card {
  background: var(--color-card-light);
  padding: 2rem 3rem;
  border-radius: 0.5rem;
}

.testimonial-item {
  margin-bottom: 2.5rem;
}

.testimonial-item-last {
  margin-bottom: 0;
}

.testimonial-quote {
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.testimonial-attribution {
  color: var(--color-text-light);
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ========== Memoirs ========== */
.memoir-card {
  background: #f8f8f8;
  padding: 2rem 3rem;
  border-radius: 0.5rem;
}

.memoir-card p {
  margin-bottom: 0rem;
  text-indent: 2rem;
}

/* ========== Events Components ========== */
.events-main-blue {
  background: var(--color-primary);
  padding: 1rem 0 2rem;
}

.events-card {
  background: #f8f8f8;
  padding: 1rem 3rem;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
	 padding-bottom: 0rem;
}

.page-title-white-centered + .events-card {
  margin-top: 1rem; /* or taste */
	margin-bottom: 1rem
}

.events-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr;
  gap: 1rem;
  align-items: center;
}

.events-date {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
}

.events-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.events-title-link {
  color: var(--color-primary);
  text-decoration: none;
}

.events-excerpt {
  line-height: 1.75;
  margin-bottom: 1rem;
}

.events-thumbnail {
  padding-top: 1rem;
	padding-bottom: 1.5rem
}

.events-image {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.events-image-caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-top: -.5rem;
  font-style: italic;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr;
  }
  
  .events-image {
    max-width: 100%;
  }
  
  /* LEVER 1: Move image + caption together (space above thumbnail) */
  .events-thumbnail {
    padding-top: 0rem;  /* ADJUST: 0 = tight, 1rem = medium, 2rem = loose, 3rem = spacious */
  }
  
  /* LEVER 2: Space between image and caption */
  .events-image-caption {
    margin-top: -.5rem;  /* ADJUST: -1rem = very tight, -0.5rem = tight, 0 = normal, 0.5rem = loose */
  }
}
/* ========== Blog Components ========== */
.blog-main-blue {
  background: var(--color-primary);
  padding: 1rem 0 2rem;
}

.blog-card {
  background: #f8f8f8;
  padding: 1.5rem 3rem;
  margin-bottom: 2rem;
  border-radius: 1rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: 2fr 1.5fr;
  gap: 2rem;
  align-items: center;
}

.blog-date {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
}

.blog-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
}

.blog-title-link {
  color: var(--color-primary);
  text-decoration: none;
}

.blog-excerpt {
  line-height: 1.75;
  margin-bottom: 1rem;
}

.blog-learn-more {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-sans);
}

.blog-thumbnail {
  padding-top: 2rem;
}

.blog-image {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

.blog-image-caption {
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-light);
  margin-top: -.5rem;
  font-style: italic;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  
  .blog-image {
    max-width: 100%;
  }
  
  /* LEVER 1: Move image + caption together (space above thumbnail) */
  .blog-thumbnail {
    padding-top: 0rem;  /* ADJUST: 0 = tight, 1rem = medium, 2rem = loose, 3rem = spacious */
  }
  
  /* LEVER 2: Space between image and caption */
  .blog-image-caption {
    margin-top: -.5rem;  /* ADJUST: -1rem = very tight, -0.5rem = tight, 0 = normal, 0.5rem = loose */
  }
}

/* ========== Blog Post Page ========== */
.blogpost-main-blue {
  background: var(--color-primary);
  padding: 1.5rem 0 2rem;
}

.blogpost-card {
  background: #f8f8f8;
  padding: 1.5rem 3rem;
  border-radius: 0.5rem;
}

.blogpost-date {
  color: var(--color-text-light);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  font-family: var(--font-sans);
}

.blogpost-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.blogpost-image {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  display: block;
  margin-bottom: 0;
}

.blogpost-caption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin: 0 0 1rem 0;
  padding: 0;
  font-style: italic;
}

.blogpost-caption-large {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin: 0 0 1.5rem 0;
  padding: 0;
  font-style: italic;
}

.blogpost-content {
  line-height: 1.7;
}

.blogpost-content p {
  margin-bottom: 1rem;
}

.blogpost-paragraph-large {
  margin-bottom: 1.5rem;
}

.blogpost-subheading {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-primary);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.blogpost-footnote {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.blogpost-back-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ddd;
}

.blogpost-back-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  font-family: var(--font-sans);
}

/* ========== Contact Page ========== */
.contact-card {
  background: #f8f8f8;
  padding: 2rem 3rem;
  border-radius: 0.5rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 3rem;
  align-items: start;
}

.contact-info-section {
  margin-bottom: 1.5rem;
}

.contact-info-heading {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.contact-info-text {
  line-height: 1.6;
  margin-bottom: 0;
}

.contact-info-link {
  color: var(--color-primary);
}

/* Email list headings */
.email-list-desktop,
.email-list-mobile {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.email-list-mobile {
  display: none; /* overridden in mobile media query if needed */
}

/* Form layout */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
	
}

.form-group {
  /* Container for form fields */
}

/* Form labels */
.form-label {
  display: block;
  font-family: var(--font-sans);
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Inputs and textarea */
.form-input,
.form-textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  resize: vertical;
}

.form-submit-button {
 display: inline-block;
  align-self: center;        /* ⬅️ centers only the button */
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.9rem 1.2rem;
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease;
}

.form-submit-button:hover {
  background-color: #06354e;
  transform: translateY(-2px);
}

.form-submit-button:active {
  transform: translateY(0);
}

/* Mobile styles */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .email-list-desktop {
    display: none;
  }
  
  .email-list-mobile {
    display: block;
    font-family: var(--font-sans);
    font-size: 1.1rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 1rem;
  }
}

/* ========== Responsive - Global Mobile Adjustments ========== */
.testimonial-item {
  margin-bottom: 2.5rem;
}

.testimonial-item:last-child {
  margin-bottom: 0;
}

.testimonial-item p {
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

.testimonial-attribution {
  color: var(--color-text-light);
  font-size: 0.95rem;
}


/* ========== Contact Footer (White text on blue) ========== */
.contact-footer-white {
  color: var(--color-white);
  text-align: center;
  margin-top: 2rem;
  font-size: 0.95rem;
}

.contact-footer-white a {
  color: var(--color-white);
}

.btn-secondary:hover {
  background: var(--color-white);
  color: var(--color-primary);
}

.btn-large {
  padding: 0.8rem 2rem;
  font-size: 1.1rem;
}

.btn-submit {
  width: fit-content;
  align-self: flex-start;
}

/* ========== Bottom Navigation ========== */
.bottom-nav {
  background: var(--color-primary);
  padding: 1rem 0;
  text-align: center;
  border-top: 1px solid var(--color-border);
}

.bottom-nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.bottom-nav a {
  color: #f8f8f8;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  transition: opacity 0.2s ease;
}

.bottom-nav a:hover {
  opacity: 0.7;
}

/* ========== Footer ========== */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: 0;
  padding: 1.5rem 0;
  font-size: 0.9rem;
  color: var(--color-text-light);
  text-align: center;
  background: var(--color-accent);
}

/* ========== Responsive Breakpoints - Mobile First ========== */
@media (max-width: 768px) {
  /* Header */
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
  }

  .nav-wrap {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .main-nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Hero - Homepage */
  .hero {
    min-height: auto;
    padding: 0.75rem 0 0.5rem;
  }
  
  .hero-wrapper {
    min-height: auto;
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
  }
  
  .hero-content {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  
  .hero-second-para {
    display: none;
  }
  
  .hero-text-box {
    width: 90%;
    max-width: 380px;
    margin: 0 auto;
  }
  
  .hero-book-cover img {
    width: 90%;
    max-width: 380px;
    margin: 0 auto;
    display: block;
  }
  
  /* About the Author Section */
  .about-author-section {
    padding: 0.75rem 0 0.5rem;
  }
  
  .about-author-image {
    display: none;
  }
  
  .about-author-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  
  .about-author-image.author-photo {
    display: block;
  }
  
  .about-author-image.author-photo img {
    width: 60%;
    max-width: 300px;
  }

  /* Blue Pages */
  .page-content-wrapper {
    padding: 0.75rem 0 1rem;
  }
  
  .bottom-nav {
    padding: 0.75rem 0;
  }
  
  .site-footer {
    padding: 1rem 0;
  }

  /* Grid Layouts - All Stack to Single Column */
  .grid-2col,
  .grid-2col-equal,
  .grid-contact {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Cards */
  .card-light-padded {
    padding: 1.5rem 2rem;
  }

}

/* ========== Additional Content Styles (from original) ========== */
.content-section {
  padding: 3rem 0;
}

.content-section h2 {
  font-family: var(--font-sans);
  font-size: 2rem;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
}

.content-section h3 {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.content-section p {
  margin-bottom: 1rem;
  font-size: 1.05rem;
}

.content-section ul,
.content-section ol {
  margin-left: 2rem;
  margin-bottom: 1rem;
}

.content-section li {
  margin-bottom: 0.5rem;
}
/* ===========================
   SAMPLE PAGES — CLEAN VERSION
   =========================== */

.sample-pages-area {
  margin-top: 2rem;
  margin-bottom: 4rem;
  text-align: center;
}

.sample-intro {
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  max-width: 650px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
  opacity: 0.95;
}

.sample-pages {
  margin-top: 1rem;
}

/* Page container with gutters + shadow */
.sample-page {
  position: relative;
  max-width: 900px;
  margin: 0 auto 2.75rem auto;
  padding: 1.5rem;
  background-color: #fdfdfd;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.sample-page img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

.sample-page::after {
  content: attr(data-page);
  position: absolute;
  right: 1.2rem;
  bottom: 1.2rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sample-cta {
  margin-top: 1rem;
  text-align: center;
  color: #ffffff;
}

.sample-cta p {
  margin-bottom: 0.75rem;
  font-family: Georgia, serif;
  font-size: 1rem;
}

.sample-cta-button {
  display: inline-block;
  padding: 0.6rem 1.5rem;
  border-radius: 999px;
  background-color: #ffffff;
  color: #163a6b;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid #ffffff;
}

.sample-cta-button:hover {
  background-color: #e9f2ff;
  color: #102848;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .sample-page {
    padding: 1.1rem;
    margin-bottom: 2rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }

  .sample-page::after {
    right: 0.9rem;
    bottom: 0.9rem;
  }
}
/* SAMPLE PAGES — JS-ENHANCED ANIMATION
   Only applies when <body> has class "sample-animate" (added by JS) */

body.sample-animate .sample-page {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

body.sample-animate .sample-page.is-visible {
  opacity: 1;
  transform: translateY(0);
}