/*
 * Study Quest - H5P Interactive Book
 * Custom styling for H5P.InteractiveBook
 *
 * Brand:
 * Green: #72BF44
 * Blue:  #2784C4
 * Yellow:#FFC30D
 * Dark:  #131D2B
 */

/* ============================================================
   ROOT / BOOK CONTAINER
   ============================================================ */

.h5p-interactive-book {
    --sq-green: #78c348;
    --sq-green-dark: #80bd41;
    --sq-blue: #2784C4;
    --sq-blue-dark: #1E6FA7;
    --sq-yellow: #FFC30D;
    --sq-dark: #131D2B;
    --sq-light: #F5F7F9;
    --sq-border: #E2E8F0;
    --sq-text: #263238;
    --sq-muted: #64748B;
    --sq-white: #FFFFFF;
     --h5p-theme-contrast-cta-white: #80bd41;
    color: var(--sq-text);
    background: var(--sq-white);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.h5p-interactive-book h1,
.h5p-interactive-book h2,
.h5p-interactive-book h3,
.h5p-interactive-book h4,
.h5p-interactive-book h5,
.h5p-interactive-book h6 {
    color: var(--sq-dark);
    font-weight: 700;
    line-height: 1.3;
}

.h5p-interactive-book h1 {
    font-size: 2rem;
}

.h5p-interactive-book h2 {
    font-size: 1.65rem;
}

.h5p-interactive-book h3 {
    font-size: 1.35rem;
}

.h5p-interactive-book p {
    color: var(--sq-text);
    line-height: 1.7;
}



/* ============================================================
   HEADER
   ============================================================ */

.h5p-interactive-book .h5p-interactive-book-header {
    background: var(--sq-dark);
    color: var(--sq-white);
    border-bottom: 4px solid var(--sq-green);
}

.h5p-interactive-book .h5p-interactive-book-header h1,
.h5p-interactive-book .h5p-interactive-book-header h2,
.h5p-interactive-book .h5p-interactive-book-header h3 {
    color: var(--sq-white);
}


/* ============================================================
   TOP NAVIGATION / CHAPTER NAVIGATION
   ============================================================ */

.h5p-interactive-book .h5p-interactive-book-navigation {
    background: var(--sq-white);
    border-right: 1px solid var(--sq-border);
}

.h5p-theme-button,.h5p-theme-primary-cta
{
    background: var(--sq-green-dark);
     color: var(--sq-white);
     boder: 3px solid var(-sq-green)
}

.h5p-interactive-book
.h5p-interactive-book-navigation
button {
    color: var(--sq-dark);
    background: transparent;
    border: 0;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.h5p-interactive-book
.h5p-interactive-book-navigation
button:hover {
    background: rgba(114, 191, 68, 0.10);
    color: var(--sq-green-dark);
}

.h5p-interactive-book
.h5p-interactive-book-navigation
button.active,
.h5p-interactive-book
.h5p-interactive-book-navigation
button[aria-current="true"] {
    background: var(--sq-green);
    color: var(--sq-white);
}


/* ============================================================
   CONTENT AREA
   ============================================================ */

.h5p-interactive-book .h5p-interactive-book-content {
    background: var(--sq-white);
}

.h5p-interactive-book .h5p-interactive-book-content-inner {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   CHAPTER CONTENT
   ============================================================ */

.h5p-interactive-book .h5p-interactive-book-chapter {
    color: var(--sq-text);
}

.h5p-interactive-book
.h5p-interactive-book-chapter
> h2:first-child {
    margin-top: 0;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--sq-green);
}
.h5p-interactive-book-status-info
{
 
   
}
.h5p-interactive-book-status-chapter .title
{
    font-size: 2.0rem !important;
    color: var(--sq-green-dark) !important;
    padding: 3px 10px 3px 10px !important;
    border: 2px solid var(--sq-border) !important;
    border-radius: 5px !important;
      
}
.h5p-theme-cover-details h2 , .h5p-theme-cover-details h1, .h5p-theme-cover-details .h5p-theme-cover-icon
{
    font-size: 1.75rem !important;
    color: var(--sq-green-dark) !important; 
}

.h5p-theme-cover-page .h5p-theme-cover-img
{
    width: 35rem !important;
}
.h5p-theme-cover-page
{
   gap : calc(var(--h5p-theme-spacing-xl)*1) !important;
}

/*.h5p-column-box-container ,.h5p-interactive-book-main*/
/*{*/
   
/*   background: rgba(128, 189, 65,0.7) !important;  */
    
/*}*/
.h5p-interactive-book-content
{
margin: 0px !important;
  border-radius: 10px;
  border: 2px solid var(--sq-green) !important; 
}
.h5p-column-content
{
    
}
/* ============================================================
   LINKS
   ============================================================ */

.h5p-interactive-book a {
    color: var(--sq-blue);
    text-decoration: none;
}

.h5p-interactive-book a:hover {
    color: var(--sq-blue-dark);
    text-decoration: underline;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.h5p-interactive-book .h5p-joubelui-button {
    background: var(--sq-green);
    color: var(--sq-white);
    border: 0;
    border-radius: 6px;
    box-shadow: none;
    font-weight: 600;
    transition:
        background-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.h5p-interactive-book .h5p-joubelui-button:hover {
    background: var(--sq-green-dark);
    color: var(--sq-white);
    transform: translateY(-1px);
}

.h5p-interactive-book .h5p-joubelui-button:focus {
    outline: 3px solid rgba(39, 132, 196, 0.35);
    outline-offset: 2px;
}


/* ============================================================
   PRIMARY / NEXT BUTTON
   ============================================================ */

.h5p-interactive-book
.h5p-interactive-book-button-next {
    background: var(--sq-green);
    color: var(--sq-white);
    border-radius: 6px;
}

.h5p-interactive-book
.h5p-interactive-book-button-next:hover {
    background: var(--sq-green-dark);
}


/* ============================================================
   PREVIOUS BUTTON
   ============================================================ */

.h5p-interactive-book
.h5p-interactive-book-button-previous {
    background: var(--sq-blue);
    color: var(--sq-white);
    border-radius: 6px;
}

.h5p-interactive-book
.h5p-interactive-book-button-previous:hover {
    background: var(--sq-blue-dark);
}


/* ============================================================
   CONTENT CARDS
   ============================================================ */

.h5p-interactive-book .h5p-content {
    border-radius: 10px;
}

.h5p-interactive-book
.h5p-content
.h5p-joubelui-button {
    border-radius: 6px;
}


/* ============================================================
   IMAGES
   ============================================================ */

.h5p-interactive-book img {
    max-width: 100%;
    height: auto;
}

.h5p-interactive-book
.h5p-image
img {
    border-radius: 8px;
}


/* ============================================================
   TABLES
   ============================================================ */

.h5p-interactive-book table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.h5p-interactive-book table th {
    background: var(--sq-dark);
    color: var(--sq-white);
    font-weight: 600;
    padding: 12px 14px;
    border: 1px solid var(--sq-dark);
}

.h5p-interactive-book table td {
    padding: 12px 14px;
    border: 1px solid var(--sq-border);
}

.h5p-interactive-book table tr:nth-child(even) td {
    background: var(--sq-light);
}


/* ============================================================
   BLOCKQUOTES
   ============================================================ */

.h5p-interactive-book blockquote {
    margin: 1.5rem 0;
    padding: 20px 24px;
    background: rgba(114, 191, 68, 0.08);
    border-left: 5px solid var(--sq-green);
    border-radius: 0 8px 8px 0;
}

.h5p-interactive-book blockquote p {
    margin: 0;
}


/* ============================================================
   LISTS
   ============================================================ */

.h5p-interactive-book ul,
.h5p-interactive-book ol {
    padding-left: 1.8rem;
}

.h5p-interactive-book li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}


/* ============================================================
   HORIZONTAL RULE
   ============================================================ */

.h5p-interactive-book hr {
    border: 0;
    height: 1px;
    background: var(--sq-border);
    margin: 2rem 0;
}


/* ============================================================
   INTERACTIVE CONTENT
   ============================================================ */

.h5p-interactive-book .h5p-question {
    border-radius: 10px;
}


/* ============================================================
   H5P QUESTION BUTTONS
   ============================================================ */

.h5p-interactive-book .h5p-question .h5p-joubelui-button,
.h5p-interactive-book .h5p-question button {
    border-radius: 6px;
}


/* ============================================================
   CHECK / SUBMIT BUTTONS
   ============================================================ */

.h5p-interactive-book
button[type="button"].check-answer,
.h5p-interactive-book
button[type="submit"] {
    border-radius: 6px;
}


/* ============================================================
   FEEDBACK / SUCCESS
   ============================================================ */

.h5p-interactive-book .h5p-feedback {
    border-radius: 8px;
}


/* ============================================================
   PROGRESS
   ============================================================ */

.h5p-interactive-book
.h5p-interactive-book-progress {
    background: var(--sq-light);
}

.h5p-interactive-book
.h5p-interactive-book-progress-bar {
    background: var(--sq-green);
}


/* ============================================================
   FOOTER
   ============================================================ */

.h5p-interactive-book .h5p-interactive-book-footer {
    background: var(--sq-dark);
    color: var(--sq-white);
    border-top: 3px solid var(--sq-green);
}


/* ============================================================
   FULLSCREEN
   ============================================================ */

.h5p-interactive-book:fullscreen {
    background: var(--sq-white);
}

.h5p-interactive-book:-webkit-full-screen {
    background: var(--sq-white);
}


/* ============================================================
   FOCUS / ACCESSIBILITY
   ============================================================ */

.h5p-interactive-book button:focus-visible,
.h5p-interactive-book a:focus-visible {
    outline: 3px solid var(--sq-blue);
    outline-offset: 3px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767px) {

    .h5p-interactive-book {
        font-size: 15px;
    }

    .h5p-interactive-book h1 {
        font-size: 1.65rem;
    }

    .h5p-interactive-book h2 {
        font-size: 1.4rem;
    }

    .h5p-interactive-book h3 {
        font-size: 1.2rem;
    }

    .h5p-interactive-book
    .h5p-interactive-book-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .h5p-interactive-book
    .h5p-joubelui-button {
        min-height: 44px;
    }
}


/* ============================================================
   REDUCE MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .h5p-interactive-book *,
    .h5p-interactive-book *::before,
    .h5p-interactive-book *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}