/*
Theme Name: Mitra Murni Perkasa
Theme URI: https://mitramurniperkasa.com
Author: MMP Web Team
Author URI: https://mitramurniperkasa.com
Description: Custom WordPress theme for PT Mitra Murni Perkasa (MMP) - Creating a Green Energy Ecosystem. Built from the MMP HTML template with full ACF Pro and WPML support.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.7
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: mmp
Tags: business, corporate, custom-logo, custom-menu, featured-images, translation-ready, two-columns, right-sidebar
*/

/*
 * This file carries the WordPress theme header plus small WP/WPML-specific
 * overrides. All visual styling lives in /assets/css/* (enqueued from
 * functions.php), keeping the original MMP template structure intact.
 */

/* Hide WPML's auto-injected footer language switcher —
   the theme renders its own switcher in the header. */
.wpml-ls-statics-footer,
.wpml-ls-statics-footer.wpml-ls-legacy-list-horizontal {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Theme fixes (WordPress context)
 * ------------------------------------------------------------------------- */

/* News card category pill: the base .news-pill is white-on-transparent
   (built for dark hero backgrounds). On the light news listing, related
   and tag cards it sits on a white background, so make it brand-blue. */
.news-card-meta .news-pill {
  border-color: rgba(33, 65, 130, 0.45);
  color: var(--primary);
}

/* Homepage news section had a fixed min-height (1090px) that left a large
   empty gap below the cards / "See All News" link. Let it hug its content. */
.news-section {
  min-height: auto;
}
.news-section .news-grid {
  margin-bottom: 0;
}
/* Keep the "See All News" link tight to the cards instead of a sparse row. */
.news-section .news-more {
  align-self: start;
  margin-top: 8px;
}

/* "Apply This Job" is an <a> in the theme (the static template used a
   <button>). Anchors are inline by default, so the button width/height
   were ignored — restore proper button presentation. */
.apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Homepage news-card image is a clickable <a> (the static template used a
   <div>). Inline anchors drop the fixed height + bottom margin, so the meta
   row collapsed onto the image. Restore block behavior. */
.news-card-image {
  display: block;
}

/* ---------------------------------------------------------------------------
 * Subtle scroll-reveal animations (gated by .mmp-anim added via JS so
 * no-JS visitors always see content). Short, gentle fade-up.
 * ------------------------------------------------------------------------- */
.mmp-anim [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.mmp-anim [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

/* Hero text gentle entrance each time a slide becomes active. */
.home-hero .hero-slide.is-active .hero-content > h1,
.home-hero .hero-slide.is-active .hero-content > p {
  animation: mmpHeroIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.home-hero .hero-slide.is-active .hero-content > p {
  animation-delay: 0.14s;
}
@keyframes mmpHeroIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mmp-anim [data-reveal],
  .home-hero .hero-slide.is-active .hero-content > h1,
  .home-hero .hero-slide.is-active .hero-content > p {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Parallax on the Sustainability banner image section. Desktop only —
 * background-attachment:fixed is janky/unsupported on iOS & most touch
 * devices — and off for reduced-motion.
 * ------------------------------------------------------------------------- */
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .sustainability-banner {
    background-attachment: fixed;
  }
}