/**
Theme Name: Child - originally Astral
Author: Astra via GVB -george
Author URI: http://wpastra.com/about/
Description: Added to modify access to Spectra editor for the Edit role.   May work with other themes to give the same access.  Spectra adds editing features to the regular block editor.  Since a number of people will have the edit role, it is important to make the editing flexible.  One can also change the style sheet, eg make some blocks larger fonts etc, but keeping changes to the theme to a minimum makes it easier to try another theme .gvb Feb 12, 2025    following is blurb from Astra-- Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: child-originally-astral
Template: astra
/* =================================
   CUSTOM RESPONSIVE IMAGE GALLERY  gvb
   - Creates a grid of images with a hover caption.
   - Used on: /cottage-interior/
     /children-school-groups/
	 <div class="image-gallery">... images...</div>.
   ================================= */
/* =================================
   CUSTOM RESPONSIVE IMAGE GALLERY gvb
   ================================= */
.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 15px;
    padding: 15px;
}

.gallery-item {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-item figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover figcaption {
    opacity: 1;
}
/* Hide author, date, and comments from Old Site Pages */

body.single-oldsitepage .entry-meta,
body.single-oldsitepage .posted-on,
body.single-oldsitepage .byline,
body.single-oldsitepage .comments-link {
    display: none !important;
}

/* allow overlay shortcode to go under drop down menus . otherwise menus and base are at zindex auto which is 0 and since shortcode is last, index of shortcode would have to be -1 for example which might be ok,shortcodes are 999*/

/* 1) Lift Astra’s menu container above the overlay */
.ast-builder-menu-1,
.ast-main-header-bar-alignment {
  position: relative;
  z-index: 1001;  /* 1 higher than the overlay */
}
#masthead {
    position: relative; /* Already set by Astra, but good for clarity */
    z-index: 1000;      /* Give it a value higher than what your overlay's
                           stacking context might resolve to.
                           If your overlay (z-index -1) is inside a wrapper that
                           effectively has z-index 0 or 'auto' and is a sibling
                           to #masthead (z-index 99), the header should win.
                           But if your overlay's wrapper is somehow getting a higher
                           effective z-index or being painted later in a way that
                           puts it on top, then #masthead needs to be explicitly higher. */
}

/* In child theme's style.css or your plugin's main CSS */
.gvb-event.gvb-size-large[data-mode="overlay"] {
    /* Ensure this value is higher than the masthead's z-index (1000)
       AND higher than Astra's submenu z-index (99999) if it needs to cover those too. */
    z-index: 100001;
}
/* * Custom Header Style for Alternate Homepage Start of css moved from additional css 
 */



/* This makes the menu links white so they are readable on the dark background */
body.page-id-1338 .main-header-bar .main-header-menu .menu-link {
    color: #ffffff;
}

/* This makes the site title white */
body.page-id-1338 .main-header-bar .site-title a {
    color: #ffffff;
}
/* * NEW: This targets the dropdown menu container itself.
 * It makes the dropdown background dark to match the header bar.
 */
body.page-id-1338 .main-header-bar .sub-menu {
    background-color: #333333;
}

/* * NEW: This changes the background of a dropdown item when you hover over it.
 * It provides a subtle highlight so users know what they're selecting.
 */
body.page-id-1338 .main-header-bar .sub-menu li:hover > .menu-link {
    background-color: #444444; /* A slightly lighter grey for the hover effect */
}
/*
 * Custom Hover Effect for Homepage Hero Section
 * Adds a background overlay fade-in on hover for the main container,
 * as this feature is not available in the Spectra v2.19.0 UI for this block.
*/

