/*
 * Digi24-like overrides
 *
 * IMPORTANT: This stylesheet is enqueued AFTER main.css + responsive.css,
 * so it can override the theme's global aspect-ratio cropping rules.
 */

:root {
	--p376: #84BD00; /* Pantone 376 */
}

/*
 * HERO (first post on homepage loop)
 *
 * The theme enforces an aspect-ratio box for ALL `article figure.post-thumb-wrap`
 * and then absolutely positions the image with object-fit: cover.
 * That crops images. For the HERO we want the FULL image, uncropped.
 */
.home-loop-hero figure.post-thumb-wrap {
	padding-bottom: 0 !important;
	height: auto !important;
	overflow: visible !important;
}

.home-loop-hero figure.post-thumb-wrap a {
	display: block;
}

.home-loop-hero figure.post-thumb-wrap img {
	position: static !important;
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: unset !important;
	object-position: initial !important;
	transform: none !important;
	top: auto !important;
	left: auto !important;
	display: block;
}

/* Category inline marker (Pantone 376) */
.post-category-inline:before {
	background: var(--p376);
}

/* Hide category labels that the theme overlays on thumbnails (keep only inline category above title) */
.post-thumb-wrap .post-categories,
.post-thumb .post-categories,
.post-categories.post-cat-wrap {
	display: none !important;
}

/* Full-width widget zones placed where "You May Have Missed" used to be */
.above-bottom-full-width-section .above-bottom-full-width-zone {
	width: 100%;
}
.above-bottom-full-width-section .row{
	flex-wrap: wrap;
}
.above-bottom-full-width-section .above-bottom-full-width-zone + .above-bottom-full-width-zone{
	margin-top: 14px;
}


/* Make post titles in these zones smaller (match "You May Have Missed" feel) */
.above-bottom-full-width-zone .newsmatic-latest-category-grid .post-title {
	font-size: calc(var(--post-title-size) * 0.83);
	line-height: 1.45;
	margin: 10px 0 0;
}

/* Single: categories row with share buttons */
.newsmatic-cat-share-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.newsmatic-cat-share-row .post-categories {
	margin: 0;
}

.newsmatic-share-top {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.newsmatic-share-top a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: rgba(0,0,0,.06);
	text-decoration: none;
}

.newsmatic-share-top a:hover {
	background: rgba(0,0,0,.12);
}

.newsmatic-share-top svg {
	width: 16px;
	height: 16px;
	display: block;
}


/* Utility classes (lightweight, for the Cotidianul-like share markup) */
.d-flex{display:flex !important;}
.align-items-center{align-items:center !important;}
.justify-content-center{justify-content:center !important;}
.ms-auto{margin-left:auto !important;}
.mb-1{margin-bottom:.25rem !important;}

/* Cotidianul-like share buttons (Cotidianul markup, adaptive to Newsmatic dark mode) */
:root{
	--share-icon:#111;
	--share-border:#111;
	--share-bg:transparent;
	--share-hover-bg:rgba(0,0,0,.04);
}
body.newsmatic_dark_mode{
	--share-icon:#fff;
	--share-border:rgba(255,255,255,.72);
	--share-bg:transparent;
	--share-hover-bg:rgba(255,255,255,.08);
}

/* Keep them black on white (default) and invert in dark mode, without forcing a white tile background */
.single-post .box-share{gap:8px;}
.single-post .box-share button.share{
	border: 1px solid var(--share-border) !important;
	background: var(--share-bg) !important;
	color: var(--share-icon) !important;
	padding: 0 !important;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
}

.single-post .box-share button.share .icon{display:inline-flex !important; line-height:0;}
.single-post .box-share button.share svg{width:16px !important; height:16px !important; display:block !important;}
.single-post .box-share button.share svg,
.single-post .box-share button.share svg path{fill: currentColor !important;}

.single-post .box-share button.share:hover{background: var(--share-hover-bg) !important;}
.single-post .box-share button.share:focus{outline:2px solid rgba(0,0,0,.3); outline-offset:2px;}
body.newsmatic_dark_mode .single-post .box-share button.share:focus{outline-color: rgba(255,255,255,.35);}

/* Stop blinking icon on header custom button */
.header-custom-button .icon i{
	-webkit-animation: none !important;
	animation: none !important;
	-webkit-animation-name: none !important;
	-webkit-animation-duration: 0s !important;
	-webkit-animation-iteration-count: 0 !important;
	-webkit-animation-timing-function: initial !important;
	-webkit-animation-direction: initial !important;
	text-decoration: none !important;
}