/*
Theme Name: Is God Mean?
Template: twentytwentyfive
Description: Book and video-series site for Is God Mean? by Chris Ulery. Child of Twenty Twenty-Five; same design tokens (theme.json) as chrisulery.com so the two sites look like one family.
Version: 1.8.3
Text Domain: isgodmean
*/

/* =============================================================================
   HOW THIS SITE IS STYLED (read this first)
   -----------------------------------------------------------------------------
   This site shares its look with chrisulery.com. Three layers, in this order:

   1. SITE-WIDE SETTINGS (no code): colors, fonts, text sizes, default button
      look. Stored in theme.json. Change them in wp-admin: Appearance > Editor >
      Styles. (Keep them the same as chrisulery.com.)
   2. BLOCK SETTINGS (no code): background colors, spacing, columns. Click the
      block in the page editor and use the right-hand Settings panel.
   3. THIS FILE (custom CSS): only what block settings can't do. Each section
      says what it controls and where it shows up.

   CONNECTING CSS TO A BLOCK: rules target class names starting with "igm-".
   The class is set on the block under Settings > Advanced > "Additional CSS
   class(es)". Remove the class and the block loses that styling.

   COLORS (same names as chrisulery.com):
     base = White #FFFFFF   contrast = Navy #11222D   accent-1 = Gold #F5D26F
     accent-2 = Deep navy #0A161E   accent-3 = Slate #52616B   accent-4 = Mist #F2F4F6
     accent-5 = Line #D8DEE3   accent-6 = Pale navy #B9C4CC
     accent-7 = Deep gold #85651C (gold for TEXT on light backgrounds)

   TABLE OF CONTENTS
     1. Header and menu
     2. Small uppercase labels
     3. Book cover image
     4. "At a glance" card under the hero
     5. Click-to-play YouTube videos
     6. Chapter list (homepage + Episodes page)
     7. Episode pages: hero, article text, study guide card, previous/next
     8. Quotes and viewer comments
     9. Sign-up card and closing band
    10. Questions and answers (expandable)
    11. About the author photo
    13. Cards that overlap the hero (Book, Study Guide, Contact pages)
    14. Small info cards in a row ("tiles")
    15. Email sign-up form
    16. "Free video series" section (homepage; same as chrisulery.com)
    17. Homepage: story, photos, small-group steps, Episodes menu
    18. Homepage: how Chris answers, pastor quote, author recommendations
    19. Contact form (Contact Form 7)
    20. Episode byline and author box
    12. Phones and small tablets (under 782px), kept last on purpose
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. HEADER AND MENU
   Where: the navy bar at the top of every page (template part "Header").
   Class: igm-header (on the header's outer Group block); igm-nav-cta on the
   last menu link ("Get the Book") makes it a gold pill.
   ----------------------------------------------------------------------------- */
.igm-header .wp-block-site-title a,
.igm-header .wp-block-navigation a { text-decoration: none; }
.igm-header .wp-block-navigation a:hover,
.igm-header .wp-block-navigation a:focus,
.igm-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--accent-1); }
.igm-header .wp-block-navigation .igm-nav-cta > a {
	padding: .55em 1.15em; border-radius: 99px; font-weight: 800;
	background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast) !important;
}
.igm-header .wp-block-navigation .igm-nav-cta > a:hover,
.igm-header .wp-block-navigation .igm-nav-cta > a:focus-visible { filter: brightness(1.08); }
/* No white gap above the footer. */
.wp-site-blocks > footer, .wp-site-blocks > .wp-block-template-part:last-child { margin-block-start: 0; }
main.wp-block-post-content > :first-child { margin-block-start: 0; }


/* -----------------------------------------------------------------------------
   2. SMALL UPPERCASE LABELS
   Where: short lines above a headline, e.g. "CHAPTER 3" or "FREE STUDY GUIDE".
   Class: igm-label (on the Paragraph block).
   ----------------------------------------------------------------------------- */
