/* fonts.css - page-specific styles for /fonts/index.html
   Uses variables & base rules from /css/main.css (already included). */

:root{
  --item-gap: 1rem;
}

.ack { color:var(--text); }

/* Fonts list area */
.fonts-list{ display:flex; flex-direction:column; gap:1rem; margin-top:1rem; margin-bottom:1rem; }
.font-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem;
  border-radius:8px;
  transition:background .12s ease, transform .08s ease;
  background-color:var(--typebox);

}
.font-item:hover{ transform:translateY(-2px); background:rgba(175,28,46,0.03); }

/* Left column (name + desc) */
.font-left{ flex:1 1 auto; min-width:0; }
.font-right{ display:flex; gap:.5rem; align-items:center; flex-shrink:0; }

/* Name button - so it's keyboard focusable but looks like plain text */
.font-name{
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:left;
  font-family: inherit;
}
.font-name:focus{ outline:3px solid rgba(175,28,46,0.12); border-radius:6px; }

/* specimen-name variations */
.specimen-name{
  display:inline-block;
  font-size:4rem;
  line-height:1;
  font-weight:600;
  margin-bottom:.25rem;
  color:var(--text);
  letter-spacing: .02em;
}

/* Apply specific font family when available */
.specimen-name.anchu{ font-family: "anchu", ui-monospace, Menlo, monospace; font-weight:400; }
.specimen-name.upcoming-sample{ font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight:600; font-style:italic; }

/* Apply specific font family when available */
.specimen-name.Karnata-GTN{ font-family: "Karnata-GTN", ui-monospace, Menlo, monospace; font-weight:400; }
.specimen-name.upcoming-sample{ font-family: "IBM Plex Sans", system-ui, sans-serif; font-weight:600; font-style:italic; }


/* Description clickable */
.font-desc{ margin:.25rem 0 .5rem; color:var(--muted); font-size:.97rem; }
.font-desc.clickable{ cursor:pointer; }
.font-desc.clickable:hover{ color:var(--text); text-decoration:underline; }

/* font-meta badges align */
.font-meta{ margin-top:.4rem; display:flex; gap:.4rem; align-items:center; }

/* Upcoming style tweak */
.upcoming h2{ margin:0 0 .5rem 0; color:var(--text); font-size:1.05rem; }

/* Make layout wrap better on small screens */
@media (max-width:720px){
  .font-item{ flex-direction:column; align-items:flex-start; }
  .font-right{ width:100%; display:flex; justify-content:flex-start; gap:.5rem; margin-top:.5rem; }
}

/* Ensure buttons match main page buttons */
.font-right .btn{ padding:.45rem .65rem; font-weight:600; border-radius:6px; }
.font-right .btn.ghost{ border:1px solid var(--brand); color:var(--brand); background:transparent; }