/* Periscope homepage section styles (ported from front-page.php inline blocks
   so the Elementor-rendered homepage keeps its exact styling). */

/* ---- periscope-hero-adjust ---- */
/* Homepage hero only: lift the whole composition uniformly so the CTA is
     visible on first load. Reduces just the shared container's top padding, so
     the hero text block and the hero image/person move up by the exact same
     amount (composition stays balanced). Desktop only (min-width:992px), so
     the tablet and mobile layouts are unchanged. */
  @media screen and (min-width: 992px) {
    #Start .hero-message-container { padding-top: 24px; }
  }
  /* Hero CTA: comfortable horizontal padding on the More info button (height,
     radius, typography and hover come from the shared .button styles). */
  #Start .buttons-horizont { gap: 20px; align-items: center; }
  #Start .buttons-horizont .w-button { padding-left: 32px; padding-right: 32px; }

/* ---- periscope-whyno ---- */
/* "Why I Got a No" — MEET THE HOST / LOLA layout: two SEPARATE yellow portrait
     cards (portraits filling edge-to-edge) on the LEFT, editorial text on the
     RIGHT. Scoped to #why-i-got-a-no. Portraits are transparent cutouts. */
  #why-i-got-a-no { background: #ffffff; width: 100%; }
  #why-i-got-a-no .whyno-inner {
    width: 100%; max-width: 1440px; margin: 0 auto;
    padding: clamp(64px, 8vw, 120px) clamp(22px, 5vw, 64px);
    display: flex; gap: clamp(32px, 5vw, 80px); align-items: stretch;
  }
  /* LEFT: two individual yellow cards, side by side, clear gap; portraits fill
     each card fully (no inner left/right margin), matching text height. */
  #why-i-got-a-no .whyno-media {
    flex: 0 0 44%; max-width: 44%;
    display: flex; flex-direction: row; gap: clamp(16px, 2vw, 28px);
  }
  #why-i-got-a-no .whyno-photo {
    position: relative; flex: 1 1 0; min-width: 0;
    background: var(--yellow); border-radius: 16px; overflow: hidden;
  }
  #why-i-got-a-no .whyno-photo img {
    /* Small, consistent top headroom above each head: shift the portrait down so
       the yellow card shows above the hair (no top crop; person stays large and
       fills left/right via cover). */
    position: absolute; top: clamp(16px, 3%, 26px); left: 0; right: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center top; display: block;
  }
  /* RIGHT: small label -> large title (extra space above) -> two-paragraph body */
  #why-i-got-a-no .whyno-copy {
    flex: 1 1 56%; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left;
  }
  #why-i-got-a-no .whyno-label {
    color: var(--color--black); width: auto; text-align: left; margin: 0 0 10px;
    font-size: 1.35em;
  }
  #why-i-got-a-no .whyno-headline {
    width: auto; text-align: left; margin: 16px 0 24px; white-space: nowrap; line-height: 1.02;
    font-size: clamp(1.9rem, 5.6vw, 4.8em);
  }
  #why-i-got-a-no .whyno-body { max-width: 60ch; }
  #why-i-got-a-no .whyno-body p { text-align: left; margin: 0 0 16px; }
  #why-i-got-a-no .whyno-body p:last-child { margin-bottom: 0; }
  @media screen and (max-width: 991px) {
    #why-i-got-a-no .whyno-inner { flex-direction: column; align-items: stretch; gap: 36px; }
    #why-i-got-a-no .whyno-media { flex: none; max-width: none; width: 100%; }
    #why-i-got-a-no .whyno-photo { aspect-ratio: 3 / 4; }
    #why-i-got-a-no .whyno-headline { white-space: normal; }
  }

/* ---- periscope-submit-padding ---- */
/* Contact form Submit: more horizontal breathing room. Scoped to this one
     button only — vertical padding, height, font, colors, border-radius, hover
     and position are all unchanged. */
  #Email-Form input[type="submit"].play-button { padding-left: 32px; padding-right: 32px; }

