/**
 * favorites.css - the save control, the header badge and the favourites page.
 */

/* ── the save button ──────────────────────────────────────────────────── */
.adn-fav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 50%;
	background: #fff;
	color: var(--client-color, #203c3e);
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.adn-fav-btn:hover { background: var(--client-color, #203c3e); color: #fff; }
.adn-fav-btn:focus-visible { outline: 2px solid var(--client-color, #203c3e); outline-offset: 2px; }

.adn-fav-btn.is-saved {
	color: var(--secondary-color-dark, #7f4f07);
	border-color: rgba(176, 141, 87, .38);
	background: var(--secondary-color-light, #fffaf3);
}
.adn-fav-btn.is-saved:hover {
	background: var(--secondary-color, #B08D57);
	color: #fff;
	border-color: var(--secondary-color, #B08D57);
}
.adn-fav-btn.is-saved .adn-fav-btn__icon svg { fill: currentColor; }

/* a small pop so a tap feels acknowledged */
.adn-fav-btn.is-pop .adn-fav-btn__icon { animation: adn-fav-pop .32s ease; }
@keyframes adn-fav-pop {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.28); }
	100% { transform: scale(1); }
}

.adn-fav-btn__icon { display: flex; }

/* label variant */
.adn-fav-btn--inline {
	width: auto;
	height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
}

/* on a card */
.adn-fav-btn--card {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 34px;
	height: 34px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}

/* ── Card action buttons overlay (Favorite & Share) ───────────────────── */
.card-actions-overlay {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 6px;
	pointer-events: auto;
}

.card-actions-overlay .adn-fav-btn,
.card-actions-overlay .card-share-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(4px);
	border: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1e293b;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-actions-overlay .adn-fav-btn:hover,
.card-actions-overlay .card-share-btn:hover {
	transform: scale(1.08);
	background: #ffffff;
	color: var(--secondary-color, #B08D57);
}

.card-actions-overlay .adn-fav-btn.is-saved {
	background: var(--secondary-color, #B08D57);
	color: #ffffff;
}

.card-actions-overlay .card-share-btn svg,
.card-actions-overlay .adn-fav-btn svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
	stroke-width: 1.8;
}

.news-card {
	position: relative;
}


/* ── header link + count ──────────────────────────────────────────────── */
.adn-fav-link {
	/* colour is set by the header's own dark/scrolled rules in shared.css,
	   exactly as it is for .btn-search, so it tracks both states */
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: none;
	text-decoration: none;
	cursor: pointer;
}
.adn-fav-link svg {
	width: 19px;
	height: 19px;
	stroke: currentColor;
	stroke-width: 1.8;
	transition: transform 0.2s ease;
}
.adn-fav-link:hover svg {
	transform: scale(1.08);
}
.adn-fav-link:hover { background: rgba(0, 0, 0, .05); }
.adn-fav-link.has-items { color: var(--secondary-color, #B08D57); }
.adn-fav-link.has-items svg { fill: currentColor; }

.adn-fav-link__count {
	position: absolute;
	top: 1px;
	right: 0;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--secondary-color, #B08D57);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	box-sizing: border-box;
}

/* ── the page ─────────────────────────────────────────────────────────── */
.fav-page { padding: clamp(26px, 3.4vw, 44px) 0 clamp(36px, 4vw, 60px); }

/* The hidden attribute only wins when nothing sets display. These do, so
   they have to opt out explicitly or they stay on screen. */
.fav-toolbar[hidden],
.fav-list[hidden],
.fav-empty[hidden] { display: none !important; }

/* -- toolbar ----------------------------------------------------------- */
.fav-toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 22px;
}

.fav-search {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 380px;        /* a full-width search bar reads as an empty band */
}
.fav-search__icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: #9ca3af;
	display: flex;
	pointer-events: none;
	transition: color .15s ease;
}
.fav-search:focus-within .fav-search__icon { color: var(--client-color, #203c3e); }

.fav-search input {
	width: 100%;
	box-sizing: border-box;
	height: 42px;
	padding: 0 38px 0 40px;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--client-color, #203c3e);
	box-shadow: 0 1px 2px rgba(10, 25, 47, .04);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fav-search input::placeholder { color: #9ca3af; }
.fav-search input:focus {
	outline: none;
	border-color: var(--secondary-color, #B08D57);
	box-shadow: 0 0 0 3px rgba(176, 141, 87, .16);
}
/* the browser's own cross is blue and off-palette - we draw our own */
.fav-search input::-webkit-search-cancel-button,
.fav-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

.fav-search__clear {
	position: absolute;
	right: 7px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--color-bg-section, #f3f4f6);
	color: #6b7280;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.fav-search__clear:hover { background: var(--client-color, #203c3e); color: #fff; }
.fav-search__clear[hidden] { display: none !important; }

/* icon-only, matching the height of the field beside it */
.fav-clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 50%;
	background: #fff;
	color: var(--client-color, #203c3e);
	box-shadow: 0 1px 2px rgba(10, 25, 47, .04);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.fav-clear:hover {
	background: var(--client-color, #203c3e);
	border-color: var(--client-color, #203c3e);
	color: #fff;
}
.fav-clear:focus-visible { outline: 2px solid var(--client-color, #203c3e); outline-offset: 2px; }

/* ── the grid ─────────────────────────────────────────────────────────
   Compact rows rather than tiles: a saved list is for scanning and
   getting back to something, not for browsing. */
.fav-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 12px;
	align-items: stretch;
}

/* ── the card ─────────────────────────────────────────────────────────
   A column: title, one line of summary, then the actions. */
.fav-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(10, 25, 47, .04);
	transition: border-color .18s ease, box-shadow .18s ease;
}
.fav-card:hover {
	border-color: rgba(32, 60, 62, .22);
	box-shadow: 0 8px 22px rgba(10, 25, 47, .08);
}

/* ── item type indicator (post, news, calculator, guide, tool) ── */
.fav-card__meta {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.fav-card__badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2.5px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0.035em;
	text-transform: uppercase;
	white-space: nowrap;
	border: 1px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.fav-card__badge svg {
	flex-shrink: 0;
	display: block;
}

/* Calculator: tech/math clear blue */
.fav-card__badge--calculator {
	background: #f0f9ff;
	color: #0284c7;
	border-color: rgba(2, 132, 199, 0.22);
}

/* News: editorial burnt amber/orange */
.fav-card__badge--news {
	background: #fffbeb;
	color: #b45309;
	border-color: rgba(180, 83, 9, 0.22);
}

/* Post / Article: classic brand slate-teal */
.fav-card__badge--post,
.fav-card__badge--article {
	background: #f0f7f7;
	color: var(--client-color, #203c3e);
	border-color: rgba(32, 60, 62, 0.18);
}

/* Guide: vibrant forest emerald */
.fav-card__badge--guide {
	background: #ecfdf5;
	color: #047857;
	border-color: rgba(4, 120, 87, 0.22);
}

/* Tool: rich purple */
.fav-card__badge--tool {
	background: #f5f3ff;
	color: #6d28d9;
	border-color: rgba(109, 40, 217, 0.2);
}

/* Page / Fallback: crisp cool gray */
.fav-card__badge--page,
.fav-card__badge--default {
	background: #f3f4f6;
	color: #4b5563;
	border-color: rgba(107, 114, 128, 0.2);
}

.fav-card__title {
	margin: 0 0 4px;
	min-width: 0;
	font-family: var(--font-display, Georgia, serif);
	font-weight: 700;
	font-size: 15.5px;
	line-height: 1.32;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}
.fav-card__title a {
	color: var(--client-color, #203c3e);
	text-decoration: none;
}
.fav-card__title a:hover { text-decoration: underline; text-underline-offset: 2px; }

.fav-card__desc {
	margin: 0;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #6b7280;
	/* exactly one line, ending in dots rather than a hard cut */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── actions ──────────────────────────────────────────────────────────── */
.fav-card__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	/* auto keeps the divider level across every card in a row */
	margin: 10px -6px -2px 0;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--color-border, #eef0f2);
}

.fav-act {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background: none;
	color: #9ca3af;
	cursor: pointer;
	transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.fav-act:hover {
	background: var(--color-bg-section, #f3f4f6);
	color: var(--client-color, #203c3e);
}
.fav-act:focus-visible { outline: 2px solid var(--client-color, #203c3e); outline-offset: 2px; }
.fav-act.is-done {
	background: var(--client-color-light, #dfeced);
	color: var(--client-color, #203c3e);
	border-color: rgba(32, 60, 62, .25);
}

/* the remove control keeps the saved colour so its state reads at a glance */
.fav-card .fav-act--remove {
	margin-left: 2px;
	color: var(--secondary-color-dark, #7f4f07);
	background: var(--secondary-color-light, #fffaf3);
	border-color: rgba(176, 141, 87, .32);
}
.fav-card .fav-act--remove:hover {
	background: var(--secondary-color, #B08D57);
	border-color: var(--secondary-color, #B08D57);
	color: #fff;
}

@media (max-width: 640px) {
	.fav-list { grid-template-columns: 1fr; gap: 10px; }
	.fav-card { padding: 13px 14px; }
	.fav-card__title { font-size: 15px; }
	.fav-card__desc { font-size: 12px; }
	.fav-act { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
	.fav-card, .fav-act { transition: none; }
}

/* ── loading / empty states ───────────────────────────────────────────── */
.fav-skel {
	height: 104px;
	border-radius: 12px;
	background: linear-gradient(90deg, rgba(32,60,62,.055) 25%, rgba(32,60,62,.11) 37%, rgba(32,60,62,.055) 63%);
	background-size: 400% 100%;
	animation: adn-fav-shimmer 1.3s ease-in-out infinite;
}
@keyframes adn-fav-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

.fav-empty {
	max-width: 520px;
	margin: 8px auto 0;
	padding: 40px 28px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 14px;
	box-shadow: 0 8px 26px rgba(10, 25, 47, .05);
}
.fav-empty__icon {
	width: 58px; height: 58px; margin: 0 auto 16px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--secondary-color-light, #fffaf3);
	color: var(--secondary-color, #B08D57);
}
.fav-empty h2 {
	margin: 0 0 8px;
	font-family: var(--font-display, Georgia, serif);
	font-weight: 400;
	font-size: clamp(19px, 2vw, 23px);
	color: var(--client-color, #203c3e);
}
.fav-empty p {
	margin: 0 auto 22px;
	max-width: 36ch;
	font-size: 14px;
	line-height: 1.65;
	color: var(--color-muted, #6b7280);
}

/* a result of nothing still deserves a surface, not bare text adrift */
.fav-nohits {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 420px;
	margin: 4px auto 0;
	padding: 30px 24px;
	text-align: center;
	background: #fff;
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(10, 25, 47, .04);
}
.fav-nohits[hidden] { display: none !important; }
.fav-nohits__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--secondary-color-light, #fffaf3);
	color: var(--secondary-color, #B08D57);
}
.fav-nohits__text {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--color-muted, #6b7280);
}
.fav-nohits__reset {
	padding: 8px 18px;
	border: 1px solid var(--client-color, #203c3e);
	border-radius: 999px;
	background: none;
	font: inherit;
	font-size: 13px;
	color: var(--client-color, #203c3e);
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.fav-nohits__reset:hover { background: var(--client-color, #203c3e); color: #fff; }

.fav-error { text-align: center; padding: 30px 20px; color: var(--color-muted, #6b7280); }

@media (max-width: 560px) {
	.fav-list { grid-template-columns: 1fr; }
	.fav-clear { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.adn-fav-btn, .fav-card { transition: none; }
	.adn-fav-btn.is-pop .adn-fav-btn__icon { animation: none; }
	.fav-skel { animation: none; }
}

/* ── inside the post banner's share cluster ───────────────────────────────
   .hero-share-btns button wins on specificity (two selectors) and gives the
   control the banner's own translucent look. Only the saved state needs
   saying again, at the same weight, so it reads against the dark image. */
.hero-share-btns .adn-fav-btn.is-saved {
	background: var(--secondary-color, #B08D57);
	color: #fff;
	border: none;
}
.hero-share-btns .adn-fav-btn.is-saved:hover { background: var(--secondary-color-dark, #7f4f07); }
.hero-share-btns .adn-fav-btn.is-saved .adn-fav-btn__icon svg { fill: currentColor; }
.hero-share-btns .adn-fav-btn__icon svg { width: 15px; height: 15px; }