/*
Theme Name:     Astra Child
Theme URI:      https://wk.prometheuslabor.com
Description:    Astra child theme for Westfield Kiwanis
Author:         Westfield Kiwanis
Template:       astra
Version:        1.0.7
*/

/* ====================================================================
   TOP BAR MENU

   Purpose:
   Styles the WordPress menu displayed in the top bar above the header.
   Menu can be managed through WordPress admin (Appearance → Menus).

   Features:
   - Dark gray background (#363537)
   - Icons added automatically based on menu item titles
   - Login link hidden automatically when user is logged in
   - Left/right alignment using CSS
   - Hidden on mobile devices

   Modified: 2025-10-18
   ==================================================================== */

.wk-top-bar {
    background: #363537;
    color: #ffffff;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: none; /* Remove border that creates black line above navbar */
    position: relative;
    z-index: 99998;
    margin-bottom: 0; /* Ensure no gap */
}

.wk-top-bar-inner {
    max-width: 100%;
    margin: 0;
    padding: 0 10px;
}

.wk-top-bar-menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.wk-top-bar-menu > li {
    margin: 0;
    padding: 0;
}

.wk-top-bar-menu > li a {
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.2s;
    padding: 4px 10px;
}

.wk-top-bar-menu > li a:hover {
    opacity: 0.8;
}

.wk-top-bar-menu .menu-icon {
    display: inline-flex;
    align-items: center;
}

.wk-top-bar-menu .menu-icon svg {
    display: block;
}

/* Align Login and Search to the right */
/* Find the first item that's either Login or Search and push it right */
.wk-top-bar-menu > li:has(a[href*="login"]),
.wk-top-bar-menu > .wk-search-item {
    margin-left: auto;
}

/* But only the first one of these should have auto margin */
.wk-top-bar-menu > li:has(a[href*="login"]) ~ .wk-search-item {
    margin-left: 0;
}

/* Search dropdown styles */
.wk-search-item {
    position: relative;
}

.wk-search-toggle {
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
    padding: 4px 10px;
    display: flex;
    align-items: center;
    transition: opacity 0.2s;
}

.wk-search-toggle:hover {
    opacity: 0.8;
}

.wk-search-toggle svg {
    display: block;
}

.wk-search-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 12px;
    min-width: 250px;
    display: none;
    z-index: 99999;
}

/* Mobile: position dropdown to stay on screen */
@media (max-width: 768px) {
    .wk-search-dropdown {
        position: fixed !important;
        top: 48px !important;
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
    }
}

.wk-search-dropdown.active {
    display: block;
}

.wk-search-form {
    display: flex;
    gap: 8px;
}

