/* ==========================================================================
   AddGardenLinks theme — implements the AddGardenLinks design system
   (public/ds/addgardenlinks.css, loaded first) against the existing
   Link Directory Pro template markup. Same selectors as before; new tokens.
   ========================================================================== */

/* ---- Base ---- */

body {
  background-color: var(--bg-page) !important;
  color: var(--text-body);
  font-family: var(--font-body);
}

h1, h2, h3, .h1-title, .h2-title, .cat-card-title, .link-title, .brand-logo, .text-logo {
  font-family: var(--font-display) !important;
}

a {
  color: var(--accent);
  transition: color var(--dur-fast) var(--ease-soft);
}

a:hover {
  color: var(--accent-hover);
}

.h1-title, .h2-title {
  color: var(--text-heading) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-display);
}

.h1-title {
  font-size: var(--text-display-3);
}

.site-intro {
  color: var(--text-muted) !important;
  max-width: var(--measure);
}

/* ---- Hero (home page) ---- */

.agl-hero {
  text-align: center;
  padding: var(--space-16) var(--space-4) var(--space-12);
}

.agl-hero-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.agl-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-display-1);
  line-height: var(--leading-tight);
  color: var(--text-heading);
  max-width: 22ch;
  margin: 0 auto var(--space-4);
}

.agl-hero-sub {
  font-size: var(--text-body-lg);
  color: var(--text-muted);
  max-width: var(--measure);
  margin: 0 auto var(--space-8);
}

.agl-section-title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  color: var(--text-heading);
  margin-bottom: var(--space-4);
}

/* ---- Header ---- */

.header-container {
  background-color: var(--bg-page-alt) !important;
  border-bottom: var(--border-hairline) solid var(--border-soft);
}

.text-logo {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 22px !important;
}

.text-logo a {
  color: var(--text-heading) !important;
}

.site-stats .site-stat-number {
  font-family: var(--font-mono);
  color: var(--text-heading);
  font-weight: var(--weight-medium);
}

.site-stats .site-stat-label,
.site-stats .site-stat-divider {
  color: var(--text-faint);
}

.header-icons a,
.header-icons .lang-toggle {
  color: var(--text-muted) !important;
}

.header-icons a:hover {
  color: var(--accent) !important;
}

/* ---- Nav ---- */

.nav-scroller {
  background-color: var(--bg-page-alt) !important;
  border-bottom: var(--border-hairline) solid var(--border-soft);
}

.nav-scroller .nav,
.nav-underline {
  background-color: var(--bg-page-alt) !important;
  border-bottom: none !important;
  color: var(--text-body);
}

.nav-underline .nav-link {
  color: var(--text-muted) !important;
  font-weight: var(--weight-medium);
}

.nav-underline .nav-link:hover,
.nav-underline .nav-link[aria-current="page"] {
  color: var(--accent) !important;
}

.nav-underline .active {
  color: var(--accent) !important;
}

/* Submit CTA — the one bloom action per page */
.nav-submit-btn {
  background: var(--bloom) !important;
  color: var(--text-on-accent) !important;
  padding: 6px 16px !important;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-semibold) !important;
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}

.nav-submit-btn:hover {
  background: var(--peony-4) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ---- Search box ---- */

form .search-form,
.search-form {
  background: transparent;
  color: var(--text-body);
  border-radius: var(--radius-pill) !important;
}

form .search-form::placeholder {
  color: var(--text-faint);
}

.search-btn {
  background-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
  border-radius: var(--radius-pill);
}

.search-btn:hover {
  background-color: var(--accent-hover) !important;
}

/* Search + link-card + subcategory boxes -> .agl-card equivalent */
.shadow-sm.bg-white,
.shadow-sm.p-2.bg-white,
.bg-white {
  background-color: var(--surface-card) !important;
  border: var(--border-hairline) solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}

a:hover > .shadow-sm.bg-white,
a:hover > .shadow-sm.p-2.bg-white {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
  border-color: var(--border-accent);
}

.bg-featured {
  background-color: var(--bloom-soft) !important;
  border: var(--border-hairline) solid var(--peony-2);
}

/* ---- Category grid ---- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
}

.cat-card {
  position: relative;
  background-color: var(--surface-card) !important;
  border: var(--border-hairline) solid var(--border-soft) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-xs) !important;
  transition: box-shadow var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft);
}

/* Category colour stripe — set by data-cat on the card, see partials */
.cat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--cat-stripe, var(--accent));
  z-index: 1;
}

