/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It's ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It's fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.16.1765109403
Updated: 2025-12-07 12:10:03

*/

/* ========================================
   Tribute Page Navigation Links
   ======================================== */

.tribute-navigation {
    text-align: center;
    padding: 0;
    margin: 0;
}

.tribute-navigation-text {
    text-align: center;
    font-style: italic;
    margin: 0;
    padding: 0;
}

.tribute-nav-link {
    color: #0066cc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tribute-nav-link:hover {
    color: #004499;
    text-decoration: underline;
}

.tribute-nav-separator {
    color: #666;
    margin: 0 8px;
}

/* ========================================
   Mobile Header Fix - Prevent Title Cutoff
   ======================================== */

/* Tablet devices (up to 921px) */
@media (max-width: 921px) {
    .site-title,
    .site-header .site-title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .ast-site-identity {
        max-width: 100%;
        padding: 0.5rem;
    }

    .site-branding {
        padding: 0.5rem 0;
    }
}

/* Mobile devices (up to 544px) */
@media (max-width: 544px) {
    .site-title,
    .site-header .site-title {
        font-size: 1.2rem !important;
        line-height: 1.2 !important;
        padding: 0.25rem 0.5rem;
    }

    .site-title a {
        white-space: normal !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        display: block;
    }

    .ast-mobile-header-wrap .site-branding {
        flex: 1;
        max-width: calc(100% - 60px); /* Account for mobile menu toggle */
    }

    /* Reduce header padding on mobile */
    .ast-mobile-header-wrap .main-header-bar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* Extra small devices (up to 400px) */
@media (max-width: 400px) {
    .site-title,
    .site-header .site-title {
        font-size: 1rem !important;
    }
}

/* ========================================
   Memorial Content Spacing
   ======================================== */

div.memorial p {
    margin-bottom: 1em;
}

/* ========================================
   Tribute Display Styling
   ======================================== */

.dave-tribute-title {
    display: block !important;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 0.5em;
    color: #333;
}

.dave-tribute-name {
    font-weight: bold;
    margin-bottom: 0.25em;
}

.dave-tribute-relationship,
.dave-tribute-year-met {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 0.25em;
}

.dave-tribute-relationship span,
.dave-tribute-year-met span {
    font-weight: normal;
    color: #333;
}

.dave-tribute-back-link {
    margin-top: 1em;
    text-align: right;
}

.dave-tribute-back-link a {
    font-size: 0.85em;
    color: #0066cc;
    text-decoration: none;
}

.dave-tribute-back-link a:hover {
    text-decoration: underline;
    color: #004499;
}

/* ========================================
   Two-Column Layout: Tributes + Sidebar
   ======================================== */

.dave-tributes {
    max-width: none !important;
}

.tributes-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5em;
    align-items: flex-start;
    width: 100%;
    position: relative;
}

.tributes-main {
    flex: 1 1 70%;
    min-width: 0; /* Prevents flex item from overflowing */
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 1em;
    position: relative;
}

.tributes-sidebar {
    flex: 0 0 20%;
    max-width: 250px;
    min-width: 180px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
}

/* ========================================
   Tribute Index Sidebar
   ======================================== */

.tribute-index {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 1.5em;
}

.tribute-index h3 {
    font-size: 1em;
    margin-top: 0;
    margin-bottom: 1em;
    color: #555;
}

.tribute-index-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tribute-index-list li {
    margin-bottom: 0.5em;
}

.tribute-index-list a {
    font-size: 0.85em;
    color: #0066cc;
    text-decoration: none;
    display: block;
    line-height: 1.4;
}

.tribute-index-list a:hover {
    text-decoration: underline;
    color: #004499;
}

.top-link {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #ddd;
}

.top-link a {
    font-weight: bold;
}

.submit-tribute-link {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid #ddd;
}

.submit-tribute-link a {
    font-weight: bold;
    color: #008800 !important;
}

.submit-tribute-link a:hover {
    color: #006600 !important;
}

.dave-tribute-form-inline {
    margin-top: 3em;
    padding-top: 2em;
    padding-bottom: 50vh; /* Add bottom padding so form can scroll into view */
    border-top: 2px solid #ddd;
}

/* Responsive: Stack on tablets and mobile */
@media (max-width: 1024px) {
    .tributes-container {
        flex-direction: column;
    }

    .tributes-main {
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }

    .tributes-sidebar {
        width: 100%;
        order: -1; /* Move sidebar above tributes on mobile */
        max-height: none;
        overflow-y: visible;
    }

    .tribute-index {
        margin-bottom: 2em;
    }

    .tribute-index-list {
        column-count: 2;
        column-gap: 1.5em;
    }
}

@media (max-width: 480px) {
    .tribute-index-list {
        column-count: 1;
    }
}

/* ========================================
   Page Header Text - Mobile Responsive
   ======================================== */

/* Tablet devices (up to 921px) */
@media (max-width: 921px) {
    p.header-text {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0.5rem 1rem;
    }
}

/* Mobile devices (up to 544px) */
@media (max-width: 544px) {
    p.header-text {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        padding: 0.5rem 0.75rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Extra small devices (up to 400px) */
@media (max-width: 400px) {
    p.header-text {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        padding: 0.5rem;
    }
}

/* ========================================
   Gallery Page Styles
   ======================================== */

.dave-gallery-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.dave-gallery-header {
    text-align: center;
    margin-bottom: 40px;
}

.dave-gallery-title {
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.dave-gallery-description {
    font-size: 18px;
    color: #666;
    font-style: italic;
}

/* Masonry Grid */
.dave-gallery-grid {
    margin: 0 auto;
    max-width: 1400px;
}



.gallery-item {
    width: calc(25% - 12px);
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.gallery-item a {
    display: block;
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s ease;
}

.gallery-item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-item-overlay {
    opacity: 1;
}

.gallery-item-icon {
    font-size: 48px;
    color: white;
}

.dave-gallery-footer {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid #ddd;
}

.gallery-count {
    font-size: 16px;
    color: #666;
    font-style: italic;
}

.no-gallery-images {
    text-align: center;
    font-size: 18px;
    color: #999;
    padding: 60px 20px;
}

/* Responsive Gallery */
@media (max-width: 1200px) {
    .gallery-item {
        width: calc(33.333% - 10px);
    }
}

@media (max-width: 768px) {
    .gallery-item {
        width: calc(50% - 8px);
    }

    .dave-gallery-title {
        font-size: 28px;
    }

    .dave-gallery-description {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .gallery-item {
        width: 100%;
        margin-bottom: 15px;
    }

    .dave-gallery-title {
        font-size: 24px;
    }

    .dave-gallery-description {
        font-size: 14px;
    }
}