/******************************************************
 * Quick Links – Theme CSS (paste in Theme → CSS)
 * Works with the HTML that uses classes:
 * .zr-quicklinks, .zr-ql-grid, .zr-ql-card, .zr-ql-icon,
 * .zr-ql-title, .zr-ql-sub, .zr-ql-inline
 ******************************************************/

/* =========================
   Sizing knobs (easy tuning)
   ========================= */
:root {
  /* Icon + type sizes */
  --ql-icon-size: 2.2rem;       /* ↑ make larger e.g., 2.4rem */
  --ql-title-size: 1.15rem;     /* ↑ 1.2–1.3rem for bigger headings */
  --ql-sub-size: 0.95rem;       /* ↑ 1.0rem to enlarge subtext */
  --ql-pill-font: 1rem;         /* size of “Submit / My Tickets” pills */

  /* Spacing */
  --ql-widget-pad: 28px;        /* outer padding of the whole widget */
  --ql-grid-gap: 20px;          /* space between cards */
  --ql-card-pad: 22px;          /* inner padding of each card */
  --ql-card-radius: 16px;       /* corner radius */

  /* Optional “big card” mode (min height) */
  --ql-card-minh: 0;            /* set to 120–140px for taller cards */

  /* Colors (tweak to match brand) */
  --ql-text: #1a1a1a;
  --ql-subtext: #666;
  --ql-card-bg: #fafafa;
  --ql-card-bg-hover: #fff;
  --ql-card-border: #eee;
  --ql-widget-border: #e6e6e6;
  --ql-pill-bg: #f1f5ff;
  --ql-pill-bg-hover: #e8f0ff;
  --ql-pill-border: #dbe7ff;
  --ql-pill-text: #1b4add;
}

/* Container */
.zr-quicklinks {
  border: 1px solid var(--ql-widget-border);
  border-radius: 14px;
  padding: var(--ql-widget-pad);
  background: #fff;
}

/* Title */
.zr-quicklinks h3 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 700;
}

/* Grid */
.zr-ql-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ql-grid-gap);
}
@media (max-width: 900px) {
  .zr-ql-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .zr-ql-grid { grid-template-columns: 1fr; }
}

/* Card (used by the two link cards and the tickets group) */
.zr-ql-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--ql-card-pad);
  min-height: var(--ql-card-minh);
  border: 1px solid var(--ql-card-border);
  border-radius: var(--ql-card-radius);
  text-decoration: none;
  color: var(--ql-text);
  background: var(--ql-card-bg);
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.zr-ql-card:hover {
  transform: translateY(-1px);
  background: var(--ql-card-bg-hover);
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Icon */
.zr-ql-icon {
  font-size: var(--ql-icon-size);
  line-height: 1;
}

/* Text blocks */
.zr-ql-title {
  font-size: var(--ql-title-size);
  font-weight: 700;
}
.zr-ql-sub {
  font-size: var(--ql-sub-size);
  color: var(--ql-subtext);
}

/* Inline “pills” (Submit a Ticket / My Tickets) */
.zr-ql-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.zr-ql-inline a {
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ql-pill-bg);
  border: 1px solid var(--ql-pill-border);
  text-decoration: none;
  color: var(--ql-pill-text);
  font-weight: 700;
  font-size: var(--ql-pill-font);
}
.zr-ql-inline a:hover { background: var(--ql-pill-bg-hover); }

/* Optional: “extra spacious” variant for a hero look.
   Apply class .zr-ql-card--xl to any card you want enlarged. */
.zr-ql-card--xl {
  padding: calc(var(--ql-card-pad) + 8px);
  min-height: max(var(--ql-card-minh), 140px);
}

/* Optional dark mode (if your theme flips to a dark body class) */
body.dark .zr-quicklinks {
  background: #101214;
  border-color: #2a2f35;
}
body.dark .zr-ql-card {
  background: #14181c;
  border-color: #222831;
  color: #e8eaed;
}
body.dark .zr-ql-card:hover {
  background: #171c21;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
body.dark .zr-ql-sub { color: #a5acb8; }
body.dark .zr-ql-inline a {
  background: #1a2230; border-color: #27324a; color: #93b4ff;
}
body.dark .zr-ql-inline a:hover { background: #1f2a3c; }