/*
 assets/css/template-course-page.css
 Course Tracker — template styles (fixed card background override)
 - Uses CSS variables set by the plugin:
     --ctrkr-page-bg   (band / page background)
     --ctrkr-course-bg (card surface background)
 - Scoped to #course-page-outer so it doesn't affect the rest of the site.
 - IMPORTANT: avoid using `background: none` which resets background-color.
*/

/* 0) Root fallbacks */
#course-page-outer {
  background-color: var(--ctrkr-page-bg, transparent);
  color: inherit;
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  padding: 18px 0;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* 2) Inner centered column */
#course-page-outer .course-inner-container {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

/* 3) Section wrapper */
#course-page-outer .course-inner-container > section {
  margin: 0 0 24px;
  padding: 0;
}
#course-page-outer .course-inner-container > section:last-child {
  margin-bottom: 18px;
}

/* Card surface — use background-color (avoid background: shorthand) */
#course-page-outer .course-inner-container > section > .container,
#course-page-outer .course-inner-container > section .container {
  background-color: var(--ctrkr-course-bg, #ffffff) !important;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Prevent theme pseudo-elements from covering card color */
#course-page-outer .course-inner-container > section > .container::before,
#course-page-outer .course-inner-container > section > .container::after,
#course-page-outer .course-inner-container > section .container::before,
#course-page-outer .course-inner-container > section .container::after {
  background: transparent !important;
}

/* Prevent inner elements from swapping in their own opaque backgrounds */
#course-page-outer .course-inner-container > section > .container * {
  background: transparent;
}

/* 5) Headings */
#course-page-outer h1,
#course-page-outer .course-h1 { font-family: inherit; color: inherit; margin-top:0; margin-bottom:14px; padding:0; line-height:1.05; }
#course-page-outer h2,
#course-page-outer .course-h2 { font-family: inherit; color: inherit; margin-top:0; margin-bottom:12px; padding:0; }
#course-page-outer h3,
#course-page-outer .course-h3 { font-family: inherit; color: inherit; margin-top:0; margin-bottom:10px; padding:0; }

/* 6) Paragraphs */
#course-page-outer .course-inner-container p { margin: 0 0 1em; line-height: 1.6; }

/* 7) Two-column layout */
.course-two-columns { max-width: 1100px; margin-left:auto; margin-right:auto; padding:0; box-sizing:border-box; }
.course-two-columns .columns { display:flex; gap:24px; align-items:flex-start; width:100%; box-sizing:border-box; flex-wrap:nowrap; }
.course-two-columns .left-column, .course-two-columns .right-column { flex:1 1 0; width:50%; min-width:0; box-sizing:border-box; }
.course-two-columns > .container { padding:0; }

/* 8) Header-flex */
.header-flex { display:flex; justify-content:space-between; align-items:center; margin-top:1.2rem; margin-bottom:0.8rem; gap:12px; }
.header-flex .left-column { display:flex; align-items:center; gap:8px; }
.header-flex .ctrkr-hamburger { font-size:18px; line-height:1; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; background:transparent; border:none; cursor:pointer; padding:0; }
.header-flex .ctrkr-hamburger:focus { outline:2px solid rgba(0,123,255,0.6); outline-offset:2px; border-radius:6px; }

