/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://blog.sunghwanyoo.com/
Template: twentytwentyfive
Author: Sunghwan Yoo & Antigravity
Author URI: https://blog.sunghwanyoo.com/
Description: Responsive child theme for Twenty Twenty-Five to fix mobile columns squishing and polish overall layout.
Version: 1.0.0
Text Domain: twentytwentyfive-child
*/

/* ==========================================================================
   Desktop/Medium Screen Fluid Spacing Overrides (min-width: 782px)
   ========================================================================== */
@media (min-width: 782px) {
    /* Limit the nested paddings on all desktop sizes to make text width wider and more balanced */
    .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column:not([style*="flex-basis:8rem"]):not([style*="flex-basis: 8rem"]) {
        padding-left: clamp(20px, 4vw, 50px) !important;
        padding-right: clamp(20px, 4vw, 50px) !important;
    }
    
    main.wp-block-group .wp-block-columns[style*="padding"] {
        padding-left: clamp(15px, 3vw, 40px) !important;
        padding-right: clamp(15px, 3vw, 40px) !important;
    }
    
    main.wp-block-group .wp-block-column[style*="padding"] {
        padding-left: clamp(10px, 2vw, 30px) !important;
        padding-right: clamp(10px, 2vw, 30px) !important;
    }
    
    .single-post .wp-block-post-title {
        margin-left: clamp(15px, 3vw, 40px) !important;
        margin-right: clamp(15px, 3vw, 40px) !important;
    }
}

/* ==========================================================================
   Mobile/Tablet Responsive Layout Overrides (max-width: 781px)
   ========================================================================== */
@media (max-width: 781px) {
    /* 1. Force the outer columns layout containing vertical header and content to stack */
    .wp-block-columns.is-not-stacked-on-mobile {
        flex-wrap: wrap !important;
        flex-direction: column !important;
    }
    
    .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 2. Reset flex-basis on the vertical header column container */
    .wp-block-column[style*="flex-basis:8rem"],
    .wp-block-column[style*="flex-basis: 8rem"] {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. Convert vertical header to horizontal mobile header */
    .wp-block-template-part header.wp-block-template-part,
    header.wp-block-template-part {
        width: 100% !important;
        border-bottom: 1px solid var(--wp--preset--color--accent-6);
        background-color: var(--wp--preset--color--base);
    }
    
    header.wp-block-template-part > .wp-block-group {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Override 100vh minHeight set for vertical centering in vertical-header */
    header.wp-block-template-part .wp-block-group[style*="min-height: 100vh"],
    header.wp-block-template-part .wp-block-group[style*="min-height:100vh"] {
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Align Site Title and Hamburger Menu horizontally on mobile */
    header.wp-block-template-part .wp-block-group.alignfull {
        display: flex !important;
        flex-direction: row-reverse !important; /* Put Site Title (last child) on left, Nav (first child) on right */
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Make site title text horizontal and align center/left */
    .wp-block-site-title,
    .wp-block-site-title[style*="writing-mode"] {
        writing-mode: horizontal-tb !important;
        margin: 0 !important;
        font-size: 1.3rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.5px !important;
        display: inline-block !important;
    }
    
    /* Center text alignments on mobile site title just in case */
    .wp-block-site-title a {
        display: inline-block !important;
        writing-mode: horizontal-tb !important;
    }

    .wp-block-navigation {
        margin: 0 !important;
        display: inline-block !important;
    }

    /* 4. Reset content column padding to full width on mobile */
    .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column:not([style*="flex-basis:8rem"]):not([style*="flex-basis: 8rem"]) {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 5. Deep reset of all heavy nested paddings on groups/columns inside main */
    main.wp-block-group .wp-block-group,
    main.wp-block-group .wp-block-columns,
    main.wp-block-group .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reset the columns padding specifically */
    main.wp-block-group .wp-block-columns[style*="padding"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    main.wp-block-group .wp-block-column[style*="padding"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 30px !important; /* give breathing room between content and sidebar when stacked */
    }

    /* Adjust main post title spacing on mobile */
    .wp-block-post-title {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        font-size: 1.8rem !important;
        line-height: 1.25 !important;
        text-align: left !important; /* Left alignment is cleaner on mobile */
    }

    /* Reset margin values on parent headers if any */
    main .wp-block-group[style*="margin"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Make post content readable with standard block gaps */
    .entry-content > * {
        margin-top: 1.2rem !important;
        margin-bottom: 1.2rem !important;
    }
}