/* Base Styles */

/* Styles the main header container */
header.container-header {
    background-color: #006600; /* Sets a dark green background color */
    background-image: none; /* Ensures no background image is used */
}

/* Styles the topbar inside the header */
header .container-topbar {
    background-color: #464646; /* Dark gray background for contrast */
    outline: thin solid black; /* Adds a thin black border around the element */
    text-align: center; /* Centers inline content horizontally */
}

/* Styles the navigation area inside the grid layout */
.grid-child.container-nav {
    background-color: #005600; /* Slightly darker green than the header */
}

/* Centers the navigation list items horizontally */
.grid-child.container-nav ul {
    justify-content: center; /* Centers the flex items (likely navigation links) inside the ul */
}

/* Styles a lower bar element within the grid */
.grid-child.container-lowbar {
    background-color: #464646; /* Matches topbar for visual consistency */
    display: flex; /* Enables flex layout to arrange children horizontally */
    justify-content: space-between; /* Pushes child elements to far left and right edges */
    /* outline: thick solid black; /* Adds border for separation or visual emphasis */
    box-shadow: inset 0 7px 7px -4px black;
}

/* Styles an intermediary container below the topbar */
.grid-child.container-below-top {
    display: flex; /* Flex layout to arrange children in a row */
    justify-content: space-between; /* Places children at opposite ends */
    align-items: center; /* This vertically centers all child elements */
    padding-top: 1.5px;
    padding-bottom: 1.5px;
}

/* Main grid layout that holds various page sections */
.site-grid {
    display: flex; /* Horizontal flex layout for child elements */
    padding-left: 2em;
    padding-right: 2em;
}

/* Sidebar styling - both left and right */
.grid-child.container-sidebar-left,
.grid-child.container-sidebar-right {
    flex: 1.25; /* Takes 1.25 of available space relative to others */
    min-width: 100px; /* Prevents sidebars from collapsing too small on smaller screens */
}

/* Main content area styling */
.grid-child.container-component {
    flex: 5.75; /* Takes 5.75 units of available space — larger than sidebars */
    min-width: 0; /* Allows shrinking below natural content size if needed to prevent layout overflow */
}

/* Form controls and inputs */
.form-control,
textarea,
input[type="email"],
input[type="password"],
.com-users-login__options .list-group-item,
select.form-select,
select.advancedSelect,
meter {
    width: 100%;
    max-width: 600px;
}

/* Sidebar card borders */
.grid-child.container-sidebar-right .sidebar-right.card {
    border: none;
}

.grid-child.container-sidebar-left .sidebar-left.card {
    border: none;
}

/* Styles for the "Актуално" article page */

/* Styles for the "Сайтът на старата Българска Вяра" component */
body.itemid-101 .grid-child.container-component .com-content-article.item-page {
    border: 0.0625rem solid #c90000;
    border-radius: 0.25rem; /* slightly rounded corners */
}

body.itemid-101
    .grid-child.container-component
    .com-content-article.item-page
    .page-header
    h1 {
    font-size: 1.75rem; /* h3 size */
    background-color: #c90000;
    color: white;
    text-align: center;
    margin: 0; /* removes default margins */
    padding: 0.5rem 1rem; /* 0.5rem top/bottom, 1rem left/right */
}

/* Styles for all components underneath the "Сайтът на старата Българска Вяра" component */
body.itemid-101
    .grid-child.container-component
    .com-content-article.item-page
    .com-content-article__body {
    padding: 1rem;
}

body.itemid-101 .grid-child.container-component .main-bottom.card {
    border-color: #c90000;
}

body.itemid-101 .grid-child.container-component .main-bottom.card .card-header {
    background-color: #c90000;
    color: white;
    text-align: center;
    border-color: #c90000;
}

/* Scrollable Gallery categories on mobile */
.container-sidebar-left .jstree {
    overflow-x: auto; /* enable horizontal scroll */
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}

.container-sidebar-left .jstree .jstree-container-ul {
    display: inline-block; /* prevent the UL from shrinking */
}

.pg-item-box-title {
    overflow-x: auto;
}

@media (max-width: 768px) {
    form.com-content-category__articles {
        overflow-x: auto; /* enable horizontal scroll */
        -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    }

    form.com-content-category__articles table {
        min-width: 600px; /* or larger if your table usually needs it */
    }
}

@media (max-width: 768px) {
    /* adjust breakpoint as needed */
    #mod-custom116 img {
        width: 47%; /* smaller width for mobile */
        height: auto; /* keep aspect ratio */
    }
}

@media (max-width: 768px) {
    .list-title .item-image img {
        max-width: 100%; /* never exceeds the container width */
        height: auto; /* preserves aspect ratio */
    }
}

/* Responsive Styles (Media Queries) */
@media (max-width: 992px) {
    .site-grid {
        flex-direction: column;
        padding-left: 1em;
        padding-right: 1em;
    }
    /* Make sure main content is first */
    .grid-child.container-component {
        order: 0;
    }
    /* Sidebars after */
    .grid-child.container-sidebar-left {
        order: 1;
    }
    .grid-child.container-sidebar-right {
        order: 2;
    }
    .grid-child.container-sidebar-left,
    .grid-child.container-sidebar-right,
    .grid-child.container-component {
        flex: none;
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 992px) {
    .grid-child.container-below-top {
        flex-direction: column;
    }
    #mod-custom118 {
        margin-top: 0.5em;
    }
}

/* to handle your super long quote titles in the Цитати Category List view
 when the table content is short, the browser still treats it like a scrollable block instead of letting it expand to full width,
 which breaks it */
/*@media (max-width: 992px) {
    .com-content-category__table {
        display: block;
        overflow-x: auto;
    }
}*/

@media (max-width: 992px) {
    .form-control,
    textarea,
    input[type="email"],
    input[type="password"],
    .com-users-login__options .list-group-item,
    select.form-select,
    select.advancedSelect,
    meter {
        max-width: 400px; /* smaller max width for tablets */
    }
}

/* On the Партньори page, shrink only if larger than 300px in width */
.com-weblinks-category__items img {
    max-width: 500px; /* Large pics will shrink to this */
    height: auto; /* Keep proportions */
    display: block;
}

.weblink-category h1 {
    background-color: #c90000;
    color: white;
    padding: 0.5rem 1rem;
}

.com-contact.contact h2 {
    background-color: #c90000;
    color: white;
    padding: 0.5rem 1rem;
}

.com-contact__form.contact-form {
    padding: 0.5rem 1rem;
    background-color: #f7f7f7;
}

.com-weblinks-category__items li.list-group.mt-3 {
    background-color: #f7f7f7;
}

/*body.quotes-page .list-title a {
    display: inline-block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}*/

body.itemid-101 .content_rating,
body.itemid-101 .content_vote,
body.itemid-101 .com-content-article .pdf-print-icon {
    display: none !important;
}

@media (max-width: 992px) and (orientation: landscape) {
    .ostimer-mod-177,
    #ic-calendar-176,
    #login-form-166 {
        max-width: 380px;
    }
}

@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
    .ostimer-mod-177,
    #ic-calendar-176,
    #login-form-166 {
        max-width: 420px;
    }
}

@media (max-width: 576px) {
    form[name="adminForm"] .form-select {
        width: 100%;
}

@media (max-width: 576px) {
    .com-content-category__counter {
        float: none !important;
    }
}