/* App-download panel and home link for the /mayon-volcano/ pages. Kept apart
   from federation.css, which is captured generated output, so a republish of
   that stylesheet cannot take these rules with it. */

.site-nav { margin-bottom: 2.5rem; font-size: .95rem; }
.site-nav a { color: var(--accent, #e8b84b); text-decoration: none; }
.site-nav a:hover { text-decoration: underline; }

.app-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem 2.5rem;
  margin: 3rem 0 0; padding: 1.6rem 1.8rem;
  border: 1px solid rgba(232, 184, 75, .45); border-radius: 14px;
  background: linear-gradient(135deg, rgba(232, 184, 75, .09), rgba(255, 255, 255, .02));
}
.app-cta h2 { margin: 0 0 .45rem; font-size: clamp(1.35rem, 2.6vw, 1.8rem); }
.app-cta p { margin: 0; color: var(--ink, #eef6f5); }
.app-cta .app-cta-boundary { margin-top: .7rem; font-size: .88rem; color: var(--muted, #a8b8b6); }
.app-cta .app-cta-boundary a { color: #8edbd0; }

.app-cta-links { display: flex; flex-direction: column; gap: .7rem; min-width: 15rem; }
.app-cta-links a {
  display: block; padding: .8rem 1.1rem; border-radius: 10px; text-align: center; text-decoration: none;
  font-weight: 600; color: var(--ink, #eef6f5); border: 1px solid rgba(238, 246, 245, .3);
}
.app-cta-links a:hover { border-color: var(--accent, #e8b84b); }

/* The visitor's own store goes first and filled; the other stays one tap away. */
.app-cta-links a[data-store="play"],
.app-cta[data-platform="ios"] .app-cta-links a[data-store="app-store"] {
  order: -1; background: var(--accent, #e8b84b); color: #071110; border-color: var(--accent, #e8b84b);
}
.app-cta[data-platform="ios"] .app-cta-links a[data-store="play"] {
  order: 0; background: none; color: var(--ink, #eef6f5); border-color: rgba(238, 246, 245, .3);
}

@media (max-width: 760px) {
  .app-cta { grid-template-columns: 1fr; margin-top: 2rem; padding: 1.3rem; }
  .app-cta-links { min-width: 0; }
}