/* =============================================================================
   MACRAE'S — INSIGHTS ARCHIVE PAGE STYLES
   File:  /wp-content/themes/agenriver/assets/css/insights-archive.css
   Enqueue this in functions.php  OR  paste into the bottom of style.css

   ★ UPDATE THESE FOUR VARIABLES to match your Elementor Global Colors:
     Elementor → Site Settings → Global Colors → copy the hex values here
   ============================================================================= */
:root {
	--mac-primary : #0d2b57;   /* deep navy   — Elementor "Primary"   */
	--mac-accent  : #1a6fc4;   /* bright blue — Elementor "Accent"    */
	--mac-dark    : #1e293b;   /* body text                           */
	--mac-grey    : #64748b;   /* secondary / meta text               */
	--mac-light   : #f1f5f9;   /* light grey bg                       */
	--mac-border  : #e2e8f0;   /* dividers / borders                  */
	--mac-white   : #ffffff;
}


/* =============================================================================
   1.  SECTION LABELS  (.ag-section-label · .brd_title)
   ============================================================================= */
.ag-featured-section .brd_title,
.ag-popular-section  .brd_title,
.ag-section-label {
	display         : inline-block;
	font-size       : 25px;
	text-transform  : uppercase;
	color           : white;
	font-family: Inter !important;
    font-weight: 700 !important;
	padding-bottom  : 8px;
	border-bottom   : 2px solid var(--mac-accent);
	margin-bottom   : 28px;
}

.post-type-archive-insight .agt-blog-feed-section {
	background:transparent;
}

.post-type-archive-insight h3.blog_title {
    font-size: 20px !important;
    padding-bottom: 81px !important;
}
/* =============================================================================
   2.  FEATURED SECTION WRAPPER
   ============================================================================= */
.ag-featured-section {
	margin-bottom : 12px;
}


/* =============================================================================
   3.  FEATURED CARD
   ============================================================================= */
.ag-featured-card {
	display        : flex;
	flex-direction : column;
	background     : var(--mac-white);
	border-radius  : 8px;
	overflow       : hidden;
	box-shadow     : 0 2px 20px rgba(13, 43, 87, .08);
	transition     : box-shadow .25s ease, transform .25s ease;
}

.ag-featured-card:hover {
	box-shadow : 0 8px 32px rgba(13, 43, 87, .16);
	transform  : translateY(-3px);
}

/* ── Image wrap ──────────────────────────────────────────────────────────────── */
.ag-featured-card__image-wrap {
	position   : relative;
	overflow   : hidden;
	line-height: 0;
	flex-shrink: 0;
}

.ag-featured-card__image-wrap img {
	width      : 100%;
	height     : 360px;
	object-fit : cover;
	object-position: top;
	display    : block;
	transition : transform .4s ease;
}

.ag-featured-card:hover .ag-featured-card__image-wrap img {
	transform : scale(1.04);
}

/* Fallback placeholder when no thumbnail set */
.ag-featured-card__no-img {
	width       : 100%;
	height      : 360px;
	background  : linear-gradient(135deg, var(--mac-primary) 0%, var(--mac-accent) 100%);
}

/* Category badge overlaid on image */
.ag-featured-card__cat {
	position        : absolute;
	top             : 16px;
	left            : 16px;
	background      : var(--mac-primary);
	color           : var(--mac-white);
	font-size       : 10px;
	font-weight     : 700;
	letter-spacing  : 1.5px;
	text-transform  : uppercase;
	padding         : 4px 12px;
	border-radius   : 20px;
	text-decoration : none;
	transition      : background .2s ease;
	z-index         : 1;
}

.ag-featured-card__cat:hover {
	background : var(--mac-accent);
	color      : var(--mac-white);
}


/* ── Content area ────────────────────────────────────────────────────────────── */
.ag-featured-card__content {
	padding : 28px 30px 32px;
}

.single-insight .agt-blog-dt-text {
    background: white;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, .16) 0px 4px 48px;
    padding: 39px;
    border-radius: 0px 0px 15px 15px;
    margin-top: -4px;
    background-color: #fff;
}

.single-insight .egs {
    background: #ecf7ff;
    padding: 20px;
}