/* ---- Elementor homepage: neutralise Elementor's container/widget default
   spacing so ported <section> markup renders full-bleed. The native Meet the
   Host section re-adds its own layout below (by CSS ID, with !important). ---- */
.elementor-page-11 .e-con,
.elementor-page-11 .e-con-inner { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.elementor-page-11 .e-con { --gap: 0px; --padding-block-start:0; --padding-block-end:0; --padding-inline-start:0; --padding-inline-end:0; }
.elementor-page-11 .elementor-widget { margin: 0 !important; }
.elementor-page-11 .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
.elementor-page-11 .elementor-widget-html, .elementor-page-11 .elementor-widget-shortcode { line-height: 0; }
.elementor-page-11 .elementor-widget-html > *, .elementor-page-11 .elementor-widget-shortcode > * { line-height: normal; }

/* ===== Meet the Host — NATIVE Elementor section =====
   Containers are targeted by CSS ID (Elementor renders _element_id, not custom
   classes, on injected containers). Typography comes from the Webflow classes
   on the native widgets (.section-sign / .article-big-heading / .big-paragraph)
   via inheritance. Values replicate the legacy .host/.div-block-10/
   .sticky-host-image/.article-text-container rules incl. responsive. */
#Hosts { max-width: 1440px !important; margin: 0 auto !important; padding: 100px 40px !important; }
#pm-host-row { flex-direction: row !important; align-items: stretch !important; gap: 20px !important; width: 100% !important; }
#pm-host-image { flex: 0 0 auto !important; width: 30% !important; max-width: 30% !important; min-height: 620px !important; background-color: var(--yellow) !important; border-radius: var(--size--radius) !important; justify-content: flex-end !important; align-items: center !important; overflow: hidden !important; }
#pm-host-image .elementor-widget, #pm-host-image .elementor-widget-image, #pm-host-image .elementor-widget-container, #pm-host-image figure.wp-caption { width: 100% !important; height: 100% !important; }
#pm-host-image img { width: 100% !important; height: 100% !important; max-height: 600px !important; object-fit: cover !important; border-radius: var(--size--radius) !important; display: block !important; }
#pm-host-text { flex: 1 1 auto !important; min-width: 0 !important; padding-left: 5% !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
#pm-host-text .elementor-widget { width: 100% !important; }
/* The Webflow typography class sits on the widget WRAPPER; make the inner
   Elementor heading tag inherit it (otherwise base h2 { font-size:3em } hits the
   inner <h2> and compounds). This carries font-size/weight/transform/line-height
   incl. the class's responsive steps. */
#pm-host-text .elementor-heading-title { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; text-transform: inherit !important; letter-spacing: inherit !important; color: inherit !important; font-family: inherit !important; margin: 0 !important; }
#pm-host-text .big-paragraph .elementor-widget-container, #pm-host-text .big-paragraph p { font: inherit; color: inherit; text-align: inherit; margin: 0; }
#pm-host-text .article-big-heading { margin: 10px 0 !important; }
#pm-host-text .big-paragraph { margin: 10px 0 0 !important; }
#pm-host-cms { padding-top: 40px !important; flex-direction: row !important; justify-content: center !important; align-items: center !important; }
#pm-host-cms .icon-button { display: inline-flex; justify-content: center; align-items: center; border: 1px solid var(--yellow); background-color: var(--deep-green); border-radius: 35px; padding: 8px; }
#pm-host-cms .icon-button img { width: 24px !important; height: 24px !important; }

@media screen and (max-width: 991px) {
  #Hosts { padding: 40px 40px 80px !important; }
  #pm-host-image { min-height: 300px !important; }
  #pm-host-image img { max-height: 300px !important; }
  #pm-host-text { padding-left: 0 !important; }
}
@media screen and (max-width: 479px) {
  #Hosts { padding: 0 20px !important; }
  #pm-host-row { flex-direction: column !important; }
  #pm-host-image { width: 100% !important; max-width: none !important; min-height: auto !important; order: -1 !important; }
}

/* ===== Hero — NATIVE Elementor section (layout by CSS ID) =====
   Reproduces .hero-section/.hero-message-container/.hero-message-block/
   .image-block/.hero-3-image and the hero-adjust padding. H1 typography comes
   from the .white class on the Heading wrapper (inherited to the inner tag).
   The More-info Button reproduces .button.secondary. Lottie + social strip stay
   as one technical HTML embed. */
#Start { background-image: linear-gradient(90deg, #043633 33%, #f3eaa7) !important; overflow: hidden; margin-top: -5px; gap: 0 !important; }
/* Portrait/text column carries the legacy .hero-block stacking (z-index 800) so
   it sits ABOVE the decorative soundwave lottie (z-index 1). */
#pm-hero-container { position: relative !important; z-index: 800 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: flex-end !important; max-width: 1440px !important; margin: 0 auto !important; padding: 54px 40px 0 !important; gap: 0 !important; }
#pm-hero-msg { flex: 0 0 40% !important; width: 40% !important; padding-top: 14% !important; padding-bottom: 14% !important; align-items: flex-start !important; }
/* H1 reproduces legacy h1.white: 4em (inherited from wrapper), line-height 110%,
   WEIGHT 600 (from the base h1 rule), white; Elementor's 400 default is overridden. */
#pm-hero-msg .elementor-heading-title { font-size: inherit !important; line-height: inherit !important; font-weight: 600 !important; color: inherit !important; text-transform: inherit !important; margin: 0 !important; text-align: left !important; }
#pm-hero-msg .elementor-widget { margin: 0 !important; }
#pm-hero-cta { flex-direction: row !important; align-items: center !important; gap: 20px !important; padding-top: 20px !important; width: auto !important; }
#pm-hero-cta .elementor-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; line-height: 1.2;
  border-radius: var(--size--button-radius); background-color: transparent; border: 1px solid var(--yellow);
  color: var(--yellow); text-transform: uppercase; font-family: var(--font-family--text);
  font-size: var(--size--button-text); font-weight: 400; padding: 11px 32px 10px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s, color .2s;
}
#pm-hero-cta .elementor-button:hover { background-color: var(--yellow); color: var(--color--black); }
/* Remove the DUPLICATE border: the "button secondary" classes land on the
   Elementor button WRAPPER, drawing a second oval around the inner <a>. Neutralize
   the wrapper's border/background/padding so only the inner <a> outline remains
   (single thin yellow outline, exactly like the approved .button.secondary). */