.wk-search-field {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.wk-search-field:focus {
    outline: none;
    border-color: var(--ast-global-color-0);
}

.wk-search-submit {
    padding: 8px 16px;
    background: var(--ast-global-color-0);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.wk-search-submit:hover {
    background: var(--ast-global-color-1);
}

/* Show on mobile */
@media (max-width: 768px) {
    .wk-top-bar {
        display: block;
    }

    .wk-top-bar-menu {
        gap: 10px;
    }

    .wk-search-dropdown {
        right: auto;
        left: 0;
        min-width: 200px;
    }
}

/* Extra small phones - tighter top bar spacing */
@media (max-width: 400px) {
    .wk-top-bar-menu {
        gap: 4px;
    }

    .wk-top-bar-menu > li a {
        padding: 4px 6px;
        font-size: 13px;
        gap: 4px;
    }

    .wk-top-bar-menu .menu-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* Hide Astra's built-in search icon (we have our own in top bar) */
.ast-header-search,
.ast-search-menu-icon {
    display: none !important;
}

/* Hide WordPress admin bar search icon (we have our own in top bar) */
#wp-admin-bar-search {
    display: none !important;
}

/* End Top Bar Menu */

/* ====================================================================
   4:3 LETTERBOXED BLOG POST IMAGES

   Purpose:
   Simple styling for blog post featured images that are already
   letterboxed at 450x338px (4:3 ratio) by the plc-letterbox-images plugin.

   How it works:
   - plc-letterbox-images plugin generates actual 450x338px letterboxed images
   - Light blue (#f0f7ff) background is baked into the image file
   - Images are properly sized, reducing page weight significantly
   - CSS only needs to handle positioning and border styling

   Benefits:
   - Smaller file sizes (images are 450px wide, not 900px+)
   - Faster page loads - browser downloads properly-sized images
   - Better PageSpeed scores
   - Uniform grid layout with consistent 4:3 aspect ratio
   - Works with all image aspect ratios (letterbox/pillarbox automatically applied)

   Modified: 2025-10-20
   ==================================================================== */

/* Style the image container */
article.ast-article-post .post-thumb-img-content {
    /* Expand to full card width by compensating for parent padding */
    width: calc(100% + 3em);  /* 1.5em left + 1.5em right = 3em */
    margin-left: -1.5em;      /* Extend to left edge */
    margin-right: -1.5em;     /* Extend to right edge */
    margin-top: -1.5em;       /* Extend to top edge */

    overflow: hidden;
    border: 3px solid #d4e4f7;  /* Darker blue border */
    border-bottom: none;  /* Remove bottom border */
    border-radius: 8px 8px 0 0;  /* Rounded top corners only */
}

/* Simple hover effect */
article.ast-article-post .post-thumb-img-content img {
    transition: transform 0.3s ease;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
}

article.ast-article-post:hover .post-thumb-img-content img {
    transform: scale(1.05);
}

/* End 4:3 Letterboxed Images */

/**
 * Prevent layout shifts by reserving header space
 *
 * Set minimum heights to prevent content shifting when header loads
 *
 * Modified: 2025-10-14
 */
.main-header-bar {
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 0;
    border-top: none;
}

.site-header .ast-builder-grid-row {
    max-height: 65px;
    overflow: visible; /* Allow submenus to extend below */
}

/* Ensure submenu container allows overflow */
.site-header .ast-builder-grid-row-container,
.site-header .site-primary-header-wrap {
    overflow: visible;
}

/* Removed min-height: 100vh to prevent elastic spacing that changes with viewport height */

/* ====================================================================
   BLOG POST CARD DROP SHADOW
   
   Purpose:
   Adds a subtle drop shadow to blog post cards for visual depth
   and separation from the background.
   
   Shadow properties:
   - Horizontal offset: 0px (centered)
   - Vertical offset: 2px (subtle downward)
   - Blur radius: 8px (soft edge)
   - Opacity: 0.1 (very subtle, professional)
   
   Modified: 2025-10-14
   ==================================================================== */

.ast-separate-container article.ast-article-post {
    box-shadow: none;
    border: none;
    border-radius: 8px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: none;
}

/* Set left/right padding for blog posts in grid layout */
.ast-separate-container .ast-blog-layout-4-grid .ast-article-post {
    padding-left: 1.5em;
    padding-right: 1.5em;
}

/* Slightly stronger shadow on hover for interactivity */
article.ast-article-post:hover {
    box-shadow: none;
}

/* End Blog Post Card Drop Shadow */

/* ====================================================================
   BLOG POST TITLE STYLING - Clean and Bold

   Purpose:
   Make blog post titles stand out as the focal point of each card
   with clean, bold typography that commands attention.

   Design:
   - Extra large, bold text (2em)
   - Kiwanis blue color
   - Minimal design for maximum impact
   - Smooth hover transition

   Modified: 2025-10-18
   ==================================================================== */

.ast-article-post .entry-title {
    font-size: 2em !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin: 0 0 15px 0 !important;
    color: #2070BB !important;  /* Navbar blue */
}

.ast-article-post .entry-title a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* Hover effect - darken slightly */
.ast-article-post .entry-title a:hover {
    color: #003D7A !important;  /* Darker blue on hover */
}

/* Blog post date - flush left with minimal spacing */
.ast-article-post .entry-header {
    margin-bottom: 10px !important;  /* Reduce space between date and title */
}

.ast-article-post .entry-meta {
    text-align: center !important;  /* Astra centers this, we need to check justify */
    margin-bottom: 8px !important;  /* Minimal space between date and title */
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Pull the entire meta section left to align with title */
.ast-article-post .blog-layout-4 .entry-header,
.ast-article-post .entry-header {
    text-align: left !important;
}

.ast-article-post .entry-meta {
    justify-content: flex-start !important;
    display: flex !important;
}

.ast-article-post .entry-meta,
.ast-article-post .entry-meta a,
.ast-article-post .entry-meta .posted-on,
.ast-article-post .entry-meta .posted-on a,
.ast-article-post .posted-on,
.ast-article-post .posted-on span {
    color: #d4af37 !important;  /* Gold color for date */
}

/* Read Post link - now styled as gold pill button (see READ POST BUTTON section below) */

/* End Blog Post Title Styling */

/* ====================================================================
   TABLE STYLING - Alternating Blue/Gold Tints

   Purpose:
   Style tables with professional appearance using Kiwanis colors.

   Design:
   - Blue gradient header
   - Alternating row colors (blue and gold tints)
   - Rounded corners
   - Clean, modern look

   Modified: 2025-10-18
   ==================================================================== */

.page table,
.single table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    border: none;
}

.page table th,
.single table th {
    background: #2070BB;
    color: white;
    padding: 15px;
    text-align: left;
    font-weight: 700;
    border: none;
}

.page table tr:nth-child(odd) td,
.single table tr:nth-child(odd) td {
    background: #f0f7ff;
}

.page table tr:nth-child(even) td,
.single table tr:nth-child(even) td {
    background: #fefbf5;
}

.page table td,
.single table td {
    padding: 12px 15px;
    border: none;
}

/* Make first column (committee names) bold */
.page table td:first-child,
.single table td:first-child {
    font-weight: 700;
    color: #2070BB;
}

/* End Table Styling */

/* ====================================================================
   HERO TEXT STYLING - Kiwanis Blue & Gold

   Purpose:
   Make hero text stand out with Kiwanis brand colors:
   - Blue: #003D7A (Kiwanis blue)
   - Gold: #F2A900 (Kiwanis gold)

   Uses simplified shadows optimized for Safari/iOS rendering

   Modified: 2025-10-15
   ==================================================================== */

.wk-hero-section h1 {
    color: #ffffff;
    /* Simplified shadows for better Safari rendering:
       - Single strong drop shadow for depth
       - Subtle glow for visibility
       Avoids complex multi-layer shadows that render poorly on iOS */
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 12px rgba(0, 61, 122, 0.6);
}

.wk-hero-section p {
    color: #ffffff;
    font-weight: 600;
    /* Simplified shadows for better Safari rendering */
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.8),
        0 0 12px rgba(0, 61, 122, 0.6);
}

/* End Hero Text Styling */

/* ====================================================================
   HERO MOBILE TEXT FIX & GOLD OVERLAY

   Purpose:
   1. Prevent title from breaking across lines on mobile
   2. Add subtle gold tint overlay to hero image with animated morph

   Animation:
   On page load, overlay morphs from light blue to gold over 2 seconds
   Uses two stacked overlays - gold below, blue above - then fades out blue

   Modified: 2025-10-22
   ==================================================================== */

/* Base hero h1 font size for desktop */
.wk-hero-section h1 {
    font-size: clamp(40px, 8vw, 80px); /* Desktop: 40-80px based on viewport */
}

/* Prevent title wrapping on mobile */
@media (max-width: 768px) {
    .wk-hero-section h1 {
        white-space: nowrap;
        overflow-x: auto;
        font-size: clamp(28px, 7vw, 80px);
    }
}

/* Base news header font size - responsive */
.wk-news-header h2,
.wk-news-header h2.wk-news-title {
    font-size: clamp(16px, 4vw, 36px); /* Responsive: 16-36px based on viewport - fits on one line */
}

/* Extra small phones (iPhone SE, 16e, etc.) - smaller hero text */
@media (max-width: 400px) {
    .wk-hero-section h1 {
        font-size: 18px !important; /* Fixed size for small screens - fits on one line */
    }

    .wk-hero-section p {
        font-size: 11px !important; /* Smaller "Serving the Children..." text on small screens */
    }

    /* Make "Westfield Kiwanis Club News" header smaller on extra-small screens */
    .wk-news-header h2,
    .wk-news-header h2.wk-news-title {
        font-size: 14px !important; /* Smaller news header for small screens - fits on one line */
    }

    /* Make blog post titles smaller on extra-small screens */
    .ast-article-post .entry-title {
        font-size: 20px !important; /* Smaller post titles for small screens */
    }

    /* Add space above and below date */
    .entry-meta {
        margin-top: 30px;
    }
}

.entry-meta {
    margin-top: 30px;
}

/* Keyframe animation to fade out blue overlay */
@keyframes fadeOutBlue {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Gold overlay on hero section (base layer) */
.wk-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(242, 169, 0, 0.75) 0%,
        rgba(242, 169, 0, 0.45) 50%,
        rgba(242, 169, 0, 0.75) 100%
    );
    /* Inner shadow at bottom for depth */
    box-shadow: inset 0 -80px 100px -40px rgba(0, 0, 0, 0.7);
    pointer-events: none;
    z-index: 1;
}

