/**
 * Responsive styles for Scrolls Community Hub theme
 * Contains media queries and responsive adjustments
 */

/* Device orientation specific styles */
body.is-portrait .wp-block-post-template.is-flex-container {
    display: block !important;
}

body.is-landscape .wp-block-post-template.is-flex-container {
    display: flex !important;
    flex-wrap: wrap !important;
}

body.is-landscape .wp-block-post-template.is-flex-container > li {
    width: 48% !important;
    margin-right: 2% !important;
}

/* Small mobile devices */
@media (max-width: 480px) {
    /* Further adjustments for very small screens */
    .site-header .wp-block-site-title {
        font-size: 1.2rem !important;
    }

    .site-header .wp-block-site-tagline {
        font-size: 0.7rem !important;
    }

    .site-header .wp-block-site-logo {
        width: 40px !important;
    }

    /* Preserve margins for sidebar widgets and default style blocks */
    .sidebar-widget,
    .is-style-default,
    .is-style-card {
        width: auto !important;
        max-width: 100% !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        box-sizing: border-box !important;
    }

    /* Specific fix for sidebar widgets and hero blocks on small screens */
    .wp-block-column[style*="flex-basis:30%"] .wp-block-group,
    .wp-block-column[style*="flex-basis:30%"] .sidebar-widget,
    .wp-block-column[style*="flex-basis:70%"] .is-style-default,
    .wp-block-column .sidebar-widget,
    .wp-block-column .is-style-default {
        width: auto !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        box-sizing: border-box !important;
        border-radius: 0.5rem !important;
    }

    /* Add padding to the content inside elements with background */
    .wp-block-group.has-background > *,
    .wp-block-group.site-header > *,
    .wp-block-group.site-footer > *,
    .site-header > *,
    .site-footer > *,
    .has-dark-background-color > *,
    .has-background > *,
    footer.wp-block-template-part > *,
    header.wp-block-template-part > * {
        box-sizing: border-box !important;
    }
}