#pm-hero-cta .button.secondary { border: 0 !important; background: transparent !important; padding: 0 !important; border-radius: 0 !important; min-height: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
#pm-hero-img { flex: 0 0 60% !important; width: 60% !important; display: flex !important; }
#pm-hero-img .elementor-widget-image, #pm-hero-img figure, #pm-hero-img .elementor-widget-container { width: 100%; margin: 0; }
/* Left-align the portrait within its 60% column (legacy image-block), matching the
   approved horizontal position; Elementor's default centering shifted it right. */
#pm-hero-img .elementor-widget-image { text-align: left !important; }
#pm-hero-img img { width: 100% !important; max-width: 90% !important; max-height: 600px !important; object-fit: contain !important; }
@media screen and (max-width: 991px) {
  #pm-hero-container { padding-top: 0 !important; }
  #pm-hero-msg { flex-basis: 100% !important; width: 100% !important; padding-top: 10% !important; padding-bottom: 5% !important; }
  #pm-hero-img { flex-basis: 100% !important; width: 100% !important; }
}
@media screen and (max-width: 479px) {
  #pm-hero-container { padding: 40px 20px 0 !important; }
  #pm-hero-msg { width: 85% !important; flex-basis: 85% !important; padding-top: 0 !important; }
  #pm-hero-cta { flex-wrap: wrap !important; justify-content: center !important; }
  #pm-hero-img img { max-width: 100% !important; }
}

