/* Theme Name: Muzze Child Theme
Theme URI: https://themeforest.net/user/ovatheme/portfolio
Description: Muzze is a modernized take on an ever-popular WordPress. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Muzze will make your WordPress look beautiful everywhere. Created by <a href="https://themeforest.net/user/ovatheme">Ovatheme</a>
Author: Ovatheme
Author URI: https://themeforest.net/user/ovatheme
Template: muzze
Version: 1.0
Tags: two-columns, three-columns, left-sidebar, right-sidebar, custom-menu, editor-style, featured-images, flexible-header, full-width-template, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain:  muzze-child
*/

html {
    height: 100%;
    scrollbar-gutter: stable both-edges;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    margin: 0;
    scrollbar-gutter: stable both-edges;
}

.red {
    color: #A62623 !important;
}

.blue {
    color: #496DA6 !important;
}

.green {
    color: #88BE29 !important;
}

.yellow {
    color: #FCF67C !important;
}

a:hover {
    text-decoration: none !important;
    color: #111 !important;
}

.glow {
    color: #333;
    animation: glow 1s ease-in-out infinite alternate !important;
  }
  
  @-webkit-keyframes glow {
    from {
      text-shadow: 0 0 1px #bbbbdd, 0 0 2px #bbbbdd, 0 0 3px bbbbdd, 0 0 4px #bbbbdd, 0 0 5px #bbbbdd, 0 0 6px #bbbbdd, 0 0 7px #bbbbdd;
    }
    
    to {
      text-shadow: 0 0 2px #dddddd, 0 0 3px #dddddd, 0 0 4px #dddddd, 0 0 5px #dddddd, 0 0 6px #dddddd, 0 0 7px #dddddd, 0 0 8px #dddddd;
    }
}

.wrap_site {
    /* min-height: 100vh; */ /* Original approach */
    /* min-height: calc(100vh - 80px); */ /* Assuming 80px for headers/menus above .wrap_site */
    /* If WordPress admin bar is also consistently outside and above, you might need to account for it too. 
       This can be tricky as its height can vary (32px or 46px) and it loads based on login status.
       A more robust solution might involve JS or body flexbox if admin bar is a concern. */
    /* JavaScript will now handle min-height */
    flex-grow: 1; /* Allows main-wrapper to take up available space if wrap_site is flex column */
    flex-direction: column; /* Ensures children of main-wrapper stack vertically */
    width: 100%;
}

.main-wrapper {
    display: flex;
    flex-grow: 1; /* Allows main-wrapper to take up available space if wrap_site is flex column */
}

.ovatheme_breadcrumbs {
    margin-bottom: 30px;
}

.site-inner.layout-two-sidebars {
    /* display: flex; */
    /* align-items: flex-start; */
}
  
/* Left sidebar */
.sidebar-left, .sidebar-right {
    width: 20%;
    min-width: 220px;
    padding-right: 1rem;
    padding-left: 1rem;
    /*border: 1px solid green;*/
    flex-shrink: 0; /* Prevent sidebars from shrinking */
}

.sidebar-left-title {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    font-weight: bold;
}
  
/* Main content area */
.content-area {
    /* width: 60%; */ /* Removed */
    flex-grow: 1; /* Allow content area to take remaining space */
    padding: 0 1rem;
    /*border: 1px solid blue;*/
}
  
/* Original right sidebar (usually #secondary or .widget-area) */
.widget-area, .sidebar {
    width: 20%;
    padding-left: 1rem;
    padding-right: 1rem;
    flex-shrink: 0; /* Prevent sidebars from shrinking */
}

/* Breadcrumb styling */
.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5em;
}

.gallery-breadcrumb {
  font-size: 0.85em;
  color: #555;
  flex-grow: 1;
}
.gallery-breadcrumb a {
  color: #555;
  text-decoration: none;
}
.gallery-breadcrumb .breadcrumb-sep {
  margin: 0 0.5em;
  color: #999;
}

/* Diashow button */
.gallery-slideshow-btn {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 0.9em;
  color: #fff;
  background-color: #496DA6;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.gallery-slideshow-btn:hover {
  background-color: #345187;
  color: #fff !important;
}

/* Responsive flex grid */
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  /* margin: -0.75rem; */ /* Remove negative margin */
  gap: 1.5rem; /* Add gap for spacing between tiles (adjust value as needed) */
  max-width: 100%; /* Ensure it doesn't exceed parent's width */
}