/* Blue overlay on hero section (top layer - fades out) */
.wk-hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(25, 89, 160, 0.65) 0%,
        rgba(25, 89, 160, 0.08) 50%,
        rgba(25, 89, 160, 0.65) 100%
    );
    /* Much darker inner shadow at bottom for depth */
    box-shadow: inset 0 -80px 100px -40px rgba(0, 0, 0, 0.95);
    pointer-events: none;
    z-index: 2;
    animation: fadeOutBlue 1.5s ease-in-out forwards;
}

/* Ensure text stays above overlays */
.wk-hero-section > div {
    position: relative;
    z-index: 10;
}

/* End Hero Mobile Fix & Gold Overlay */

/* ====================================================================
   HERO IMAGE - WebP with JPEG fallback
   
   Modern browsers will use smaller WebP format (67KB vs 87KB).
   Older browsers fall back to JPEG.
   
   Modified: 2025-10-14
   ==================================================================== */

.wk-hero-section {
    background-image: url("/wp-content/uploads/2025/10/kiwanis-ad-july-2021_cropped.jpg");
    background-image: -webkit-image-set(
        url("/wp-content/uploads/2025/10/kiwanis-ad-july-2021_cropped.webp") 1x
    );
    background-image: image-set(
        url("/wp-content/uploads/2025/10/kiwanis-ad-july-2021_cropped.webp") 1x
    );

    /* Inner shadow at bottom for depth */
    box-shadow: inset 0 -60px 80px -40px rgba(0, 0, 0, 0.6);
}

/* End Hero Image WebP */

/* Mobile-optimized hero image (smaller file size) */
@media (max-width: 768px) {
    .wk-hero-section {
        background-image: url("/wp-content/uploads/2025/10/kiwanis-ad-july-2021_cropped-mobile.webp");
    }
}

/* ====================================================================
   NAVIGATION BAR STYLING

   Purpose:
   Style the navigation bar to match the old site with a blue background
   and add visual interest with subtle gradient and shadow effects.

   Colors:
   - Base blue: #1959A0 (from old site)
   - Lighter blue: #2070BB (for gradient)
   - Darker blue: #14467D (for gradient depth)

   Modified: 2025-10-14
   ==================================================================== */

/* Main header bar background with gradient */
.site-header .main-header-bar,
.site-header.header-main-layout-1 {
    border-top: none !important; /* Remove black line above navbar */
    margin-top: 0 !important;
    outline: none !important;
    background: linear-gradient(
        to bottom,
        #2070BB 0%,
        #1959A0 50%,
        #14467D 100%
    );

    /* Strong drop shadow for depth - matches mobile */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);

    /* Remove any default borders that create white line */
    border: none;
    border-bottom: none;

    /* Make navbar sticky */
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;

    /* Smooth transition when scrolling */
    transition: box-shadow 0.3s ease;
}

