/*!
Theme Name:   Cindy Child
Template:     cindy
Theme URI:    https://github.com/webmandesign/child-theme/
Author:       WebMan Design
Author URI:   https://www.webmandesign.eu/
Version:      1.0.5
Description:  Irisland Access Custom Theme - Optimized for DOM Structure & Accessibility
License:      GNU General Public License v3
License URI:  http://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is licensed under the GPL.
*/

/* ==========================================================================
   1. Header & Navigation (Global Desktop)
   ========================================================================== */

/* * LOGO UPDATE (v1.0.5)
 * Targeted specifically as the <section> widget wrapper.
 * We ensure the container fits the content, and the image respects the height limit.
 */
section#media_image-38 { 
    width: auto;       /* Let the container shrink to fit the image */
    max-width: 250px;   /* Prevent overflow */
    margin-right: 2rem !important; /* Maintain gap between logo and menu */
    border: none;      /* Reset any theme borders on the widget */
}

section#media_image-38 img {
    max-width: 250px; /* Strict width limit */
    height: auto;      /* Ensure browser calculates height correctly */
    object-fit: contain;
    display: block;    /* Removes inline spacing gaps */
}

/* Hide the original theme nav to use our widget-based nav */
.main-navigation-section { display: none; }

/* * Header Widget Container
 * Flexbox manages the Logo (Left) and Menu (Right).
 */
.header-widgets .widget_nav_menu {
    flex: 1 1 auto; /* Allows the menu container to fill all remaining space */
    min-width: 0;   /* Safety check for flex overflows */
}

/* Menu List Styling */
.header-widgets .menu-main-menu-container ul.menu {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    list-style: none;
   gap: 0;   /* Space between standard menu items */
}

/* * RIGHT ALIGNMENT FIX
 * This specifically targets the last item ("Contact") and applies auto margin.
 * This consumes all available empty space, forcing the button to the far right.
 */
.header-widgets .menu-main-menu-container ul.menu li:last-child {
    margin-left: auto;
}

/* * "Contact" Menu Item -> Styled as a Button
 * WCAG NOTE: Line-height 1.2 improves readability.
 */
.header-widgets .menu-main-menu-container ul.menu li:last-child a {
    background: transparent;
    color: #fff;
    padding: 0.55em 1.1em;
    border-radius: 999px; /* Pill shape */
    border: 3px solid #c49149;
    font-weight: 700;
    text-decoration: none;
    line-height: 1.2;
    display: inline-block;
    transition: background .2s ease, color .2s ease;
}

/* Hover & Focus State for Contact Button (Accessibility Optimized) */
.header-widgets .menu-main-menu-container ul.menu li:last-child a:hover,
.header-widgets .menu-main-menu-container ul.menu li:last-child a:focus {
    background: #006ad1;
    color: #ffffff;
    outline: none; 
}

/* ==========================================================================
   2. Page Header: "The Yellow Button" Title
   ========================================================================== */

/* * Transforms H1 text into the yellow badge/button style.
 * display: inline-block prevents the yellow box from stretching full width.
 */
.page-header-text h1.page-title {
    display: inline-block; 
    background-color: #ffd700; /* Yellow */
    color: #000000; /* Black Text (High Contrast) */
    padding: 0.8em 1.6em; 
    border-radius: 25px; 
    font-size: 1.5rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    
    /* Accessibility: Clear focus indicator for keyboard users */
    outline: 3px solid transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.otgs-development-site-front-end {display:none;}

/* * WCAG COMPLIANCE FIX:
 * Text remains black on darker yellow hover to pass contrast ratio (13:1).
 */
.page-header-text h1.page-title:hover,
.page-header-text h1.page-title:focus {
    background-color: #ffd705; 
    color: #000000; 
    text-decoration: none;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.4); /* Focus ring */
}

/* Hide summary text (description) below the title */
.page-header-text .page-summary { display: none; }

/* Desktop Header Height */
.page-header { height: 600px; }

