body {
	font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
	background: #ffffff;
    --wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.852), 20px);
	--wp--preset--font-size--large: clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.983), 36px);
	--wp--preset--font-size--x-large: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 2.413), 42px);
    --wp--preset--font-size--sm: 1rem;
	--wp--preset--font-size--md: 1.25rem;
	--wp--preset--font-size--lg: 1.5rem;
    font-size: 18px;
}

p {
  line-height: 1.8;
}
.logo {
    font-size: 2em;
}

/* This centers your main container by default */
.main-content {
    /* margin: 40px auto; */
    padding: 0 20px;
    box-sizing: border-box;
}

/* This applies when "Centered (800px)" is active and published */
.layout-centered .main-content {
    max-width: 800px;
}

.layout-medium .main-content {
    max-width: 1200px;
}

/* This applies when "Full Width (100%)" is active and published */
.layout-full-width .main-content {
    max-width: 100%;
}

/* Banner Container Styles */
.full-width-banner {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevents accidental side-scrolling */
    line-height: 0;   /* Removes unwanted white gaps below the image */
}

/* Forces the image inside to stretch fully and scale proportionally */
.full-width-banner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover; /* Keeps the image looking crisp without warping distortion */
}

/* Container rules */
.entry-content ul {
    list-style-type: none;
    padding-left: 20px;
    position: relative;
}

.entry-content ul ul {
    padding-left: 25px;
}

.entry-content li.tree-item {
    position: relative;
    padding-left: 5px;
    margin-bottom: 5px;
}

/* Arrow for the first child */
.entry-content li.tree-arrow-child::before {
    content: "↳";
    position: absolute;
    left: -25px;
    top: -3px;
    color: #0073aa;
    font-size: 20px;
    
    /* Adds a matching color border around the character to thicken it */
    -webkit-text-stroke: 1px #0073aa; 
}

/* Continuous vertical line for items between the arrow and the last item */
.entry-content li.tree-line-child::before {
    content: "";
    position: absolute;
    left: -5px;
    top: -14px;
    bottom: -6px; /* Keeps the line moving down */
    border-left: 2px solid #ccc;
}

/* The Magic Fix: Stop the line flat at the middle of the very last file */
.entry-content li.tree-line-child:last-child::before {
    bottom: auto;
    height: 26px; /* Forces the line to stop exactly at the last item's horizontal notch */
}

/* Horizontal notches for files */
.entry-content li.tree-line-child::after {
    content: "";
    position: absolute;
    left: -5px;
    top: 12px;
    width: 8px;
    border-top: 2px solid #ccc;
}

header {
    position:relative;
    z-index: 2;
    padding:10px;
    background-color: white;
}
/* Target the SVG wrapper */
.logo-wrapper svg {
    width: 150px;   /* Define sizing */
    height: auto;
}

/* Change the color of solid filled shapes */
.logo-wrapper svg path,
.logo-wrapper svg circle,
.logo-wrapper svg rect {
    fill: #2b5e75 !important; /* Replace with your desired color hexadecimal hex */
}

/* If your logo uses lines or borders instead of solid shapes */
.logo-wrapper svg path {
    stroke: #2b5e75 !important; 
}

/* Example: Change the color instantly on hover */
.logo-wrapper svg:hover path {
    fill: #2b5e75 !important;
}

.site-header {
    background: #ffffff;
}

/* 1. Remove max-width so the logo can touch the left wall naturally */
.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    padding: 20px 40px; /* Generous 40px padding keeps elements from touching screen edges */
}