/* Enhanced shadow when scrolling */
.site-header.header-main-layout-1.sticky-active,
.site-header .main-header-bar.sticky-active {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Add spacing below sticky navbar to prevent overlap with page content */
body:not(.home) .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Remove ALL padding for page builder template pages */
.ast-page-builder-template .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.ast-page-builder-template .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.ast-page-builder-template .entry-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================
   Page Title Ribbon Style
   ========================== */

/* Center the page title container */
.entry-header {
    text-align: center;
    margin-bottom: 40px !important;
}

/* Style the page title with ribbon effect - PAGES ONLY, NOT BLOG POSTS */
.page .entry-title,
.single .entry-title {
    font-size: 2.4em !important;  /* Increased by 20% from 2em */
    color: #1959A0 !important;  /* Match header border blue */
    background: linear-gradient(135deg, #d4af37 0%, #f0d678 50%, #d4af37 100%);
    padding: 15px 40px !important;
    position: relative;
    display: inline-block !important;
    text-align: center;
    margin: 0 !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);  /* Drop shadow */
    border-radius: 8px;  /* Round corners on gold box */
}

/* Left triangle (navbar blue) - rounded corners */
.page .entry-title::before,
.single .entry-title::before {
    content: '';
    position: absolute;
    top: 5px;
    left: -20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 62px 20px;  /* Adjusted height for larger text */
    border-color: transparent transparent #1959A0 transparent;  /* Match header border blue */
    border-bottom-left-radius: 8px;  /* Round the corner */
}

/* Right triangle (navbar blue) - rounded corners */
.page .entry-title::after,
.single .entry-title::after {
    content: '';
    position: absolute;
    top: 5px;
    right: -20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 62px 20px 0 0;  /* Adjusted height for larger text */
    border-color: #1959A0 transparent transparent transparent;  /* Match header border blue */
    border-top-right-radius: 8px;  /* Round the corner */
}

/* Mobile adjustments for page title */
@media (max-width: 768px) {
    .page .entry-title,
    .single .entry-title {
        font-size: 1.8em !important; /* Reduce from 2.4em for mobile (25% smaller) */
        padding: 12px 30px !important; /* Reduce padding proportionally */
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
}

/* Adjust sticky header position when WordPress admin bar is visible */
.admin-bar .site-header .main-header-bar,
.admin-bar .site-header.header-main-layout-1 {
    top: 32px !important; /* WordPress admin bar height on desktop */
}

/* Mobile admin bar is taller */
@media screen and (max-width: 782px) {
    .admin-bar .site-header .main-header-bar,
    .admin-bar .site-header.header-main-layout-1 {
        top: 46px !important; /* WordPress admin bar height on mobile */
    }
}

/* Menu link styling */
.site-header .main-navigation .menu-item > a,
.site-header .main-navigation .menu-item > .menu-link {
    color: #ffffff;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Menu link hover effect */
.site-header .main-navigation .menu-item > a:hover,
.site-header .main-navigation .menu-item > .menu-link:hover {
    color: #F2A900; /* Kiwanis gold on hover */
    text-shadow: 0 0 8px rgba(242, 169, 0, 0.5);
}

/* Dropdown submenu styling */
.site-header .main-navigation .sub-menu {
    background: linear-gradient(
        to bottom,
        #1959A0 0%,
        #14467D 100%
    );
    border-top: 2px solid #F2A900; /* Gold accent */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Show submenu on desktop when hovering parent item */
@media (min-width: 922px) {
    .site-header .main-navigation .menu-item:hover > .sub-menu,
    .site-header .main-navigation .menu-item.focus > .sub-menu {
        visibility: visible !important;
        opacity: 1 !important;
        left: auto !important;
    }
}

/* Submenu items */
.site-header .main-navigation .sub-menu .menu-item > a {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Submenu hover effect */
.site-header .main-navigation .sub-menu .menu-item > a:hover {
    background: rgba(242, 169, 0, 0.2);
    color: #F2A900;
}

/* End Navigation Bar Styling */

/* ====================================================================
   LOGO OVERLAP STYLING
   
   Purpose:
   Position the logo so it extends below the navbar (overlapping by ~15-20%)
   to create depth and visual interest, matching the old site design.
   
   How it works:
   - Uses relative positioning to move logo down
   - High z-index ensures logo appears above page content
   - Drop shadow adds depth to overlapping logo
   
   Modified: 2025-10-14
   ==================================================================== */

/* Logo container positioning */
.site-header .site-logo-img {
    position: relative;
    z-index: 10000;
    transform: translateY(25px);
}

/* Logo image styling with shadow for depth */
.site-header .custom-logo {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    border-radius: 50%;  /* Emphasize round shape */
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Hover effect - slight transparency */
.site-header .custom-logo-link:hover .custom-logo {
    opacity: 0.85;
}

/* Ensure header allows overflow so logo extends below */
.main-header-bar,
.site-header,
#masthead {
    overflow: visible;
    border-top: none !important;
    margin-top: 0 !important;
}

/* End Logo Overlap Styling */

/* ====================================================================
   MOBILE MENU CUSTOMIZATION

   Purpose:
   - Reduce white space above logo
   - Style hamburger menu in gold

   Modified: 2025-10-15
   ==================================================================== */

@media (max-width: 921px) {
    /* Reduce header padding on mobile, remove border */
    #masthead .main-header-bar,
    #masthead.site-header .main-header-bar,
    #masthead.header-main-layout-1,
    .site-header#masthead,
    #ast-mobile-header .main-header-bar {
        padding-top: 2px;
        padding-bottom: 2px;
        border: none;
        border-bottom: none;
    }

    /* Remove shadow only when menu is open */
    body.ast-main-header-nav-open #masthead .main-header-bar,
    body.ast-main-header-nav-open #masthead.site-header .main-header-bar,
    body.ast-main-header-nav-open #masthead.header-main-layout-1,
    body.ast-main-header-nav-open .site-header#masthead,
    body.ast-main-header-nav-open #ast-mobile-header .main-header-bar {
        box-shadow: none;
    }

    /* Add drop shadow to entire header */
    #masthead,
    #masthead.site-header,
    .ast-mobile-header-wrap {
        filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
        -webkit-filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.5));
    }

    /* Remove drop shadow when menu is open */
    body.ast-main-header-nav-open #masthead,
    body.ast-main-header-nav-open #masthead.site-header,
    body.ast-main-header-nav-open .ast-mobile-header-wrap {
        filter: none;
        -webkit-filter: none;
    }

    /* Add visual separation below navbar */
    .site-content > .ast-container {
        margin-top: 25px;
    }

    /* Add spacing between navbar and mobile menu */
    #ast-mobile-header .main-header-bar-navigation {
        padding-top: 25px;
    }

    /* Reduce logo overlap - prevent jumping by setting from start */
    .site-header .site-logo-img,
    .site-header .site-logo-img .custom-logo-link {
        transform: translateY(10px);
        will-change: transform;
    }
    
    /* Prevent logo image from jumping */
    .site-header .custom-logo {
        display: block;
    }

    /* Make hamburger menu gold and bigger */
    .ast-button-wrap .menu-toggle {
        color: #F2A900 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 10px !important;
    }

    .menu-toggle .ast-mobile-svg,
    .menu-toggle svg {
        fill: #F2A900 !important;
        color: #F2A900 !important;
        width: 40px !important;
        height: 40px !important;
    }

    .menu-toggle svg path {
        fill: #F2A900 !important;
    }

    /* Add MENU text below hamburger */
    .ast-button-wrap .menu-toggle::after {
        content: "MENU" !important;
        font-size: 9px !important;
        color: #F2A900 !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        display: block !important;
        text-align: center !important;
    }
}

/* Fix WordPress admin bar to stay fixed on mobile */
@media screen and (max-width: 782px) {
    #wpadminbar {
        position: fixed;
        top: 0;
    }
}

/* End Mobile Menu Customization */

/* ====================================================================
   MOBILE MENU - Show submenus with ast-visible class
   
   Purpose:
   Make submenus visible when ast-visible class is toggled by JavaScript.
   JavaScript (mobile-menu.js) toggles the 'ast-visible' class on parent
   menu items to expand/collapse submenus.
   
   How it works:
   1. Walker filter in functions.php changes href="#" to "javascript:void(0)"
      to prevent Astra from closing entire menu when parent is clicked
   2. JavaScript listens for clicks on parent items and toggles ast-visible
   3. CSS shows/hides submenus based on ast-visible class
   
   Modified: 2025-10-15
   ==================================================================== */

