/* Clean medium-color Pearto shell + category browser. Presentation only. */
:root {
  --sr-ink: #10274a;
  --sr-copy: #5d6f8e;
  --sr-line: #dce5f0;
  --sr-panel: #ffffff;
  --sr-page: #f5f8fc;
  --sr-shadow: 0 14px 34px rgba(28, 52, 91, .08);
}

/* Top navigation --------------------------------------------------------- */
.site-nav {
  border-bottom: 1px solid #e5ebf3 !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 7px 22px rgba(34, 56, 92, .045) !important;
}

.nav-kids-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 12px !important;
  border: 1px solid #f0d79a !important;
  border-radius: 999px !important;
  background: #fff1ca !important;
  color: #6b4a0f !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.nav-kids-pill::before {
  content: "✦";
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #ffd56f;
  color: #714d00;
  font-size: 12px;
}

.nav-kids-pill:hover { background: #ffe9ad !important; transform: translateY(-1px); }

/* Category page ---------------------------------------------------------- */
.categories-refresh-page { background: var(--sr-page); color: var(--sr-ink); }

.categories-refresh-page main {
  background:
    radial-gradient(circle at 12% 8%, rgba(126, 196, 228, .16), transparent 25%),
    radial-gradient(circle at 88% 10%, rgba(138, 198, 163, .14), transparent 24%),
    var(--sr-page);
}

.category-refresh-hero { padding: 38px 0 24px; }
.category-refresh-hero .breadcrumbs { margin-bottom: 18px; }

.category-refresh-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding: 30px 32px;
  border: 1px solid var(--sr-line);
  border-radius: 24px;
  background: rgba(255,255,255,.93);
  box-shadow: var(--sr-shadow);
}

.category-refresh-hero h1 {
  margin: 8px 0 10px;
  max-width: 760px;
  color: var(--sr-ink);
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.category-refresh-hero p { max-width: 720px; margin: 0; color: var(--sr-copy); font-size: 16px; line-height: 1.65; }

.category-hero-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.category-hero-chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #dce7ee;
  border-radius: 999px;
  background: #eef7fb;
  color: #355978;
  font-size: 12px;
  font-weight: 800;
}

.category-browser-section { padding: 0 0 48px; }

.category-browser-shell {
  padding: 24px;
  border: 1px solid #dbe4ef;
  border-radius: 26px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 46px rgba(34, 54, 88, .07);
}

.category-browser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding: 0 2px 18px;
  border-bottom: 1px solid #e8edf4;
}
.category-browser-head h2 { margin: 0 0 4px; color: var(--sr-ink); font-size: 24px; }
.category-browser-head p { margin: 0; color: var(--sr-copy); font-size: 14px; }
.category-browser-head a { color: #365f8d; font-size: 13px; font-weight: 800; text-decoration: none; }

.category-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px;
}