.single-insight .agt-blog-dt-text img {
    margin-top: 30px;
    margin-bottom: 30px;
}

.single-insight .egs-author {
    padding: 30px 20px;
    background: #0086e73d;
    font-style: italic;
    margin-top: 20px;
    margin-bottom: 20px;
}

.agt-blog-dt-text h3 {
    color: #0086e7 !important;
    text-align: left !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    margin-bottom: .5rem !important;
    margin-top: 1.5rem !important;
    font-size: 22px !important;
}

.single-insight .agt-blog-dt-text {
    background: white;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, .16) 0px 4px 48px;
    padding: 39px;
    border-radius: 0px 0px 15px 15px;
    margin-top: -4px;
    background-color: #fff;
}

.ag-ins-cat-header__title {
	font-size:40px;
}

/* ── Date block ──────────────────────────────────────────────────────────────── */
.ag-featured-card__date {
	display     : flex;
	align-items : center;
	gap         : 12px;
	margin-bottom: 12px;
}

.ag-featured-card__date-day {
	font-size   : 54px;
	font-weight : 800;
	color       : var(--mac-primary);
	line-height : 1;
	letter-spacing: -2px;
}

.ag-featured-card__date-meta {
	display         : flex;
	flex-direction  : column;
	gap             : 2px;
	padding-left    : 10px;
	border-left     : 3px solid var(--mac-accent);
}

.ag-featured-card__date-month {
	font-size      : 13px;
	font-weight    : 700;
	color          : var(--mac-accent);
	text-transform : uppercase;
	letter-spacing : 1px;
	line-height    : 1.2;
}

.ag-featured-card__date-year {
	font-size   : 12px;
	font-weight : 500;
	color       : var(--mac-grey);
	line-height : 1.2;
}


/* ── Accent rule ─────────────────────────────────────────────────────────────── */
.ag-featured-card__rule {
	width         : 48px;
	height        : 3px;
	background    : var(--mac-accent);
	border-radius : 2px;
	margin-bottom : 16px;
}


/* ── Title ───────────────────────────────────────────────────────────────────── */
.ag-featured-card__title {
	font-size   : clamp(18px, 2vw, 23px);
	font-weight : 700;
	color       : var(--mac-primary);
	margin      : 0 0 12px;
	line-height : 1.35;
}

.ag-featured-card__title a {
	color           : inherit;
	text-decoration : none;
	transition      : color .2s ease;
}

.ag-featured-card__title a:hover {
	color : var(--mac-accent);
}


/* ── Excerpt ─────────────────────────────────────────────────────────────────── */
.ag-featured-card__excerpt {
	font-size     : 15px;
	color         : var(--mac-grey);
	line-height   : 1.75;
	margin-bottom : 22px;
}


/* ── Read More link ──────────────────────────────────────────────────────────── */
.ag-featured-card__link {
	display         : inline-flex;
	align-items     : center;
	gap             : 6px;
	font-size       : 13px;
	font-weight     : 700;
	color           : var(--mac-primary);
	text-decoration : none;
	letter-spacing  : .3px;
	border-bottom   : 2px solid transparent;
	padding-bottom  : 2px;
	transition      : color .2s ease, border-color .2s ease;
}

.ag-featured-card__link::after {
	content    : '→';
	font-size  : 15px;
	transition : transform .2s ease;
}

.ag-featured-card__link:hover {
	color        : var(--mac-accent);
	border-color : var(--mac-accent);
}

.ag-featured-card__link:hover::after {
	transform : translateX(4px);
}


/* ── Insights Category Filter Tabs ─────────────────────────── */
.ag-ins-tabs-wrap {
    background: #0086e7;
    border-top: 1px solid #e4e4ef;
    border-bottom: 1px solid #e4e4ef;
/*     position: sticky; */
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(26, 26, 46, 0.06);
}

.ag-ins-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 0;
}

.ag-ins-tab {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #4a4a6a;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1.5px solid #e4e4ef;
    background: #fff;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
    user-select: none;
    line-height: 1.4;
}