/* Desktop Positioning of the Title Button */
.entry-header-text {
    top: 13rem;
    left: 1.2rem;
    position: absolute; /* Desktop only */
}

/* Hide unnecessary meta data */
.menu-social-links, 
.entry-meta-description, 
.page-header .page-meta { display: none; }

/* ==========================================================================
   3. Services & Content Layouts
   ========================================================================== */

.service-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
    width: 100%;
    margin: 0 auto;
}

.has-background.alignfull { padding: 0 20px; }

/* Service Block Styling (Double Border Boxes) */
.service-block {
    flex: 1 1 100%;
    box-sizing: border-box;
    background-color: #ffd700;
    border: 2px double #f7d43b;
    border-radius: 5%;
    padding: 20px;
    text-align: center;
    display: flex; 
    flex-direction: column;
}

/* Clean up image sizing in blocks */
.wp-block-image.is-style-default img {
    width: 100%;
    height: 100%;
    padding: 20px;
}
.wp-block-group.wp-block-group { gap: 0 !important; }

/* Vertical Alignment Utility */
.v-align-middle {
    align-items: center;
    gap: .2em;
}

/* Circular Image Styling */
.v-align-middle .wp-block-image.is-style-default {
    max-width: 200px;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 10px solid #ffd700;
    overflow: hidden;
    margin: 0 auto;
}

.v-align-middle .wp-block-image.is-style-default img {
    object-fit: cover;
}

/* ==========================================================================
   4. Footer Grid (Mobile First Methodology)
   ========================================================================== */

#footer-2-widgets {
    display: grid;
    /* Default: 2 Columns (Mobile) */
    grid-template-columns: repeat(2, 1fr); 
    gap: 1rem;
    padding: 1rem;
    place-items: center;
    width: 100%;
    overflow: hidden;
}

/* Center content */
.footer-widgets :only-child, 
.site-info-content { text-align: center; margin: 0 auto; }

/* Footer Images (Partner Logos) */
.footer-widgets img {
    max-height: 8rem;
    width: auto;
    object-fit: contain;
    display: block;
}

.footer-1-widgets-content { padding: 0; }
.site-footer-section { padding: 0 0 1rem 0; }
.center-column { justify-content: center; }

/* ==========================================================================
   5. Uniform Image Grid (Prevent Distortion)
   ========================================================================== */

/* Force specific aspect ratio for galleries/columns */
.wp-block-gallery.is-cropped .wp-block-image,
.wp-block-columns .wp-block-image {
    aspect-ratio: 2 / 3;
}

/* Reset aspect ratio for specific areas */
.service-block .wp-block-image,
.moviereader .wp-block-image {
    aspect-ratio: auto;
}

/* 6-Column Gallery strict sizing */
.wp-block-gallery.columns-6 .wp-block-image {
    flex-grow: 0;
    width: calc(100% / 6 - var(--gallery-block--gutter-size, 16px) * 5 / 6);
}

.wp-block-gallery.is-cropped .wp-block-image img,
.wp-block-columns .wp-block-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/* ==========================================================================
   6. Responsive Breakpoints
   ========================================================================== */

/* Tablet / Medium Screens */
@media (min-width: 768px) {
    #footer-2-widgets { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 801px) and (max-width: 1100px) {
    .service-block {
        flex: 1 1 calc(33.33% - 13.34px);
        max-width: calc(33.33% - 13.34px);
        text-align: left;
    }
}

/* Desktop Screens */
@media (min-width: 1024px) {
    #footer-2-widgets { grid-template-columns: repeat(5, 1fr); }
    .moviereading .wp-block-columns .wp-block-image {
        aspect-ratio: auto !important;
        height: auto !important;
    }
}

@media (min-width: 1101px) {
    .service-block {
        flex: 1 1 50%;
        max-width: 50%;  
        text-align: center;
    }
}

/* ==========================================================================
   7. Mobile Layout & Burger Menu (max-width: 768px)
   ========================================================================== */

/* * Hamburger Menu Styles
 * Targeting HTML: <div id="mobile-menu-toggle"><span></span>...</div>
 */
