/* ──────────────────────────────────────────────────────────────────────────
 * vsl-upsell-landing.css
 *
 * Styling for the Round-6 CartFlows Landing steps:
 *   - 8 Course 201 upsell pages (steps 15431–15438)
 *   - Course 1 gate page       (step 15441)
 *
 * Scope: CartFlows canvas template with minimal Gutenberg content
 * (heading + paragraph + button OR WPForms form). This file:
 *   - Applies the canonical brand pill `.cta-btn` to button blocks
 *   - Centers content with a max-width container
 *   - Sets brand typography on headings + paragraphs
 *   - Styles the embedded WPForms submit button as the brand pill too
 *   - Adds responsive padding at 768px / 480px
 *
 * Enqueued from functions.php for post IDs in $PABIO_LANDING_IDS.
 * Do NOT use on the original UFFS Sales step 15311 (that has its own CSS).
 * ──────────────────────────────────────────────────────────────────────── */

:root {
  --pabio-landing-bg: #fff;
  --pabio-landing-fg: #1A1A1A;
  --pabio-landing-muted: #4A4A4A;
  --pabio-landing-green: #107C4B;
  --pabio-landing-green-dark: #0D6B3F;
  --pabio-landing-radius: 999px;
  --pabio-landing-shadow: 0 4px 20px rgba(16, 124, 75, 0.3);
}

/* ── Page scaffold ─────────────────────────────────────────────────────── */

body.cartflows-canvas {
  background: var(--pabio-landing-bg);
  color: var(--pabio-landing-fg);
  font-family: 'Open Sans', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CartFlows canvas wrapper — center content, give breathing room */
body.cartflows-canvas .wcf-canvas-main,
body.cartflows-canvas .wcf-canvas-main > .entry-content,
body.cartflows-canvas main.site-main {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 64px 32px !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  body.cartflows-canvas .wcf-canvas-main,
  body.cartflows-canvas .wcf-canvas-main > .entry-content,
  body.cartflows-canvas main.site-main {
    padding: 40px 20px !important;
  }
}

@media (max-width: 480px) {
  body.cartflows-canvas .wcf-canvas-main,
  body.cartflows-canvas .wcf-canvas-main > .entry-content,
  body.cartflows-canvas main.site-main {
    padding: 28px 16px !important;
  }
}

/* ── Typography ────────────────────────────────────────────────────────── */

body.cartflows-canvas h1.wp-block-heading {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--pabio-landing-fg);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  body.cartflows-canvas h1.wp-block-heading { font-size: 32px; }
}
@media (max-width: 480px) {
  body.cartflows-canvas h1.wp-block-heading { font-size: 28px; }
}

body.cartflows-canvas .wp-block-paragraph,
body.cartflows-canvas p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--pabio-landing-muted);
  margin: 0 0 20px;
}

body.cartflows-canvas .wp-block-list,
body.cartflows-canvas ul {
  font-size: 17px;
  line-height: 1.7;
  color: var(--pabio-landing-muted);
  max-width: 620px;
  margin: 0 auto 28px;
  padding-left: 22px;
}

body.cartflows-canvas .wp-block-list li,
body.cartflows-canvas ul li {
  margin-bottom: 8px;
}

/* Price callout paragraph (the green 20px inline-styled one we emit) */
body.cartflows-canvas p[style*="#107C4B"] {
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 0 24px !important;
}

/* ── Brand pill CTA ────────────────────────────────────────────────────── */
/* Target both patterns:
 *   1) Gutenberg button block with className=cta-btn (class on wrapper div)
 *   2) Standalone .cta-btn class on any anchor or button (fallback)
 */

body.cartflows-canvas .wp-block-button.cta-btn .wp-block-button__link,
body.cartflows-canvas .wp-block-button .wp-block-button__link.cta-btn,
body.cartflows-canvas a.cta-btn,
body.cartflows-canvas button.cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 260px !important;
  height: 56px !important;
  padding: 0 36px !important;
  border: 0 !important;
  border-radius: var(--pabio-landing-radius) !important;
  background: var(--pabio-landing-green) !important;
  color: #fff !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: var(--pabio-landing-shadow) !important;
  cursor: pointer !important;
  transition: filter 0.15s ease, transform 0.12s ease !important;
  white-space: nowrap !important;
}

body.cartflows-canvas .wp-block-button.cta-btn .wp-block-button__link:hover,
body.cartflows-canvas a.cta-btn:hover,
body.cartflows-canvas button.cta-btn:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

body.cartflows-canvas .wp-block-button.cta-btn .wp-block-button__link:active,
body.cartflows-canvas a.cta-btn:active,
body.cartflows-canvas button.cta-btn:active {
  transform: translateY(0) !important;
}