.igm-label { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
:is(h1, h2, h3) + .igm-label, .igm-label + :is(h1, h2, h3) { margin-block-start: .5rem; }


/* -----------------------------------------------------------------------------
   3. BOOK COVER IMAGE
   Where: the book cover in the homepage hero and on the Book page.
   Class: igm-cover (on the Image block). Safe to change: max-width.
   ----------------------------------------------------------------------------- */
.igm-cover { margin: 0 auto !important; max-width: 340px; }
.igm-cover img { width: 100%; height: auto; filter: drop-shadow(0 34px 40px rgba(0, 0, 0, .55)); }


/* -----------------------------------------------------------------------------
   4. "AT A GLANCE" CARD
   Where: the white card overlapping the bottom of the homepage hero.
   Classes: igm-glance-band = the section; igm-glance = the card;
   igm-glance-item = one fact (big line igm-glance-big + small line igm-glance-small).
   The four icons follow the order of the items (book, video, guide, group).
   Safe to change: 1.6fr = the first fact's extra width (so "The Bible's
   hardest questions" fits on one line on computers).
   ----------------------------------------------------------------------------- */
.igm-glance-band { display: flow-root; position: relative; z-index: 1; border-top: 2px solid var(--wp--preset--color--accent-1); }
.igm-glance-band > .igm-glance {
	position: relative; z-index: 2; margin-top: calc(-1 * clamp(3rem, 6vw, 5rem)) !important;
	display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 0;
	background: var(--wp--preset--color--base); border: 2px solid var(--wp--preset--color--accent-1); border-radius: 20px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45);
}
.igm-glance > *, .igm-glance-item > * { margin: 0 !important; }
.igm-glance-item { padding: 26px 24px; display: flex; flex-direction: column; gap: 4px; }
.igm-glance-item + .igm-glance-item { border-left: 1px solid var(--wp--preset--color--accent-5); }
.igm-glance-item .igm-glance-big { font-size: 1.35rem; font-weight: 800; line-height: 1.2; color: var(--wp--preset--color--contrast); }
.igm-glance-item .igm-glance-small { font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--wp--preset--color--accent-3); }
.igm-glance-item::before {
	content: ""; display: block; width: 30px; height: 30px; margin-bottom: 10px; background: var(--wp--preset--color--accent-7);
	-webkit-mask: var(--igm-icon) center / contain no-repeat; mask: var(--igm-icon) center / contain no-repeat;
}
.igm-glance-item:nth-child(1) { --igm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.5C4.5 4 8 4 12 6c4-2 7.5-2 10-.5V19c-2.5-1.5-6-1.5-10 .5-4-2-7.5-2-10-.5Z'/%3E%3Cpath d='M12 6v13.5'/%3E%3C/svg%3E"); }
.igm-glance-item:nth-child(2) { --igm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M10 8.5v7l6-3.5z'/%3E%3C/svg%3E"); }
.igm-glance-item:nth-child(3) { --igm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6v3H9z'/%3E%3Cpath d='M15 5h2a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E"); }
.igm-glance-item:nth-child(4) { --igm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Ccircle cx='17' cy='9' r='2.5'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6M15 14.3c3.4-.6 6.5 1.4 6.5 4.7'/%3E%3C/svg%3E"); }


/* -----------------------------------------------------------------------------
   5. CLICK-TO-PLAY YOUTUBE VIDEOS
   Where: every episode video. The page shows the video's picture with a gold
   play button; the real YouTube player loads only when someone clicks
   (js/igm-video.js), which keeps these long pages fast.
   Class: igm-video-facade (on an Image block that links to the YouTube video).
   To change the video: click the image > Link and paste a new YouTube address.
   ----------------------------------------------------------------------------- */
.igm-video-facade { margin: 0; }
.igm-video-facade a { position: relative; display: block; border-radius: 28px; }
.igm-video-facade img, .igm-video-frame {
	display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
	border-radius: 28px; border: 2px solid var(--wp--preset--color--accent-1);
	box-shadow: 0 24px 48px -24px rgba(10, 22, 30, .45);
}
.igm-video-frame { overflow: hidden; background: #000; }
.igm-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.igm-video-facade a::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px;
	border-radius: 50%; background: var(--wp--preset--color--accent-1); box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	transition: transform .2s;
}
.igm-video-facade a::after {
	content: ""; position: absolute; left: 50%; top: 50%; margin: -15px 0 0 -9px;
	border-style: solid; border-width: 15px 0 15px 25px; border-color: transparent transparent transparent var(--wp--preset--color--contrast);
}
.igm-video-facade a:hover::before, .igm-video-facade a:focus-visible::before { transform: scale(1.08); }
.igm-video-facade figcaption { margin-top: .9rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-6); }
/* "Video coming soon" panel, shown instead of a video until it's recorded.
   Built by the [igm_video_soon chapter="5"] code (functions.php), which also
   adds the "Can't wait? ... Get the book" nudge. Classes: igm-video-soon (the
   panel on episode pages), igm-soon-inner (its text and button; also used in
   the Episodes page thumbnails). */
.igm-video-soon {
	display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 28px; text-align: center;
	border: 2px dashed rgba(245, 210, 111, .7); background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base);
	box-shadow: 0 24px 48px -24px rgba(10, 22, 30, .45);
}
.igm-soon-inner { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.5rem; max-width: 30rem; }
.igm-soon-label { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent-1); font-size: var(--wp--preset--font-size--small); }
.igm-soon-text { font-size: clamp(1.15rem, 2.6vw, 1.75rem); font-weight: 700; line-height: 1.35; text-wrap: balance; color: var(--wp--preset--color--base); letter-spacing: 0; text-transform: none; }
.igm-soon-btn {
	display: inline-block; padding: .8em 1.6em; border-radius: 999px; text-decoration: none;
	background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast) !important;
	font-size: var(--wp--preset--font-size--small); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.igm-soon-btn:hover, .igm-soon-btn:focus-visible { background: var(--wp--preset--color--base); }
@media (prefers-reduced-motion: reduce) { .igm-video-facade a::before { transition: none; } }


/* -----------------------------------------------------------------------------
   6. CHAPTER LIST
   Where: "Nine hard questions" on the homepage and the Episodes page. Built
   automatically by the [igm_chapters] code (functions.php section 3) from the
   one list of episodes, so the homepage, Episodes page, and previous/next
   links always agree.
   Classes: igm-chapters = the list; igm-chapter = one chapter card.
   ----------------------------------------------------------------------------- */
.igm-chapters { list-style: none; margin: var(--wp--preset--spacing--50) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.igm-chapter {
	position: relative; display: flex; flex-direction: column; gap: .5rem; margin: 0; padding: 26px 24px 24px;
	border-radius: 16px; background: var(--wp--preset--color--base); box-shadow: 0 10px 30px -20px rgba(10, 22, 30, .35);
}
.has-base-background-color .igm-chapter { background: var(--wp--preset--color--accent-4); box-shadow: none; }
.igm-chapter-num { font-size: var(--wp--preset--font-size--small); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent-7); }
.igm-chapter-q { margin: 0; font-size: 1.2rem; line-height: 1.3; font-weight: 800; color: var(--wp--preset--color--contrast); text-wrap: balance; }
.igm-chapter-q a { color: inherit; text-decoration: none; }
.igm-chapter-q a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } /* whole card is clickable */
.igm-chapter-q a:focus-visible::after { outline: 3px solid var(--wp--preset--color--accent-1); }
.igm-chapter-meta { margin-top: auto; padding-top: .5rem; font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--accent-3); }
.igm-chapter:hover { box-shadow: 0 16px 36px -18px rgba(10, 22, 30, .45); }
.igm-chapter-parts { margin: .25rem 0 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--small); position: relative; z-index: 1; }
.igm-chapter-parts li { margin: .2rem 0; }
.igm-chapter-parts a { color: var(--wp--preset--color--contrast); }


/* -----------------------------------------------------------------------------
   6b. EPISODES PAGE ROWS
   Where: the Episodes page. Built automatically by the [igm_episode_list]
   code (functions.php section 3), one row per episode.
   Classes: igm-eps = the list; igm-ep = one row (text left, thumbnail right);
     igm-ep-num = the big light number behind the title; igm-ep-thumb = the
     video thumbnail (or the "Video coming soon" panel, igm-ep-soon).
   Safe to change: clamp(7rem, 12vw, 10.5rem) = size of the big number;
   opacity: .7 = how light it is.
   ----------------------------------------------------------------------------- */