/* 11) Gentle header hiding */
body.ctrkr-plugin-header-active .site-header .site-branding,
body.ctrkr-plugin-header-active .site-header .site-title,
body.ctrkr-plugin-header-active .site-header .site-logo,
body.ctrkr-plugin-header-active .site-header .header-controls,
body.ctrkr-plugin-header-active .site-header .header-buttons,
body.ctrkr-plugin-header-active .site-navigation {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
body.ctrkr-plugin-header-active .site-header, body.ctrkr-plugin-header-active #masthead {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 12) Responsive */
@media (max-width:1024px) {
  #course-page-outer .course-inner-container { padding-left:16px; padding-right:16px; }
  .course-two-columns .columns { gap:18px; }
}
@media (max-width:768px) {
  #course-page-outer { padding:16px 0; }
  .course-two-columns .columns { flex-wrap:wrap; gap:16px; }
  .course-two-columns .left-column, .course-two-columns .right-column { width:100%; }
  #course-page-outer .course-inner-container > section { margin-bottom:20px; }
}

/* 13) Reduce motion */
@media (prefers-reduced-motion: reduce) { .pill-button, .header-flex .ctrkr-hamburger { transition: none !important; } }

/* --- Scoped rules when plugin header is NOT used --- */
.ctrkr-no-plugin-header .header-flex {
  margin-top: 0;
  transform: translateY(-22px);
  z-index: 5;
  position: relative;
  pointer-events: auto;
}
.ctrkr-no-plugin-header .header-flex .left-column { display: flex; align-items: center; gap: 12px; }
.ctrkr-no-plugin-header .ctrkr-hamburger {
  background: transparent; border: 0; padding: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ctrkr-no-plugin-header .ctrkr-explore {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  margin-left: 8px !important; background: transparent !important; border: 0 !important;
  padding: 0 !important; color: inherit !important; font: inherit !important;
  line-height: 1 !important; font-size: var(--ctrkr-explore-size, 14px) !important;
  cursor: pointer !important; text-decoration: none !important; text-transform: none !important;
}
.ctrkr-no-plugin-header .ctrkr-explore:focus,
.ctrkr-no-plugin-header .ctrkr-hamburger:focus {
  outline: 2px solid rgba(0,123,255,0.18); outline-offset: 2px; border-radius: 6px;
}
.ctrkr-no-plugin-header .course-header .course-h1 { margin-top: 0.6rem; }
@media (max-width: 720px) {
  .ctrkr-no-plugin-header .header-flex { transform: translateY(-12px); }
  .ctrkr-no-plugin-header .ctrkr-explore { font-size: 13px !important; }
}

/* header-controls wrapper & alignment */
.ctrkr-no-plugin-header .ctrkr-header-controls-wrapper { margin-bottom: 12px; position: relative; z-index: 6; }
.ctrkr-no-plugin-header .ctrkr-container-aligned {
  box-sizing: border-box;
  padding-left: var(--ctrkr-container-gutter, 20px);
  padding-right: var(--ctrkr-container-gutter, 20px);
  max-width: var(--ctrkr-container-max-width, 1200px);
  margin-left: auto; margin-right: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 40px;
}
.ctrkr-no-plugin-header .ctrkr-header-controls-wrapper .header-flex { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ctrkr-no-plugin-header .ctrkr-left-controls { display:flex; align-items:center; gap:12px; }
.ctrkr-no-plugin-header .ctrkr-title {
  margin: 0; padding: 0; font-size: var(--ctrkr-title-size, 20px); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ctrkr-no-plugin-header .ctrkr-right-link {
  font-size: var(--ctrkr-right-size, 14px) !important; line-height: 1 !important; vertical-align: middle !important;
  margin-left: 6px !important; text-decoration: none !important; font-weight: 600 !important; white-space: nowrap !important;
}
.ctrkr-no-plugin-header .ctrkr-explore:focus,
.ctrkr-no-plugin-header .ctrkr-hamburger:focus,
.ctrkr-no-plugin-header .ctrkr-right-link:focus {
  outline: 2px solid rgba(0,123,255,0.18); outline-offset: 2px; border-radius: 6px;
}
.ctrkr-no-plugin-header .course-header { margin-top: 0.6rem; }
@media (max-width: 720px) {
  .ctrkr-no-plugin-header .ctrkr-header-controls-wrapper { margin-bottom: 8px; }
  .ctrkr-no-plugin-header .ctrkr-explore { font-size: 13px !important; }
}

/* hamburger image sizing */
.ctrkr-hamburger .ctrkr-hamburger-img,
.ctrkr-hamburger-img { height: 28px; width: auto; display: block; max-width: none; }
.ctrkr-slidein-toggle.ctrkr-hamburger { padding: 6px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 720px) {
  .ctrkr-hamburger .ctrkr-hamburger-img,
  .ctrkr-hamburger-img { height: 24px; }
}

/* right column and spacing */
.ctrkr-header-controls-wrapper .right-column {
  display: flex !important; align-items: center !important; gap: 28px !important; margin-left: auto !important; flex: 0 0 auto !important;
}
.ctrkr-plugin-header-container .ctrkr-right { display: flex !important; align-items:center !important; gap: 18px !important; justify-content:flex-end !important; flex:0 0 auto !important; }
.ctrkr-header-controls-wrapper .right-column > *, .ctrkr-plugin-header-container .ctrkr-right > * { margin-left:0 !important; margin-right:0 !important; }
.ctrkr-slidein-toggle.ctrkr-hamburger { padding: 6px !important; margin: 0 !important; display: inline-flex !important; align-items:center !important; justify-content:center !important; }


/* --- arrow stuff: consolidated and safe SVG handling --- */
/* --- Arrow overlay: white rounded pills with ASCII chevrons (replace existing arrow block) --- */

/* Ensure the video wrapper is positioned for the absolute overlay */
.ctrkr-top-video-media {
  position: relative;
  display: block;
  width: 100%;
  overflow: visible;       /* allow overlay to show outside inner player if needed */
  box-sizing: border-box;
}

/* Overlay container: sit inside the card (adjust top so it sits inside padding) */
.ctrkr-nav-arrows-card {
  position: absolute;
  top: 12px;                       /* keep inside card's padding */
  right: 12px;
  z-index: 9999;                   /* ensure above players */
  display: inline-flex;
  align-items: center;
  gap: 18px;                       /* wider spacing between buttons */
  pointer-events: auto;
  color: var(--ctrkr-arrow-color, #111) !important;
}

/* Button visual: white rounded rectangle */
.ctrkr-nav-arrows-card .ctrkr-arrow-btn,
.ctrkr-nav-arrows-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 36px;
  min-width: 48px;
  min-height: 36px;
  padding: 0;
  border-radius: 8px;
  background-color: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 -1px 0 rgba(0,0,0,0.02);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  margin-right: 10px !important;      /* explicitly remove stray margin */
}

/* Hover/focus: subtle and accessible */
.ctrkr-nav-arrows-card .ctrkr-arrow-btn:hover,
.ctrkr-nav-arrows-card a:hover {
  background-color: rgba(255,255,255,0.98);
}
.ctrkr-nav-arrows-card .ctrkr-arrow-btn:focus,
.ctrkr-nav-arrows-card a:focus {
  outline: 3px solid rgba(0,0,0,0.08);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Hide any SVG backgrounds from shortcode icons (we use ASCII chevrons) */
.ctrkr-nav-arrows-card svg { display: none !important; }

/* ASCII chevrons injected via pseudo-element and perfectly vertically centered */
.ctrkr-nav-arrows-card .ctrkr-arrow-btn::before,
.ctrkr-nav-arrows-card a::before {
  content: '‹';
  font-size: 18px;
  line-height: 36px;               /* centers inside 36px button */
  color: currentColor;
  display: block;
  margin-bottom: 3px;
  transform: none;
}

/* Next button variant */
.ctrkr-nav-arrows-card .ctrkr-arrow-next::before,
.ctrkr-nav-arrows-card a.ctrkr-arrow-next::before {
  content: '›';
}

/* Inline/no-video usage: same look */
.ctrkr-nav-arrows-inline {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: inherit;
}

/* Small-screen adjustments */
@media (max-width: 600px) {
  .ctrkr-nav-arrows-card { top: 8px; right: 8px; gap: 12px; }
  .ctrkr-nav-arrows-card .ctrkr-arrow-btn,
  .ctrkr-nav-arrows-card a { width: 40px; height: 36px; min-width:40px; min-height:36px; border-radius:6px; }
  .ctrkr-nav-arrows-card .ctrkr-arrow-btn::before,
  .ctrkr-nav-arrows-card a::before { font-size: 16px; line-height: 36px; }
}
/* end arrows */



/* Card defaults */
.ctrkr-card {
  width: 100%;
  max-width: var(--ctrkr-container-max-width, 1200px);
  margin-left: auto; margin-right: auto; box-sizing: border-box;
  background-color: var(--ctrkr-course-bg, #ffffff);
  border-radius: var(--ctrkr-card-radius, 12px);
  box-shadow: 0 6px 18px rgba(17,24,39,0.06);
  overflow: visible;
  margin-bottom: 18px;
}
.ctrkr-card-inner { padding: 18px; box-sizing: border-box; }
.ctrkr-top-card .ctrkr-card-inner { padding: 16px; }

.ctrkr-top-video-media iframe,
.ctrkr-top-video-media video,
.ctrkr-top-video-media embed,
.ctrkr-top-video-media .wp-video,
.ctrkr-top-video-media object {
  width: 100%;
  height: auto;
  display: block;
}

/* Hide right-side contact link on small screens (<=380px) */
@media (max-width: 380px) {
  .ctrkr-right-link {
    display: none !important;
  }
}