/*
 * Filename: html/css/custom-styles.css
 * Purpose: Custom CSS rules to correct layout inconsistencies on the GroLab Tutorials page,
 * ensuring robust rendering across different languages and screen sizes.
 */

/* =========================================================================
 * 1. MAIN TITLE AND VERSION LAYOUT FIXES (Transferred from inline HTML styles)
 * -------------------------------------------------------------------------
 * This targets the 'page-title' container to enforce a Flexbox layout, 
 * resolving the overlap issue caused by long translated titles.
 */
.page-head .page-title {
    /* Rules transferred from <div class="page-title" style="..."> */
    display: flex; 
    align-items: baseline; 
    gap: 10px; 
    flex-wrap: wrap;
    width: 100%;
}

/* Ensure the H1 is cleanly integrated into the Flexbox layout */
.page-head .page-title h1 {
    /* Rule transferred from <h1 style="margin-bottom: 0;"> */
    margin-bottom: 0;
}

/* Specific styling for the Version Number (H6) - Transferred from inline HTML styles */
#version-number {
    /* Rules transferred from <h6 id="version-number" style="..."> */
    margin: 0 !important; 
    white-space: nowrap; 
}



/* =========================================================================
 * 3. HEADER VERTICAL SPACING REFINEMENTS (NEW SECTION)
 * -------------------------------------------------------------------------
 * Reduces the excessive space between the top logo (page-header) and the main content/title (page-head).
 */

/* Target the container wrapping the header content (Logo area) and reduce its bottom spacing */
.page-header .page-header-top {
    /* Reduz o padding interno que pode estar a causar o espaço excessivo */
    padding-bottom: 5px !important; 
}

/* Target the main container wrapping the entire header and reduce its margin/space below it */
.page-wrapper-top {
    /* Reduz a margem que separa o cabeçalho (logo) do conteúdo seguinte (título) */
    margin-bottom: 15px; /* Valor ajustado para um espaçamento mais compacto. */
}

/* =========================================================================
 * 4. MOBILE RESPONSIVENESS (Enhancing Readability on Small Screens)
 * -------------------------------------------------------------------------
 * Reduces the main title font size on mobile devices.
 */
@media (max-width: 576px) {
    .page-head .page-title h1 {
        font-size: 2rem; 
    }
}