.gallery-item {
    flex: 1 1 calc(20% - 1.5rem); /* 5 items per row (20%) */
    max-width: calc(20% - 1.5rem); /* Enforce maximum width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background-color: #f9f9f9;
    border: 1px solid rgba(230, 230, 230, 0.25);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    padding: 8px;
}

.gallery-item:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Enhanced shadow on hover */
}

.gallery-item a {
  text-decoration: none; /* Remove underline from links within tile */
  color: inherit; /* Inherit text color */
  display: block; /* Make the link cover the image for clickability */
}

.gallery-item figure {
    margin: 0; /* Reset figure margin */
    flex-grow: 1; /* Allow figure to take space if content is short */
    display: flex;
    flex-direction: column;
}

.gallery-item .gallery-image-frame {
  background-color: #ffffff; /* White background for the frame effect */
  border: 8px solid #e0e0e0; /* Outer frame border */
  padding: 8px; /* Space between outer frame and inner frame/image */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.1); /* Inner shadow for depth */
  margin-bottom: 0.75rem; /* Space between frame and caption */
  display: block; /* Ensure it behaves as a block */
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%; /* Ensure image doesn't overflow its container */
  border: 1px solid #d0d0d0; /* Thin inner border around the image itself */
}

.gallery-item figcaption.gallery-caption {
  padding: 0.5rem 0.25rem;
  text-align: center;
}

.gallery-item .gallery-title {
  font-size: 1rem; /* Adjust as needed */
  font-weight: 600; /* Semi-bold */
  color: #333333;
  margin-bottom: 0rem;
  line-height: 1.3;
}

.gallery-item .gallery-subtitle {
  font-size: 0.85rem; /* Adjust as needed */
  color: #555555;
  line-height: 1.5;
  margin-bottom: 0;
}

.main-wrapper {
    width: 100%;
}

/* breakpoints for fewer columns */
@media (max-width: 1200px) {
  .gallery-item { 
    flex: 1 1 calc(25% - 1.5rem); /* 4 per row */
    max-width: calc(25% - 1.5rem);
  }
}

@media (max-width: 900px) {
  .gallery-item { 
    flex: 1 1 calc(33.33% - 1.5rem); /* 3 per row */
    max-width: calc(33.33% - 1.5rem);
  }
}

@media (max-width: 991.98px) {
    .main-wrapper {
      flex-direction: column;
    }
    .sidebar-left, .content-area, .widget-area {
      width: 100%;
      padding-left: 0;
      padding-right: 0;
    }
  
    /* Hide the left sidebar on mobile screens */
    .sidebar-left {
      display: none !important; 
    }
}
  
@media (max-width: 600px) {
  .gallery-item { flex: 1 1 50%; }  /* 2 per row */
}
@media (max-width: 400px) {
  .gallery-item { flex: 1 1 100%; } /* 1 per row */
}

/* Custom PhotoSwipe UI - From HTML Example */
/* Consolidated Styling for buttons */
.pswp__button--rotate-left,
.pswp__button--rotate-right,
.pswp__button--fullscreen,
.pswp__button--play,
.pswp__button--pause,
.pswp__button--exit-fullscreen { /* Applied when fullscreen is active */
    background-size: 24px 24px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 0.85 !important;
    transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

/* Ensure background image is defined for each state, including hover */
.pswp__button--rotate-left, .pswp__button--rotate-left:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z"/></svg>') !important;
}
.pswp__button--rotate-right, .pswp__button--rotate-right:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.55 5.55L11 1v3.07c-3.95.49-7 3.85-7 7.93s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.41 1.42c.52.75.87 1.59 1.01 2.47h2.02zm-2.02 2c-.14.87-.49 1.72-1.02 2.47l1.41 1.42c.9-1.16 1.45-2.5 1.62-3.89h-2.01zM16.9 17.9c.75-.54 1.59-.88 2.46-1.03v2.02c-1.39.17-2.74.71-3.9 1.61l1.44-1.6z"/></svg>') !important;
}
.pswp__button--fullscreen, .pswp__button--fullscreen:hover { /* Default fullscreen icon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>') !important;
}
/* Icon for when fullscreen is active. This class is added to the fullscreen button. */
.pswp__button--fullscreen.pswp__button--exit-fullscreen,
.pswp__button--fullscreen.pswp__button--exit-fullscreen:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>') !important;
}

/* Autoplay Button Icons - Definitions Only */
.pswp__button--play, .pswp__button--play:hover {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>') !important;
}
.pswp__button--pause, .pswp__button--pause:hover {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>') !important;
}

/* Hover states for opacity, brightness, and scale */
.pswp__button--rotate-left:hover,
.pswp__button--rotate-right:hover,
.pswp__button--fullscreen:hover,
.pswp__button--close:hover,
.pswp__button--zoom:hover,
.pswp__button--play:hover,
.pswp__button--pause:hover { 
    opacity: 1 !important;
    filter: brightness(1.35);
    transform: scale(1.1);
}

