/**
 * Theme Name: Zetkin Educate for SV (2026)
 * Template: twentytwentyfour
 * Version: 2.0.0
*/



/* 1) Define your color palette using CSS variables */
:root {
  --color-burgundy: #440c1a;      /* HEX #440C1A */
  --color-light-green: #c1d8b2;   /* HEX #C1D8B2 */
  --color-off-white: #f2ebdd;     /* HEX #F2EBDD */
  --color-mid-green: #539760;     /* HEX #539760 */
  --color-red: #eb4040;           /* HEX #EB4040 */
  --color-dark-green: #174732;    /* HEX #174732 */
  --color-grey: #efefef;          /* HEX #EFEFEF */
  --heading-mb: 1rem; /* margin-bottom for headings */
  --font-size-normal: clamp(1rem, 2.5vw, 1.25rem); /* normal font size */
}

body, h1, h2, h3, h4, h5, h6, p, a:where(:not(.wp-element-button)) {
  color: var(--color-burgundy);
}

p {
  font-size: var(--font-size-normal);
}

/* 2) Headings (Overskrifter) */
.overskrift1,
.overskrift2,
.overskrift3 {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin: 1em 0 0.5em;
}

/* Header */
header.wp-block-template-part {
  border-bottom: 1px solid var(--color-grey);

  > div {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin: auto;
  }

  .wp-block-site-logo {
    margin-right: 2rem;

    img {
      max-width: 54px;
    }
  }
}

/* Menu */
.wp-block-site-title {
  font-weight: 400;
}

.sv-course-title {
  font-family: 'degular-text' !important;
  font-size: 3.5rem !important;
  font-weight: 600;
  color: var(--color-red);
}

/* mobile sv-course-title */
@media (max-width: 1024px) {
  .sv-course-title {
    font-size: 2rem !important;
  }
}

.wpec-course-content.sv-course-content h1 {
  margin-top: 1rem;
}

.overskrift1 {
  color: var(--color-red);        /* HEX #EB4040 */
  font-size: 2rem;
}

.overskrift2 {
  color: var(--color-burgundy);   /* HEX #440C1A */
  font-size: 1.75rem;
}

.overskrift3 {
  color: var(--color-dark-green); /* HEX #174732 */
  font-size: 1.5rem;
}


/* 3) Boxes */
.box {
  background-color: var(--color-light-green); /* HEX #C1D8B2 */
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px; /* optional */
}

/* Utility classes for widths */
.box-full {
  width: 100%;
}

.box-half {
  width: 50%;
}

/* Example usage:
   <div class="box box-full">
     <h3 class="overskrift3">Overskrift 3</h3>
     <p>Content</p>
   </div>
   <div class="box box-half">
     <h1 class="overskrift1">Overskrift 1</h1>
     <p>Content</p>
   </div>
*/

/* 4) Buttons */
button.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}

button.zedu_quiz__submit, 
button.btn-light, 
button.btn-dark, button.btn-mid {
  border-radius: 5px;
  font-weight: 500 !important;

  &:hover {
    cursor: pointer;
  }
}

button.zedu_quiz__submit {
  background-color: var(--color-dark-green);
  color: var(--color-light-green);
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  border-width: 0;

  &:hover {
    background-color: var(--color-light-green);
    color: var(--color-dark-green);
  }

  &:active {
    filter: brightness(0.8);
  }
}

/* Light (Neste) button */
.btn-light {
  background-color: var(--color-light-green) !important;
  color: var(--color-dark-green) !important;
  font-size: 1.25rem !important;
  padding: 0.5rem 2rem 0.7rem 2rem !important;

  &:hover {
    background-color: var(--color-dark-green) !important;
    color: var(--color-light-green) !important;
  }

  &:active {
    filter: brightness(0.8);
  }
}

