/*
  Study Hub add-on styles (brand)
  Keeps the licensed template intact, only adds layout + library/category UI.
*/

/*
  Header brand (index.html)
  - Logo enlarged on home
  - Oceania wordmark scales relative to the logo
  - Decorative text-ring animation sits just below
*/

.j2d-brand {
  /* default sizing (other pages can override with --j2d-logo-size) */
  --j2d-logo-size: 56px;
  --j2d-wordmark-h: calc(var(--j2d-logo-size) * 0.70);

  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.j2d-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.j2d-rccg {
  width: var(--j2d-logo-size);
  height: var(--j2d-logo-size);
  object-fit: contain;
}

.j2d-wordmark-wrap {
  height: var(--j2d-wordmark-h);
  width: min(420px, 42vw);
  display: inline-flex;
  align-items: center;
}

.j2d-wordmark {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* Home only: enlarge logo by ~50% */
.j2d-home .j2d-brand {
  --j2d-logo-size: 84px;
}

@media (max-width: 768px) {
  .j2d-home .j2d-brand { --j2d-logo-size: 72px; }
  .j2d-wordmark-wrap { width: min(320px, 52vw); }
}

@media (max-width: 480px) {
  .j2d-home .j2d-brand { --j2d-logo-size: 64px; }
  .j2d-wordmark-wrap { width: min(260px, 56vw); }
}

/* Text ring loader (scoped; does not affect page/body styles) */
.j2d-brand-loader {
  margin-left: calc(var(--j2d-logo-size) * 0.15);
  margin-top: 6px;
  opacity: 0.9;
  pointer-events: none;
}

.j2d-ring-preloader {
  --ring-size: 7.6em;
  --ring-depth: 4.2em;
  --ring-font: 1.55em;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--ring-size);
  height: var(--ring-size);
  font-family: Dosis, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: #007a3f;
  perspective: 40em;
  transform-style: preserve-3d;
  animation: j2dTiltSpin 8s linear infinite;
}

.j2d-ring {
  transform-style: preserve-3d;
  animation: j2dSpin 4s linear infinite;
  font-size: var(--ring-font);
  position: relative;
  height: 1.8rem;
  width: 0.9rem;
}

.j2d-ring:nth-child(even) {
  animation-direction: reverse;
}

.j2d-sector {
  font-weight: 800;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  text-transform: uppercase;
  transform: translateZ(var(--ring-depth));
  display: inline-block;
  width: 100%;
  height: 100%;
}

.j2d-sector:empty::before {
  background: linear-gradient(transparent 45%, currentColor 45% 55%, transparent 55%);
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* 30 sectors (12° each) */
.j2d-sector:nth-child(2)  { transform: rotateY(12deg)  translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(3)  { transform: rotateY(24deg)  translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(4)  { transform: rotateY(36deg)  translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(5)  { transform: rotateY(48deg)  translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(6)  { transform: rotateY(60deg)  translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(7)  { transform: rotateY(72deg)  translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(8)  { transform: rotateY(84deg)  translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(9)  { transform: rotateY(96deg)  translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(10) { transform: rotateY(108deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(11) { transform: rotateY(120deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(12) { transform: rotateY(132deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(13) { transform: rotateY(144deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(14) { transform: rotateY(156deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(15) { transform: rotateY(168deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(16) { transform: rotateY(180deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(17) { transform: rotateY(192deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(18) { transform: rotateY(204deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(19) { transform: rotateY(216deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(20) { transform: rotateY(228deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(21) { transform: rotateY(240deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(22) { transform: rotateY(252deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(23) { transform: rotateY(264deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(24) { transform: rotateY(276deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(25) { transform: rotateY(288deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(26) { transform: rotateY(300deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(27) { transform: rotateY(312deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(28) { transform: rotateY(324deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(29) { transform: rotateY(336deg) translateZ(var(--ring-depth)); }
.j2d-sector:nth-child(30) { transform: rotateY(348deg) translateZ(var(--ring-depth)); }

@keyframes j2dTiltSpin {
  from { transform: rotateY(0) rotateX(30deg); }
  to   { transform: rotateY(1turn) rotateX(30deg); }
}

@keyframes j2dSpin {
  from { transform: rotateY(0); }
  to   { transform: rotateY(1turn); }
}

@media (max-width: 480px) {
  .j2d-ring-preloader {
    --ring-size: 6.8em;
    --ring-depth: 3.6em;
    --ring-font: 1.25em;
  }
}

.j2d-hero-btn {
  display: flex;
  flex-direction: column;
  /* Center the liquid metal CTA so it feels balanced against the hero copy */
  align-items: center;
  /* Center the whole block within the hero content */
  width: fit-content;
  margin: 18px auto 0;
  gap: 10px;
}

.j2d-enter-caption {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: .2px;
}

.j2d-enter-subcaption {
  color: rgba(255,255,255,.75);
  font-size: 14px;
}

.j2d-lead {
  color: rgba(255,255,255,.75);
}

.j2d-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Category cards */
.j2d-cat-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 22px;
  height: 100%;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  cursor: pointer;
}

.j2d-cat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
}

.j2d-cat-title {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.j2d-cat-meta {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.j2d-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
}

.j2d-cat-desc {
  margin-top: 12px;
  margin-bottom: 0;
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.6;
}

/* Library */
.j2d-search.card {
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 22px;
}

.j2d-count {
  color: rgba(255,255,255,.8);
}

.j2d-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

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

@media (max-width: 576px) {
  .j2d-cards { grid-template-columns: 1fr; }
}

.j2d-manual-card {
  display: block;
  text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 18px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  height: 100%;
}

.j2d-manual-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
}

.j2d-manual-title {
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.3;
  margin: 8px 0 10px;
}

.j2d-manual-idea {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.j2d-chips {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.j2d-chip {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.15);
}

.j2d-empty {
  padding: 22px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.25);
  color: rgba(255,255,255,.75);
  text-align: center;
}