@media (max-width: 768px) {
  body.cartflows-canvas .wp-block-button.cta-btn .wp-block-button__link,
  body.cartflows-canvas a.cta-btn,
  body.cartflows-canvas button.cta-btn {
    height: 52px !important;
    min-width: 220px !important;
    padding: 0 28px !important;
    font-size: 16px !important;
  }
}

/* Button block layout — ensure centering when parent uses flex */
body.cartflows-canvas .wp-block-buttons {
  margin: 32px 0 !important;
  justify-content: center !important;
}

/* ── Embedded WPForms form styling ─────────────────────────────────────── */
/* pabio-forms.css is already enqueued site-wide on these pages, so inputs
 * get the canonical style. We just need to make sure:
 *   - The form has adequate width and sits inside our centered container
 *   - The submit button (with class .cta-btn) gets pill styling
 *   - Form wrapper has spacing
 */

body.cartflows-canvas .wpforms-container {
  max-width: 520px !important;
  margin: 32px auto !important;
  padding: 0 !important;
  background: transparent !important;
}

body.cartflows-canvas .wpforms-container .wpforms-field {
  padding: 10px 0 !important;
}

body.cartflows-canvas .wpforms-container .wpforms-field-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #999 !important;
  margin-bottom: 6px !important;
}

/* Canonical form-field pattern — duplicated here because pabio-forms.css
 * scopes its rules under #primary which the CartFlows canvas doesn't have.
 * Spec per CLAUDE.md "Canonical form-field pattern". */
body.cartflows-canvas .wpforms-container input[type="text"],
body.cartflows-canvas .wpforms-container input[type="email"],
body.cartflows-canvas .wpforms-container input[type="tel"],
body.cartflows-canvas .wpforms-container input[type="url"],
body.cartflows-canvas .wpforms-container input[type="number"],
body.cartflows-canvas .wpforms-container textarea,
body.cartflows-canvas .wpforms-container select {
  width: 100% !important;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 6px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  background: #fff !important;
  color: #1A1A1A !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
}

body.cartflows-canvas .wpforms-container input[type="text"]:focus,
body.cartflows-canvas .wpforms-container input[type="email"]:focus,
body.cartflows-canvas .wpforms-container input[type="tel"]:focus,
body.cartflows-canvas .wpforms-container input[type="url"]:focus,
body.cartflows-canvas .wpforms-container textarea:focus,
body.cartflows-canvas .wpforms-container select:focus {
  border-color: #107C4B !important;
  box-shadow: 0 0 0 3px rgba(16, 124, 75, 0.12) !important;
  outline: none !important;
}

@media (max-width: 768px) {
  body.cartflows-canvas .wpforms-container input[type="text"],
  body.cartflows-canvas .wpforms-container input[type="email"],
  body.cartflows-canvas .wpforms-container input[type="tel"],
  body.cartflows-canvas .wpforms-container input[type="url"],
  body.cartflows-canvas .wpforms-container textarea,
  body.cartflows-canvas .wpforms-container select {
    padding: 12px 14px !important;
  }
}

/* Required asterisk inherits label color (no red per canonical pattern) */
body.cartflows-canvas .wpforms-container .wpforms-required-label {
  color: inherit !important;
  text-decoration: none !important;
}

/* Submit button — force brand pill even though pabio-forms.css styles it too */
body.cartflows-canvas .wpforms-container .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 260px !important;
  height: 56px !important;
  padding: 0 36px !important;
  border: 0 !important;
  border-radius: var(--pabio-landing-radius) !important;
  background: var(--pabio-landing-green) !important;
  color: #fff !important;
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: var(--pabio-landing-shadow) !important;
  cursor: pointer !important;
  transition: filter 0.15s ease, transform 0.12s ease !important;
}

body.cartflows-canvas .wpforms-container .wpforms-submit:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

body.cartflows-canvas .wpforms-container .wpforms-submit-container {
  text-align: center !important;
  margin-top: 16px !important;
}

/* ── "Already registered? Sign in" link on the gate step ──────────────── */

body.postid-15441 p a[href*="wp-login.php"] {
  color: var(--pabio-landing-green) !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

body.postid-15441 p a[href*="wp-login.php"]:hover {
  color: var(--pabio-landing-green-dark) !important;
}

/* ──────────────────────────────────────────────────────────────────────
 * Video Course Gate layout (post 15441) — mirrors the eBook landing
 * (page 5494) visual pattern: outer centered group, hero pill, headline,
 * subheadline, form card on light beige background.
 * Source pattern: css/ebook-landing.css.
 * ──────────────────────────────────────────────────────────────────── */

:root {
  --vc-bg: #F7F7F5;
  --vc-card: #FFFFFF;
  --vc-border: #E0E0E0;
  --vc-radius-lg: 12px;
  --vc-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --vc-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.14);
  --vc-text: #111111;
  --vc-sub: #4A4A4A;
}

