/*
Theme Name:kbres2026
Theme URI:kb-resource.com
Author:Vlatko Zdrale
Author URI:
Description:Theme for KB Resource (Bootstrap 5.3)
Version:1.0
Requires at least:6.3
Requires PHP:7.4
License:GNU General Public License
License URI:license.txt
Text Domain:kbres2026
*/

html {height:100%}
body {padding-top:72px; font-family:'Open Sans', Arial, Helvetica, sans-serif; min-height:100%}
body.post-template-single-newsletter {background-color:#ccc}

h1, h2, h3, h4 {font-family:'Montserrat', sans-serif}

a {color:#ef4135; text-decoration:none; transition:all .3s linear}
a:hover {color:#fdff9b; text-decoration:none}

.screen-reader-text {position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* HOME / CAROUSEL */
.carousel-item {height:750px; background-repeat:no-repeat; background-size:cover; background-position:center}
.carousel-control-next, .carousel-control-prev {width:8%}
#homepage {margin-top:-370px; position:relative; z-index:2}
.alert.alert-dark {font-size:16px; font-style:italic; background:rgba(0,0,0,0.5); padding:1rem; border:0; color:white; border-radius:0; text-shadow:1px 1px 1px #000}

#intro p {font-size:12px; font-style:italic; margin:1rem 0}

h1, h2 a {color:white; display:block; font-style:italic; font-weight:800; line-height:100%; transition:all .3s linear; margin:1rem 0; text-shadow:1px 1px 4px #000}
h1 a {color:#fdff9b}
h1 a:hover {color:#ef4135}

a.type-link {margin:2rem 0 .5rem 0; background:rgba(239,65,53,.25); padding:.1rem .5rem; display:inline-block; font-style:italic}

/* CATALOG CARDS */
.catalog {background:rgba(255, 255, 255, 0.9); padding-bottom:100%; margin-bottom:30px; overflow:hidden; position:relative; transition:all .3s linear; box-shadow:1px 1px 3px #555}
.catalog:hover, .active .catalog {background:white; box-shadow:4px 4px 15px #555}
.catalog article {position:absolute; top:50%; overflow:hidden; padding:1rem; margin:0}
.catalog h2 a {color:#555; font-size:1rem; margin:0; text-shadow:none}
.catalog h2 a:hover {color:#ef4135}
.catalog .featured-img {position:absolute; height:50%; overflow:hidden; background:white}
.catalog .featured-img img {object-fit:cover; transition:all .3s linear; min-height:264px; min-width:350px}
.catalog:hover .featured-img img, .active .catalog .featured-img img {width:120%}
.catalog p {font-size:11px; line-height:120%}
.catalog.category-featured-learning {background:rgba(255, 255, 188, 0.95)}

/* SECTION BACKGROUNDS */
.archive .page-header, .search .page-header {border:none; margin:30px 0 15px 0}
.archive {background:url(images/news-background.webp) no-repeat; background-size:cover!important; height:100%; background-attachment:fixed}
body.post-type-archive-learning, body.category-ceus, body.category-podcasts {background-image:url(images/learning-background.webp)}
.post-type-archive-onthemove {background-image:url(images/bg-on-the-move.webp)}
.post-type-archive-kbtivity {background-image:url(images/kbtivity-background.webp)}
.post-type-archive-blog {background:url(images/blog-background.webp) no-repeat; background-size:cover; height:100%; background-attachment:fixed}
.post-type-archive-opinion {background:url(images/opinions-background.webp) no-repeat; background-attachment:fixed; background-size:cover}
.post-type-archive-casestudy {background:url(images/casehistory-background.webp) no-repeat; background-attachment:fixed; background-size:cover}
.post-type-archive-kb-itz, .page-id-8263 {background:url(images/bg-kb-itz.webp) no-repeat rgba(0, 0, 0, 0.8); background-attachment:fixed; background-blend-mode:multiply; background-size:cover}
body.category-showcases {background-image:url(images/bg-showcases.webp)}

body.post-type-archive-kb-itz .catalog h2 a {font-size:2rem; font-weight:100}
body.post-type-archive-kb-itz .catalog p {font-size:1.1rem; line-height:150%}
/* kb-itz subscribe page */
.post-8263 * {color:#fff}
.post-8263 h1 {font-size:2rem; margin-top:2.2rem; line-height:1.2}
.post-8263 figcaption {font-size:20px; background:rgba(0,0,0,.4); border:none; padding:1rem 0; text-transform:uppercase}
.page-id-8263 #footer {display:none}

.post-type-archive-kbtivity .catalog .featured-img, .post-type-archive-onthemove .catalog .featured-img {height:100%}
.post-type-archive-kbtivity .catalog article, .post-type-archive-onthemove .catalog article {top:75%; background:rgba(255,255,255,.75); width:100%}

/* HEADER */
.navbar {background:#f7f7f7}
.navbar-brand img {width:350px; height:auto}
#navbar-collapse-main {position:relative; align-self:stretch}

#menu-main-menu {margin:28px 28px 0 0}
#menu-main-menu > li > a {padding:.5rem 1rem .5rem 0; color:grey}
#menu-main-menu > li.active > a, #menu-main-menu li a:hover {color:black; background:none}

form#searchform {padding:0; position:absolute; right:0; top:20px; margin:0}
form#searchform .input-group {flex-wrap:nowrap}
form#searchform input {flex:0 0 auto; background:black; color:white; border-radius:0; width:0; padding:0; border:none; font-size:13px; transition:all .3s linear}
form#searchform input:focus {box-shadow:none}
form#searchform:hover input, form#searchform:focus-within input {width:200px; padding:0 .5rem; border:1px solid #fff}
form#searchform .btn {color:grey}

/* Dropdowns open on hover / keyboard focus (no Popper.js needed) */
.navbar .dropdown-menu {background:black; padding:0 10px; border:0; border-radius:0; box-shadow:1px 1px 4px #555; min-width:11rem; margin-top:0}
.navbar .dropdown-menu .dropdown-item {color:grey; padding:.35rem 0; background:none}
.navbar .dropdown-menu li.active .dropdown-item {color:white}
.navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus {background:none; color:white}
.dropdown:hover > .dropdown-menu, .dropdown:focus-within > .dropdown-menu {display:block}

/* FOOTER */
#footer {background:black; color:white; padding:15px 0}
#footer a {color:white}
#footer a:hover {color:red}
#footer ul {list-style:none; padding:0; margin:0}

/* SINGLE POST */
main article {margin:1rem 0; padding-bottom:1rem; border-bottom:1px solid #eaeaea; color:#555}
main article h1 {margin:-2px 0 1rem 0; font-style:normal; color:#333; font-size:1.5rem; text-shadow:none}
main article h2 {font-size:1.4rem}
main article h3 {font-size:1.2rem}
main article h4 {font-size:1rem}
main article img {max-width:730px; height:auto}
main article a:hover {color:#000}

.company-info h2 a {color:#555; border-bottom:1px solid #ccc; margin-bottom:10px}
.company-info, .editors-note, .tags, .comments {clear:both; margin-top:1rem; border-top:1px solid #eee; padding-top:1rem}
.company-info .col-md-4 img {width:100%; height:auto}

.tag-list {margin-top:20px; clear:both}
.tag-list a {border:1px solid #eee; padding:0 2px}
.tagcloud h4 {width:100%}
.tagcloud {clear:both; display:flex; flex-wrap:wrap; align-items:center}
.tagcloud a {display:inline-block; margin:0.125rem; padding:0.5rem; background:rgba(239, 65, 53, 0.02); transition:all 0.1s ease-in-out}
.tagcloud p {display:inline-block; margin:0.125rem; padding:0.5rem 0.5rem 0.5rem 0}
.tagcloud a:hover, .tagcloud a:focus {background:#ef4135; text-decoration:none; color:white; transform:scale(1.1)}

.kbtivity .entry-content {margin-top:-10px}
.kbtivity blockquote img {width:170px; height:auto; padding-right:20px; border-right:5px solid #eee}
blockquote, .kbtivity blockquote {border:0; margin:0 0 1rem 2rem; padding:1rem 0 1rem 2rem; border-left:5px solid #eee; color:#555}

.onthemove_photo {float:left; max-width:185px; margin-right:1rem}
.onthemove_photo img {width:100%; max-width:185px; height:auto}

.entry-content td, .entry-content th {padding:2px; border-right:1px solid #ccc}
.entry-content td:last-child, .entry-content th:last-child {border-right:none}
.entry-content tr {border-bottom:1px solid #ccc; margin:0; padding:0}

/* IMAGES */
img.centered {display:block; margin-left:auto; margin-right:auto}
.alignright {float:right; margin-left:1em}
.alignleft {float:left; margin-right:1em}

.thumbnail {color:#333; display:inline-table; border:none; padding:0; border-radius:0}
.thumbnail img {display:block; width:100%}
.thumbnail .caption {background:#ddd; padding:0 2px; text-align:center; font-size:10px; font-weight:bold; font-style:italic; display:table-caption; caption-side:bottom}
.thumbnail.aligncenter {width:100%}

/* GALLERY */
.gallery:after {content:""; display:table; clear:both}
figure {max-width:100%; height:auto; margin:1em 0}
p img.alignright, p img.alignleft {margin-top:0}
figcaption {background:#ddd; padding:0 2px; color:#555; text-align:center; font-size:11px; font-weight:bold; font-style:italic; display:flex; border:1px solid #ddd; min-height:32px; justify-content:center; align-items:center}
.gallery figure img {max-width:100%; width:100%; height:auto; margin:0 auto; display:block}
.gallery figure {float:left; margin:0 2% 1em 0}
.gallery.gallery-columns-1 figure {width:100%; margin:0 0 1em 0; float:none}
.gallery.gallery-columns-2 figure {width:49%}
.gallery.gallery-columns-2 figure:nth-of-type(even) {margin-right:0}
.gallery.gallery-columns-2 figure:nth-of-type(odd) {clear:left}
.gallery.gallery-columns-3 figure {width:32%}
.gallery.gallery-columns-3 figure:nth-of-type(3n+3) {margin-right:0}
.gallery.gallery-columns-3 figure:nth-of-type(3n+4) {clear:left}
.gallery.gallery-columns-4 figure {width:23.25%}
.gallery.gallery-columns-4 figure:nth-of-type(4n+4) {margin-right:0}
.gallery.gallery-columns-4 figure:nth-of-type(4n+5) {clear:left}
.gallery.gallery-columns-5 figure {width:18%}
.gallery.gallery-columns-5 figure:nth-of-type(5n+5) {margin-right:0}
.gallery.gallery-columns-5 figure:nth-of-type(5n+6) {clear:left}
.gallery.gallery-columns-6 figure {width:14.2%}
.gallery.gallery-columns-6 figure:nth-of-type(6n+6) {margin-right:0}
.gallery.gallery-columns-6 figure:nth-of-type(6n+7) {clear:left}
.gallery.gallery-columns-7 figure {width:12%}
.gallery.gallery-columns-7 figure:nth-of-type(7n+7) {margin-right:0}
.gallery.gallery-columns-7 figure:nth-of-type(7n+8) {clear:left}
.gallery.gallery-columns-8 figure {width:10.2%}
.gallery.gallery-columns-8 figure:nth-of-type(8n+8) {margin-right:0}
.gallery.gallery-columns-8 figure:nth-of-type(8n+9) {clear:left}
.gallery.gallery-columns-9 figure {width:8.85%}
.gallery.gallery-columns-9 figure:nth-of-type(9n+9) {margin-right:0}
.gallery.gallery-columns-9 figure:nth-of-type(9n+10) {clear:left}

/* PAGINATION */
.pagination {display:inline-flex; position:relative}
.pagination li .page-link {color:#fff; background:#000; font-size:20px; font-weight:500; line-height:33px; height:34px; min-width:42px; padding:0; margin:0 4px; border:none; border-radius:0; position:relative; z-index:1; transition:all 0.3s ease 0s}
.pagination li .page-link.dots {background:rgba(255,255,255,.33)}
.pagination li a.page-link:hover, .pagination li a.page-link:focus, .pagination li.active .page-link {color:#fff; background:#f00; box-shadow:0 0 10px rgba(0,0,0,0.4)}
.pagination li:first-child .page-link:before {transform:rotateY(180deg); right:auto; left:0}
.pagination li .page-link:before {content:''; background:linear-gradient(to top right, transparent 50%, #f00 51%); height:12px; width:12px; opacity:0; position:absolute; right:0; bottom:0; transition:all 0.3s ease 0s}
.pagination li a.page-link:hover:before, .pagination li a.page-link:focus:before, .pagination li.active .page-link:before {opacity:1; bottom:-12px}

/* FORMS (Contact Form 7 markup) */
.wpform label {display:block; font-style:italic}
.wpform input, .wpform select {width:100%; height:26px; font-weight:normal; padding:0 5px}
.wpform textarea {width:100%; height:50px; font-weight:normal; padding:0 5px}
input.wpform-control.wpsubmit {width:200px; border-radius:7px; border:none; color:white; background:red}
input.wpform-control.wpsubmit:hover {background:#ca0505}
.screen-reader-response {display:none}
.wpcf7-response-output {font-size:12px; background:#c00; padding:2px}
.form-control {border-radius:0; box-shadow:none}

/* COMMENTS */
div#comments {background:whitesmoke; padding:15px; margin-top:30px}
h2.comments-title {margin:0 0 15px 0; font-size:14px; text-transform:uppercase; font-weight:bold}
ol.comment-list {padding:0}
ol.comment-list li {list-style:none; padding:0}
.single li article {padding:10px; background:white; margin-bottom:10px}
.comment-metadata a {color:grey; font-style:italic}
h3#reply-title {font-size:18px}

.nav-links a {padding:10px; text-transform:uppercase; font-size:12px; display:inline-block; margin-top:15px; border:1px solid black; color:black}
.nav-links a:hover {background:black; color:white}

/* Bill tracker widget (embedded in content) */
.BT50Widget .ellipsis::before {display:block; content:"Currently Trending Bills"; color:#fff}
.BT50Widget ul.linedList div {font-family:'Open Sans', Arial, Helvetica, sans-serif; font-size:14px!important; line-height:1.42857143; color:#333}
.BT50Widget ul.linedList a.billTitle {font-family:'Montserrat', sans-serif; font-size:20px; font-weight:normal!important; line-height:1.42857143; text-decoration:none}

/* SHARE BAR */
#share {position:fixed; width:60px; margin-top:85px; transition:all 0.3s linear; box-shadow:2px 2px 8px 0px #777; text-align:center; z-index:1000; background:#fff}
#share ul {margin:0; padding:0; list-style:none}
#share li {height:45px; position:relative}
#share li a {color:#fff!important; display:block; height:100%; width:100%; line-height:45px; transition:all .3s linear; font-weight:bold}
#share li:nth-child(1) a {background:#3b5998}
#share li:nth-child(2) a {background:#000}
#share li:nth-child(3) a {background:#006192}
#share li:nth-child(4) a {background:#2867B2}
#share li a svg {position:absolute; top:14px; left:22px; width:16px; height:16px}
#share ul li a span {display:none}
#share a:hover {z-index:1; width:150px}
#share ul li:hover a span {padding-left:30%; display:block}

/* Keep carousel/menu animations even when the OS "reduce motion" setting is on (as in the previous theme) */
.carousel-item {transition:transform .6s ease-in-out!important}
.collapsing {transition:height .35s ease!important}

/* RESPONSIVE */
@media (max-width:1199.98px) {
	.navbar-brand img {width:280px}
	#menu-main-menu > li > a {padding-right:.75rem}
}

@media (max-width:991.98px) {
	.navbar-brand img {width:190px}
	#navbar-collapse-main {max-height:calc(100vh - 60px); overflow-y:auto}
	#menu-main-menu {margin:10px 0 0 0; text-align:center}
	#menu-main-menu > li {border-top:1px solid #e5e5e5}
	#menu-main-menu > li > a {padding:.5rem 0}
	.navbar .dropdown-menu {display:block; position:static; background:none; box-shadow:none; padding:0 20px; text-align:center}
	.navbar .dropdown-menu .dropdown-item {text-align:center}
	.navbar .dropdown-menu .dropdown-item:hover {color:black}
	.dropdown-toggle::after {display:none}
	form#searchform {position:static; margin:10px 0}
	form#searchform input, form#searchform:hover input {width:100%; flex:1 1 auto; padding:.25rem .5rem; text-align:center}
	.catalog p {display:none}
	main article img {max-width:50vw}
	.thumbnail img {width:100vw}
}

@media (max-width:767.98px) {
	body {padding-top:56px}
	.catalog {padding-bottom:15px; margin-bottom:30px}
	#homepage {margin-top:15px}
	.carousel-item {height:400px}
	.catalog .featured-img, .catalog article {position:static; height:150px}
	.catalog .featured-img img {width:100%; min-width:0}
	#footer .row > div {margin-bottom:15px}
	.footer-menu-class {overflow:auto}
	div#comments {margin-left:0}
	img.alignright, div.alignright, figure.alignright, img.alignleft, div.alignleft, figure.alignleft {display:block; margin:1em auto; float:none}
	.gallery.gallery-columns-4 figure, .gallery.gallery-columns-5 figure, .gallery.gallery-columns-6 figure, .gallery.gallery-columns-7 figure, .gallery.gallery-columns-8 figure, .gallery.gallery-columns-9 figure {width:100%; margin:0 0 1em 0; float:none}
	main article img {max-width:90vw}
	.pagination {font-size:0; display:inline-block}
	.pagination li {display:inline-block; vertical-align:top; margin:0 0 22px}

	#share {width:30px}
	#share small {display:none}
	#share li a svg {left:7px}
}
