/**
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.7
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) {
 

  /* 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;
  }
 }
/* ===========================================================================
   Transparent sticky header — works on any page with body.transparent-header
   (independent of the event-scheduler plugin)
   =========================================================================== */
body.transparent-header .ast-primary-header-bar {
    /* Tunable backgrounds — change these two values to taste.
       normal = top of page; shrink = after scrolling (more opaque). */
    --gvb-bar-bg:        rgba(255, 255, 255, 0.5);
    --gvb-bar-bg-shrink: rgba(255, 255, 255, 0.85);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--gvb-bar-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background-color 0.3s ease, padding 0.3s ease;
    z-index: 9999;
}

body.transparent-header.admin-bar .ast-primary-header-bar { top: 32px; }
@media (max-width: 782px) {
    body.transparent-header.admin-bar .ast-primary-header-bar { top: 46px; }
    /* Once scrolled, the mobile admin bar (which scrolls away) is gone, so snap
       the header flush to the top instead of holding the 46px offset — otherwise
       a gap opens above it. Logged-in only; visitors never have this offset. */
    body.transparent-header.admin-bar .ast-primary-header-bar.ast-site-header-shrink { top: 0 !important; }
}

/* Laptop: leave a bit more breathing room above the (low) title on the front
   page for the banner. Title stays bottom-aligned; only the top room grows. */
@media (min-width: 922px) {
    body.home.transparent-header .ast-primary-header-bar:not(.ast-site-header-shrink) {
        padding-top: 24px !important;
    }
    /* Align the row on the text baseline (not the bottom) so the top-level menu
       items line up with the title "Tollkeepers Cottage" rather than sinking
       below it. The larger title font makes the menu read as even or a hair
       higher, which is the look we want. Phone keeps flex-end (no menu there). */
    body.home.transparent-header .ast-primary-header-bar:not(.ast-site-header-shrink) .ast-builder-grid-row,
    body.home.transparent-header .ast-primary-header-bar:not(.ast-site-header-shrink) .site-header-section {
        align-items: baseline !important;
    }
}

/* Shrink-on-scroll state (added by JS in functions.php) */
body.transparent-header .ast-primary-header-bar.ast-site-header-shrink {
    background-color: var(--gvb-bar-bg-shrink);
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Make the scrolled background clearly more opaque on EVERY width — including
   phones and tablets — and beat the front page's own shrink rule (which uses
   the same selector at lower specificity). To retune, change --gvb-bar-bg-shrink
   on the rule above (e.g. 0.9 = lighter, 1 = fully solid). */
html body.transparent-header .ast-primary-header-bar.ast-site-header-shrink {
    background-color: var(--gvb-bar-bg-shrink, rgba(255, 255, 255, 0.97)) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
}

/* Phones & tablets: ease off the scrolled whiteness (the full-opaque desktop
   value looks too stark on small screens). Tune the 0.85 up or down to taste. */
@media (max-width: 921px) {
    body.transparent-header .ast-primary-header-bar {
        --gvb-bar-bg-shrink: rgba(255, 255, 255, 0.85);
    }
}

/* -------------------------------------------------------------------------
   FRONT PAGE ONLY: make the (taller) pre-scroll bar ~15px shorter by trimming
   the bottom, and drop the title into the bottom third instead of centering it,
   so more of the hero image shows. Only affects the un-scrolled state; the
   shrunk state keeps its own padding. Assumes the front page is your WordPress
   home page (body.home) — if the front page isn't transparent after this, the
   class is different and I'll rescope it.
   Tweak the two paddings to taste: padding-top = room above the title (where the
   banner sits), padding-bottom = room beneath the title.
   ------------------------------------------------------------------------- */
body.home.transparent-header .ast-primary-header-bar:not(.ast-site-header-shrink) {
    padding-top: 14px !important;
    padding-bottom: 3px !important;
}
/* Phones & tablets (no desktop menu here): drop the title to the bottom third. */
@media (max-width: 921px) {
    body.home.transparent-header .ast-primary-header-bar:not(.ast-site-header-shrink) .ast-builder-grid-row,
    body.home.transparent-header .ast-primary-header-bar:not(.ast-site-header-shrink) .site-header-section {
        align-items: flex-end !important;
    }
}

