/* =============================================================================
   CGC Fundamentals — Component Styles
   -----------------------------------------------------------------------------
   The whole visual system, in one versioned file. Landing pages are pasted
   into WordPress as plain markup with no <style> block, so the design lives
   here rather than inside page content.

   Contents
     1. Brand tokens
     2. Landing template reset
     3. LANDING PAGE  (everything under .cgcf)
     4. Course and lesson pages (LearnDash)
     5. Upsell / membership card
     6. Branded login  ([cgcf_login])
     7. PDF download card  ([cgcf_pdf])
     8. Magic-link signup + set password  ([cgcf_signup], [cgcf_set_password])
     9. Plugin odds and ends

   Bump the Version in style.css after editing this file, or browsers will
   keep serving the old copy.
   ============================================================================= */


/* =============================================================================
   1. BRAND TOKENS
   -----------------------------------------------------------------------------
   The CGC Fundamentals palette, carried over unchanged from the Avada build so
   the pages look identical after the theme swap. One teal doing all the accent
   work, on white and a very pale teal-tinted grey.

   ACCESSIBILITY NOTE, and a decision you may want to revisit:
   #1f9ab6 on white is 3.3:1. That clears the threshold for large text but not
   for small text, which needs 4.5:1. It is used here for eyebrows, links and
   white-on-teal button labels, exactly as the original design did, because the
   brief was to match the existing look.

   If you would rather those pass, change ONE line: set --cgcf-teal-ink to
   #16788f (5.1:1). That darkens small teal text and links only, leaves every
   button, rule and panel exactly as it is, and is close enough in hue that
   nobody will notice it as a change.
   ============================================================================= */
:root {
  --cgcf-teal: #1f9ab6;        /* the brand teal: buttons, rules, accents */
  --cgcf-teal-dark: #16788f;   /* hover / pressed */
  --cgcf-teal-ink: #1f9ab6;    /* teal TEXT. See the note above. */
  --cgcf-teal-soft: rgba(31,154,182,.12);
  --cgcf-shadow: rgba(31,154,182,.28);

  --cgcf-ink: #262b2d;         /* headings */
  --cgcf-body: #444444;        /* body copy */
  --cgcf-muted: #6c7a7d;       /* captions, fine print */
  --cgcf-line: #e4eaeb;        /* hairline borders */
  --cgcf-bg-soft: #f5fafb;     /* tinted section background */

  --cgcf-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --cgcf-serif: "Shippori Mincho", Georgia, "Times New Roman", serif;
  --cgcf-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* Primary button colour. */
  --cgcf-btn: var(--cgcf-teal);
  --cgcf-btn-dark: var(--cgcf-teal-dark);
}


/* =============================================================================
   2. LANDING TEMPLATE RESET
   The "CGC Landing (blank canvas)" page template prints no GeneratePress
   header, footer or container, so the page markup owns the full width. This
   clears any inherited padding GP might still apply to the body.
   ============================================================================= */
body.cgcf-landing-template {
  margin: 0;
  padding: 0;
  background: #fff;
}
body.cgcf-landing-template .cgcf { display: block; }


/* =============================================================================
   3. LANDING PAGE
   Everything below is scoped to the .cgcf wrapper, so it cannot leak into
   course pages, blog posts or the GeneratePress chrome. The prefix is
   deliberately different from the .cgcf- component classes further down.
   ============================================================================= */
.cgcf {
  color: var(--cgcf-body);
  font-family: var(--cgcf-sans);
  font-size: 18px;
  line-height: 1.65;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.cgcf *, .cgcf *::before, .cgcf *::after { box-sizing: border-box; }
.cgcf .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.cgcf .narrow { max-width: 720px; margin-left: auto; margin-right: auto; }
.cgcf section { padding: 84px 0; }
.cgcf .soft { background: var(--cgcf-bg-soft); }

.cgcf h1, .cgcf h2, .cgcf h3 { color: var(--cgcf-ink); margin: 0 0 .4em; }
.cgcf h1 { font-family: var(--cgcf-display); font-weight: 400; font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: .5px; }
.cgcf h2 { font-family: var(--cgcf-display); font-weight: 400; font-size: clamp(30px, 4.5vw, 48px); line-height: 1.02; letter-spacing: .4px; }
.cgcf h3 { font-family: var(--cgcf-serif); font-weight: 600; font-size: 21px; line-height: 1.3; }
.cgcf p { margin: 0 0 1.1em; }
.cgcf p:last-child { margin-bottom: 0; }
.cgcf img { max-width: 100%; }
.cgcf .lead { font-size: clamp(19px, 2.4vw, 22px); color: var(--cgcf-body); }
.cgcf .eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 13px; font-weight: 700; color: var(--cgcf-teal-ink); margin: 0 0 18px; }

