/* put here your custom css styles */

/* =========================================================
   FIX: Oversized text logo + sideways scroll / grey gap
   ---------------------------------------------------------
   The theme sets .header h1 to 96px (72px on phones), which
   makes the "KnowledgeSpark" logo wider than the screen and
   causes horizontal overflow. We scale the logo with the
   viewport so it always fits, and block any sideways scroll.
   ========================================================= */

/* Never allow the page to scroll sideways (kills the grey gap) */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

/* Logo scales smoothly with screen width and never overflows.
   clamp(min, preferred, max): tiny phones ~28px, desktop caps at 96px. */
.header h1,
.header h1 a {
	font-size: clamp(28px, 10vw, 96px) !important;
	line-height: 1.05 !important;
	white-space: normal !important;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Keep the logo box and its image inside the screen */
.header .logo {
	max-width: 100%;
}
.header .logo img {
	max-width: 100%;
	height: auto;
}

/* Tagline under the logo stays proportional on small screens */
@media screen and (max-width: 767px) {
	.header h4 {
		font-size: 16px;
	}
}

/* =========================================================
   FIX: Author box (single post) — long name/email overlap
   ---------------------------------------------------------
   The author box column is the width of the photo. A long
   display name (e.g. an email address) used to overflow and
   cover the article text. We DON'T change the box width (so
   the theme's mobile reflow stays intact); we only shrink the
   name text and make it wrap tidily, centered under the photo
   so the email + role stay aligned with the avatar.
   ========================================================= */
.post.single .author_box .single-author .details,
.post.single .author_box .single-author .details h5,
.post.single .author_box .single-author .details h5 a,
.post.single .author_box .single-author .details h6 {
	max-width: 100% !important;
	text-align: center !important;
	overflow-wrap: anywhere !important;
	word-break: break-all !important;   /* pack lines evenly, no lonely characters */
}
.post.single .author_box .single-author .details h5,
.post.single .author_box .single-author .details h5 a {
	font-size: 12px !important;
	line-height: 1.35 !important;
}

/* =========================================================
   FIX: "Most Read" sidebar — make all grey boxes equal width
   ---------------------------------------------------------
   By default the grey bar width is proportional to the view
   count (a popularity bar), so lower-viewed posts look short.
   Force every bar to full width so they all look consistent.
   ========================================================= */
.blog.rating .post .value_bar_container,
.blog.rating .post .value_bar {
	width: 100% !important;
}

/* =========================================================
   FIX: Author / archive page title overflow on mobile
   ---------------------------------------------------------
   The author page shows the display name (a long email) as a
   42px h1 that runs off the screen sideways on phones. Scale
   it down and let it wrap so it always fits.
   ========================================================= */
.page_header .page_title {
	font-size: clamp(18px, 5.5vw, 42px) !important;
	line-height: 1.15 !important;
	max-width: 100% !important;
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}
/* Bio box email (author archive): only make the long email wrap so it
   isn't cut — WITHOUT changing the avatar size or box layout. */
.authors_list .single-author .content h2,
.authors_list .single-author .content h2 a {
	overflow-wrap: anywhere !important;
	word-break: break-word !important;
}

/* =========================================================
   FIX: Vertical carousel up/down arrows overlapping text
   ---------------------------------------------------------
   On phones the "Latest Posts" style vertical carousel places
   its up/down scroll arrows on top of the post titles. Hide
   them on small screens (the page still scrolls normally).
   ========================================================= */
@media screen and (max-width: 767px) {
	.vertical_carousel_container a.slider_control.up,
	.vertical_carousel_container a.slider_control.down {
		display: none !important;
	}
	/* Hide the post-carousel ‹ › arrows on mobile (they mis-position and
	   overlap content). The main homepage slider keeps its own arrows. */
	.horizontal_carousel_container a.slider_control {
		display: none !important;
	}
}

/* =========================================================
   UI POLISH — tasteful typography / colour / spacing refresh
   (header, layout & structure intentionally left unchanged)
   ========================================================= */

/* Hide the top bar (LATEST ticker + social icons + search) */
.header_top_bar_container {
	display: none !important;
}

/* Mobile: smaller hamburger menu button, aligned to the right */
@media screen and (max-width: 767px) {
	.mobile-menu-switch {
		width: 22px !important;
		padding: 8px 6px 5px !important;
		margin: 0 16px 0 auto !important;   /* left:auto right-aligns it */
	}
	.mobile-menu-switch .line {
		width: 22px !important;
		height: 2px !important;
		margin-bottom: 5px !important;
	}
	/* tighten the vertical space the menu bar takes on mobile */
	.menu_container,
	.mobile_menu_container {
		margin-bottom: 16px !important;
	}
}

/* --- Typography: Arial -> Roboto (already loaded), softer text --- */
body {
	font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important;
	font-size: 15px !important;
	color: #2c2f33 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
p {
	line-height: 1.7;
}

/* Article body — bigger, airier, easier to read */
.post.single .text {
	font-size: 17px !important;
	line-height: 1.8 !important;
	color: #33373b !important;
}
.post.single .text p {
	margin-bottom: 1.25em;
}

/* Headings — crisper colour + subtle tightening, smooth hover */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: #1c1f22;
	letter-spacing: -0.008em;
}
a,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	transition: color .18s ease;
}
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
	color: #ED1C24;
}

