/* =============================================================================
   CGC Fundamentals — Component Styles
   -----------------------------------------------------------------------------
   Slim by design. The Academy look (fonts, headings, colours, base button
   styles) comes from the imported Avada theme options, NOT from this file.
   This file holds only:
     1. Brand tokens (for any custom CSS we add here).
     2. The small set of plugin overrides that actually apply on this install.
     3. Placeholder sections for the landing page, lesson tweaks and upsell,
        to be filled in as those pages are built.
   ============================================================================= */


/* =============================================================================
   1. BRAND TOKENS
   Only the values confirmed from the Academy stylesheet are defined here.
   The rest of the palette/typography lives in Avada theme options.
   ============================================================================= */
:root {
  --cgc-teal: #1f9ab6;   /* CGC brand teal (buttons, accents) */
  --cgc-body: #444444;   /* body copy grey used on the Academy */
}


/* =============================================================================
   2. PLUGIN OVERRIDES (carried from the Academy, scoped to what exists here)
   ============================================================================= */

/* LearnDash "resume course" button — match the Academy's teal treatment. */
a.learndash-resume-button input[type="submit"] {
  color: #fff;
  font-size: 16px;
  background-color: var(--cgc-teal);
  font-weight: bold;
  width: 100%;
  border: 1px solid #fff;
  padding: 15px 32px;
  text-align: center;
}

/* Hide the reCAPTCHA v3 badge once it's on the registration form.
   NOTE: keep the required reCAPTCHA attribution text somewhere on the site
   (e.g. in the footer or privacy policy) if you hide the badge. */
.grecaptcha-badge {
  visibility: hidden;
}


/* =============================================================================
   3. LANDING PAGE — header (logo + Start / Log in)
   Self-contained: literal Bebas + teal, no theme tokens, so it can't fail on a
   missing variable. Selector is .site-head with the <a> element included, which
   (a) matches your real markup with no .cgcf wrapper, and (b) outranks any old
   .head-login rule still sitting in Avada Custom CSS, so it wins regardless of
   load order. You can delete the old header rules from Custom CSS, but you don't
   have to.
   ============================================================================= */