/* Style for rotated images (though rotation is off, good to keep if re-enabled) */
.pswp__img--rotated {
    transition: transform 0.3s ease;
}
.pswp img { /* Ensures images within PhotoSwipe don't overflow their bounds */
    object-fit: contain !important;
    max-width: 100%;
    max-height: 100vh; /* Ensure it fits viewport height */
}

/* Enhanced transition effects for PhotoSwipe */
.pswp__img {
    opacity: 0;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out !important;
    border: 10px solid white; /* Example frame */
    box-sizing: border-box;
}

.pswp--open .pswp__img {
    opacity: 1;
}

.pswp__item {
    transition: background-color 0.4s ease-in-out; /* For background transitions if any */
    background-color: var(--pswp-bg);
}

/* Slide transitions */
.pswp--css_animation .pswp__item {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
}

/* Ensure PhotoSwipe UI elements are above content and have a sensible z-index */
.pswp {
    z-index: 10000 !important; /* High z-index to be on top */
}

.pswp__ui {
    z-index: 10001 !important; /* UI elements above the background/image */
}

.pswp__top-bar {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for the top bar */
    /* Default top position */
    top: 0;
    left: 0;
    right: 0;
    position: fixed; /* Ensure it is fixed for this to work */
}

/* Adjust PhotoSwipe top bar if WordPress admin bar is present */
body.admin-bar .pswp__top-bar {
    top: var(--wp-admin-bar-height, 32px); /* Use CSS var, fallback to 32px */
}

.pswp__caption {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for caption */
    padding-bottom: 10px; /* Add some padding to caption */
}

.pswp__caption__center {
    text-align: center;
    max-width: 800px; /* Limit caption width for readability */
    padding: 10px;
    margin: 0 auto;
    font-size: 1rem;  /* Adjust caption font size */
    color: #eee;      /* Light color for caption text */
}

/* PhotoSwipe Customizations */
/* Dissolve Transition for slides */
/* Remove previous transform transition from .pswp__container */
.pswp__container {
    /* transition: transform var(--pswp-transition-duration, 333ms) ease; */ /* REMOVED FOR DISSOLVE */
}

/* Apply fade transition to items/images */
.pswp__item {
    /* background-color: var(--pswp-bg); */ /* Old: Use PhotoSwipe's background color */
    background-color: transparent; /* NEW: Make item background transparent for main BG to show */
    /* transition: opacity 0.5s ease-in-out; */ /* This might be too broad, PhotoSwipe manages item visibility */
}

.pswp__img {
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.22, 1) !important;
    padding: 12px;
    background-color: #ffffff;
    border: 14px solid #e0e0e0;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Ensure the background behind the padded image is the main PS background, not transparent */
/* .pswp__item rule above handles this by setting background-color: transparent; */

/* Caption Styling for Title and Excerpt */
.pswp__custom-caption-container { /* This will be the element we registered with name 'custom-caption' */
    /* position: absolute; */ /* REMOVED - No longer absolutely positioned at bottom */
    /* bottom: 0; */ /* REMOVED */
    /* left: 0; */ /* REMOVED */
    /* width: 100%; */ /* REMOVED - Will take space within top bar */
    /* padding: 0 15px; */ /* New padding for top bar context */
    /* box-sizing: border-box; */ /* Re-evaluate, already in pswp default styles? */
    /* background-color: transparent; */ /* Make caption background transparent */
    /* color: #fff; */ /* Text color, ensure it contrasts with top bar */
    /* text-align: center; */ /* Center text content */
    /* display: flex; */ /* Use flexbox to center children */
    /* flex-direction: column; */ /* Stack title and excerpt vertically */
    /* align-items: center; */ /* Center children horizontally */
    /* justify-content: center; */ /* Center children vertically if there's extra space */
    /* flex-grow: 1; */ /* Allow it to take available space in the top bar */
    /* min-height: 44px; */ /* Ensure it has some minimum height, matching typical top bar icon heights */

    position: absolute;
    left: 50%;
    top: 0; /* Align to the top of the bar */
    height: 100%; /* Take full height of the bar for vertical centering */
    transform: translateX(-50%);
    width: auto; /* Let content determine width initially */
    max-width: 60%; /* Max width relative to top bar, adjust as needed */
    padding: 0 10px; /* Padding for content within the caption container */
    box-sizing: border-box;
    background-color: transparent;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center title/excerpt horizontally if they are not full width */
    justify-content: center; /* Center title/excerpt vertically within the caption container */
    text-align: center; /* Center the text within title/excerpt lines */
}