@media (max-width: 921px) {
    /* Hide all submenus by default */
    #ast-mobile-site-navigation .sub-menu {
        display: none;
    }

    /* Show submenus when ast-visible class is present - quick container expand */
    #ast-mobile-site-navigation .sub-menu.ast-visible {
        display: block !important;
        visibility: visible !important;
        position: static;
        transition: max-height 0.15s ease;
    }

    /* Items start below container and slide up after container expands */
    #ast-mobile-site-navigation .sub-menu .menu-item {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    /* Items slide up to fill container after it opens */
    #ast-mobile-site-navigation .sub-menu.ast-visible .menu-item {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.15s; /* Start after container finishes expanding */
    }

    /* Apply gradient to entire mobile menu container */
    .content-align-flex-start .ast-builder-layout-element {
	    background: linear-gradient(
            to bottom,
            #14467D 0%,
            #1959A0 50%,
            #2070BB 100%
        );
    }

    /* Override ALL Astra mobile menu background colors with ultra-high specificity */
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item a,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item .menu-link,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item:hover > .menu-link,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .sub-menu,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .sub-menu .menu-item,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .sub-menu .menu-item a,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .sub-menu .menu-item .menu-link,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .sub-menu .menu-item:hover > .menu-link {
        background: none;
        background-color: transparent;
    }

    /* Remove gold border from mobile submenus */
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .sub-menu {
        border: none;
        box-shadow: none;
    }

    /* Make stack-on-mobile container transparent */
    .ast-header-break-point .ast-mobile-header-wrap .ast-flex.stack-on-mobile {
        background-color: transparent;
    }

    /* Make all menu link states transparent */
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link,
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link:hover,
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link:active,
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link:focus,
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .menu-link:visited,
    .ast-builder-menu-mobile .main-navigation .inline-on-mobile .menu-item > .ast-menu-toggle,
    .ast-builder-menu-mobile .main-navigation .inline-on-mobile .menu-item > .ast-menu-toggle:hover,
    .ast-builder-menu-mobile .main-navigation .inline-on-mobile .menu-item > .ast-menu-toggle:active,
    .ast-builder-menu-mobile .main-navigation .inline-on-mobile .menu-item > .ast-menu-toggle:focus {
        background-color: transparent;
    }

    /* Remove white square background from menu toggle arrow */
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item .ast-menu-toggle {
        background-color: transparent;
        background: none;
        color: #ffffff;
        transition: transform 0.3s ease;
    }

    /* White color for arrow SVG by default, rotated to point right when closed */
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item .ast-menu-toggle svg {
        fill: #ffffff;
        transform: rotate(-90deg);
        transition: transform 0.3s ease, fill 0.3s ease;
    }

    /* Make arrow gold and point down when parent menu is expanded (uses menu-expanded class from JS) */
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item.menu-expanded .ast-menu-toggle,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item.menu-expanded .ast-menu-toggle svg {
        color: #F2A900;
        fill: #F2A900;
    }

    /* Rotate arrow to point down when expanded */
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item.menu-expanded .ast-menu-toggle svg {
        transform: rotate(0deg);
    }

    /* White text for all menu items with slightly larger font size */
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item > .menu-link,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .sub-menu .menu-item > .menu-link {
        color: #ffffff;
        font-size: 16px;
    }

    /* Gold hover color instead of light blue */
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .menu-item > .menu-link:hover,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .sub-menu .menu-item > .menu-link:hover {
        color: #F2A900;
    }

    /* Gold color for current active page */
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .current-menu-item > .menu-link,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .current_page_item > .menu-link,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .sub-menu .current-menu-item > .menu-link,
    body.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile.ast-builder-menu .main-navigation .sub-menu .current_page_item > .menu-link {
        color: #F2A900;
    }

}

/* End Mobile Menu Submenu Visibility */

/* ====================================================================
   MOBILE HEADER FADE ANIMATION MOVED TO functions.php

   Purpose:
   PHP now conditionally outputs fade animation CSS based on cookie.
   First visit: Fade animation plays
   Repeat visits: Header shows immediately (no animation)

   Modified: 2025-10-15
   ==================================================================== */

/* End Hide Mobile Header Jump */
/* ====================================================================
   MOBILE MENU ANIMATIONS
   
   Purpose:
   Add spacing after mobile menu and handle animations via jQuery.
   JavaScript (menu-close-animation.js) uses jQuery slideDown/slideUp
   for smooth open/close animations.
   
   Modified: 2025-10-15
   ==================================================================== */

@media (max-width: 921px) {
    .ast-header-break-point .main-header-bar-navigation {
        padding-bottom: 30px; /* Space after last menu item */
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); /* Heavy drop shadow at bottom */
    }
}

/* End Mobile Menu Animation */

/* ====================================================================
   HOMEPAGE - Reduce space between news header and blog posts

   Purpose:
   Bring the blog post grid closer to the "Westfield Kiwanis Club News"
   header by reducing the top margin on the primary content area.

   Modified: 2025-10-16
   ==================================================================== */

@media (min-width: 993px) {
    body.home.blog.ast-separate-container #primary {
        margin-top: 0;
    }
}

/* End Homepage Spacing */

/* ====================================================================
   FOOTER STYLING

   Purpose:
   Style the footer bar (below Join Us/Contact sections) to match
   westfieldkiwanis.org with dark background and white text.

   Modified: 2025-10-16
   ==================================================================== */

/* Footer bar (copyright area) - dark background */
body .site-footer,
body .site-below-footer-wrap,
body .ast-small-footer {
    background-color: #323437 !important;
    color: #ffffff;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    border-top: none;
}

/* Footer bar links - white with gold hover */
.site-footer a,
.site-below-footer-wrap a,
.ast-small-footer a {
    color: #ffffff;
    transition: color 0.3s ease;
}

.site-footer a:hover,
.site-below-footer-wrap a:hover,
.ast-small-footer a:hover {
    color: #F2A900;
}

/* End Footer Styling */

/* ====================================================================
   SECTION HEADER STYLING

   Purpose:
   Style main section headers (News, Join Us, Contact Us) with Kiwanis
   logo on left, subtle gradient background, and gold outline.

   Modified: 2025-10-16
   ==================================================================== */

/* Fix parent container to not center the header */
body.home.blog #main,
body.home.blog #primary,
body.home.blog .site-main {
    display: block;
}

body.home.blog #primary > .ast-container {
    justify-items: start;
}

/* Fix .wk-news-header container positioning */
.wk-news-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

