/*! blukid SPECIFIC > BRS Styles - Updated for BS5 Compatibility */

/* Base Layout */
html {
    scroll-behavior: smooth !important;
}

body {
	margin-top: 160px;
	background-image: url(../_assets/map_bkg_4096x2160b.png);
	background-attachment: fixed;
}

/* --- Logo Control --- */
.navbar-brand img {
    width: 248px;  /* Default desktop width */
    height: auto;  /* Keeps it from squishing */
}

/* Global Link Styles - #666 and No Underline */
a {
    color: #666 !important;
    text-decoration: none !important;
}

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

/* Link Hover */
.link {
	color: #FFF;
	text-decoration: none;
	-o-transition: color 0.5s linear;
	-moz-transition: color 0.5s linear;
	-khtml-transition: color 0.5s linear;
	-webkit-transition: color 0.5s linear;
	-ms-transition: color 0.5s linear;
	transition: color 0.5s linear;
}

.link:hover {
	color: #666;
	opacity: 0.4;
}

.container {
    width: 100%;
    padding-right: 30px;
    padding-left: 30px;
    margin-right: auto;
    margin-left: 0px !important; /* Forces left-justification */
}

hr.split {
    border: 0;
    height: 1px;
    color: #FFF;
    margin-bottom: 15px;
    margin-top: 15px;
    background-color: #CCC;
}

hr.splittop {
    border: 0;
    height: 1px;
    color: #FFF;
    margin-bottom: 15px;
    margin-top: 72px;
    background-color: #CCC;
}

/* Layout for Spry messages to appear next to fields */
#name, #email {
display: flex !important;
align-items: center;
flex-wrap: nowrap;
margin-bottom: 1rem;
}
/* Consistent corner radius for all fields to match buttons */
.form-control, .form-control-sm {
border-radius: 0.375rem !important;
background-color: #ffffff; /* Default background */
border: 1px solid #dee2e6;
transition: background-color 0.2s ease-in-out;
}
.form-control-sm {
max-width: 350px;
}
/* Subtle red background ONLY on error/invalid states */
.textfieldRequiredState input, 
.textfieldInvalidFormatState input {
background-color: #fff8f8 !important; 
border-color: #BD1B25 !important;
}
.textfieldRequiredMsg, .textfieldInvalidFormatMsg {
display: none;
margin-left: 12px;
color: #BD1B25;
font-size: 0.85rem;
font-weight: bold;
white-space: nowrap;
}
/* Trigger visibility based on Spry state classes */
.textfieldRequiredState .textfieldRequiredMsg,
.textfieldInvalidFormatState .textfieldInvalidFormatMsg {
display: inline-block !important;
}

