/*
Theme: Back In the '70s — Clean CSS (Consolidated)
Author: Slothifer
Version: 3.0
*/

/* ===========================
   VARIABLES
   =========================== */
:root{
  --salmon:#FFA07A;
  --pastel-red:#FF7F7F;
  --mute-rose:#E57373;
  --blush:#F28C8C;

  --red:#D63025;
  --red2:#ff3300;
  --red3:#E31837;
  --red4:#FF6347;
  --fire:#E53935;

  --orange:#ff4b15;
  --orange4:#CC5500;
  --yellow:#FFFF00;

  --blue2:#163a4d;

  --cream:#FFFF66;
  --black:#111;

  /* layout */
  --content-max: 1200px;
  --content-pad: clamp(14px, 3vw, 32px);
}

/* ===========================
   BASE / RESET
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Modak&family=Sriracha');

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  font-family:'Bagel Fat One', cursive;
  color:var(--cream);
  background: linear-gradient(
    135deg,
    #00008b 0%,
    #1e3ba8 20%,
    #4b6ee8 40%,
    #1e3ba8 60%,
    #00008b 80%,
    #1e3ba8 100%
  );
}

img{ 
  max-width:100%; 
  height:auto; 
  display:block; 
  border-radius:12px; 
  object-fit:contain; 
}

/* Gutenberg constrained wrappers */
.site-wrapper, .site-content, .wp-site-blocks{ width:100%; }

/* ===========================
   SITE SHELL
   =========================== */
