/* CNJ/201128 - Overrides for newspaper columns */
:root {
    --mywidth: 		400px;
	--mydarkblue:	#1e4560;
	--mylightblue:	#357997;
	--mysun:		#FFE006;
	--mysand:		#FCF8F3;
}

.columns {
    column-width: 			var(--mywidth);
    -webkit-column-width: 	var(--mywidth);
    -moz-column-width: 		var(--mywidth);
    padding-bottom: 		1em;
}

.columns h1,h2 {
   column-span: 			all;
   -webkit-column-span: 	all;
   -moz-column-span: 		all;
}

.columns .image-grid {
   column-span: 				all;
   -webkit-column-span: 		all;
   -moz-column-span: 			all;
   column-gap: 					1em;
   -webkit-column-gap: 			1em;
   -moz-column-gap: 			1em;
   display: 					grid;
   -moz-display: 				grid;
   grid-template-columns: 		repeat(auto-fit, minmax(var(--mywidth),1fr));
   -moz-grid-template-columns: 	repeat(auto-fit, minmax(var(--mywidth),1fr));
   margin-top: 					2em;
   margin-left: 				inherit;
   margin-right: 				inherit;
   margin-bottom: 				2em;
}

.columns .image-grid .card {
   margin: 0;
}

.columns .image-grid .card img {
   width: 		100%;
   height: 		auto;
}

.columns .quote {
   padding-left: 	30px;
   font-weight: 	bold;
   font-style: 		italic;
}

.columns .quote,h1,h2,ul,ol,table,figure {
   -webkit-column-break-inside: 	avoid;
   -page-break-inside: 				avoid;
   -break-inside: 					avoid;
}

/*  CNJ/210120 - Overrides for our ImgHndlr Plugin */


/* CNJ/210320 Experiments with article index*/
.nav-tabs > li > a {
	line-height: 					10px;
}

ul.nav.nav-tabs.nav-stacked {
	margin-top: 	0;
}
.article-index {
	max-width: 		20%;
	font-size: 		0.9rem;
}

.cnjtablecontainer {
  overflow-x: 		auto;
}

.cnjtablecontainer table, .cnjtablecontainer th, .cnjtablecontainer td {
  border: 			solid var(--mydarkblue); 
  padding: 			2px;
  text-align: 		left;
}

/* Hide "Featured" badge - ref https://www.joomshaper.com/documentation/helix-framework/customization-tips */
.article-list .article .featured-article-badge { display: none; visibility: hidden;}
.featured-article-badge { display: none; visibility: hidden;}

/* CNJ 25.11.17 I have moved social share to the bottom of the article. Make space above smaller */
.article-ratings-social-share {
	padding 0 0;
}


/* Make article social share buttons larger and colorize them */
.social-share-icon ul li a {
    font-size: 	32px !important; /* Adjust the size as needed (e.g., 20px, 30px) */
    width: 		auto !important; /* Ensures the icon container adjusts to the size */
    height: 	auto !important;	
}


/* Make social icons at the top of each page larger */
.social-icons {
	font-size: 	24px !important; /* Adjust the size as needed (e.g., 20px, 30px) */
    width: 		auto !important; /* Ensures the icon container adjusts to the size */
    height: 	auto !important;	
}
/* And assign right colors */
.fa-facebook  {
	color: 		#1877F2;
}
.fa-linkedin {
	color: 		#0077B5;
}
.fa-youtube {
	color: 		#FF0000;
}
.fa-whatsapp {
	color: 		#25D366;
}

/* .social-share-block::before {
font-weight: 		bold;
  color: 			var(--mydarkblue);
  content: 			"Klik for at dele ->";
  vertical-align: 	middle;
} */

#sp-top-bar {
	background: 	indigo;
}

h1, h2, h3, h4, h5, h6, h7, h8, .logo, .article-info, .pagenavcounter {
	color: 			var(--mydarkblue);
}

.cnj-image-center {
	display: 			flex;
	justify-content: 	center
}

/* CNJ 2025.11.03: CSS to make blog layout use CSS Grid */
.cnjcontainer {
  display: 					inline-grid;
  grid-template-columns: 	auto auto;
  /* background-color: 		dodgerblue; */
  /* padding: 				10px; */
  column-gap: 				10px;
}

.cnjcontainer div {
  /* background-color: 	#f1f1f1;
  border: 				1px var(--mydarkblue); */
  text-align: 			left;
}
.cnjcol1 {
   grid-column-start: 1
}

.cnjcol2 {
   grid-column-start: 2
}

.cnjcolall {
   grid-column-start: 1;
   grid-column-end: 3;
   margin-top: 30px;
}

/* CNJ 25.11.04 The developers did not define com-content-category-blog__children */
.cnj-category-blog-children {
	margin-top: 20px;
}

/* CNJ 25.11.04 The developers did not define com-content-category-blog__child */
.cnj-category-blog-child {
	margin-left: 20px;
}

/* CNJ 25.11.04 As recommended in https://www.joomshaper.com/documentation/helix-framework/customization-tips */
#sp-main-body {
	padding: 10px 0;
}

/* CNJ 25.11.05 Desparate attempt to give the front page slideshow a little space to to right */
.cnjslideshowck {
	margin-right: 10px;
}

/* CNJ 25.11.06 Attempt to make the page title for my categories look better. It is defined by the menu */
.page-header {
	display: 			flex;
	flex-direction: 	column;
	align-items: 		baseline;
	background-color: 	var(--mydarkblue);
	padding-left: 		20px;
	padding-bottom: 	0px;
	margin-left:		-20px;
	margin-right:		-20px;
	margin-bottom:		10px;
}
.page-header h1 {
	font-size: 2rem;
	color: var(--mysand);
}

/* CNJ 25.11.07 Use to get small flags at start of text to appear inline without use of float */
.inline-image {
	display: inline-block;
}

/* CNJ 25.11.16: Put in a little margin between contact image and mailing form */
.com-contact__thumbnail {
	margin-left: 20px;
}

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
	.article-index {
		display: none;
  }
}