.ag-ins-tab:hover {
    color: black;
    border-color: black;
    background: rgba(224, 90, 30, 0.05);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(224, 90, 30, 0.12);
}

.ag-ins-tab--active {
 color: black !important;
    background: #ffd851 !important;
    border-color: #ffd851 !important;
    box-shadow: 0 3px 12px rgba(224, 90, 30, 0.28);
    text-decoration: none;
}

/* Mobile: scroll horizontally if tabs overflow */
@media (max-width: 768px) {
    .ag-ins-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 4px;
    }
    .ag-ins-tabs::-webkit-scrollbar { display: none; }
}

/* =============================================================================
   4.  POPULAR INSIGHTS SECTION
   ============================================================================= */
.ag-popular-section {
	padding-top    : 20px;
	padding-bottom : 60px;
}

/* Make ag-popular-section full-width when it's a direct child of .row */
.row > .ag-popular-section {
	flex      : 0 0 100%;
	max-width : 100%;
	width     : 100%;
}

.ag-popular-section .ag-blog-list-item-wrap {
	margin-top : 4px;
}

.post-type-archive-insight .gt-blog-list-item {   
	padding: 0;
    border-radius: 10px;
    overflow: hidden;
    height: 100%;
    border: 2px solid #fff;
    background-color: #fff !important;
    position: relative;
    opacity: 1;
    background-image: none !important;
}

.ag-ins-cat-section {
	color:white!important;
	    margin-top: 40px;
    margin-bottom: 40px;
}

/* =============================================================================
   5.  INSIGHT SIDEBAR + WIDGET
   ============================================================================= */

/* Column padding offset for sidebar */
@media (min-width: 992px) {
	#ag-blog-list .col-xxl-8 + .col-xxl-4,
	#ag-blog-list .col-xl-8  + .col-xl-4,
	#ag-blog-list .col-lg-8  + .col-lg-4 {
		padding-left : 10px;
	}
}


.widget_ag_recent_insights {
	    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px !important;
    border: 3px solid rgba(255, 255, 255, 84%);
}

.widget_ag_recent_insights h2 {
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 15px;
}

/* Every widget in the insight sidebar */
#insight-sidebar .widget {
	background    : var(--mac-white);
	border        : 1px solid var(--mac-border);
	border-top    : 3px solid var(--mac-accent);
	border-radius : 6px;
	padding       : 22px 20px 20px;
	margin-bottom : 28px;
}

/* Widget title rendered by register_sidebar before_title / after_title */
#insight-sidebar .ag-sidebar-label {
	font-size      : 10px;
	font-weight    : 700;
	letter-spacing : 2.5px;
	text-transform : uppercase;
	color          : var(--mac-grey);
	margin         : 0 0 16px;
	padding-bottom : 12px;
	border-bottom  : 1px solid var(--mac-border);
}

/* ── Recent Insights widget list ─────────────────────────────────────────────── */
.ag-recent-insights-list {
	list-style : none;
	margin     : 0;
	padding    : 0;
}

.ag-recent-insights-list li {
	display       : flex;
	gap           : 12px;
	align-items   : flex-start;
	padding       : 11px 0;
	border-bottom : 1px solid var(--mac-border);
}

.ag-recent-insights-list li:first-child {
	padding-top : 0;
}

.ag-recent-insights-list li:last-child {
	border-bottom : none;
	padding-bottom: 0;
}

/* thumbnail */
.ag-ri-thumb {
	flex-shrink : 0;
}

.ag-ri-thumb a {
	display       : block;
	border-radius : 4px;
	overflow      : hidden;
	line-height   : 0;
}

.ag-ri-thumb img {
	width      : 72px;
	height     : 54px;
	object-fit : cover;
	display    : block;
	transition : transform .3s ease;
}

.ag-ri-thumb a:hover img {
	transform : scale(1.06);
}

/* text */
.ag-ri-info {
	display        : flex;
	flex-direction : column;
	gap            : 4px;
	min-width      : 0;
}

.ag-ri-title {
	font-size       : 13px;
	font-weight     : 600;
	color           : var(--mac-primary);
	text-decoration : none;
	line-height     : 1.4;
	display         : -webkit-box;
	-webkit-line-clamp   : 2;
	-webkit-box-orient   : vertical;
	overflow        : hidden;
	transition      : color .2s ease;
}

