/* Hide the background image on all pages except the homepage */
body:not(.home) {
    background-image: none !important;
}
/* Make all page content and headings white, excluding the menu */
body .entry-content, 
body .entry-content h1, body .entry-content h2, body .entry-content h3, 
body .entry-content h4, body .entry-content h5, body .entry-content h6, 
body .entry-title, body .page-title,
body .entry-content p, body .entry-content a, 
body .entry-content span, body .entry-content li, 
body .entry-content blockquote, 
body .entry-content button, body .entry-content input, 
body .entry-content textarea {
    color: #ffffff !important;
}
/* Make all headings and titles white across all pages, posts, and blogs */
h1, h2, h3, h4, h5, h6,
.entry-title, .entry-title a,
.page-title, .post-title, 
.single .entry-title, 
.archive .entry-title, 
.category .entry-title, 
.blog .entry-title {
    color: #ffffff !important; /* White for all titles and headings */
}

/* Ensure all headings and titles stay white when hovered */
h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover,
.entry-title a:hover, 
.page-title:hover, .post-title:hover,
.single .entry-title:hover, 
.archive .entry-title a:hover, 
.category .entry-title a:hover, 
.blog .entry-title a:hover {
    color: #ffffff !important; /* White on hover */
}
/* Make the preview/excerpt text of posts white */
.entry-summary, .entry-summary p, .entry-content, .entry-content p {
    color: #ffffff !important; /* White text for post previews */
}

/* Make the "continue reading" link white */
.entry-summary a.more-link, .entry-summary a.more-link:hover,
.entry-content a.more-link, .entry-content a.more-link:hover {
    color: #ffffff !important; /* White text for the "continue reading" link */
}

/* Ensure all excerpt text stays white when hovered */
.entry-summary:hover, .entry-summary p:hover, .entry-content:hover, .entry-content p:hover {
    color: #ffffff !important; /* White on hover */
}
/* Keep the website title white at all times */
.site-title a {
    color: #ffffff !important; /* White for the site title */
}

/* Ensure the website title stays white when hovered */
.site-title a:hover {
    color: #ffffff !important; /* White on hover */
}

/* Ensure the website title stays white when focused or visited */
.site-title a:visited,
.site-title a:focus {
    color: #ffffff !important; /* White when visited or focused */
}
/* Set the top-level menu items to medium-light gray and bold */
.main-navigation ul > li > a {
    color: #b0b0b0 !important; /* Medium-light gray for top-level menu items */
    font-weight: bold !important; /* Bold for top-level menu items */
}

/* Ensure the top-level menu items stay medium-light gray and bold when hovered or active */
.main-navigation ul > li > a:hover,
.main-navigation ul > li.current-menu-item > a,
.main-navigation ul > li.current_page_item > a,
.main-navigation ul > li.current-menu-ancestor > a {
    color: #b0b0b0 !important; /* Medium-light gray for hover, active, and ancestor states */
    font-weight: bold !important; /* Bold for these states as well */
}

/* Set the mobile menu toggle (e.g., "Menu" text or icon) to medium-light gray */
.menu-toggle, .menu-toggle:before {
    color: #b0b0b0 !important; /* Medium-light gray for the mobile menu toggle */
    font-weight: bold !important; /* Bold for the mobile menu toggle */
}

/* Ensure the mobile menu toggle stays medium-light gray and bold when hovered */
.menu-toggle:hover, .menu-toggle:before:hover {
    color: #b0b0b0 !important; /* Medium-light gray on hover for the mobile menu */
    font-weight: bold !important; /* Bold on hover for the mobile menu */
}
/* Change the text color in all contact form input fields and textareas to black */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="textarea"],
textarea,
select {
    color: #000000 !important; /* Black text */
}

/* Ensure the text color remains black when the input fields are focused */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="textarea"]:focus,
textarea:focus,
select:focus {
    color: #000000 !important; /* Black text when focused */
}

/* Change the placeholder text color to ensure it's visible */
input::placeholder,
textarea::placeholder {
    color: #888888 !important; /* Light gray for placeholder text */
}
/* Ensure all input fields (text, email, etc.) and textareas have black text */
body form input[type="text"],
body form input[type="email"],
body form input[type="tel"],
body form input[type="url"],
body form input[type="number"],
body form input[type="search"],
body form input[type="password"],
body form textarea {
    color: #000000 !important; /* Force black text */
    background-color: #ffffff !important; /* Force white background for contrast */
    -webkit-text-fill-color: #000000 !important; /* Black text for WebKit browsers */
    text-shadow: none !important; /* Remove text shadow */
}

/* Ensure all input fields and textareas remain black when focused */
body form input[type="text"]:focus,
body form input[type="email"]:focus,
body form input[type="tel"]:focus,
body form input[type="url"]:focus,
body form input[type="number"]:focus,
body form input[type="search"]:focus,
body form input[type="password"]:focus,
body form textarea:focus {
    color: #000000 !important; /* Keep black text when focused */
    background-color: #ffffff !important; /* Keep white background when focused */
}

/* Keep text black when fields are not focused */
body form input[type="text"]:not(:focus),
body form input[type="email"]:not(:focus),
body form input[type="tel"]:not(:focus),
body form input[type="url"]:not(:focus),
body form input[type="number"]:not(:focus),
body form input[type="search"]:not(:focus),
body form input[type="password"]:not(:focus),
body form textarea:not(:focus) {
    color: #000000 !important; /* Black text when not focused */
    background-color: #ffffff !important; /* White background when not focused */
}

/* Adjust the placeholder text color */
body form input::placeholder,
body form textarea::placeholder {
    color: #888888 !important; /* Light gray placeholder text */
}
/* Make all images responsive and use their highest resolution */
img {
    width: 100%;
    height: auto;
    max-width: 100%;
    image-rendering: -webkit-optimize-contrast; /* For better quality rendering on WebKit browsers */
    image-rendering: optimizeQuality; /* For other browsers ensuring high-quality rendering */
    image-rendering: crisp-edges; /* For pixelated images (useful for vector graphics and icons) */
    object-fit: contain; /* Maintain the aspect ratio and fit the image within its container */
    -webkit-transform: translate3d(0, 0, 0); /* Boosts GPU acceleration for smoother rendering */
}

/* Optimize for Retina and high-DPI displays */
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-resolution: 192dpi) {
    img {
        transform: scale(1.0); /* Adjust scaling for high-DPI screens */
        image-rendering: auto; /* Let the browser optimize the rendering based on screen */
    }
}

/* Support for background images to ensure high resolution */
.background-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover; /* For Safari and older iOS versions */
    -moz-background-size: cover; /* For older Firefox versions */
}
/* Load Roboto font */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Apply Roboto to everything */
body, h1, h2, h3, h4, h5, h6,
.site-title, .site-title a,
.entry-title, .widget-title,
.main-navigation a, .menu a,
.header-menu a, .site-header,
button, input, textarea, select {
    font-family: 'Roboto', sans-serif !important;
}