/* Keeps the logo and title inline together */
.brand-group {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* 2. Control the right-side spacing of the menu links */
.main-navigation {
    /* If you want links away from the right edge, pull them in with margin */
    margin-right: 10%; /* Moves the links inward from the far right edge */
    
    /* OR you can bound the navigation menu block itself */
    /* max-width: 500px; */
}

.nav-menu-list {
    list-style: none !important; /* Forces the browser to strip the bullet points */
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
}

/* 2. Target the individual list items to ensure no hidden bullets show up */
.nav-menu-list li {
    list-style: none !important;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* 1. Style the main navigation links */
.nav-menu-list a {
    text-decoration: none;
    color: #1a1a1a;          /* Rich, professional charcoal black */
    font-weight: 700;        /* Bold and crisp */
    text-transform: uppercase; /* Forces all caps formatting */
    font-size: 14px;         /* Standard professional link scaling */
    letter-spacing: 1.5px;   /* Slight letter tracking for cleaner readability */
    position: relative;      /* Crucial: Acts as the anchor boundary for the slide underline */
    padding: 8px 0;          /* Creates safe vertical spacing around the link text */
    display: inline-block;
}

/* 2. Create the hidden thick underline */
.nav-menu-list a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;             /* The thickness of your underline indicator */
    background-color: #2b5e75; /* Replace with your primary brand accent hex */
    
    /* The sliding animation magic */
    transform: scaleX(0);    /* Starts compressed at 0% width (completely hidden) */
    transform-origin: left;  /* Animates drawing out from the left boundary */
    transition: transform 0.3s ease-in-out; /* Smooth ease transformation */
}

/* 3. Reveal the sliding underline on hover */
.nav-menu-list a:hover::after {
    transform: scaleX(1);    /* Expands instantly to 100% full width */
}

/* 4. Optional: Subtle text color shift on hover */
.nav-menu-list a:hover {
    color: #2b5e75;          /* Text colors slightly to match the vector bar */
    transition: color 0.2s ease-in;
}


/* 1. This acts as the clipping window box */
.full-width-banner {
    position: relative; 
    width: 100%;
    height: 60vh; /* The height of your window view */
    overflow: hidden;
    z-index: 1;
}

/* 2. This locks the image completely dead-still to the viewport */
.full-width-banner img {
    position: fixed;   /* This is the magic key: absolute to the screen */
    top: 0;
    left: 0;
    width: 100%;
    height: auto;      /* Must match the parent window height exactly */
    object-fit: cover; /* Keeps aspect ratio perfect */
    z-index: -1;       /* Places it inside the background layer */
}

/* 3. The content layer that wipes over the window */
main, 
.site-main,
#content {
    position: relative;
    z-index: 5;          /* Slides above the image and its frame container */
    background: #ffffff; /* Must be solid color to hide the image underneath */
    padding: 40px 20px;
}

/* Container to organize cards neatly */
.posts-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

/* Individual post cards layout block */
.blog-post-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    padding: 25px;
    border-radius: 4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 1. Target the raw img tag inside your custom thumbnail window */
.post-card-thumbnail img {
    width: 100% !important;   /* Overrides hardcoded pixel values from WordPress */
    height: 100% !important;  /* Overrides hardcoded pixel heights */
    display: block;           /* Erases weird inline line-height gaps at the bottom */
    object-fit: cover;        /* Crops and scales dynamically without stretching */
}

/* 2. Fix the link anchor wrapper to stretch to 100% space */
.post-card-thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

/* 3. Keep the aspect ratio box locked down and stable */
.post-card-thumbnail {
    width: 100%;
    height: 220px;            /* Fixes the static height of your image slot */
    position: relative;       /* Preps alignment anchoring */
    overflow: hidden;         /* Safely trims away any image overflow edge bleeding */
}

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

.post-card-title a {
    text-decoration: none;
    color: #1a1a1a;
}

.post-card-title a:hover {
    color: #ff0055; /* Matches your navigation accent highlights */
}

.post-meta-data {
    font-size: 12px;
    color: #888888;
    margin-bottom: 15px;
}

.read-more-btn {
    display: inline-block;
    margin-top: 15px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    color: #ff0055;
}

/* Styling for your custom Masonry layout option */
.wp-block-gallery.is-style-gallery-masonry {
    column-count: 3;
    column-gap: 15px;
}

/* Styling for your custom Rounded Borders option */
.wp-block-gallery.is-style-gallery-rounded img {
    border-radius: 12px;
}

.scrim {
	background-color: #000000d1 !important
}

