/* ============================================================
   Journalister — frontend.css  v1.0.7
   
   ISOLATION STRATEGY:
   Every rule is prefixed .jnl-feed-wrap to raise specificity above
   theme rules. Key layout/typography properties use !important on
   the elements themes most commonly override (h3, p, a, ul, li).
   The wrapper itself uses all:revert to strip inherited theme styles
   then re-declares only what we need.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800&display=swap');

/* ============================================================
   WRAPPER — strip all inherited theme styles, rebuild from scratch
   ============================================================ */
.jnl-feed-wrap {
	/* CSS custom properties — all overridable via Settings → Appearance */
	--jnl-font:              'Libre Franklin', Georgia, serif;
	--jnl-font-sz:           16px;
	--jnl-title-sz:          19px;
	--jnl-title-fw:          700;
	--jnl-lh:                1.7;
	--jnl-ink:               #1a1a1a;
	--jnl-ink-mid:           #333333;
	--jnl-ink-muted:         #666666;
	--jnl-ink-faint:         #999999;
	--jnl-link-color:        #1d6fe5;
	--jnl-border:            #e8e8e8;
	--jnl-bg:                #ffffff;
	--jnl-bg-alt:            #f8f8f8;
	--jnl-orange:            #ff6600;
	--jnl-orange-glow:       rgba(255,102,0,.25);
	--jnl-live-red:          #e5182a;
	--jnl-pinned-color:      #d97706;
	--jnl-badge-breaking-bg:   var(--jnl-live-red);
	--jnl-badge-breaking-text: #ffffff;
	--jnl-badge-pinned-bg:     var(--jnl-pinned-color);
	--jnl-badge-pinned-text:   #ffffff;
	--jnl-badge-update-bg:     #ccfbf1;
	--jnl-badge-update-text:   #0f766e;
	--jnl-radius:            8px;
	--jnl-card-border:       1px solid #e8e8e8;
	--jnl-card-pad:          20px;
	--jnl-card-shadow:       none;
	--jnl-dot-sz:            16px;

	/* Reset ALL inherited properties so the theme can't bleed in */
	all:             revert;

	/* Now re-declare exactly what we want */
	display:         block !important;
	font-family:     var(--jnl-font) !important;
	font-size:       var(--jnl-font-sz) !important;
	font-weight:     400 !important;
	line-height:     var(--jnl-lh) !important;
	color:           var(--jnl-ink) !important;
	background:      transparent !important;
	margin:          0 !important;
	padding:         0 !important;
	border:          none !important;
	max-width:       100% !important;
	box-sizing:      border-box;
	-webkit-text-size-adjust: 100%;
}

/* Box-sizing on every descendant */
.jnl-feed-wrap *,
.jnl-feed-wrap *::before,
.jnl-feed-wrap *::after {
	box-sizing: border-box !important;
}

/* ============================================================
   FEED BAR
   ============================================================ */
.jnl-feed-wrap .jnl-feed-bar {
	display:         flex !important;
	align-items:     center !important;
	justify-content: space-between !important;
	padding:         .875rem 0 !important;
	margin:          0 0 1.25rem 0 !important;
	border:          none !important;
	border-bottom:   1px solid var(--jnl-border) !important;
	flex-wrap:       wrap !important;
	gap:             .5rem !important;
	background:      transparent !important;
	list-style:      none !important;
}

.jnl-feed-wrap .jnl-feed-bar__count {
	font-size:   1rem !important;
	font-family: var(--jnl-font) !important;
	font-weight: 400 !important;
	color:       var(--jnl-ink) !important;
	margin:      0 !important;
	padding:     0 !important;
	line-height: 1.4 !important;
}

.jnl-feed-wrap .jnl-feed-bar__count strong {
	font-weight: 700 !important;
	color:       var(--jnl-ink) !important;
}

/* Auto-updates toggle */
.jnl-feed-wrap .jnl-auto-toggle {
	display:     inline-flex !important;
	align-items: center !important;
	gap:         .625rem !important;
	cursor:      pointer !important;
	user-select: none !important;
	margin:      0 !important;
	padding:     0 !important;
}