.cat-card:hover {
  border-color: var(--border-accent) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

.cat-card-title {
  color: var(--text-heading) !important;
  font-weight: var(--weight-semibold);
}

.cat-card-title:hover {
  color: var(--accent) !important;
}

.cat-card-count {
  color: var(--text-faint) !important;
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
}

.cat-pill {
  background-color: var(--cat-stripe-soft, var(--surface-sunk)) !important;
  color: var(--text-muted) !important;
  border: var(--border-hairline) solid var(--border-soft) !important;
  border-radius: var(--radius-pill);
}

.cat-pill:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.cat-pill-more {
  color: var(--accent) !important;
}

/* ---- Link cards (homepage / category / search / related) ---- */

.other-links {
  position: relative;
}

/* Category colour stripe on listing rows, same mechanism as cat-card */
.other-links > div,
.related-links-section .col-12 > div {
  position: relative;
  overflow: hidden;
}

.other-links[data-cat] > div::before,
.related-links-section .col-12[data-cat] > div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--cat-stripe, var(--accent));
}

.link-title {
  color: var(--text-heading) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
}

.description {
  color: var(--text-body) !important;
  font-size: var(--text-body-md);
}

.site-url, .site-url:hover {
  color: var(--text-faint) !important;
  font-family: var(--font-mono) !important;
  font-size: var(--text-body-sm);
}

.site-icon, .site-icon-small {
  border-radius: var(--radius-sm);
  border: var(--border-hairline) solid var(--border-soft);
  object-fit: cover;
}

/* "Editor's pick" style badge — bloom, per design system rule (one bloom accent, plus badges) */
.featured {
  background-color: var(--bloom) !important;
  color: var(--text-on-accent) !important;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 2px 8px;
}

.title-badge {
  color: var(--accent);
}

/* ---- Breadcrumbs ---- */

.breadcrumbs {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
}

.breadcrumbs a, .breadcrumbs a:hover {
  color: var(--text-faint);
}

.breadcrumbs .sep {
  color: var(--text-faint);
  margin: 0 4px;
}

/* ---- Sort / dropdowns ---- */

.dropdown-toggle-sort,
.dropdown-toggle-categories {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-soft);
  color: var(--text-body) !important;
  border-radius: var(--radius-sm);
}

.dropdown-menu {
  background-color: var(--surface-card);
  border: var(--border-hairline) solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.dropdown-item {
  color: var(--text-body) !important;
}

.dropdown-item:hover {
  background-color: var(--surface-sunk) !important;
}

.dropdown-item .icon-check-circle.active {
  color: var(--accent);
}

/* ---- Alerts ---- */

.alert-warning {
  background-color: var(--surface-sunk) !important;
  border: 1px dashed var(--border-strong) !important;
  color: var(--text-muted) !important;
  border-radius: var(--radius-md);
}

/* ---- Buttons ---- */

.btn {
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  transition: transform var(--dur-fast) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}

.btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* "Send for review" / submit — the page's bloom CTA */
.submit-button,
.btn.submit-button {
  background-color: var(--bloom) !important;
  color: var(--text-on-accent) !important;
  border: none;
  border-radius: var(--radius-pill);
}

.submit-button:hover {
  background-color: var(--peony-4) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.badge.bg-favorites,
.badge.bg-directions {
  background-color: var(--accent-soft) !important;
  color: var(--accent-hover) !important;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
}

/* ---- Forms ---- */

.form-control, .form-select {
  background-color: var(--surface-card);
  border: var(--border-hairline) solid var(--border-soft);
  color: var(--text-body);
  border-radius: var(--radius-sm);
}

.form-control:focus, .form-select:focus {
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.form-label {
  color: var(--text-body);
  font-weight: var(--weight-medium);
}

.form-hint {
  color: var(--text-faint);
  font-size: var(--text-body-sm);
}

/* ---- Pagination ---- */

.pagination .page-link {
  background-color: var(--surface-card);
  border: var(--border-hairline) solid var(--border-soft);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.pagination .page-item.active .page-link {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

.pagination .page-link:hover {
  color: var(--accent);
}

/* ---- Footer ---- */

.footer-container {
  background-color: var(--surface-sunk) !important;
  color: var(--text-body) !important;
  border-top: var(--border-hairline) solid var(--border-soft);
}

.footer-container .section-head {
  color: var(--text-faint);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
}

.footer-copyright {
  background-color: var(--surface-sunk) !important;
  color: var(--text-faint) !important;
  border-top: var(--border-hairline) solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
}

.page-footer a {
  color: var(--text-muted) !important;
}

.page-footer a:hover {
  color: var(--accent) !important;
}

.page-footer i {
  color: var(--text-faint);
}

.footer-text-logo, .footer-logo {
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
}

/* ---- Submit page: package cards ---- */

.submit-section {
  background: var(--surface-card);
  border: var(--border-hairline) solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6);
  box-shadow: var(--shadow-xs);
}

.submit-section-title {
  font-family: var(--font-display);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
  margin-bottom: var(--space-3);
}

.pkg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 700px) {
  .pkg-grid { grid-template-columns: 1fr; }
}

.pkg-card {
  position: relative;
  display: block;
  background: var(--surface-card);
  border: var(--border-thick) solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}

.pkg-card input[type="radio"] {
  display: none;
}

.pkg-card:hover {
  border-color: var(--border-strong);
}

.pkg-card.pkg-selected {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}

.pkg-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.pkg-price {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
}

.pkg-price-old {
  font-family: var(--font-mono);
  color: var(--text-faint);
  text-decoration: line-through;
  margin-right: 6px;
}

.pkg-features {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.pkg-features li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 6px;
}

.feat-yes::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.feat-no::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--text-faint);
}

.req {
  color: var(--bloom);
}

/* ---- Detail page ---- */

#details .shadow-sm.bg-white {
  border-radius: var(--radius-lg);
}

