/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* --- General Body and Typography --- */
body {
    font-family: 'Inter', sans-serif; /* Recommended font, adjust if you use a different one */
    line-height: 1.6;
    color: #333; /* Dark grey for body text */
}

h1.entry-title { /* Adjust selector based on your theme's H1 for post titles */
    font-size: 2.8em; /* Large size for main post title */
    color: #8A2BE2; /* Darker purple for main title */
    text-align: center;
    margin-bottom: 40px;
    font-weight: bold;
}

h2 {
    font-size: 2em; /* Subheading font size */
    color: #FFA500; /* Orange accent for H2s */
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: bold;
}

h3 {
    font-size: 1.5em; /* H3 font size */
    color: #8A2BE2; /* Purple for H3s, or #333 if standard body text color */
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: bold;
}

/* --- Video Container Styling --- */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    margin-bottom: 30px; /* Space below video */
    border-radius: 10px; /* Rounded corners for video embed */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px; /* Ensure iframe also has rounded corners */
}

/* --- General Block Styling (for all custom blocks) --- */
.math-tip,
.math-example,
.math-definition-rule,
.ib-exam-question,
.math-exercise {
    margin-bottom: 30px; /* Space between blocks */
    border-radius: 8px; /* Slightly rounded corners for all custom blocks */
    overflow: hidden; /* Ensures content respects border-radius */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* --- Block Header Styling (for blocks with title and icon) --- */
.block-header {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px; /* Space between icon and title */
    border-radius: 8px 8px 0 0; /* Rounded top corners */
}

.block-header .block-title {
    margin: 0; /* Remove default margin from H3 inside header */
    color: #FFFFFF; /* White text for all block titles */
    font-size: 1.3em; /* Slightly smaller title within header */
    font-weight: bold;
}

/* --- Icon Styling (assuming Font Awesome or similar) --- */
/* You'll need to enqueue Font Awesome in your theme's functions.php or via a plugin */
.block-header i {
    font-size: 1.5em; /* Size of the icon */
    color: #FFFFFF; /* White color for icons */
}

/* Specific Icon Classes (for different icon types - you'll need to map these to actual Font Awesome classes if using FA) */
/* Example Font Awesome mapping: */
/* .icon-tip::before { content: "\f0eb"; font-family: "Font Awesome 5 Free"; font-weight: 900; } */ /* Lightbulb icon */
/* .icon-example::before { content: "\f040"; font-family: "Font Awesome 5 Free"; font-weight: 900; } */ /* Pen-nib icon */
/* .icon-definition::before { content: "\f02d"; font-family: "Font Awesome 5 Free"; font-weight: 900; } */ /* Book icon */
/* .icon-exam::before { content: "\f1da"; font-family: "Font Awesome 5 Free"; font-weight: 900; } */ /* Graduation cap icon */


/* --- Block Content Styling --- */
.block-content {
    padding: 20px;
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
}

/* --- Specific Block Color Schemes --- */

/* Tip Box */
.math-tip .block-header {
    background-color: #8A2BE2; /* Darker purple */
}
.math-tip .block-content {
    background-color: #DDA0DD; /* Lighter purple */
}

/* Example Box */
.math-example .block-header {
    background-color: #FFA500; /* Darker orange */
}
.math-example .block-content {
    background-color: #FFF0E6; /* Lighter orange */
}

/* Definition/Rule Box */
.math-definition-rule .block-header {
    background-color: #8A2BE2; /* Darker purple */
}
.math-definition-rule .block-content {
    background-color: #DDA0DD; /* Lighter purple */
}

/* IB Exam Question Box */
.ib-exam-question .block-header {
    background-color: #FFA500; /* Darker orange, distinct */
}
.ib-exam-question .block-content {
    background-color: #FFC080; /* Slightly lighter orange for content */
    border: 2px solid #FFA500; /* Bold border as an option */
}


/* --- Accordion Style for Exercises --- */

/* Question Text (always visible) */
.math-exercise .question-text {
    font-weight: bold;
    margin-bottom: 10px;
    padding: 15px 20px 0 20px; /* Padding to align with accordion summary */
    color: #333; /* Standard text color */
}

/* Accordion Summary (clickable "Show Answer" button) */
.accordion-summary {
    background-color: #FFA500; /* Orange background */
    color: #FFFFFF; /* White text */
    padding: 12px 20px;
    cursor: pointer;
    border-radius: 8px; /* Rounded corners for the summary bar */
    display: block; /* Ensures it takes full width and can be styled */
    font-weight: bold;
    margin: 0 0 10px 0; /* Space below summary if question is above */
    position: relative; /* For custom arrow */
    user-select: none; /* Prevent text selection on click */
}

/* Remove default arrow from <summary> */
details > summary::-webkit-details-marker {
    display: none;
}
details > summary::marker {
    display: none;
}

/* Add custom arrow (Font Awesome example) */
.accordion-summary::after {
    content: '\f078'; /* Font Awesome chevron-down icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

/* Rotate arrow when accordion is open */
details[open] > .accordion-summary::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Accordion Content (hidden answer) */
.accordion-content {
    background-color: #FFF0E6; /* Light orange background */
    padding: 15px 20px 20px 20px;
    border: 1px solid #FFA500; /* Orange border */
    border-top: none; /* No top border, as it connects to summary */
    border-radius: 0 0 8px 8px; /* Rounded bottom corners */
    margin-top: -10px; /* Pulls content up to meet summary */
}

/* Styling for strong tag within solution (optional) */
.accordion-content strong {
    color: #8A2BE2; /* Purple for "Question:" and "Solution:" labels */
}

/* Ensure LaTeX math is rendered correctly within styled blocks */
.block-content .MathJax_Display,
.accordion-content .MathJax_Display {
    margin: 1em 0;
    overflow-x: auto; /* Allow horizontal scrolling for wide equations */
}

.block-content .MathJax,
.accordion-content .MathJax {
    display: inline-block; /* Ensure inline math respects spacing */
}