/*
 Theme Name:   Bannerman - Understrap Child
 Theme URI:    https://understrap.com
 Description:  Understrap Child Theme
 Author:       Jelly Bean
 Template:     understrap
 Version:      1.2.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/


/*

brown a67b50

*/

* {
  font-family: "Aleo", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #0a230a;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}


#icon-facebook-svg, #icon-instagram-svg { width: 32px; fill: #fff; margin: 0 0 0 10px; }
#icon-facebook-svg:hover, #icon-instagram-svg:hover { fill: #2e4e6c; }
#block-7 { display: flex; justify-content: end;  }


#main-menu { text-transform: uppercase; }
#main-menu a { color: #fff; }
#main-menu a:hover { color: #2e4e6c; }


em { font-style: italic; }

.alignwide {
        margin-left  : -80px;
        margin-right : -80px;
    }
.alignfull {
        margin-left  : calc( -100vw / 2 + 100% / 2 );
        margin-right : calc( -100vw / 2 + 100% / 2 );
        max-width    : 100vw;
    }
@media (max-width: 768px) {
.alignfull { padding: 0 2rem; }
}

.bg-primary { background: #a67b50!important; }

#nav-logo { width: 60px; }

#video {  z-index: -100;
    width: 100%;
    overflow: hidden;
    position: absolute;
    height: 60vh;
    left: 0; background: #2e4e6c; }
#hero { height: 60vh; overflow: hidden; text-align: center; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 50%);  }
#hero h1 { color: #fff; text-align: center; display: inline; clear: both; z-index: 100; border-top: 2px solid #2ea8df; border-bottom: 2px solid #2ea8df; padding: 10px 0; text-shadow: 0 0 5px #000;}

#dc { width: 30%; display: block; margin: 2rem auto 3rem; }
#blue-rule { height: 5px; background: #2ea8df; margin-top: 4px; }

@media (min-width: 1400px) {
#hero, #video { height: 75vh; }
}
@media (max-width: 768px) {
#hero, #video { height: 280px; }
#hero h1 { font-size: 1rem; }
#dc { width: 60%; }
}

.intro { background-color: #2e4e6c; padding: 2rem 10% 1rem; margin-top: 0; 
        margin-left  : calc( -100vw / 2 + 100% / 2 );
        margin-right : calc( -100vw / 2 + 100% / 2 );
        max-width    : 100vw; }
.intro h2 { height: 350px; border-radius: 5px 5px 0 0; color: #fff; font-size: 4rem; padding: 200px 2rem 0 }
.intro .wp-block-column { background: #e5f4fb; border-radius: 10px; padding: 10px; box-shadow: 0 1px 1px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.3) }
.intro .wp-block-button { background: transparent; padding: 0px; width: 100%; margin: 1rem 20px; }
.intro .wp-block-button a { background: #2ea8df; padding: 10px; border-radius: 5px;  text-transform: uppercase; font-family: "Lato", sans-serif; }
.intro .wp-block-button:hover a { background: #fff; color: #2ea8df; }
.intro p { padding: 0 20px; }

.intro h2.dine { background: url('/wp-content/uploads/2025/11/home-photo-dine.jpg') 50% 50% no-repeat; background-size: cover; }
.intro h2.shop { background: url('/wp-content/uploads/2025/11/home-photo-shop.jpg') 50% 50% no-repeat; background-size: cover; }
.intro h2.live { background: url('/wp-content/uploads/2025/11/home-photo-live.jpg') 50% 50% no-repeat; background-size: cover; }

@media (max-width: 768px) {
.intro h2 { height: auto; font-size: 3rem; padding: 150px 2rem 0 }
}




.home-brunch { border-radius: 0 10px 10px 0; }
.welcome { background: #f1f9fd; padding: 6rem 0; }
.welcome p { font-size: 120%; line-height: 150%; }
.welcome h2 { font-weight: 400; }




@media (max-width: 768px) {
.welcome { padding: 2rem; }
.home-brunch { border-radius: 10px; }
}

h2.morethan em { color: #2ea8df; }
h2.morethan { font-size: 3rem; padding: 3rem 0; text-align: right;  }
@media (max-width: 768px) {
h2.morethan { text-align: center;  }
}


div.event-slider { background: #f6f0ed; border-radius: 10px; overflow: hidden;  }
.event-slider p { padding: 1rem 1rem 1rem 2rem; font-size: 1.3rem; line-height: 2rem; font-style: italic; }
.event-seasons .wp-block-column { background: #ecd6bd url(/wp-content/themes/bannerman/img/tiny-corner.svg) 98% 94% no-repeat; background-size: 20px; border-radius: 5px; padding: 1rem; }
.event-seasons h4, .event-seasons p { color: #a67b50; }
.event-seasons h4 { font-weight: 700; }
.calendar a.wp-block-button__link { font-family: "Lato", sans-serif; background: transparent; color: #4c061d; border: 1px solid #4c061d!important; border-radius: 5px; text-transform: uppercase; font-weight: 700; font-size: 1rem; padding: 10px 50px; }
.calendar a.wp-block-button__link:hover { background: #4c061d; color: #fff; }

@media (max-width: 768px) {
.event-seasons .wp-block-column { width: 45%; flex-basis: 45%!important; }
.event-seasons:not(.is-not-stacked-on-mobile)>.wp-block-column { flex-basis: 45%!important; }
}


.home-work { border-radius: 10px; }
.home-work h2 { height: 350px; border-radius: 5px 5px 0 0; color: #fff; font-size: 4rem; padding: 200px 2rem 0; text-shadow: 0 0 5px #000; }
.workhere { background: #f1f9fd; padding: 3rem 0 5rem; margin-top: 3rem; }
.workhere a.wp-block-button__link { font-family: "Lato", sans-serif; background: transparent; color: #2e4e6c; border: 1px solid #2e4e6c!important; border-radius: 5px; text-transform: uppercase; font-weight: 700; font-size: 1rem; padding: 10px 50px; }
.workhere a.wp-block-button__link:hover { background: #2e4e6c; color: #fff; }

#wrapper-footer { border-top: 30px solid #a67b50; background: #2e4e6c; color: #fff; padding: 0; margin: 0; }
#wrapper-footer-full { border-top: 5px solid #2ea8df; background: #2e4e6c; padding: 3rem 0 1rem; }
#wrapper-footer-full p { color: #fff; }
#wrapper-footer-full a.wp-block-button__link { background: transparent; border: 1px solid #fff; border-radius: 5px; text-transform: uppercase; font-weight: 700; font-size: 1rem; padding: 10px 30px; }
#wrapper-footer-full a.wp-block-button__link:hover { background: #fff; color: #2e4e6c; }

.wrapper { padding-bottom: 0; }

#pagebanner { padding: 14rem 0 14rem; background-size: cover; background-position: 50% 50%; }
#pagebanner h1 { color: #fff; font-size: 4rem; text-shadow: 0 0 5px #000; }
#pagebanner p { color: #fff; font-weight: 700; text-shadow: 0 0 5px #000; font-style: italic; font-size: 1.3rem; padding-right: 50%; }

@media (max-width: 768px) {
#pagebanner { padding: 4rem 0 4rem; background-size: cover; }
#pagebanner h1 { font-size: 2rem; }
#pagebanner p { padding-right: 20%; }
}


.eventcolumn .wp-block-column { border: 1px solid #ccc; border-radius: 10px; padding: 10px; }
.eventcolumn img { border-radius: 5px 5px 0 0; margin-bottom: 0; }
.eventcolumn figure { margin: 0; }

.eventcolumn a.wp-block-button__link { font-family: "Lato", sans-serif; background: #2e4e6c; color: #fff; border: 1px solid #2e4e6c!important; border-radius: 5px; text-transform: uppercase; font-weight: 700; font-size: 1rem; padding: 10px 50px; }
.eventcolumn a.wp-block-button__link:hover { background: #fff; color: #2e4e6c; }
.eventcolumn .rev a.wp-block-button__link { font-family: "Lato", sans-serif; background: #a67b50; color: #fff; border: 1px solid #a67b50!important; border-radius: 5px; text-transform: uppercase; font-weight: 700; font-size: 1rem; padding: 10px 50px; }
.eventcolumn .rev a.wp-block-button__link:hover { background: #fff; color: #a67b50; }



.pagebuttons a.wp-block-button__link { font-family: "Lato", sans-serif; background: #2e4e6c; color: #fff; border: 1px solid #2e4e6c!important; border-radius: 5px; text-transform: uppercase; font-weight: 700; font-size: 1rem; padding: 10px 50px; }
.pagebuttons a.wp-block-button__link:hover { background: #fff; color: #2e4e6c; }
.pagebuttons .rev a.wp-block-button__link { font-family: "Lato", sans-serif; background: #a67b50; color: #fff; border: 1px solid #a67b50!important; border-radius: 5px; text-transform: uppercase; font-weight: 700; font-size: 1rem; padding: 10px 50px; }
.pagebuttons .rev a.wp-block-button__link:hover { background: #fff; color: #a67b50; }

input, textarea, select { padding: 5px; }

.cta { padding: 15px 10px 10px; margin: 2rem 0; background-color: #e5f4fb; border-radius: 10px;  }


h2.shoutout  { color: #2ea8df; font-size: 3rem; padding: 3rem 0; text-align: center;  }

.footrow { margin-top: 5rem!important; color: #fff; }
.footrow strong { color: #fff; font-size: 120%; }
.footrow .wp-block-button { margin: 0 20px; }
.footrow a.wp-block-button__link { background: transparent; border: 1px solid #fff!important; border-radius: 5px; text-transform: uppercase; font-weight: 700; font-size: 1rem; padding: 10px 30px; }
.footrow a.wp-block-button__link:hover { background: #fff; color: #2e4e6c; }

@media (max-width: 768px) {
.footrow .wp-block-button { margin: 0 0px; }
}




/* Listing Filter Form */
.search-form {
    background: #f5f5f5;
    padding: 2rem;
    margin-bottom: 3rem;
}

.search-form form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: end;
}

.search-form .form-group {
    display: flex;
    flex-direction: column;
}

.search-form label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.search-form select,
.search-form input[type="submit"] {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.search-form input[type="submit"] {
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.search-form input[type="submit"]:hover {
    background: #333;
}

/* Results Header */
.results-header {
    margin-bottom: 2rem;
}

.results-count {
    font-size: 1.5rem;
    font-weight: 600;
}

/* Listings Grid */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}



/* Listings Header */
.listings-header {
    text-align: center;
    margin-bottom: 2rem;
}

.listings-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
}

/* External Link Badge */
.external-link-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Placeholder Image */
.listing-image-placeholder .placeholder-content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #e0e0e0;
    color: #999;
    font-size: 1.2rem;
}

/* View Details Button with External Icon */
.btn-view-details svg {
    transition: transform 0.2s;
}

.btn-view-details:hover svg {
    transform: translate(2px, -2px);
}

/* Type-specific styling (optional) */
.residential-listings {
    /* Add residential-specific styles if needed */
}

.commercial-listings {
    /* Add commercial-specific styles if needed */
}

.commercial-listings .listing-card {
    /* Example: different border color for commercial */
    border-color: #0066cc;
}

/* Loading Overlay */
.listings-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.listings-results {
    position: relative;
    min-height: 400px;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #000;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Reset Button */
.btn-secondary {
    background: #666;
    color: #fff;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.btn-secondary:hover {
    background: #444;
}

/* Smooth transitions */
.listings-grid {
    transition: opacity 0.3s ease;
}



/* Listing Card */
.listing-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.listing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.listing-image {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #f0f0f0;
}

.listing-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.listing-card:hover .listing-image img {
    transform: scale(1.05);
}

.listing-content {
    padding: 1.5rem;
}

.listing-name {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}

.listing-name a {
    color: #000;
    text-decoration: none;
}

.listing-name a:hover {
    color: #666;
}

.listing-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0466AB;
    margin: 0.5rem 0 1rem 0;
}

.listing-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #666;
}

.listing-meta strong {
    color: #000;
}

.btn-view-details {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s;
}

.btn-view-details:hover {
    background: #333;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 3rem;
    background: #f5f5f5;
    border-radius: 8px;
}

.no-results h3 {
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .search-form form {
        grid-template-columns: 1fr;
    }
    
    .listings-grid {
        grid-template-columns: 1fr;
    }
}


.listtitle {
  display: flex; /* 1. Sets the container to use Flexbox */
  align-items: center; /* 2. Vertically centers the text and lines */
  text-align: center; /* 3. Ensures the text itself is centered within its available space */
  justify-content: center; /* 4. Horizontally centers the content within the page */
  gap: 1em; /* 5. Adds space between the text and the lines */
  margin: 30px 0 20px 0;
}

.listtitle::before,
.listtitle::after {
  content: ''; /* 6. Required for pseudo-elements to display */
  flex-grow: 1; /* 7. Allows the lines to grow and fill available space */
  border-top: 1px solid #ccc; /* 8. Styles the actual horizontal line */
}

/* Optional: Add padding to the heading to prevent the lines from touching the text if 'gap' isn't supported in older browsers */
.listtitle {
  padding: 0 1em; 
}