.igm-eps { list-style: none; margin: 0; padding: 0; }
.igm-ep {
	display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4rem); align-items: center;
	margin: 0; padding-block: clamp(2rem, 4vw, 3rem); scroll-margin-top: 16px;
}
.igm-ep + .igm-ep { border-top: 1px solid var(--wp--preset--color--accent-5); }
.igm-ep-text { position: relative; z-index: 0; display: flex; flex-direction: column; gap: .55rem; padding: .75rem 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.igm-ep-text > * { margin: 0; }
.igm-ep-num {
	position: absolute; z-index: -1; left: -.04em; top: -1.4rem;
	font-size: clamp(7rem, 12vw, 10.5rem); font-weight: 800; line-height: .85; letter-spacing: -.05em; opacity: .7;
	color: var(--wp--preset--color--accent-6); user-select: none;
}
.igm-ep-label { font-size: var(--wp--preset--font-size--small); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent-7); }
.igm-ep-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; text-wrap: balance; }
.igm-ep-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.igm-ep-title a:hover, .igm-ep-title a:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.igm-ep-subline { font-weight: 700; color: var(--wp--preset--color--contrast); }
.igm-ep-desc { color: var(--wp--preset--color--accent-3); }
.igm-ep-links { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .75rem !important; }
.igm-ep-watch {
	display: inline-block; padding: .85em 1.6em; border-radius: 999px; text-decoration: none;
	background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.igm-ep-watch:hover, .igm-ep-watch:focus-visible { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.igm-ep-guide { font-size: var(--wp--preset--font-size--small); font-weight: 700; color: var(--wp--preset--color--contrast); }
.igm-ep-thumb { display: block; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 48px -28px rgba(10, 22, 30, .55); }
.igm-ep-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s; }
.igm-ep-thumb:hover img { transform: scale(1.03); }
.igm-ep-soon {
	display: grid; place-items: center; aspect-ratio: 16 / 9; text-align: center;
	background: var(--wp--preset--color--contrast); border: 2px dashed rgba(245, 210, 111, .7);
}
.igm-ep-soon .igm-soon-text { font-size: 1.1rem; }
.igm-ep-watch.is-outline { background: transparent; box-shadow: inset 0 0 0 2px var(--wp--preset--color--contrast); }
.igm-ep-watch.is-outline:hover, .igm-ep-watch.is-outline:focus-visible { background: var(--wp--preset--color--contrast); }
@media (prefers-reduced-motion: reduce) { .igm-ep-thumb img { transition: none; } }


/* -----------------------------------------------------------------------------
   7. EPISODE PAGES
   Where: the 12 episode pages (e.g. /why-did-god-flood-the-earth/).
   Classes:
     igm-ep-hero  = navy top section (label, title, subtitle)
     igm-ep-video-band = the white section right under it that holds the
                    video; the video is pulled up so it overlaps both
                    sections, with a thin gold line where the hero ends
                    (like the book card on chrisulery.com)
     igm-article  = the article text (comfortable reading width, drop cap)
     igm-guide-card = the navy "Free study guide" card after the video
     igm-ep-nav   = previous / next episode links ([igm_episode_nav] code)
   Safe to change: --igm-overhang = how far the video reaches up into the
   navy hero (the hero gets that much extra bottom space automatically).
   ----------------------------------------------------------------------------- */
:root { --igm-overhang: clamp(5rem, 16vw, 15rem); }
.igm-ep-hero:has(+ .igm-ep-video-band) { padding-bottom: calc(var(--igm-overhang) + var(--wp--preset--spacing--50)) !important; }
.igm-ep-video-band { display: flow-root; position: relative; z-index: 1; border-top: 2px solid var(--wp--preset--color--accent-1); }
.igm-ep-video-band > .igm-video-facade, .igm-ep-video-band > .igm-video-frame, .igm-ep-video-band > .igm-video-soon { position: relative; z-index: 2; margin-top: calc(-1 * var(--igm-overhang)) !important; }
.igm-ep-hero h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); text-wrap: balance; }
.igm-ep-hero .igm-ep-sub { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--accent-6); text-wrap: balance; }
.igm-article { font-size: 1.15rem; line-height: 1.75; }
.igm-article > * + * { margin-block-start: 1.15rem; }
.igm-article > :is(h2, h3) { margin-block-start: var(--wp--preset--spacing--60); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.igm-article > h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
.igm-article .has-drop-cap:not(:focus)::first-letter { font-weight: 800; color: var(--wp--preset--color--accent-7); font-size: 4.2em; line-height: .8; margin: .05em .12em 0 0; }
.igm-article img { border-radius: 18px; height: auto; }
/* Pictures inside an article: small ones float beside the text (Image block
   alignment Left/Right); captions are small and gray. */
.igm-article .wp-block-image { margin-block: .4rem 1.25rem; }
.igm-article .wp-block-image.alignright { float: right; margin-left: 1.75rem; max-width: 45%; }
.igm-article .wp-block-image.alignleft { float: left; margin-right: 1.75rem; max-width: 45%; }
.igm-article .wp-block-image figcaption { margin-top: .5rem; font-size: .85rem; line-height: 1.45; color: var(--wp--preset--color--accent-3); }
.igm-article > :is(h2, h3) { clear: both; }
.igm-guide-card {
	border: 2px solid var(--wp--preset--color--accent-1); border-radius: 24px;
	box-shadow: 0 30px 60px -30px rgba(10, 22, 30, .55);
}
.igm-ep-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0; }
.igm-ep-nav a {
	display: flex; flex-direction: column; gap: .35rem; padding: 22px 24px; border-radius: 16px; text-decoration: none;
	background: var(--wp--preset--color--accent-4); color: var(--wp--preset--color--contrast);
}
.igm-ep-nav a:hover, .igm-ep-nav a:focus-visible { background: var(--wp--preset--color--accent-5); }
.igm-ep-nav .igm-ep-nav-next { text-align: right; grid-column: 2; }
.igm-ep-nav-dir { font-size: var(--wp--preset--font-size--small); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent-7); }
.igm-ep-nav-title { font-weight: 800; line-height: 1.3; }


/* -----------------------------------------------------------------------------
   8. QUOTES AND VIEWER COMMENTS
   Classes: igm-pullquote (Quote block, big centered quote from the book);
   igm-viewers = row of comment cards; igm-viewer = one card; igm-viewer-by = name line.
   Only use approved viewer comments (see the design guide).
   ----------------------------------------------------------------------------- */