/* ===== Why I Got a No — NATIVE Elementor section (layout by CSS ID) =====
   Copy = native Heading/Heading/Text (typography via .section-sign/.whyno-label/
   .article-big-heading/.whyno-headline/.big-paragraph classes + inherit bridge).
   Two portrait cutouts = native Image widgets in yellow ID cards, reproducing
   the .whyno-media/.whyno-photo treatment (fill + top head-room). */
#pm-why-inner { width: 100%; max-width: 1440px; margin: 0 auto !important; padding: clamp(64px,8vw,120px) clamp(22px,5vw,64px) !important; display: flex !important; flex-direction: row !important; gap: clamp(32px,5vw,80px) !important; align-items: stretch !important; }
#pm-why-media { flex: 0 0 44% !important; max-width: 44% !important; display: flex !important; flex-direction: row !important; gap: clamp(16px,2vw,28px) !important; }
#pm-why-card-a, #pm-why-card-b { position: relative !important; flex: 1 1 0 !important; min-width: 0 !important; background: var(--yellow) !important; border-radius: 16px !important; overflow: hidden !important; }
#pm-why-card-a .elementor-widget-image, #pm-why-card-b .elementor-widget-image, #pm-why-card-a .elementor-widget-container, #pm-why-card-b .elementor-widget-container, #pm-why-card-a figure, #pm-why-card-b figure { position: static !important; margin: 0 !important; height: 100%; }
#pm-why-card-a img, #pm-why-card-b img { position: absolute !important; top: clamp(16px,3%,26px) !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center top !important; }
#pm-why-copy { flex: 1 1 56% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; text-align: left !important; }
#pm-why-copy .elementor-widget { width: 100% !important; }
#pm-why-copy .elementor-heading-title { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; text-transform: inherit !important; letter-spacing: inherit !important; color: inherit !important; white-space: inherit !important; margin: 0 !important; text-align: left !important; }
#pm-why-copy .whyno-label { margin: 0 0 10px !important; }
#pm-why-copy .whyno-headline { margin: 16px 0 24px !important; }
@media screen and (max-width: 991px) {
  #pm-why-inner { flex-direction: column !important; align-items: stretch !important; gap: 36px !important; }
  #pm-why-media { flex-basis: auto !important; max-width: none !important; width: 100% !important; }
  #pm-why-card-a, #pm-why-card-b { aspect-ratio: 3 / 4 !important; }
}

/* ===== Single Episode — editable show-notes area inherits the approved
   "About this episode" paragraph styling (color/size) so notes edited in
   Elementor/WordPress render identically to the original detail design.
   Text elements default to the section's light colour so anything added later
   in Elementor (headings, lists, quotes) stays visible on the dark card; an
   explicit colour chosen in Elementor still wins. ===== */
.episode-notes p { margin: 0 0 1em; color: inherit; font-size: inherit; line-height: inherit; }
.episode-notes p:last-child, .episode-notes *:last-child { margin-bottom: 0; }
.episode-notes > *:first-child { margin-top: 0; }
.episode-notes li,
.episode-notes h1, .episode-notes h2, .episode-notes h3,
.episode-notes h4, .episode-notes h5, .episode-notes h6,
.episode-notes blockquote,
.episode-notes .elementor-heading-title,
.episode-notes .elementor-widget-text-editor { color: inherit; }
.episode-notes ul, .episode-notes ol { margin: 0 0 1em; padding-left: 1.25em; }
.episode-notes a { color: var(--yellow); text-decoration: underline; }
/* The Elementor editor injects the content full-width; keep it fluid so it fits
   the notes column and never forces the container wider. */
.episode-notes .elementor, .episode-notes .e-con, .episode-notes .elementor-widget-container { max-width: 100% !important; }

/* ===== All Episodes — NATIVE Elementor page (page 18) =====
   Same proven method as the homepage: neutralize Elementor's container defaults,
   then reproduce the approved layout by CSS ID. Ordinary heading is a native
   Heading widget; the dynamic listing stays the Episodes Grid custom widget.
   Reproduces the deep-green section (220/40 padding), centered 1280 content,
   20px grid gutters, and the responsive heading size (48 -> 32). */