/* This sets the overlay opacity for the normal (non-hover) state */
.hero-home-background::before {
    opacity: 0.1 !important; /* Your desired normal opacity */
    transition: opacity 0.3s ease !important; /* This makes the change smooth */
}
/* Ensure Search Form and Icon Overlay Dropdown Menus */
.ast-search-menu-icon,
.ast-search-menu-icon .search-form,
.ast-search-menu-icon .search-field {
    position: relative;
    z-index: 99999 !important;
}
/* Optional: Add a subtle shadow to enhance visibility */
.ast-search-menu-icon .search-form {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* This sets the overlay opacity for the hover state */
.hero-home-background:hover::before {
    opacity: 0.8 !important; /* Your desired hover opacity */
}
/* ===================================================================
   AUTOMATIC & Polished Styles for 1-Column Spectra Post Grids
   =================================================================== */

/* ===================================================================
   Final Automatic Style for Spectra Post Grids (Structural Targeting)
   =================================================================== */

/*
 * This CSS targets any post that contains the special 'uag-post-grid-wrapper' div,
 * which the plugin ONLY adds when the "Enable Left/Right" box is checked.
 * This is the most reliable way to apply these specific styles.
*/


/* 1. Target the main container ONLY when the wrapper div is present.
      This sets up the side-by-side layout. */
.uagb-post__inner-wrap:has(> .uag-post-grid-wrapper) {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
}


/* 2. Create the alternating (image-right) effect for every second post. (UPDATED RULE) */
.wp-block-uagb-post-grid article.uagb-post__inner-wrap:has(> .uag-post-grid-wrapper):nth-child(even) {
    flex-direction: row-reverse !important;
}
/* 3. Ensure a perfect 50/50 split for the image and the text wrapper div. */
.uagb-post__inner-wrap:has(> .uag-post-grid-wrapper) > .uagb-post__image,
.uagb-post__inner-wrap:has(> .uag-post-grid-wrapper) > .uag-post-grid-wrapper {
    flex: 0 0 50%;
    width: 50%;
    padding: 30px;
    box-sizing: border-box;
}

/* 4. Style the text and links within the side-by-side layout. */
.uagb-post__inner-wrap:has(> .uag-post-grid-wrapper) h4.uagb-post__title a,
.uagb-post__inner-wrap:has(> .uag-post-grid-wrapper) .uagb-post__excerpt {
    color: #334155 !important;
}

/* 5. Style the "Read More" button, overriding the Astra default. */
.uagb-post__inner-wrap:has(> .uag-post-grid-wrapper) .uagb-post__cta .wp-block-button__link {
    width: auto;
    background-color: #2c3e50 !important;
    color: #ffffff !important;
    transition: background-color 0.2s ease-in-out;
}

.uagb-post__inner-wrap:has(> .uag-post-grid-wrapper) .uagb-post__cta .wp-block-button__link:hover,
.uagb-post__inner-wrap:has(> .uagb-post-grid-wrapper) .uagb-post__cta .wp-block-button__link:active {
    background-color: #000000 !important;
}


/* 6. On mobile, revert to a stacked layout for readability. */
@media (max-width: 767px) {
    .uagb-post__inner-wrap:has(> .uag-post-grid-wrapper) {
        flex-direction: column;
    }

    .uagb-post__inner-wrap:has(> .uag-post-grid-wrapper) > .uagb-post__image,
    .uagb-post__inner-wrap:has(> .uag-post-grid-wrapper) > .uag-post-grid-wrapper {
        width: 100%;
    }
}
/* ===========================================================================
   Page 1500 — Transparent Sticky Header (Global)
   =========================================================================== */
body.page-id-1500 .ast-primary-header-bar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(0,0,0,0.7);
  transition: background-color 0.3s ease, padding 0.3s ease;
  z-index: 9999;
}

body.page-id-1500 .ast-primary-header-bar.ast-site-header-shrink {
  background-color: rgba(0,0,0,0.85);
  padding: 5px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

/* Logo & desktop menu links in white */
body.page-id-1500 .site-title a,
body.page-id-1500 .main-header-menu > .menu-item > .menu-link {
  color: #fff;
}

/* Desktop dropdowns: white bg, black text */
body.page-id-1500 .main-header-menu .sub-menu {
  background-color: #fff;
}

body.page-id-1500 .main-header-menu .sub-menu .menu-link {
  color: #000;
}

/* If you’re logged in, nudge under the admin bar */
body.page-id-1500.admin-bar .ast-primary-header-bar {
  top: 32px;
}

/* ===========================================================================
   Page 1500 — Mobile Off-Canvas / Dropdown
   =========================================================================== */

@media (max-width: 768px) {
  /* 1. Fix off-canvas so it scrolls with the page, sits just below header */
  body.page-id-1500 .ast-mobile-header-content {
    position: fixed;
    top: 68px;     /* adjust if your header height changes */
    left: 0;
    width: 100%;
    z-index: 9998;
    background-color: #fff;
  }

  /* 2. Top-level mobile links: black on white, subtle hover */
  body.page-id-1500 .ast-mobile-header-content
    .main-header-menu > .menu-item > .menu-link {
    color: #000;
    background: transparent;
  }
  body.page-id-1500 .ast-mobile-header-content
    .main-header-menu > .menu-item > .menu-link:hover,
  body.page-id-1500 .ast-mobile-header-content
    .main-header-menu > .menu-item > .menu-link:focus {
    background-color: rgba(0,0,0,0.05);
    color: #000;
  }

  /* 3. Deeper submenus: same style */
  body.page-id-1500 .ast-mobile-header-content
    .main-header-menu .sub-menu {
    background-color: #fff;
  }
  body.page-id-1500 .ast-mobile-header-content
    .main-header-menu .sub-menu .menu-link {
    color: #000;
    background: transparent;
  }
  body.page-id-1500 .ast-mobile-header-content
    .main-header-menu .sub-menu .menu-link:hover,
  body.page-id-1500 .ast-mobile-header-content
    .main-header-menu .sub-menu .menu-link:focus {
    background-color: rgba(0,0,0,0.05);
    color: #000;
  }

  /* 4. Shrink-on-scroll for the mobile header bar */
  body.page-id-1500 .ast-mobile-header-wrap
    .ast-primary-header-bar.ast-site-header-shrink {
    background-color: rgba(0,0,0,0.85);
    padding: 5px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  }

  /* 5. Force the off-canvas toggle (“≡”) white */
  body.page-id-1500 .ast-header-break-point
    button.menu-toggle {
    color: #fff;
  }