/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* =================================================================
   Fleming County Sheriff Rotating Headers - With Breadcrumbs Navigation
   Custom development by Smith IT Consulting & Technical Support (STS)
   Created for Fleming County Sheriff's Office
   @author Lisa Smith - STS
   @version 2.3.0 (Added breadcrumb navigation with page slugs)
   ================================================================= */

/* Main header container with relative positioning for overlay */
.fcso-header-image-container {
    width: 100%;
    height: auto;
    min-height: 500px;
    max-height: 550px;
    overflow: hidden;
    position: relative;  /* Allows absolute positioning of overlay and text */
    display: flex;           
    align-items: center;     
    justify-content: center;
    background-color: #172554; /* Navy blue background fills any gaps */
    border: 4px solid #172554; /* Navy border all around */
}

/* the header image itself */
.fcso-header-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* shows entire image */
    object-position: center; /* centers the crop */
	display: block;
}

/* Overlay */
.fcso-header-overlay {
    display: none; /* Turn off the full overlay */
/*  Turned off the overlay
 * 
 * position: absolute;
 * top: 0;
 * left: 0;
 * width: 100%;
 * height: 100%;
 * background-color: rgba(23, 37, 84, 0.8);  /* navy blue with 70% opacity  */
/*	z-index: 1; /* Above image, below text */ 

}

/* FCSO Header04 - Taller Container for Face Protection */
.fcso-header-image-container:has(img[src*="header04"]) {
    height: 350px !important; /* Taller than the standard 300px */
}

.fcso-header-image-container img[src*="header04"] {
    object-fit: cover !important;
    object-position: top center !important;
}
/* FCSO Header06 - Taller Container for Face Protection */
.fcso-header-image-container:has(img[src*="header06"]) {
    height: 350px !important; /* Taller than the standard 300px */
}

.fcso-header-image-container img[src*="header06"] {
    object-fit: cover !important;
    object-position: top center !important;
}


/* Container for the page title text and breadcrumbs */
.fcso-header-content {
    position: static;
    /* top: 0;
    left: 0;
    width: 100%;
    height: 100%; */
    display: flex;
    align-items: flex-start; /* Align to top */
    justify-content: flex-start; /* Align to left */
    padding: 2rem; /* Space from edges */
    z-index: 2; /* Above overlay */
    box-sizing: border-box;
}

/* Wrapper for title and breadcrumbs */
.fcso-header-text {
	background: #172554;
    /* background: rgba(23, 37, 84, 0.85); /* Same navy blue, slightly more opaque */
    padding: 1rem 1.5rem; /* Comfortable padding around text block */
    border-radius: 8px; /* Rounded corners */
    display: inline-block; /* Shrinks to content size */
    max-width: 90%; /* Prevent overly wide backgrounds */
}

