/*
Theme Name: Q Lab Academy Child
Template: kadence
Version: 1.3.1
Description: Child theme of Kadence for Q Lab Academy. Holds brand tokens, fonts, and site-wide overrides so the design system survives any Kadence update.
Author: Q Lab Academy
Author URI: https://qlabacademy.com
Text Domain: qlab-academy-child
*/

/* ─────────────────────────────────────────
   1. Site-wide typography — tokens.css vars
   ───────────────────────────────────────── */

body,
.entry-content,
p {
  font-family: var(--font-body);
  line-height: var(--lh-body);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
  font-family: var(--font-display);
  line-height: var(--lh-snug);
}

code, pre, kbd, samp,
.wp-block-code {
  font-family: var(--font-mono);
}


/* ─────────────────────────────────────────
   2. Brand utility classes
   ───────────────────────────────────────── */

.qlab-mono-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qlab-arc-text {
  background: var(--arc-forward);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.qlab-arc-bg      { background: var(--arc-forward); }
.qlab-arc-dark-bg { background: var(--arc-dark); }


/* ─────────────────────────────────────────
   3. Header — site-wide logo size + title hide
   (was previously scoped to home-page HTML block; now applies everywhere)
   ───────────────────────────────────────── */

.site-branding img.custom-logo,
.site-header img.custom-logo {
  max-height: 48px !important;
  height: 48px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain;
}

.site-header .site-title,
.site-header .site-branding-wrap .site-title,
.site-header-inner-wrap .site-title { display: none !important; }

.site-branding a,
.site-header-main-logo-container a {
  display: inline-flex;
  align-items: center;
}


/* ─────────────────────────────────────────
   4. Hide the default entry-header banner on
      ALL public pages (the mock never uses
      WP's default page-title banner). Posts
      + archive pages keep theirs.
   ───────────────────────────────────────── */

body.page:not(.archive):not(.blog):not(.search) .entry-header,
body.page:not(.archive):not(.blog):not(.search) .entry-title,
.page-id-126 .entry-header,
.page-id-126 .entry-title { display: none !important; }


/* ─────────────────────────────────────────
   5. Hero "Supported by" logo strip
   ───────────────────────────────────────── */

.qlab-hero-logo {
  height: 44px !important;
  max-height: 44px !important;
  width: auto !important;
  max-width: 160px;
  opacity: 0.78;
  filter: grayscale(20%);
}
.qlab-hero-logo:hover {
  opacity: 1;
  filter: none;
}


/* ─────────────────────────────────────────
   6. Calendar + session status chips
   ───────────────────────────────────────── */

.qlab-session-duration::after {
  content: " days";
  color: #7D8C9A;
}

.qlab-session-status[data-status="open"]       { color: #047857 !important; background: #D1FAE5 !important; }
.qlab-session-status[data-status="last-seats"] { color: #9A3412 !important; background: #FED7AA !important; }
.qlab-session-status[data-status="waitlist"]   { color: #78350F !important; background: #FEF3C7 !important; }
.qlab-session-status[data-status="full"]       { color: #991B1B !important; background: #FEE2E2 !important; }
.qlab-session-status[data-status="closed"]     { color: #1F2937 !important; background: #E5E7EB !important; }
.qlab-session-status[data-status="cancelled"]  { color: #1F2937 !important; background: #E5E7EB !important; text-decoration: line-through; }


/* ─────────────────────────────────────────
   7. Course card hover
   ───────────────────────────────────────── */

.qlab-course-card {
  transition:
    transform 250ms cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 250ms;
}
.qlab-course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(14, 20, 27, 0.08);
}
.qlab-course-price { letter-spacing: -0.01em; }


/* ─────────────────────────────────────────
   8. Section-wrapper alignment fixes
   (centre alignwide children in alignfull sections)
   ───────────────────────────────────────── */

.qlab-hero-wrap .alignwide,
.qlab-why .alignwide,
.qlab-courses .alignwide,
.qlab-trainer .alignwide,
.qlab-calendar .alignwide,
.qlab-evidence-wrap .alignwide,
.qlab-cta .alignwide {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: min(1280px, 100%);
}

.qlab-hero-wrap > .wp-block-group__inner-container,
.qlab-evidence-wrap > .wp-block-group__inner-container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.qlab-why > .wp-block-group__inner-container,
.qlab-courses > .wp-block-group__inner-container,
.qlab-trainer > .wp-block-group__inner-container,
.qlab-calendar > .wp-block-group__inner-container,
.qlab-cta > .wp-block-group__inner-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}


/* ─────────────────────────────────────────
   9. Page container escape — let HTML blocks
      go edge-to-edge on every Page.
   ───────────────────────────────────────── */
body.page:not(.archive):not(.blog):not(.search) .entry-content,
body.page:not(.archive):not(.blog):not(.search) .content-container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.page:not(.archive):not(.blog):not(.search) .entry-content > * {
  max-width: none !important;
}

/* ─────────────────────────────────────────
   10. Single-course template — light / dark
       text-color fixes for Kadence overrides
   ───────────────────────────────────────── */
.qlab-course-title,
.qlab-course-hero h1 {
  color: #fff !important;
}
.qlab-course-hero .qlab-course-badges .qlab-course-badge {
  color: rgba(255, 255, 255, 0.92);
}
.qlab-course-hero .qlab-course-breadcrumb span,
.qlab-course-hero .qlab-course-breadcrumb {
  color: rgba(255, 255, 255, 0.65);
}
.qlab-course-overview h2.qlab-section-title,
.qlab-course-outcomes h2.qlab-section-title,
.qlab-course-sessions h2.qlab-section-title,
.qlab-course-related h2.qlab-section-title {
  color: #141D24 !important;
}
.qlab-course-cta h2 {
  color: #fff !important;
}


/* ─────────────────────────────────────────
   11. Course-card tag row — preserve native
       casing of the cert body ("TMMi" not "TMMI").
       The row previously forced uppercase via
       text-transform, which stripped the small i.
   ───────────────────────────────────────── */
.qlab-cat-card-tags,
.qlab-course-card .tag-row {
  text-transform: none;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────
   12. Fluent Forms — align with Q Lab card aesthetic
       (rounded inputs, teal focus ring, arc-gradient submit)
   ───────────────────────────────────────── */
.qlab-reg-form .ff-el-input--content,
.qlab-reg-form .ff-el-form-control,
.qlab-reg-form input[type=text],
.qlab-reg-form input[type=email],
.qlab-reg-form input[type=tel],
.qlab-reg-form input[type=number],
.qlab-reg-form textarea,
.qlab-reg-form select {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 1rem !important;
  color: #141D24 !important;
  background: #fff !important;
  border: 1px solid #D1D8E0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  transition: border-color 150ms, box-shadow 150ms !important;
  width: 100% !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.qlab-reg-form textarea { min-height: 120px !important; resize: vertical !important; }
.qlab-reg-form select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%235A6B78' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}
.qlab-reg-form input:focus,
.qlab-reg-form textarea:focus,
.qlab-reg-form select:focus {
  outline: none !important;
  border-color: #0D9489 !important;
  box-shadow: 0 0 0 3px rgba(13,148,137,0.18) !important;
}
.qlab-reg-form label,
.qlab-reg-form .ff-el-input--label label {
  display: block !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 600 !important;
  color: #2C3A46 !important;
  font-size: 0.93rem !important;
  margin-bottom: 6px !important;
}
.qlab-reg-form .ff-el-is-required .ff-el-input--label label::after,
.qlab-reg-form .required > label::after {
  color: #C4237E !important;
  font-weight: 700 !important;
}
/* Section heading break */
.qlab-reg-form .ff_custom_section_break,
.qlab-reg-form .ff-section-break {
  border: 0 !important;
  border-top: 1px solid #E8ECF0 !important;
  padding-top: 24px !important;
  margin-top: 24px !important;
}
.qlab-reg-form .ff-section-break h2,
.qlab-reg-form .ff-section-break h3,
.qlab-reg-form .ff_custom_section_break h2,
.qlab-reg-form .ff_custom_section_break h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #141D24 !important;
  margin: 0 0 6px !important;
}
.qlab-reg-form .ff-section-break p,
.qlab-reg-form .ff_custom_section_break p {
  font-size: 0.92rem !important;
  color: #5A6B78 !important;
  margin: 0 0 16px !important;
}
/* Submit button — arc-gradient */
.qlab-reg-form button[type=submit],
.qlab-reg-form .ff-btn-submit {
  background: var(--arc-forward) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  padding: 14px 28px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: transform 150ms !important;
}
.qlab-reg-form button[type=submit]:hover,
.qlab-reg-form .ff-btn-submit:hover { transform: translateY(-1px); }
/* Error + help states */
.qlab-reg-form .ff-el-form-help,
.qlab-reg-form .ff-el-input--help { font-size: 0.82rem !important; color: #7D8C9A !important; margin-top: 4px !important; }
.qlab-reg-form .error-message,
.qlab-reg-form .ff-el-is-error .text-danger { color: #C4237E !important; font-size: 0.82rem !important; font-weight: 600 !important; }

/* Contact form 7 — same treatment (in .qlab-contact-form scope) */
.qlab-contact-form input[type=text],
.qlab-contact-form input[type=email],
.qlab-contact-form input[type=tel],
.qlab-contact-form textarea,
.qlab-contact-form select {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 1rem !important;
  color: #141D24 !important;
  border: 1px solid #D1D8E0 !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  width: 100% !important;
}
.qlab-contact-form input:focus,
.qlab-contact-form textarea:focus,
.qlab-contact-form select:focus {
  outline: none !important;
  border-color: #0D9489 !important;
  box-shadow: 0 0 0 3px rgba(13,148,137,0.18) !important;
}
.qlab-contact-form label {
  display: block !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 600 !important;
  color: #2C3A46 !important;
  font-size: 0.93rem !important;
  margin-bottom: 6px !important;
}
.qlab-contact-form .wpcf7-submit {
  background: var(--arc-forward) !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  padding: 14px 28px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  width: auto !important;
}


/* ─────────────────────────────────────────
   13. Reduced motion safety
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}