/*
Theme Name: Rudi Dev Portfolio
Theme URI: https://rudydev.my.id
Author: Rudi Suryadi
Author URI: https://rudydev.my.id
Description: Custom WordPress theme hasil konversi dari portfolio static HTML — versi 2.0 dengan tampilan baru yang dibangun dengan Tailwind CSS. Desain editorial kertas hangat dengan aksen oranye, dilengkapi Custom Post Type Projek & Konten sehingga semua kartu portfolio bisa dikelola dari dashboard WordPress.
Version: 2.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rudi-dev
*/

/*
 * Sebagian besar styling memakai utility Tailwind (assets/css/tailwind.css).
 * Di sini hanya CSS kecil yang tidak bisa diwakili utility class:
 */

html {
  scroll-behavior: smooth;
}

/* Menu navigasi hasil render wp_nav_menu (struktur ul/li otomatis dari WP). */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.875rem;
  font-weight: 500;
}
.nav-menu a {
  color: #9aa0ab;
  transition: color 0.2s;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a {
  color: #f2f2f6;
  font-weight: 700;
}
/* Kompatibilitas: menu item dengan CSS class "nav-cta" jadi tombol oranye. */
.nav-menu .nav-cta {
  background: #ff5a1f;
  color: #fff !important;
  border: 1px solid #ff5a1f;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 700;
}
.nav-menu .nav-cta:hover {
  background: #ff7a45;
}

/* ── Micro-interactions ── */

/* Scroll reveal: fade-up bertingkat (stagger via --reveal-i). */
[data-reveal] {
  opacity: 0;
}
[data-reveal].is-revealed {
  opacity: 1;
  animation: rdReveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--reveal-i, 0) * 60ms);
}
@keyframes rdReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Fade-in panel saat ganti tab. */
@keyframes rdFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.tab-panel.tab-enter {
  animation: rdFadeUp 0.28s ease;
}

/* Marquee berhenti saat di-hover. */
.marquee-hover:hover .animate-marquee {
  animation-play-state: paused;
}

/* Underline animasi pada link menu. */
.nav-menu a {
  position: relative;
}
.nav-menu a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav-menu a:hover::after,
.nav-menu .current-menu-item > a::after {
  transform: scaleX(1);
}

/* Tombol magnetic: gerak halus mengikuti kursor. */
.magnetic {
  transition: transform 0.18s ease-out;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
  }
  [data-reveal].is-revealed {
    animation: none !important;
  }
  .tab-panel.tab-enter {
    animation: none;
  }
  .magnetic {
    transition: none;
  }
}

/* Offset nav sticky saat admin bar tampil. */
body.admin-bar header {
  top: 32px;
}
@media (max-width: 782px) {
  body.admin-bar header {
    top: 46px;
  }
}

/* Konten editor (the_content) di halaman detail. */
.entry-content p {
  margin-bottom: 1rem;
  line-height: 1.75;
}
.entry-content h2,
.entry-content h3 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  margin: 1.75rem 0 0.5rem;
}
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee {
    animation: none;
  }
  html {
    scroll-behavior: auto;
  }
}