/* The page title styling */
.fcso-header-title {
    color: #ffffff; /* White text */
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    /* font-size: 2.5rem; /* Large, prominent text */
    font-size: 2.5rem; /* Large, prominent text */
    font-weight: 600; /* Semi-bold */
    line-height: 1.2;
/*    margin: 0; /* Remove default margin */
	margin: 0 0 0.5rem 0; /* Small margin below title for breadcrumbs */
	padding: 0; /* Remove default padding */
    /* max-width: 90%; /* Prevent text from going full width */
    overflow-wrap: anywhere; /* Handle long titles gracefully */
	word-break: normal;
}
/* Breadcrumb navigation container */
.fcso-breadcrumbs {
    margin: 0;
    padding: 0;
    font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 1rem; /* Smaller than title */
    line-height: 1.4;
	color: #fff;
}
/* Breadcrumb links */
.fcso-breadcrumb-link {
    color: rgba(135, 169, 255, 1); /* Light police blue with slight transparency */
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
/* Breadcrumb link hover effect */
.fcso-breadcrumb-link:hover {
    color: rgba(155, 189, 255, 1); /* Lighter on hover */
    text-decoration: underline;
}
/* Current page in breadcrumbs (no link) */
.fcso-breadcrumb-current {
    color: rgba(200, 215, 255, 1); /* Very light blue, slightly transparent */
    font-weight: 400;
}


/* =================================================================
   RESPONSIVE DESIGN - Mobile Optimization
   ================================================================= */

/* Tablet view adjustments */
@media (max-width: 768px) {
    .fcso-header-image-container {
        min-height: 400px; /* Shorter on tablets */
        max-height: 450px;
    }	
	.fcso-header-content {
        padding: 1.5rem; /* Less padding on smaller screens */
    }

    .fcso-header-text {
        max-width: 80%; /* Allow more width on smaller screens */
    }
    
    .fcso-header-title {
        font-size: 2rem; /* Smaller text on tablets */
        margin-bottom: 0.4rem;
    }
	.fcso-breadcrumbs {
        font-size: 0.8rem; /* Smaller breadcrumbs on tablet */
    }	
}

/* Mobile view adjustments */
@media (max-width: 480px) {
    .fcso-header-image-container {
        min-height: 300px;  /* Even shorter on mobile */
        max-height: 350px;
    }
    .fcso-header-content {
        padding: 1rem; /* Minimal padding on mobile */
    }
    .fcso-header-text {
        max-width: 90%; /* Most of the width on mobile */
    }   
    .fcso-header-title {
        font-size: 1.75rem; /* Smaller text on mobile */
        line-height: 1.3; /* Slightly more line height for readability */
		margin-bottom: 0.3rem;
    }
	.fcso-breadcrumbs {
        font-size: 0.75rem; /* Even smaller breadcrumbs on mobile */
    }
}

/* Very small mobile devices */
@media (max-width: 360px) {
    .fcso-header-image-container {
        min-height: 250px; /* Compact on very small screens */
        max-height: 300px;
    }
    .fcso-header-title {
        font-size: 1.5rem; /* Even smaller text */
        font-weight: 500; /* Slightly lighter weight */
		margin-bottom: 0.25rem;
    }
	.fcso-breadcrumbs {
        font-size: 0.7rem; /* Tiny but readable breadcrumbs */
    }
}

/* =================================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================================= */

/* Focus styles for keyboard navigation - applies to all viewing modes */
.fcso-breadcrumb-link:focus {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
    border-radius: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .fcso-header-overlay {
        background-color: rgba(0, 0, 0, 0.8); /* Darker overlay for high contrast */
    }    
    .fcso-header-title {
        color: #ffffff;
	}
    .fcso-breadcrumb-link {
        color: rgba(180, 200, 255, 1); /* Higher contrast breadcrumbs */
    }
    .fcso-breadcrumb-current {
        color: #ffffff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .fcso-header-overlay,
    .fcso-header-content,
	.fcso-breadcrumb-link {
        will-change: auto;
        transform: none;
		 transition: none;
    }
}

/* =================================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================================= */

/* GPU acceleration for smooth overlay transitions */
.fcso-header-overlay,
.fcso-header-content {
    will-change: transform;
    transform: translateZ(0); /* Force GPU layer */
}

/* Optimize image rendering */
.fcso-header-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
}

/* Smooth breadcrumb transitions */
.fcso-breadcrumb-link {
    will-change: color;
}


/* Fleming County Sheriff Dark Footer */
.fcso-footer-contact {
    background-color: #172554; /* Your Fleming County dark navy */
    color: white;               /* White text */
    padding: 20px;              /* Add some breathing room */
}

/* Light blue icons - professional but visible */
.fcso-footer-contact .fas {
    color: #60a5fa;            /* Light blue icons */
    font-size: 16px;
    margin-right: 8px;
    width: 18px;
}

/* Emergency phone - white icon on red background box (visual only) */
.fcso-footer-contact .emergency-box {
    background-color: #dc2626;    /* Red background */
    color: white;                 /* White icon */
    padding: 10px;
    border-radius: 6px;
    display: inline-block;
    margin-right: 10px;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: default;              /* Shows it's NOT clickable */
}

.fcso-footer-contact .emergency-box .fas {
    color: white !important;
    margin-right: 0;
}

.fcso-footer-links {
    padding: 20px;  /* Same as your contact widget */
}

.fcso-footer-links .footer-link-item {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.fcso-footer-links .fas {
    color: #60a5fa;     /* Keep icons light blue */
    margin-right: 8px;
    width: 18px;
}

.fcso-footer-links a {
    color: white;       /* White links (your new style!) */
    text-decoration: none;
}

.fcso-footer-links a:hover {
    color: #60a5fa;     /* Light blue on hover */
    text-decoration: underline;
}


/* Fix blog post title links - override link colors */
h1.wp-block-heading a,
h2.wp-block-heading a,
h3.wp-block-heading a,
h4.wp-block-heading a,.
h5.wp-block-heading a,
h6.wp-block-heading a,
.entry-title,
.entry-header, 
a {
    color: #fff !important;
    text-decoration: none !important;
}