/*
 * Resources Single Posts — layout & style
 * Mobile-first. Tweak variables below to adjust look quickly.
 */

:root {
  --resources-accent: #042234;
  --resources-accent-hover: #2c6289;
  --resources-orange: #e16e00;
  --resources-text: #000000;
  --resources-muted: #666666;

  --resources-card-max: 860px;
  --resources-card-radius: 6px;
  --resources-card-shadow: 0 10px 30px rgba(0,0,0,.12);

  --resources-title-size-mobile: 2.2rem;   /* mobile font size */
  --resources-title-size-desktop: 2.5rem;  /* desktop font size */

  --resources-body-size: 17px;
  --resources-line-height: 1.5;

  --resources-spacing: 24px;
  --resources-spacing-lg: 32px;

  --resources-hero-radius: 6px;

  --resources-hero-bottom: 12px;
}

/* IMAGE BACKGROUND behind the white card */
.resources-single-wrap {
  /* use the same global offset as Talks & page cards */
  padding: var(--scc-card-offset-top, 64px) 16px 48px;
  background-color: var(--resources-accent); /* fallback color */
  background-image: url('/wp-content/themes/scc-newtheme/assets/img/bg-talks2.jpg');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

/* Centered white card */
.resources-card {
  margin: 0 auto;
  max-width: var(--resources-card-max);
  background: #ffffff;
  border-radius: var(--resources-card-radius);
  box-shadow: var(--resources-card-shadow);
  padding: var(--resources-spacing);
}

/* TITLE */
.resources-card .resources-title {
  margin: 8px 0 6px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700; /* mobile weight */
  text-align: center;
  color: #000;
  font-size: var(--resources-title-size-mobile);
  line-height: 1.2;
}

/* DATE */
/*.resources-date {
  text-align: center;
  color: #333;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--resources-spacing);
}*/

.resources-date {
  display: none !important;
}

/* Hero image */
.resources-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--resources-hero-radius);
  margin: 0 0 var(--resources-hero-bottom) 0;
  border: 1px solid #e0e0e0;
}
.resources-hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Body text */
.resources-body {
  color: var(--resources-text);
  font-size: var(--resources-body-size);
  line-height: var(--resources-line-height);
  margin-bottom: var(--resources-spacing);
  font-family: "Inter", "Lato", "Work Sans", system-ui, -apple-system,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.resources-body p,
.resources-body ul,
.resources-body ol,
.resources-body blockquote,
.resources-body figure {
  margin-bottom: var(--resources-spacing);
}
.resources-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* PowerPress / player (if ever used here) */
.powerpress_player,
.mejs-container {
  width: 100%;
}

.mejs-container,
.mejs-embed,
.mejs-embed body,
.powerpress_player .mejs-container {
  background: var(--resources-accent) !important;
}

.mejs-controls {
  padding: 8px 10px;
}

.mejs-time.mejs-duration,
.mejs-time.mejs-currenttime,
.mejs-time-rail,
.mejs-time-rail * {
  color: #fff !important;
  font-size: 14px;
}

/* ORANGE LINKS under the player */
.powerpress_links,
.powerpress_links a {
  color: var(--resources-orange) !important;
}
.powerpress_links {
  margin-top: 8px;
  font-size: 14px;
}

/* BACK BUTTON */
.resources-back {
  text-align: center;
  margin-top: var(--resources-spacing-lg);
}

.resources-back .resources-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: var(--resources-accent);
  color: #ffffff;
  text-decoration: none;
  padding: 12px 28px;
  border-radius: 4px;
  font-size: 16px;

  box-shadow: 0 3px 6px rgba(0,0,0,0.30);

  transition: transform 0.15s ease,
              background 0.2s ease,
              box-shadow 0.2s ease;
}

/* CSS-drawn chevron */
.resources-back .resources-back-btn::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-left: 3px solid #ffffff;
  border-bottom: 3px solid #ffffff;
  transform: rotate(45deg);
  margin-right: 2px;
}

/* HOVER shadow */
.resources-back .resources-back-btn:hover,
.resources-back .resources-back-btn:focus {
  background: var(--resources-accent-hover);
  transform: translateY(-1px);

  box-shadow: 0px 6px 11px -4px rgba(0,0,0,0.75);
  -webkit-box-shadow: 0px 6px 11px -4px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 6px 11px -4px rgba(0,0,0,0.75);
}

/* DESKTOP OVERRIDES */
@media (min-width: 900px) {
  .resources-card .resources-title {
    font-size: var(--resources-title-size-desktop); /* 2.5rem */
    font-weight: 500; /* desktop weight */
  }
  .resources-card {
    padding: var(--resources-spacing-lg);
  }
}

/* ============================
   Books layout – simple & stable
   ============================ */

/* Wrapper for all books on the Books page */
.books-list {
  display: flex;
  flex-direction: column;
  row-gap: 32px;
  margin-top: 12px;
}

/* Each book: cover on the left, text on the right */
.books-list .book-item {
  display: flex;
  align-items: flex-start;
  column-gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #ddd;
}

.books-list .book-item:last-of-type {
  border-bottom: none;
}

/* Book cover image */
.books-list .book-cover img {
  width: 200px;
  height: auto;
  border: 1px solid #555;
  border-radius: 0;         /* sharp corners for covers */
  display: block;
}

/* Text column */
.books-list .book-text h2,
.books-list .book-text h3,
.books-list .book-text p {
  margin: 0 0 10px;
}

.books-list .book-text h2 {
  font-size: 20px;
  color: #042234;
}

.books-list .book-text h3 {
  font-size: 15px;
  font-weight: 600;
  color: #042234;
}

.books-list .book-text p {
  font-size: 15px;
  color: #333333;
}

.books-list .book-text p:last-of-type a[href*="amazon"] {
  display: inline-block;
  padding: 2px 16px 6px;
  border-radius: 4px;
  background: #eb6900;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  valign: middle;
}

.books-list {
    display: flex;
    flex-direction: column;
    row-gap: 0px;
    margin-top: 12px;
}

.books-list .book-text p:last-of-type a[href*="amazon"]:hover {
  background: #ff7a18;
}

/* Mobile: stack cover on top, text below */
@media (max-width: 768px) {
  .books-list .book-item {
    flex-direction: column;
  }

  .books-list .book-cover img {
    margin-bottom: 12px;
  }
}