.jnl-feed-wrap .jnl-auto-toggle__label {
	font-size:   .9375rem !important;
	font-weight: 600 !important;
	font-family: var(--jnl-font) !important;
	color:       var(--jnl-ink) !important;
	margin:      0 !important;
	padding:     0 !important;
}

.jnl-feed-wrap .jnl-toggle--fe .jnl-toggle__input {
	position: absolute !important;
	opacity:  0 !important;
	width:    0 !important;
	height:   0 !important;
	margin:   0 !important;
	padding:  0 !important;
}

.jnl-feed-wrap .jnl-toggle--fe .jnl-toggle__track {
	position:      relative !important;
	display:       inline-block !important;
	width:         48px !important;
	height:        26px !important;
	background:    #cccccc !important;
	border-radius: 99px !important;
	border:        none !important;
	transition:    background .2s !important;
	flex-shrink:   0 !important;
	margin:        0 !important;
	padding:       0 !important;
}

.jnl-feed-wrap .jnl-toggle--fe .jnl-toggle__track::after {
	content:       '' !important;
	position:      absolute !important;
	top:           3px !important;
	left:          3px !important;
	width:         20px !important;
	height:        20px !important;
	border-radius: 50% !important;
	background:    #ffffff !important;
	border:        none !important;
	transition:    transform .2s !important;
	box-shadow:    0 1px 3px rgba(0,0,0,.25) !important;
}

.jnl-feed-wrap .jnl-toggle--fe .jnl-toggle__input:checked + .jnl-toggle__track {
	background: var(--jnl-orange) !important;
}

.jnl-feed-wrap .jnl-toggle--fe .jnl-toggle__input:checked + .jnl-toggle__track::after {
	transform: translateX(22px) !important;
}

/* ============================================================
   STREAM
   ============================================================ */
.jnl-feed-wrap .jnl-stream {
	display:        flex !important;
	flex-direction: column !important;
	gap:            0 !important;
	position:       relative !important;
	margin:         0 !important;
	padding:        0 !important;
	list-style:     none !important;
	border:         none !important;
	background:     transparent !important;
}

.jnl-feed-wrap .jnl-stream__empty {
	text-align:  center !important;
	color:       var(--jnl-ink-faint) !important;
	font-size:   .9rem !important;
	font-family: var(--jnl-font) !important;
	padding:     2.5rem 1rem !important;
	margin:      0 !important;
}

/* ============================================================
   ENTRY
   ============================================================ */
.jnl-feed-wrap .jnl-entry {
	display:       flex !important;
	gap:           0 !important;
	padding:       1rem 0 2rem 0 !important;
	margin:        0 !important;
	position:      relative !important;
	border:        none !important;
	border-bottom: 1px solid var(--jnl-border) !important;
	background:    transparent !important;
	list-style:    none !important;
}

.jnl-feed-wrap .jnl-entry:last-child {
	border-bottom:  none !important;
	padding-bottom: .5rem !important;
}

/* Timeline dot column */
.jnl-feed-wrap .jnl-entry__dot-col {
	width:          52px !important;
	flex-shrink:    0 !important;
	display:        flex !important;
	justify-content: center !important;
	padding-top:    .1rem !important;
	padding-bottom: 0 !important;
	padding-left:   0 !important;
	padding-right:  0 !important;
	margin:         0 !important;
	position:       relative !important;
	background:     transparent !important;
}

/* Vertical line */
.jnl-feed-wrap .jnl-entry:not(:last-child) .jnl-entry__dot-col::after {
	content:    '' !important;
	position:   absolute !important;
	top:        calc(.1rem + var(--jnl-dot-sz) + 6px) !important;
	left:       50% !important;
	transform:  translateX(-50%) !important;
	width:      2px !important;
	bottom:     -1rem !important;
	background: var(--jnl-border) !important;
	border:     none !important;
}