/* Responsive adjustments */
@media (max-width: 782px) {
    /* Add padding to main content containers for mobile */
    body .wp-site-blocks {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Ensure elements with background extend to the edge on mobile */


    /* Preserve margins for sidebar widgets and default style blocks on mobile */
    .sidebar-widget,
    .is-style-default,
    .wp-block-group.has-accent-background-color.has-background {
        margin-left: 5px !important;
        margin-right: 5px !important;
        width: auto !important;
        max-width: 100% !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        box-sizing: border-box !important;
        border-radius: 0.5rem !important;
    }

    /* Card specific styles on mobile */
    .is-style-card {
        margin-left: 5px !important;
        margin-right: 5px !important;
        margin-bottom: 20px !important;
        width: auto !important;
        max-width: 100% !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        box-sizing: border-box !important;
        border-radius: 0.5rem !important;
    }

    /* Add padding to the content inside elements with background */
    .wp-block-group.has-background:not(.sidebar-widget):not(.is-style-default):not(.is-style-card) > *,
    .has-dark-background-color:not(.sidebar-widget):not(.is-style-default):not(.is-style-card) > *,
    .has-background:not(.sidebar-widget):not(.is-style-default):not(.is-style-card) > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    h1.has-background, h2.has-background, h3.has-background, h4.has-background, h5.has-background, h6.has-background {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Specific padding for sidebar widgets and default style blocks content */
    .sidebar-widget > *,
    .is-style-card > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Ensure all content has proper margins */
    .entry-content > *,
    .wp-block-post-content > * {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Adjust column layout for mobile */
    .wp-block-columns {
        flex-wrap: wrap;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wp-block-column[style*="flex-basis:70%"],
    .wp-block-column[style*="flex-basis:30%"] {
        flex-basis: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Improve sidebar on mobile */
    .wp-block-column[style*="flex-basis:30%"] {
        margin-bottom: 30px !important;
        order: 2; /* Move sidebar below content on mobile */
    }

    .wp-block-column[style*="flex-basis:70%"] {
        order: 1; /* Show content first on mobile */
    }

    /* Improve sidebar widgets on mobile */
    .wp-block-column[style*="flex-basis:30%"] .wp-block-heading {
        font-size: 1.3rem !important;
    }

    /* Ensure consistent heading sizes on mobile */
    h1, .wp-block-heading.is-style-h1, .wp-block-heading.has-xxx-large-font-size {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    h2, .wp-block-heading.is-style-h2, .wp-block-heading.has-xx-large-font-size, .wp-block-heading.has-x-large-font-size, .wp-block-heading.has-large-font-size {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    h3, .wp-block-heading.is-style-h3, .wp-block-heading.has-larger-font-size {
        font-size: 1.3rem !important;
        line-height: 1.4 !important;
    }

    h4, .wp-block-heading.is-style-h4, .wp-block-heading.has-large-font-size {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
    }

    h5, .wp-block-heading.is-style-h5, .wp-block-heading.has-medium-font-size {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
    }

    h6, .wp-block-heading.is-style-h6, .wp-block-heading.has-small-font-size, .wp-block-heading.has-smaller-font-size {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    /* Adjust header for mobile */
    .site-header {
        height: auto;
        min-height: 80px;
        padding: 10px 0 !important; /* Remove horizontal padding, keep vertical */
    }

    .header-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        align-items: center !important;
        padding: 0 15px !important; /* Add horizontal padding to container instead */
        width: 100% !important;
        gap: 10px !important;
    }

    /* Logo on the left */
    .header-logo-title .wp-block-site-logo {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    /* Title and tagline in the center */
    .header-logo-title .wp-block-group {
        grid-column: 2 !important;
        justify-self: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    /* Navigation on the right */
    .header-navigation {
        grid-column: 3 !important;
        justify-self: end !important;
    }

    /* Adjust header-logo-title to span all columns but let children position themselves */
    .header-logo-title {
        grid-column: 1 / -1 !important;
        display: contents !important;
    }

    /* Responsive site title and tagline */
    .site-header .wp-block-site-title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0 !important;
    }

    .site-header .wp-block-site-tagline {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        margin-top: 0 !important;
        opacity: 0.8;
    }

    /* Adjust site logo size for mobile */
    .site-header .wp-block-site-logo {
        width: 50px !important;
        height: auto !important;
        margin-right: 10px !important;
    }

    /* Adjust card layout for mobile - consolidated with general card styles above */

    /* Improve post cards on mobile */
    .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
    .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
    .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li {
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* Compact cards responsive adjustments */
    .is-style-card-compact {
        flex-direction: column !important;
        min-height: auto !important;
    }

    .is-style-card-compact .wp-block-post-featured-image {
        width: 100% !important;
        height: 200px !important;
        border-radius: 0.5rem 0.5rem 0 0 !important;
    }

    .is-style-card-compact .wp-block-post-featured-image img {
        width: 100% !important;
        height: 200px !important;
        border-radius: 0.5rem 0.5rem 0 0 !important;
    }

    /* Query Loop responsive adjustments */
    .wp-block-query.is-style-posts-compact .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }

    /* Keep horizontal layout on mobile for compact cards */
    .wp-block-query.is-style-posts-compact .wp-block-group.is-layout-flex {
        flex-direction: row !important;
        align-items: flex-start !important;
    }

    .wp-block-query.is-style-posts-compact .wp-block-post-featured-image {
        width: 130px !important;
        height: 130px !important;
        flex-shrink: 0 !important;
        border-radius: 0.5rem 0 0 0.5rem !important;
    }

    .wp-block-query.is-style-posts-compact .wp-block-post-featured-image img {
        width: 130px !important;
        height: 130px !important;
        object-fit: cover !important;
        border-radius: 0.5rem 0 0 0.5rem !important;
    }

    /* Text content styling for mobile */
    .wp-block-query.is-style-posts-compact .wp-block-group.is-layout-flex .wp-block-group {
        flex: 1 !important;
        padding: 0.75rem !important;
    }

    .wp-block-query.is-style-posts-compact .wp-block-post-title {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        margin: 0 0 0.25rem 0 !important;
        text-align: left !important;
    }

    .wp-block-query.is-style-posts-compact .wp-block-post-excerpt {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
    }

    .wp-block-query.is-style-posts-grid .wp-block-post-template {
        grid-template-columns: 1fr !important;
    }

    /* Adjust featured image height for mobile */
    .is-style-card .wp-block-post-featured-image {
        height: 180px !important;
    }

    .is-style-card .wp-block-post-featured-image img {
        height: 180px !important;
        object-fit: cover !important;
    }

    /* Improve post title readability on mobile */
    .is-style-card .wp-block-post-title {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        margin-top: 15px !important;
        margin-bottom: 10px !important;
    }

    /* Adjust excerpt length for mobile */
    .is-style-card .wp-block-post-excerpt {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }

    /* Ensure proper spacing for query blocks */
    .wp-block-query {
        padding-left: 5px;
        padding-right: 5px;
    }

    /* Improve pagination on mobile */
    .wp-block-query-pagination {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 5px;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .wp-block-query-pagination-numbers {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
    }

    /* Improve buttons on mobile */
    .wp-block-button {
        width: 100%;
        margin-bottom: 10px !important;
    }

    .wp-block-buttons {
        flex-wrap: wrap !important;
    }

    .wp-block-button__link,
    .wp-element-button {
        text-align: center;
        padding: 12px !important;
    }

    /* Improve images and media on mobile */
    .wp-block-image img,
    .wp-block-media-text__media img,
    .wp-block-cover img {
        height: auto !important;
    }

    /* Limit featured image height on single posts */
    .single-post .wp-block-post-featured-image,
    .single .wp-block-post-featured-image {
        max-height: 150px !important;
        overflow: hidden !important;
    }

    .single-post .wp-block-post-featured-image img,
    .single .wp-block-post-featured-image img {
        max-height: 150px !important;
        object-fit: cover !important;
        width: 100% !important;
    }

    .wp-block-media-text {
        grid-template-columns: 1fr !important;
    }

    .wp-block-media-text .wp-block-media-text__media {
        margin-bottom: 20px !important;
    }

    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
        order: 1 !important;
    }

    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
        order: 2 !important;
    }

    /* Improve tables on mobile */
    .wp-block-table {
        overflow-x: auto !important;
        display: block !important;
    }

    /* Improve search form on mobile */
    .wp-block-search__input {
        min-height: 45px !important;
    }

    .wp-block-search__button {
        min-height: 45px !important;
        padding: 0 15px !important;
    }

    /* Style for archive, category, tag and search titles on mobile */
    .wp-block-query-title.has-text-align-center i.fa-solid,
    h1.has-text-align-center i.fa-solid,
    h1.wp-block-query-title i.fa-solid {
        margin: 0 auto 0.5rem auto !important;
        text-align: center !important;
        font-size: 1.5rem !important;
    }

    /* Add padding to page titles with dark background on mobile */
    .wp-block-query-title.has-header-gradient-gradient-background,
    h1.has-header-gradient-gradient-background,
    .wp-block-post-title.has-header-gradient-gradient-background,
    .has-background h1,
    .has-background .wp-block-query-title {
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* Center page titles and first post date on mobile */
    h1.wp-block-post-title {
        text-align: center !important;
    }

    /* Center post date on mobile - with higher specificity */
    .wp-block-post-date {
        text-align: center;
    }

    /* Keep subsequent post dates aligned left */
    .post .wp-block-post-date {
        text-align: left;
    }

    .wp-block-buttons {
        gap: 0.5rem !important;
    }

    /* Improve footer on mobile */
    .site-footer .wp-block-columns {
        gap: 30px !important;
    }

    .site-footer .wp-block-column {
        margin-bottom: 20px !important;
    }

    .site-footer .wp-block-site-title {
        font-size: 1.5rem !important;
        margin-bottom: 10px !important;
    }

    .site-footer .wp-block-heading {
        font-size: 1.3rem !important;
        margin-bottom: 15px !important;
        padding-bottom: 5px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .site-footer .wp-block-navigation {
        margin-bottom: 20px !important;
    }

    .site-footer .wp-block-social-links {
        justify-content: flex-start !important;
    }

    /* Fix for header and footer on mobile */
    header.wp-block-template-part,
    footer.wp-block-template-part,
    .site-header,
    .site-footer {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Specific fix for sidebar widgets and hero blocks */
    .wp-block-column[style*="flex-basis:30%"] .wp-block-group,
    .wp-block-column[style*="flex-basis:30%"] .sidebar-widget,
    .wp-block-column[style*="flex-basis:70%"] .is-style-default,
    .wp-block-column .sidebar-widget,
    .wp-block-column .is-style-default,
    .wp-block-group.has-accent-background-color.has-background {
        width: auto !important;
        max-width: 100% !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        box-sizing: border-box !important;
        border-radius: 0.5rem !important;
    }

    /* Add padding to the content inside elements with background */
    .site-footer > *,
    footer.wp-block-template-part > * {
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box !important;
    }

    /* Header content padding is handled by header-container */
    header.wp-block-template-part > *:not(.header-container) {
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: border-box !important;
    }

    /* Preserve original padding for sidebar widgets and hero blocks */
    .wp-block-column[style*="flex-basis:30%"] .wp-block-group > *,
    .wp-block-column[style*="flex-basis:30%"] .sidebar-widget > *,
    .wp-block-column .sidebar-widget > *,
    .wp-block-group.has-accent-background-color.has-background > * {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}