/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Gutenkit compatibility fixes for GeneratePress child theme */
.gutenkit-generatepress .wp-block-gutenkit-container {
    margin-block-start: 1.2rem;
    margin-block-end: 0;
}

.gutenkit-generatepress .wp-block-gutenkit-container.alignwide {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.gutenkit-generatepress .wp-block-gutenkit-container.alignfull {
    margin-left: auto;
    margin-right: auto;
    max-width: none;
    width: auto;
}

.gutenkit-generatepress .entry-content > .wp-block-gutenkit-container {
    margin-block-end: 0;
    margin-block-start: 1.2rem;
}

/* Ensure Gutenkit block classes work properly */
.gkit-flipbox {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.gkit-flipbox:hover {
    transform: rotateY(180deg);
}

.gkit-flipbox-front,
.gkit-flipbox-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.gkit-flipbox-back {
    transform: rotateY(180deg);
}

/* Fix flipbox responsive behavior */
@media (max-width: 768px) {
    /* Force flipboxes to stack vertically with clear positioning */
    .gkit-flip-box {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 120px auto !important;
        float: none !important;
        clear: both !important;
        text-align: center !important;
        border-top: 2px solid #fff !important;
    }
    
    /* Ensure containers don't interfere */
    .wp-block-gutenkit-container,
    .gkit-block__inner {
        display: block !important;
        overflow: visible !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    /* Override any absolute positioning */
    .gkit-flip-box-front,
    .gkit-flip-box-back {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* Ensure all Gutenkit blocks have proper box-sizing */
[class*="gkit-"],
[class*="wp-block-gutenkit-"] {
    box-sizing: border-box;
}

[class*="gkit-"] *,
[class*="wp-block-gutenkit-"] * {
    box-sizing: border-box;
}

/* Fix mobile navigation layout */
@media (max-width: 768px) {
    /* Fix logo container to not take full width on narrow screens */
    #block-4bcda42b-6a39-4835-be44-45b62289e830 {
        width: auto !important;
        max-width: 200px !important; /* Limit max width to prevent jumping */
        float: left !important;
        display: inline-block !important;
        margin: 0 !important;
        padding-left: 10px !important; /* Add padding to container instead */
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    #block-4bcda42b-6a39-4835-be44-45b62289e830 .gkit-block__inner {
        width: auto !important;
        max-width: 200px !important; /* Match container max-width */
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Keep logo on the left with stable positioning */
    .wp-block-site-logo,
    .custom-logo-link,
    .custom-logo {
        text-align: left !important;
        float: left !important;
        margin-right: auto !important;
        padding: 0 !important; /* No padding on logo elements */
        vertical-align: top !important; /* Keep logo at top alignment */
        margin-top: 0 !important; /* Prevent any top margin */
        margin-bottom: 0 !important; /* Prevent any bottom margin */
        position: relative !important; /* Stable positioning */
    }
    
    /* Override alignleft behavior that might be causing the jump */
    .is-default-size.alignleft {
        float: left !important;
        margin-right: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        vertical-align: top !important;
    }
    
    /* Keep hamburger menu on the right, aligned with logo */
    .gkit_navSidebar-button,
    .gkit_offcanvas-sidebar {
        float: right !important;
        margin-left: auto !important;
        position: relative !important;
        vertical-align: middle !important; /* Changed from top to middle for better alignment */
        padding-right: 5px !important; /* Reduced padding to prevent overflow */
        padding-left: 5px !important; /* Added left padding for balance */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        max-width: 30px !important; /* Prevent expansion */
        box-sizing: border-box !important; /* Include padding in width calculation */
        margin-top: 0 !important; /* Ensure no top margin */
        margin-bottom: 0 !important; /* Ensure no bottom margin */
    }
    
    /* Hide the X when offcanvas is not active */
    .gkit_offcanvas-sidebar:not(.active) .gkit-icon[class*="close"],
    .gkit_offcanvas-sidebar:not(.active) .gkit-icon[class*="times"] {
        display: none !important;
    }
    
    /* Show hamburger icon when offcanvas is not active */
    .gkit_offcanvas-sidebar:not(.active) .gkit-icon:not([class*="close"]):not([class*="times"]) {
        display: block !important;
    }
}

/* Fix off-canvas close button positioning */
.widgetarea_warper_edit {
    padding-top: 40px !important;
}

/* Reduce font size of stylish list titles */
.gkit-stylish-list-content-title {
    font-size: 0.9em !important;
}

/* Ensure image effects are visible in off-canvas - only when active */
.gkit-offcanvas-toggle-wraper.active .gkit-sidebar-widget .wp-block-gutenkit-advanced-image,
.gkit-offcanvas-toggle-wraper.active .gkit-sidebar-widget .gkit21e4ff {
    position: relative !important;
}

/* Force Gutenkit image effects to work in off-canvas */
.gkit-offcanvas-toggle-wraper.active .gkit-sidebar-widget .wp-block-gutenkit-advanced-image * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Try to restore any missing CSS properties that might be causing the effect to disappear */
.gkit-offcanvas-toggle-wraper.active .gkit-sidebar-widget .wp-block-gutenkit-advanced-image {
    overflow: visible !important;
    z-index: auto !important;
}

/* Force Gutenkit image effect classes to work in off-canvas */
.gkit-offcanvas-toggle-wraper.active .gkit-sidebar-widget [class*="gkit-image"],
.gkit-offcanvas-toggle-wraper.active .gkit-sidebar-widget [class*="gkit-effect"],
.gkit-offcanvas-toggle-wraper.active .gkit-sidebar-widget [class*="gkit-overlay"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure any pseudo-elements or effects are visible */
.gkit-offcanvas-toggle-wraper.active .gkit-sidebar-widget .wp-block-gutenkit-advanced-image::before,
.gkit-offcanvas-toggle-wraper.active .gkit-sidebar-widget .wp-block-gutenkit-advanced-image::after {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fix alignfull blocks breaking out of entry-content */
.entry-content > .wp-block-gutenkit-container.alignfull {
    width: 100% !important;
    max-width: 1200px !important; /* Match main content width */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Specific fix for story page alignfull containers */
#block-499921f6-1d91-47f4-9745-f5bbc022c7c5,
#block-fa8add31-2ba3-4b8f-a611-e9e73b3ad173,
#block-ce7de748-08cd-4bd7-8e0d-21ed40c4fb5f {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* 
 * BACKUP: Latest working version - 60/40 layout with Google Map working
 * Date: Current session - all content properly positioned and visible
 */

/* Fix for the specific problematic container - 60/40 horizontal layout */
#block-7e5ce6a5-8841-40e9-b68f-a7bb327b733f .gkit-block__inner {
    display: flex !important;
    flex-direction: row !important;
    gap: 15px !important;
    padding: 0 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

#block-391765d8-6991-4dba-b606-ebfeca03122f {
    flex: 0 0 60% !important;
}

#block-391765d8-6991-4dba-b606-ebfeca03122f .gkit-block__inner {
    display: block !important;
}

#block-fe28d6c3-6951-4f4b-9d88-4e8ef234a643 {
    flex: 0 0 40% !important;
    position: relative !important;
}

#block-fe28d6c3-6951-4f4b-9d88-4e8ef234a643 .gkit-block__inner {
    display: block !important;
    position: relative !important;
}

/* Force the specific child blocks to stay within the yellow box */
#block-88023812-fda3-4b83-ae38-10758d24587a,
#block-110150b7-1c19-4cdf-8e38-43639ee5c650 {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Minimal, fully scoped map fix */
#block-e0defefd-9a78-4667-aa95-213337ed2244 .gkit-google-map {
  min-height: 300px;          /* stable, non-zero height */
  height: 300px;               /* fixed height to prevent resizing */
  width: 100% !important;      /* make map fill the container width */
}

/* Neutralize hostile global resets only inside the map */
#block-e0defefd-9a78-4667-aa95-213337ed2244 .gkit-google-map img,
#block-e0defefd-9a78-4667-aa95-213337ed2244 .gkit-google-map canvas,
#block-e0defefd-9a78-4667-aa95-213337ed2244 .gkit-google-map svg {
  max-width: none !important; /* let Google control sizing */
  height: auto;               /* avoid forced stretching */
  display: block;
}

/* Responsive behavior */
@media (max-width: 768px) {
    #block-7e5ce6a5-8841-40e9-b68f-a7bb327b733f .gkit-block__inner {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    #block-391765d8-6991-4dba-b606-ebfeca03122f,
    #block-fe28d6c3-6951-4f4b-9d88-4e8ef234a643 {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
}