/* Buttons */
.cgcf .btn { display: inline-block; font-family: var(--cgcf-display); font-size: 22px; letter-spacing: .6px; line-height: 1; text-decoration: none; padding: 18px 38px; border-radius: 4px; border: 0; cursor: pointer; transition: background-color .18s ease, transform .18s ease; }
.cgcf .btn-primary { background: var(--cgcf-btn); color: #fff; box-shadow: 0 6px 18px var(--cgcf-shadow); }
.cgcf .btn-primary:hover,
.cgcf .btn-primary:focus { background: var(--cgcf-btn-dark); color: #fff; transform: translateY(-1px); }
.cgcf .btn-block { display: block; width: 100%; text-align: center; }
.cgcf .micro { font-size: 14px; color: var(--cgcf-muted); margin-top: 14px; }
.cgcf .micro a { color: var(--cgcf-teal-ink); font-weight: 700; text-decoration: none; }
.cgcf .micro a:hover { color: var(--cgcf-teal-dark); }
.cgcf a.quietlink { color: var(--cgcf-teal-ink); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(31,154,182,.35); padding-bottom: 1px; }
.cgcf a.quietlink:hover { border-bottom-color: var(--cgcf-teal); }

/* Header */
.cgcf .site-head { border-bottom: 1px solid var(--cgcf-line); }
.cgcf .site-head .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; }
.cgcf .site-head img { height: 46px; width: auto; display: block; }
.cgcf .site-head .head-nav { display: flex; align-items: center; }
.cgcf .site-head .head-cta { font-family: var(--cgcf-display); font-size: 18px; letter-spacing: .5px; color: var(--cgcf-teal-ink); text-decoration: none; padding-right: 20px; }
.cgcf .site-head .head-cta:hover { color: var(--cgcf-teal-dark); }
.cgcf .site-head .head-login { position: relative; font-family: var(--cgcf-display); font-size: 18px; letter-spacing: .5px; color: var(--cgcf-teal-ink); text-decoration: none; padding-left: 20px; }
.cgcf .site-head .head-login:hover { color: var(--cgcf-teal-dark); }
.cgcf .site-head .head-login::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: rgba(38,43,45,.25); }

/* Hero */
.cgcf .hero { padding: 72px 0 76px; }
.cgcf .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.cgcf .hero .accent-rule { width: 58px; height: 4px; background: var(--cgcf-teal); margin: 0 0 24px; border-radius: 2px; }
.cgcf .hero p.lead { margin-top: 20px; }
.cgcf .hero .cta-row { margin-top: 32px; }
.cgcf .hero-media img { width: 100%; height: auto; display: block; }

