/*
Theme Name:     SN Academy (Kadence Child)
Theme URI:      https://snacademy.com.au
Description:    Child theme for SN Academy site, built on Kadence. Houses all site-wide custom CSS (nav, hero, blog, course pages, lesson sidebar). Survives Kadence updates.
Author:         SN Academy
Template:       kadence
Version:        1.0.1
Text Domain:    sna-kadence-child
*/

/* =========================================================
   1. Dark nav background to match brand
   ========================================================= */
.site-header,
.site-header .header-wrap {
  background-color: #1a2e44 !important;
}
.site-header .header-nav-wrap,
.site-header .site-branding {
  background-color: #1a2e44 !important;
}
#primary-menu > li > a,
.header-navigation .nav-menu > li > a {
  color: #fff !important;
}

/* =========================================================
   2. Force white headings inside dark hero sections
   ========================================================= */
[style*="background:linear-gradient(135deg,#1a2e44"] h1,
[style*="background:linear-gradient(135deg, #1a2e44"] h1,
[style*="background:linear-gradient(135deg,#1a2e44"] h2,
[style*="background:linear-gradient(135deg, #1a2e44"] h2,
[style*="background:#1a2e44"] h1,
[style*="background:#1a2e44"] h2,
[style*="background:#0d1a2a"] h1,
[style*="background:#0d1a2a"] h2 {
  color: #fff !important;
}

/* =========================================================
   3. Show My Dashboard only when logged in, Login only when logged out
   ========================================================= */
body:not(.logged-in) .menu-item-6325 { display: none !important; } /* hide My Dashboard for logged-out */
body.logged-in .menu-item-6223 { display: none !important; } /* hide Login for logged-in */

/* =========================================================
   4. Green CTA button styling — desktop scoped (My Dashboard / Login pill)
   ========================================================= */
@media (min-width: 768px) {
  #primary-menu .menu-cta-btn > a {
    background-color: #6aaf2c !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 8px 16px !important;
    margin: 0 4px;
    transition: background-color 0.2s ease;
  }
  #primary-menu .menu-cta-btn > a:hover {
    background-color: #558f24 !important;
  }
}

/* =========================================================
   5. Mobile drawer — My Dashboard as green pill button with white text
   ========================================================= */
@media (max-width: 767px) {
  #mobile-drawer .menu-cta-btn > a {
    background-color: #6aaf2c !important;
    color: #fff !important;
    border-radius: 6px;
    padding: 10px 16px !important;
    display: inline-block;
    font-weight: 600;
    margin: 4px 0;
  }
  #mobile-drawer .menu-cta-btn > a:hover {
    background-color: #558f24 !important;
  }
}

/* =========================================================
   6. Vertical divider between FAQ and LANTITE (desktop only)
   ========================================================= */
@media (min-width: 768px) {
  #primary-menu .menu-item-6495 {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: 16px;
    margin-left: 8px;
  }
}

/* =========================================================
   7. White hamburger icon on dark header
   ========================================================= */
#mobile-toggle,
.menu-toggle-open,
.mobile-toggle-open-container button,
#mobile-toggle .menu-toggle-icon,
#mobile-toggle svg {
  color: #fff !important;
  stroke: #fff !important;
}
#mobile-toggle svg path,
#mobile-toggle svg line,
#mobile-toggle svg rect {
  stroke: #fff !important;
  fill: #fff !important;
}

/* =========================================================
   8. Current/selected menu item — green text only (no background)
   ========================================================= */
@media (min-width: 768px) {
  #primary-menu > .current-menu-item > a,
  #primary-menu > .current_page_item > a,
  #primary-menu > .current-menu-ancestor > a {
    color: #6aaf2c !important;
  }
}
@media (max-width: 767px) {
  #mobile-drawer .current-menu-item > a,
  #mobile-drawer .current_page_item > a {
    color: #6aaf2c !important;
    font-weight: 600;
  }
}

/* =========================================================
   9. Thick divider above LANTITE in mobile drawer
   ========================================================= */
@media (max-width: 767px) {
  #mobile-drawer .menu-item-6495 {
    border-top: 3px solid rgba(255, 255, 255, 0.25);
    margin-top: 8px;
    padding-top: 8px;
  }
}

/* =========================================================
   10. Latest Articles cards — tighter text padding under images
   ========================================================= */
.wp-block-kadence-posts .kb-post-list-item .entry-content-wrap,
.kb-posts-id-sna-featured-posts .kb-post-list-item .entry-content-wrap {
  padding: 16px 18px 18px !important;
}

/* =========================================================
   11. Latest Articles "Read More" button — brand-styled pill
   ========================================================= */