/* Override inline color on Westfield Kiwanis Club News title */
.wk-news-title {
    color: #1959A0 !important;  /* Match Officers page h3 and section headers */
}

/* Target only main section headers - NOT blog post titles */
.wk-join-us h2,
.wk-contact-us h2,
body.home.blog .ast-container > h2:not(.entry-title),
body.home.blog h2:first-of-type:not(.entry-title) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    background: linear-gradient(to bottom, #ffffff 0%, #e8f2ff 100%);
    color: #1959A0 !important;  /* Blue from border - !important overrides inline styles */
    padding: 20px 25px;
    border-radius: 8px;
    border: 2px solid #1959A0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 50px;
    text-align: left;
    margin-right: auto;
    max-width: 100%;
    justify-self: start;
}

/* Make Club News header fit-content width */
body.home.blog .wk-news-header h2 {
    width: fit-content;
}

/* Make Join Us and Contact Us headers span full column width */
.wk-join-us h2,
.wk-contact-us h2 {
    width: 100%;
    max-width: none;
    font-size: 42px !important;  /* Override inline font-size */
    font-weight: 700 !important;  /* Override inline font-weight */
    margin: 0 0 20px 0 !important;  /* Override inline margin */
}

/* Add left margin only to Club News header - NOT Join Us/Contact Us */
body.home.blog .wk-news-header h2:not(.entry-title) {
    margin-left: 10px !important;
}

/* Add Kiwanis logo before each header */
.wk-join-us h2::before,
body.home.blog .ast-container > h2:not(.entry-title)::before,
body.home.blog h2:first-of-type:not(.entry-title)::before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background: url('/wp-content/uploads/2025/10/correct-kiwanis-logo.png') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

/* Add spacing between page title and featured image in header */
.page .entry-header .post-thumb {
    margin-top: 30px !important;
}

/* Add spacing above page content images */
.page .entry-content img,
.page .entry-content figure {
    margin-top: 30px;
}

/* Duotone Effect (Blue/Gold) for page images - NOT tables or FooGallery */
/* Animated gradient that sweeps horizontally like in Asteroids */
.page .entry-header .post-thumb,
.page .entry-content figure:not(.wp-block-table):not(.fg-item-inner),
.page .entry-content .wp-block-image {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid rgba(0, 0, 0, 0.25);
}

/* Vignette overlay - Muted (subtle) */
body.gradient-animation-weak .page .entry-header .post-thumb::after,
body.gradient-animation-weak .page .entry-content figure:not(.wp-block-table):not(.fg-item-inner)::after,
body.gradient-animation-weak .page .entry-content .wp-block-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.25) 100%);
    border-radius: 8px;
    z-index: 3;
    pointer-events: none;
}

/* Vignette overlay - Vibrant (strong) */
body.gradient-animation-strong .page .entry-header .post-thumb::after,
body.gradient-animation-strong .page .entry-content figure:not(.wp-block-table):not(.fg-item-inner)::after,
body.gradient-animation-strong .page .entry-content .wp-block-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.8) 100%);
    border-radius: 8px;
    z-index: 3;
    pointer-events: none;
}

/* Sweeping gradient background - three strength levels based on body class */

/* NONE - No gradient background at all, just grayscale image */
body.gradient-animation-none .page .entry-header .post-thumb::before,
body.gradient-animation-none .page .entry-content figure:not(.wp-block-table):not(.fg-item-inner)::before,
body.gradient-animation-none .page .entry-content .wp-block-image::before {
    display: none;
}

/* WEAK - Muted colors, slower animation (48 seconds) */
body.gradient-animation-weak .page .entry-header .post-thumb::before,
body.gradient-animation-weak .page .entry-content figure:not(.wp-block-table):not(.fg-item-inner)::before,
body.gradient-animation-weak .page .entry-content .wp-block-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    background: linear-gradient(120deg,
        #7AA5D0 0%,
        #8AB2D5 5%,
        #9AC0DA 10%,
        #B5D0E0 15%,
        #D0D0B0 20%,
        #E8D699 25%,
        #EBD9A0 30%,
        #E8D699 35%,
        #D0D0B0 40%,
        #B5D0E0 45%,
        #9AC0DA 50%,
        #8AB2D5 55%,
        #7AA5D0 60%,
        #8AB2D5 65%,
        #9AC0DA 70%,
        #B5D0E0 75%,
        #D0D0B0 80%,
        #E8D699 85%,
        #EBD9A0 90%,
        #E8D699 95%,
        #D0D0B0 96.66%,
        #B5D0E0 98.33%,
        #7AA5D0 100%
    );
    border-radius: 8px;
    z-index: 0;
    animation: sweepGradient 48s linear infinite;
}

/* STRONG - Full animation (default, 24 seconds) */
body.gradient-animation-strong .page .entry-header .post-thumb::before,
body.gradient-animation-strong .page .entry-content figure:not(.wp-block-table):not(.fg-item-inner)::before,
body.gradient-animation-strong .page .entry-content .wp-block-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 100%;
    background: linear-gradient(120deg,
        #4A90D9 0%,
        #5BA0DC 5%,
        #6DB0DF 10%,
        #A8C8E1 15%,
        #C8C89E 20%,
        #E4C674 25%,
        #E8CE6B 30%,
        #E4C674 35%,
        #C8C89E 40%,
        #A8C8E1 45%,
        #6DB0DF 50%,
        #5BA0DC 55%,
        #4A90D9 60%,
        #5BA0DC 65%,
        #6DB0DF 70%,
        #A8C8E1 75%,
        #C8C89E 80%,
        #E4C674 85%,
        #E8CE6B 90%,
        #E4C674 95%,
        #C8C89E 96.66%,
        #A8C8E1 98.33%,
        #4A90D9 100%
    );
    border-radius: 8px;
    z-index: 0;
    animation: sweepGradient 24s linear infinite;
}

@keyframes sweepGradient {
    0% { transform: translateX(0); }
    100% { transform: translateX(-66.66%); }
}

