/*
Theme Name:   Astra Child - MonRai
Theme URI:    https://example.com
Description:  Child theme of Astra for the MonRai site. Adds a custom
              "framed box with scrolling content" component that can be
              dropped into any page via Elementor's HTML widget or the
              WordPress block editor's Custom HTML block.
Author:       MonRai
Author URI:   https://example.com
Template:     astra
Version:      1.0.0
Text Domain:  astra-child-monrai
*/

/* ==========================================================================
   1. HOW TO USE THIS COMPONENT
   ==========================================================================
   Paste this HTML wherever you want the box to appear (Elementor "HTML"
   widget, or a WordPress "Custom HTML" block):

   <div class="monrai-framed-box">
       <div class="monrai-scroll-box">
           <p>Your long description text goes here...</p>
           <p>Keep adding paragraphs - the box will scroll instead of
              growing taller.</p>
       </div>
   </div>

   Everything below is grouped by what it controls, with the exact line(s)
   to change if you want a different color, spacing, or size.
   ========================================================================== */


/* ==========================================================================
   2. OUTER FRAME - the bordered container ("Image Border all around")
   ========================================================================== */
.monrai-framed-box {
    /* Change this line to move the whole box or center it on the page */
    margin: 2rem auto;

    /* Change this line to make the frame narrower/wider */
    max-width: 700px;

    /* Change this line for the outer border color/thickness/style */
    border: 6px solid #2c2c2c;

    /* Change this line for the space between the outer border and the inner box */
    padding: 16px;

    /* Change this line for the frame's background color (visible as the "mat" around the inner box) */
    background-color: #ffffff;

    border-radius: 4px;
    box-sizing: border-box;
}

/* ==========================================================================
   3. INNER BOX - the "Scrolling Content Box"
   ========================================================================== */
.monrai-scroll-box {
    /* Change this line to control how tall the box is before it scrolls */
    height: 280px;

    /* This line is what makes it scroll: content taller than the height
       above gets a scrollbar instead of pushing the page down */
    overflow-y: auto;

    /* Change this line for the inner box's own border */
    border: 1px solid #cccccc;

    /* Change this line for the breathing room around the text inside */
    padding: 20px;

    /* Change this line for the inner box's background color */
    background-color: #f9f9f7;

    /* Change this line for the text color */
    color: #333333;

    /* Change this line for the font size of the content */
    font-size: 1rem;
    line-height: 1.6;

    box-sizing: border-box;
}

/* Optional: style the text inside the scroll box */
.monrai-scroll-box p {
    margin: 0 0 1em 0;
}
.monrai-scroll-box p:last-child {
    margin-bottom: 0;
}

/* Optional: nicer scrollbar in browsers that support it (Chrome, Edge, Safari) */
.monrai-scroll-box::-webkit-scrollbar {
    width: 8px;
}
.monrai-scroll-box::-webkit-scrollbar-track {
    background: #eeeeee;
}
.monrai-scroll-box::-webkit-scrollbar-thumb {
    background-color: #999999;
    border-radius: 4px;
}


/* ==========================================================================
   4. RESPONSIVE / MOBILE ADJUSTMENTS
   ========================================================================== */

/* Tablets and small laptops */
@media (max-width: 768px) {
    .monrai-framed-box {
        /* Slightly thinner border and less padding on smaller screens */
        border-width: 4px;
        padding: 12px;
        margin: 1.5rem auto;
    }

    .monrai-scroll-box {
        /* Shorter box so it doesn't dominate the screen */
        height: 240px;
        padding: 16px;
    }
}

/* Phones */
@media (max-width: 480px) {
    .monrai-framed-box {
        border-width: 3px;
        padding: 8px;
        /* Let the frame use more of the narrow screen width */
        max-width: 100%;
        margin: 1rem auto;
    }

    .monrai-scroll-box {
        height: 200px;
        padding: 12px;
        font-size: 0.95rem;
    }
}