.igm-pullquote { margin: 0 auto !important; max-width: 820px; padding: 0; border: 0; text-align: center; }
.igm-pullquote::before { content: "\201C"; display: block; height: 3rem; font-size: 5.5rem; line-height: 1; font-weight: 800; color: var(--wp--preset--color--accent-1); }
.igm-pullquote p { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.4; font-weight: 700; letter-spacing: -.01em; color: var(--wp--preset--color--contrast); text-wrap: balance; }
.igm-pullquote cite { display: block; margin-top: 1.1rem; font-size: var(--wp--preset--font-size--small); font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--accent-7); }
.igm-viewers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.igm-viewers-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* two comments only */
/* On the dark "Free video series" section (class igm-viewers-dark): sits under the big quote card. */
.igm-viewers-dark { max-width: 1000px; margin: var(--wp--preset--spacing--50) auto 0 !important; }
.igm-viewers-dark .igm-viewer { background: rgba(255, 255, 255, .04); border: 1px solid rgba(245, 210, 111, .35); box-shadow: none; }
.igm-viewers-dark .igm-viewer p { color: var(--wp--preset--color--accent-6); }
.igm-viewers-dark .igm-viewer .igm-viewer-by { color: var(--wp--preset--color--accent-6); opacity: .85; }
.igm-viewers > *, .igm-viewer > * { margin: 0 !important; }
.igm-viewer { display: flex; flex-direction: column; justify-content: space-between; gap: 1rem; padding: 26px 26px 22px; border-radius: 14px; background: var(--wp--preset--color--accent-4); }
.has-accent-4-background-color .igm-viewer { background: var(--wp--preset--color--base); }
.igm-viewer p:first-child::before { content: "\201C"; display: block; height: .55em; margin-bottom: .35rem; font-size: 3rem; font-weight: 800; line-height: 1; color: var(--wp--preset--color--accent-1); }
.igm-viewer .igm-viewer-by { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-3); }


/* -----------------------------------------------------------------------------
   9. SIGN-UP CARD AND CLOSING BAND
   Classes: igm-notify-card (navy card inside a light section; the email form
   goes inside it once MailerLite is connected); igm-closing (last section of a page).
   ----------------------------------------------------------------------------- */
.igm-notify-card { border: 2px solid var(--wp--preset--color--accent-1); border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(10, 22, 30, .55); }
.igm-closing h2 { text-wrap: balance; }
.igm-closing .igm-closing-note { margin-top: 1rem !important; opacity: .8; }
.igm-closing .igm-closing-note a { color: inherit; }


/* -----------------------------------------------------------------------------
   10. QUESTIONS AND ANSWERS (EXPANDABLE)
   Where: any Details block (click the question to open the answer).
   ----------------------------------------------------------------------------- */
.wp-block-details { padding: 1.1rem 1.4rem; border-radius: 14px; background: var(--wp--preset--color--accent-4); }
.wp-block-details + .wp-block-details { margin-block-start: .75rem !important; }
.wp-block-details summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; font-weight: 800; cursor: pointer; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
	font-size: 1.2rem; line-height: 1; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast);
}
.wp-block-details[open] summary::after { content: "\2212"; }
.wp-block-details[open] summary { margin-bottom: .75rem; }


/* -----------------------------------------------------------------------------
   11. ABOUT THE AUTHOR PHOTO
   Class: igm-author-photo (on the Image block). Round, gold ring.
   ----------------------------------------------------------------------------- */
.igm-author-photo { margin: 0 !important; }
.igm-author-photo img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 3px solid var(--wp--preset--color--accent-1); }


/* -----------------------------------------------------------------------------
   13. CARDS THAT OVERLAP THE HERO
   Where: the white card under the navy hero on the Book, Study Guide, and
   Contact pages (the sign-up form or the contact form sits inside it).
   Classes: igm-hero-overlap = the navy hero (gets extra bottom space);
            igm-overlap-band = the white section under it (thin gold line on top);
            igm-overlap-card = the white card that's pulled up over the hero.
   Safe to change: clamp(3rem, 6vw, 5rem) = how far the card overlaps the hero.
   ----------------------------------------------------------------------------- */
.igm-hero-overlap:has(+ .igm-overlap-band) { padding-bottom: calc(clamp(3rem, 6vw, 5rem) + var(--wp--preset--spacing--60)) !important; }
.igm-overlap-band { display: flow-root; position: relative; z-index: 1; border-top: 2px solid var(--wp--preset--color--accent-1); }
.igm-overlap-band > .igm-overlap-card {
	position: relative; z-index: 2; margin-top: calc(-1 * clamp(3rem, 6vw, 5rem)) !important;
	border: 2px solid var(--wp--preset--color--accent-1); border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(10, 22, 30, .45);
}
.igm-overlap-card, .igm-signup-card { color: var(--wp--preset--color--contrast); }
.igm-overlap-card h2, .igm-signup-card h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); text-wrap: balance; }
/* Homepage sign-up card (class igm-signup-card): same gold outline, not overlapping. */
.igm-signup-card { border: 2px solid var(--wp--preset--color--accent-1); border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(10, 22, 30, .35); scroll-margin-top: 24px; }
.igm-guide-cover { margin: 0; }
.igm-guide-cover img { width: 100%; max-width: 320px; height: auto; display: block; margin-inline: auto; border-radius: 6px; border: 1px solid rgba(245, 210, 111, .45); box-shadow: 0 34px 50px -24px rgba(0, 0, 0, .7); }


/* -----------------------------------------------------------------------------
   14. SMALL INFO CARDS IN A ROW ("TILES")
   Where: About, Book, Study Guide, and Contact pages.
   Classes: igm-tiles = the row (2 or 3 across: add igm-tiles-2 or igm-tiles-3);
            igm-tile = one card; igm-tile-link = its link line at the bottom.
   ----------------------------------------------------------------------------- */
.igm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.igm-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.igm-tiles > * { margin: 0 !important; }
.igm-tile { display: flex; flex-direction: column; gap: .5rem; padding: 26px 24px; border-radius: 16px; background: var(--wp--preset--color--accent-4); }
.has-accent-4-background-color .igm-tile { background: var(--wp--preset--color--base); }
.igm-tile > * { margin: 0 !important; }
.igm-tile h3 { font-size: 1.25rem; line-height: 1.25; }
.igm-tile p { color: var(--wp--preset--color--accent-3); }
.igm-tile .igm-tile-link { margin-top: auto !important; padding-top: .5rem; font-weight: 800; }
.igm-tile .igm-tile-link a { color: var(--wp--preset--color--contrast); }