#mobile-menu-toggle {
    display: none; /* Hidden on desktop */
    cursor: pointer;
    position: relative;
    width: 30px;
    height: 25px;
    margin-left: auto;
    margin-bottom: 15px;
    z-index: 1001; /* Ensure it sits above the menu when open */
    touch-action: manipulation; /* Improve touch response */
}

#mobile-menu-toggle span {
    background-color: #c49149; /* Gold Color */
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 3px;
    opacity: 1;
    left: 0;
    transition: .25s ease-in-out;
}

/* Burger Lines Positioning */
#mobile-menu-toggle span:nth-child(1) { top: 0px; }
#mobile-menu-toggle span:nth-child(2) { top: 10px; }
#mobile-menu-toggle span:nth-child(3) { top: 20px; }

/* Animation: Transform to 'X' when open */
body.mobile-menu-is-open #mobile-menu-toggle span:nth-child(1) {
    top: 10px;
    transform: rotate(135deg);
}
body.mobile-menu-is-open #mobile-menu-toggle span:nth-child(2) {
    opacity: 0;
    left: -60px;
}
body.mobile-menu-is-open #mobile-menu-toggle span:nth-child(3) {
    top: 10px;
    transform: rotate(-135deg);
}

/* * START MOBILE MEDIA QUERY 
 */
@media (max-width: 768px) {

    /* Header Layout: Flex row for Logo (left) and Burger (right) */
    .site-header .header-widgets {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        gap: 20px;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .site-header .widget_media_image { order: 1; }
    .site-header .widget_nav_menu { order: 2; }

    /* Show Burger */
    #mobile-menu-toggle { display: block; top: 10px; }

    /* Hide default menu list */
    #nav_menu-2 ul.menu { display: none; }
    
    /* OPEN Menu Container Styling */
    body.mobile-menu-is-open #nav_menu-2 {
        position: absolute;
        top: 60px; 
        left: 0;
        right: 0;
        z-index: 1000;
        background: #fff; 
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    body.mobile-menu-is-open #nav_menu-2 ul.menu {
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Mobile Links Styling */
    body.mobile-menu-is-open #nav_menu-2 ul.menu li {
        display: block;
        border-bottom: 1px solid #eee;
        margin: 0;
    }

    body.mobile-menu-is-open #nav_menu-2 ul.menu li a {
        color: #c49149;
        display: block;
        padding: 18px 15px;
        font-weight: bold;
    }
    
    /* Reset the "Button" style for mobile links so they look uniform */
    .header-widgets .menu-main-menu-container ul.menu li:last-child a {
        border: none;
        display: block;
    }
    .header-widgets .menu-main-menu-container ul.menu li:last-child a:hover {
        background: none;
    }

    /* Hide site branding on mobile */
    .site-header .site-branding { display: none; }
    
    /* Adjust Homepage Text Sizes */
    p.home-title  { font-size: 3rem !important; }
    p.home-slogan { font-size: 1.5rem !important; }
    .wp-block-cover { min-height: 420px; }

    /* * PRINCIPAL DEVELOPER FIX: MOBILE PAGE TITLE OVERLAP 
     * 1. Removed fixed height on .page-header.
     * 2. Switched .entry-header-text to position: relative.
     * This ensures the yellow button pushes content down instead of floating over it.
     */
    .page-header {
        height: auto !important; 
        min-height: 50vh; 
        padding-bottom: 3rem;
    }

    .entry-header-text {
        position: relative !important; 
        top: auto !important;
        left: auto !important;
        margin-top: 120px; 
        margin-bottom: 20px;
        width: 100%;
        text-align: center;
    }
    
    /* Keep the yellow button centered and safe from edges */
    .page-header-text h1.page-title {
        margin: 0 auto;
        max-width: 90%; 
    }
}

/* ==========================================================================
   8. Accessibility: Reduced Motion (WCAG SC 2.3.3)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Disable burger rotation for users sensitive to motion */
    body.mobile-menu-is-open #mobile-menu-toggle span {
        transition: none !important;
    }
}