/*
Theme Name:     Midwest Roofing
Theme URI:      n/a
Template:       kadence
Author:         Joshua Callandret
Author URI:     n/a
Description:    Child theme for managing customizations on the Midwest Roofing website.
Version:        1.0
License:        GNU General Public License v3.0 (or later)
License URI:    https://www.gnu.org/licenses/gpl-3.0.html
*/

/* ==========================================================================
   TABLE OF CONTENTS
   ========================================================================== */

/*
  1. UTILITY CLASSES
     - Text formatting utilities
     - Link styling utilities

  2. LAYOUT & COMPONENTS
     - Kadence Split Content styling
     - Image overlays
     - Google Maps container

  3. PLUGINS & THIRD-PARTY
     - AWSM Jobs plugin styling

  4. LOCATION PAGES
     - Neighborhood locations list
     - Nearby locations navigation

  5. MEDIA QUERIES
     - Mobile responsive adjustments
*/


/* ==========================================================================
   1. UTILITY CLASSES
   ========================================================================== */

/* Text Formatting Utilities
   ========================================================================== */

/* Apply balanced text wrapping for better typography */
.balance {
    text-wrap: balance !important;
}

/* Convert text to lowercase (e.g., email addresses in footer) */
.lowercase {
    text-transform: lowercase;
}


/* Link Styling Utilities
   ========================================================================== */

/* Force white color on links */
.link-white a {
    color: white;
}


/* ==========================================================================
   2. LAYOUT & COMPONENTS
   ========================================================================== */

/* Kadence Split Content Styling
   ========================================================================== */

/* Add border radius to Kadence Split Content images */
.kt-sc-imgcol {
    border-radius: 10px;
}


/* Image Overlays
   ========================================================================== */

/* Add subtle border radius to image overlay titles */
.image-overlay-title {
    border-radius: 5px;
}


/* Google Maps Container
   ========================================================================== */

/* Style the Google Maps block with rounded corners and proper sizing */
.wp-block-kadence-googlemaps {
    width: 100%;             /* Take up full width of the column */
    height: 500px;           /* Adjust this number to make the map taller */
    border-radius: 10px;     /* Rounded corners */
    overflow: hidden;        /* Keeps map corners inside the radius */
    border: 1px solid #ddd;  /* Subtle border */
    margin-bottom: 20px;
}

/* Ensure the map inside fills the rounded container */
.wp-block-kadence-googlemaps div {
    border-radius: inherit;
}


/* ==========================================================================
   3. PLUGINS & THIRD-PARTY
   ========================================================================== */

/* AWSM Jobs Plugin Styling
   ========================================================================== */

/* Add border radius to job opening list elements */
.awsm-job-wrap * {
    border-radius: 10px;
}

/* Style the job application form container */
.awsm-job-form-inner {
    border-radius: 10px;
    background-color: var(--global-palette8);
}


/* ==========================================================================
   4. LOCATION PAGES
   ========================================================================== */

/* Neighborhood Locations List
   ========================================================================== */

/* Desktop: Display neighborhood locations in 2-column layout */
.mw-local-list {
    display: block;
    column-count: 2;
    column-gap: 50px;
    list-style-position: inside;
    max-width: 800px;
    margin: 0 auto !important;  /* Center the entire list block */
    padding: 0;
}


/* Nearby Locations Navigation
   ========================================================================== */

/* Display nearby location links in flexible grid */
.nearby-locations-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}


/* ==========================================================================
   5. MEDIA QUERIES
   ========================================================================== */

/* Mobile Responsive Adjustments (Screens 767px and below)
   ========================================================================== */

@media (max-width: 767px) {

    /* Neighborhood Locations List - Mobile */
    /* Switch to single column and constrain width for better mobile display */
    .mw-local-list {
        column-count: 1;
        max-width: 280px;           /* Constrains width for centered appearance */
        margin: 0 auto !important;
        text-align: left;           /* Keep bullets left-aligned within centered block */
    }

    /* Nearby Locations Navigation - Mobile */
    /* Stack links vertically and center on mobile */
    .nearby-locations-links {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 15px;
        flex-wrap: wrap;
        max-width: 300px;           /* Constrains width for centered appearance */
    }
}






/* 1. Hide buttons initially */
html:not(.location-loaded):not(.location-instant) .dynamic-phone-button, 
html:not(.location-loaded):not(.location-instant) .header-button, 
html:not(.location-loaded):not(.location-instant) .mobile-header-button,
html:not(.location-loaded):not(.location-instant) .secondary-hero-button {
    opacity: 0 !important;
}

/* 2. Transition for the fade */
.dynamic-phone-button,
.header-button,
.mobile-header-button,
.secondary-hero-button {
    transition: opacity 0.6s ease-in-out !important;
}

/* 2. Show Rule */
html.location-loaded .dynamic-phone-button, 
html.location-loaded .header-button, 
html.location-loaded .mobile-header-button,
html.location-loaded .secondary-hero-button,
html.location-instant .dynamic-phone-button, 
html.location-instant .header-button, 
html.location-instant .mobile-header-button,
html.location-instant .secondary-hero-button {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important; /* Forces it to stay in the layout */
}

/* Base transition */
.dynamic-phone-button, .header-button, .mobile-header-button, .secondary-hero-button {
    transition: opacity 0.4s ease-in-out !important;
}