.wp-block-kadence-posts .kb-post-list-item .post-more-link,
.kb-posts-id-sna-featured-posts .kb-post-list-item .post-more-link {
  display: inline-block;
  background-color: #1a2e44;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
  margin-top: 12px;
}
.wp-block-kadence-posts .kb-post-list-item .post-more-link:hover,
.kb-posts-id-sna-featured-posts .kb-post-list-item .post-more-link:hover {
  background-color: #6aaf2c !important;
  color: #fff !important;
}
.wp-block-kadence-posts .kb-post-list-item .more-link-wrap {
  margin-top: 8px !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   12. Blog index & archive — brand-styled Read More pills
   ========================================================= */
body.blog .loop-entry .post-more-link,
body.archive .loop-entry .post-more-link,
body.search .loop-entry .post-more-link {
  display: inline-block;
  background-color: #1a2e44;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
  margin-top: 12px;
}
body.blog .loop-entry .post-more-link:hover,
body.archive .loop-entry .post-more-link:hover,
body.search .loop-entry .post-more-link:hover {
  background-color: #6aaf2c !important;
  color: #fff !important;
}

/* =========================================================
   13. Sidebar newsletter — white text on dark navy background
   ========================================================= */
.sna-sidebar-newsletter,
.sna-sidebar-newsletter h1,
.sna-sidebar-newsletter h2,
.sna-sidebar-newsletter h3,
.sna-sidebar-newsletter h4,
.sna-sidebar-newsletter p,
.sna-sidebar-newsletter label,
.sna-sidebar-newsletter span,
.sna-sidebar-newsletter .ff-el-input--label,
.sna-sidebar-newsletter .ff-el-form-check-label,
.sna-sidebar-newsletter .ff_list_inline {
  color: #fff !important;
}

/* =========================================================
   14. Latest Articles — smaller card title font (20px not 28px)
   ========================================================= */
.wp-block-kadence-posts .kb-post-list-item h2.entry-title,
.wp-block-kadence-posts .kb-post-list-item .entry-title,
.kb-posts-id-sna-featured-posts .kb-post-list-item h2.entry-title,
.kb-posts-id-sna-featured-posts .kb-post-list-item .entry-title {
  font-size: 20px !important;
  line-height: 1.35 !important;
}
.wp-block-kadence-posts .kb-post-list-item h2.entry-title a,
.kb-posts-id-sna-featured-posts .kb-post-list-item h2.entry-title a {
  font-size: inherit !important;
}

/* =========================================================
   15. Blog index & archive — smaller card title font
   ========================================================= */
body.blog .loop-entry h2.entry-title,
body.blog .loop-entry .entry-title,
body.archive .loop-entry h2.entry-title,
body.archive .loop-entry .entry-title,
body.search .loop-entry h2.entry-title,
body.search .loop-entry .entry-title {
  font-size: 20px !important;
  line-height: 1.35 !important;
}

/* =========================================================
   16. Similar Posts (single blog post) — force the entry-footer to render
   so Read More button is visible inside related-post carousel cards
   ========================================================= */
body.single .entry-related .loop-entry .entry-footer,
body.single .entry-related .loop-entry .entry-actions,
body.single .entry-related .loop-entry .more-link-wrap {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
  overflow: visible !important;
}
body.single .entry-related .loop-entry .entry-footer {
  padding: 0 24px 24px !important;
  margin-top: 8px;
}

/* =========================================================
   17. Similar Posts (single blog post) — style Read More button + show category tags
   ========================================================= */
body.single .entry-related .loop-entry .post-more-link {
  display: inline-block;
  background-color: #1a2e44;
  color: #fff !important;
  padding: 8px 18px !important;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease;
  margin-top: 12px;
}
body.single .entry-related .loop-entry .post-more-link:hover {
  background-color: #6aaf2c !important;
  color: #fff !important;
}
body.single .entry-related .loop-entry .entry-taxonomies {
  display: block !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6aaf2c !important;
  margin-bottom: 8px;
}
body.single .entry-related .loop-entry .entry-taxonomies a {
  color: #6aaf2c !important;
  text-decoration: none;
}

/* =========================================================
   18. Course landing page — style lesson accordion list to mirror focus-mode sidebar
   Mix B+C: light grey background + brand-green left border + uppercase brand-green text
   ========================================================= */
body.single-sfwd-courses .ld-accordion {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

/* Section heading row (Section 1 — Percentages) */
html body.single-sfwd-courses .ld-accordion.ld-accordion--course .ld-accordion__section--lessons .ld-accordion__items .ld-accordion__subheading {
  display: block !important;
  background: #f7fafc !important;
  color: #6aaf2c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-left: 4px solid #6aaf2c !important;
}

/* Individual lesson / quiz / topic rows */
body.single-sfwd-courses .ld-accordion__item {
  border-bottom: 1px solid #f1f5f9;
}
body.single-sfwd-courses .ld-accordion__item:last-child {
  border-bottom: none;
}
body.single-sfwd-courses .ld-accordion__item-header {
  padding: 10px 20px !important;
  transition: background-color 0.15s ease;
}
body.single-sfwd-courses .ld-accordion__item-header:hover {
  background-color: #f8fafc;
}

/* Lesson title links — no underline, brand navy text, green on hover */
body.single-sfwd-courses .ld-accordion__item-title,
body.single-sfwd-courses a.ld-accordion__item-title {
  text-decoration: none !important;
  color: #1a2e44 !important;
  font-weight: 500;
}
body.single-sfwd-courses .ld-accordion__item-title:hover,
body.single-sfwd-courses a.ld-accordion__item-title:hover {
  color: #6aaf2c !important;
}

/* =========================================================
   19. Lesson page sidebar — section headers match course landing page style
   ========================================================= */
html body .ld-focus-sidebar .ld-lesson-item-section-heading {
  background: #f7fafc !important;
  color: #6aaf2c !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 12px 17px !important;
  margin: 8px 0 0 !important;
  border: none !important;
  border-left: 4px solid #6aaf2c !important;
}

/* =========================================================
   20. Course landing page — H1 title styled to match lesson sidebar nav-heading
   Brand-green background, white Inter bold text, rounded
   ========================================================= */
html body.single-sfwd-courses .entry-header.sfwd-courses-title h1.entry-title {
  background: #6aaf2c !important;
  color: #fff !important;
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  padding: 18px 24px !important;
  border-radius: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 24px !important;
  text-decoration: none !important;
}

/* =========================================================
   21. Course landing page — Course Content + Expand All bar (subtle, left-aligned)
   ========================================================= */
html body.single-sfwd-courses .ld-accordion.ld-accordion--course > .ld-accordion__header {
  background: transparent !important;
  padding: 12px 0 8px !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 16px !important;
  margin-bottom: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
html body.single-sfwd-courses .ld-accordion.ld-accordion--course > .ld-accordion__header > .ld-accordion__heading,
html body.single-sfwd-courses .ld-accordion.ld-accordion--course > .ld-accordion__header h2.ld-accordion__heading {
  color: #1a2e44 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
html body.single-sfwd-courses .ld-accordion.ld-accordion--course > .ld-accordion__header .ld-accordion__expand-button {
  color: #6aaf2c !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
html body.single-sfwd-courses .ld-accordion.ld-accordion--course > .ld-accordion__header .ld-accordion__expand-button:hover {
  color: #558f24 !important;
  text-decoration: underline !important;
}
html body.single-sfwd-courses .ld-accordion.ld-accordion--course > .ld-accordion__header .ld-accordion__expand-button svg,
html body.single-sfwd-courses .ld-accordion.ld-accordion--course > .ld-accordion__header .ld-accordion__expand-button * {
  color: #6aaf2c !important;
  fill: #6aaf2c !important;
  stroke: #6aaf2c !important;
}

/* Keep the accordion clean (no border, no rounded mask) */
html body.single-sfwd-courses .ld-accordion.ld-accordion--course {
  border-radius: 0 !important;
  overflow: visible !important;
  border: none !important;
}

/* =========================================================
   22. Course landing page — float cover image left, description wraps right
   ========================================================= */
html body.single-sfwd-courses .ld-featured-image--course {
  float: left !important;
  width: 400px !important;
  max-width: 40% !important;
  height: auto !important;
  margin: 0 24px 16px 0 !important;
  border-radius: 8px !important;
  display: block !important;
}

/* Clear the float after the description so subsequent blocks don't wrap awkwardly */
html body.single-sfwd-courses .ld-tab-bar__panel::after {
  content: "";
  display: block;
  clear: both;
}

/* Mobile: stack image above description instead of floating */
@media (max-width: 767px) {
  html body.single-sfwd-courses .ld-featured-image--course {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
  }
}


/* =========================================================
   23. Footer — dark navy background, white text on rebuilt columns
   ========================================================= */
.site-footer .site-top-footer-wrap,
.site-footer .site-bottom-footer-wrap {
  background-color: #1a2e44 !important;
}
.site-footer .site-top-footer-wrap {
  padding: 60px 0 40px !important;
}
.site-footer .site-bottom-footer-wrap,
.site-footer .site-bottom-footer-wrap p,
.site-footer .site-bottom-footer-wrap .footer-html {
  color: rgba(255, 255, 255, 0.7) !important;
}
.site-footer .site-bottom-footer-wrap a {
  color: rgba(255, 255, 255, 0.9) !important;
}