/*
Theme Name:   chaplin Child
Theme URI:    
Description:  
Author:       
Author URI:   https://wordpresschildthemes.com/
Template: chaplin
Version: 1.0.1
Text Domain: chaplin-child
Color 1: #00d0fd
-------------------------------------------------------------- */

/* Site-wide top accent bar: 1px accent blue, then 4px raw black, sitting
   above everything else on every page (a real block before <header>, not an
   overlay, so it pushes all content down by 5px). */
body::before {
	content: "";
	display: block;
	height: 5px;
	background: linear-gradient(to bottom, #00d0fd 0, #00d0fd 1px, #000 1px, #000 5px);
}

/* Safari (mainly iOS) paints the elastic overscroll/bounce area - visible
   when scrolling past the top or bottom of the page - using the <html>
   element's background, while the actual page content sits on <body>'s own
   white background (set by the parent theme). Recoloring html here makes
   that bounce area accent blue instead of white; it affects both the top and
   bottom bounce equally, since CSS has no way to distinguish the two. */
html {
	background-color: #00d0fd;
}


/* hide all single post meta except edit link */
.single .post-meta li {
	display:none;
}
.single .post-meta li.post-edit {
	display:block;
}


@media ( min-width: 700px ) {

}

.container .row .entry-content {
	max-width: none;
}
.project-keywords h3 {
	margin-top: 0px;
	margin-bottom: 10px;
	text-transform: uppercase;
}
.project-keywords ul {
  list-style: none; /* Remove default bullets */
  margin-left: 0px;
}

.project-keywords ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #00d0fd; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */ 
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
@media (max-width: 767px) {
	.project-keywords h3 {
		margin-top: 20px;
	}
}

/* Mobile: sujet bien visible */
@media (max-width: 699px) {
    .cover-header.bg-image {
        background-position: 70% center !important;
    }
}
/* Tablette: recentrage partiel, transition entre mobile et desktop */
@media (min-width: 700px) and (max-width: 999px) {
    .cover-header.bg-image {
        background-position: 60% center !important;
    }
}

/* Header text colors + desktop nav styling. Scoped under #site-header so the
   ID gives enough specificity to win regardless of sticky/overlay-header
   state; targets only the desktop alt nav (.main-menu-alt), so the mobile
   .menu-modal nav (.main-menu) is untouched. */
#site-header .site-description {
	color: #000;
}

/* All desktop nav links: bold, #666 */
#site-header .header-navigation-wrapper .main-menu-alt > li > a,
#site-header .header-navigation-wrapper .main-menu-alt > li > .link-icon-wrapper > a {
	color: #666;
	font-weight: bold;
	text-decoration: none;
}

/* Active (current page) + hover: #000, underline 1px, pushed further from the text */
#site-header .header-navigation-wrapper .main-menu-alt > li > a:hover,
#site-header .header-navigation-wrapper .main-menu-alt > li > .link-icon-wrapper > a:hover,
#site-header .header-navigation-wrapper .main-menu-alt > li.current-menu-item > a,
#site-header .header-navigation-wrapper .main-menu-alt > li.current-menu-item > .link-icon-wrapper > a {
	color: #000;
	text-decoration: underline;
	text-decoration-thickness: 4px;
	text-underline-offset: 0.5em;
}

/* Homepage cover header: the theme sets white text on the whole .entry-header
   (for legibility over a photo), but this hero doesn't need it here, so force
   the title, intro line, and "Scroll Down" CTA to black. Specificity (3
   classes) beats the parent's ".cover-header .entry-header" rule outright, so
   no !important needed despite the child/parent enqueue order. */
.cover-header .entry-header .entry-title,
.cover-header .entry-header .intro-text,
.cover-header .entry-header .to-the-content-wrapper {
	color: #000;
}

/* Fix: the alt header menu <ul> carries the class "dropdown-menu", which collides
   with Bootstrap's own .dropdown-menu component (loaded globally for the portfolio
   grid). Bootstrap turns it into an absolutely-positioned white box, breaking the
   theme's intended inline flex nav. Reset the colliding properties here. */
.main-menu-alt-container ul.main-menu-alt.dropdown-menu {
	position: static !important;
	top: auto !important;
	left: auto !important;
	float: none !important;
	display: flex !important;
	min-width: 0 !important;
	padding: 0 !important;
	font-size: inherit !important;
	color: inherit !important;
	text-align: left !important;
	background-color: transparent !important;
	background-clip: initial !important;
	border: none !important;
	border-radius: 0 !important;
}