.ag-ri-title:hover {
	color : var(--mac-accent);
}

.ag-ri-date {
	font-size   : 11px;
	font-weight : 500;
	color       : var(--mac-accent);
	white-space : nowrap;
}


/* =============================================================================
   6.  RESPONSIVE TWEAKS
   ============================================================================= */
@media (max-width: 1199px) {
	.ag-featured-card__date-day  { font-size: 44px; }
	.ag-featured-card__content   { padding: 24px 26px 28px; }
}

@media (max-width: 991px) {
	.ag-featured-card__image-wrap img,
	.ag-featured-card__no-img    { height: 260px; }
	.ag-featured-card__content   { padding: 20px 20px 24px; }
	.ag-featured-card__date-day  { font-size: 40px; }
}

@media (max-width: 767px) {
	.ag-featured-card__image-wrap img,
	.ag-featured-card__no-img    { height: 200px; }
	.ag-featured-card__title     { font-size: 17px; }
	.ag-featured-card__excerpt   { font-size: 14px; }
}



/* ── TOC wrapper ──────────────────────────────────────────── */
.ag-toc {
    background: #f7f7fb;
    border: 1px solid #e4e4ef;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 28px;
}
 
.ag-toc {
    position: relative !important;
}

.col-lg-3.agt-blog-sidebar,
aside.agt-blog-sidebar {
    position: relative;
}

/* ── Header row ───────────────────────────────────────────── */
.ag-toc__header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 22px;
    font-weight: 700;
    color: #3b3b3b;
    padding: 14px 18px;
    background: #fff;
    border-bottom: 1px solid #e4e4ef;
}
.ag-toc__header svg {
    flex-shrink: 0;
    color: black;
}
 
/* ── Nav list ─────────────────────────────────────────────── */
.ag-toc__nav {
    padding: 10px 0;
    max-height: 65vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #0086e7 transparent;
}
.ag-toc__nav::-webkit-scrollbar       { width: 4px; }
.ag-toc__nav::-webkit-scrollbar-track { background: transparent; }
.ag-toc__nav::-webkit-scrollbar-thumb { background: #e4e4ef; border-radius: 4px; }
 
.ag-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: toc-counter;
}
 
/* ── Each item ────────────────────────────────────────────── */
.ag-toc__item {
    counter-increment: toc-counter;
    border-left: 3px solid transparent;
    transition: border-color 0.18s;
}
.ag-toc__item--sub {
    /* H3 indented */
    padding-left: 14px;
}
 
/* ── Link ─────────────────────────────────────────────────── */
.ag-toc__link {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 7px 18px 7px 16px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #4a4a6a;
    text-decoration: none;
    line-height: 1.45;
    transition: color 0.18s, background 0.18s;
    position: relative;
}
 
/* counter number */
.ag-toc__item:not(.ag-toc__item--sub) .ag-toc__link::before {
    content: counter(toc-counter) ".";
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #b0b0c8;
    min-width: 18px;
    transition: color 0.18s;
}
 
/* H3 sub-items get a dash instead */
.ag-toc__item--sub .ag-toc__link::before {
    content: "—";
    flex-shrink: 0;
    font-size: 0.7rem;
    color: #d0d0e0;
    min-width: 18px;
}
 
.ag-toc__link:hover {
color: #000000;
    /* background: rgb(0 134 231); */
    text-decoration: none;
    border-radius: 10px;
}
.ag-toc__link:hover::before {
    color: #e05a1e;
}
 
/* ── Active state (scroll spy) ────────────────────────────── */
.ag-toc__item:has(.ag-toc__link--active) {
    border-left-color: #e05a1e;
}
.ag-toc__link--active {
    color: #e05a1e !important;
    font-weight: 700;
    background: rgba(224, 90, 30, 0.07);
}
.ag-toc__link--active::before {
    color: #e05a1e !important;
}
 
/* Fallback for browsers without :has() support */
.ag-toc__link--active {
    border-left: 3px solid #e05a1e;
    margin-left: -3px;
}