/* Dark (Neste) button */
.btn-dark {
  background-color: var(--color-dark-green);
  color: var(--color-light-green);
  font-size: 1.25rem !important;
  padding: 0.5rem 2rem 0.7rem 2rem !important;

  &:hover {
    background-color: var(--color-light-green);
    color: var(--color-dark-green);
  }

  &:active {
    filter: brightness(0.8);
  }
}

/* Mid-green (Forrige) button */
.btn-mid {
  background-color: var(--color-mid-green);
  color: var(--color-off-white);
  /* font-weight: 500 !important; */
  font-size: 1.25rem !important;
  padding: 0.5rem 2rem 0.7rem 2rem !important;
  
  &:hover {
    background-color: var(--color-dark-green);
    color: var(--color-light-green);
  }

  &:active {
    filter: brightness(0.8);
  }
}

/* Example usage:
   <button class="btn btn-light">Neste</button>
   <button class="btn btn-dark">Neste</button>
   <button class="btn btn-mid">Forrige</button>
*/

/* 5) Optional global styles */
body {
  margin: 0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.wp-site-blocks * {
  font-family: 'degular-text' !important;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
}

.zedu_quiz,
.zedu_quiz * {
  font-family: 'degular-text' !important;
}

.zedu_quiz {
  background-color: #EFEFEF;
  padding: 0.5rem 2rem 2.5rem;
}

.zedu_quiz h3 {
  margin: 0;
}

.zedu_quiz__completed {
  padding: 0.5rem;
  text-align: center;
  border-radius: 0.5rem;
  border: 2px solid #539760;
  margin: 0 0 1rem;
}

.zedu_quiz__completed p {
  margin: 0.5rem 0 0;
}

.zedu_question {
  margin: 2rem 0 0.5rem;
}

.zedu_question ul {
  margin: 1rem 0;
  padding: 0;
}

.zedu_question li {
  list-style-type: none;
  line-height: 2rem;
}

.zedu_question--incorrect {
  padding-left: 0.5rem;
  border-left: 4px solid #EB4040;
}

.zedu_question--correct {
  padding-left: 0.5rem;
  border-left: 4px solid #539760;
}

.zedu_question--corrected {
  font-style: italic;
  color: #440C1A;
}

.zedu_quiz__submit {
  margin-top: 2rem;
  background-color: #253325;
  border-width: 0;
  color: #EFEFEF;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
}

.zedu_profile,
.zedu_profile * {
  font-family: 'degular-text' !important;
}

.zedu_profile h2 {
  font-weight: 600;
  margin-bottom: var(--heading-mb, 1rem);
}

.zedu_profile h3 {
  font-weight: 600;
  margin-bottom: var(--heading-mb, 1rem);
}

/* Progress indicator (item 6) */
.zedu_profile__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 1rem;
  font-size: 0.95rem;
  color: var(--color-dark-green, #174732);
}

.zedu_profile__progress--done {
  color: var(--color-mid-green, #539760);
  font-weight: 600;
}

.zedu_profile__progress__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-color: var(--color-mid-green, #539760);
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
}

.zedu_profile__progress__bar {
  flex: 1;
  max-width: 180px;
  height: 0.35rem;
  border-radius: 0.35rem;
  background-color: rgba(83, 151, 96, 0.18);
  overflow: hidden;
}

.zedu_profile__progress__bar__fill {
  height: 100%;
  background-color: var(--color-mid-green, #539760);
  transition: width 0.3s ease;
}

/* Course sidebar layout (two-column with collapsable sidebar) */
.wpec-course-with-sidebar {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.wpec-course-with-sidebar .sv-course-sidebar {
  flex: 0 0 25%;
  padding: 1rem 1rem 1rem 0.5rem;
  border-radius: 8px;
  min-width: 0;
  max-height: none !important;
  box-sizing: border-box;
  overflow: hidden;
  transition: flex-basis 0.3s ease, padding 0.3s ease, background 0.3s ease;
}

.wpec-course-with-sidebar .sv-course-content {
  flex: 1 1 75%;
  min-width: 0;
  transition: flex-basis 0.3s ease;
}

/* Desktop sidebar toggle (item 2) — base styles previously in plugin/course-style.css */
.wpec-course-with-sidebar .wpec-sidebar-toggle {
  position: absolute;
  top: 0.75rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(23, 71, 50, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-dark-green, #174732);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  z-index: 2;
}

.wpec-course-with-sidebar .wpec-sidebar-toggle:hover {
  background-color: rgba(83, 151, 96, 0.15);
}

/* Mobile / tablet: hide the desktop toggle (uses .wpec-nav-toggle instead)
   and force the two-column layout to stack so the sidebar fits its content. */
@media (max-width: 1024px) {
  .wpec-course-with-sidebar .wpec-sidebar-toggle {
    display: none;
  }

  .wpec-course-with-sidebar.wp-block-columns {
    flex-wrap: wrap !important;
  }

  .wpec-course-with-sidebar .wp-block-column.sv-course-sidebar,
  .wpec-course-with-sidebar .wp-block-column.sv-course-content {
    flex-basis: 100% !important;
  }

  /* Mobile toggle button: pinned to a fixed viewport position.
     At the page top, the toggle sits at the original ~96px offset (clearing
     the SV header). As the user scrolls, it transitions to top:10px and stays
     there. The CSS variable --wpec-toggle-top is updated by JS on scroll and
     when the menu is opened. */
  .wpec-course-with-sidebar .wpec-nav-toggle {
    position: fixed;
    top: var(--wpec-toggle-top, 6rem);
    left: 1rem;
    right: auto;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(23, 71, 50, 0.2);
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: var(--color-dark-green, #174732);
    transition: top 0.2s ease, background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    z-index: 1001;
  }

  .wpec-course-with-sidebar .wpec-nav-toggle:hover {
    background-color: rgba(83, 151, 96, 0.15);
  }

  /* Hide the original hamburger-line pseudo-elements, replace with sidebar-panel SVG mask. */
  .wpec-course-with-sidebar .wpec-nav-toggle .toggle-text {
    display: none;
  }

  .wpec-course-with-sidebar .wpec-nav-toggle .toggle-icon {
    width: 1.1rem;
    height: 1.1rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 3C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21ZM7 5H4V19H7V5ZM20 5H9V19H20V5Z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 3C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21ZM7 5H4V19H7V5ZM20 5H9V19H20V5Z'/></svg>") no-repeat center / contain;
  }

  .wpec-course-with-sidebar .wpec-nav-toggle .toggle-icon::before,
  .wpec-course-with-sidebar .wpec-nav-toggle .toggle-icon::after {
    display: none;
  }

  /* Leave room for the fixed toggle so the course-nav title text doesn't sit
     under it at page-top. The page H1 doesn't need this — it's below the
     fold initially, and we accept the toggle floating over content when
     scrolled. */
  .wpec-course-with-sidebar .wpec-course-navigation .course-title {
    padding-left: 3rem;
    padding-right: 0;
  }

  /* The plugin animates max-height for the mobile slide-down; for the
     full-screen overlay we want an instant open/close so the document height
     doesn't shrink gradually (which would clamp the restored scroll position). */
  .wpec-course-with-sidebar .wpec-course-navigation-wrapper {
    transition: none !important;
  }

  /* When opened, the nav tree becomes a full-screen overlay. The top padding
     follows the toggle's current position (see --wpec-toggle-top), so the menu
     items always start just below the toggle — whether it's sticky at 10px
     after scrolling or still at 6rem at page top.
     overflow-y: auto must !important-override the plugin's overflow: hidden
     so users can scroll the menu when it's taller than the viewport. */
  .wpec-course-with-sidebar .wpec-course-navigation-wrapper:not(.collapsed) {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 1000;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--wpec-toggle-top, 6rem) + 2.5rem) 1.5rem 2rem;
    margin: 0;
  }

  /* Open-state styling — same position as closed, only the colours change. */
  .wpec-course-with-sidebar .wpec-nav-toggle[aria-expanded="true"] {
    background: var(--color-dark-green) !important;
    border-color: var(--color-dark-green) !important;
    color: #fff !important;
  }

  /* The .wpec-mobile-nav-open body class is added by JS while the overlay is
     open; JS also adds wheel/touchmove/keydown listeners to block scroll on
     elements outside the overlay. No layout changes happen here, so the
     underlying scroll position is preserved automatically. */
}

body.wpec-sidebar-collapsed .wpec-course-with-sidebar .sv-course-sidebar {
  flex: 0 0 4rem !important;
  padding: 1rem 1rem 1rem 0.5rem !important;
}

/* Fade + collapse the nav tree contents (overrides plugin's display:none so transition can run).
   `:has(.wpec-sidebar-toggle)` keeps the toggle visible even when wpautop wraps it in a <p>. */
.wpec-course-with-sidebar .sv-course-sidebar .wpec-course-navigation > *:not(.wpec-sidebar-toggle):not(:has(.wpec-sidebar-toggle)) {
  opacity: 1;
  max-height: 200vh;
  visibility: visible;
  overflow: hidden;
  /* Hold the text width during the collapse animation so it doesn't reflow.
     180px fits course-title at the narrowest desktop sidebar width (~210px). */
  min-width: 180px;
  transition: opacity 0.25s ease, max-height 0.3s ease, visibility 0s linear 0s;
}

body.wpec-sidebar-collapsed .wpec-course-with-sidebar .sv-course-sidebar .wpec-course-navigation > *:not(.wpec-sidebar-toggle):not(:has(.wpec-sidebar-toggle)) {
  display: revert !important;
  opacity: 0;
  max-height: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, max-height 0.3s ease, visibility 0s linear 0.3s;
}

body.wpec-sidebar-collapsed .wpec-course-with-sidebar .wpec-sidebar-toggle {
  background: var(--color-dark-green) !important;
  border-color: var(--color-dark-green) !important;
  color: #fff !important;
}

/* Course title — leave room for the absolutely-positioned sidebar toggle on the right.
   Use proper Norwegian hyphenation rather than the inherited word-break: break-word
   which breaks long course names mid-word at narrow sidebar widths. */
.wpec-course-with-sidebar .wpec-course-navigation .course-title,
.wpec-course-with-sidebar .wpec-course-navigation .course-title a {
  padding-right: 2.5rem;
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 2;
}

/* Keep the focus/active indicator inside the element so it can't be clipped by overflow:hidden */
.wpec-course-with-sidebar .wpec-course-navigation a:focus-visible,
.wpec-course-with-sidebar .wpec-course-navigation a:active {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-mid-green);
}

/* Replace the plugin's CSS-only chevron with a sidebar-panel icon */
.wpec-course-with-sidebar .wpec-sidebar-toggle .wpec-sidebar-toggle-icon {
  width: 1.1rem !important;
  height: 1.1rem !important;
  border: 0 !important;
  transform: none !important;
  margin: 0 !important;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 3C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21ZM7 5H4V19H7V5ZM20 5H9V19H20V5Z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M21 3C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H21ZM7 5H4V19H7V5ZM20 5H9V19H20V5Z'/></svg>") no-repeat center / contain;
}

/* Locked forward navigation (item 7) — ported from wp-easy-courses */
.wpec-nav-button--locked {
  opacity: 0.45;
  cursor: not-allowed !important;
  filter: grayscale(0.3);
}

.wpec-nav-button--locked:hover {
  filter: grayscale(0.3);
}

.wpec-nav-locked-hint {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: var(--color-burgundy, #440c1a);
  font-style: italic;
}

/* Course navigation button row — ported from plugin so all button styling lives in the theme.
   Forrige / Neste / Fullfør all share the same dimensions; only the colour variant differs. */
.wpec-course-navigation-buttons {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-top: 2rem;
}

.wpec-course-navigation-buttons .prev-button,
.wpec-course-navigation-buttons .next-button {
  border: none;
  min-width: 8rem;
}