.pswp-caption-title {
    font-size: 0.9em; /* Slightly smaller for top bar */
    font-weight: bold;
    margin-bottom: 0em;
    color: #ffffff;
}

.pswp-caption-excerpt,
.pswp-caption-subtitle {
    font-size: 0.75em; /* Slightly smaller for top bar */
    line-height: 1.4;
    color: #cccccc; /* Slightly lighter to differentiate from title if needed */
    /* max-width: 80%; */ /* Prevent very long excerpts from taking too much width */
    /* overflow: hidden; */ /* Hide overflow */
    /* text-overflow: ellipsis; */ /* Add ellipsis for long text */
    /* white-space: nowrap; */ /* Keep excerpt on one line if possible, combined with overflow */
    max-width: 100%; /* Use full width of its parent (.pswp__custom-caption-container) */
    white-space: normal; /* Allow wrapping */
    overflow-wrap: break-word; /* Help break long words if necessary */
}
.pswp-caption-subtitle {
    display: none;
}
/* Remove or adjust old .pswp__caption__center styling if it conflicts */
.pswp__caption__center {
    /* bottom: 20px; */ /* This was an adjustment for the old simple title */
    /* display: none; */ /* If using the new custom caption exclusively */
}

/* Ensure the custom caption is part of the UI and visible */
.pswp__ui .pswp__custom-caption-container {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
.pswp--ui-visible .pswp__custom-caption-container {
    opacity: 1;
}
.pswp--ui-hidden .pswp__custom-caption-container {
    opacity: 0;
}

#muzze_child_gallery_category_widget-3 > h2 {
    margin-top: 0;
    font-size: 1.3rem;
}

/* Typography Customizations */
/* Ensure headings use the Archivo font, consistent with body text */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Archivo', sans-serif; /* Added Archivo with a sans-serif fallback */
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.6rem;
}

h4 {
  font-size: 1.4rem;
}

h5 {
  font-size: 1.2rem;
}

h6 {
  font-size: 1rem;
}

/* Styles for Site Title and Tagline in Header */
.site-branding-textual {
    /* No specific styles needed by default, acts as a container */
}

.site-branding-textual .site-title,
.site-branding-textual .site-title a {
  margin-bottom: 0.1rem;
  font-size: 1.7rem;
  line-height: 1.2;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  min-width: 240px;
  margin-top: 0px;
}

.site-branding-textual .site-title a:hover {
    color: #000; /* Adjust hover color */
}

.site-branding-textual p.site-title {
    /* If p tag is used for site title, ensure it still looks like a title */
    font-size: 1.8rem; /* Match h1 */
    font-weight: bold; /* Match h1 */
    margin-bottom: 0.1rem;
}

.site-branding-textual p.site-title a {
    font-size: 1rem; /* Inherit from parent p.site-title */
    font-weight: inherit; /* Inherit from parent p.site-title */
}

.site-branding-textual .site-description {
    margin-bottom: 0;
    font-size: 0.85rem; /* Adjust as needed */
    color: #777; /* Adjust to your header secondary text color */
    line-height: 1.3;
    margin-top: -0.2rem; /* Pull it slightly closer to title */
}

/* Adjustments for flex alignment with navbar if needed */
.ova-nav-area .navbar {
    /* The navbar might need its own alignment adjustments if it's not centering nicely */
    /* e.g., align-self: center; (if .ova-nav-area is taller due to multiline tagline) */
    /* Depending on Bootstrap version, .navbar-nav might need margin auto if menu is short */
} 

#muzze_child_gallery_category_widget-3 > ul{
  color: #343434;
}
#muzze_child_gallery_category_widget-3 .gallery-cat {
    padding-top: 1.6rem;
}
#muzze_child_gallery_category_widget-3 .gallery-cat a, #muzze_child_gallery_category_widget-3 .gallery-tags a  {
  color: #343434;
}

footer .container {
  width: 100%;
  text-align: right;
  font-size: 0.9rem;
}

/* Custom Footer Styling */
.site-footer-child {
    background-color: #f9f9f9; 
    padding: 5px 15px; /* Reduced vertical padding, kept horizontal */
    border-top: 1px solid #e0e0e0; 
    width: 100%;
    box-sizing: border-box;
}

.site-footer-child .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    width: 100%; /* Ensure container takes full width if not already */
    max-width: 1200px; /* Optional: constrain max width on very large screens */
    margin: 0 auto; /* Center the container */
}