/* Post titles a touch bolder for hierarchy */
h1.post_title {
	letter-spacing: -0.015em;
}

/* --- Colour refinement: cleaner neutrals (brand red kept) --- */
/* Muted meta text (dates / views) */
.post_details li.date,
.post .date,
.views,
.author_info .date {
	color: #99a0a6 !important;
}

/* Softer section-header bars and sidebar cards */
.box_header,
.widget .widget_title,
.blog.rating .post_content {
	background-color: #f5f6f7;
}

/* --- Form fields: modern, with a focus state --- */
input[type='text'],
input[type='email'],
input[type='url'],
input[type='search'],
textarea {
	background: #f6f7f8 !important;
	border: 1px solid #e5e8ea !important;
	border-radius: 4px !important;
	color: #33373b !important;
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='search']:focus,
textarea:focus {
	background: #fff !important;
	border-color: #ED1C24 !important;
	box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.10) !important;
	outline: none !important;
}

/* --- Comment/Contact form: clean responsive 3-column row --- */
.comment_form fieldset.vc_col-sm-4,
.contact_form fieldset.vc_col-sm-4 {
	width: 32% !important;
	margin-left: 2% !important;
	float: left !important;
	box-sizing: border-box !important;
}
.comment_form fieldset.vc_col-sm-4:first-child,
.contact_form fieldset.vc_col-sm-4:first-child {
	width: 32% !important;
	margin-left: 0 !important;
}
.comment_form input,
.comment_form textarea,
.contact_form input,
.contact_form textarea {
	box-sizing: border-box !important;
	width: 100% !important;
}
/* Stack the fields on phones */
@media screen and (max-width: 767px) {
	.comment_form fieldset.vc_col-sm-4,
	.contact_form fieldset.vc_col-sm-4,
	.comment_form fieldset.vc_col-sm-4:first-child,
	.contact_form fieldset.vc_col-sm-4:first-child {
		width: 100% !important;
		margin-left: 0 !important;
		float: none !important;
		margin-top: 10px !important;
	}
	.comment_form fieldset.vc_col-sm-4:first-child,
	.contact_form fieldset.vc_col-sm-4:first-child {
		margin-top: 0 !important;
	}
}

/* --- Buttons: smooth transitions + subtle rounding --- */
.more,
.more[type="submit"],
input[type="submit"],
button,
.submit,
.post_comment_button {
	transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
	letter-spacing: .03em;
	border-radius: 3px !important;
}

/* =========================================================
   MICRO-ANIMATIONS — subtle, tasteful (brand red kept)
   ========================================================= */
@keyframes ksFadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Gentle fade-in for main content blocks on load
   (deliberately NOT applied to carousels, which move themselves) */
.post.single,
.page_header,
.box_header,
.comment_form,
.blog.rating {
	animation: ksFadeUp .55s ease both;
}

/* Post thumbnails: contained hover zoom */
.post_image {
	overflow: hidden !important;
	display: block;
}
.post_image img {
	transition: transform .55s cubic-bezier(.2, .6, .2, 1) !important;
	display: block;
	width: 100%;
	height: auto;
}
.post_image:hover img {
	transform: scale(1.06);
}

/* Smooth menu hover */
.ubermenu-nav > li > a,
.sf-menu > li > a {
	transition: color .18s ease, background-color .18s ease;
}

/* Blog-grid cards: gentle hover lift (scoped away from carousels/rating) */
.blog:not(.horizontal_carousel):not(.rating):not(.small) .post {
	transition: transform .2s ease;
}
.blog:not(.horizontal_carousel):not(.rating):not(.small) .post:hover {
	transform: translateY(-4px);
}

/* =========================================================
   HEADER: center nav (Home · Categories) + breathing room
   ========================================================= */
/* Space between tagline and the menu, and menu and the content below */
.header {
	padding-bottom: 14px !important;
}
.menu_container {
	margin-bottom: 30px !important;
}