.site-head { border-bottom: 1px solid #e4eaeb; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; }
.site-head .head-nav { display: flex; align-items: center; }
.site-head a.head-cta {
  font-family: "Bebas Neue", "Oswald", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .5px;
  color: #1f9ab6;
  text-decoration: none;
  margin-right: 22px;
}
.site-head a.head-cta:hover { color: #16788f; }

/* Log in: teal text link, matching the Start link */
.site-head a.head-login {
  font-family: "Bebas Neue", "Oswald", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .5px;
  color: #1f9ab6;
  text-decoration: none;
}
.site-head a.head-login:hover { color: #16788f; }

/* Mobile: drop the Start link, keep the Log in button. */
@media (max-width: 860px) {
  .site-head a.head-cta { display: none; }
}


/* =============================================================================
   4. LESSON PAGE — LearnDash brand pass
   Scoped to .learndash-wrapper (LearnDash's own container) so it only touches
   LearnDash output. Pair with the accent colour set in LearnDash LMS → Settings:
   that handles native colour, this handles shape + type to match the site.
   Conservative on purpose — buttons and progress only. Lesson-list and title
   styling comes next, once we target the real markup.
   ============================================================================= */

/* Primary buttons: Mark Complete, Next, generic ld-button */
.learndash-wrapper .ld-button,
.learndash-wrapper .learndash_mark_complete_button,
.learndash-wrapper input.learndash_mark_complete_button {
  background-color: #1f9ab6;
  border-color: #1f9ab6;
  border-radius: 4px;
  font-family: "Bebas Neue", "Oswald", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: .5px;
}
.learndash-wrapper .ld-button:hover,
.learndash-wrapper .learndash_mark_complete_button:hover {
  background-color: #16788f;
  border-color: #16788f;
}

/* Secondary / outline buttons keep teal as the accent */
.learndash-wrapper .ld-button.ld-button-transparent {
  color: #1f9ab6;
  border-color: #1f9ab6;
  background: transparent;
  border-radius: 4px;
  font-family: "Bebas Neue", "Oswald", sans-serif;
  letter-spacing: .5px;
}
.learndash-wrapper .ld-button.ld-button-transparent:hover {
  background: #1f9ab6;
  color: #fff;
}

/* Progress bar fill */
.learndash-wrapper .ld-progress-bar .ld-progress-bar-percentage {
  background-color: #1f9ab6;
}


/* =============================================================================
   5. UPSELL / ACADEMY CTA
   Sidebar card nudging students toward the Academy. Drop the matching HTML
   into a "Custom HTML" widget in the course sidebar.
   ============================================================================= */
.cgcf-upgrade {
  background: var(--cgc-teal);
  color: #fff;
  border-radius: 10px;
  padding: 26px 22px;
  text-align: center;
}
.cgcf-upgrade h4 {
  font-family: "Bebas Neue", "Oswald", sans-serif;
  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: #fff;
  color: var(--cgc-teal);
  font-family: "Bebas Neue", "Oswald", sans-serif;
  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: #effafc; }


/* =============================================================================
   6. BRANDED LOGIN  ([cgcf_login] on the /login/ page)
   ============================================================================= */
.cgcf-login { max-width: 460px; margin: 60px auto; padding: 0 20px; font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; }
.cgcf-login-card { background: #fff; border: 1px solid #e4eaeb; border-radius: 12px; padding: 40px 34px; box-shadow: 0 14px 40px rgba(38,43,45,.06); text-align: center; }
.cgcf-login-logo { height: 42px; width: auto; margin: 0 auto 22px; display: block; }
.cgcf-login-card h2 { font-family: "Bebas Neue", "Oswald", sans-serif; font-weight: 400; font-size: 38px; letter-spacing: .5px; color: #262b2d; margin: 0 0 6px; }
.cgcf-login-sub { font-size: 16px; color: #6c7a7d; 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: #262b2d; margin-bottom: 6px; }
.cgcf-login #loginform input[type="text"],
.cgcf-login #loginform input[type="password"] { width: 100%; padding: 14px 16px; font-size: 16px; color: #262b2d; border: 1px solid #e4eaeb; 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(--cgc-teal); box-shadow: 0 0 0 3px rgba(31,154,182,.18); }
.cgcf-login .login-remember { font-size: 14px; color: #444; }
.cgcf-login .login-remember label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.cgcf-login #wp-submit { width: 100%; background: var(--cgc-teal); color: #fff; font-family: "Bebas Neue", "Oswald", sans-serif; 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: #16788f; }
.cgcf-login-links { margin-top: 18px; }
.cgcf-login-links a, .cgcf-login-new a { color: var(--cgc-teal); 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: #6c7a7d; margin-top: 14px; }
.cgcf-login-go { display: inline-block; background: var(--cgc-teal); color: #fff; font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 20px; letter-spacing: .5px; text-decoration: none; padding: 13px 30px; border-radius: 4px; }
.cgcf-login-go:hover { background: #16788f; }
.cgcf-login-alt { margin-top: 24px; border-top: 1px solid #eef3f4; padding-top: 18px; text-align: left; }
.cgcf-login-alt summary { cursor: pointer; font-size: 14px; font-weight: 700; color: var(--cgc-teal); 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="..."])
   Branded, title-only download card for lesson resources. No gating.
   ============================================================================= */
.cgcf-pdfcard { display: flex; align-items: center; gap: 22px; max-width: 680px; margin: 30px 0; padding: 22px 24px; background: #fff; border: 1px solid #e2eaec; border-radius: 12px; box-shadow: 0 6px 20px rgba(31,154,182,.08); font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.cgcf-pdfcard:hover { box-shadow: 0 12px 30px rgba(31,154,182,.16); border-color: #cfe6ec; 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: rgba(31,154,182,.10); color: var(--cgc-teal); }
.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: #1f2b2e; }
.cgcf-pdfcard__meta { display: block; margin-top: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: #9aa7ab; }
.cgcf-pdfcard__btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; text-decoration: none !important; background: var(--cgc-teal); color: #fff !important; font-family: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif; font-size: 20px; letter-spacing: .5px; line-height: 1; padding: 14px 26px; border-radius: 6px; box-shadow: 0 6px 16px rgba(31,154,182,.28); transition: background-color .18s ease, transform .18s ease; white-space: nowrap; }
.cgcf-pdfcard__btn:hover { background: #16788f; 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
   [cgcf_signup] request form, its sent/error states, and [cgcf_set_password].
   ============================================================================= */
.cgcf-signup, .cgcf-setpw { max-width: 460px; font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; }
.cgcf-signup form, .cgcf-setpw form { display: flex; flex-direction: column; gap: 14px; }
.cgcf-signup-heading { font-family: "Bebas Neue", "Oswald", sans-serif; font-weight: 400; font-size: 30px; letter-spacing: .5px; color: #262b2d; margin: 0 0 12px; }
.cgcf-field label { display: block; font-size: 14px; font-weight: 700; color: #262b2d; margin-bottom: 6px; }
.cgcf-field input { width: 100%; padding: 14px 16px; font-size: 16px; color: #262b2d; border: 1px solid #e4eaeb; border-radius: 6px; background: #fff; box-sizing: border-box; }
.cgcf-field input:focus { outline: none; border-color: var(--cgc-teal); box-shadow: 0 0 0 3px rgba(31,154,182,.18); }
.cgcf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cgcf-submit { background: var(--cgc-teal); color: #fff; font-family: "Bebas Neue", "Oswald", sans-serif; font-size: 22px; letter-spacing: .6px; border: 0; border-radius: 4px; padding: 16px; cursor: pointer; transition: background-color .18s ease; }
.cgcf-submit:hover { background: #16788f; }
.cgcf-note { font-size: 14px; color: #6c7a7d; 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: #f5fafb; border: 1px solid #d4e9ee; border-radius: 10px; padding: 28px 26px; text-align: center; }
.cgcf-signup--sent h3 { font-family: "Bebas Neue", "Oswald", sans-serif; font-weight: 400; font-size: 30px; letter-spacing: .5px; color: #262b2d; margin: 0 0 6px; }
.cgcf-signup--sent p { font-size: 16px; color: #444; margin: 0; }