/* Base styles for all inputs */
input {
    background-color: #ffffff;
    border: 1px solid #d1d1d1;
    padding: 10px;
    border-radius: 4px;
    
    /* This creates the smooth fade effect (0.3 seconds) */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Subtle gray background when:
   1. The input is valid
   2. AND the user has actually typed something (:not(:placeholder-shown))
*/
input:valid:not(:placeholder-shown) {
    background-color: #f9f9f9; /* Your much lighter gray */
    border-color: #cccccc;     /* Slightly darker border to define the shape */
}

/* Styles for the submitted state (applied via JavaScript) */
input.is-submitted {
    background-color: #f2f2f2;
    border-color: #bbbbbb;
}

/* Maintains a clean look when the user is actively typing */
input:focus {
    background-color: #ffffff;
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

#map {
    height: 400px;
    color: #999;
}

/* --- NEWS LINK FIXES --- */
.news {
    width: 100%;
    padding: 20px;
    margin-bottom: 3px;
    background-color: #bd1b25;
    color: #fff !important;
    font-weight: 600;
    text-transform: uppercase;
}

.news a.news-link {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.card.no-border {
    border: none !important;
}

/* Nav & Header */
nav {
    font-size: 12px;
    text-transform: uppercase;
}

.navbar-collapse {
    flex-grow: 1;
    flex-basis: 100%;
    align-items: center;
    margin-top: 0px;
}

/* Image Icon + */
a {    
    display: inline-block;
    position: relative;
    text-decoration: none;
}

a[href$=jpg]:before, a[href$=webp]:before, a[href$="png"]:before {
    position: absolute;
    background-image: url('../_assets/imgzoom.png');
    background-size: cover;
    content: '';
    bottom: 5px;
    right: 5px;
    width: 11px;
    height: 11px;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
a[href$="jpg"]:hover:before, a[href$="webp"]:hover:before, a[href$="png"]:hover:before {
    opacity: 0;
}

/* SOLD Icon */
.sold-icon {
  position: absolute;
  top: 10px; /* Adjust as needed for vertical position */
  right: 10px; /* Adjust as needed for horizontal position */
  width: 15px; /* Size of the circle */
  height: 15px; /* Size of the circle */
  background-color: red; /* The color of the circle */
  border-radius: 50%; /* This makes the square into a circle */
  z-index: 10; /* Ensure the icon appears above the image */
}

/* Icon Color */
.redicon {
    color: #BD1B25;
}

/* Dropdown Menu - Added Radius & Hover Logic */
.dropdown-menu {
    border-radius: .25rem !important;
    opacity: 0.95 !important;
    background-color: #f8f9fa !important;
}

.dropdown:hover > .dropdown-menu { 
    display: block; 
}

/* Fixed Navigation Fix: Opacity Restored */
.fixed-top {
    position: fixed;
    padding-top: 20px; 
    right: 0;
    left: 0;
    z-index: 1030;
    padding-bottom: 30px;
    opacity: 0.95 !important;
    border-bottom: 1px solid rgba(0,0,0,.125);
    background-color: #f8f9fa !important;
}

.nav-link.nav-home { color: #BD1B25 !important; }

/* Moved Navigation Text Down Slightly */
.nav-link {
    display: block;
    padding: .1rem 1rem;
    padding-top: 35px !important; 
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem .5rem;
    clear: both;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    font-size: 12px;
    text-transform: uppercase;
}

.dropdown .nav-link { color:#fff; text-decoration: none; }
.dropdown .dropdown-menu a { color: #999; text-decoration: none; }

/* Navigation Hover states */
.navbar-light .navbar-nav .nav-link:focus, 
.navbar-light .navbar-nav .nav-link:hover {
    color: #BD1B25 !important;
}

.container .dropdown .dropdown-menu a:hover {
    color: #BD1B25;
    background-color: #fff;
}

/* Biz Info - Top Bar */
#bizinfo {
    position: fixed;
    top: 5px;
    right: 30px;
    width: 285px;
    z-index: 9999;
    visibility: visible;
    font-size: 10px;
    color: #BD1B25;
    text-align: right;
    line-height: 17px;
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

#bizinfo a { color: #999; text-decoration: none; }
#bizinfo a:hover { color: #BD1B25; text-decoration: none; }

/* BUTTON RED OVERRIDE */
.btn {
    border-radius: .2rem !important;
}
.btn-primary {
    background-color: #BD1B25 !important;
    border-color: #BD1B25 !important;
    color: #ffffff !important;
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active {
    background-color: #333333 !important;
    border-color: #333333 !important;
}

/* HR & Dividers */
.hrfade { 
    margin: 25px 0;
    height: 1px;
    background: #cccccc;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(#cccccc), to(#ffffff), color-stop(50%, #cccccc));
    background: linear-gradient(to right, #cccccc 0%, #ffffff 100%);
}

/* Back to Top Styling */
.back-to-top {
    background: none;
    margin: 0;
    position: fixed;
    bottom: 20px;
    right: 10px;
    width: 50px;
    height: 50px;
    z-index: 100;
    text-decoration: none;
    color: #cccccc;
    text-align: center;
    padding-top: 8px;
}

.back-to-top i { font-size: 40px; }

/* Carousel BS5 Sync */
.carousel-item {
    height: 42vh;
    min-height: 360px;
    max-height: 360px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.carousel-indicators [data-bs-target] {
    background-color: #ffffff;
}

/* Typography sizes */
.h4, h4 { font-size: 1.3rem !important; color: #666666 !important; }
.h2, h2 { font-size: 1.5rem !important; color: #BD1B25 !important; font-family: Arial, Helvetica, sans-serif; }
.mt-4, .my-4 { margin-top: 3.0rem !important; color: #999; }

/* --- Sitemap Alignment Fix (2026) --- */
@media (min-width: 992px) {
    /* Only applies to 'lg' screens and up */
    .sitemap-col-offset {
        margin-top: 40px; /* Aligns the list items with the 2nd column list */
    }
}
}

/* --- TABLET & MOBILE SPECIFIC OVERRIDES --- */
@media (max-width: 991.98px) {
    /* Allow the nav content to wrap under the Logo/Toggler */
    .navbar > .container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    .navbar-brand {
        margin-top: 20px !important;
    }

    .navbar-toggler {
        margin-left: auto !important;
        margin-top: 35px !important; 
    }

    /* Forces the menu links to drop to a new line below the Logo */
    .navbar-collapse {
        flex-basis: 100%;
        order: 3;
    }

    .nav-link {
        padding-top: 10px !important; 
        padding-bottom: 10px !important;
    }

    #bizinfo {
        line-height: 15px;
        color: #BD1B25 !important;
    }
	
	/* Ensures no extra gap when columns stack on mobile/tablet (sitemap) */
    .sitemap-col-offset {
        margin-top: 0;
    }
}

/* General Typography Overrides */
@media only screen and (max-width: 600px) {
    h1, .h1 { font-size: 1.7rem !important; }
}

/* Shrink logo only on mobile screens */
@media (max-width: 575.98px) {
    .navbar-brand img {
        width: 180px; 
    }
}