/* ============================================================
   Writopia Lab theme styling
   Matches the legacy site: dark header bar, pink breadcrumb
   stripe, Roboto Slab mega menu, brand button shapes/fonts.
   ============================================================ */

/* ---- Body copy is serif ---- */
body,
.wp-block-post-content,
.wp-block-post-content p,
.wp-block-post-content li,
.entry-content {
  font-family: Georgia, "Times New Roman", Times, serif !important;
  color: #433848;
}

/* ---- Buttons: match the current site (less rounded, Source Sans) ---- */
.wp-block-button__link {
  border-radius: 6px !important;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ---- Header bar: logo left, the six-item nav CENTERED on the page, buttons right ----
   A 1fr / auto / 1fr grid centers the middle column on the page regardless of how wide
   the logo or the buttons are, which a flex space-between layout cannot do. ---- */
.writopia-headerbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
}
.writopia-headerbar > * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
.writopia-headerbar > .wp-block-site-logo { justify-self: start; }
.writopia-headerbar > .writopia-globalnav { justify-self: center; }
.writopia-headerbar > .writopia-headerbtns { justify-self: end; }

@media (max-width: 900px) {
  .writopia-headerbar { grid-template-columns: 1fr; row-gap: 0.75rem; }
  .writopia-headerbar > * { justify-self: center !important; }
}

/* ---- Global header nav (For Students / For Donors / ...) in a centered 3-col grid ---- */
.writopia-globalnav .wp-block-navigation__container {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  justify-items: center;
  column-gap: 1.6rem;
  row-gap: 0.15rem;
}
/* A muted grey, so these secondary menus sit back from the headline navigation rather than
   competing with it. The header/footer groups carry WordPress's has-base-color utility,
   which forces pure white with !important, so these must override it. */
.writopia-globalnav .wp-block-navigation-item > a,
.writopia-globalnav .wp-block-navigation-item__content,
.writopia-globalnav a {
  font-family: "Source Sans 3", sans-serif;
  text-transform: lowercase;
  font-weight: 400;
  font-size: 0.95rem;
  color: #c9c7c3 !important;
}

/* ---- Footer menus: the same muted grey as the six-item menu up top. ---- */
.writopia-footernav .wp-block-navigation-item > a,
.writopia-footernav .wp-block-navigation-item__content,
.writopia-footernav a {
  color: #c9c7c3 !important;
}

/* ---- Mega menu: Roboto Slab, lowercase, brand colors, green hover ---- */
.writopia-mega .wp-block-navigation-item > a,
.writopia-mega .wp-block-navigation-item > .wp-block-navigation-item__content,
.writopia-mega .wp-block-navigation__submenu-icon + a {
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif;
  font-weight: 300;
  font-size: 48px;
  line-height: 1;
  text-transform: lowercase;
  color: #ff009b;
}
/* Top-level items are magenta by default; the active section (and hover) is green */
.writopia-mega .wp-block-navigation__container > .wp-block-navigation-item > a:hover,
.writopia-mega .wp-block-navigation__container > .wp-block-navigation-item.ws-active > a {
  color: #a8d04c !important;
}

/* Hide the default WP submenu caret next to top-level mega-menu items.
   The live site shows no such indicator; hover produces the nav-hover.png
   triangle below instead. */
.writopia-mega .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
  display: none;
}

/* Second-level flyout indicators: the WP submenu caret next to dropdown items
   that themselves have a submenu. WP's built-in chevron is a thin 12x12 SVG
   with a 1.5px stroke, which reads as a spidery pen-mark on the green panel
   even after recoloring. Hide the SVG and draw a solid, chunky white
   right-pointing triangle in its place using pure CSS borders, so shape and
   weight both change (not just color). */
.writopia-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon svg {
  display: none !important;
}
.writopia-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
  /* Reset the WP-block sizing (.6em box), then re-size around the triangle. */
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin-left: 0.5em !important;
  background: transparent !important;
  color: #ffffff !important;
  line-height: 0;
}
.writopia-mega .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 10px solid #ffffff;
}

/* Tie a heading to what it heads: very little space after any heading */
.wp-block-post-content :is(h1, h2, h3, h4, h5, h6),
.entry-content :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 4px !important;
}
.wp-block-post-content :is(h1, h2, h3, h4, h5, h6) + *,
.entry-content :is(h1, h2, h3, h4, h5, h6) + * {
  margin-block-start: 4px !important;
  margin-top: 4px !important;
}

/* ---- Mega-menu dropdown panels: green background ---- */
/* No border-top here: the live panel has none, and a darker bar would cut the
   pointer triangle off from the panel it is supposed to be attached to.
   The small margin-top pushes the flyout down so it does not crowd the
   top-level menu label; the triangle below is shifted by the same amount so
   it stays visually attached to the top of the flyout. */