/* Navigation container bar */
.blog-category-nav {
    margin-bottom: 40px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}

/* Remove default list styles and align horizontally */
.blog-category-nav .category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* Base style for category items */
.blog-category-nav .category-list li a {
    text-decoration: none;
    color: #555555;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Hover effect */
.blog-category-nav .category-list li a:hover {
    background-color: #f0f0f0;
    color: #2b5e75; /* Uses your theme's logo/branding blue */
}

/* Highlight the active/current category button */
.blog-category-nav .category-list li.current-cat a {
    background-color: #2b5e75; /* Active color */
    color: #ffffff !important;
}

.wp-block-media-text {
    margin-top: 48px;
    margin-bottom: 48px;
    background-color: #f9fbfd;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Force the figure wrapper to obey the boundary */
.wp-block-media-text__media {
    overflow: hidden;
    border-radius: 20px;
}

/* Force the actual image to round its corners */
.wp-block-media-text__media img {
    border-radius: 20px !important;
    overflow: hidden;
}

/* Add inner breathing room to the text container side */
.wp-block-media-text__content {
    padding: 40px !important;
}

/* Soften the sharp corners of the image */
.wp-block-media-text__media img {
    border-radius: 0; /* Keep 0 if it fills the container edge, or 8px if padded */
    transition: transform 0.3s ease;
}

hr.wp-block-separator {
    border: none;
    border-top: 3px solid #2b5e75; /* Your signature blue */
    width: 80px;
    margin: 40px auto;
}

/* Target the text inside your single post articles */
.single-post article p {
    font-size: 1.15rem;       /* Slightly larger, comfortable reading size */
    line-height: 1.75;        /* Generous line spacing so text can breathe */
    color: #333333;           /* Dark gray instead of harsh solid black */
    margin-bottom: 1.5rem;    /* Consistent spacing between paragraphs */
}

.single-post article h2, 
.single-post article h3 {
    color: #000;           /* Tie your headings to your logo accent color */
    margin-top: 2rem;
    font-size: var(--wp--preset--font-size--x-large);
    margin-bottom: 1rem;
    font-weight: 700;
}
.wp-lightbox-overlay img {
    border-radius: 16px !important;
}

/* Optional: Add a subtle shadow to make the rounded popup pop */
.wp-lightbox-overlay img {
    box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
}
.wp-lightbox-overlay figure,
.wp-lightbox-overlay div[class*="wp-block-image"] {
    border-radius: 16px !important;
    overflow: hidden !important; /* Forces the background layout to match the curves */
    background: transparent !important; /* Removes any hidden backdrop color */
}

/* 2. Keep the border radius on the actual image */
.wp-lightbox-overlay img {
    border-radius: 16px !important;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
}
.blog-post-card {
    opacity: 1;
    transform: scale(1) translateY(0);
    max-height: 1200px;
    /* Clean, universal ease-out deceleration curve for physical transitions */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                padding 0.4s, margin 0.4s;
    will-change: transform, opacity, max-height;
}

/* ==========================================================================
   THE MOTION AXIS DUO: DISAPPEARING VS APPEARING
   ========================================================================== */

/* 1. DISAPPEARING: Flatten down, shrink, and slide backward */
.blog-post-card.insuco-flatten-out {
    opacity: 0 !important;
    transform: scale(0.6) translateY(30px) !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
}

/* 2. APPEARING STARTING STATE: Completely flat, miniature, and hidden */
.blog-post-card.insuco-flatten-in-start {
    opacity: 0 !important;
    transform: scale(0.6) translateY(30px) !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    transition: none !important; /* Temporarily locks them in place */
}

/* 3. APPEARING REVEAL ACTION: Expands max-height, scales forward to 1.0 */
.blog-post-card.insuco-flatten-in-end {
    opacity: 1;
    transform: scale(1) translateY(0);
    max-height: 1200px;
    /* Matches transition property types used for the disappearing routine */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
                max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#map {
    width: 100%;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    height: 600px; /* Or 100vh depending on your layout layout */
    display: block;
    margin: 0;

}