/* Timeline dot */
.jnl-feed-wrap .jnl-entry__dot {
	width:         var(--jnl-dot-sz) !important;
	height:        var(--jnl-dot-sz) !important;
	border-radius: 50% !important;
	border:        2.5px solid var(--jnl-orange) !important;
	background:    var(--jnl-orange) !important;
	position:      relative !important;
	flex-shrink:   0 !important;
	z-index:       1 !important;
	margin:        0 !important;
	padding:       0 !important;
	display:       block !important;
}

/* Pulse ring on first/latest entry */
.jnl-feed-wrap .jnl-entry:first-child .jnl-entry__dot::before {
	content:       '' !important;
	position:      absolute !important;
	inset:         -5px !important;
	border-radius: 50% !important;
	background:    var(--jnl-orange-glow) !important;
	border:        none !important;
	animation:     jnl-ring-pulse 1.8s ease-in-out infinite !important;
}

@keyframes jnl-ring-pulse {
	0%,100% { opacity:1; transform:scale(1); }
	50%      { opacity:.3; transform:scale(1.4); }
}

.jnl-feed-wrap .jnl-entry__dot--breaking {
	border-color: var(--jnl-live-red) !important;
	background:   var(--jnl-live-red) !important;
}

.jnl-feed-wrap .jnl-entry__dot--pinned {
	border-color: var(--jnl-pinned-color) !important;
	background:   var(--jnl-pinned-color) !important;
}

.jnl-feed-wrap .jnl-entry:first-child .jnl-entry__dot--breaking::before {
	background: rgba(229,24,42,.2) !important;
}

/* Main content column */
.jnl-feed-wrap .jnl-entry__main {
	flex:       1 !important;
	min-width:  0 !important;
	margin:     0 !important;
	padding:    0 !important;
	background: transparent !important;
	border:     none !important;
}

/* ============================================================
   TIMESTAMP / META ROW
   ============================================================ */
.jnl-feed-wrap .jnl-entry__meta-row {
	display:     flex !important;
	flex-wrap:   wrap !important;
	align-items: center !important;
	gap:         .2em .75em !important;
	margin:      0 0 .75rem 0 !important;
	padding:     0 !important;
	font-size:   .875rem !important;
	font-family: var(--jnl-font) !important;
	color:       var(--jnl-ink-muted) !important;
	line-height: 1.4 !important;
	list-style:  none !important;
	background:  transparent !important;
	border:      none !important;
}

.jnl-feed-wrap .jnl-entry__time {
	font-weight: 700 !important;
	font-size:   .875rem !important;
	font-family: var(--jnl-font) !important;
	color:       var(--jnl-ink) !important;
	margin:      0 !important;
	padding:     0 !important;
	line-height: 1.4 !important;
}

.jnl-feed-wrap .jnl-entry__gmt {
	font-weight: 400 !important;
	color:       var(--jnl-ink-muted) !important;
}

.jnl-feed-wrap .jnl-entry__author {
	font-size:   .875rem !important;
	font-family: var(--jnl-font) !important;
	color:       var(--jnl-ink-muted) !important;
	margin:      0 !important;
	padding:     0 !important;
}

.jnl-feed-wrap .jnl-entry__author::before {
	content: '· ' !important;
}

.jnl-feed-wrap .jnl-entry__source {
	font-size:      .875rem !important;
	font-family:    var(--jnl-font) !important;
	color:          var(--jnl-link-color) !important;
	text-decoration: none !important;
	font-weight:    500 !important;
	margin:         0 !important;
	padding:        0 !important;
	background:     transparent !important;
	border:         none !important;
	transition:     color .15s !important;
}

.jnl-feed-wrap .jnl-entry__source::before {
	content: '· ' !important;
	color: var(--jnl-ink-muted) !important;
}

.jnl-feed-wrap .jnl-entry__source:hover,
.jnl-feed-wrap .jnl-entry__source:focus {
	color:           var(--jnl-live-red) !important;
	text-decoration: underline !important;
}