/* Also shrink the inner content padding on shrunk state */
body.transparent-header .ast-primary-header-bar.ast-site-header-shrink .ast-desktop-header-content > *,
body.transparent-header .ast-primary-header-bar.ast-site-header-shrink .site-primary-header-wrap {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* And shrink the desktop menu line-height so menu items track the smaller bar */
body.transparent-header .ast-primary-header-bar.ast-site-header-shrink .main-header-menu > .menu-item {
    line-height: 44px !important;
}
/* ===========================================================================
   Hero Header template — featured image band
   =========================================================================== */
body.has-page-hero .page-hero-image {
    width: 100%;
    margin-top: 0;
    background: none;
    overflow: hidden;
}

body.has-page-hero .page-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center center;
}
/* --- Focal point per hero template (object-fit:cover crops into the 16:9 band) --- */
body.hero-natural .page-hero-image img { object-position: center center; } /* live look, unchanged */
body.hero-top     .page-hero-image img { object-position: center top; }    /* keeps the very top */
body.hero-upper   .page-hero-image img { object-position: center 25%; }    /* favors upper third */

/* --- Hero variant that scrolls AWAY with the page (not pinned). No shrink/whiten. --- */
body.hero-scroll .ast-primary-header-bar {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
}
body.hero-scroll .ast-primary-header-bar.ast-site-header-shrink {
    min-height: 68px !important;
    height: 68px !important;
}
body.hero-scroll.admin-bar .ast-primary-header-bar { top: 0; }
@media screen and (max-width: 782px) {
    body.hero-scroll.admin-bar .ast-primary-header-bar { top: 0; }
}
/* On transparent-header pages WITHOUT a hero, give content room
   for the fixed header so it doesn't overlap the page title */
body.transparent-header:not(.has-page-hero) #content {
    padding-top: 70px;
}
/* Force the shrunk header to actually shrink, beating Astra's min-height */
html body.transparent-header .ast-primary-header-bar.ast-site-header-shrink,
html body.transparent-header .ast-primary-header-bar.ast-site-header-shrink .site-primary-header-wrap,
html body.transparent-header .ast-primary-header-bar.ast-site-header-shrink .ast-builder-grid-row,
html body.transparent-header .ast-primary-header-bar.ast-site-header-shrink .ast-mobile-header-wrap,
html body.transparent-header .ast-primary-header-bar.ast-site-header-shrink .main-header-bar-wrap {
    min-height: 50px !important;
    height: 50px !important;
}

/* And keep the unshrunk default at a clean 68 so it matches home */
html body.transparent-header .ast-primary-header-bar:not(.ast-site-header-shrink),
html body.transparent-header .ast-primary-header-bar:not(.ast-site-header-shrink) .site-primary-header-wrap {
    min-height: 68px !important;
}

/* Make sure menu items center vertically in whatever height the bar is */

    html body.transparent-header .ast-primary-header-bar .main-header-menu > .menu-item {
        line-height: 1 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }
/* Keep the events banner clear of the mobile hamburger (top-right toggle).
   921px = Astra header break point. Gutter sized to your measured 30px toggle box + finger room. */
@media (max-width: 921px) {
  body .gvb-event[data-mode="overlay"]:not(.gvb-size-large) {
    --gvb-hamburger-gutter: 72px;   /* clears the ~52px-in toggle box with thumb cushion */
    max-width: calc(100vw - var(--gvb-hamburger-gutter)) !important;
    left: calc(50% - (var(--gvb-hamburger-gutter) / 2) + var(--gvb-mobile-offset-x, 0px)) !important;
    transform: translateX(-50%) !important;
  }
}
/* ===========================================================================
   Mobile dropdown menu — appearance + stacking only.
   POSITION is handled by gvb_mobile_menu_follow_bar_script() in functions.php,
   which pins the menu to the bar when the bar is fixed and lets it scroll with
   the page when the bar scrolls. Keep these cosmetic rules here.
   =========================================================================== */
@media (max-width: 921px) {
  .ast-mobile-header-content {
    background: #fff;
    z-index: 9990;            /* under the bar so the X stays clickable */
  }

  /* Bar and its hamburger/X always above the open menu */
  .ast-primary-header-bar { z-index: 10000 !important; }
  button.menu-toggle      { position: relative; z-index: 10001 !important; }

  /* While the mobile menu is open, get the event overlay banner out of the way
     so the menu opens onto clean space (banner returns when the menu closes).
     Class is set by gvb_hide_overlay_when_menu_open_script() in functions.php. */
  body.gvb-menu-open .gvb-event[data-mode="overlay"] {
    display: none !important;
  }
}
/* ===== Search box as the last item in the mobile hamburger menu ===== */
.gvb-mobile-search-item { padding: 12px 20px !important; }

