/* ============================================================
   Data Bites & Insights — custom overrides
   Loaded AFTER main.css. Keeps the white/grey layout and adds:
   - pink pill borders on the main nav links
   - search results styling
   - browser-saved comments styling
   ============================================================ */

:root {
	--dbi-pink: #ff7782;       /* coral accent — borders, links, static highlights */
	--dbi-pink-soft: #ffd7da;  /* light coral tint */
	--dbi-pink-dark: #e85f6b;  /* deeper coral for pressed/hover-on-fill states */
	--dbi-highlight: #ff7782;  /* coral highlight for hover on links & buttons (Continue Reading, etc.) */
	--dbi-grey: #4a4a4a;
}

/* ---- Pink nav pills (Python / SQL / R / Data Viz / Capstones / Bites & Insights) ---- */
#header .links {
	overflow: visible;              /* stop the pills getting clipped */
}
#header .links ul {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	height: 100%;
	gap: 0.6em;
}
#header .links ul li,
#header .links ul li:first-child {
	border-left: 0;                 /* remove the default divider lines */
	margin-left: 0;
	padding-left: 0;
	line-height: normal;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
}
#header .links ul li a {
	display: -webkit-inline-flex;
	display: inline-flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	/* extra left padding offsets the trailing letter-spacing so the
	   uppercase text sits visually centred inside the box */
	padding: 0 0.9em 0 1.1em;
	height: 2.2em;
	border: 1.5px solid var(--dbi-pink);
	border-radius: 4px;             /* rectangular sections, softly squared */
	background-color: transparent;
	color: var(--dbi-grey);
	line-height: 1;
	white-space: nowrap;
	-webkit-transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
#header .links ul li a:hover {
	background-color: var(--dbi-highlight);
	border-color: var(--dbi-highlight);
	color: #ffffff !important;                 /* coral highlight fill with white text */
	box-shadow: 0 2px 6px rgba(255, 119, 130, 0.30);
}

/* ---- Search results page ---- */
.search-results {
	margin: 0;
	padding: 0;
	list-style: none;
}
.search-results li {
	border-bottom: solid 1px rgba(160, 160, 160, 0.3);
	padding: 1.25em 0;
}
.search-results li:last-child { border-bottom: 0; }
.search-results h3 { margin: 0 0 0.3em 0; }
.search-results h3 a { border-bottom: 0; }
.search-results .tag {
	display: inline-block;
	font-size: 0.6em;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--dbi-pink);
	border: 1px solid var(--dbi-pink);
	border-radius: 4px;
	padding: 0.25em 0.75em;
	margin-bottom: 0.5em;
}
.search-empty { color: #888; }
#searchTerm { color: var(--dbi-pink); }

/* ---- Comments ---- */
.comments {
	border-top: solid 1px rgba(160, 160, 160, 0.3);
	margin-top: 2em;
	padding-top: 2em;
}
.comments h3 { margin-bottom: 1em; }
.comment-list { list-style: none; margin: 0 0 2em 0; padding: 0; }
.comment-list li {
	background: #f7f7f7;
	border-left: 3px solid var(--dbi-pink);
	border-radius: 4px;
	padding: 1em 1.25em;
	margin-bottom: 1em;
}
.comment-list .c-meta {
	font-size: 0.8em;
	color: #888;
	margin-bottom: 0.4em;
}
.comment-list .c-name { color: var(--dbi-pink); font-weight: 700; }
.comment-list .c-body { margin: 0; white-space: pre-wrap; }
.comment-empty { color: #888; font-style: italic; }
.comment-form .fields { margin-bottom: 1em; }
.comment-form .button.pink,
.button.pink {
	background-color: var(--dbi-pink);
	color: #fff;
	box-shadow: none;
}
.button.pink:hover { background-color: var(--dbi-pink-dark); color: #fff; }

/* ---- Accent consistency ----
   The Future Imperfect template uses a teal/green accent (#2ebaae) for
   link hovers, button hovers, form focus, selection and menu hovers.
   Recolour all of those to the brand pink so every highlight matches
   the nav pills and homepage. */
a:hover {
	color: var(--dbi-highlight) !important;
}
/* icon glyphs are drawn as :before pseudo-elements — recolor their hover too */
a:hover:before {
	color: var(--dbi-highlight) !important;
}
/* the search & menu (tab) icons in the header: coral at rest and on hover */
#header .main ul li > a,
#header .main ul li > a:before {
	color: var(--dbi-highlight) !important;
}
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	box-shadow: inset 0 0 0 1px var(--dbi-highlight);
	color: var(--dbi-highlight) !important;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus {
	border-color: var(--dbi-pink);
	box-shadow: inset 0 0 0 1px var(--dbi-pink);
}
input[type="checkbox"]:focus + label:before,
input[type="radio"]:focus + label:before {
	border-color: var(--dbi-pink);
	box-shadow: 0 0 0 1px var(--dbi-pink);
}
#menu .links > li a:hover h3 {
	color: var(--dbi-pink) !important;
}
/* text selection highlight */
::selection { background-color: var(--dbi-pink); color: #ffffff; }
::-moz-selection { background-color: var(--dbi-pink); color: #ffffff; }

/* On narrow screens the pink pills would be hidden with the template's
   default (links hidden < 980px); leave that behavior — the slide-down
   Menu panel still provides navigation. */