.footer-child-nav-container { /* This is the <nav> element */
    /* No specific styles needed here if .footer-child-navigation handles flex */
}

.footer-child-navigation { /* This is the <ul> element */
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center; /* Vertically align LIs and their ::after content */
    line-height: 1;    /* Base line-height for rhythm */
}

.footer-child-navigation li {
    margin: 0; 
    padding: 0; 
    display: flex;       /* Make LI a flex container */
    align-items: center; /* Vertically align <a> and ::after within the LI */
}

.footer-child-navigation li a,
.footer-child-navigation li:not(:last-child)::after {
    display: inline-block; 
    vertical-align: middle; 
}

.footer-child-navigation li a {
    color: inherit; 
    text-decoration: none;
    padding: 0 10px; /* Spacing around link text */
}

.footer-child-navigation li:not(:last-child)::after {
    content: '|';
    color: #aaa; /* Color for the separator, adjust as needed */
    margin-left: 0px; /* Adjust spacing after link, before separator */
    padding-right: 0px; /* Spacing after separator */
    margin-top: 0px;

}

.copyright-child {
    text-align: right; /* Ensure text aligns right if it wraps */
    font-size: 0.9em; /* Adjust as needed */
    color: #555; /* Adjust as needed */
}

/* Responsive adjustments for the footer */
@media (max-width: 768px) {
    .navbar-nav .nav-link, 
    #header_menu .navbar-nav .nav-link, 
    #header_menu .categories-accordion-submenu .category-accordion-trigger, 
    #header_menu .tags-accordion-submenu a,
    .footer-child-navigation li a {
        font-size: 0.8rem;
        padding-bottom: 0px;
    }

    .site-footer-child {
        padding: 5px 15px; /* Consistent small vertical padding */
    }
    .site-footer-child .container {
        flex-direction: column; 
        text-align: center; 
    }

    .site-footer-child .footer-child-nav-container {
        line-height: 1.2; /* Adjusted for better readability/tap, or remove if UL line-height is enough */
    }

    .footer-child-navigation {
        justify-content: center; /* Center menu items when stacked */
        margin-bottom: 0px; /* Add space between menu and copyright when stacked */
    }

    .footer-child-navigation li {
        margin-bottom: 0px;
    }

    .footer-child-navigation li a {
        padding: 5px 5px; /* Reduced horizontal, added some vertical for tap targets */
    }

    .copyright-child {
        text-align: center; /* Center copyright text when stacked */
    }

    .pswp__button {
        width: 26px !important;
    }

    .pswp__icn {
        position: absolute;
        top: 17px !important;
        left: 3px !important;
        width: 25px !important;
        height: 25px !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .pswp__button--zoom svg.pswp__icn {
        width: 32px !important;
        height: 32px !important;
        margin-top: -2px !important;
    }

    .pswp-caption-title,
    .pswp-caption-subtitle {
        margin-bottom: 0em !important;
    }

    button:focus, button:hover, button:active {
        border: none !important;
        box-shadow: none !important;
    }
}

/* Hide the mobile-specific categories trigger on desktop */
@media (min-width: 992px) { /* Or your theme's specific 'lg' breakpoint if customized */
    .menu-item:has(> a[href="#categories-accordion"]) {
        display: none !important; /* Hide the list item */
    }
}

/* Mobile Header Adjustments */
@media (max-width: 991.98px) {
    .ovatheme_header_default .container .row {
        flex-wrap: nowrap; /* Prevent wrapping to ensure one line */
        align-items: center; /* Vertically align items in the center */
    }

    /* 1. Logo to the top-left */
    .ovatheme_header_default .ova-logo-column {
        order: 1; /* First item */
        padding-left: 8px;
        padding-right: 8px;
    }
    #animated-logo-placeholder,
    #animated-logo-placeholder svg { 
        width: 100px !important;  
        height: auto !important; 
    }

    #replay-logo-animation {
        font-size: 0.6rem !important;
        bottom: -3px
    }

    /* 2. Title and Subtitle next */
    .ovatheme_header_default .site-branding-textual-column {
        order: 2; /* Second item */
        flex-grow: 1; 
        padding-left: 0;
        padding-right: 5px;
        min-width: 0; 
        text-align: left; 
    }
    .site-branding-textual .site-title,
    .site-branding-textual .site-title a {
        font-size: 1.2rem !important; 
        margin-bottom: 0 !important; 
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0; 
    }
    .site-branding-textual .site-description {
        font-size: 0.7rem !important; 
        margin-top: 0 !important; 
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block; 
    }
    /* .site-branding-textual .site-description { display: none; } */

    /* 3. Hamburger icon to the far right */
    .ovatheme_header_default .ova-main-nav-column {
        order: 3; /* Third item */
        flex-grow: 0; 
        flex-shrink: 0; 
        padding-right: 0; 
    }
    .ova-main-nav-column .navbar {
        padding: 0 !important;
        padding-right: 6px !important;
    }
    .navbar-toggler {
        font-size: 1.1rem; 
        padding: 0.25rem 0.5rem; 
    }

    .ovatheme_header_default .col-auto,
    .ovatheme_header_default .col {
        padding-left: 5px; 
        padding-right: 5px; 
    }
    .ovatheme_header_default .ova-logo-column {
         padding-left: 0; 
    }
     .ovatheme_header_default .ova-main-nav-column {
        padding-right: 8px; 
    }
}