.elementor-page-18 .e-con,
.elementor-page-18 .e-con-inner { padding: 0 !important; margin: 0 !important; max-width: none !important; }
.elementor-page-18 .e-con { --gap: 0px; --padding-block-start: 0; --padding-block-end: 0; --padding-inline-start: 0; --padding-inline-end: 0; }
.elementor-page-18 .elementor-widget { margin: 0 !important; }
.elementor-page-18 .elementor-widget-container { padding: 0 !important; margin: 0 !important; }
#pm-allep { background-color: var(--deep-green) !important; width: 100% !important; padding: 220px 0 40px !important; }
#pm-allep-inner { width: 100% !important; max-width: 1280px !important; margin: 0 auto !important; }
#pm-allep-col { width: 100% !important; }
#pm-allep-head { width: 100% !important; padding: 0 20px !important; }
#pm-allep-grid { width: 100% !important; padding: 0 20px !important; }
#pm-allep .elementor-heading-title { color: var(--color--white) !important; text-align: center !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 0 10px !important; font-size: 48px !important; text-transform: none !important; }
@media screen and (max-width: 991px) { #pm-allep .elementor-heading-title { font-size: 32px !important; } }
@media screen and (max-width: 767px) { #pm-allep { padding: 220px 20px 40px !important; } }

/* ===== "Real Questions… / Hit us with your burning question" social section =====
   NATIVE Elementor (2 Heading widgets + 4 linked Image widgets in Containers),
   placed right after Meet the Host. Reproduces the approved .scrolling-quotes-
   container design: deep-green bg, centered white text, and 64px yellow-outline
   circular social icons (.icon-button). No Slido/question box. */
#pm-ask { background-color: var(--deep-green) !important; width: 100% !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; min-height: 80vh !important; padding: 100px 0 !important; overflow: hidden !important; }
#pm-ask-inner { width: 100% !important; max-width: 976.945px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; padding-bottom: 60px !important; }
#pm-ask .elementor-widget { width: 100% !important; }
#pm-ask .elementor-heading-title { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; color: inherit !important; text-transform: inherit !important; letter-spacing: inherit !important; text-align: center !important; margin: 0 0 10px !important; }
#pm-ask .section-heading { margin-top: 6px !important; }
/* social row */
#pm-ask-social { width: auto !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 5px !important; margin-top: 6px !important; }
#pm-ask-social .elementor-widget-image { width: auto !important; }
#pm-ask-social .elementor-widget-image .elementor-widget-container { display: flex !important; justify-content: center !important; align-items: center !important; }
#pm-ask-social .elementor-widget-image a { display: flex !important; justify-content: center !important; align-items: center !important; width: 64px !important; height: 64px !important; border: 1px solid var(--yellow) !important; background-color: var(--deep-green) !important; border-radius: 50% !important; text-decoration: none !important; transition: box-shadow .2s ease !important; }
#pm-ask-social .elementor-widget-image a:hover { box-shadow: 0 -1px 8px #5d6f37 !important; }
#pm-ask-social .elementor-widget-image img { width: auto !important; max-width: 40% !important; height: auto !important; }
@media screen and (max-width: 991px) {
  #pm-ask { min-height: 70vh !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  #pm-ask-inner { max-width: none !important; padding-top: 60px !important; }
}
@media screen and (max-width: 767px) {
  #pm-ask { min-height: 60vh !important; padding: 0 20px 100px !important; }
  #pm-ask-inner { padding-bottom: 40px !important; }
}

/* ===== Font consistency: native Elementor heading/text inner tags must use the
   site font (Nunito Sans, inherited from their Webflow-classed wrappers), NOT
   Elementor's kit default (Roboto). The entire approved design uses Nunito Sans;
   this makes removing the unused Roboto webfont safe with no visual change. ===== */
.elementor-page-11 .elementor-widget-heading .elementor-heading-title,
.elementor-page-18 .elementor-widget-heading .elementor-heading-title,
.elementor-page-11 .elementor-widget-text-editor,
.elementor-page-18 .elementor-widget-text-editor { font-family: inherit !important; }