.category-choice {
  --card-bg: #e4f3ea;
  --card-border: #c9e6d5;
  --icon-bg: #c9ead8;
  --icon-ink: #18755b;
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) 34px;
  align-items: center;
  gap: 13px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  background: var(--card-bg);
  color: var(--sr-ink);
  text-decoration: none;
  box-shadow: 0 7px 18px rgba(32, 52, 82, .045);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.category-choice:nth-child(8n+2) { --card-bg:#f4e4ec; --card-border:#eacbd9; --icon-bg:#efcede; --icon-ink:#aa386b; }
.category-choice:nth-child(8n+3) { --card-bg:#e2eef9; --card-border:#c9ddf0; --icon-bg:#cbe2f6; --icon-ink:#2367ad; }
.category-choice:nth-child(8n+4) { --card-bg:#f8ebcd; --card-border:#eed8a8; --icon-bg:#f5d994; --icon-ink:#9a6007; }
.category-choice:nth-child(8n+5) { --card-bg:#ebe5f7; --card-border:#d9cef0; --icon-bg:#d9ccf4; --icon-ink:#6647b7; }
.category-choice:nth-child(8n+6) { --card-bg:#dff1f2; --card-border:#c4e3e4; --icon-bg:#bfe6e8; --icon-ink:#19727b; }
.category-choice:nth-child(8n+7) { --card-bg:#f5e1e1; --card-border:#ebc8ca; --icon-bg:#efc9cc; --icon-ink:#a93f4e; }
.category-choice:nth-child(8n+8) { --card-bg:#e6e8f8; --card-border:#d1d5f0; --icon-bg:#d4d7f6; --icon-ink:#4f56b8; }

.category-choice:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 26px rgba(34, 54, 88, .09);
}

.category-choice-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 15px;
  background: var(--icon-bg);
  color: var(--icon-ink);
}
.category-choice-icon svg { width: 24px; height: 24px; }
.category-choice-copy { min-width: 0; }
.category-choice-copy strong { display: block; color: var(--sr-ink); font-size: 15px; line-height: 1.25; }
.category-choice-copy small { display: block; margin-top: 5px; color: #536987; font-size: 12px; font-weight: 650; }
.category-choice-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(55,75,110,.12);
  border-radius: 50%;
  background: rgba(255,255,255,.58);
  color: #284a72;
  font-size: 17px;
  font-weight: 800;
}

/* Footer ---------------------------------------------------------------- */
.footer.footer-refresh {
  margin-top: 0 !important;
  padding: 28px 0 18px !important;
  border-top: 1px solid #dfe7f0 !important;
  background: #edf3f8 !important;
  color: var(--sr-ink) !important;
}

.footer-refresh-main {
  display: grid;
  grid-template-columns: minmax(220px,.9fr) minmax(0,1.65fr) minmax(220px,.75fr);
  gap: 16px;
  align-items: stretch;
}

.footer-refresh-panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid #d9e3ed;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
}

.footer-brand-panel .brand { margin-bottom: 10px; }
.footer-brand-panel p { margin: 0; color: var(--sr-copy); line-height: 1.55; }
.footer-mini-trust { display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }
.footer-mini-trust span { padding:6px 9px; border:1px solid #dce5ee; border-radius:999px; background:#f6f9fc; color:#526781; font-size:11px; font-weight:750; }

.footer-link-groups { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.footer-link-group strong { display:block; margin-bottom:10px; color:var(--sr-ink); font-size:13px; }
.footer-link-group a { display:block; width:fit-content; margin:7px 0; color:#58708e !important; font-size:13px; text-decoration:none; }
.footer-link-group a:hover { color:#244f82 !important; text-decoration:underline; text-underline-offset:3px; }

.footer-start-panel { background: linear-gradient(145deg,#e5eff9,#e8e5f5) !important; }
.footer-start-panel strong { display:block; margin-bottom:8px; color:var(--sr-ink); font-size:16px; }
.footer-start-panel p { margin:0 0 16px; color:var(--sr-copy); font-size:13px; line-height:1.55; }
.footer-start-actions { display:flex; flex-wrap:wrap; gap:8px; }
.footer-start-actions a { display:inline-flex; min-height:38px; align-items:center; justify-content:center; padding:8px 12px; border-radius:11px; font-size:12px; font-weight:800; text-decoration:none; }
.footer-start-actions .footer-primary { background:#193c69; color:#fff !important; }
.footer-start-actions .footer-secondary { border:1px solid #cbd7e5; background:rgba(255,255,255,.72); color:#315778 !important; }

.footer-refresh .footer-disclaimer { margin:16px 0 0 !important; padding:14px 16px !important; border:1px solid #dce5ef !important; border-radius:14px !important; background:rgba(255,255,255,.68) !important; color:#62758f !important; font-size:11px !important; line-height:1.55 !important; }
.footer-refresh .footer-legal { margin-top:14px !important; padding-top:14px !important; border-top:1px solid #d9e3ec !important; color:#6a7d95 !important; font-size:11px !important; }
.footer-refresh .footer-legal a { color:#536e8d !important; }

@media (max-width: 1080px) {
  .category-choice-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .footer-refresh-main { grid-template-columns: 1fr 1.6fr; }
  .footer-start-panel { grid-column: 1 / -1; }
  .nav-kids-pill { padding-inline:10px !important; }
}

@media (max-width: 820px) {
  .category-refresh-hero-card { grid-template-columns: 1fr; padding:24px; }
  .category-hero-stats { justify-content:flex-start; }
  .category-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .footer-refresh-main { grid-template-columns: 1fr; }
  .footer-link-groups { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .nav-kids-pill { display:none !important; }
}

@media (max-width: 560px) {
  .category-browser-shell { padding:15px; border-radius:20px; }
  .category-browser-head { align-items:flex-start; flex-direction:column; }
  .category-choice-grid { grid-template-columns:1fr; gap:10px; }
  .category-choice { min-height:80px; padding:13px; }
  .footer-link-groups { grid-template-columns:1fr 1fr; }
}