#details .row.mt-3 > div:first-child,
#details .row.mt-2 > div:first-child {
  color: var(--text-faint);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

#details .row.mt-3 > div:nth-child(2),
#details .row.mt-2 > div:nth-child(2) {
  color: var(--text-body);
}

.link-title-detail {
  font-family: var(--font-display) !important;
  font-size: var(--text-display-3);
  color: var(--text-heading) !important;
  font-weight: var(--weight-semibold) !important;
}

.detail-icon, .detail-screenshot {
  border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--border-soft);
}

.tags ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.tags ul li a {
  display: inline-flex;
  background: var(--surface-sunk);
  color: var(--text-muted) !important;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
  border: var(--border-hairline) solid transparent;
}

.tags ul li a:hover {
  color: var(--accent) !important;
  border-color: var(--border-accent);
}

.social-media a i {
  color: var(--text-muted);
}

.social-media a:hover i {
  color: var(--accent);
}

.related-links-section {
  border-top: var(--border-hairline) solid var(--border-soft);
}

.review-title {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--text-heading);
}

.icon-star {
  color: var(--border-strong) !important;
}

.icon-star.checked {
  color: var(--accent) !important;
}

.progress,
.user-ratings .progress {
  background-color: var(--surface-sunk) !important;
  border-radius: var(--radius-pill);
}

.progress-bar,
.user-ratings .progress-bar {
  background-color: var(--accent) !important;
}

.widget-selectable {
  background-color: var(--surface-sunk) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-body) !important;
  border-radius: var(--radius-sm);
}

.add-comment,
.comment-button {
  background-color: var(--accent) !important;
  border: none !important;
  color: var(--text-on-accent) !important;
  border-radius: var(--radius-sm);
}

.comment-box .review {
  border-top: var(--border-hairline) solid var(--border-soft);
  padding-top: var(--space-3);
}

.comment-box .name {
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
}

.comment-box .date {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
}

.comment-box .comment {
  color: var(--text-body);
}

/* ---- Interactive rating widget + comment button ---- */

.fullStar:before, .tmp_fs:before {
  color: var(--accent) !important;
}

.star:before, .tmp_es:before {
  color: var(--border-strong) !important;
}

.comment-button, .update-btn {
  background-color: var(--accent) !important;
  border: none !important;
  color: var(--text-on-accent) !important;
}

.add-comment {
  color: var(--accent) !important;
}

.title-badge {
  color: var(--accent) !important;
}

/* ---- Modal ---- */

.modal-content {
  background-color: var(--surface-card);
  border: var(--border-hairline) solid var(--border-soft);
  border-radius: var(--radius-lg);
}

.modal-header {
  border-bottom: var(--border-hairline) solid var(--border-soft);
}

.modal-title {
  font-family: var(--font-display);
  color: var(--text-heading);
}

/* ---- Sprig divider (see assets/ornament-sprig.svg) ---- */

.agl-sprig-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin: var(--space-12) 0;
}

.agl-sprig-divider img {
  height: 20px;
  opacity: 0.7;
}

/* ---- Bloom CTA band (home page close, category empty state) ---- */

.agl-cta-band {
  text-align: center;
  padding: var(--space-10) var(--space-4);
}

.agl-cta-band .btn {
  border-radius: var(--radius-pill);
  padding: 10px 28px;
}