/* ============================================================
   CARD
   ============================================================ */
.jnl-feed-wrap .jnl-entry__card {
	background:    var(--jnl-bg) !important;
	border:        var(--jnl-card-border) !important;
	border-radius: var(--jnl-radius) !important;
	padding:       var(--jnl-card-pad) !important;
	box-shadow:    var(--jnl-card-shadow) !important;
	margin:        0 !important;
}

.jnl-feed-wrap .jnl-entry--breaking .jnl-entry__card {
	border-left: 3.5px solid var(--jnl-live-red) !important;
}

.jnl-feed-wrap .jnl-entry--pinned .jnl-entry__card {
	border-left: 3.5px solid var(--jnl-pinned-color) !important;
}

/* ============================================================
   BADGE
   ============================================================ */
.jnl-feed-wrap .jnl-entry__badge {
	display:        inline-flex !important;
	align-items:    center !important;
	gap:            .3em !important;
	font-family:    var(--jnl-font) !important;
	font-size:      .75rem !important;
	font-weight:    700 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	padding:        .3em .75em !important;
	border-radius:  99px !important;
	margin:         0 0 .75rem 0 !important;
	line-height:    1.4 !important;
	border:         none !important;
	text-decoration: none !important;
}

.jnl-feed-wrap .jnl-entry__badge--breaking {
	background: var(--jnl-badge-breaking-bg) !important;
	color:      var(--jnl-badge-breaking-text) !important;
}

.jnl-feed-wrap .jnl-entry__badge--pinned {
	background: var(--jnl-badge-pinned-bg) !important;
	color:      var(--jnl-badge-pinned-text) !important;
}

.jnl-feed-wrap .jnl-entry__badge--update {
	background: var(--jnl-badge-update-bg) !important;
	color:      var(--jnl-badge-update-text) !important;
}

/* ============================================================
   HEADLINE  — h3 gets heavy theme overrides, fight back hard
   ============================================================ */
.jnl-feed-wrap .jnl-entry__title,
.jnl-feed-wrap h3.jnl-entry__title {
	font-family:    var(--jnl-font) !important;
	font-size:      var(--jnl-title-sz) !important;
	font-weight:    var(--jnl-title-fw) !important;
	line-height:    1.35 !important;
	color:          var(--jnl-ink) !important;
	margin:         0 0 .875rem 0 !important;
	padding:        0 !important;
	border:         none !important;
	background:     transparent !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
}

/* ============================================================
   BODY CONTENT — paragraphs, lists, etc.
   ============================================================ */
.jnl-feed-wrap .jnl-entry__body {
	font-family: var(--jnl-font) !important;
	font-size:   var(--jnl-font-sz) !important;
	line-height: var(--jnl-lh) !important;
	color:       var(--jnl-ink-mid) !important;
	margin:      0 !important;
	padding:     0 !important;
	border:      none !important;
	background:  transparent !important;
}

.jnl-feed-wrap .jnl-entry__body > * {
	margin-top:    0 !important;
	margin-bottom: .85em !important;
}

.jnl-feed-wrap .jnl-entry__body > *:last-child {
	margin-bottom: 0 !important;
}

/* Paragraphs */
.jnl-feed-wrap .jnl-entry__body p {
	font-size:   var(--jnl-font-sz) !important;
	font-family: var(--jnl-font) !important;
	line-height: var(--jnl-lh) !important;
	color:       var(--jnl-ink-mid) !important;
	margin:      0 0 .85em 0 !important;
	padding:     0 !important;
}

.jnl-feed-wrap .jnl-entry__body p:last-child {
	margin-bottom: 0 !important;
}

/* Links */
.jnl-feed-wrap .jnl-entry__body a {
	color:           var(--jnl-link-color) !important;
	text-decoration: underline !important;
	font-size:       inherit !important;
	font-family:     inherit !important;
	background:      transparent !important;
	border:          none !important;
	padding:         0 !important;
	transition:      color .15s !important;
}