/* Mobile Menu Alignment Adjustments */
@media (max-width: 1199.98px) { 

    .ovatheme_header_default nav.navbar li a {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 0.85rem;
    }
    .site-branding-textual .site-title, .site-branding-textual .site-title a {
        font-size: 1.4rem !important;
        min-width: 180px;
        padding-bottom: 0.1rem;
    }

    .site-branding-textual .site-description {
        font-size: 0.7rem !important;
    }

    #animated-logo-placeholder .logo-wrapper svg {
        height: 70px;
    }

    .ovatheme_header_default .ova-logo-column {
        padding-left: 6px;
        padding-right: 6px;
    }
   
    
}


@media (max-width: 991.98px) { 

    #header_menu {
        padding-left: 8px;
        border-radius: 0.25rem;
        margin-top: 10px;
        width: 60vw;
    }

    #header_menu.show, 
    #header_menu.collapsing { 
        position: absolute;
        right: 0;
        left: auto;
        top: 100%;
        min-width: 40vwx;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, .25);
        box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, .375);
        z-index: 1000;
        max-width: 100vw;
    }

    #header_menu .navbar-nav {
        padding: 5px 0; 
        align-items: flex-start; 
                                
    }

    #header_menu .navbar-nav .nav-item {
        width: 100%; 
    }

    #header_menu .navbar-nav .nav-link {
        padding: 8px 15px; 
        text-align: left; 
                           
        width: 100%; 
        box-sizing: border-box;
    }

    /* Styling for your categories accordion within this mobile menu */
    #header_menu .categories-accordion-submenu,
    #header_menu .tags-accordion-submenu {
        /* background-color: #f8f9fa; */
    }
    #header_menu .categories-accordion-submenu .category-accordion-trigger,
    #header_menu .tags-accordion-submenu a {
        padding-left: 25px;
        padding-right: 8px;
        line-height: 1rem;
    }
    #header_menu .tags-accordion-submenu a {
        padding-left: 35px; 
    }

    .ovatheme_header_default nav.navbar ul.nav li > a {
        border-bottom: none !important;
        font-size: 0.8rem !important;
    }

    .site-footer-child {
        padding: 0px;
        padding-top: 10px;
    }

    .site-footer-child .footer-child-nav-container {
        line-height: 0.7rem;
    }
    
}

/* Modern Gleaming Hover Effect for Menu Links */

/* Common setup for links in both desktop and mobile menus */
.navbar-nav .nav-link, 
#header_menu .navbar-nav .nav-link, 
#header_menu .categories-accordion-submenu .category-accordion-trigger, 
#header_menu .tags-accordion-submenu a,
.footer-child-navigation li a 
{
    position: relative; 
    overflow: hidden;   
    transition: color 0.3s ease; 
    z-index: 1; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* The gleaming pseudo-element */
.navbar-nav .nav-link::before,
#header_menu .navbar-nav .nav-link::before,
#header_menu .categories-accordion-submenu .category-accordion-trigger::before,
#header_menu .tags-accordion-submenu a::before,
.footer-child-navigation li a::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; 
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.25), 
        transparent
    );
    transition: left 0.4s ease-in-out; 
    z-index: -1;
}

/* On hover, bring the gleam into view and change text color if desired */
.navbar-nav .nav-link:hover,
#header_menu .navbar-nav .nav-link:hover,
#header_menu .categories-accordion-submenu .category-accordion-trigger:hover,
#header_menu .tags-accordion-submenu a:hover,
.footer-child-navigation li a:hover {
    color: #000; 
                 
}

.navbar-nav .nav-link:hover::before,
#header_menu .navbar-nav .nav-link:hover::before,
#header_menu .categories-accordion-submenu .category-accordion-trigger:hover::before,
#header_menu .tags-accordion-submenu a:hover::before,
.footer-child-navigation li a:hover::before {
    left: 100%; 
}

