/**
 * Hardcover Currently Reading - frontend styles.
 *
 * Layout is chosen in the settings and applied as a modifier class on the
 * wrapper, so the cover size that suits each layout is defined here rather
 * than left to the person installing the plugin.
 *
 * Colours and text sizes are not set here. They arrive as custom properties on
 * the wrapper, written by the plugin from the appearance settings, so an unset
 * value falls through to the active theme and the widget keeps inheriting
 * whatever the theme is already doing.
 */

.kwwd-hc {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.45;
}

.kwwd-hc:last-child {
	margin-bottom: 0;
}

.kwwd-hc-heading {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.3;
}

/* Reclaim some of the generous padding WordPress themes put on widgets. Only
   applies inside a widget, never to the shortcode in post content. */
.widget .kwwd-hc {
	margin-left: -20px;
	margin-right: -20px;
}

.kwwd-hc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kwwd-hc-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 10px;
	padding: 10px 12px;
	background: var(--kwwd-hc-card-bg, rgba(127, 127, 127, 0.07));
	border-left: var(--kwwd-hc-border-width, 3px) solid var(--kwwd-hc-border-color, #4ecdc4);
	border-radius: 6px;
}

.kwwd-hc-item:last-child {
	margin-bottom: 0;
}

.kwwd-hc-cover {
	flex: 0 0 auto;
	border-radius: 4px;
	overflow: hidden;
	background: rgba(127, 127, 127, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
}

/* Compact: a small square cover beside the text. The default. */
.kwwd-hc--compact .kwwd-hc-cover {
	width: 60px;
	height: 60px;
}

/* Side: a larger cover beside the text, still one row. */
.kwwd-hc--side .kwwd-hc-cover {
	width: 120px;
	height: 120px;
}

/* Stacked: a full width cover above the text, so the card reads as a poster. */
.kwwd-hc--stacked .kwwd-hc-item {
	display: block;
}

.kwwd-hc--stacked .kwwd-hc-cover {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin-bottom: 10px;
}

/* A browser without aspect-ratio still gets a usable full width cover
   rather than a collapsed box. */
@supports not (aspect-ratio: 1 / 1) {
	.kwwd-hc--stacked .kwwd-hc-cover {
		height: 320px;
	}
}

.kwwd-hc-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kwwd-hc-info {
	flex: 1 1 auto;
	min-width: 0;
}

.kwwd-hc-title {
	font-weight: 700;
	font-size: var(--kwwd-hc-title-size, 13px);
	line-height: 1.35;
	margin: 0 0 3px;
}

/*
 * The title colour has to survive being a link. Themes style links, and a
 * sidebar is exactly where they do it most: a theme's own "a:link",
 * ".widget a" or ".entry-content a" rule is just as specific as a single class
 * plus the element, and the theme stylesheet is printed after this one, so on a
 * tie the theme wins. Matching the real nesting of the markup puts this far
 * enough ahead of those rules that the chosen colour actually shows, and the
 * link states are listed because a theme colours :hover and :focus too.
 *
 * A linked title uses the title colour. Underlining on hover is the only cue
 * that it is a link, which is why it is kept.
 */
.kwwd-hc .kwwd-hc-info .kwwd-hc-title {
	color: var(--kwwd-hc-title-color, inherit);
}

.kwwd-hc .kwwd-hc-info .kwwd-hc-title a,
.kwwd-hc .kwwd-hc-info .kwwd-hc-title a:link,
.kwwd-hc .kwwd-hc-info .kwwd-hc-title a:visited,
.kwwd-hc .kwwd-hc-info .kwwd-hc-title a:hover,
.kwwd-hc .kwwd-hc-info .kwwd-hc-title a:focus,
.kwwd-hc .kwwd-hc-info .kwwd-hc-title a:active {
	color: var(--kwwd-hc-title-color, inherit);
}

.kwwd-hc .kwwd-hc-info .kwwd-hc-title a,
.kwwd-hc .kwwd-hc-info .kwwd-hc-title a:link,
.kwwd-hc .kwwd-hc-info .kwwd-hc-title a:visited {
	text-decoration: none;
}

.kwwd-hc .kwwd-hc-info .kwwd-hc-title a:hover,
.kwwd-hc .kwwd-hc-info .kwwd-hc-title a:focus {
	text-decoration: underline;
}

.kwwd-hc-author {
	font-size: var(--kwwd-hc-author-size, 11px);
	color: var(--kwwd-hc-author-color, inherit);
	opacity: var(--kwwd-hc-author-dim, 0.7);
	margin: 0 0 7px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kwwd-hc-bar {
	width: 100%;
	height: 5px;
	background: rgba(127, 127, 127, 0.2);
	border-radius: 3px;
	overflow: hidden;
	margin: 0 0 4px;
}

.kwwd-hc-fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--kwwd-hc-bar-color, linear-gradient(90deg, #4ecdc4, #00d4aa));
	border-radius: 3px;
}

.kwwd-hc-meta {
	font-size: var(--kwwd-hc-meta-size, 11px);
	color: var(--kwwd-hc-meta-color, inherit);
	opacity: var(--kwwd-hc-meta-dim, 0.65);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kwwd-hc-empty {
	margin: 0;
	font-size: 12px;
	opacity: 0.7;
	font-style: italic;
}

.kwwd-hc-error {
	margin: 0;
	font-size: 12px;
	color: #d63638;
}

/* Cover failed to load: drop the placeholder box so the row does not
   reserve dead space. */
.kwwd-hc-cover--empty:empty {
	display: none;
}

@media screen and (max-width: 480px) {
	.kwwd-hc-item {
		gap: 10px;
		padding: 9px 10px;
	}

	/* A 120px cover leaves too little room for the text on a narrow screen. */
	.kwwd-hc--side .kwwd-hc-cover {
		width: 84px;
		height: 84px;
	}
}