.writopia-mega .wp-block-navigation__submenu-container {
  background-color: #a8d04c !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  padding: 0.5rem 0;
  min-width: 280px;
  margin-top: 8px !important;
}

/* ---- Mega-menu pointer triangle ---- */
/* Uses the live site's 27x15 PNG (nav-hover.png) verbatim: it is a sketch-style
   shape with soft edges and antialiasing that a pure CSS triangle cannot match.
   Sits just below the parent item (bottom: -8px) so its base meets the top of
   the flyout — the flyout is offset by the same 8px above.
   :focus-within is included because the submenu also opens on keyboard focus. */
.writopia-mega .wp-block-navigation__container > .wp-block-navigation-item.has-child {
  position: relative;
}

.writopia-mega .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover::after,
.writopia-mega .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 27px;
  height: 15px;
  transform: translateX(-50%);
  background: url("../images/nav-hover.png") no-repeat center bottom;
  pointer-events: none;
  z-index: 1;
}
.writopia-mega .wp-block-navigation__submenu-container .wp-block-navigation-item > a {
  font-family: "Source Sans 3", "Source Sans Pro", sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
  text-transform: lowercase !important;
  color: #ffffff !important;
  padding: 0.45rem 1.2rem !important;
}
.writopia-mega .wp-block-navigation__submenu-container .wp-block-navigation-item > a:hover {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.12);
}

/* ---- Pink breadcrumb stripe ---- */
.writopia-pinkstripe {
  border-top: 4px solid rgba(0, 0, 0, 0.12);
}
.writopia-breadcrumbs {
  color: #ffffff;
  font-family: Georgia, "PT Serif", "Times New Roman", Times, serif;
  text-transform: lowercase;
  font-size: 0.95rem;
}
.writopia-breadcrumbs a {
  color: #ffffff;
  text-decoration: none;
}
.writopia-breadcrumbs a:hover {
  text-decoration: underline;
}
.writopia-breadcrumbs .sep {
  opacity: 0.7;
  padding: 0 0.15rem;
}

/* ---- Sticky header (the dark bar + pink stripe stay put on scroll) ---- */
.wp-site-blocks > header.wp-block-template-part,
.writopia-sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 1000; }
/* No gap between the dark bar and the pink stripe */
.writopia-sticky > * { margin-block-start: 0 !important; margin-top: 0 !important; }

/* ---- Right sidebar modules ---- */
.writopia-sidebar-module .ws-mod-title {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #433848;
  font-size: 1.35rem;
  margin: 0 0 0.35rem;
}
.writopia-sidebar-module {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-top: 3px solid #ff009b;
  padding: 1rem 1.15rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}
.writopia-sidebar-module h3,
.writopia-sidebar-module h5,
.writopia-sidebar-module h6 {
  font-family: "Roboto Slab", serif;
  color: #433848;
  margin-top: 0;
}
.writopia-sidebar-module img {
  max-width: 100%;
  height: auto;
}
.writopia-sidebar-module a {
  color: #ff009b;
}

/* ---- Content images: text wraps around them, as it does for most pictures on the live
   site (143 of its floated images go left, 26 go right). Images that declare their own
   float in their markup keep it, because an inline style outranks this rule. A picture
   as wide as the column simply pushes the text below it, so floating every image is safe.
   ---- */
.wp-block-post-content img,
.entry-content img {
  max-width: 100%;
  height: auto;
  float: left;
  margin: 0.25rem 1.25rem 0.75rem 0;
}
/* Right-floated pictures need their margins mirrored. */
.wp-block-post-content img[align="right"],
.entry-content img[align="right"],
.wp-block-post-content img[style*="float: right"],
.wp-block-post-content img[style*="float:right"],
.entry-content img[style*="float: right"],
.entry-content img[style*="float:right"] {
  margin: 0.25rem 0 0.75rem 1.25rem;
}
/* Headings should start a fresh line rather than squeezing beside a picture. */
.wp-block-post-content :is(h1, h2, h3, h4),
.entry-content :is(h1, h2, h3, h4) {
  clear: both;
}
/* A list next to a floated picture would otherwise slide under it and its bullets would
   disappear behind the image. flow-root makes the list its own block so it sits beside
   the picture with its markers intact. */
.wp-block-post-content :is(ul, ol),
.entry-content :is(ul, ol) {
  display: flow-root;
}
/* Floats must not escape the content column. */
.wp-block-post-content::after,
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

/* ---- Pull-quotes in content: the quote reads as a quote, the attribution as a name.
   In the migrated markup the name is a <small> inside the blockquote, so it inherits the
   blockquote's italics and has to be set back upright. ---- */