@media screen and (min-width: 768px) {
	.menu_container .ubermenu .ubermenu-nav {
		text-align: center !important;
	}
	.menu_container .ubermenu-nav > li {
		float: none !important;
		display: inline-block !important;
		vertical-align: top;
		padding-right: 0 !important;
		height: auto !important;
	}
	/* taller, roomier top-level links */
	.menu_container .ubermenu-nav > li > a {
		padding: 16px 22px !important;
		font-size: 15px !important;
	}
	/* keep dropdown sub-menu text left-aligned */
	.menu_container .ubermenu-nav ul {
		text-align: left !important;
	}
}

/* =========================================================
   DROPDOWN: clean white flyout with red accent (was dark grey)
   ========================================================= */
.menu_container .ubermenu .ubermenu-nav li ul {
	background: #ffffff !important;
	border-top: 3px solid #ED1C24 !important;
	border-radius: 0 0 8px 8px !important;
	box-shadow: 0 14px 34px rgba(20, 24, 28, 0.14) !important;
	padding: 6px 0 !important;
	overflow: hidden;
}
.site_container .menu_container .ubermenu .ubermenu-nav li ul li,
.menu_container .ubermenu .ubermenu-nav li ul li {
	width: 220px !important;
}
.site_container .menu_container .ubermenu .ubermenu-nav li ul li a,
.site_container .menu_container .ubermenu .ubermenu-nav li:hover ul a,
.site_container .menu_container .ubermenu .ubermenu-nav li.ubermenu-item-has-children:hover ul a {
	color: #33373b !important;
	background-color: #ffffff !important;
	padding: 12px 22px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: .02em !important;
	border: none !important;
	transition: color .15s ease, background-color .15s ease, padding-left .15s ease !important;
}
.site_container .menu_container .ubermenu .ubermenu-nav li ul li a:hover,
.site_container .menu_container .ubermenu .ubermenu-nav li ul li:hover > a {
	color: #ED1C24 !important;
	background-color: #f6f7f8 !important;
	padding-left: 27px !important;
}

/* =========================================================
   FOOTER: white rounded single-row bar
   (brand left · nav centre · copyright right)
   ========================================================= */
/* Collapse the empty widget rows that create the dark void */
.footer_container .footer.clearfix > .vc_row:not(.copyright_row) {
	display: none !important;
}
/* Full-width white footer bar (edge to edge) */
.footer_container {
	background: #ffffff !important;
	padding: 0 !important;
}
.footer_container .footer {
	background: #ffffff !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	border: none !important;
	border-top: 1px solid #ececee !important;
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* One full-width row */
.footer .copyright_row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	padding: 20px 50px !important;
	margin: 0 !important;
}

/* Brand on the left (matches theme — red KnowledgeSpark) */
.footer .copyright_row::before {
	content: "KnowledgeSpark";
	order: 1;
	flex: 0 0 auto;
	color: #ED1C24;
	font-family: 'Roboto Condensed', 'Roboto', sans-serif;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

/* Nav in the centre */
.footer .copyright_row > .vc_col-sm-4 {
	order: 2;
	width: auto !important;
	flex: 1 1 auto !important;
	float: none !important;
	text-align: center !important;
	padding: 0 !important;
}

/* Copyright on the right */
.footer .copyright_row > .vc_col-sm-8 {
	order: 3;
	width: auto !important;
	flex: 0 0 auto !important;
	float: none !important;
	text-align: right !important;
	padding: 0 !important;
	color: #8b9298 !important;
	font-size: 13px !important;
	white-space: nowrap;
}

/* Footer nav links: dark on white, red hover, no bullets/separators */
ul.footer_menu {
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	list-style: none !important;
	white-space: nowrap !important;   /* keep all links on one line */
}
ul.footer_menu > li {
	display: inline-block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
}
ul.footer_menu > li > h6 {
	display: inline-block !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	border: none !important;
}
ul.footer_menu > li > h6 > a {
	display: inline-block !important;
	color: #33373b !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	padding: 6px 15px !important;
	transition: color .16s ease !important;
}
ul.footer_menu > li > h6 > a:hover {
	color: #ED1C24 !important;
}

/* Stack neatly on small screens */
@media screen and (max-width: 767px) {
	.footer .copyright_row {
		flex-direction: column !important;
		text-align: center !important;
		gap: 12px !important;
		padding: 22px 18px !important;
	}
	.footer .copyright_row::before { order: 0; }
	.footer .copyright_row > .vc_col-sm-8 { text-align: center !important; white-space: normal; }
	ul.footer_menu { white-space: normal !important; }   /* allow wrapping on phones */
	ul.footer_menu > li > h6 > a { padding: 7px 12px !important; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.post.single,
	.page_header,
	.box_header,
	.comment_form,
	.blog.rating {
		animation: none !important;
	}
	.post_image img { transition: none !important; }
}