/*
  Front-end styles for Orbital Hub.

  Design goals:
  - Minimal and theme-friendly: typography inherits from the theme.
  - Customization via CSS variables set on the block wrapper.
  - Responsive: on small screens we “dock” corner buttons below by default.
*/

.mph-oh{
  /* Default variable fallbacks (themes/sites can override these) */
  --mph-oh-circle-bg: #ffd400;
  --mph-oh-circle-size: 60vmin;
  --mph-oh-btn-size: 9vmin;
  --mph-oh-btn-bg: #111;
  --mph-oh-btn-fg: #fff;
  --mph-oh-donate-bg: #e83b63;
  --mph-oh-donate-fg: #fff;
  --mph-oh-corners-inset: 18px;

  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3vw, 48px);
  box-sizing: border-box;
}

/* The central circle */
.mph-oh__circle{
  width: clamp(280px, var(--mph-oh-circle-size), 760px);
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  background: var(--mph-oh-circle-bg);
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vmin, 64px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  box-sizing: border-box;
}

/* Corner links (absolute on desktop) */
.mph-oh__corner-link{
  position: absolute;
  width: clamp(64px, var(--mph-oh-btn-size), 110px);
  height: clamp(64px, var(--mph-oh-btn-size), 110px);
  border-radius: 9999px;
  background: var(--mph-oh-btn-bg);
  color: var(--mph-oh-btn-fg);
  display: grid;
  place-items: center;
  text-decoration: none;
  line-height: 1.1;
  text-align: center;
  padding: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  box-sizing: border-box;
}

.mph-oh__corner-link:focus{
  outline: 3px solid rgba(0,0,0,0.35);
  outline-offset: 3px;
}

.mph-oh__corner-link--tl{ top: var(--mph-oh-corners-inset); left: var(--mph-oh-corners-inset); }
.mph-oh__corner-link--tr{ top: var(--mph-oh-corners-inset); right: var(--mph-oh-corners-inset); }
.mph-oh__corner-link--bl{ bottom: var(--mph-oh-corners-inset); left: var(--mph-oh-corners-inset); }
.mph-oh__corner-link--br{ bottom: var(--mph-oh-corners-inset); right: var(--mph-oh-corners-inset); }

/* Donate button overlaps top of the circle */
.mph-oh__donate-link{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-1 * (clamp(280px, var(--mph-oh-circle-size), 760px) / 2) + 6px));
  z-index: 5;

  width: clamp(70px, calc(var(--mph-oh-btn-size) + 1vmin), 120px);
  height: clamp(70px, calc(var(--mph-oh-btn-size) + 1vmin), 120px);
  display: grid;
  place-items: center;
  text-decoration: none;
  color: var(--mph-oh-donate-fg);
  background: var(--mph-oh-donate-bg);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  box-sizing: border-box;
}

/* Simple round style */
.mph-oh__donate-link.is-round{
  border-radius: 9999px;
}

/*
  Heart style:
  We keep the clickable area a square for usability; the heart is purely visual.
  The label stays readable because it is layered above pseudo-elements.
*/
.mph-oh__donate-link.is-heart{
  border-radius: 16px;
  overflow: visible;
  position: absolute;
}

.mph-oh__donate-link.is-heart::before,
.mph-oh__donate-link.is-heart::after{
  content: "";
  position: absolute;
  width: 56%;
  height: 56%;
  background: var(--mph-oh-donate-bg);
  border-radius: 9999px;
  top: 10%;
  z-index: 0;
}

.mph-oh__donate-link.is-heart::before{ left: 12%; }
.mph-oh__donate-link.is-heart::after{ right: 12%; }

.mph-oh__donate-label{
  position: relative;
  z-index: 1;
  font-weight: 600;
}

/* Mobile behavior: "dock" puts corners into a row under the circle */
@media (max-width: 720px){
  .mph-oh.mph-oh--dock{
    grid-auto-rows: auto;
    gap: 16px;
  }

  .mph-oh.mph-oh--dock .mph-oh__corner-link{
    position: static;
    width: min(42vw, 120px);
    height: 56px;
    border-radius: 9999px;
  }

  .mph-oh.mph-oh--dock .mph-oh__corners{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: min(520px, 100%);
    justify-items: stretch;
  }

  /* Donate stays near top of circle, but reduce overlap */
  .mph-oh.mph-oh--dock .mph-oh__donate-link{
    transform: translate(-50%, calc(-1 * (clamp(280px, var(--mph-oh-circle-size), 760px) / 2) + 2px));
  }
}

/* Alternate mobile mode: stack (everything flows, no fixed corners) */
@media (max-width: 720px){
  .mph-oh.mph-oh--stack .mph-oh__corner-link{
    position: static;
  }

  .mph-oh.mph-oh--stack .mph-oh__corners{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    width: min(420px, 100%);
  }
}