/* -----------------------------------------------------------------------------
   15. EMAIL SIGN-UP FORM
   Built by the [igm_signup] code (functions.php section 4). Email only, with
   the "Email" label above the box. igm-hp is a hidden spam trap; keep it hidden.
   ----------------------------------------------------------------------------- */
.igm-signup form { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.igm-signup-label { font-weight: 800; font-size: var(--wp--preset--font-size--small); }
.igm-signup-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.igm-signup input[type=email] {
	flex: 1 1 16rem; min-width: 0; padding: .9rem 1.1rem; font: inherit; border-radius: 12px;
	border: 1px solid var(--wp--preset--color--accent-6); background: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast);
}
.igm-signup input[type=email]:focus { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 1px; }
.igm-signup button {
	flex: 0 0 auto; padding: .9rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast);
	font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.igm-signup button:hover, .igm-signup button:focus-visible { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.igm-signup .igm-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.igm-signup-fine { margin: 0; font-size: .85rem; color: var(--wp--preset--color--accent-3); }
.igm-signup-fine a { color: inherit; }
.igm-signup-note, .igm-signup-error { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-3); margin: 0; }
.igm-signup-error { color: #9B2C2C; }
.igm-signup-done { padding: 1rem 1.25rem; border-radius: 12px; background: var(--wp--preset--color--accent-4); margin: 0; }


/* -----------------------------------------------------------------------------
   16. "FREE VIDEO SERIES" SECTION
   Where: the homepage, above the episode rows. Copied from the same section
   on the chrisulery.com homepage so the two sites match.
   Classes: igm-course        = the whole section (deep navy)
            igm-course-thumbs = the six small episode pictures
            igm-course-proof  = Episode 1's big picture + the viewer quote card
            igm-course-feature = the big Episode 1 picture (links to its page)
            igm-viewer-quote  = the viewer quote card (igm-vq-key = the bold
                                sentence; <mark> = soft gold highlight)
   Safe to change: 14px / 28px = corner roundness (small / big pictures);
   96px = size of the play button circle.
   ----------------------------------------------------------------------------- */
/* The series title above the big picture: centered; "Is God Mean?" on its own
   larger line (igm-course-series), subtitle below in small caps. Safe to change:
   1.75rem = size of "Is God Mean?"; spacing-40 = gap down to the big picture. */
.igm-course h3.igm-label { text-align: center; }
/* Series subtitle under the "Is God Mean?" heading (class igm-course-subtitle);
   sized to stay within two lines. */
.igm-course .igm-course-subtitle { margin-top: .6rem !important; max-width: 24em; font-size: clamp(.95rem, 1.6vw, 1.25rem); line-height: 1.45; color: var(--wp--preset--color--accent-6); }
.igm-course h3.igm-label .igm-course-series { display: inline-block; margin-bottom: .4rem; font-size: 1.75rem; letter-spacing: .1em; line-height: 1.1; }
.igm-course h3.igm-label + .wp-block-group { margin-top: var(--wp--preset--spacing--40) !important; }
/* Proof under the series description: the gold view-count line (igm-course-views)
   and a real viewer comment shown as a feature card (Quote block, class
   igm-viewer-quote). The quote is split into short paragraphs so it scans:
   igm-vq-key = the key sentence (bold and larger); wrap words in the
   "Highlight" format (or a <mark>) to get the soft gold marker behind them.
   The big gold quotation mark and the YouTube icon in the credit are added by
   this CSS. On phones the quotation mark moves above the text.
   Safe to change: 28px = card roundness; 860px = card width. */
.igm-course .igm-course-views { text-align: center; }
.igm-course .igm-viewer-quote {
	display: grid; grid-template-columns: auto 1fr; column-gap: clamp(20px, 3vw, 40px); row-gap: 1rem;
	max-width: 860px; margin: var(--wp--preset--spacing--60) auto 0 !important; padding: clamp(28px, 4vw, 48px);
	text-align: left; border: 1px solid rgba(245, 210, 111, .35); border-radius: 28px; background: rgba(255, 255, 255, .04);
}
.igm-course .igm-viewer-quote::before {
	content: "\201C"; grid-column: 1; grid-row: 1; font-size: clamp(8rem, 13vw, 11rem); line-height: .75;
	font-weight: 800; color: var(--wp--preset--color--accent-1);
}
/* Closing quotation mark, bottom right of the card, beside the last line. */
.igm-course .igm-viewer-quote { position: relative; }
.igm-course .igm-viewer-quote::after {
	content: "\201D"; position: absolute; right: 34px; bottom: 54px; height: .42em;
	font-size: clamp(5rem, 7vw, 7rem); line-height: .78; font-weight: 800; color: var(--wp--preset--color--accent-1);
	pointer-events: none;
}
.igm-course .igm-viewer-quote > * { grid-column: 1 / -1; margin: 0 !important; }
/* Only the first paragraph sits beside the quotation mark; the rest of the
   quote runs the full width of the card underneath it. */
.igm-course .igm-viewer-quote > :first-child { grid-column: 2; }
.igm-course .igm-viewer-quote p { font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--accent-6); }
.igm-course .igm-viewer-quote p.igm-vq-key { font-size: clamp(1.15rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.45; color: var(--wp--preset--color--base); }
.igm-course .igm-viewer-quote mark { background: linear-gradient(transparent 58%, rgba(245, 210, 111, .38) 58%); color: inherit; padding: 0 .08em; }
.igm-course .igm-viewer-quote cite {
	display: block; margin-top: .5rem !important;
	font-size: var(--wp--preset--font-size--small); font-style: normal; color: var(--wp--preset--color--accent-6);
}
.igm-course .igm-viewer-quote cite::before {
	content: ""; display: inline-block; width: 22px; height: 16px; margin-right: .5rem; vertical-align: -3px; border-radius: 4px; background: #FF0000
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M9 4.5l6 3.5-6 3.5z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
/* Episode 1 and the viewer quote side by side (Group block, class
   igm-course-proof): the quote card overlaps the right edge of the video, like
   the credits card on the FFH photo. Below 1000px wide they stack and the card
   slides up slightly over the bottom of the video instead.
   The video sits on top of the card where they overlap.
   Safe to change: -20px = how far the card tucks under the video. */
.igm-course .igm-course-proof {
	display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center;
	margin-top: var(--wp--preset--spacing--60) !important;
}
.igm-course .igm-course-proof > .igm-course-feature { grid-column: 1; grid-row: 1; margin: 0 !important; position: relative; z-index: 2; }
.igm-course .igm-course-proof > .igm-viewer-quote {
	grid-column: 2; grid-row: 1; position: relative; z-index: 1; max-width: none;
	margin: 0 0 0 -20px !important; padding: 32px 34px 32px 44px; column-gap: 18px;
	background: #13222C; border-color: rgba(245, 210, 111, .6); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .65);
}
.igm-course .igm-course-proof > .igm-viewer-quote::before {
	font-size: clamp(5rem, 7vw, 7rem);
	/* Trim the mark's invisible box to the visible mark (so the space above and
	   below the bold paragraph is equal) and nudge it left so it lines up with
	   the paragraphs underneath. */
	height: .42em; margin-left: -.06em;
}
.igm-course .igm-course-proof > .igm-viewer-quote p { font-size: var(--wp--preset--font-size--medium); }
.igm-course .igm-course-proof > .igm-viewer-quote p.igm-vq-key { font-size: clamp(1.05rem, 1.35vw, 1.2rem); }
@media (max-width: 1000px) {
	.igm-course .igm-course-proof { grid-template-columns: 1fr; }
	.igm-course .igm-course-proof > .igm-course-feature { grid-column: 1; grid-row: 1; }
	.igm-course .igm-course-proof > .igm-viewer-quote { grid-column: 1; grid-row: 2; margin: -24px 12px 0 !important; padding: 50px 24px 26px; }
	.igm-course .igm-course-proof > .igm-viewer-quote p { font-size: 1rem; }
	.igm-course .igm-course-proof > .igm-viewer-quote p.igm-vq-key { font-size: 1.15rem; }
}
@media (max-width: 781px) {
	.igm-course .igm-viewer-quote { grid-template-columns: 1fr; }
	.igm-course .igm-viewer-quote::after { right: 22px; bottom: 96px; font-size: 5rem; }
	.igm-course .igm-viewer-quote::before { grid-column: 1; grid-row: auto; font-size: 5.5rem; height: 3.2rem; }
	.igm-course .igm-viewer-quote > *, .igm-course .igm-viewer-quote > :first-child { grid-column: 1; }
}
.igm-course .igm-course-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.igm-course .igm-course-thumbs > * { margin: 0 !important; }
.igm-course .igm-course-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
.igm-course .igm-course-thumbs img {
	border-radius: 14px; border: 2px solid var(--wp--preset--color--accent-1);
	transition: transform .2s ease;
}
.igm-course .igm-course-thumbs a:hover img, .igm-course .igm-course-thumbs a:focus img { transform: translateY(-3px); }
.igm-course .igm-course-feature { margin: 0; }
.igm-course .igm-course-feature a { position: relative; display: block; }
.igm-course .igm-course-feature img { width: 100%; border-radius: 28px; border: 2px solid var(--wp--preset--color--accent-1); }
/* Play button: a translucent circle (before) with a white triangle (after) */
.igm-course .igm-course-feature a::before,
.igm-course .igm-course-feature a::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.igm-course .igm-course-feature a::before {
	width: 96px; height: 96px; border-radius: 50%;
	background: rgba(255, 255, 255, .28); backdrop-filter: blur(4px); transition: background .2s ease;
}
.igm-course .igm-course-feature a::after {
	width: 34px; height: 38px; margin-left: 4px; background: var(--wp--preset--color--base);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.igm-course .igm-course-feature a:hover::before, .igm-course .igm-course-feature a:focus::before { background: rgba(245, 210, 111, .75); }
@media (max-width: 781px) {
	.igm-course .igm-course-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.igm-course .igm-course-feature a::before { width: 64px; height: 64px; }
	.igm-course .igm-course-feature a::after { width: 22px; height: 25px; margin-left: 3px; }
}


/* -----------------------------------------------------------------------------
   17. HOMEPAGE: STORY, PHOTOS, SMALL-GROUP STEPS, EPISODES MENU
   Classes: igm-story = "Why I wrote it" text (big gold quotation mark on top);
            igm-story-photo / igm-photo = rounded photos with a soft shadow;
            igm-steps = the numbered small-group steps (gold number circles);
            igm-subscribe = the small YouTube line under the episode rows;
            igm-ep-menu = the Episodes dropdown in the header (edit its links in
            Appearance > Editor > Patterns > Header).
   ----------------------------------------------------------------------------- */
.igm-story::before {
	content: "\201C"; display: block; height: .45em; margin-bottom: .25rem;
	font-size: clamp(6rem, 10vw, 8rem); line-height: .8; font-weight: 800; color: var(--wp--preset--color--accent-1);
}
.igm-story h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.15; text-wrap: balance; }
.igm-story-photo, .igm-photo { margin: 0; }
.igm-story-photo img, .igm-photo img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 30px 60px -30px rgba(10, 22, 30, .5); }
.igm-story-photo img { aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid var(--wp--preset--color--accent-1); }
.igm-steps { list-style: none; counter-reset: igm-step; padding: 0 !important; margin: 0; display: grid; gap: 1rem; }
.igm-steps li { counter-increment: igm-step; position: relative; padding-left: 3.25rem; min-height: 2.4rem; line-height: 1.55; }
.igm-steps li::before {
	content: counter(igm-step); position: absolute; left: 0; top: -.15rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast);
}
/* Small groups (class igm-groups): buttons centered under the photo and steps; steps a touch larger. */
.igm-groups .igm-steps li { font-size: 1.1rem; }
.igm-groups > .wp-block-buttons { margin-top: var(--wp--preset--spacing--60) !important; }
.igm-subscribe { margin-top: var(--wp--preset--spacing--50) !important; color: var(--wp--preset--color--accent-3); }
.igm-subscribe a { color: var(--wp--preset--color--contrast); font-weight: 700; white-space: nowrap; }
.igm-subscribe a::before {
	content: ""; display: inline-block; width: 26px; height: 18px; margin-right: .45rem; vertical-align: -4px; border-radius: 5px; background: #FF0000
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M9 4.5l6 3.5-6 3.5z' fill='%23fff'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.igm-course-home .igm-course-proof { margin-top: var(--wp--preset--spacing--50) !important; }
.igm-closing .igm-signup-card { max-width: 760px; margin: var(--wp--preset--spacing--50) auto 0 !important; text-align: left; }
.igm-header .igm-ep-menu .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--contrast) !important; border: 1px solid rgba(245, 210, 111, .35) !important; border-radius: 14px; padding: .6rem !important;
	box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .6);
}
.igm-header .igm-ep-menu .wp-block-navigation__submenu-container a { padding: .5rem .75rem !important; border-radius: 8px; font-size: .95rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
@media (min-width: 600px) { .igm-header .igm-ep-menu .wp-block-navigation__submenu-container a { min-width: 330px; } }
.igm-header .igm-ep-menu .wp-block-navigation__submenu-container a:hover { background: rgba(255, 255, 255, .06); }


/* -----------------------------------------------------------------------------
   18. HOMEPAGE: HOW CHRIS ANSWERS, PASTOR QUOTE, AUTHOR RECOMMENDATIONS
   Classes: igm-method = the three "how Chris answers" items under the story
            (igm-method-item = one item; icons drawn here, in order: open
            book, speech, columns); igm-endorse = the featured pastor quote;
            igm-recs / igm-rec = the two short recommendations by the author bio.
   ----------------------------------------------------------------------------- */
.igm-method { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: var(--wp--preset--spacing--40) !important; padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--wp--preset--color--accent-5); }
.igm-method > *, .igm-method-item > * { margin: 0 !important; }
/* The small gold label introducing the three items spans the full row. */
.igm-method > .igm-label { grid-column: 1 / -1; }
/* Full-width version under the story photo + text (homepage): more room, slightly larger text. */
.igm-method-wide { margin-top: var(--wp--preset--spacing--60) !important; gap: 32px; }
.igm-method-wide .igm-method-item { font-size: 1rem; }
.igm-method-wide .igm-method-item .igm-method-head { font-size: 1.15rem; }
.igm-method-item { display: flex; flex-direction: column; gap: 4px; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-3); line-height: 1.45; }
.igm-method-item .igm-method-head { color: var(--wp--preset--color--contrast); font-size: 1rem; }
.igm-method-item::before {
	content: ""; display: block; width: 28px; height: 28px; margin-bottom: 8px; background: var(--wp--preset--color--accent-7);
	-webkit-mask: var(--igm-icon) center / contain no-repeat; mask: var(--igm-icon) center / contain no-repeat;
}
.igm-method-item:nth-child(1) { --igm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5.5C4.5 4 8 4 12 6c4-2 7.5-2 10-.5V19c-2.5-1.5-6-1.5-10 .5-4-2-7.5-2-10-.5Z'/%3E%3Cpath d='M12 6v13.5'/%3E%3C/svg%3E"); }
.igm-method-item:nth-child(2) { --igm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v10H9l-5 4z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E"); }
.igm-method-item:nth-child(3) { --igm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-5 9 5'/%3E%3Cpath d='M5 9v9M10 9v9M14 9v9M19 9v9M3 20h18'/%3E%3C/svg%3E"); }
.igm-endorse {
	max-width: 860px; margin: var(--wp--preset--spacing--60) auto 0 !important; padding: clamp(24px, 4vw, 40px) clamp(24px, 5vw, 56px);
	border: 2px solid var(--wp--preset--color--accent-1); border-radius: 24px; text-align: center; background: var(--wp--preset--color--base);
	box-shadow: 0 30px 60px -36px rgba(10, 22, 30, .35);
}
.igm-endorse::before { content: "\201C"; display: block; height: .5em; font-size: 5rem; line-height: .9; font-weight: 800; color: var(--wp--preset--color--accent-1); }
.igm-endorse p { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.45; font-weight: 700; color: var(--wp--preset--color--contrast); text-wrap: balance; }
/* Pastor's photo beside his name (homepage quote). */
.igm-endorse cite:has(img) { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.igm-endorse cite img { flex: 0 0 52px; width: 52px; height: 52px; margin: 0; border-radius: 50%; object-fit: cover; border: 2px solid var(--wp--preset--color--accent-1); }
.igm-endorse cite { display: block; margin-top: 1rem; font-size: var(--wp--preset--font-size--small); font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--accent-7); }
/* Episode pages: one viewer comment before the author box (class igm-ep-quote), a little smaller. */
.igm-ep-quote { margin-top: 0 !important; max-width: 780px; box-sizing: border-box; } /* same width as the author box below */
.igm-ep-quote p { font-size: clamp(1.1rem, 2vw, 1.35rem); }
.igm-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: var(--wp--preset--spacing--40) !important; }
.igm-recs > *, .igm-rec > * { margin: 0 !important; }
.igm-rec { padding: 16px 18px; border-left: 3px solid var(--wp--preset--color--accent-1); background: var(--wp--preset--color--base); border-radius: 0 12px 12px 0; }
.igm-rec p { font-style: italic; line-height: 1.5; }
.igm-rec .igm-rec-by { margin-top: .5rem !important; font-style: normal; font-size: .8rem; color: var(--wp--preset--color--accent-3); }


/* -----------------------------------------------------------------------------
   19. CONTACT FORM (CONTACT FORM 7)
   Where: the Contact page (the form sits in the white card, igm-contact-card).
   What: matches the sign-up boxes: label above each box, rounded fields, a gold
   pill button. igm-hp is the hidden spam trap (functions.php section 6); keep
   it hidden.
   ----------------------------------------------------------------------------- */
.igm-contact-card .wpcf7 { margin: 0; }
.igm-contact-card .wpcf7-form > p { margin: 0 0 16px; }
.igm-contact-card .wpcf7 label { display: block; font-weight: 800; font-size: var(--wp--preset--font-size--small); }
.igm-contact-card .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.igm-contact-card .wpcf7 input[type=text], .igm-contact-card .wpcf7 input[type=email], .igm-contact-card .wpcf7 input[type=tel], .igm-contact-card .wpcf7 textarea {
	width: 100%; padding: .9rem 1.1rem; font: inherit; font-size: 1rem; font-weight: 400; color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--accent-6); border-radius: 12px; box-sizing: border-box;
}
.igm-contact-card .wpcf7 textarea { min-height: 170px; resize: vertical; }
.igm-contact-card .wpcf7 input:focus, .igm-contact-card .wpcf7 textarea:focus { outline: 3px solid var(--wp--preset--color--accent-1); outline-offset: 1px; }
.igm-contact-card .wpcf7-submit {
	padding: .95rem 2rem; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--contrast);
	font: inherit; font-size: var(--wp--preset--font-size--small); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.igm-contact-card .wpcf7-submit:hover, .igm-contact-card .wpcf7-submit:focus-visible { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.igm-contact-card .wpcf7-spinner { vertical-align: middle; }
.igm-contact-card .wpcf7-not-valid-tip { margin-top: 4px; font-size: .85rem; font-weight: 400; color: #9B2C2C; }
.igm-contact-card .wpcf7 form .wpcf7-response-output { margin: 12px 0 0; padding: .9rem 1.1rem; border-radius: 12px; border-width: 1px; font-size: .95rem; }
.igm-contact-card .wpcf7 form.sent .wpcf7-response-output { border-color: var(--wp--preset--color--accent-1); background: var(--wp--preset--color--accent-4); }
.igm-contact-card .igm-hp, .igm-contact-card .wpcf7-form-control-wrap[data-name="igm-website"] { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }


/* -----------------------------------------------------------------------------
   20. EPISODE BYLINE AND AUTHOR BOX
   Built by [igm_byline] and [igm_author_box] (functions.php section 8).
   igm-ep-byline = "By Chris Ulery · 22-minute episode" under the episode title;
   igm-author-box = photo + short bio + "Invite Chris to speak" after the article.
   ----------------------------------------------------------------------------- */
.igm-ep-byline { margin: 0; font-size: var(--wp--preset--font-size--small); font-weight: 700; letter-spacing: .02em; color: var(--wp--preset--color--accent-6); }
.igm-ep-byline a { color: var(--wp--preset--color--base); text-decoration-color: var(--wp--preset--color--accent-1); text-underline-offset: 3px; }
.igm-author-box {
	display: flex; gap: 22px; align-items: flex-start; padding: 26px 28px; border-radius: 20px;
	background: var(--wp--preset--color--accent-4); border-left: 4px solid var(--wp--preset--color--accent-1);
}
.igm-author-box img { flex: 0 0 96px; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--wp--preset--color--accent-1); }
.igm-author-box-text > p { margin: 0; }
.igm-author-box-label { font-size: var(--wp--preset--font-size--small); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--accent-7); }
.igm-author-box-name { margin-top: 2px !important; font-size: 1.35rem; font-weight: 800; color: var(--wp--preset--color--contrast); }
.igm-author-box-bio { margin-top: .5rem !important; color: var(--wp--preset--color--accent-3); line-height: 1.6; }
.igm-author-box-links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 1rem !important; }
.igm-author-box-links a { font-weight: 700; color: var(--wp--preset--color--contrast); }
.igm-author-box-links .igm-author-box-book {
	padding: .75em 1.4em; border-radius: 999px; text-decoration: none; background: var(--wp--preset--color--accent-1);
	font-size: var(--wp--preset--font-size--small); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.igm-author-box-links .igm-author-box-book:hover, .igm-author-box-links .igm-author-box-book:focus-visible { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
@media (max-width: 600px) { .igm-author-box { flex-direction: column; } }


/* -----------------------------------------------------------------------------
   12. PHONES AND SMALL TABLETS (screens narrower than 782px)
   ----------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.igm-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.igm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.igm-cover { max-width: 160px; }
	.igm-glance-band > .igm-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -2.5rem !important; }
	.igm-ep { grid-template-columns: 1fr; gap: 1.5rem; }
	.igm-ep-thumb { order: -1; }
	.igm-glance-item:nth-child(3) { border-left: 0; }
	.igm-glance-item:nth-child(n+3) { border-top: 1px solid var(--wp--preset--color--accent-5); }
	.igm-glance-item { padding: 18px 16px; }
	.igm-chapters, .igm-viewers, .igm-viewers-2 { grid-template-columns: 1fr; }
	.igm-ep-nav { grid-template-columns: 1fr; }
	.igm-ep-nav .igm-ep-nav-next { grid-column: 1; }
	.igm-video-facade a::before { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
	.igm-video-facade a::after { border-width: 12px 0 12px 20px; margin: -12px 0 0 -7px; }
	.igm-article { font-size: 1.075rem; }
	.igm-article .wp-block-image.alignright, .igm-article .wp-block-image.alignleft { float: none; max-width: 100%; margin-inline: 0; }
	.igm-tiles, .igm-tiles-2 { grid-template-columns: 1fr; }
	.igm-method, .igm-recs { grid-template-columns: 1fr; }
	.igm-guide-cover img { max-width: 200px; }
	main .wp-block-list { padding-left: 1.25rem; }
}

/* -----------------------------------------------------------------------------
   21. ARTICLE EXTRAS (episode articles)
   igm-toc       = the "In this article" box of jump links near the top
                   (a Group block; each link points to a heading's anchor)
   igm-scripture = a Bible passage (Quote block): gold bar, italic text,
                   reference underneath
   ----------------------------------------------------------------------------- */
.igm-article .igm-toc { background: var(--wp--preset--color--accent-4); border-radius: 18px; padding: 1.25rem 1.5rem; }
.igm-article .igm-toc > * { margin: 0; }
.igm-toc .igm-toc-label { margin-bottom: .5rem !important; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--accent-7); }
.igm-toc ul { padding-left: 1.2rem; font-size: 1rem; line-height: 1.7; }
.igm-toc a { color: var(--wp--preset--color--contrast); }
.igm-article h2[id] { scroll-margin-top: 100px; }
.igm-article .igm-scripture { margin-inline: 0; padding: .2rem 0 .2rem 1.25rem; border-left: 4px solid var(--wp--preset--color--accent-1); }
.igm-article .igm-scripture p { font-style: italic; font-size: 1.05rem; }
.igm-article .igm-scripture cite { display: block; margin-top: .45rem; font-style: normal; font-size: .85rem; font-weight: 700; color: var(--wp--preset--color--accent-3); }