/* Image styling - duotone effect for Muted and Vibrant only */
body:not(.gradient-animation-none) .page .entry-header .post-thumb img,
body:not(.gradient-animation-none) .page .entry-content figure:not(.wp-block-table):not(.fg-item-inner) img,
body:not(.gradient-animation-none) .page .entry-content .wp-block-image img {
    display: block;
    border-radius: 8px;
    filter: grayscale(100%) contrast(1.25);
    mix-blend-mode: multiply;
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

/* When None is selected - show normal images without filters */
body.gradient-animation-none .page .entry-header .post-thumb img,
body.gradient-animation-none .page .entry-content figure:not(.wp-block-table):not(.fg-item-inner) img,
body.gradient-animation-none .page .entry-content .wp-block-image img {
    display: block;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

/* Style h3 headers on PAGES ONLY (Officers page, etc.) - NOT blog/home */
.page .entry-content h3.wp-block-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    background: linear-gradient(to bottom, #ffffff 0%, #e8f2ff 100%);
    color: #1959A0;  /* Blue from border */
    padding: 20px 25px;
    border-radius: 8px;
    border: 2px solid #1959A0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 50px;
    text-align: left;
    margin-right: auto;
    max-width: 100%;
    justify-self: start;
}

/* Add Kiwanis logo before page h3 headers */
.page .entry-content h3.wp-block-heading::before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background: url('/wp-content/uploads/2025/10/correct-kiwanis-logo.png') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

/* End Section Header Styling */

/* ====================================================================
   BLOG POST GRID BACKGROUND

   Purpose:
   Add very light grey background to blog post grid container

   Modified: 2025-10-16
   ==================================================================== */

.ast-separate-container.ast-desktop .ast-blog-layout-4-grid .ast-row {
    background-color: #f5f5f5;
}

/* End Blog Post Grid Background */

/* ====================================================================
   MOBILE TWEAKS

   Purpose:
   - Make "Westfield Kiwanis Club News" header smaller on mobile
   - Show font selector on mobile
   - Modernize contact form

   Modified: 2025-10-16
   ==================================================================== */

/* Make news header smaller on mobile so it doesn't wrap */
@media (max-width: 768px) {
    /* Font size is now handled by responsive clamp() at line 545 and @media (max-width: 400px) at line 549 */

    /* Also make the logo in section headers smaller on mobile */
    .wk-join-us h2::before,
    body.home.blog .ast-container > h2:not(.entry-title)::before,
    body.home.blog h2:first-of-type:not(.entry-title)::before {
        width: 35px;
        height: 35px;
    }

    /* Reduce spacing between news header and blog posts on mobile */
    body.home.blog .wk-news-header h2 {
        margin-bottom: 0;
    }

    /* Reduce padding/margin between header and blog posts */
    body.home.blog .ast-container {
        padding-top: 0;
        margin-top: 0;
    }

    body.home.blog #primary {
        margin-top: 0;
        padding-top: 0;
    }

    body.home.blog #content {
        padding-top: 0;
        margin-top: 0;
    }

    /* Add tasteful divider between blog posts on mobile */
    .ast-separate-container article.ast-article-post {
        margin-bottom: 70px;
        position: relative;
    }

    /* Create divider as pseudo-element between posts */
    article.ast-article-post::after {
        content: '';
        position: absolute;
        bottom: -45px;
        left: 10%;
        width: 80%;
        height: 3px;
        background: linear-gradient(to right, transparent, #1959A0, transparent);
    }

    /* Remove divider from last post */
    article.ast-article-post:last-child::after {
        display: none;
    }
}

/* Modern contact form styling */
.wk-contact-us .wpforms-container,
.wk-join-us .wpforms-container {
    font-family: inherit;
}

.wk-contact-us .wpforms-field-label,
.wk-join-us .wpforms-field-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 15px;
}

.wk-contact-us .wpforms-field input[type="text"],
.wk-contact-us .wpforms-field input[type="email"],
.wk-contact-us .wpforms-field input[type="tel"],
.wk-contact-us .wpforms-field textarea,
.wk-join-us .wpforms-field input[type="text"],
.wk-join-us .wpforms-field input[type="email"],
.wk-join-us .wpforms-field input[type="tel"],
.wk-join-us .wpforms-field textarea {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.2s ease;
    background: white;
    width: 100%;
}

.wk-contact-us .wpforms-field input[type="text"]:focus,
.wk-contact-us .wpforms-field input[type="email"]:focus,
.wk-contact-us .wpforms-field input[type="tel"]:focus,
.wk-contact-us .wpforms-field textarea:focus,
.wk-join-us .wpforms-field input[type="text"]:focus,
.wk-join-us .wpforms-field input[type="email"]:focus,
.wk-join-us .wpforms-field input[type="tel"]:focus,
.wk-join-us .wpforms-field textarea:focus {
    border-color: #1959A0;
    outline: none;
    box-shadow: 0 0 0 3px rgba(25, 89, 160, 0.1);
}

.wk-contact-us .wpforms-submit-container,
.wk-join-us .wpforms-submit-container {
    margin-top: 20px;
}