/* PhotoSwipe Button Focus Style Adjustments */
.pswp__button:focus {
    outline: none !important; 
    /* Example custom focus style: a soft white glow. Adjust color/spread as needed. */
    box-shadow: none !important; 
}

/* Active Link Styling */
.navbar-nav .current-menu-item > a,
.navbar-nav .current-menu-ancestor > a,
.navbar-nav .current-page-item > a, /* Added for pages */
.navbar-nav .current-page-ancestor > a,
.navbar-nav .current-category-ancestor > a, /* For category archives if using default WP menu for cats */
#header_menu .nav-link.active, /* Bootstrap class if parent theme/JS adds it */
#header_menu .current-menu-item > a,
#header_menu .current-menu-ancestor > a,
#header_menu .current-page-item > a,
#header_menu .current-page-ancestor > a,
.footer-child-navigation .current-menu-item > a,
.footer-child-navigation .current-menu-ancestor > a,
.categories-accordion-submenu .active-filter-link, /* Custom class for JS-set active filter */
.tags-accordion-submenu .active-filter-link, /* Custom class for JS-set active filter */
/* Category sidebar active links */
#muzze_child_gallery_category_widget-3 .gallery-cat a.active, 
#muzze_child_gallery_category_widget-3 .gallery-tags a.active,
.sidebar-left .gallery-cat a.active,
.sidebar-left .gallery-tags a.active,
/* Highlight current category/tag based on URL match */
.gallery-cat a[aria-current="page"],
.gallery-tags a[aria-current="page"]
{
    color: #A62623 !important; 
}

/* Optional: If active links should NOT change color on hover from their active state */
.navbar-nav .current-menu-item > a:hover,
.navbar-nav .current-menu-ancestor > a:hover,
.navbar-nav .current-page-item > a:hover,
.navbar-nav .current-page-ancestor > a:hover,
#header_menu .nav-link.active:hover,
#header_menu .current-menu-item > a:hover,
#header_menu .current-menu-ancestor > a:hover,
.categories-accordion-submenu .active-filter-link:hover, 
.tags-accordion-submenu .active-filter-link:hover,
/* Category sidebar active links hover state */
#muzze_child_gallery_category_widget-3 .gallery-cat a.active:hover, 
#muzze_child_gallery_category_widget-3 .gallery-tags a.active:hover,
.sidebar-left .gallery-cat a.active:hover,
.sidebar-left .gallery-tags a.active:hover,
.gallery-cat a[aria-current="page"]:hover,
.gallery-tags a[aria-current="page"]:hover
{
    color: #A62623 !important; /* Keep active color */
    /* The glow effect will still apply from the general hover rules if the class is added by JS */
}

/* Your existing general button rule for mobile - review if this is still needed or if it should be more specific */
/* @media (max-width: 768px) { */
/*    button:focus, button:hover, button:active { */
/*        border: none !important; */
/*        outline: none !important; */ /* Consider adding this if the border rule alone wasn't enough */
        /* ADD ALTERNATIVE FOCUS STYLES FOR GENERAL BUTTONS HERE IF YOU REMOVE OUTLINE/BORDER */
/*    } */
/* } */

/* Ensure logo placeholder has consistent dimensions to prevent layout shifts */
#animated-logo-placeholder
#animated-logo-placeholder .logo-wrapper svg  {
    width: 142px;
    height: 80px;
    min-width: 142px; /* Prevent shrinking */
    min-height: 80px; /* Prevent shrinking */
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1199.98px) {
    #animated-logo-placeholder, 
    #animated-logo-placeholder .logo-wrapper svg  {
        width: 124px;
        height: 70;
        min-width: 124px;
        min-height: 70;
    }
}

@media (max-width: 767.98px) { 
    #animated-logo-placeholder, 
    #animated-logo-placeholder .logo-wrapper svg  {
        width: 106px;
        height: 60;
        min-width: 106px;
        min-height: 60;
    }

}

/* Gallery Details Page Styles */
.gallery-details-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Detail item container */
.gallery-detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}

/* Figure styles */
.gallery-detail-figure {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 2rem 0;
}

/* Image frame - similar to the listing but larger */
.detail-image-frame {
    background-color: #ffffff;
    border: 12px solid #e0e0e0;
    padding: 15px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.25);
    margin-bottom: 1.5rem;
    max-width: 90%;
    text-align: center;
    position: relative;
}

/* Double-frame implementation for detail page */
.detail-image-frame {
  background-color: #ffffff; /* White inner background */
  border: 12px solid #e0e0e0; /* Grey outer frame */
  padding: 15px; /* Increased padding for more space around image */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2), 0 2px 10px rgba(0,0,0,0.1); /* Inner shadow and outer shadow */
  margin-bottom: 1.5rem;
  max-width: 90%;
  text-align: center;
  position: relative; /* For pseudo elements */
}

