/* Basic color scheme : Clifton Village Spring Day" */
/* primary : blue */

:root {
  --cvra-blue-50:  #eef5fe;
  --cvra-blue-100: #d9e8fb;
  --cvra-blue-200: #b8d4f6;
  --cvra-blue-300: #93bced;
  --cvra-blue-400: #6ea5e5;
  --cvra-blue-500: #4F8FDE; /* PRIMARY */
  --cvra-blue-600: #3f78c6; /* hover */
  --cvra-blue-700: #3463a6; /* active */
  --cvra-blue-800: #2a4e82;
/* "spring yellow" - use for primary CTA emphasis, highlights, alerts needing warmth - NEVER for body text */
    --cvra-yellow-500: #F2C94C;
    --cvra-yellow-600: #d9b23f;
    --cvra-yellow-100: #fff6d6;
    --cvra-yellow-50: #ffffea;
/* "village green" - use for primary community tags, success states, environmental themes, secondary accents */
    --cvra-green-500: #63A86A;
    --cvra-green-100: #e6f3e8;
/* "herigtage brick" - use for heritage sections, small decorative touches, never heavy UI usage */
--heritage-brick: #B35A3C;
/* body background */
--cvra-body-background: #f7f5f0;
/* small BS5 tweaks */
  --bs-primary: var(--cvra-blue-500);
  --bs-link-color: var(--cvra-blue-600);

}
/* How to use the blue color range  
cvra-blue-500
	primary buttons
	links
	active nav items
	pagination
	focus rings
cvra-blue-600
	button hover
	link hover
cvra-blue-200
	subtle borders
	dividers
	input outlines
cvra-blue-50 / 100
	soft info panels
	gentle background washes
	callout boxes
*/

/* subtle shading on body background and top padding for fixed navbar */
body {
  background-color: var(--cvra-body-background);
}
/* adjust top margin - depending on device size - 100px for lg- (two line navbar) or 50px for smaller devices with one-line navbar */
/* Default: large screens (lg and up) */
body {
  padding-top: 100px;
}

/* Small and medium screens (below lg) */
@media (max-width: 991.98px) {
  body {
    padding-top: 60px;
  }
}


/* soft horizontal line */
/* Option 1 - Slightly stronger version (same style, just more visible) */
hr.soften-cvra_1 {
  border: none;
  height: 2px;
  background: linear-gradient(to right,
    rgba(79, 143, 222, 0),
    rgba(79, 143, 222, 0.8) 40%,
    rgba(79, 143, 222, 0.8) 60%,
    rgba(79, 143, 222, 0)
  );
}


/* pale yellow wash */
.cvra-pale-wash {
	background-color: var(--cvra-yellow-50);
}
/*  CLICKABLE CARDS STYLING - used for navigation */

/* clickable card border */
.cvra-link-card-border {
	border-width: 1px;
	border-style: solid;
	border-color: var(--cvra-blue-200);
}

/* clickable card chevron */
.cvra-link-card-arrow {
	color: #2f70ff;
}

/* Custom class for clickable navigation cards */
.card-lift {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
}

/* Lift and glow effect on hover (Desktop) */
.card-lift:hover {
    transform: translateY(-5px); /* Moves the card up slightly */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important; /* Adds a deeper shadow */
}

/* "Press" effect for touch feedback (Mobile/Active) */
.card-lift:active {
    transform: translateY(-2px) scale(0.98); /* Slight shrink to feel like a click */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
}

/* CTAs */
.cvra-cta-soft {
    background-color: var(--cvra-blue-50); 
    border-radius: 12px;
}
.cvra-cta-head {
	color:var(--cvra-blue-600)
}



/* quotes */
.cvra-quote {
    font-style: italic;
    font-weight: 500;
    border-left: 3px solid #b0e1ff;
    padding-left: 1rem;
    margin: 1.5rem 0;
}


/* NAVBAR STYLING */

/* modern navbar styling */
/* 1. Remove the default underline for all navbar links */

/* Target all links within the navbar to remove global underlines */
#cv-topnav a {
    text-decoration: none !important;
}

#cv-navbar .nav-link {
    text-decoration: none !important;
    border-bottom: 2px solid transparent; /* Reserve the space so the menu doesn't 'jump' */
    transition: border-color 0.3s ease, color 0.3s ease;
    padding-bottom: 2px; /* Gap between text and the line */
}

/* 2. Add the line on hover */
#cv-topnav .nav-link:hover {
    border-bottom: 2px solid #3f78c6; /* Using your brand color */
    color: #3f78c6 !important;
}

/* 3. Keep the line visible for the 'Active' page */
#cv-navbar .nav-link.active {
    border-bottom: 2px solid #3f78c6 !important;
    font-weight: 600;
}

/* Only apply this between 992px and 1200px */
@media (min-width: 992px) and (max-width: 1200px) {
    #cv-navbar .nav-link {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        font-size: 0.9rem; /* Slightly shrink text to fit more in */
    }
    
    #cv-navbar .navbar-brand {
        font-size: 1.1rem; /* Slightly shrink logo/text if needed */
    }
}

/* --- DROPDOWN ENHANCEMENTS --- */

/* 1. The Menu Container */
#cv-topnav .dropdown-menu {
    border: none;
    /* Using a stronger blue for the accent line to contrast the light blue navbar */
    border-top: 4px solid #0d6efd; 
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    padding: 0.4rem 0;
    /* Creates a slight separation so it doesn't look 'stuck' to the bar */
    margin-top: 8px !important; 
}

/* 2. The Dropdown Items */
#cv-topnav .dropdown-item {
    font-size: 0.95rem;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s ease-in-out;
    color: #333;
}

/* 3. Hover State - Pill style with nudge */
#cv-topnav .dropdown-item:hover {
    background-color: #f0f7ff; /* Very pale blue hint */
    color: #3f78c6;           /* Matches your nav-link 'brand' hover */
    padding-left: 1.5rem;      /* The 'modern nudge' */
}

/* 4. Ensure the dropdown toggle (the word 'INFO' or 'HISTORY') 
      matches your modern underline style when the menu is open */
#cv-topnav .nav-link.show {
    border-bottom: 2px solid #3f78c6 !important;
    color: #3f78c6 !important;
}

/* 5. Mobile Clean-up (Inside the collapsed menu) */
@media (max-width: 991px) {
    #cv-topnav .dropdown-menu {
        border: none;
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent */
        margin-top: 0 !important;
        padding-left: 1rem; /* Indent mobile items for clarity */
    }
}

/* styling of council services */
.service-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border: 1px solid #dee2e6;
/* Light gray border */border-radius: 50px;
/* Makes it a "pill" */background-color: #ffffff;
	color: #212529; /* Standard dark text */;
	text-decoration: none;
	transition: all 0.3s ease; /* Smooth animation */
}
/* The Hover State */
.service-pill:hover {
	background-color: #0d6efd; /* Bootstrap Primary Blue (or your brand color) */;
	color: #ffffff; /* White text on hover */;
	border-color: #0d6efd;
	transform: translateY(-2px); /* Subtle "lift" effect */;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Style the icon specifically */
.service-pill i {
	margin-left: 8px;
	font-size: 0.85rem;
	opacity: 0.6;
}
.service-pill:hover i {
	opacity: 1;
}