.jnl-feed-wrap .jnl-entry__body a:hover,
.jnl-feed-wrap .jnl-entry__body a:focus {
	color: var(--jnl-live-red) !important;
}

/* Lists */
.jnl-feed-wrap .jnl-entry__body ul,
.jnl-feed-wrap .jnl-entry__body ol {
	font-size:   var(--jnl-font-sz) !important;
	font-family: var(--jnl-font) !important;
	line-height: var(--jnl-lh) !important;
	color:       var(--jnl-ink-mid) !important;
	margin:      0 0 .85em 1.5em !important;
	padding:     0 !important;
}

.jnl-feed-wrap .jnl-entry__body li {
	font-size:   var(--jnl-font-sz) !important;
	font-family: var(--jnl-font) !important;
	line-height: var(--jnl-lh) !important;
	color:       var(--jnl-ink-mid) !important;
	margin:      0 0 .35em 0 !important;
	padding:     0 !important;
}

/* Strong / em */
.jnl-feed-wrap .jnl-entry__body strong,
.jnl-feed-wrap .jnl-entry__body b {
	font-weight: 700 !important;
	color:       var(--jnl-ink) !important;
}

.jnl-feed-wrap .jnl-entry__body em,
.jnl-feed-wrap .jnl-entry__body i {
	font-style: italic !important;
}

/* Blockquote */
.jnl-feed-wrap .jnl-entry__body blockquote {
	border:      none !important;
	border-left: 3px solid var(--jnl-border) !important;
	margin:      .75em 0 !important;
	padding:     .5em 1em !important;
	color:       var(--jnl-ink-muted) !important;
	font-style:  italic !important;
	background:  transparent !important;
}

/* Images */
.jnl-feed-wrap .jnl-entry__body img {
	max-width:     100% !important;
	height:        auto !important;
	border-radius: 6px !important;
	display:       block !important;
	margin:        .5em 0 !important;
	border:        none !important;
}

/* Headings inside body */
.jnl-feed-wrap .jnl-entry__body h1,
.jnl-feed-wrap .jnl-entry__body h2,
.jnl-feed-wrap .jnl-entry__body h3,
.jnl-feed-wrap .jnl-entry__body h4,
.jnl-feed-wrap .jnl-entry__body h5,
.jnl-feed-wrap .jnl-entry__body h6 {
	font-family:  var(--jnl-font) !important;
	font-weight:  700 !important;
	color:        var(--jnl-ink) !important;
	margin:       1em 0 .4em 0 !important;
	padding:      0 !important;
	line-height:  1.3 !important;
	border:       none !important;
	background:   transparent !important;
}

/* ============================================================
   NEW ENTRY ANIMATION
   ============================================================ */
.jnl-feed-wrap .jnl-entry--new {
	animation: jnl-drop-in .35s cubic-bezier(.22,.68,0,1.2) both !important;
}

@keyframes jnl-drop-in {
	from { opacity:0; transform:translateY(-12px); }
	to   { opacity:1; transform:translateY(0); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
	.jnl-feed-wrap .jnl-entry__dot-col { width: 36px !important; }
	.jnl-feed-wrap h3.jnl-entry__title,
	.jnl-feed-wrap .jnl-entry__title   { font-size: 1rem !important; }
	.jnl-feed-wrap .jnl-entry__card    { padding: 1rem !important; }
}

/* ============================================================
   DARK MODE
   ============================================================ */
@media (prefers-color-scheme: dark) {
	.jnl-feed-wrap {
		--jnl-ink:       #e8e8e8;
		--jnl-ink-mid:   #cccccc;
		--jnl-ink-muted: #aaaaaa;
		--jnl-ink-faint: #777777;
		--jnl-border:    #2a2a2a;
		--jnl-bg:        #1a1a1a;
		--jnl-bg-alt:    #141414;
	}
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
	.jnl-feed-wrap .jnl-auto-toggle { display: none !important; }
	.jnl-feed-wrap .jnl-entry { break-inside: avoid; }
}