.wp-block-post-content blockquote,
.entry-content blockquote {
  font-style: italic;
}
.wp-block-post-content blockquote small,
.entry-content blockquote small {
  font-style: normal;
  opacity: 0.8;
}
.wp-block-post-content blockquote small::before,
.entry-content blockquote small::before {
  content: "\2014\00a0";   /* em-dash + non-breaking space, before the name */
}
/* The name lives in its own <p>, which would otherwise sit a full paragraph-gap below the
   quote. Collapse that so the attribution hugs the quote it belongs to. */
.wp-block-post-content blockquote > p,
.entry-content blockquote > p {
  margin-bottom: 0 !important;
  margin-block-end: 0 !important;
}
.wp-block-post-content blockquote > p:last-child,
.entry-content blockquote > p:last-child {
  margin-top: 2px !important;
  margin-block-start: 2px !important;
}

/* ---- Home slider ---- */
.writopia-slider { position: relative; overflow: hidden; }
.writopia-slider .ws-track { display: flex; transition: transform 0.6s ease; }
.writopia-slider .ws-slide {
  position: relative; flex: 0 0 100%; min-height: 460px;
  background-size: cover; background-position: center; display: flex; align-items: center;
}
.writopia-slider .ws-slide::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(32,32,32,0.72) 0%, rgba(32,32,32,0.35) 55%, rgba(32,32,32,0.10) 100%);
}
.writopia-slider .ws-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 2rem; width: 100%; color: #fff; }
.writopia-slider .ws-inner h2 { font-family: "Roboto Slab", serif; color: #fff; font-size: 2.6rem; line-height: 1.1; max-width: 640px; margin: 0 0 1rem; }
.writopia-slider .ws-inner p { max-width: 560px; font-size: 1.15rem; margin: 0 0 1.25rem; }
.writopia-slider .ws-btn { display: inline-block; background: #ff009b; color: #fff; text-decoration: none; font-family: "Source Sans 3", sans-serif; font-weight: 700; padding: 0.6rem 1.6rem; border-radius: 6px; }
.writopia-slider .ws-prev, .writopia-slider .ws-next {
  position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.35);
  color: #fff; border: 0; font-size: 2rem; width: 48px; height: 64px; cursor: pointer; z-index: 3;
}
.writopia-slider .ws-prev { left: 0; }
.writopia-slider .ws-next { right: 0; }
.writopia-slider .ws-dots { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; z-index: 3; }
.writopia-slider .ws-dots button { width: 11px; height: 11px; border-radius: 50%; border: 0; margin: 0 4px; background: rgba(255,255,255,0.5); cursor: pointer; }
.writopia-slider .ws-dots button.active { background: #ff009b; }
@media (max-width: 600px) {
  .writopia-slider .ws-inner h2 { font-size: 1.8rem; }
  .writopia-slider .ws-slide { min-height: 340px; }
}

/* ============================================================
   HOMEPAGE SECTIONS (hero, testimonials, what's hot, mailing list, connect)
   Mirrors the live homepage: photo carousel with a fixed overlay, a pink
   testimonial band, a card grid, the Mailchimp signup, and the social strip.
   ============================================================ */

/* ---- Hero: nine photographs cross-fading behind one fixed message ---- */
.ws-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ws-hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.ws-hero-slide.is-active { opacity: 1; }
.ws-hero-overlay {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 1rem;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.ws-hero-title {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.15;
}
.ws-hero-sub {
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  margin-top: 0.35rem;
}
.ws-hero-btn {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.55rem 1.9rem;
  border-radius: 6px;
  /* Opaque enough that the photo behind it does not wash the button out,
     while still letting a little of the image through; solid on hover. */
  background: rgba(255, 0, 153, 0.7);
  color: #ffffff !important;
  text-decoration: none;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 700;
}
.ws-hero-btn:hover { background: rgb(255, 0, 153); }

/* ---- Testimonials: pink band, one quote at a time ---- */
.ws-testimonials {
  background: #ff009b;
  color: #ffffff;
  padding: 2.2rem 1.5rem 2.8rem;
  text-align: center;
}
.ws-testimonials-title {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #1a1a1a !important;
  font-size: 2rem;
  margin: 0 0 1rem;
}
.ws-testimonial-stage { max-width: 900px; margin: 0 auto; min-height: 120px; }
.ws-testimonial { display: none; margin: 0; font-size: 0.95rem; line-height: 1.5; }
.ws-testimonial.is-active { display: block; }
.ws-testimonial p { color: #ffffff !important; margin: 0 0 0.5rem; }
.ws-testimonial cite { display: block; font-style: normal; color: #ffffff; }
.ws-testimonial-nav { margin-top: 1rem; }
.ws-testimonial-nav button {
  background: #1a1a1a; color: #ffffff; border: 0;
  width: 34px; height: 34px; border-radius: 50%;
  margin: 0 4px; cursor: pointer; font-size: 1rem; line-height: 1;
}

/* ---- What's Hot: card grid ---- */
.ws-whatshot { padding: 2.5rem 1.5rem 3rem; }
.ws-whatshot-title {
  font-family: Georgia, "Times New Roman", Times, serif;
  text-align: center;
  font-size: 2rem;
  margin: 0 0 1.6rem;
}
.ws-whatshot-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.ws-card {
  background: #ffffff;
  border: 1px solid #eaeaea;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  text-align: center;
  font-size: 0.9rem;
}
.ws-card img { max-width: 100%; height: auto; float: none !important; margin: 0 auto 0.6rem; display: block; }
.ws-card h2, .ws-card h3, .ws-card h4 { font-size: 1.05rem; margin: 0.4rem 0; }
.ws-card a { color: #ff009b; }
@media (max-width: 900px) { .ws-whatshot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ws-whatshot-grid { grid-template-columns: 1fr; } }

/* ---- Join our Mailing List ---- */
.ws-mailing {
  max-width: 1200px; margin: 0 auto; padding: 1rem 1.5rem 3rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start;
}
.ws-mailing-title { font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.8rem; margin: 0 0 0.5rem; }
.ws-mailing-left img { max-width: 100%; height: auto; margin-top: 1rem; }
.ws-mailing-form label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; }
.ws-mailing-form input[type="email"],
.ws-mailing-form input[type="text"] {
  display: block; width: 100%; padding: 0.4rem 0.5rem;
  border: 1px solid #999; border-radius: 3px; margin-top: 0.2rem;
}
.ws-required { font-size: 0.75rem; text-align: right; margin: 0 0 0.5rem; }
.ws-req { color: #ff009b; }
.ws-groups { border: 0; padding: 0; margin: 0.5rem 0 1rem; }
.ws-groups legend { font-weight: 700; font-size: 0.9rem; padding: 0; }
.ws-check { font-weight: 400; }
.ws-check input { width: auto; margin-right: 0.4rem; }
.ws-subscribe {
  background: #ff009b; color: #ffffff; border: 0;
  padding: 0.5rem 1.6rem; border-radius: 4px; cursor: pointer;
  font-family: "Source Sans 3", sans-serif; font-weight: 700;
}
@media (max-width: 800px) { .ws-mailing { grid-template-columns: 1fr; } }

/* ---- Connect & Interact strip ---- */
.ws-connect {
  /* The social icon PNGs have a solid white fill behind their glyphs, and the live site
     sits them on white so they blend invisibly. An off-white strip would frame each icon
     in a visible white box, so this strip is white to match. */
  background: #ffffff;
  padding: 1.4rem 1.5rem;
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; flex-wrap: wrap;
}
.ws-connect-label { font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.35rem; }
.ws-connect-icons { display: flex; gap: 0.9rem; align-items: center; }
.ws-social { display: inline-block; line-height: 0; }
.ws-social img {
  width: 50px;
  height: 50px;
  display: block;
  transition: opacity 0.15s ease;
}
.ws-social:hover img { opacity: 0.75; }

/* ---- What's Hot card internals ---- */
.ws-cardlink { display: block; text-decoration: none; }
.ws-cardlink img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.ws-cardlink h3 {
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #ff009b;
  font-size: 1.05rem;
  margin: 0.6rem 0 0.35rem;
}
.ws-cardtext { font-size: 0.85rem; line-height: 1.45; }
.ws-cardtext p { margin: 0 0 0.4rem; }

/* ---- Homepage: no stripes between the full-bleed bands ----
   The homepage sections (hero, testimonials, what's hot, mailing list, connect) are
   full-width bands that must butt directly against each other. WordPress inserts its
   block-gap (~24px) between top-level blocks, which let the page background show through
   as two pale horizontal stripes - one under the header, one under the hero. Zero the gap
   on the homepage so the bands touch. ---- */
body.home .wp-site-blocks > * + * {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
body.home .ws-hero,
body.home .ws-testimonials,
body.home .ws-whatshot,
body.home .ws-mailing,
body.home .ws-connect {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Child-page index, used by the container levels of the menu (What We Offer, Staff, Board). */
.writopia-childindex {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem 1.75rem;
}

.writopia-childindex-item {
  margin: 0;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid #e4e2de;
}

.writopia-childindex-link {
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
}

.writopia-childindex-link:hover {
  text-decoration: underline;
}

.writopia-childindex-blurb {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.8;
}