.site-wrapper{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.site-content {
  flex: 1 1 auto;
  display: block;
  width: 100%;
}

header.header-container{
  font-size: 24px;
  flex-wrap: nowrap;
  white-space: nowrap;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem 2rem;
  background:var(--blue2);
}

.site-title{
  margin:0;
  font-family:'Bagel Fat One', cursive;
  font-size:clamp(1rem, 5vw, 2.5rem);
  color:var(--yellow);
  letter-spacing:2px;
  text-transform:uppercase;
  text-shadow:
    2px 2px 2px var(--black),
    2px 2px 2px var(--red),
    4px 4px 4px var(--orange),
    8px 8px 8px var(--black);
}
.site-title a{ color:inherit; text-decoration:none; }

.nav-menu {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  gap:40px;
  list-style:none;
  margin:0;
  padding:clamp(0.5rem, 2vw, 1.5rem);
  font-family:'Bagel Fat One', cursive;
}

.nav-menu li{ margin:0; padding:0; list-style-type:none; }

.nav-menu a{
  display:inline-flex;
  color:var(--yellow);
  font-size:clamp(0.95rem, 1.7vw, 1.5rem);
  font-weight:bold;
  text-decoration:none;
  transition:color .25s ease;
  text-shadow:
    2px 2px 2px var(--black),
    2px 2px 2px var(--red),
    4px 4px 4px var(--orange),
    8px 8px 8px var(--black);
}
.nav-menu a:hover{ color:var(--cream); }

/* ===========================
   MAIN CONTENT
   =========================== */
.main-content{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:var(--content-pad);
  background:var(--red);
  border:4px solid var(--orange4);
  border-radius:10px;
  color:var(--cream);
  text-align:center !important;
}

/* ===========================
   TYPOGRAPHY
   =========================== */
.entry-title,
h1{ 
  font-family:'Bagel Fat One', cursive; 
  text-transform:uppercase; 
  text-align:center; 
  color:var(--yellow); 
}
.entry-title, .entry-title a{ 
  font-size:clamp(2rem, 4vw, 3rem); 
  margin:0 0 1rem; 
  text-shadow:1px 1px 1px #000, 2px 2px 2px #000, 3px 3px 3px #000, 4px 4px 4px #000; 
  text-decoration:none;
  color:var(--yellow);
  font-family:'Bagel Fat One', cursive;
}
h2{ font-size:clamp(1.35rem, 2.8vw, 2rem); text-align:center !important; }
h3{ font-size:clamp(1.2rem, 2.2vw, 1.6rem); }
p{ font-size:clamp(1rem, 1.3vw, 1.15rem); line-height:1.55; }

/* ===========================
   FOOTER
   =========================== */
footer.site-footer{
  margin-top:auto;
  font-family:'Bagel Fat One', cursive;
  background:var(--blue2);
  color:var(--yellow);
  text-align:center;
  padding:1rem;
  font-size:clamp(1rem, 2vw, 1.5rem);
  text-shadow:1px 1px 1px var(--fire), 1px 1px 1px #000;
  width:100%;
}

/* ===========================
   HOMEPAGE CONTENT
   =========================== */
body.home .site-content .entry-content{
  width:100%;
  max-width:100%;
  flex:1;
  margin:0;
  padding:var(--content-pad);
  box-sizing:border-box;
  border-radius:12px;
  text-align:center !important;
}

/* NATURAL WRAPPING ON HOME (no vertical letter stacks) */
body.home .entry-content h1,
body.home .entry-content h2,
body.home .entry-content h3,
body.home .entry-content p{
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  text-align: center !important;
}

.wp-image-1159.size-full {
  width: 450px;
  margin-top: 25px;
  margin-bottom: 25px;
}

/* ===========================
   SEE MORE BOOKS (desktop base)
   =========================== */
body.home .entry-content .has-luminous-vivid-amber-background-color h2,
body.home .entry-content .has-luminous-vivid-amber-background-color h3,
body.home .entry-content .has-luminous-vivid-amber-background-color p{
  text-align:center !important;
  display:block;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

body.home .entry-content .has-luminous-vivid-amber-background-color h2{
  color:var(--red2);
  font-size:clamp(1.5rem, 3vw, 2.5rem);
  margin:0 0 0.5rem;
}

/* “See More” grid row (desktop) */
body.home .entry-content .has-luminous-vivid-amber-background-color .wp-block-group.is-layout-grid{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  align-items:flex-start !important;
  gap:clamp(20px, 3vw, 40px) !important;
  max-width:min(1200px, 95vw) !important;
  margin:clamp(24px, 4vw, 60px) auto !important;
}

/* ===========================
   HOMEPAGE HERO SECTION (desktop)
   =========================== */
body.home .wp-block-media-text.has-media-on-the-right.has-luminous-vivid-amber-background-color {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * (100vw - 100%) / 2);
  padding: 2rem clamp(1rem, 4vw, 3rem);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
body.home .wp-block-media-text.has-media-on-the-right.has-luminous-vivid-amber-background-color .wp-block-media-text__content {
  max-width: 650px;
  margin: 0;
  padding-right: 1rem;
}
body.home .wp-block-media-text.has-media-on-the-right.has-luminous-vivid-amber-background-color .wp-block-media-text__media img {
  max-width: 320px;
  height: auto;
  border-radius: 10px;
  margin: 0 auto;
}

/* ===========================
   BOOK PAGE (ID 1084)
   =========================== */
body.page-id-1084 .wp-block-media-text__media img,
body.page-id-1084 .wp-block-image img,
body.page-id-1084 figure img {
  width:100% !important;
  max-width:450px !important;
  height:auto !important;
  display:block;
  margin:0 auto 1rem;
  border-radius:10px;
}

body.page-books .wp-image-1159,
body.page-books .wp-image-1161,
body.page-books .wp-image-1184 {
  max-width: 250px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1rem;
  border-radius: 10px;
}

/* ===========================
   SCRIPT PAGE (ID 460 & 1067)
   =========================== */
body.page-id-1067 .wp-block-group.has-luminous-vivid-amber-background-color {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  text-align: center;
  max-width: 850px;
}
body.page-id-1067 .wp-block-columns.is-content-justification-center {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  max-width: 850px;
}
body.page-id-1067 .has-text-align-center { max-width: 850px; font-size: 26px; margin-top: 20px; }
body.page-id-1067 .wp-block-group figure { margin-top: 80px; }

/* As the Butte Burns */
body.page-id-460 .entry-content .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
body.page-id-460 .entry-content .wp-block-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-evenly;
}
body.page-id-460 .entry-content .wp-block-gallery { display: flex; justify-content: space-evenly; align-items: center; }
body.page-id-460 .entry-content .wp-block-image {
  justify-content: space-evenly;
  align-items: center;
  align-content: center;
  max-width: 480px;
  aspect-ratio: 1/1;
  height: auto;
  margin-bottom: 0.75rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
body.page-id-460 .wp-block-columns { display: flex; margin: 0; font-size: 1rem; color: var(--yellow); font-style: italic; }
body.page-id-460 .wp-block-column p { justify-content: center; text-align: center; align-items: center; align-content: center; font-size: 36px; }

/* ===========================
   LEILANI (ID 1446)
   =========================== */
body.page-id-1446 .wp-block-group { display: flex; align-items: center; justify-content: center; width: 100vw; }
body.page-id-1446 .has-text-align-center { display: column; justify-content: center; text-align: center; width: 750px; font-size: 24px; }
body.page-id-1446 .wp-block-group .wp-block-media-text__media img,
body.page-id-1446 .wp-block-group .wp-block-media-text__content {
  margin-left: auto;
  margin-right: auto;
  width: 450px;
  height: auto;
  font-size: 24px;
}
body.page-id-1446 .wp-block-group__inner-container .wp-block-media-text { justify-content: center; font-size: 24px; }

/* ===========================
   KOKOPELLI (ID 1316)
   =========================== */
body.page-id-1316 .wp-block-group { justify-content: center; }
body.page-id-1316 .wp-block-group__inner-container { justify-content: center; display: column; }
body.page-id-1316 .wp-block-group__inner-container .has-text-align-center { justify-content: center; text-align: center; width: 850px; }
body.page-id-1316 .wp-block-group figure { margin-top: 30px; width: 450px; height: auto; }

/* ===========================
   SINGULARITY (ID 1140)
   =========================== */
body.page-id-1140 .wp-block-group figure { margin-right: 30px; }

/* ===========================
   EMBEDS / MISC
   =========================== */
:root { --spotify-width: clamp(280px, 90vw, 660px); --spotify-height: 352px; }
.wp-block-embed-spotify, .wp-block-embed.is-provider-spotify { max-width: var(--spotify-width); margin-inline: auto; }

body.page-id-2057 .wp-block-jetpack-slideshow { width: clamp(550px, 65vw, 450px); }
body.page-id-2057 .wp-block-jetpack-slideshow.aligncenter, .wp-block-jetpack-slideshow { display: block; margin-left: auto; margin-right: auto; text-align: center; }
body.page-id-2057 .wp-block-embed-youtube,
body.page-id-2057 .wp-block-embed.is-provider-youtube,
body.page-id-2057 .wp-block-embed-youtube .wp-block-embed__wrapper { display: block; margin-left: auto; margin-right: auto; text-align: center; width: 800px; }

body.page-id-2057 p { max-width: 850px; margin-right: auto; margin-left: auto; }
body.page-id-1067 p { max-width: 850px; }
body.page-id-1773 .entry-content .has-text-align-center, body.page-id-1773 .entry-content p { display: flex; margin-left: auto; margin-right: auto; max-width: 850px; text-align: center; }
body.page-id-2118 .entry-content p { max-width: 850px; margin-right: auto; margin-left: auto; }

body.page-id-2143 object.wp-block-file__embed { max-width: 950px; margin-right: auto; margin-left: auto; }
body.page-id-2143 .lookbook-kokopelli { max-width: 980px; margin-right: auto; margin-left: auto; }

body.page-id-1084 .wp-block-group.is-layout-grid {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: space-evenly;
  align-content: center;
  align-self: center;
}
body.page-id-1084 p { text-align: center; margin-right: auto; margin-left: auto; }

body.page-id-1449 .wp-block-group.is-horizontal .has-text-align-center  { width: 850px; }

/* Page 1499 text + buy buttons (desktop base) */
body.page-id-1499 .entry-content p {
  text-align: center;
  font-size: 36px;
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
body.page-id-1499 .entry-content p.has-text-align-center {
  max-width: 850px;
  margin: 0 auto;
  font-size: 1.5rem;
  line-height: 1.6;
}
body.page-id-1499 .entry-content .wp-block-separator, 
body.page-id-1499 .entry-content hr.wp-block-separator { display: none; }
body.page-id-1499 .entry-content .wp-block-buttons {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin: 2rem auto 2.5rem;
}
body.page-id-1499 .entry-content .wp-block-button .wp-block-button__link {
  background: #111827;
  color: #fff;
  padding: 0.85rem 2.7rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1.05rem;
  border: 2px solid transparent;
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
  transition: transform .15s ease-out, box-shadow .15s ease-out, background .15s ease-out;
  text-decoration: none;
}
body.page-id-1499 .entry-content .wp-block-button .wp-block-button__link:hover {
  background: #1f2937;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
body.page-id-1499 .entry-content .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.7);
}

/* PDFs — base (desktop) */
body.page-id-2312 .entry-content iframe,
body.page-id-2312 .entry-content embed,
body.page-id-2312 .entry-content object {
  width: 100%;
  max-width: 900px;
  height: 900px;
  display: block;
  margin: 0 auto 2rem;
  border: none;
}
body.page-id-2312 .entry-content .wp-block-file .wp-block-file__embed {
  max-width: 900px;
  margin: 0 auto 2rem;
}
body.page-id-2312 .entry-content .wp-block-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
body.page-id-2312 .entry-content .wp-block-file > a { text-align: center; }
body.page-id-2312 .entry-content .wp-block-file object {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* AUDIO page (ID 2331) – base */
body.page-id-2331 .wp-block-audio { width: 450px; align-items: center; display: block; justify-content: center; }
body.page-id-2331 .entry-content .wp-block-audio {
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
}
body.page-id-2331 .entry-content .wp-block-audio figcaption { text-align: center; }

/* ===========================
   MOBILE (CLEAN) — <=900px
   =========================== */
@media (max-width: 900px){
	html, * {
		font-family: "Sriracha", cursive !important;
	}
	
	body, * {
		font-family: "Sriracha", cursive !important;
	}
	
	button, input, select, textarea {
		font-family: inherit !important;
	}
  /* Global shell */
  header.header-container{
    flex-direction: column;
    text-align: center;
    gap: .5rem;
    padding: 1rem;
  }
  .nav-menu{ flex-wrap: wrap; gap: 1rem; }
  .main-content{ padding: 1rem; border-width: 2px; }

  /* HOME: consistent container & neat stack */
  body.home .entry-content{
    --home-max: min(1100px, 96vw);
    --home-pad: clamp(14px, 3vw, 32px);
  }
  body.home .entry-content > :where(
    .wp-block-group,
    .wp-block-media-text,
    .wp-block-columns,
    .has-luminous-vivid-amber-background-color,
    .wp-block-jetpack-slideshow
  ){
    max-width: var(--home-max);
    margin: clamp(12px, 3vw, 28px) auto;
    padding-inline: var(--home-pad);
    box-sizing: border-box;
  }

  /* Image on top, paragraph block below (Media & Text) */
  body.home .wp-block-media-text{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px;
  }
  body.home .wp-block-media-text .wp-block-media-text__media{
    order: 0; margin: 0 auto; width: 100%; max-width: 90vw;
  }
  body.home .wp-block-media-text .wp-block-media-text__media img{
    display: block; max-width: min(420px, 90vw); width: 100%;
    height: auto; border-radius: 12px; margin: 0 auto;
  }
  body.home .wp-block-media-text .wp-block-media-text__content{
    order: 1; width: 100%; max-width: 850px; margin: 0 auto;
    padding: 12px 16px; text-align: center;
    background: rgba(0,0,0,.18); border-radius: 12px; /* remove if you don’t want a panel */
  }
  body.home .wp-block-media-text .wp-block-media-text__content p{
    margin: 0 0 .75rem; font-size: 1.05rem; line-height: 1.6;
  }

  /* “See More” area — compact & tidy button */
  body.home .has-luminous-vivid-amber-background-color{
    border-radius: 12px; padding: 12px 16px 16px;
  }
  body.home .has-luminous-vivid-amber-background-color h2{
    font-size: clamp(1.25rem, 5.5vw, 1.6rem); margin: 0 0 .5rem;
  }
  body.home .has-luminous-vivid-amber-background-color .wp-block-buttons{
    justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem;
  }
  body.home .has-luminous-vivid-amber-background-color
  .wp-block-button .wp-block-button__link{
    padding: .65rem 1.25rem; font-size: 1rem; border-radius: 9999px;
  }

  /* Slideshow — visible, contained, aligned */
  body.home .wp-block-jetpack-slideshow,
  body.home .wp-block-jetpack-slideshow_container{
    width: 100% !important; max-width: var(--home-max) !important; margin-inline: auto;
  }
  body.home .wp-block-jetpack-slideshow_container{
    aspect-ratio: 4 / 3; /* taller on phones so it feels substantial */
    border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.25);
  }
  body.home .wp-block-jetpack-slideshow_container img,
  body.home .wp-block-jetpack-slideshow_image img{
    width: 100%; height: 100%; object-fit: contain; display: block;
  }
  body.home .wp-block-jetpack-slideshow{ margin-bottom: 1rem; }
  body.home .wp-block-jetpack-slideshow + .wp-block-buttons{
    justify-content: center; gap: .75rem; flex-wrap: wrap;
    margin: .5rem auto 1.25rem;
  }

  /* cover images anywhere on home */
  body.home .entry-content .wp-block-image img{
    max-width: min(420px, 90vw); height: auto !important;
    display: block; margin: 0 auto 1rem;
  }

  /* breathing room above footer */
  body.home .main-content{ padding-bottom: max(2rem, 5vh); }

  /* BOOKS PAGE (1084): pair titles with covers */
  body.page-id-1084 .wp-block-group.is-layout-grid,
  body.page-id-1084 .wp-block-group.is-layout-grid.wp-container-core-group-is-layout-grid{
    display: block !important; /* stop flex/grid reshuffling */
  }
  body.page-id-1084 .wp-block-group.is-layout-grid > *{
    margin: 0 auto 1.75rem; text-align: center;
  }
  body.page-id-1084 .wp-block-group.is-layout-grid img{
    display: block; margin: 0 auto .5rem; max-width: 280px; width: 100%; height: auto;
  }

  /* PDFs (Gutenberg File block): visible but not huge */
  body.page-id-2312 .entry-content .wp-block-file__embed,
  body.page-id-2347 .entry-content .wp-block-file__embed,
  body.page-id-2143 .entry-content .wp-block-file__embed,
  body.page-id-2312 .entry-content object[type="application/pdf"],
  body.page-id-2347 .entry-content object[type="application/pdf"],
  body.page-id-2143 .entry-content object[type="application/pdf"]{
    width: 100% !important; max-width: 100% !important;
    height: 50vh !important; max-height: 420px !important;
    display: block; margin-inline: auto;
  }

  /* Audio (2331) */
  body.page-id-2331 .entry-content .wp-block-audio,
  body.page-id-2331 .wp-block-audio{
    width: 100% !important; max-width: 100% !important; margin-inline: auto !important;
  }
  body.page-id-2331 .entry-content .wp-block-audio figcaption{ text-align: center; }

  /* Big button rows (1499) */
  body.page-id-1499 .entry-content .wp-block-buttons{
    flex-direction: column; align-items: center;
  }
  body.page-id-1499 .entry-content .wp-block-button .wp-block-button__link{
    width: min(100%, 340px); text-align: center;
  }
}

/* Tiny phones (<=480px) */
@media (max-width: 480px){
  .nav-menu{ gap: .5rem; }
  body.home .entry-title,
  body.home .entry-content h1{ font-size: clamp(1.6rem, 8vw, 2.2rem); }
  /* PDFs a touch shorter */
  body.page-id-2312 .entry-content .wp-block-file__embed,
  body.page-id-2347 .entry-content .wp-block-file__embed,
  body.page-id-2143 .entry-content .wp-block-file__embed,
  body.page-id-2312 .entry-content object[type="application/pdf"],
  body.page-id-2347 .entry-content object[type="application/pdf"],
  body.page-id-2143 .entry-content object[type="application/pdf"]{
    height: 45vh !important; max-height: 360px !important;
  }
}