.wk-contact-us .wpforms-submit,
.wk-join-us .wpforms-submit {
    background: linear-gradient(to bottom, #2070BB, #1959A0);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(25, 89, 160, 0.3);
}

.wk-contact-us .wpforms-submit:hover,
.wk-join-us .wpforms-submit:hover {
    background: linear-gradient(to bottom, #1959A0, #14467D);
    box-shadow: 0 6px 16px rgba(25, 89, 160, 0.4);
    transform: translateY(-2px);
}

.wk-contact-us .wpforms-submit:active,
.wk-join-us .wpforms-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(25, 89, 160, 0.3);
}

/* End Mobile Tweaks */

/* ====================================================================
   PREVENT HORIZONTAL BOUNCING ON MOBILE

   Purpose:
   Prevent the page from scrolling/bouncing left-right on mobile.
   Uses max-width instead of overflow-x: hidden to avoid breaking
   position: sticky on the navbar.

   Modified: 2025-10-17
   ==================================================================== */

html, body {
    max-width: 100vw;
    overflow-x: clip; /* Modern browsers: clips overflow without breaking sticky */
}

/* Ensure all major containers respect viewport width */
#page,
.site,
.ast-container,
.site-content {
    max-width: 100%;
    overflow-x: clip;
}

/* End Horizontal Bouncing Fix */

/* ====================================================================
   FOOGALLERY PAGE - Gallery Section Headers

   Style gallery section headers (h2) to match Officers page h3 style
   with Kiwanis logo, blue border, and gradient background
   ==================================================================== */

/* Style h2 headers in FooGallery page content */
.page .entry-content h2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    background: linear-gradient(to bottom, #ffffff 0%, #e8f2ff 100%);
    color: #1959A0 !important;
    padding: 20px 25px;
    border-radius: 8px;
    border: 2px solid #1959A0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 0px;
    text-align: left;
    margin-right: auto;
    max-width: 100%;
    justify-self: start;
}

/* Add Kiwanis logo before gallery h2 headers */
.page .entry-content h2::before {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background: url('/wp-content/uploads/2025/10/correct-kiwanis-logo.png') no-repeat center;
    background-size: contain;
    flex-shrink: 0;
}

/* ====================================================================
   FOOGALLERY STYLING - Bold & Modern (Option 2)

   Gold border transforms to blue on hover with smooth scale morph
   ==================================================================== */

/* REQUIRED: Remove top margin from images */
.page .entry-content .foogallery img {
    margin-top: 0 !important;
}

/* REQUIRED: Hide caption completely */
.foogallery .fg-caption {
    display: none !important;
}

/* Bold & Modern Style - Applied to all galleries */
.foogallery .fg-item-inner {
    border: 3px solid #D4AF37 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

.foogallery .fg-item-inner:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 12px 24px rgba(25, 89, 160, 0.3) !important;
    border-color: #1959A0 !important;
}

.foogallery .fg-item-inner img {
    transition: transform 0.3s ease !important;
}

.foogallery .fg-item-inner:hover img {
    transform: scale(1.05) !important;
}

/* End FooGallery */

/* ====================================================================
   LITY MODAL SIZING

   Purpose:
   Make event detail modals larger for better readability.
   Position modal below the sticky navbar to prevent cutoff.

   Modified: 2025-10-20
   ==================================================================== */

.lity-container {
    width: 800px !important;
    max-width: 85vw !important;
    height: auto !important;
    max-height: 85vh !important;
    /* Add top margin to account for sticky navbar (80px) plus some breathing room */
    margin-top: 100px !important;
}

.lity-content {
    max-height: 85vh !important;
    overflow-y: auto !important;
    width: 100% !important;
}

/* End Lity Modal Sizing */

/* ====================================================================
   STICKY FOOTER - REMOVED

   The sticky footer was causing issues on mobile devices where it would
   cover content. Since the footer jump during AJAX loads is minimal,
   we've removed the sticky positioning entirely.

   Modified: 2025-10-21
   ==================================================================== */

/* Force footer to be static/relative, never sticky or fixed */
.site-footer,
.site-below-footer-wrap,
.ast-small-footer,
footer {
    position: static !important;
}

/* ====================================================================
   ACCESSIBILITY - Color Contrast

   Purpose:
   Fix color contrast issues for WCAG AA compliance (4.5:1 minimum).

   Technical Details:
   - Original gold color (#D4AF37) had only 2.8:1 contrast on white
   - Darker gold (#9A7C0E) still failed PageSpeed contrast tests
   - Dark gray (#666666) still failed
   - Using pure black (#000000) for maximum contrast (21:1)
   - Applies to blog post metadata (dates, categories, etc.)
   - Sacrifices Kiwanis gold branding for WCAG AA compliance

   Modified: 2025-10-20
   ==================================================================== */

/* Override Astra's article metadata color with higher specificity */
.ast-article-post .entry-meta,
.ast-article-post .entry-meta a,
.ast-article-post .entry-meta .posted-on,
.ast-article-post .entry-meta .posted-on a,
.ast-article-post .entry-meta .posted-on .published,
.ast-article-post .posted-on,
.ast-article-post .posted-on span,
.ast-article-post .posted-on .published,
.ast-post-format- .ast-article-inner .posted-on,
.ast-post-format- .ast-article-inner .posted-on .published,
.ast-post-format- .ast-article-inner .published,
div.ast-post-format- div.ast-article-inner span.posted-on,
div.ast-post-format- div.ast-article-inner span.published,
.posted-on,
.posted-on .published,
.published,
.byline,
.cat-links,
.tags-links,
.comments-link {
    color: #000000 !important; /* Pure black for maximum contrast (21:1) */
}

/* Ultra-specific selector to override Astra's blog-layout-4 */
.ast-post-format- .blog-layout-4 .ast-article-inner .posted-on,
.ast-post-format- .blog-layout-4 .ast-article-inner .posted-on .published,
.ast-post-format- .blog-layout-4 .ast-article-inner span.published,
article.ast-post-format- .blog-layout-4 .ast-article-inner .posted-on,
article.ast-post-format- .blog-layout-4 .ast-article-inner span.published[itemprop="datePublished"] {
    color: #000000 !important;
}

/* ====================================================================
   READ POST BUTTON - GOLD PILL STYLING

   Purpose: Style the "Read Post »" link as a pill-shaped button

   Design:
   - Gold background (#D4AF37 - Kiwanis gold)
   - Black text for high contrast and readability
   - Rounded pill shape (border-radius: 20px)
   - Inline-block to fit content width
   - Hover effect: slightly darker gold

   Technical Notes:
   - Uses !important to override Astra's link styling
   - Black text ensures WCAG AA compliance (contrast ratio > 4.5:1 on gold)
   - Padding provides comfortable click target

   Modified: 2025-10-20
   ==================================================================== */

.ast-article-post .read-more a,
.ast-article-post .ast-read-more-container a,
.read-more a {
    display: inline-block !important;
    background-color: #D4AF37 !important; /* Kiwanis gold */
    color: #000000 !important; /* Black text for contrast */
    padding: 10px 20px !important;
    border-radius: 20px !important; /* Pill shape */
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: background-color 0.3s ease !important;
}

.ast-article-post .read-more a:hover,
.ast-article-post .ast-read-more-container a:hover,
.read-more a:hover {
    background-color: #C5A028 !important; /* Slightly darker gold on hover */
    color: #000000 !important; /* Keep black text on hover */
}

/* ====================================================================
   SCROLL TO TOP BUTTON Z-INDEX
   ==================================================================== */

/* Ensure scroll-to-top button appears above calendar sticky month headers (z-index: 999) */
.ast-scroll-to-top-right,
.ast-scroll-to-top-left {
    z-index: 1001 !important;
}