.gvb-mobile-search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.gvb-mobile-search-item input.gvb-mobile-search-field {
    flex: 1 1 auto;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 48px 0 14px;
    border: 1px solid var(--ast-border-color, #D1D5DB);
    border-radius: 4px;
    background: #fff;
    color: var(--ast-global-color-3, #334155);
    font-size: 16px; /* >=16px prevents iOS zooming in on focus */
    box-shadow: none;
}
.gvb-mobile-search-item button.gvb-mobile-search-submit {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 44px;
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;   /* override Astra's blue button */
    color: #64748b !important;
    box-shadow: none !important;
    min-height: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
}
.gvb-mobile-search-item button.gvb-mobile-search-submit:hover,
.gvb-mobile-search-item button.gvb-mobile-search-submit:focus {
    background: transparent !important;
    color: var(--ast-global-color-0, #046bd2) !important;
}
.gvb-mobile-search-item .ast-icon.icon-search svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Belt-and-suspenders: never show it on desktop widths */
@media (min-width: 922px) {
    .gvb-mobile-search-item { display: none; }
}
/* Hide author/date meta on search results only */
body.search .ast-blog-meta-container,
body.search .entry-meta {
    display: none !important;
}
/* ===========================================================================
   PHONE-ONLY hero band fix — style.css 1.0.4, 18 Aug 2026
   ---------------------------------------------------------------------------
   WHY: the fixed transparent header is a constant ~68px tall at every width,
   but the hero band's height is derived from the viewport width
   (aspect-ratio: 16/9  ->  height = width x 0.5625). So:

        1400px wide  ->  787px band  ->  header covers  8.6%   (fine)
         768px wide  ->  432px band  ->  header covers 15.7%   (fine)
         400px wide  ->  225px band  ->  header covers 30%     (too much)

   Nothing is "wrong" on phones — the same rule just lands very differently.
   Three dials fix it, phone-width only. Tablet and desktop are untouched.

     --gvb-hero-drop   how far the picture starts below the top of the page.
                       The strip it leaves takes the page background colour.
                       Set to 0px if you want zero white and are happy to rely
                       on the taller band + crop bias alone.
     --gvb-hero-ratio  the band's shape on phones. 3/2 is taller than the
                       16/9 used elsewhere, so less of the photo is cropped
                       away AND the fixed header covers a smaller share of it.
                       4/3 is taller still; 16/9 restores the old behaviour.
     object-position   biases the crop toward the TOP of the photo, which
                       pushes faces DOWN the frame, out from under the header.
                       Only bites on photos taller than the band (portraits);
                       harmless on landscape ones.

   Scoped to body.transparent-header.has-page-hero, so it can only ever touch
   the four Hero Header templates. Pages without a transparent header have no
   .page-hero-image element at all and are not affected.

   hero-top is deliberately left alone — it already anchors to the top edge.
   =========================================================================== */
@media (max-width: 600px) {

    body.transparent-header.has-page-hero .page-hero-image {
        --gvb-hero-drop:  44px;     /* dial 1 — try 0px … 68px */
        --gvb-hero-ratio: 3 / 2;    /* dial 2 — try 3/2, 4/3, 16/9 */

        padding-top: var(--gvb-hero-drop);
    }

    body.transparent-header.has-page-hero .page-hero-image img {
        aspect-ratio: var(--gvb-hero-ratio);
    }

    /* dial 3 — lower % = show more of the photo's top = subject sits lower */
    body.transparent-header.has-page-hero.hero-natural .page-hero-image img {
        object-position: center 30%;
    }
    body.transparent-header.has-page-hero.hero-upper .page-hero-image img {
        object-position: center 15%;
    }
}

/* ===========================================================================
   TKC LEGACY PAGE BRIDGE — v2.0.0, 2026-09-02
   ---------------------------------------------------------------------------
   Brings the pages still on plain Astra markup into the same type system as
   the redone ones. Works alongside tkc banners: anything inside a .tkc-scope
   section is left alone, everything else is bridged.
 
   Requires the Google Fonts link enqueued by gvb_tkc_fonts() in functions.php.
   Without it the Caslon headings fall back to Georgia.
   =========================================================================== */
 
:root{
  --tkc-legacy-measure:820px;   /* matches .tkc-wrap. Use none to switch off. */
}
 
/* ---- body copy ----
   Set on the container. Harmless on fully redone pages: .tkc-scope declares
   its own font and size for its own subtree, so nothing there changes. */
.entry-content{
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.0625rem;          /* 17px, in rem so it follows the reader's
                                   browser text-size setting */
  line-height:1.65;
  color:#24281F;                /* warm ink, replacing Astra's #334155 */
  -webkit-font-smoothing:antialiased;
}
.entry-content p:not(.tkc-scope *){margin:0 0 1.1em}
 
/* ---- measure ----
   Full Width / Stretched removes Astra's container width so banners can go
   edge to edge. That leaves the prose unconstrained too, so give everything
   that is NOT a tkc section a measure of its own. Direct children only, so a
   banner's full-bleed background is never boxed in. */
body.ast-page-builder-template .entry-content > *:not(.tkc-scope){
  max-width:var(--tkc-legacy-measure);
  margin-left:auto;
  margin-right:auto;
  padding-left:1.5rem;
  padding-right:1.5rem;
}
 
/* ---- links: Astra blue -> pine green ---- */
.entry-content a:not(.tkc-scope *){color:#2B5B2E;text-decoration:underline}
.entry-content a:not(.tkc-scope *):hover{color:#224A25}
 
/* ---- page title ----
   Sits in header.entry-header, a sibling of .entry-content, so it needs its
   own rule. Styled unconditionally: on pages that have gained a banner the
   display:none rule further down wins, and only legacy pages render a title
   at all. */
article.ast-article-single .entry-title{
  font-family:"Libre Caslon Display",Georgia,serif;
  font-weight:400;
  font-size:clamp(2rem,4.4vw,2.9rem);
  line-height:1.12;
  letter-spacing:.005em;
  color:#24281F;
}
 
/* ---- in-content headings ----
   Astra sets font-size, font-weight and color directly on h1-h6, so
   inheritance cannot reach them and each has to be named.
   :not(.tkc-scope *) keeps these off anything inside a tkc section. */
.entry-content h2:not(.tkc-scope *),
.entry-content h3:not(.tkc-scope *){
  font-family:"Libre Caslon Display",Georgia,serif;
  font-weight:400;
  line-height:1.15;
  letter-spacing:.005em;
  color:#24281F;
  margin:1.8em 0 .5em;
}
.entry-content h2:not(.tkc-scope *){font-size:clamp(1.9rem,3.2vw,2.2rem)}
.entry-content h3:not(.tkc-scope *){font-size:1.55rem}
 
/* h4 deliberately stays in the body font at 600. That mirrors the redone
   pages, where h4 is not part of the Caslon rule either. Volunteers uses
   four of them. */
.entry-content h4:not(.tkc-scope *){
  font-family:"Source Sans 3",system-ui,sans-serif;
  font-weight:600;
  font-size:1.15rem;
  color:#24281F;
  margin:1.6em 0 .4em;
}
 
/* Astra's page title stands down on any page that has gained a tkc banner,
   since the banner supplies its own h1. Prevents the double-h1 that Donate
   had. Switches on per page as banners are added, and reverses if one is
   removed. */
article.ast-article-single:has(.tkc-page-banner) .entry-title{display:none}
 
/* ---------------------------------------------------------------
   Cream variant of the page banner — 2026-09-01, unchanged
   For pages that already open with a featured photo and don't want a
   second dark band beneath it. Add tkc-banner-cream alongside
   tkc-page-banner in the page markup; remove it to go back to pine.
   Inert on any page that doesn't use the class.
   Two classes on each selector so these outrank the pine rules they
   replace, regardless of stylesheet order.
   --------------------------------------------------------------- */
.tkc-page-banner.tkc-banner-cream{
  background:var(--tkc-cream);
  color:var(--tkc-ink);
  border-bottom:1px solid var(--tkc-line);
}
.tkc-page-banner.tkc-banner-cream h1{color:var(--tkc-ink)}
.tkc-page-banner.tkc-banner-cream p{color:var(--tkc-muted)}
.tkc-page-banner.tkc-banner-cream .tkc-eyebrow{color:#7E5A1F}
.tkc-page-banner.tkc-banner-cream .tkc-eyebrow::before{background:#7E5A1F}