/* Create the inner white frame effect */
.detail-image-frame::before {
    content: "";
    position: absolute;
    /* top: 5px; */
    /* left: 5px; */
    /* right: 5px; */
    /* bottom: 5px; */
    border: 4px solid rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.gallery-detail-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: 1px solid #d0d0d0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Caption styling */
.gallery-detail-caption {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem 0;
}

.gallery-detail-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #333333;
}

.gallery-detail-subtitle {
  font-size: 1.4rem;
  color: #555555;
  margin-bottom: 1rem;
  line-height: 1.4;
}

.gallery-detail-excerpt {
    font-size: 1rem;
    color: #666666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    letter-spacing: 0.06rem;
    padding-top: 0.6rem;
}

/* Meta information */
.gallery-detail-meta {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #eee;
}

.gallery-detail-terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.gallery-term-link {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background-color: #f0f0f0;
  border-radius: 3px;
  color: #555;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.gallery-term-link:hover {
  background-color: #e0e0e0;
  color: #333 !important;
}

/* Contact Form Styling */
.centered-contact-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}

.wpcf7 form {
    /* border: 1px solid green; */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wpcf7 input, .wpcf7 textarea {
    width: 70vw;
    max-width: 800px;
}

/* Adjust form element spacing */
.wpcf7 p {
    margin-bottom: 1.2rem;
    width: 100%;
    text-align: center;
}

/* Submit button styling */
.wpcf7 .wpcf7-submit {
    display: block;
    margin: 0 auto;
}

.wpcf7 input[type="submit"] {
    width: auto;
    min-width: 200px;
    background-color: #496DA6;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: auto;
    min-height: 42px;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #345187;
}

.wpcf7 label {
    text-align: left;
}


/* Navigation */
.gallery-navigation {
  margin-top: 2rem;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.back-to-gallery, 
.view-full-size {
  display: inline-block;
  padding: 0.7rem 1.5rem;
  background-color: #496DA6;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

.back-to-gallery:hover,
.view-full-size:hover {
  background-color: #345187;
  color: white !important;
}

/* Current breadcrumb item - for the details page */
.gallery-breadcrumb .current-item {
  color: #496DA6;
  font-weight: bold;
}


@media (max-width: 991.98px) { 
    .wpcf7 input, .wpcf7 textarea {
        width: 90vw;
        max-width: 100%;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .gallery-detail-title {
    font-size: 1.6rem;
  }
  
  .gallery-detail-subtitle {
    font-size: 1.2rem;
  }
  
  .gallery-detail-excerpt {
    font-size: 1rem;
  }
  
  .detail-image-frame {
    border-width: 8px;
    padding: 8px;
  }

  .site-branding-textual .site-title, .site-branding-textual .site-title a {
        font-size: 1.2rem !important;
        min-width: 160px;
        padding-bottom: 0rem;
    }

    .site-branding-textual .site-description {
        font-size: 0.6rem !important;
    }

    .ovatheme_breadcrumbs {
        margin-bottom: 10px;
    }

    .ovatheme_breadcrumbs ul.breadcrumb {
        padding: 12px 16px;
        height: 50px;
    }

    .wpcf7 input, .wpcf7 textarea {
        width: 90vw;
        max-width: 100%;
    }
    
}

@media (max-width: 496px) {
    .gallery-breadcrumb a, .gallery-breadcrumb span {  
        display: none;
    }

    .gallery-item .gallery-title {
        font-size: 0.9rem;
        font-weight: 500;
        color: #333333;
        margin-bottom: 0rem;
        line-height: 1.1;
    }
    .gallery-item .gallery-subtitle {
        font-size: 0.8rem;
        font-weight: 400;
        color: #666666;
        margin-bottom: 0rem;
        line-height: 1;
    }

    .gallery-grid {
        gap: 1rem;
    }

    .detail-image-frame {
        margin-bottom: 0.2rem;
    }

    .gallery-detail-image {
        max-width: 100%;
    }
    .gallery-navigation {
        margin-top: 0.2rem;
    }

    .wpcf7 input, .wpcf7 textarea {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
  .gallery-item { 
    flex: 1 1 calc(50% - 1.5rem); /* 2 per row */
    max-width: calc(50% - 1.5rem);
  }
}

@media (max-width: 496px) {
  .gallery-item { 
    flex: 1 1 100%; /* 1 per row */
    max-width: 100%;
  }
}