/* Body background — matches eBook page which renders white in practice
 * (body.page-id-5494 declares #F7F7F5 but a higher-specificity rule
 * elsewhere in the theme overrides to white; replicating the displayed
 * result rather than the declared value). */
body.postid-15441 {
  background: #FFFFFF !important;
}

/* Theme-wide rule hides header + footer for every single-cartflows_step:
 *   .single-cartflows_step #top-header,
 *   .single-cartflows_step header,
 *   .single-cartflows_step footer { display: none; }
 * That's correct for funnel steps (distraction-free) but wrong for the
 * Course 1 gate — it needs full site nav like the eBook page. Override
 * with body-ID specificity. */
body.postid-15441 #top-header,
body.postid-15441 header,
body.postid-15441 header#masthead,
body.postid-15441 header.site-header,
body.postid-15441 footer,
body.postid-15441 footer#colophon {
  display: block !important;
}

/* Hide theme's auto-rendered post_title H1 (same fix as eBook landing).
 * Pabio theme renders the post_title as <h1 class="wow fadeInUp"> directly
 * inside <main#main>. Our .vc-landing-headline is the single visible H1. */
body.postid-15441 #main > h1,
body.postid-15441 #main > .wow.fadeInUp:first-child,
body.postid-15441 .entry-header,
body.postid-15441 .page-header,
body.postid-15441 header.entry-header {
  display: none !important;
}

/* Outer landing group — the 720-max column.
 * Top padding pushes content below the fixed site header stack
 * (top-header 42px + masthead 82px = 124px) plus breathing room. */
body.postid-15441 .vc-landing {
  max-width: 720px !important;
  margin: 0 auto !important;
  padding: 160px 24px 80px !important;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  body.postid-15441 .vc-landing {
    padding: 140px 20px 60px !important;
  }
}

/* Hero pill — "FREE VIDEO COURSE" badge above the headline */
body.postid-15441 .vc-landing-hero-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto 20px !important;
  padding: 8px 18px !important;
  background: var(--pabio-landing-green) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  box-shadow: var(--pabio-landing-shadow) !important;
  text-align: center !important;
  width: auto !important;
}

/* Headline */
body.postid-15441 .vc-landing-headline {
  font-family: 'Open Sans', Arial, sans-serif !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--vc-text) !important;
  text-align: center !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.01em !important;
}

/* Subheadline */
body.postid-15441 .vc-landing-sub {
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--vc-sub) !important;
  text-align: center !important;
  margin: 0 0 32px !important;
}

/* Form card — fills the 720 container minus padding (matches eBook exactly) */
body.postid-15441 .vc-landing-form-wrap {
  background: var(--vc-card) !important;
  padding: 32px !important;
  border-radius: var(--vc-radius-lg) !important;
  box-shadow: var(--vc-shadow) !important;
  border: 1px solid var(--vc-border) !important;
  margin: 0 auto 24px !important;
  text-align: left !important;
}

/* Hero image (.vc-landing-cover) — matches .ebook-cover styling */
body.postid-15441 .vc-landing-cover {
  text-align: center !important;
  margin: 0 auto 40px !important;
}

body.postid-15441 .vc-landing-cover img {
  display: block !important;
  max-width: 280px !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Form container inside the card — fill the card + reset the generic
 * .wpforms-container max-width from earlier in this file */
body.postid-15441 .vc-landing-form-wrap .wpforms-container,
body.postid-15441 .vc-landing-form-wrap .wpforms-container-full {
  max-width: 100% !important;
  margin: 0 auto !important;
  text-align: left !important;
}

/* Center the submit button inside the form */
body.postid-15441 .vc-landing-form-wrap .wpforms-submit-container {
  text-align: center !important;
  margin-top: 16px !important;
}

/* Sign-in link paragraph */
body.postid-15441 .vc-landing-signin {
  text-align: center !important;
  font-size: 14px !important;
  color: var(--vc-sub) !important;
  margin: 0 !important;
}

/* Mobile */
@media (max-width: 768px) {
  body.postid-15441 .vc-landing {
    padding: 32px 20px 60px !important;
  }
  body.postid-15441 .vc-landing-headline {
    font-size: 28px !important;
  }
  body.postid-15441 .vc-landing-sub {
    font-size: 16px !important;
    margin-bottom: 24px !important;
  }
  body.postid-15441 .vc-landing-form-wrap {
    padding: 24px 20px !important;
  }
}

@media (max-width: 480px) {
  body.postid-15441 .vc-landing-headline {
    font-size: 24px !important;
  }
}