/* Placeholder for the main BITUBI RED color */
:root {
    --bitubi-red: #C00000; /* Use your actual logo red color if different */
    --bitubi-dark: #333333;
    --bitubi-light: #f8f9fa;
}

/* Base Frame Style (for the entire page border) */
.bitubi-frame {
    border: 5px solid var(--bitubi-red);
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    background-color: white;
    margin: 20px auto;
    max-width: 1200px;
}

/* Logo and Title */
.bitubi-logo { max-height: 60px; width: auto; }
.bitubi-title { color: var(--bitubi-red); font-weight: 700; }

/* Navigation Style */
.bitubi-navbar .nav-link { color: var(--bitubi-dark); transition: color 0.3s; }
.bitubi-navbar .nav-link:hover, .bitubi-navbar .nav-link.active { color: var(--bitubi-red); }


/* ****************************************************** */
/* CUSTOM BLOCKQUOTE STYLES FOR THE LESSONS (THE FIX) */
/* ****************************************************** */

/* 1. Outer Container: Thick Red Border (the "tick red rounded border" around the quote) */
.bitubi-blockquote-container {
    border: 3px solid var(--bitubi-red); 
    border-radius: 0.5rem; /* Rounded corners */
    overflow: hidden; /* Ensures borders are crisp inside the container */
}

/* 2. Remove default item styling inherited from Bootstrap */
.bitubi-blockquote-container .accordion-item {
    border: none;
    background-color: transparent;
}

/* 3. Quote Header: Clean White/Hover State */
.bitubi-blockquote-quote {
    background-color: white;
    color: var(--bitubi-dark); /* Ensure text is visible */
    padding: 1.5rem !important; /* Increase padding */
    font-size: 1.1rem;
    line-height: 1.5;
    width: 100%; /* Important for fill width */
    text-align: left;
}

.bitubi-blockquote-quote:hover {
    background-color: #FEE; /* Light Red hover (mimics red-50) */
}

/* Fix for Bootstrap's default collapsed button appearance */
.bitubi-blockquote-quote:not(.collapsed) {
    background-color: white !important;
    color: var(--bitubi-dark);
    box-shadow: none;
    /* When expanded, the quote header shouldn't have a bottom border if the body has a border-top */
    border-bottom: 2px solid var(--bitubi-red); 
}

/* Remove default Bootstrap arrow (since we don't need the [Icon]) */
.bitubi-blockquote-quote::after {
    display: none; 
}

/* 4. Explanation Body: Light Red Background and Top Border (for separation when expanded) */
.bitubi-blockquote-explanation {
    background-color: #FEE; /* Light Red background */
    padding: 1.5rem !important;
}

/* Add this new style to increase size and make it bold */
.bitubi-blockquote-quote .quote-text {
    font-size: 1.25rem; /* Makes the quote text bigger */
    font-weight: bold;  /* Applies bold styling */
    font-style: italic; /* Keeps the essential italic style */
    line-height: 1.4;
    color: var(--bitubi-dark); /* Ensures it remains readable */
}