/* What's inside */
.cgcf .inside-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 44px; margin-top: 38px; }
.cgcf .inside-item { display: flex; gap: 16px; align-items: flex-start; }
.cgcf .inside-item .mark { flex: 0 0 auto; width: 32px; height: 32px; margin-top: 2px; border-radius: 50%; background: var(--cgcf-teal-soft); display: flex; align-items: center; justify-content: center; color: var(--cgcf-teal-ink); font-family: var(--cgcf-display); font-size: 18px; }
.cgcf .inside-item h3 { margin-bottom: .2em; font-size: 20px; }
.cgcf .inside-item p { font-size: 16px; margin: 0; color: var(--cgcf-body); }
.cgcf .reading-note { margin-top: 40px; background: #fff; border: 1px solid var(--cgcf-line); border-left: 4px solid var(--cgcf-teal); border-radius: 6px; padding: 22px 26px; font-family: var(--cgcf-serif); font-size: 18px; color: var(--cgcf-ink); }

/* Who it's for */
.cgcf .seg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.cgcf .seg { background: #fff; border: 1px solid var(--cgcf-line); border-radius: 8px; padding: 30px 26px; }
.cgcf .seg .seg-label { font-family: var(--cgcf-display); font-size: 24px; letter-spacing: .5px; color: var(--cgcf-ink); margin-bottom: 10px; }
.cgcf .seg p { font-size: 16px; margin: 0; }

/* Teacher */
.cgcf .teacher { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; }
.cgcf .teacher .portrait { width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 1px solid var(--cgcf-line); background: var(--cgcf-bg-soft); }
.cgcf .teacher .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cgcf .teacher .sig { font-family: var(--cgcf-serif); font-weight: 600; font-size: 21px; color: var(--cgcf-ink); margin-top: 6px; }

/* Proof */
.cgcf .longevity { text-align: center; font-family: var(--cgcf-serif); font-weight: 500; font-size: clamp(20px, 2.6vw, 25px); color: var(--cgcf-ink); margin-bottom: 44px; }
.cgcf .quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.cgcf blockquote { margin: 0; background: #fff; border: 1px solid var(--cgcf-line); border-left: 4px solid var(--cgcf-teal); border-radius: 6px; padding: 28px 30px; }
.cgcf blockquote p { font-family: var(--cgcf-serif); font-size: 19px; color: var(--cgcf-ink); margin: 0 0 14px; }
.cgcf blockquote cite { font-style: normal; font-size: 14px; font-weight: 700; color: var(--cgcf-muted); letter-spacing: .03em; }

/* Signup card */
.cgcf .signup-card { background: #fff; border: 1px solid var(--cgcf-line); border-radius: 12px; padding: 44px 40px; box-shadow: 0 14px 40px rgba(38,43,45,.06); text-align: center; }
.cgcf .signup-card h2 { margin-bottom: .25em; }
.cgcf .signup-card .lead { margin-bottom: 26px; }
.cgcf .cgcf-form { max-width: 440px; margin: 0 auto; text-align: left; }
.cgcf .cgcf-field { margin-bottom: 16px; }
.cgcf .cgcf-field label { display: block; font-size: 14px; font-weight: 700; color: var(--cgcf-ink); margin-bottom: 6px; letter-spacing: .02em; }
.cgcf .cgcf-form input[type="text"],
.cgcf .cgcf-form input[type="email"],
.cgcf .cgcf-form input[type="password"] { width: 100%; padding: 14px 16px; font-size: 16px; font-family: var(--cgcf-sans); color: var(--cgcf-ink); background: #fff; border: 1px solid var(--cgcf-line); border-radius: 6px; }
.cgcf .cgcf-form input:focus { outline: none; border-color: var(--cgcf-teal); box-shadow: 0 0 0 3px var(--cgcf-teal-soft); }
.cgcf .cgcf-form .btn { margin-top: 8px; }
.cgcf .cgcf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cgcf .cgcf-formnote { display: none; margin: 0 auto 18px; max-width: 440px; background: #fdecec; border: 1px solid #f3c6c6; color: #9b2c2c; border-radius: 6px; padding: 12px 16px; font-size: 15px; }
.cgcf .cgcf-sent { display: none; background: var(--cgcf-bg-soft); border: 1px solid #d4e9ee; border-radius: 10px; padding: 28px 26px; text-align: center; max-width: 440px; margin: 0 auto; }
.cgcf .cgcf-sent h3 { font-family: var(--cgcf-display); font-weight: 400; font-size: 30px; letter-spacing: .5px; color: var(--cgcf-ink); margin: 0 0 6px; }
.cgcf .cgcf-sent p { font-size: 16px; color: var(--cgcf-body); margin: 0; }

/* Membership mention + close */
.cgcf .academy { text-align: center; }
.cgcf .academy .lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.cgcf .academy .next { margin-top: 22px; }
.cgcf .close-note { text-align: center; }
.cgcf .close-note .sig { font-family: var(--cgcf-serif); font-weight: 600; font-size: 22px; color: var(--cgcf-ink); margin-top: 4px; }

/* Footer */
.cgcf .pagefoot { padding: 40px 0; border-top: 1px solid var(--cgcf-line); text-align: center; }
.cgcf .pagefoot img { height: 56px; width: auto; margin: 0 auto 16px; display: block; border-radius: 8px; }
.cgcf .pagefoot p { font-size: 13px; color: var(--cgcf-muted); margin: 0; }

/* Motion + focus */
.cgcf .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.cgcf .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cgcf .reveal { opacity: 1; transform: none; transition: none; }
  .cgcf .btn { transition: none; }
}
.cgcf a:focus-visible, .cgcf button:focus-visible, .cgcf input:focus-visible { outline: 3px solid var(--cgcf-teal); outline-offset: 3px; border-radius: 3px; }

/* Responsive */
@media (max-width: 900px) {
  .cgcf .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .cgcf .hero-media { order: -1; }
}
@media (max-width: 860px) {
  .cgcf section { padding: 56px 0; }
  .cgcf .inside-grid { grid-template-columns: 1fr; gap: 22px; }
  .cgcf .seg-grid { grid-template-columns: 1fr; }
  .cgcf .quotes { grid-template-columns: 1fr; }
  .cgcf .teacher { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  .cgcf .teacher .portrait { margin: 0 auto; }
  .cgcf .signup-card { padding: 34px 22px; }
  .cgcf .site-head .head-cta { display: none; }
  .cgcf .site-head .head-login { padding-left: 0; }
  .cgcf .site-head .head-login::before { display: none; }
}


/* =============================================================================
   4. COURSE AND LESSON PAGES  (LearnDash on GeneratePress)
   -----------------------------------------------------------------------------
   LearnDash on a stock theme prints a bare title, a grey status box and a plain
   list of lessons. This section brings those pages into the same visual system
   as the landing pages and the home page: the same display type, the same
   teal accent treatment, the same cards.

   Everything here is scoped to either .learndash-wrapper (LearnDash's own
   container) or .cgcf-course-page (a body class the child theme adds on course,
   lesson and topic pages), so nothing leaks onto ordinary pages.

   Written against LearnDash's standard markup. If one piece does not take, it
   is because that install renders a different template, and the selector needs
   a look at the real markup. Nothing here breaks if a selector finds nothing.
   ============================================================================= */

/* --- Page frame ----------------------------------------------------------- */

/* The hero prints the course title, so hide the theme's duplicate. */
.cgcf-course-page .entry-header .entry-title,
.cgcf-course-page .page-header .entry-title { display: none; }

.cgcf-course-page .entry-content { font-family: var(--cgcf-sans); color: var(--cgcf-body); font-size: 17px; line-height: 1.65; }
.cgcf-course-page .entry-content h2,
.cgcf-course-page .entry-content h3 { color: var(--cgcf-ink); }
.cgcf-course-page .entry-content h2 { font-family: var(--cgcf-display); font-weight: 400; font-size: 34px; letter-spacing: .4px; }
.cgcf-course-page .entry-content h3 { font-family: var(--cgcf-serif); font-weight: 600; font-size: 21px; }

/* --- Video embeds ---------------------------------------------------------
   Kept deliberately minimal. An earlier version of this file put a rounded,
   shadowed box on .wp-block-embed__wrapper and .fluid-width-video-wrapper.
   That was a mistake: those wrappers get their height from an aspect-ratio
   padding trick and rely on the iframe inside being absolutely positioned.
   Styling the wrapper made the failure visible as a tall empty box with the
   video hanging below it. Cosmetics are not worth breaking a video player, so
   the wrapper is left alone.

   All that is set here is the one rule every embed needs. */
.cgcf-course-page .entry-content iframe,
.learndash-wrapper iframe { max-width: 100%; }

/* Belt and braces for the two standard aspect-ratio wrappers: make sure the
   iframe actually fills its wrapper. Both of these only match markup that
   already has the padding-based aspect ratio, so neither can collapse an
   embed that has no wrapper. */
.cgcf-course-page .wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper { position: relative; }
.cgcf-course-page .wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper > iframe,
.cgcf-course-page .fluid-width-video-wrapper > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* IF A VIDEO IS STILL NOT RESPONSIVE and it turns out the iframe has no
   aspect-ratio wrapper at all, uncomment this. Do NOT enable it at the same
   time as a working wrapper: height:auto would fight the wrapper's height:100%.

.cgcf-course-page .entry-content iframe[src*="vimeo"],
.cgcf-course-page .entry-content iframe[src*="youtube"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
*/

/* --- Course hero (printed by inc/cgcf-course-page.php) --------------------- */
/* The hero is a light panel, not a dark band: this design system is white and
   pale teal throughout, and a dark hero would read as a different site.

   Note the doubled class on every selector. The hero carries both .cgcf and
   .cgcf-coursehero so it can reuse the button styles, which means the generic
   `.cgcf h1` rule would otherwise out-specify a single-class title rule. */
.cgcf.cgcf-coursehero { margin: 0 0 40px; padding: 34px 36px 36px; background: var(--cgcf-bg-soft); border: 1px solid var(--cgcf-line); border-left: 4px solid var(--cgcf-teal); border-radius: 10px; color: var(--cgcf-body); font-size: 17px; }
.cgcf.cgcf-coursehero .cgcf-coursehero__eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 13px; font-weight: 700; color: var(--cgcf-teal-ink); margin: 0 0 16px; font-family: var(--cgcf-sans); }
.cgcf.cgcf-coursehero .cgcf-coursehero__rule { width: 52px; height: 4px; background: var(--cgcf-teal); border-radius: 2px; margin: 0 0 20px; }
.cgcf.cgcf-coursehero h1.cgcf-coursehero__title { font-family: var(--cgcf-display); font-weight: 400; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: .5px; color: var(--cgcf-ink); margin: 0; }
.cgcf.cgcf-coursehero .cgcf-coursehero__standfirst { font-family: var(--cgcf-sans); font-size: 19px; line-height: 1.55; color: var(--cgcf-body); margin: 18px 0 0; max-width: 640px; }
.cgcf.cgcf-coursehero .cgcf-coursehero__cta { margin: 28px 0 0; }
.cgcf.cgcf-coursehero .btn { font-family: var(--cgcf-display); font-size: 21px; letter-spacing: .6px; line-height: 1; text-decoration: none; padding: 16px 34px; border-radius: 4px; display: inline-block; }
@media (max-width: 700px) {
  .cgcf.cgcf-coursehero { padding: 28px 22px 30px; }
}

/* --- Enrolment / status box ----------------------------------------------- */
.learndash-wrapper .ld-course-status {
  background: #fff;
  border: 1px solid var(--cgcf-line);
  border-top: 3px solid var(--cgcf-teal);
  border-radius: 10px;
  padding: 26px 28px;
  box-shadow: 0 8px 24px rgba(43,50,67,.06);
}
.learndash-wrapper .ld-course-status .ld-course-status-segment { padding: 0 22px 0 0; }
.learndash-wrapper .ld-course-status .ld-status-label,
.learndash-wrapper .ld-course-status-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cgcf-muted);
}
.learndash-wrapper .ld-course-status .ld-course-status-content,
.learndash-wrapper .ld-course-status-price-value,
.learndash-wrapper .ld-course-status .ld-status {
  font-family: var(--cgcf-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--cgcf-ink);
}
/* LearnDash's own status pills. Keep the shape, swap the palette. */
.learndash-wrapper .ld-status.ld-status-unlocked,
.learndash-wrapper .ld-status.ld-status-progress { background: var(--cgcf-teal-soft); color: var(--cgcf-teal-ink); }
.learndash-wrapper .ld-status.ld-status-complete { background: rgba(68,77,98,.10); color: var(--cgcf-teal); }

/* --- Buttons -------------------------------------------------------------- */
.learndash-wrapper .ld-button,
.learndash-wrapper .btn-join,
.learndash-wrapper #btn-join,
.learndash-wrapper .learndash_mark_complete_button,
.learndash-wrapper input.learndash_mark_complete_button,
.learndash-wrapper input[type="submit"].btn-join {
  background-color: var(--cgcf-btn);
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-family: var(--cgcf-display);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: .5px;
  line-height: 1;
  padding: 15px 32px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background-color .18s ease, transform .18s ease;
}
.learndash-wrapper .ld-button:hover,
.learndash-wrapper .btn-join:hover,
.learndash-wrapper #btn-join:hover,
.learndash-wrapper .learndash_mark_complete_button:hover,
.learndash-wrapper input.learndash_mark_complete_button:hover {
  background-color: var(--cgcf-btn-dark);
  color: #fff;
  transform: translateY(-1px);
}
.learndash-wrapper .ld-button.ld-button-transparent,
.learndash-wrapper .ld-button.ld-button-reverse {
  color: var(--cgcf-teal);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--cgcf-teal);
  border: 0;
}
.learndash-wrapper .ld-button.ld-button-transparent:hover,
.learndash-wrapper .ld-button.ld-button-reverse:hover {
  background: var(--cgcf-teal);
  color: #fff;
}
a.learndash-resume-button input[type="submit"] {
  color: #fff;
  font-size: 16px;
  background-color: var(--cgcf-btn);
  font-weight: bold;
  width: 100%;
  border: 1px solid #fff;
  padding: 15px 32px;
  text-align: center;
}

/* --- Progress ------------------------------------------------------------- */
.learndash-wrapper .ld-progress-bar { background-color: rgba(68,77,98,.12); border-radius: 999px; overflow: hidden; }
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage { background-color: var(--cgcf-teal); }
.learndash-wrapper .ld-progress-heading,
.learndash-wrapper .ld-progress-stats { font-size: 13px; color: var(--cgcf-muted); }

/* --- "Course Content" heading --------------------------------------------- */
.learndash-wrapper .ld-item-list .ld-section-heading h2,
.learndash-wrapper .ld-item-list-section-heading h2 {
  font-family: var(--cgcf-display);
  font-weight: 400;
  font-size: 32px;
  letter-spacing: .4px;
  color: var(--cgcf-ink);
}
.learndash-wrapper .ld-item-list-item-expanded .ld-item-list-item-preview { border: 0; }

/* --- The lesson list ------------------------------------------------------
   Rows become cards, numbered with a CSS counter so the sequence reads at a
   glance without touching LearnDash's markup. */
.learndash-wrapper .ld-item-list .ld-item-list-items { counter-reset: cgcflesson; }

.learndash-wrapper .ld-item-list-item {
  background: #fff;
  border: 1px solid var(--cgcf-line);
  border-left: 3px solid transparent;
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.learndash-wrapper .ld-item-list-item:hover {
  border-left-color: var(--cgcf-teal);
  box-shadow: 0 8px 22px rgba(43,50,67,.08);
  transform: translateY(-1px);
}
.learndash-wrapper .ld-item-list-item .ld-item-name,
.learndash-wrapper .ld-item-list-item a.ld-item-name { padding: 20px 24px; }
.learndash-wrapper .ld-item-list-item .ld-item-title {
  font-family: var(--cgcf-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--cgcf-ink);
}
.learndash-wrapper .ld-item-list-item .ld-item-title::before {
  counter-increment: cgcflesson;
  content: counter(cgcflesson) ".";
  font-family: var(--cgcf-display);
  font-size: 18px;
  color: var(--cgcf-teal-ink);
  margin-right: 10px;
  letter-spacing: .5px;
}
.learndash-wrapper .ld-item-list-item .ld-item-details,
.learndash-wrapper .ld-item-list-item .ld-item-component { font-size: 13px; color: var(--cgcf-muted); }
.learndash-wrapper .ld-status-icon { color: var(--cgcf-teal-ink); }
.learndash-wrapper .ld-status-icon.ld-status-complete { background-color: var(--cgcf-teal); border-color: var(--cgcf-teal); }

/* --- Notices --------------------------------------------------------------
   A logged-out visitor sees "You don't currently have access to this content"
   repeated on every lesson. Kept, because it is true, but made quiet: the lock
   icon and the enrolment box already carry the message loudly enough.
   To remove them entirely, add:  .learndash-wrapper .ld-alert { display: none; } */
.learndash-wrapper .ld-alert,
.learndash-wrapper .ld-alert-warning {
  background: var(--cgcf-bg-soft);
  border: 1px solid var(--cgcf-line);
  border-left: 3px solid var(--cgcf-teal);
  border-radius: 6px;
  color: var(--cgcf-muted);
  font-size: 14px;
  padding: 12px 16px;
  margin: 0 24px 18px;
}
.learndash-wrapper .ld-alert .ld-alert-icon { color: var(--cgcf-teal-ink); background: none; }

/* --- Tabs (LearnDash 4.x) ------------------------------------------------- */
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab {
  font-family: var(--cgcf-display);
  font-size: 19px;
  letter-spacing: .5px;
  color: var(--cgcf-muted);
  border-bottom: 3px solid transparent;
}
.learndash-wrapper .ld-tabs .ld-tabs-navigation .ld-tab.ld-active {
  color: var(--cgcf-ink);
  border-bottom-color: var(--cgcf-teal);
}

/* --- Lesson navigation ---------------------------------------------------- */
.learndash-wrapper .ld-content-actions { border-top: 1px solid var(--cgcf-line); padding-top: 24px; }
.learndash-wrapper .ld-content-action a { color: var(--cgcf-teal-ink); font-weight: 700; text-decoration: none; }
.learndash-wrapper .ld-content-action a:hover { color: var(--cgcf-teal); }


/* =============================================================================
   5. UPSELL / MEMBERSHIP CARD
   Drop the matching HTML into a widget or block in the course sidebar.
   ============================================================================= */
.cgcf-upgrade { background: var(--cgcf-teal); color: #fff; border-radius: 10px; padding: 26px 22px; text-align: center; }
.cgcf-upgrade h4 { font-family: var(--cgcf-display); font-weight: 400; font-size: 25px; letter-spacing: .5px; line-height: 1.05; margin: 0 0 10px; color: #fff; }
.cgcf-upgrade p { font-size: 14px; line-height: 1.55; margin: 0 0 18px; color: rgba(255,255,255,.92); }
.cgcf-upgrade .cgcf-upgrade-btn { display: inline-block; background: var(--cgcf-teal); color: #2b3243; font-family: var(--cgcf-display); font-size: 19px; letter-spacing: .5px; text-decoration: none; padding: 12px 28px; border-radius: 4px; transition: background-color .18s ease; }
.cgcf-upgrade .cgcf-upgrade-btn:hover { background: #f7b163; color: #2b3243; }


/* =============================================================================
   6. BRANDED LOGIN  ([cgcf_login] on the /login/ page)
   ============================================================================= */
.cgcf-login { max-width: 460px; margin: 60px auto; padding: 0 20px; font-family: var(--cgcf-sans); }
.cgcf-login-card { background: #fff; border: 1px solid var(--cgcf-line); border-radius: 12px; padding: 40px 34px; box-shadow: 0 14px 40px rgba(68,77,98,.08); text-align: center; }
.cgcf-login-logo { height: 42px; width: auto; margin: 0 auto 22px; display: block; }
.cgcf-login-card h2 { font-family: var(--cgcf-display); font-weight: 400; font-size: 38px; letter-spacing: .5px; color: var(--cgcf-ink); margin: 0 0 6px; }
.cgcf-login-sub { font-size: 16px; color: var(--cgcf-muted); margin: 0 0 24px; }
.cgcf-login #loginform { text-align: left; }
.cgcf-login #loginform p { margin: 0 0 16px; }
.cgcf-login #loginform label { display: block; font-size: 14px; font-weight: 700; color: var(--cgcf-ink); margin-bottom: 6px; }
.cgcf-login #loginform input[type="text"],
.cgcf-login #loginform input[type="password"] { width: 100%; padding: 14px 16px; font-size: 16px; color: var(--cgcf-ink); border: 1px solid var(--cgcf-line); border-radius: 6px; background: #fff; box-sizing: border-box; }
.cgcf-login #loginform input[type="text"]:focus,
.cgcf-login #loginform input[type="password"]:focus { outline: none; border-color: var(--cgcf-teal); box-shadow: 0 0 0 3px var(--cgcf-teal-soft); }
.cgcf-login .login-remember { font-size: 14px; color: var(--cgcf-body); }
.cgcf-login .login-remember label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.cgcf-login #wp-submit { width: 100%; background: var(--cgcf-btn); color: #fff; font-family: var(--cgcf-display); font-size: 22px; letter-spacing: .6px; border: 0; border-radius: 4px; padding: 16px; cursor: pointer; margin-top: 4px; transition: background-color .18s ease; }
.cgcf-login #wp-submit:hover { background: var(--cgcf-btn-dark); }
.cgcf-login-links { margin-top: 18px; }
.cgcf-login-links a, .cgcf-login-new a { color: var(--cgcf-teal-ink); font-weight: 700; text-decoration: none; }
.cgcf-login-links a:hover, .cgcf-login-new a:hover { text-decoration: underline; }
.cgcf-login-new { font-size: 14px; color: var(--cgcf-muted); margin-top: 14px; }
.cgcf-login-go { display: inline-block; background: var(--cgcf-btn); color: #fff; font-family: var(--cgcf-display); font-size: 20px; letter-spacing: .5px; text-decoration: none; padding: 13px 30px; border-radius: 4px; }
.cgcf-login-go:hover { background: var(--cgcf-btn-dark); color: #fff; }
.cgcf-login-alt { margin-top: 24px; border-top: 1px solid #eef0f3; padding-top: 18px; text-align: left; }
.cgcf-login-alt summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--cgcf-teal-ink); list-style: none; }
.cgcf-login-alt summary::-webkit-details-marker { display: none; }
.cgcf-login-alt[open] summary { margin-bottom: 14px; }


/* =============================================================================
   7. PDF DOWNLOAD CARD  ([cgcf_pdf url="..." title="..."])
   ============================================================================= */
.cgcf-pdfcard { display: flex; align-items: center; gap: 22px; max-width: 680px; margin: 30px 0; padding: 22px 24px; background: #fff; border: 1px solid var(--cgcf-line); border-radius: 12px; box-shadow: 0 6px 20px rgba(68,77,98,.08); font-family: var(--cgcf-sans); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.cgcf-pdfcard:hover { box-shadow: 0 12px 30px rgba(68,77,98,.16); border-color: #cfd4de; transform: translateY(-2px); }
.cgcf-pdfcard__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 10px; background: var(--cgcf-teal-soft); color: var(--cgcf-teal-ink); }
.cgcf-pdfcard__icon svg { width: 28px; height: 28px; display: block; }
.cgcf-pdfcard__body { flex: 1 1 auto; min-width: 0; }
.cgcf-pdfcard__title { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--cgcf-ink); }
.cgcf-pdfcard__meta { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: #9aa1ad; }
.cgcf-pdfcard__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; text-decoration: none !important; background: var(--cgcf-btn); color: #fff !important; font-family: var(--cgcf-display); font-size: 20px; letter-spacing: .5px; line-height: 1; padding: 14px 26px; border-radius: 6px; box-shadow: 0 6px 16px var(--cgcf-shadow); transition: background-color .18s ease, transform .18s ease; white-space: nowrap; }
.cgcf-pdfcard__btn:hover { background: var(--cgcf-btn-dark); color: #fff !important; text-decoration: none !important; transform: translateY(-1px); }
.cgcf-pdfcard__btn svg { width: 18px; height: 18px; display: block; }
@media (max-width: 540px) {
  .cgcf-pdfcard { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .cgcf-pdfcard__btn { width: 100%; justify-content: center; }
}


/* =============================================================================
   8. MAGIC-LINK SIGNUP + SET PASSWORD
   Styles the [cgcf_signup] and [cgcf_set_password] shortcodes. The landing page
   uses its own form markup (section 3); these apply where the shortcode is
   dropped into an ordinary page, such as the login card.
   ============================================================================= */
.cgcf-signup, .cgcf-setpw { max-width: 460px; font-family: var(--cgcf-sans); }
.cgcf-signup form, .cgcf-setpw form { display: flex; flex-direction: column; gap: 14px; }
.cgcf-signup-heading { font-family: var(--cgcf-display); font-weight: 400; font-size: 30px; letter-spacing: .5px; color: var(--cgcf-ink); margin: 0 0 12px; }
.cgcf-field label { display: block; font-size: 14px; font-weight: 700; color: var(--cgcf-ink); margin-bottom: 6px; }
.cgcf-field input { width: 100%; padding: 14px 16px; font-size: 16px; color: var(--cgcf-ink); border: 1px solid var(--cgcf-line); border-radius: 6px; background: #fff; box-sizing: border-box; }
.cgcf-field input:focus { outline: none; border-color: var(--cgcf-teal); box-shadow: 0 0 0 3px var(--cgcf-teal-soft); }
.cgcf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cgcf-submit { background: var(--cgcf-btn); color: #fff; font-family: var(--cgcf-display); font-size: 22px; letter-spacing: .6px; border: 0; border-radius: 4px; padding: 16px; cursor: pointer; transition: background-color .18s ease; }
.cgcf-submit:hover { background: var(--cgcf-btn-dark); }
.cgcf-note { font-size: 14px; color: var(--cgcf-muted); margin: 10px 0 0; }
.cgcf-alert { background: #fff4f4; border: 1px solid #f3c9c9; color: #a23b3b; border-radius: 6px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.cgcf-ok { background: #f0fbf4; border: 1px solid #c7e8d2; color: #2f7a4a; border-radius: 6px; padding: 12px 14px; font-size: 14px; margin-bottom: 14px; }
.cgcf-signup--sent { background: var(--cgcf-bg-soft); border: 1px solid #d4e9ee; border-radius: 10px; padding: 28px 26px; text-align: center; }
.cgcf-signup--sent h3 { font-family: var(--cgcf-display); font-weight: 400; font-size: 30px; letter-spacing: .5px; color: var(--cgcf-ink); margin: 0 0 6px; }
.cgcf-signup--sent p { font-size: 16px; color: var(--cgcf-body); margin: 0; }


/* =============================================================================
   9. PLUGIN ODDS AND ENDS
   ============================================================================= */

/* Hide the reCAPTCHA v3 badge. Keep the required attribution text somewhere on
   the site (the landing page footer carries it) if you hide the badge. */
.grecaptcha-badge { visibility: hidden; }